/* ============================================================
   DigiTools — Design System v4
   Formal near-black UI · Indigo accent · Poppins / Inter
   ============================================================ */

:root {
  /* ============================================================
     DigiTools — Formal Black · neutral near-black + terracotta
     ============================================================ */

  /* ---- Surfaces: neutral near-black (formal, not warm) ---- */
  --bg0: #0a0a0b;   /* app base — near black */
  --bg1: #101013;   /* raised sections */
  --bg2: #151518;   /* cards */
  --bg3: #1d1d21;   /* inputs / hovered */
  --bg4: #27272c;   /* active / pressed */

  /* ---- Hairlines: neutral ---- */
  --border:  #202024;
  --border2: #2c2c32;
  --border3: #3a3a42;

  /* ---- Text: cool off-white ---- */
  --t1: #f4f4f5;   /* headings */
  --t2: #a1a1aa;   /* body — neutral gray */
  --t3: #6c6c76;   /* muted */

  /* ---- Primary accent: refined indigo (formal, cool) ---- */
  --accent:      #6366f1;   /* indigo — pops cleanly on near-black */
  --accent-hi:   #818cf8;   /* hover — lighter on dark */
  --accent-deep: #4f52d6;   /* pressed/borders */
  --accent-dim:  rgba(99,102,241,.14);
  --accent-bdr:  rgba(99,102,241,.34);
  --accent-glow: rgba(99,102,241,.28);

  /* ---- Secondary: warm sand for subtle info ---- */
  --cyan:      #c9a879;
  --cyan-hi:   #d9bc90;
  --cyan-dim:  rgba(201,168,121,.12);
  --cyan-bdr:  rgba(201,168,121,.3);

  /* ---- Value accent: prices — warm gold/tan ---- */
  --gold:      #e0a878;
  --gold-hi:   #ecbf94;
  --gold-deep: #c9905f;
  --gold-dim:  rgba(224,168,120,.12);
  --gold-bdr:  rgba(224,168,120,.3);

  /* ---- Status ---- */
  --ok:      #7fb069;
  --ok-dim:  rgba(127,176,105,.14);
  --err:     #e07a5f;
  --err-dim: rgba(224,122,95,.14);
  --warn:    #e0a878;
  --warn-dim:rgba(224,168,120,.14);

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 17px;
  --r-xl: 24px;

  /* ---- Elevation: soft on dark ---- */
  --sh-sm: 0 1px 2px rgba(0,0,0,.3);
  --sh-md: 0 6px 20px rgba(0,0,0,.32);
  --sh-lg: 0 20px 52px rgba(0,0,0,.45);
  --sh-glow: 0 6px 22px rgba(99,102,241,.3);

  --display: 'Poppins', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--body);
  background: var(--bg0);
  color: var(--t1);
  font-size: 14.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; }
img { max-width:100%; display:block; }
ul { list-style:none; }
i[class^="ri-"], i[class*=" ri-"] { line-height:1; }

::selection { background: rgba(204,120,92,.24); }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:var(--bg0); }
::-webkit-scrollbar-thumb { background:var(--border3); border-radius:5px; border:2px solid var(--bg0); }
::-webkit-scrollbar-thumb:hover { background:var(--t3); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; width:100%; }
main { flex: 1; }
.mono { font-family: var(--mono); }

/* ============ Loader ============ */
#loader {
  position: fixed; inset: 0;
  background: var(--bg0);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .35s, visibility .35s;
}
#loader.hidden { opacity: 0; visibility: hidden; }
.loader-mark { display:flex; flex-direction:column; align-items:center; gap:20px; }
.loader-logo {
  font-family: var(--display);
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  color: var(--t1);
  display:flex; align-items:center; gap:9px;
}
.loader-logo .mark { color: var(--accent); }
.loader-track { width: 180px; height: 3px; background: var(--border2); border-radius:2px; overflow: hidden; }
.loader-track::after {
  content:''; display:block; height:100%; width:45%;
  background: var(--accent); border-radius:2px;
  animation: loadslide 1.1s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes loadslide { 0% { margin-left:-45%; } 100% { margin-left:100%; } }

/* ============ Navbar ============ */
nav.topnav {
  background: rgba(13,13,15,.85);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--border);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 500;
}
.nav-inner { width:100%; max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:36px; }
.nav-logo {
  font-family: var(--display);
  font-size:17px; font-weight:700; letter-spacing:-.02em;
  color:var(--t1);
  display:flex; align-items:center; gap:9px;
  white-space:nowrap;
}
.nav-logo .logo-mark {
  width:29px; height:29px; border-radius:8px;
  background: var(--accent);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:15px;
  box-shadow: var(--sh-sm);
}
.nav-links { display:flex; gap:4px; align-items:center; flex:1; }
.nav-links a {
  color: var(--t2); font-size:13.5px; font-weight:500; padding:8px 14px;
  border-radius: var(--r-sm); transition: color .15s, background .15s;
}
.nav-links a:hover { color:var(--t1); }
.nav-links a.active { color:var(--t1); background:var(--bg3); }
.nav-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.nav-user {
  display:flex; align-items:center; gap:9px; color:var(--t1); font-size:13.5px; font-weight:600;
  background:var(--bg2); border:1px solid var(--border2); border-radius:100px;
  padding:5px 14px 5px 6px; box-shadow:var(--sh-sm); transition: border-color .15s;
}
.nav-user:hover { border-color:var(--border2); }
.nav-user-avatar {
  width:26px; height:26px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px;
}
.nav-menu-toggle {
  display:none; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--t1);
  width:40px; height:40px; font-size:18px;
  align-items:center; justify-content:center;
}
.mobile-menu {
  display:none;
  position:fixed; top:64px; left:0; right:0;
  background:var(--bg1); border-bottom:1px solid var(--border);
  z-index:499; padding:10px 20px 16px;
  box-shadow: 0 24px 48px rgba(0,0,0,.45);
}
.mobile-menu.open { display:block; animation: menuIn .18s ease; }
@keyframes menuIn { from { opacity:0; transform:translateY(-6px);} to { opacity:1; transform:translateY(0);} }
.mobile-menu a {
  display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:500;
  color:var(--t2); padding:13px 6px; border-bottom:1px solid var(--border);
}
.mobile-menu a i { font-size:17px; color:var(--t3); }
.mobile-menu a:hover, .mobile-menu a.active { color:var(--t1); }
.mobile-menu a.active i { color:var(--accent); }
.mobile-menu a:last-child { border-bottom:none; }

