/* ═══════════════════════════════════════════════
   LOKAYA GFX — Minimal Clean
   Black + White + Electric Blue #0ea5e9
═══════════════════════════════════════════════ */

:root {
  --blue:   #0ea5e9;
  --blue2:  #38bdf8;
  --blue3:  #0284c7;
  --bg:     #0a0a0a;
  --bg2:    #111111;
  --bg3:    #1a1a1a;
  --card:   #141414;
  --border: rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.05);
  --tx:     #f5f5f5;
  --tx2:    #888888;
  --tx3:    #444444;
  --nav:    rgba(10,10,10,.94);
  --inp:    #111111;
  --sel:    #0f0f0f;
  --mod:    rgba(0,0,0,.88);
}
[data-theme="light"] {
  --bg:     #ffffff;
  --bg2:    #f8f8f8;
  --bg3:    #f0f0f0;
  --card:   #ffffff;
  --border: rgba(0,0,0,.09);
  --border2:rgba(0,0,0,.05);
  --tx:     #0a0a0a;
  --tx2:    #666666;
  --tx3:    #aaaaaa;
  --nav:    rgba(255,255,255,.96);
  --inp:    #f8f8f8;
  --sel:    #f0f0f0;
  --mod:    rgba(0,0,0,.55);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
  transition: background .3s, color .3s;
  -webkit-font-smoothing: antialiased;
}
.font-bebas  { font-family: 'Bebas Neue', sans-serif; }
.font-mono   { font-family: 'DM Mono', monospace; }
.font-poppins{ font-family: 'DM Sans', sans-serif; }

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.013) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.013) 1px, transparent 1px);
  background-size: 48px 48px;
}
[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
}
body::after {
  content: '';
  position: fixed; top:-300px; left:-300px;
  width:700px; height:700px;
  background: radial-gradient(circle, rgba(14,165,233,.06) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}

/* NAVBAR */
.navbar-glass {
  background: var(--nav);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background .3s, border .3s;
}

/* CARDS */
.glass       { background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.glass-card  { background: var(--card); border: 1px solid var(--border); border-radius: 12px; transition: all .25s; }
.glass-card:hover { border-color: rgba(14,165,233,.25); box-shadow: 0 4px 28px rgba(14,165,233,.07); transform: translateY(-2px); }
.pricing-highlight { border-color: var(--blue) !important; box-shadow: 0 0 32px rgba(14,165,233,.14) !important; }

/* BUTTONS */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; border-radius: 8px;
  background: var(--blue); color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  border: none; cursor: pointer; text-decoration: none;
  transition: all .2s; white-space: nowrap;
}
.btn-primary:hover { background: var(--blue2); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(14,165,233,.3); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border);
  color: var(--tx2); font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all .2s; text-decoration: none;
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); background: rgba(14,165,233,.04); }

.btn-liquid  { background: var(--card); border: 1px solid var(--border); color: var(--tx2); cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .2s; text-decoration: none; display: inline-flex; align-items: center; }
.btn-liquid:hover { border-color: var(--blue); color: var(--blue); background: rgba(14,165,233,.04); }

.btn-purple  { background: var(--blue); border: none; color: #fff; cursor: pointer; font-family: 'DM Sans', sans-serif; font-weight: 600; transition: all .2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-purple:hover { background: var(--blue2); transform: translateY(-1px); }

.btn-icon    { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--bg3); border:1px solid var(--border); color:var(--tx2); cursor:pointer; font-size:12px; transition:all .2s; flex-shrink:0; }
.btn-icon:hover { color:var(--blue); border-color:rgba(14,165,233,.3); }

.btn-close   { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--bg3); border:1px solid var(--border); color:var(--tx2); cursor:pointer; transition:all .2s; flex-shrink:0; }
.btn-close:hover { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.3); color:#f87171; }

.btn-back    { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:8px; background:var(--bg3); border:1px solid var(--border); color:var(--tx2); font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500; cursor:pointer; transition:all .2s; text-transform:uppercase; letter-spacing:.06em; }
.btn-back:hover { color:var(--blue); border-color:rgba(14,165,233,.3); }
.btn-back i { transition: transform .2s; }
.btn-back:hover i { transform: translateX(-2px); }

.theme-btn   { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--bg3); border:1px solid var(--border); cursor:pointer; font-size:15px; transition:all .2s; flex-shrink:0; }
.theme-btn:hover { border-color:var(--blue); }

/* INPUTS */
.gfx-input   { width:100%; background:var(--inp); border:1px solid var(--border); border-radius:8px; padding:10px 13px; color:var(--tx); font-family:'DM Sans',sans-serif; font-size:14px; outline:none; transition:border-color .2s,box-shadow .2s; }
.gfx-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(14,165,233,.1); }
.gfx-input::placeholder { color:var(--tx3); }
select.gfx-input option { background:var(--sel); color:var(--tx); }
textarea.gfx-input { resize:vertical; }
.gfx-label   { display:block; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx2); margin-bottom:6px; }