.dropdown { position:relative; }
.dropdown-panel {
  position:absolute; top:calc(100% + 8px); right:0; background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--r-md); min-width:200px;
  box-shadow:0 16px 48px rgba(0,0,0,.5);
  display:none; overflow:hidden; z-index:600; padding:5px;
}
.dropdown.open .dropdown-panel { display:block; }
.dropdown-panel a {
  display:flex; align-items:center; gap:10px; padding:9px 11px; font-size:13.5px; color:var(--t2);
  border-radius:var(--r-sm);
}
.dropdown-panel a i { font-size:16px; color:var(--t3); }
.dropdown-panel a:hover { background:var(--bg3); color:var(--t1); }
.dropdown-panel a:hover i { color:var(--accent); }
.dropdown-sep { height:1px; background:var(--border); margin:5px 6px; }

/* ============ Buttons ============ */
.btn-primary {
  display: inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--accent);
  color: #fff;
  padding: 11px 22px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  cursor: pointer;
  transition: background .18s ease, transform .12s ease, box-shadow .2s ease;
}
.btn-primary:hover { background: var(--accent-hi); }
.btn-primary:active { background: var(--accent-deep); transform: translateY(1px); box-shadow:none; }
.btn-primary:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn-primary i { font-size:16px; }

.btn-ghost {
  display: inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--bg3);
  color: var(--t1);
  border: 1px solid var(--border2);
  padding: 10px 20px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.btn-ghost:hover { background: var(--bg4); border-color: var(--border3); color: var(--accent-hi); }
.btn-ghost:active { transform: translateY(1px); }
.btn-ghost i { font-size:16px; }

.btn-danger {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background: var(--err-dim); color: var(--err); border:1px solid rgba(224,122,95,.32);
  padding: 8px 15px; border-radius: var(--r-sm); font-size:12.5px; font-weight:600; line-height:1;
  cursor: pointer; transition: background .18s ease;
}
.btn-danger:hover { background: rgba(224,122,95,.22); }

.btn-chip {
  background: var(--bg2);
  color: var(--t2);
  border: 1px solid var(--border2);
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
  display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap;
}
.btn-chip:hover { border-color: var(--accent-bdr); color: var(--accent-hi); background: var(--accent-dim); }
.btn-chip i { font-size:13px; }
.btn-block { width:100%; }
.btn-sm { padding:8px 15px; font-size:12.5px; }
.btn-lg { padding:14px 28px; font-size:14.5px; }

/* ============ Hero ============ */
.hero {
  padding: 118px 28px 96px;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 720px 460px at 82% -16%, rgba(99,102,241,.16), transparent 60%),
    radial-gradient(ellipse 520px 380px at 6% 112%, rgba(224,168,120,.08), transparent 60%);
  pointer-events:none;
}
.hero-inner { position:relative; max-width:1180px; margin:0 auto; padding:0; display:grid; grid-template-columns: 1.08fr .92fr; gap:72px; align-items:center; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; color:var(--t2);
  border:1px solid var(--border2); background:var(--bg2);
  padding:7px 15px; border-radius:100px; margin-bottom:26px;
  box-shadow: var(--sh-sm);
}
.hero-eyebrow .pulse {
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow: 0 0 0 0 rgba(204,120,92,.4);
  animation: heartbeat 2.2s infinite;
}
@keyframes heartbeat { 0% { box-shadow:0 0 0 0 rgba(204,120,92,.4);} 70% { box-shadow:0 0 0 7px rgba(204,120,92,0);} 100% { box-shadow:0 0 0 0 rgba(204,120,92,0);} }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin-bottom: 22px;
}
.hero h1 em {
  font-style:normal; color:var(--accent);
}
.hero-sub { color:var(--t2); font-size:16.5px; line-height:1.75; margin-bottom:36px; max-width:490px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-meta { display:flex; gap:28px; margin-top:44px; flex-wrap:wrap; }
.hero-meta-item { display:flex; align-items:baseline; gap:8px; }
.hero-meta-val { font-family:var(--mono); font-size:21px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.hero-meta-lbl { font-size:12.5px; color:var(--t3); }

/* hero visual — product window mock */
.hero-visual { position:relative; }
.hero-window {
  background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow:hidden;
}
.hero-window-bar {
  display:flex; align-items:center; gap:7px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background:var(--bg1);
}
.hero-window-bar span { width:11px; height:11px; border-radius:50%; background:var(--border3); }
.hero-window-bar .addr {
  flex:1; margin:0 8px; background:var(--bg0); border:1px solid var(--border);
  border-radius:6px; font-family:var(--mono); font-size:11px; color:var(--t3);
  padding:4px 12px; text-align:center;
}
.hero-window-body { padding:20px; display:flex; flex-direction:column; gap:12px; }
.hw-row {
  display:flex; align-items:center; gap:13px;
  background:var(--bg1); border:1px solid var(--border); border-radius:var(--r-md);
  padding:13px 15px; transition: border-color .2s ease, transform .2s ease;
}
.hw-row:hover { border-color:var(--accent-bdr); transform:translateX(2px); }
.hw-icon {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  background:var(--accent-dim);
  border:1px solid var(--accent-bdr);
  color:var(--accent);
}
.hw-title { font-size:13.5px; font-weight:600; }
.hw-sub { font-size:11.5px; color:var(--t3); font-family:var(--mono); }
.hw-price { margin-right:0; margin-left:auto; font-family:var(--mono); font-weight:700; font-size:14px; color:var(--t1); font-variant-numeric:tabular-nums; }
.hw-badge {
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent-dim); color:var(--accent-deep); border:1px solid var(--accent-bdr);
  font-size:11px; font-weight:600; padding:5px 12px; border-radius:100px;
}

/* ============ Sections ============ */
.section { padding: 84px 28px; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:36px; flex-wrap:wrap; gap:14px; }
.section-title { font-family:var(--display); font-size:27px; font-weight:700; letter-spacing:-.025em; }
.section-sub { color:var(--t2); font-size:14px; margin-top:6px; }
.section-alt { background: var(--bg1); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* ============ Cards ============ */
.grid { display:grid; gap:20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.item-card {
  position:relative;
  background: var(--bg2);
  box-shadow: var(--sh-sm);
}
.item-card:hover {
  border-color: var(--accent-bdr);
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
}
.item-thumb {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--bg3), var(--bg1));
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:30px; overflow:hidden; position:relative;
  border-bottom:1px solid var(--border);
}
.item-thumb img { width:100%; height:100%; object-fit:cover; }
/* hover-preview: silent looping video overlays the cover image on hover */
.item-thumb .item-preview {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .35s ease;
  pointer-events:none; background:var(--bg1);
  z-index:1;
}
.item-thumb .item-preview.is-ready { opacity:1; }
/* subtle "has video" affordance, hidden while the preview is playing */
.item-thumb .preview-flag {
  position:absolute; bottom:12px; right:12px; z-index:2;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,13,15,.72); backdrop-filter:blur(6px);
  border:1px solid var(--border2); color:var(--t1);
  font-size:13px; transition:opacity .25s ease;
}
.item-thumb .item-preview.is-ready ~ .preview-flag { opacity:0; }
@media (prefers-reduced-motion: reduce) {
  .item-thumb .item-preview { transition:none; }
}
.item-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(13,13,15,.8); backdrop-filter:blur(8px);
  color:var(--t1); border:1px solid var(--border2);
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
  padding:5px 12px; border-radius:100px;
}
.item-body { padding:20px; display:flex; flex-direction:column; gap:9px; flex:1; }
.item-cat { font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.06em; text-transform:uppercase; }
.item-title { font-size:16px; font-weight:600; letter-spacing:-.015em; }
.item-desc { font-size:13px; color:var(--t2); flex:1; line-height:1.6; }
.item-foot { display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:10px; }
.item-price { font-family:var(--mono); font-weight:700; color:var(--t1); font-size:16px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.item-price .free { color:var(--ok); font-size:13px; letter-spacing:.02em; }
.item-link { font-size:12.5px; font-weight:500; color:var(--t2); display:inline-flex; align-items:center; gap:4px; transition:color .15s, gap .15s; }
.item-card:hover .item-link { color:var(--accent); gap:7px; }

/* feature cards */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.feature { background:var(--bg1); padding:32px 28px; transition:background .2s; }
.feature:hover { background:var(--bg2); }
.feature-icon {
  width:46px; height:46px; border-radius:13px;
  background:var(--accent-dim);
  border:1px solid var(--accent-bdr);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:21px;
  margin-bottom:18px;
}
.feature h3 { font-size:15.5px; font-weight:600; margin-bottom:8px; letter-spacing:-.01em; }
.feature p { font-size:13px; color:var(--t2); line-height:1.65; }

/* ============ Panel ============ */
.panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--sh-sm);
}
.panel-title { font-family:var(--display); font-size:16px; font-weight:600; margin-bottom:20px; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; }
.panel-title i { color:var(--accent); font-size:18px; }

/* ============ Forms ============ */
.field { margin-bottom: 18px; }
.field label {
  display:block; font-size:12.5px; font-weight:500;
  color:var(--t2); margin-bottom:8px;
}
.field-wrap { position:relative; display:flex; align-items:center; }
.field-wrap input, .field-wrap textarea, .field-wrap select {
  width:100%;
  background: var(--bg0);
  border: 1px solid var(--border2);
  color: var(--t1);
  padding: 12px 15px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field-wrap textarea { resize:vertical; min-height:120px; }
.field-wrap input::placeholder, .field-wrap textarea::placeholder { color: var(--t3); }
.field-wrap input:focus, .field-wrap textarea:focus, .field-wrap select:focus {
  border-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.16), 0 0 0 3px var(--accent-dim);
}
.field.has-error input, .field.has-error textarea { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-dim); }
.field-err { font-size:12px; color:var(--err); margin-top:6px; }
.field-hint { font-size:12px; color:var(--t3); margin-top:6px; }

input[type=file] { padding:9px 14px !important; font-size:13px !important; }
input[type=file]::file-selector-button {
  background:var(--bg3); color:var(--t1); border:1px solid var(--border2);
  padding:6px 13px; border-radius:6px; font-size:12px; font-weight:600;
  margin-right:12px; cursor:pointer; font-family:inherit;
}

/* ============ Auth ============ */
.auth-main { display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 64px); }
.auth-side {
  background: linear-gradient(160deg, var(--bg2), var(--bg0));
  border-right: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  padding: 56px 44px;
  position: relative; overflow:hidden;
}
.auth-side::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 520px 420px at 30% 25%, rgba(99,102,241,.16), transparent 60%);
  pointer-events:none;
}
.auth-side-content { position:relative; max-width:400px; }
.auth-side h2 { font-family:var(--display); font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.25; margin-bottom:14px; }
.auth-side p { color:var(--t2); font-size:14.5px; line-height:1.7; margin-bottom:30px; }
.auth-points { display:flex; flex-direction:column; gap:14px; }
.auth-point { display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--t2); }
.auth-point i { color:var(--accent); font-size:17px; }
.auth-formcol { display:flex; align-items:center; justify-content:center; padding:56px 28px; }
.auth-card { width:100%; max-width:400px; }
.auth-card h1 { font-family:var(--display); font-size:24px; font-weight:700; letter-spacing:-.02em; margin-bottom:8px; }
.auth-card > p { color:var(--t2); font-size:14px; margin-bottom:28px; }
.auth-switch { text-align:center; font-size:13.5px; color:var(--t2); margin-top:22px; }
.auth-switch a { color:var(--accent-deep); font-weight:600; }
.auth-switch a:hover { text-decoration:underline; }