/* MISC */
.badge       { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:4px; background:rgba(14,165,233,.1); border:1px solid rgba(14,165,233,.22); color:var(--blue); }
.section-tag { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); }
.status-pill { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:4px; border:1px solid; }
.glow-dot    { width:6px; height:6px; border-radius:50%; background:#22c55e; flex-shrink:0; animation:pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.3} }
.avatar-ring { box-shadow:0 0 0 2px var(--blue), 0 0 10px rgba(14,165,233,.2); }
.neon-text   { color:var(--blue); }
.pulse-glow  { box-shadow:0 0 20px rgba(14,165,233,.22); }
.stat-card-glow { box-shadow:0 0 14px rgba(14,165,233,.06); }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.float       { animation:float 5s ease-in-out infinite; }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.shimmer-text { background:linear-gradient(90deg,var(--tx) 0%,var(--blue) 40%,var(--blue2) 55%,var(--tx) 80%); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:shimmer 5s linear infinite; }
.progress-track { width:100%; height:4px; background:var(--bg3); border-radius:99px; overflow:hidden; }
.progress-fill  { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--blue),var(--blue2)); animation:fillBar 1.2s cubic-bezier(.23,1,.32,1) forwards; }
@keyframes fillBar { from{width:0} to{width:var(--pct)} }
.spinner     { width:28px; height:28px; border:2px solid var(--border); border-top-color:var(--blue); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.upload-zone { border:1.5px dashed var(--border); border-radius:10px; padding:20px; text-align:center; cursor:pointer; transition:all .2s; background:var(--bg3); }
.upload-zone:hover { border-color:var(--blue); background:rgba(14,165,233,.03); }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* VIEWS */
.view        { display:none; }
.active-view { display:block; }
.dash-section{ display:none; }
.active-dash { display:block; }
.tab-active  { background:rgba(14,165,233,.07)!important; border-color:rgba(14,165,233,.28)!important; color:var(--blue)!important; }
#mobileMenu      { display:none; }
#mobileMenu.open { display:flex; }
section[id]  { scroll-margin-top:72px; }

/* TOAST */
.toast-base  { position:fixed; bottom:24px; right:24px; z-index:9999; min-width:280px; max-width:360px; padding:13px 16px; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:13px; background:var(--bg2); border:1px solid var(--border); box-shadow:0 8px 32px rgba(0,0,0,.4); display:flex; align-items:center; gap:10px; transition:all .35s cubic-bezier(.23,1,.32,1); }
.toast-hidden { opacity:0; transform:translateY(12px); pointer-events:none; }
.toast-show   { opacity:1; transform:translateY(0); }

/* MODALS */
#lightbox,#updateWorksModal,#orderModal,#orderChoiceModal,#authModal,#reviewModal,#adminNoteModal { position:fixed; inset:0; z-index:10000; background:var(--mod); backdrop-filter:blur(12px); align-items:center; justify-content:center; padding:20px; }

/* ORDER CHOICE */
.order-choice-card { display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 16px; border-radius:10px; cursor:pointer; border:1px solid var(--border); background:var(--bg3); transition:all .2s; text-align:center; }
.order-choice-card:hover { transform:translateY(-2px); }
.order-choice-wa:hover      { border-color:rgba(34,197,94,.4);  background:rgba(34,197,94,.05); }
.order-choice-discord:hover { border-color:rgba(99,102,241,.4); background:rgba(99,102,241,.05); }
.order-choice-web:hover     { border-color:rgba(14,165,233,.4); background:rgba(14,165,233,.05); }

/* HERO */
.hero-tag { display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border-radius:6px; border:1px solid var(--border); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx2); background:var(--bg3); }
.hero-logo-frame { background:var(--card); border:1px solid var(--border); border-radius:20px; position:relative; overflow:hidden; }
.hero-logo-frame::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--blue),transparent); }
.corner-mark { position:absolute; width:14px; height:14px; }
.corner-tl   { top:12px;    left:12px;  border-top:1.5px solid var(--blue); border-left:1.5px solid var(--blue); }
.corner-tr   { top:12px;    right:12px; border-top:1.5px solid var(--blue); border-right:1.5px solid var(--blue); }
.corner-bl   { bottom:12px; left:12px;  border-bottom:1.5px solid var(--blue); border-left:1.5px solid var(--blue); }
.corner-br   { bottom:12px; right:12px; border-bottom:1.5px solid var(--blue); border-right:1.5px solid var(--blue); }
.stat-strip  { background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:14px 20px; text-align:center; }
.cat-btn     { padding:6px 14px; border-radius:6px; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500; color:var(--tx2); cursor:pointer; background:var(--bg3); border:1px solid var(--border); transition:all .2s; }
.cat-btn:hover, .cat-btn.tab-active { color:var(--blue); background:rgba(14,165,233,.07); border-color:rgba(14,165,233,.28); }
.site-logo-img { display:none; }

/* SCROLLBAR */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--blue3); border-radius:4px; }

/* LIGHT MODE */
[data-theme="light"] .text-gray-400  { color:#666 !important; }
[data-theme="light"] .text-gray-500  { color:#777 !important; }
[data-theme="light"] .text-gray-600  { color:#888 !important; }
[data-theme="light"] .text-white     { color:#0a0a0a !important; }
[data-theme="light"] .text-purple-400{ color:var(--blue) !important; }
[data-theme="light"] .text-purple-300{ color:var(--blue) !important; }
[data-theme="light"] body::after     { opacity:.2; }