/* ============ Tables ============ */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; min-width:620px; }
th {
  font-size:11px; color:var(--t3); padding:10px 14px; text-align:left;
  font-weight:600; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  border-bottom:1px solid var(--border2);
}
td { padding:13px 14px; border-top:1px solid var(--border); font-size:13.5px; vertical-align:middle; }
tr:hover td { background:var(--bg2); }
.cell-value { font-weight:600; font-family:var(--mono); font-size:13px; }
.cell-sub { font-size:11.5px; color:var(--t3); margin-top:2px; }
.cell-actions { display:flex; gap:7px; flex-wrap:wrap; }

@media (max-width:700px) {
  .rtable table { min-width:0; }
  .rtable thead { display:none; }
  .rtable tr { display:block; border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:12px; background:var(--bg0); padding:4px 0; }
  .rtable td { display:flex; justify-content:space-between; align-items:center; gap:14px; border:none; padding:10px 16px; }
  .rtable td::before { content:attr(data-label); font-size:11px; font-weight:600; color:var(--t3); letter-spacing:.05em; text-transform:uppercase; flex-shrink:0; }
  .rtable tr:hover td { background:transparent; }
}

/* ============ Badges ============ */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; padding:4px 12px; border-radius:100px;
  border:1px solid var(--border2); background:var(--bg3); color:var(--t2);
  white-space:nowrap; letter-spacing:.01em;
}
.badge i { font-size:12px; }
.badge-ok   { border-color:var(--accent-bdr); background:var(--ok-dim); color:var(--ok); }
.badge-err  { border-color:rgba(245,101,118,.28); background:var(--err-dim); color:var(--err); }
.badge-warn { border-color:rgba(232,176,75,.28); background:var(--warn-dim); color:var(--warn); }
.badge-accent { border-color:var(--accent-bdr); background:var(--accent-dim); color:var(--accent); }

/* ============ Alerts ============ */
.alert {
  padding:13px 16px; border-radius:var(--r-md); font-size:13.5px; margin-bottom:20px;
  border:1px solid; display:flex; align-items:flex-start; gap:10px; line-height:1.6;
}
.alert i { font-size:17px; flex-shrink:0; margin-top:1px; }
.alert-success { background:var(--ok-dim); border-color:rgba(46,229,157,.28); color:var(--ok); }
.alert-error { background:var(--err-dim); border-color:rgba(245,101,118,.28); color:var(--err); }
.alert-info { background:var(--warn-dim); border-color:rgba(232,176,75,.28); color:var(--warn); }

/* ============ Admin ============ */
.admin-layout { display:flex; min-height:calc(100vh - 64px); }
.admin-sidebar { width:236px; background:var(--bg1); border-right:1px solid var(--border); padding:18px 12px; flex-shrink:0; }
.admin-sidebar a {
  display:flex; align-items:center; gap:11px; padding:10px 14px; color:var(--t2);
  font-size:13.5px; font-weight:500; border-radius:var(--r-sm); margin-bottom:2px;
  transition: background .15s, color .15s;
}
.admin-sidebar a i { font-size:17px; color:var(--t3); transition:color .15s; }
.admin-sidebar a:hover { color:var(--t1); background:var(--bg2); }
.admin-sidebar a.active { color:var(--t1); background:var(--accent-dim); border-left:2px solid var(--accent); }
.admin-sidebar a.active i { color:var(--accent); }
.admin-sidebar .side-label { font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); padding:14px 14px 8px; }
.admin-content { flex:1; padding:32px 32px 72px; min-width:0; }
.admin-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; flex-wrap:wrap; gap:14px; }
.admin-head h1 { font-family:var(--display); font-size:21px; font-weight:700; letter-spacing:-.02em; }

.admin-mobile-nav { display:none; gap:7px; overflow-x:auto; padding:13px 18px; background:var(--bg1); border-bottom:1px solid var(--border); -webkit-overflow-scrolling:touch; }
.admin-mobile-nav a {
  white-space:nowrap; font-size:12.5px; font-weight:500; padding:7px 15px;
  border:1px solid var(--border2); border-radius:100px; color:var(--t2); flex-shrink:0;
  display:inline-flex; align-items:center; gap:6px;
}
.admin-mobile-nav a i { font-size:14px; }
.admin-mobile-nav a.active { color:var(--accent); border-color:var(--accent-bdr); background:var(--accent-dim); }

.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin-bottom:28px; }
.stat-box { background:var(--bg1); padding:22px 24px; }
.stat-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.stat-lbl { font-size:12px; color:var(--t3); font-weight:500; }
.stat-icon { width:36px; height:36px; border-radius:10px; background:var(--accent-dim); border:1px solid var(--accent-bdr); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:16px; }
.stat-val { font-family:var(--mono); font-size:25px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--t1); }

/* ============ Checkout ============ */
.order-summary {
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:var(--bg0); border:1px solid var(--border); border-radius:var(--r-md);
  padding:16px 18px; margin-bottom:24px;
}
.order-summary .os-id { font-family:var(--mono); font-size:11.5px; color:var(--t3); }
.order-summary .os-title { font-weight:600; font-size:14.5px; margin-top:2px; }
.order-summary .os-price { font-family:var(--mono); font-weight:700; font-size:21px; color:var(--t1); }

.pay-gateway {
  border:1px solid var(--border2); border-radius:var(--r-md);
  padding:22px; background:var(--bg0);
  display:flex; align-items:center; gap:16px; margin-bottom:16px;
}
.pay-gateway-icon {
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.pay-gateway-info { flex:1; }
.pay-gateway-info h3 { font-size:15px; font-weight:600; }
.pay-gateway-info p { font-size:12.5px; color:var(--t2); margin-top:3px; }

.coin-strip { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 22px; }
.coin-strip span {
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  border:1px solid var(--border2); border-radius:6px; padding:4px 11px; color:var(--t2);
}

.pay-methods { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
.pay-method {
  border:1px solid var(--border2); border-radius:var(--r-md);
  padding:18px 14px; text-align:center; cursor:pointer;
  background:var(--bg0); transition: border-color .18s, box-shadow .18s;
  position:relative;
}
.pay-method input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.pay-method .coin { font-family:var(--mono); font-size:16px; font-weight:700; }
.pay-method .net { font-size:11.5px; color:var(--t3); margin-top:3px; }
.pay-method:hover { border-color:var(--t3); }
.pay-method.selected { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.pay-method.selected .coin { color:var(--accent); }

.wallet-box {
  background:var(--bg0); border:1px dashed var(--border2); border-radius:var(--r-md);
  padding:18px; margin:16px 0;
}
.wallet-box .lbl { font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--t3); margin-bottom:8px; }
.wallet-address {
  font-family:var(--mono); font-size:13px; color:var(--t1);
  word-break:break-all; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.copy-btn {
  background:var(--bg3); border:1px solid var(--border2); color:var(--t1);
  font-size:11.5px; font-weight:500; padding:6px 13px; border-radius:6px; flex-shrink:0;
  transition:all .15s; display:inline-flex; align-items:center; gap:5px;
}
.copy-btn:hover { border-color:var(--accent-bdr); color:var(--accent); }
.copy-btn.copied { background:var(--accent); color:#06130d; border-color:var(--accent); }

.pay-steps { counter-reset: step; margin:20px 0; }
.pay-step { display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--border); font-size:13.5px; color:var(--t2); align-items:flex-start; }
.pay-step:last-child { border-bottom:none; }
.pay-step::before {
  counter-increment: step; content: counter(step);
  font-family:var(--mono); color:var(--accent); font-size:12px; font-weight:700;
  width:24px; height:24px; border:1px solid var(--accent-bdr); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:var(--accent-dim);
}

/* ============ Misc ============ */
.empty-state { text-align:center; padding:64px 20px; color:var(--t2); }
.empty-state i { font-size:36px; color:var(--t3); display:block; margin-bottom:14px; }
.empty-state p { font-size:14px; }

.pagination { display:flex; gap:7px; justify-content:center; margin-top:40px; flex-wrap:wrap; }
.pagination a, .pagination span {
  min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); font-size:13.5px; font-family:var(--mono); font-weight:500;
  color:var(--t2); border:1px solid var(--border2); padding:0 8px;
}
.pagination a:hover { border-color:var(--accent-bdr); color:var(--accent-deep); }
.pagination .active { background:var(--accent); color:#06130d; border-color:var(--accent); font-weight:700; }

footer { background:var(--bg1); border-top:1px solid var(--border); padding:56px 28px 26px; margin-top:auto; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:44px; max-width:1180px; margin-inline:auto; }
.footer-brand { display:flex; align-items:center; gap:9px; font-family:var(--display); font-size:16px; font-weight:700; margin-bottom:14px; }
.footer-brand .logo-mark { width:26px; height:26px; border-radius:7px; background:linear-gradient(140deg,var(--accent) 10%,var(--accent-deep) 90%); display:flex; align-items:center; justify-content:center; color:#06130d; font-size:14px; }
.footer-col h4 { font-size:11px; color:var(--t3); font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; }
.footer-col p { color:var(--t2); font-size:13.5px; line-height:1.7; max-width:320px; }
.footer-col a { display:block; font-size:13.5px; color:var(--t2); margin-bottom:11px; transition:color .15s; }
.footer-col a:hover { color:var(--t1); }
.footer-bottom { padding-top:22px; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--t3); max-width:1180px; margin-inline:auto; }

.detail-grid { display:grid; grid-template-columns:360px 1fr; gap:32px; }
.detail-thumb {
  border-radius:var(--r-lg); aspect-ratio:1; background:var(--bg2);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--t3); font-size:44px; overflow:hidden;
}
.detail-thumb img { width:100%; height:100%; object-fit:cover; }
.detail-meta { display:flex; align-items:center; gap:10px; margin-bottom:24px; flex-wrap:wrap; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(3,1fr); }
  .hero-inner { grid-template-columns:1fr; gap:44px; }
  .hero-visual { max-width:540px; }
  .admin-content { padding:24px 20px 56px; }
  .wrap { padding: 0 22px; }
}

@media (max-width: 900px) {
  .nav-links { display:none; }
  .nav-menu-toggle { display:flex; }
  /* On tablet/mobile the nav keeps only the primary CTA + menu */
  .nav-actions .btn-ghost { display:none; }
  .nav-user span:last-child { display:none; }
  .nav-user { padding:5px 6px; }
  .auth-main { grid-template-columns:1fr; }
  .auth-side { display:none; }
  .admin-sidebar { display:none; }
  .admin-mobile-nav { display:flex; }
  .detail-grid { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:1fr; }
}

@media (max-width: 768px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px 24px; }
  .footer-col:first-child { grid-column:1 / -1; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .two-col { grid-template-columns:1fr !important; }
  .section-head { align-items:flex-start; }
}

@media (max-width: 600px) {
  body { font-size:14.5px; }
  .wrap { padding: 0 18px; }
  nav.topnav { padding: 0 18px; height:58px; }
  .mobile-menu { top:58px; }
  .nav-logo { font-size:16px; gap:8px; }

  .section { padding:44px 0; }
  .section .wrap, .section > .wrap { padding: 0 18px; }
  .section-head { margin-bottom:24px; }
  .section-title { font-size:22px; }

  /* Hero: title scales, buttons go full-width and comfortable */
  .hero { padding:52px 0 44px; }
  .hero-inner { padding:0 18px; gap:36px; }
  .hero h1 { font-size:31px; line-height:1.15; }
  .hero-sub { font-size:15px; }
  .hero-actions { flex-direction:column; align-items:stretch; gap:10px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { width:100%; padding:14px 22px; font-size:15px; }
  .hero-meta { gap:20px 28px; margin-top:36px; }
  .hero-window { border-radius:12px; }

  /* Cards: single column, tighter */
  .grid-3, .grid-4 { grid-template-columns: 1fr; gap:14px; }
  .stat-grid { grid-template-columns:1fr; }
  .feature { padding:24px 20px; }

  .panel { padding:20px 18px; }
  .panel-title { font-size:15px; }

  /* Forms: full-width action buttons, never cramped inline */
  .field-inline-form { flex-direction:column; align-items:stretch; }
  .filter-bar { flex-direction:column; align-items:stretch !important; }
  .filter-bar .btn-primary { width:100%; }

  /* Detail page */
  .detail-thumb { max-width:none; }
  .detail-meta { gap:8px; }

  /* Checkout */
  .pay-methods { grid-template-columns:1fr; }
  .order-summary { flex-direction:column; align-items:flex-start; gap:10px; }

  /* Admin */
  .admin-head { flex-direction:column; align-items:stretch; }
  .admin-head > div:last-child { display:flex; flex-wrap:wrap; gap:8px; }
  .admin-head .btn-primary { width:100%; justify-content:center; }
  .admin-content { padding:20px 16px 48px; }

  /* Footer */
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; gap:6px; text-align:center; }

  /* Tables that stay tables: allow horizontal scroll gracefully */
  .table-wrap { margin:0 -18px; padding:0 18px; }
}

@media (max-width: 400px) {
  .hero h1 { font-size:28px; }
  .nav-logo span:last-child { font-size:15px; }
}

/* ---- Mobile polish: buttons, spacing, video ---- */
@media (max-width: 640px) {
  /* All standalone buttons comfortable + tappable (44px min height) */
  .btn-primary, .btn-ghost { min-height:46px; padding:13px 22px; font-size:14px; }
  .btn-sm { min-height:40px; }

  /* Any button that sits alone in an action row goes full width */
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost,
  .admin-head .btn-primary,
  .filter-bar .btn-primary,
  form > .btn-primary.btn-block { width:100%; }

  /* Nav: primary CTA stays, keep it compact and aligned */
  .nav-actions { gap:8px; }
  .nav-actions .btn-primary.btn-sm { padding:9px 16px; }

  /* Cards: comfortable single column */
  .grid-3, .grid-4 { grid-template-columns:1fr; gap:16px; }

  /* Video grid: single column, larger tap targets */
  .video-grid { grid-template-columns:1fr; gap:20px; }
  .video-title { font-size:15px; }

  /* Watch page: player first, sidebar below, comfy spacing */
  .watch-grid { grid-template-columns:1fr; gap:24px; }
  .watch-actions { gap:12px; }
  .like-btn { min-height:44px; }

  /* Gallery: bigger nav controls for thumbs */
  .gallery-nav { width:44px; height:44px; }
  .gallery-thumb { width:60px; height:44px; }

  /* Detail buy area buttons full width */
  .detail-meta { width:100%; }
  .detail-grid form .btn-primary, .detail-grid .btn-primary.btn-lg { width:100%; }
}

@media (max-width: 420px) {
  .wrap { padding:0 16px; }
  .hero h1 { font-size:27px; }
  .section-title { font-size:21px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; animation-iteration-count:1 !important; }
  #loader { display:none !important; }
}

/* ============ Media gallery (tool detail) ============ */
.gallery { display:flex; flex-direction:column; gap:12px; }
.gallery-stage {
  position:relative; aspect-ratio:16/10; background:var(--bg1);
  border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.gallery-stage img, .gallery-stage video { width:100%; height:100%; object-fit:cover; display:none; }
.gallery-stage img.active, .gallery-stage video.active { display:block; }
.gallery-stage .placeholder { color:var(--t3); font-size:44px; }
.gallery-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  background:rgba(13,13,15,.85); backdrop-filter:blur(8px);
  border:1px solid var(--border2); color:var(--t1);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  cursor:pointer; box-shadow:var(--sh-md); transition:background .15s, border-color .15s, color .15s; z-index:2;
}
.gallery-nav:hover { background:var(--bg3); border-color:var(--accent-bdr); color:var(--accent-hi); }
.gallery-nav:hover { background:var(--bg3); border-color:var(--accent-bdr); color:var(--accent); }
.gallery-nav.prev { left:12px; }
.gallery-nav.next { right:12px; }
.gallery-counter {
  position:absolute; bottom:12px; right:12px; z-index:2;
  background:rgba(13,13,15,.85); backdrop-filter:blur(8px);
  border:1px solid var(--border2); border-radius:100px;
  font-family:var(--mono); font-size:11px; color:var(--t1);
  padding:4px 11px;
}
.gallery-thumbs { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
.gallery-thumb {
  flex-shrink:0; width:72px; height:52px; border-radius:8px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; background:var(--bg2);
  position:relative; transition:border-color .15s;
}
.gallery-thumb.active { border-color:var(--accent); }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; }
.gallery-thumb .vid-mark {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(15,21,29,.4); color:#fff; font-size:18px;
}

/* ============ Video library (YouTube-style) ============ */
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px 18px; }
.video-card { display:flex; flex-direction:column; gap:10px; }
.video-thumb {
  position:relative; aspect-ratio:16/9; border-radius:var(--r-md);
  overflow:hidden; background:var(--bg2); border:1px solid var(--border);
  transition:transform .2s, box-shadow .25s;
}
.video-card:hover .video-thumb { transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.42); }
.video-thumb img { width:100%; height:100%; object-fit:cover; }
.video-thumb .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--t3); font-size:34px; }
.video-thumb .play {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s; background:rgba(15,21,29,.35);
}
.video-thumb .play i {
  width:54px; height:54px; border-radius:50%;
  background:var(--accent);
  color:#fff; box-shadow:var(--sh-md);
  display:flex; align-items:center; justify-content:center; font-size:26px;
}
.video-card:hover .video-thumb .play { opacity:1; }
.video-dur {
  position:absolute; bottom:8px; right:8px;
  background:rgba(15,21,29,.85); color:#fff; font-family:var(--mono);
  font-size:11px; padding:2px 7px; border-radius:5px;
}
.video-info { display:flex; flex-direction:column; gap:4px; }
.video-title { font-size:14.5px; font-weight:600; line-height:1.35; letter-spacing:-.01em; }
.video-meta { font-size:12.5px; color:var(--t2); display:flex; align-items:center; gap:6px; }

/* Watch page */
.watch-grid { display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; }
.player {
  aspect-ratio:16/9; background:#000; border-radius:var(--r-lg);
  overflow:hidden; border:1px solid var(--border);
}
.player video { width:100%; height:100%; }
.watch-actions { display:flex; align-items:center; gap:10px; margin:16px 0; flex-wrap:wrap; }
.like-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bg2); border:1px solid var(--border2); color:var(--t1);
  padding:9px 18px; border-radius:100px; font-size:13.5px; font-weight:600;
  transition:border-color .15s, background .15s, color .15s;
}
.like-btn:hover { border-color:var(--accent-bdr); }
.like-btn.liked { background:var(--accent-dim); border-color:var(--accent-bdr); color:var(--accent-deep); }
.like-btn i { font-size:17px; }
.comment {
  display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--border);
}
.comment-avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.comment-body { flex:1; min-width:0; }
.comment-head { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.comment-author { font-size:13px; font-weight:600; }
.comment-time { font-size:11.5px; color:var(--t3); }
.comment-text { font-size:13.5px; color:var(--t1); line-height:1.6; word-wrap:break-word; }
.related-video { display:flex; gap:10px; margin-bottom:14px; }
.related-thumb {
  width:130px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; flex-shrink:0;
  background:var(--bg2); border:1px solid var(--border); position:relative;
}
.related-thumb img { width:100%; height:100%; object-fit:cover; }
.related-thumb .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--t3); font-size:20px; }
.related-info { flex:1; min-width:0; }
.related-title { font-size:13px; font-weight:600; line-height:1.35; }
.related-meta { font-size:11.5px; color:var(--t2); margin-top:3px; }

@media (max-width:900px) {
  .video-grid { grid-template-columns:repeat(2,1fr); }
  .watch-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .video-grid { grid-template-columns:1fr; gap:18px; }
  .gallery-thumb { width:64px; height:46px; }
}

/* ============ Auth v2 — centered elegant card ============ */
.auth-wrap {
  min-height: calc(100vh - 64px);
  display: flex; align-items: center; justify-content: center;
  padding: 48px 20px;
  position: relative; overflow: hidden;
}
.auth-wrap::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 620px 460px at 50% -10%, rgba(99,102,241,.16), transparent 62%),
    radial-gradient(ellipse 500px 400px at 85% 110%, rgba(224,168,120,.08), transparent 60%);
}
.auth-box {
  position: relative;
  width: 100%; max-width: 420px;
}
.auth-brand {
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom: 26px;
}
.auth-brand .logo-mark {
  width:36px; height:36px; border-radius:10px;
  background: var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:19px;
  box-shadow: var(--sh-sm);
}
.auth-brand span {
  font-family:var(--display); font-size:20px; font-weight:700; color:var(--t1);
}
.auth-panel {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  padding: 36px 34px;
  box-shadow: var(--sh-lg);
}
.auth-panel h1 {
  font-family:var(--display); font-size:23px; font-weight:700;
  letter-spacing:-.02em; text-align:center; margin-bottom:7px;
}
.auth-panel .auth-sub {
  color:var(--t2); font-size:14px; text-align:center; margin-bottom:28px;
}
.auth-panel .field label { font-weight:600; }
.auth-forgot { text-align:right; margin:-8px 0 18px; }
.auth-forgot a { font-size:12.5px; color:var(--t2); transition:color .15s; }
.auth-forgot a:hover { color:var(--accent-hi); }
.auth-foot {
  text-align:center; font-size:13.5px; color:var(--t2); margin-top:22px;
  padding-top:20px; border-top:1px solid var(--border);
}
.auth-foot a { color:var(--accent-hi); font-weight:600; }
.auth-foot a:hover { text-decoration:underline; }
.auth-divider {
  display:flex; align-items:center; gap:14px; margin:22px 0;
  color:var(--t3); font-size:12px;
}
.auth-divider::before, .auth-divider::after {
  content:''; flex:1; height:1px; background:var(--border);
}
.auth-trust {
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:24px; flex-wrap:wrap;
}
.auth-trust span {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--t3);
}
.auth-trust i { color:var(--accent); font-size:14px; }

@media (max-width:600px) {
  .auth-panel { padding:28px 22px; }
  .auth-wrap { padding:32px 16px; }
}

/* ============ How it works ============ */
.steps-row {
  display:grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items:start; gap:0; max-width:920px; margin:0 auto;
}
.step-item { text-align:center; padding:0 20px; }
.step-num {
  width:44px; height:44px; margin:0 auto 18px;
  border-radius:50%;
  background:var(--accent-dim); border:1px solid var(--accent-bdr);
  color:var(--accent-hi);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:18px;
}
.step-item h3 { font-size:15.5px; font-weight:600; margin-bottom:8px; letter-spacing:-.01em; }
.step-item p { font-size:13px; color:var(--t2); line-height:1.65; }
.step-line {
  height:1px; background:linear-gradient(90deg, var(--border), var(--border2), var(--border));
  margin-top:22px; min-width:40px;
}
@media (max-width:760px) {
  .steps-row { grid-template-columns:1fr; gap:28px; }
  .step-line { display:none; }
}


/* ============ Tickets polish ============ */
.ticket-open-hint {
  display:flex; align-items:flex-start; gap:11px;
  background:var(--accent-dim); border:1px solid var(--accent-bdr);
  border-radius:var(--r-md); padding:14px 16px; margin-bottom:20px;
  font-size:13px; color:var(--t2); line-height:1.6;
}
.ticket-open-hint i { color:var(--accent-hi); font-size:18px; flex-shrink:0; margin-top:1px; }
.reply-bubble {
  border-radius:var(--r-md); padding:16px 18px;
  border:1px solid var(--border);
}
.reply-bubble.is-admin { border-color:var(--accent-bdr); background:var(--accent-dim); }
.reply-bubble.is-user { background:var(--bg2); }

/* ============ Sortable list (admin drag & drop) ============ */
.sortable-hint {
  display:flex; align-items:center; gap:9px;
  font-size:12.5px; color:var(--t2);
  background:var(--bg1); border:1px solid var(--border2);
  border-radius:var(--r-sm); padding:10px 14px; margin-bottom:16px;
}
.sortable-hint i { color:var(--accent-hi); font-size:16px; }
.sortable-row {
  display:flex; align-items:center; gap:14px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r-md); padding:12px 14px; margin-bottom:9px;
  transition:border-color .15s, box-shadow .15s, opacity .15s;
}
.sortable-row:hover { border-color:var(--border3); }
.sortable-row.dragging { opacity:.5; border-color:var(--accent-bdr); box-shadow:var(--sh-md); }
.sortable-row.drag-over { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
.drag-handle {
  cursor:grab; color:var(--t3); font-size:20px; flex-shrink:0;
  display:flex; align-items:center; touch-action:none;
  transition:color .15s;
}
.drag-handle:active { cursor:grabbing; }
.sortable-row:hover .drag-handle { color:var(--accent-hi); }
.sortable-pos {
  width:30px; height:30px; flex-shrink:0; border-radius:8px;
  background:var(--bg3); border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; font-weight:700; color:var(--t2);
}
.sortable-thumb {
  width:52px; height:38px; flex-shrink:0; border-radius:7px; overflow:hidden;
  background:linear-gradient(135deg,var(--bg3),var(--bg1));
  display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:16px;
}
.sortable-thumb img { width:100%; height:100%; object-fit:cover; }
.sortable-main { flex:1; min-width:0; }
.sortable-title { font-size:14px; font-weight:600; }
.sortable-meta { font-size:11.5px; color:var(--t3); margin-top:2px; }
.sortable-price { font-family:var(--mono); font-weight:700; color:var(--t1); font-size:13.5px; }
.sortable-badge {
  font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:100px;
  border:1px solid var(--border2); color:var(--t3);
}
.sortable-badge.pub { color:var(--ok); border-color:rgba(127,176,105,.3); background:var(--ok-dim); }
.save-order-bar {
  position:sticky; bottom:16px; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--bg2); border:1px solid var(--accent-bdr);
  border-radius:var(--r-md); padding:12px 16px; margin-top:16px;
  box-shadow:var(--sh-lg);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.save-order-bar.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.save-order-bar span { font-size:13px; color:var(--t2); }
@media (max-width:600px){
  .sortable-thumb { display:none; }
  .sortable-row { padding:11px 12px; gap:10px; }
}

/* ============ Spinner ============ */
.ri-spin { animation: rispin 0.8s linear infinite; display:inline-block; }
@keyframes rispin { from { transform:rotate(0); } to { transform:rotate(360deg); } }

/* ── Toggle switch (admin forms) ───────────────────────────── */
.switch-field { display:flex; align-items:flex-start; gap:14px; cursor:pointer; }
.switch { position:relative; flex-shrink:0; margin-top:2px; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch-track {
  display:block; width:44px; height:24px; border-radius:100px;
  background:var(--bg3); border:1px solid var(--border2);
  transition:background .2s ease, border-color .2s ease;
}
.switch-thumb {
  position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:var(--t2); transition:transform .2s ease, background .2s ease;
}
.switch input:checked + .switch-track { background:var(--accent-dim); border-color:var(--accent-bdr); }
.switch input:checked + .switch-track .switch-thumb { transform:translateX(20px); background:var(--accent); }
.switch input:focus-visible + .switch-track { box-shadow:0 0 0 3px var(--accent-dim); }
.switch-text { display:flex; flex-direction:column; gap:3px; }
.switch-title { font-size:14px; font-weight:600; color:var(--t1); }
.switch-desc { font-size:12.5px; color:var(--t2); line-height:1.5; }

/* ── Brand logo image (nav / footer / loader) ─────────────── */
.brand-img { height:30px; width:auto; max-width:190px; object-fit:contain; display:block; }
.loader-logo .brand-img { height:34px; }
.footer-brand .brand-img { height:28px; }

/* ── Branding uploader (admin settings) ───────────────────── */
.brand-uploader {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px; border:1px solid var(--border2); border-radius:var(--r-md);
  background:var(--bg1);
}
.brand-preview {
  display:flex; align-items:center; gap:10px;
  min-width:120px; min-height:44px;
  padding:8px 14px; border-radius:var(--r-sm);
  background:var(--bg0); border:1px solid var(--border);
}
.brand-preview img { height:34px; width:auto; max-width:200px; object-fit:contain; }
.brand-uploader-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.brand-remove { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--t2); cursor:pointer; }
.brand-remove input { accent-color:var(--accent); }

/* ── Accent swatches ──────────────────────────────────────── */
.accent-swatches { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.accent-dot {
  width:26px; height:26px; border-radius:50%;
  border:2px solid var(--border2); cursor:pointer; padding:0;
  transition:transform .12s ease, border-color .12s ease;
}
.accent-dot:hover { transform:scale(1.12); border-color:var(--t2); }

/* ── Admin dashboard header + quick actions ───────────────── */
.admin-hero {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin-bottom:24px;
}
.admin-hero h1 { font-family:var(--display); font-size:24px; letter-spacing:-.02em; }
.admin-hero .sub { color:var(--t2); font-size:13.5px; margin-top:3px; }
.quick-actions { display:flex; gap:10px; flex-wrap:wrap; }
.qa-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 15px; border-radius:var(--r-sm); font-size:13px; font-weight:600;
  background:var(--bg2); border:1px solid var(--border2); color:var(--t1);
  transition:border-color .15s, background .15s, transform .1s;
}
.qa-btn:hover { border-color:var(--accent-bdr); background:var(--bg3); transform:translateY(-1px); }
.qa-btn i { color:var(--accent); font-size:16px; }

/* Make stat boxes feel a touch more premium on the dark base */
.stat-box { transition:border-color .15s, transform .12s; }
.stat-box:hover { border-color:var(--accent-bdr); transform:translateY(-2px); }