/* DegitalService v24 — Unified Design System
   Modern editorial + soft glass. Tokens drive everything.
   Roles: [data-role=guest|user|admin] · Themes: [data-theme=light|dark]
   Preserves all v23 class names so every page inherits the new look. */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}

/* ── TOKENS ─────────────────────────────────────────────── */
:root{
  --bg:#FAFAF7; --bg-2:#F4F3EE; --surface:#FFFFFF; --surface-2:#F7F6F1;
  --text:#0B0B0C; --text-2:#2A2A2E; --muted:#6B6B6B; --muted-2:#8A8A8E;
  --border:rgba(11,11,12,.09); --border-strong:rgba(11,11,12,.16);
  --accent:#FF5B2E; --accent-2:#FF8A5C; --accent-ink:#FFFFFF;
  --user-tint:#2563EB; --admin-tint:#7C3AED;
  --success:#16A34A; --warn:#D97706; --danger:#DC2626; --info:#2563EB;
  --ring:0 0 0 3px color-mix(in oklab,var(--accent) 35%,transparent);
  --shadow-xs:0 1px 2px rgba(10,10,20,.05);
  --shadow-sm:0 2px 6px -2px rgba(10,10,20,.08),0 1px 2px rgba(10,10,20,.04);
  --shadow-md:0 12px 28px -14px rgba(10,10,20,.18),0 2px 6px -2px rgba(10,10,20,.06);
  --shadow-lg:0 30px 60px -30px rgba(10,10,20,.28),0 12px 24px -12px rgba(10,10,20,.1);
  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur-fast:150ms; --dur:220ms; --dur-slow:380ms;
  --font-display:"Instrument Serif","Times New Roman",Georgia,serif;
  --font-ui:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --nav-h:64px;
  --grad:linear-gradient(120deg,#FF5B2E,#FF3D7A 50%,#7C3AED);
  --grad-soft:linear-gradient(120deg,rgba(255,91,46,.10),rgba(124,58,237,.10));
}
[data-theme="dark"], .dark{
  --bg:#0B0B0C; --bg-2:#111114; --surface:#141416; --surface-2:#1B1B1F;
  --text:#F5F5F2; --text-2:#D8D8D5; --muted:#A0A0A6; --muted-2:#77777C;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.22);
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 2px 8px rgba(0,0,0,.5);
  --shadow-md:0 16px 32px -14px rgba(0,0,0,.7);
  --shadow-lg:0 34px 70px -30px rgba(0,0,0,.85);
  --grad-soft:linear-gradient(120deg,rgba(255,91,46,.14),rgba(124,58,237,.16));
}

/* ── BASE ────────────────────────────────────────────────── */
body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;flex-direction:column;
  padding-top:calc(var(--nav-h) + 1px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-.005em; line-height:1.55;
  font-feature-settings:"ss01","cv11";
}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(700px 380px at 88% -10%, color-mix(in oklab,var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(600px 320px at -5% 10%, color-mix(in oklab,var(--admin-tint) 10%, transparent), transparent 60%);
  opacity:.9}
a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--accent)}
::selection{background:color-mix(in oklab,var(--accent) 30%,transparent);color:var(--text)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.05;letter-spacing:-.02em;color:var(--text)}
h1{font-size:clamp(2.4rem,5.5vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.25rem,2vw,1.55rem);letter-spacing:-.01em}
h4{font-size:1.05rem;letter-spacing:0;font-family:var(--font-ui);font-weight:600}
p{color:var(--text-2)}
small,.hint{color:var(--muted);font-size:.85rem}
hr{border:0;border-top:1px solid var(--border);margin:var(--sp-5) 0}
code,kbd{font-family:var(--font-mono);font-size:.86em}
kbd{padding:2px 6px;border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;background:var(--surface)}

.container{width:100%;max-width:1600px;margin:0 auto;padding:var(--sp-6) clamp(14px,2.4vw,28px) var(--sp-8);flex:1}
.container-panel{max-width:100%;padding:var(--sp-5) clamp(12px,2vw,24px) var(--sp-6)}

/* ── NAV ─────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;width:100%;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:10px clamp(16px,4vw,32px);min-height:var(--nav-h);
  background:color-mix(in oklab,var(--bg) 85%,transparent);
  backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--border)}
.brand{font-family:var(--font-display);font-weight:400;font-size:1.6rem;letter-spacing:-.02em;color:var(--text);display:inline-flex;align-items:center;gap:8px}
.brand::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--grad);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent)}
.nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav-links a{padding:8px 12px;border-radius:var(--r-sm);color:var(--text-2);font-size:.92rem;font-weight:500;transition:background var(--dur),color var(--dur)}
.nav-links a:hover{background:var(--surface-2);color:var(--text)}
.nav-links .btn{margin-left:6px}
.nav-burger{display:none;width:40px;height:40px;border:1px solid var(--border);background:var(--surface);border-radius:12px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.nav-burger span{width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform var(--dur),opacity var(--dur)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:840px){
  .nav-burger{display:flex}
  .nav-links{position:absolute;left:12px;right:12px;top:calc(var(--nav-h) + 6px);flex-direction:column;align-items:stretch;gap:2px;padding:10px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-md);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px}
  .nav-links .btn{margin:6px 0 0 0;justify-content:center}
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;
  font-family:var(--font-ui);font-weight:600;font-size:.95rem;letter-spacing:-.005em;line-height:1;
  background:var(--text);color:var(--bg);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),background var(--dur),color var(--dur),border-color var(--dur);
  box-shadow:var(--shadow-sm)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:8px 14px;font-size:.82rem}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border-strong);box-shadow:none}
.btn-outline:hover{background:var(--surface-2);color:var(--text)}
.btn-light{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-green{background:var(--success);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-wa{background:#25D366;color:#fff}
.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* Primary accent CTA (add via markup: .btn.btn-primary) */
.btn.btn-primary,.btn.btn-accent{background:var(--grad);color:var(--accent-ink);border:0}

/* ── CARDS / SURFACES ───────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.card-head h2,.card-head h3{margin:0}
.tcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-4)}
.band{padding:var(--sp-8) 0}
.form-box{max-width:460px;margin:var(--sp-6) auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--shadow-sm)}

/* ── FORMS ──────────────────────────────────────────────── */
.form{display:grid;gap:var(--sp-3)}
.form label,.form-box label,.lbl{font-size:.85rem;font-weight:600;color:var(--text);display:block;margin-bottom:6px;margin-top:12px}
.form-box label:first-of-type{margin-top:0}
.form-box input:not([type=hidden]):not([type=checkbox]):not([type=radio]),.form-box select,.form-box textarea{width:100%;margin-bottom:4px;padding:11px 14px;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--r);font-family:var(--font-ui);font-size:.95rem}


.form input, .form select, .form textarea,
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=url],input[type=search],input[type=date],input[type=datetime-local],input[type=time],select,textarea{
  width:100%;padding:12px 14px;background:var(--surface-2);color:var(--text);
  border:1px solid var(--border-strong);border-radius:var(--r);
  font-family:var(--font-ui);font-size:.95rem;line-height:1.4;
  transition:border-color var(--dur),box-shadow var(--dur),background var(--dur)}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:color-mix(in oklab,var(--accent) 45%,var(--border-strong))}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring);background:var(--surface)}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
textarea{min-height:120px;resize:vertical;line-height:1.55}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--surface-2) inset;box-shadow:0 0 0 1000px var(--surface-2) inset;caret-color:var(--text);transition:background-color 5000s ease-in-out 0s}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.char-count{font-size:.78rem;color:var(--muted);text-align:right}
.search-form{display:flex;gap:8px;flex-wrap:wrap}
.search-form input{flex:1;min-width:220px}
.hint{display:block;margin-top:4px}

/* ── ALERTS / BADGES / PILLS ─────────────────────────────── */
.alert{padding:12px 16px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);font-size:.93rem;margin-bottom:var(--sp-4)}
.alert-success{background:color-mix(in oklab,var(--success) 12%,var(--surface));border-color:color-mix(in oklab,var(--success) 30%,var(--border));color:color-mix(in oklab,var(--success) 60%,var(--text))}
.alert-error{background:color-mix(in oklab,var(--danger) 10%,var(--surface));border-color:color-mix(in oklab,var(--danger) 30%,var(--border));color:color-mix(in oklab,var(--danger) 60%,var(--text))}
.badge,.pill,.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:.75rem;font-weight:600;letter-spacing:.02em;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.badge-muted{background:var(--surface-2);color:var(--muted)}
.badge-green{background:color-mix(in oklab,var(--success) 15%,var(--surface));color:color-mix(in oklab,var(--success) 70%,var(--text));border-color:color-mix(in oklab,var(--success) 30%,var(--border))}
.badge-orange{background:color-mix(in oklab,var(--warn) 15%,var(--surface));color:color-mix(in oklab,var(--warn) 70%,var(--text));border-color:color-mix(in oklab,var(--warn) 30%,var(--border))}
.chip-f{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-pill);font-size:.85rem;font-weight:600;background:var(--surface);border:1px solid var(--border-strong);color:var(--text-2);cursor:pointer;transition:background var(--dur),color var(--dur),border-color var(--dur)}
.chip-f:hover{background:var(--surface-2);color:var(--text)}
.chip-f.active{background:var(--text);color:var(--bg);border-color:var(--text)}


/* ── HERO ───────────────────────────────────────────────── */
.hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:clamp(48px,8vw,96px) clamp(20px,5vw,80px) clamp(56px,9vw,112px);overflow:hidden;border-bottom:1px solid var(--border)}
.hero-bg{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 55% at 90% 20%, color-mix(in oklab,var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(50% 45% at 10% 85%, color-mix(in oklab,var(--admin-tint) 22%, transparent), transparent 60%),
    var(--bg)}
.hero-content{max-width:820px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-4)}
.hero h1{margin-bottom:var(--sp-4)}
.hero h1 .grad,.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:clamp(1rem,1.4vw,1.2rem);max-width:640px;color:var(--muted);margin-bottom:var(--sp-5)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* trust row */
.trust-row{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:center;margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--border)}
.trust-text{color:var(--muted);font-size:.85rem;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.trust-text .stars{display:inline-flex;align-items:center;gap:2px;line-height:1}
.trust-text .stars svg{display:inline-block;vertical-align:middle;width:15px;height:15px}
.stars{display:inline-flex;align-items:center;gap:2px;line-height:1}
.stars svg{display:inline-block;vertical-align:middle}
.avatars{display:flex}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--grad);border:2px solid var(--bg);margin-left:-8px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.75rem}
.avatar:first-child{margin-left:0}

/* ── GRIDS / BENTO ──────────────────────────────────────── */
.grid{display:grid;gap:var(--sp-4)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-6)}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}

.section-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-2);margin:var(--sp-8) auto var(--sp-6);max-width:720px}
.section-title{font-family:var(--font-display);font-size:clamp(1.9rem,3.5vw,2.8rem)}
.section-sub{color:var(--muted);font-size:1.02rem}

/* ── SERVICES / STEPS / FAQ ─────────────────────────────── */
.check-list{list-style:none;display:grid;gap:10px}
.check-list li{display:flex;align-items:flex-start;gap:10px;color:var(--text-2)}
.check-ico,.check{width:20px;height:20px;flex-shrink:0;color:var(--success)}
.steps{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:var(--sp-5)}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);position:relative}
.step-num{width:36px;height:36px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;margin-bottom:var(--sp-3)}
.step-arrow{display:none}
.step-list{display:grid;gap:var(--sp-2);margin-top:var(--sp-3);color:var(--text-2)}
.faq-list{display:grid;gap:var(--sp-3)}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-4)}
.faq-item summary{cursor:pointer;font-weight:600;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item[open]{border-color:var(--border-strong)}

/* ── PRICING / METRICS / STATS ──────────────────────────── */
.price{font-family:var(--font-display);font-size:2.2rem}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5)}
.stat .num,.metric .num{font-family:var(--font-display);font-size:2.4rem;letter-spacing:-.02em;display:block}
.stat .lbl,.metric .lbl{color:var(--muted);font-size:.85rem;margin-top:4px;display:block}
.stats{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-4)}
.progress{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;border:1px solid var(--border)}
.progress-bar{height:100%;background:var(--grad);border-radius:999px}
.ring{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--pct,0)*1%),var(--surface-2) 0);position:relative}
.ring::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--surface)}
.ring>*{position:relative;z-index:1}

/* ── TABLES (polished) ──────────────────────────────────── */
.table-wrap{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm)}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:.93rem;table-layout:auto}
.table th,.table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle;line-height:1.5;color:var(--text)}
.table th{background:var(--surface-2);color:var(--text);font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;position:sticky;top:0;white-space:nowrap;border-bottom:2px solid var(--border-strong)}
.table td{color:var(--text);word-break:break-word;overflow-wrap:anywhere}
.table tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--dur)}
.table tbody tr:nth-child(even){background:color-mix(in oklab,var(--surface-2) 45%,transparent)}
.table tbody tr:hover{background:color-mix(in oklab,var(--accent) 8%,var(--surface-2))}
.table td.num,.table th.num,.table td.right,.table th.right{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table td.center,.table th.center{text-align:center}
.table td.nowrap,.table th.nowrap{white-space:nowrap}
.table td.actions,.table th.actions{white-space:nowrap;text-align:right}
.table td.actions .btn,.table td .actions-row .btn{margin:2px}
.table td .actions-row{display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center}
.table ul,.table .feat-list{margin:0;padding-left:18px;list-style:disc;color:var(--text);font-size:.86rem;line-height:1.55}
.table .feat-list{max-width:340px}
.table .cell-sub{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
.row-new{background:color-mix(in oklab,var(--accent) 8%,transparent)}
@media (max-width:820px){
  .table th,.table td{padding:12px 14px}
}
@media (max-width:720px){
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{border:1px solid var(--border);border-radius:var(--r);margin-bottom:10px;padding:10px 14px;background:var(--surface)}
  .table tbody tr:nth-child(even){background:var(--surface)}
  .table td{border:0;padding:8px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
  .table td.actions,.table td .actions-row{justify-content:flex-end}
  .table td::before{content:attr(data-th);color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;text-align:left;flex:0 0 auto}
}

/* ── PANEL SHELL (user + admin) ─────────────────────────── */
.panel-shell{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--sp-5);align-items:flex-start;min-height:calc(100vh - var(--nav-h) - 120px)}
.panel-side{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);position:sticky;top:calc(var(--nav-h) + 16px);align-self:flex-start;box-shadow:var(--shadow-sm)}
.panel-side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-3);padding:4px 6px}
.panel-side-title{font-weight:700;font-size:.95rem;color:var(--text)}
.panel-side-close{display:none;background:transparent;border:0;font-size:1.6rem;color:var(--muted);cursor:pointer;line-height:1}
.panel-side-nav{display:grid;gap:2px}
.panel-side-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);color:var(--text-2);font-size:.9rem;font-weight:500;transition:background var(--dur),color var(--dur)}
.panel-side-link .psi{width:24px;display:inline-grid;place-items:center;font-size:1rem}
.panel-side-link:hover{background:var(--surface-2);color:var(--text)}
.panel-side-link.active{background:var(--text);color:var(--bg)}
[data-role="admin"] .panel-side-link.active{background:var(--admin-tint);color:#fff}
[data-role="user"] .panel-side-link.active{background:var(--user-tint);color:#fff}
.panel-side-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:70}
.panel-side-toggle{display:none;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r);cursor:pointer;margin-bottom:var(--sp-4);font-weight:600}
.panel-side-toggle span{width:16px;height:2px;background:var(--text);display:block;margin:3px 0}
.panel-side-toggle em{font-style:normal;margin-left:8px}
.panel-main{min-width:0}
.panel-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.page-title{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:6px}
.page-sub{color:var(--muted);margin-bottom:var(--sp-5)}

@media (max-width:960px){
  .panel-shell{grid-template-columns:1fr}
  .panel-side-toggle{display:inline-flex}
  .panel-side{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:82vw;border-radius:0;border-right:1px solid var(--border);transform:translateX(-100%);transition:transform var(--dur) var(--ease);z-index:80;overflow-y:auto}
  body.panel-side-open .panel-side{transform:translateX(0)}
  body.panel-side-open .panel-side-backdrop{display:block}
  .panel-side-close{display:block}
}

/* ── FOOTER ─────────────────────────────────────────────── */
.footer{margin-top:var(--sp-9);background:var(--surface);border-top:1px solid var(--border);color:var(--text-2)}
.footer-main{max-width:1600px;margin:0 auto;padding:var(--sp-7) clamp(14px,2.4vw,28px) var(--sp-5);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6)}
@media (max-width:820px){.footer-main{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.footer-main{grid-template-columns:1fr}}
.footer-brand p{color:var(--muted);margin-top:10px;max-width:32ch}
.footer-col h4{margin-bottom:12px;color:var(--text);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.footer-col a{display:block;padding:5px 0;color:var(--muted);font-size:.92rem}
.footer-col a:hover{color:var(--text)}
.footer-bottom{max-width:1600px;margin:0 auto;padding:var(--sp-4) clamp(14px,2.4vw,28px) var(--sp-5);border-top:1px solid var(--border);color:var(--muted);font-size:.85rem}

/* ── FLOATING WHATSAPP ──────────────────────────────────── */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:80;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.55);transition:transform var(--dur) var(--ease)}
.wa-float:hover{transform:translateY(-2px)}
.wa-float-pulse{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(37,211,102,.35);animation:wa-ping 1.8s ease-out infinite}
@keyframes wa-ping{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}

/* ── ADMIN / AUDIT WIDGETS ──────────────────────────────── */
.audit-overview{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-5);align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);margin-bottom:var(--sp-5)}
@media (max-width:520px){.audit-overview{grid-template-columns:1fr;text-align:center}}
.audit-score{width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--success) calc(var(--pct,0)*1%),var(--surface-2) 0);display:grid;place-items:center;position:relative}
.audit-score::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--surface)}
.audit-score-num,.audit-score-lbl{position:relative;z-index:1;text-align:center}
.audit-score-num{font-family:var(--font-display);font-size:2rem;line-height:1}
.audit-score-lbl{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.audit-summary{display:grid;gap:var(--sp-2)}
.audit-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:.75rem;font-weight:600;border:1px solid var(--border);background:var(--surface-2)}
.audit-badge.pass,.audit-badge.good{background:color-mix(in oklab,var(--success) 15%,var(--surface));color:color-mix(in oklab,var(--success) 65%,var(--text));border-color:color-mix(in oklab,var(--success) 30%,var(--border))}
.audit-badge.warn{background:color-mix(in oklab,var(--warn) 15%,var(--surface));color:color-mix(in oklab,var(--warn) 70%,var(--text));border-color:color-mix(in oklab,var(--warn) 30%,var(--border))}
.audit-badge.fail,.audit-badge.bad{background:color-mix(in oklab,var(--danger) 15%,var(--surface));color:color-mix(in oklab,var(--danger) 70%,var(--text));border-color:color-mix(in oklab,var(--danger) 30%,var(--border))}
.audit-badge.na{background:var(--surface-2);color:var(--muted)}

/* Theme picker + reduced-motion toggle (Settings page) */
.settings-grid{display:grid;gap:var(--sp-5)}
.admin-theme-picker{display:flex;flex-direction:column;gap:var(--sp-4)}
.admin-theme-picker>h3{margin:0}
.theme-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.theme-opt{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);background:var(--surface);cursor:pointer;transition:border-color var(--dur),box-shadow var(--dur);display:block}
.theme-opt input{position:absolute;opacity:0;pointer-events:none}
.theme-opt.is-active,.theme-opt:has(input:checked){border-color:var(--accent);box-shadow:var(--ring)}
.theme-preview{height:80px;border-radius:var(--r);margin-bottom:10px;background:var(--grad-soft);border:1px solid var(--border)}
.theme-meta{display:flex;flex-direction:column;gap:2px;font-size:.85rem}
.theme-meta strong{font-size:.95rem}
.theme-meta span{color:var(--muted)}
.rm-toggle{display:flex;align-items:center;gap:12px;padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);cursor:pointer}
.rm-switch{width:40px;height:22px;border-radius:999px;background:var(--surface-2);position:relative;border:1px solid var(--border-strong);flex-shrink:0}
.rm-switch::after{content:"";position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background:var(--text);transition:transform var(--dur)}
.rm-toggle input{position:absolute;opacity:0;pointer-events:none}
.rm-toggle:has(input:checked) .rm-switch{background:var(--accent);border-color:var(--accent)}
.rm-toggle:has(input:checked) .rm-switch::after{transform:translateX(18px);background:#fff}
.rm-text small{display:block;color:var(--muted)}

/* Misc widgets */
.chart{display:grid;gap:var(--sp-3)}
.chart-bar{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;font-size:.88rem}
.chart-col{flex:1;height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;border:1px solid var(--border)}
.chart-col>span{display:block;height:100%;background:var(--grad);border-radius:999px}
.chart-lbl{color:var(--muted);font-size:.78rem}
.kw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-3)}
.kw-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-3)}
.rank-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.rank-bar{height:6px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.rank-bar>span{display:block;height:100%;background:var(--grad)}
.serp-preview{border:1px dashed var(--border-strong);border-radius:var(--r);padding:var(--sp-3);background:var(--surface)}
.serp-title{color:#1a0dab;font-size:1.05rem}
.serp-url{color:var(--muted);font-size:.85rem}
.serp-desc{font-size:.9rem;color:var(--text-2);margin-top:4px}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp-4)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;margin-bottom:var(--sp-4)}
.copy-row{display:flex;gap:8px;align-items:center}
.copy-row input{flex:1;font-family:var(--font-mono);font-size:.82rem}
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.9rem;margin-bottom:var(--sp-3)}
.back-link:hover{color:var(--text)}
.meta,.meta-row{color:var(--muted);font-size:.85rem;display:flex;flex-wrap:wrap;gap:12px}
.reveal{opacity:0;transform:translateY(8px);animation:reveal .6s var(--ease) forwards}
@keyframes reveal{to{opacity:1;transform:none}}

/* Contact grid */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--sp-6)}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* Blog / post */
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);transition:transform var(--dur) var(--ease),box-shadow var(--dur)}
.post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.post-head{margin-bottom:var(--sp-3)}
.post-meta{color:var(--muted);font-size:.82rem;margin-top:6px}
.post-excerpt{color:var(--text-2);margin:var(--sp-2) 0}
.post-cta{color:var(--accent);font-weight:600}
.read-more{color:var(--accent);font-weight:600}
.post-page{max-width:760px;margin:0 auto}
.prose{max-width:70ch;line-height:1.75;color:var(--text-2)}
.prose h2{margin:var(--sp-6) 0 var(--sp-3)}
.prose h3{margin:var(--sp-5) 0 var(--sp-2)}
.prose p{margin-bottom:var(--sp-4)}
.prose ul,.prose ol{margin:0 0 var(--sp-4) var(--sp-5)}
.prose a{color:var(--accent);text-decoration:underline}

/* CTA band */
.cta{position:relative;margin:var(--sp-8) 0 0;border-radius:var(--r-xl);overflow:hidden;background:var(--text);color:var(--bg)}
.cta-bg{position:absolute;inset:0;background:var(--grad);opacity:.9}
.cta-inner{position:relative;padding:clamp(32px,6vw,64px);display:grid;gap:var(--sp-4);text-align:center;color:#fff}
.cta-inner h2{color:#fff}
.cta-inner .btn{margin:0 auto}

/* Order success banner */
.order-success-banner{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:center;padding:var(--sp-5);background:color-mix(in oklab,var(--success) 12%,var(--surface));border:1px solid color-mix(in oklab,var(--success) 30%,var(--border));border-radius:var(--r-lg);margin-bottom:var(--sp-5)}
.osb-icon{width:48px;height:48px;border-radius:50%;background:var(--success);color:#fff;display:grid;place-items:center;font-size:1.4rem}
.osb-body h3{margin-bottom:4px}

/* Quick actions grid */
.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-3)}
.qa{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);display:flex;flex-direction:column;gap:8px;transition:transform var(--dur) var(--ease),box-shadow var(--dur)}
.qa:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.qa-ico{width:36px;height:36px;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center;font-size:1.15rem}

/* Empty state */
.empty-state{text-align:center;padding:var(--sp-8) var(--sp-5);color:var(--muted)}
.empty-ico{font-size:2.6rem;margin-bottom:var(--sp-3)}

/* Stars (rating) */
.stars{color:var(--warn);letter-spacing:2px}

/* CWV cards (performance page) */
.cwv-scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3)}
.cwv-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-3)}
.cwv-score{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-4);text-align:center}

/* Actions row */
.actions{display:flex;flex-wrap:wrap;gap:8px}

/* d1/d2/d3 dashboard cells */
.d1,.d2,.d3{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5)}

/* ── ACCESSIBILITY / MOTION ─────────────────────────────── */
[data-motion="reduced"] *,
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
}

/* ── ICON BUBBLE + TESTIMONIAL USER (added v3) ───────────── */
.icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--grad-soft);color:var(--accent);margin-bottom:var(--sp-3);border:1px solid var(--border)}
.icon svg{width:22px;height:22px}
.tcard p{color:var(--text-2);margin:var(--sp-3) 0;font-style:italic;line-height:1.6}
.tuser{display:flex;align-items:center;gap:12px;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border)}
.tuser .avatar{margin:0;width:40px;height:40px;font-size:.85rem}
.tuser strong{display:block;color:var(--text);font-size:.92rem}
.tuser span{color:var(--muted);font-size:.8rem}
.meta{color:var(--muted);font-size:.82rem;margin:6px 0 var(--sp-2);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.card .price{margin:var(--sp-3) 0}
.stars{color:#F5A623;letter-spacing:2px;font-size:.95rem}
/* Equal-height service cards: pin price + CTA to bottom */
.grid .card{display:flex;flex-direction:column;align-items:flex-start;height:100%}
.grid .card > p{margin:0 0 var(--sp-2)}
.grid .card .price{margin-top:auto;padding-top:var(--sp-3);align-self:stretch}
.grid .card > .btn{align-self:flex-start}
.grid{align-items:stretch}

/* ============ Toast notifications (bottom, solid) ============ */
.toast-wrap{position:fixed;bottom:24px;right:24px;top:auto;left:auto;z-index:9999;display:flex;flex-direction:column-reverse;gap:10px;max-width:calc(100vw - 48px);pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;min-width:280px;max-width:420px;padding:14px 16px;border-radius:12px;background:#ffffff;color:#0f172a;border:1px solid #e5e7eb;box-shadow:0 20px 48px -16px rgba(15,23,42,.35),0 4px 12px rgba(15,23,42,.12);font-size:.94rem;line-height:1.4;font-weight:500;transform:translateY(120%);opacity:0;transition:transform .28s cubic-bezier(.2,.9,.3,1.2),opacity .2s;backdrop-filter:none;-webkit-backdrop-filter:none}
.toast.in{transform:translateY(0);opacity:1}
.toast.out{transform:translateY(120%);opacity:0}
.toast-ico{font-size:1.15rem;line-height:1.1;flex-shrink:0}
.toast-msg{flex:1;min-width:0;word-wrap:break-word;color:inherit}
.toast-x{background:transparent;border:0;font-size:1.25rem;line-height:1;cursor:pointer;color:inherit;opacity:.6;padding:2px 6px;border-radius:6px}
.toast-x:hover{opacity:1;background:rgba(0,0,0,.06)}
.toast-success{background:#ecfdf5;color:#064e3b;border-color:#a7f3d0;border-left:4px solid #16a34a}
.toast-error{background:#fef2f2;color:#7f1d1d;border-color:#fecaca;border-left:4px solid #dc2626}
.toast-warning{background:#fffbeb;color:#78350f;border-color:#fde68a;border-left:4px solid #d97706}
.toast-info{background:#eff6ff;color:#1e3a8a;border-color:#bfdbfe;border-left:4px solid #2563eb}
/* Dark themes: keep toasts readable with solid dark surfaces */
[data-site-theme="nord"] .toast,[data-site-theme="cyber"] .toast,[data-site-theme="aurora"] .toast,.dark .toast{background:#0f172a;color:#f8fafc;border-color:rgba(255,255,255,.12)}
[data-site-theme="nord"] .toast-success,[data-site-theme="cyber"] .toast-success,[data-site-theme="aurora"] .toast-success,.dark .toast-success{background:#052e2b;color:#a7f3d0;border-color:#065f46}
[data-site-theme="nord"] .toast-error,[data-site-theme="cyber"] .toast-error,[data-site-theme="aurora"] .toast-error,.dark .toast-error{background:#3f0d13;color:#fecaca;border-color:#991b1b}
[data-site-theme="nord"] .toast-warning,[data-site-theme="cyber"] .toast-warning,[data-site-theme="aurora"] .toast-warning,.dark .toast-warning{background:#3b2a06;color:#fde68a;border-color:#92400e}
[data-site-theme="nord"] .toast-info,[data-site-theme="cyber"] .toast-info,[data-site-theme="aurora"] .toast-info,.dark .toast-info{background:#0b2447;color:#bfdbfe;border-color:#1e40af}
@media (max-width:520px){.toast-wrap{bottom:16px;right:12px;left:12px;max-width:none}.toast{min-width:0;max-width:none;width:100%}}
@media (prefers-reduced-motion:reduce){.toast{transition:opacity .15s;transform:none!important}}

/* ── ADMIN: score bars & good/ok/bad tinting ────────────── */
.score-bar{display:inline-block;vertical-align:middle;width:120px;height:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;overflow:hidden;margin-right:8px}
.score-fill{display:block;height:100%;border-radius:999px;background:var(--grad);transition:width var(--dur) var(--ease)}
.score-fill.good{background:color-mix(in oklab,var(--success) 80%,var(--text))}
.score-fill.ok{background:color-mix(in oklab,var(--warn) 80%,var(--text))}
.score-fill.bad{background:color-mix(in oklab,var(--danger) 80%,var(--text))}

.metric.good,.pill.good,.cwv-score.good,.chart-bar.good{background:color-mix(in oklab,var(--success) 12%,var(--surface));border-color:color-mix(in oklab,var(--success) 30%,var(--border));color:color-mix(in oklab,var(--success) 65%,var(--text))}
.metric.ok,.pill.ok,.cwv-score.ok,.chart-bar.ok{background:color-mix(in oklab,var(--warn) 12%,var(--surface));border-color:color-mix(in oklab,var(--warn) 30%,var(--border));color:color-mix(in oklab,var(--warn) 70%,var(--text))}
.metric.bad,.pill.bad,.cwv-score.bad,.chart-bar.bad{background:color-mix(in oklab,var(--danger) 12%,var(--surface));border-color:color-mix(in oklab,var(--danger) 30%,var(--border));color:color-mix(in oklab,var(--danger) 70%,var(--text))}

/* ── ADMIN: consistent card head, toolbar, chips, inline-form ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow-sm)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);flex-wrap:wrap}
.card-head h3{margin:0;font-size:1.05rem}
.section-sub{color:var(--muted);margin:-6px 0 var(--sp-4);font-size:.92rem}

.toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-f{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:.82rem;font-weight:600;cursor:pointer;transition:background var(--dur),color var(--dur),border-color var(--dur)}
.chip-f:hover{background:var(--surface-2);color:var(--text)}
.chip-f.active{background:var(--text);color:var(--bg);border-color:var(--text)}
[data-role="admin"] .chip-f.active{background:var(--admin-tint);border-color:var(--admin-tint);color:#fff}

.inline-form{display:inline-flex;gap:6px;align-items:center;margin:0}
.search-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.search-form input[type="search"],.search-form input[type="text"]{min-width:220px}

.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-4)}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3);margin-top:var(--sp-3)}
.qa{display:flex;align-items:center;gap:10px;padding:var(--sp-3);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-weight:600;transition:background var(--dur),transform var(--dur)}
.qa:hover{background:var(--surface);transform:translateY(-1px)}
.qa-ico{font-size:1.25rem}
.char-count{font-size:.78rem;color:var(--muted);text-align:right;margin-top:4px}
.hint{color:var(--muted);font-size:.85rem;margin-top:6px}

.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.table-wrap>table,.table-wrap>.table{border:0;border-radius:0;margin:0;min-width:640px}

/* ── ADMIN: alerts ──────────────────────────────────────── */
.alert{padding:var(--sp-3) var(--sp-4);border-radius:var(--r);border:1px solid var(--border);background:var(--surface);margin-bottom:var(--sp-4);font-size:.92rem;display:flex;align-items:center;gap:10px}
.alert-success{background:color-mix(in oklab,var(--success) 12%,var(--surface));border-color:color-mix(in oklab,var(--success) 35%,var(--border));color:color-mix(in oklab,var(--success) 55%,var(--text))}
.alert-error{background:color-mix(in oklab,var(--danger) 12%,var(--surface));border-color:color-mix(in oklab,var(--danger) 35%,var(--border));color:color-mix(in oklab,var(--danger) 60%,var(--text))}

/* ── ADMIN: badge variants ──────────────────────────────── */
.badge-green,.badge.completed{background:color-mix(in oklab,var(--success) 15%,var(--surface));color:color-mix(in oklab,var(--success) 65%,var(--text));border-color:color-mix(in oklab,var(--success) 30%,var(--border))}
.badge.processing{background:color-mix(in oklab,var(--accent) 15%,var(--surface));color:color-mix(in oklab,var(--accent) 70%,var(--text));border-color:color-mix(in oklab,var(--accent) 30%,var(--border))}
.badge.pending{background:color-mix(in oklab,var(--warn) 15%,var(--surface));color:color-mix(in oklab,var(--warn) 70%,var(--text));border-color:color-mix(in oklab,var(--warn) 30%,var(--border))}
.badge.cancelled,.badge.failed{background:color-mix(in oklab,var(--danger) 15%,var(--surface));color:color-mix(in oklab,var(--danger) 70%,var(--text));border-color:color-mix(in oklab,var(--danger) 30%,var(--border))}
.badge.sent{background:color-mix(in oklab,var(--success) 15%,var(--surface));color:color-mix(in oklab,var(--success) 65%,var(--text));border-color:color-mix(in oklab,var(--success) 30%,var(--border))}
.badge-orange{background:color-mix(in oklab,#f97316 15%,var(--surface));color:color-mix(in oklab,#f97316 70%,var(--text));border-color:color-mix(in oklab,#f97316 30%,var(--border))}
.badge-muted{background:var(--surface-2);color:var(--muted);border-color:var(--border)}

/* ── ADMIN: buttons variants ────────────────────────────── */
.btn-green{background:var(--success);color:#fff;border-color:var(--success)}
.btn-green:hover{filter:brightness(1.05)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{filter:brightness(1.05)}
.btn-wa{background:#25D366;color:#fff;border-color:#25D366}
.btn-wa:hover{filter:brightness(1.05)}
.btn-sm{padding:6px 12px;font-size:.82rem;border-radius:var(--r-sm)}

/* ── ADMIN: stats band ──────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-5)}
.stats.band{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4)}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-4);text-align:left}
.stats.band .stat{border:0;background:transparent;padding:var(--sp-2) var(--sp-3);border-right:1px solid var(--border)}
.stats.band .stat:last-child{border-right:0}
@media (max-width:720px){.stats.band .stat{border-right:0;border-bottom:1px solid var(--border)}.stats.band .stat:last-child{border-bottom:0}}

/* ── ADMIN: empty state ─────────────────────────────────── */
.empty-state{padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:var(--r-lg);background:var(--surface)}
.empty-ico{font-size:2.4rem;margin-bottom:10px;opacity:.7}

/* ── ADMIN: check-list, ring, step-list ─────────────────── */
.check-list{display:grid;gap:var(--sp-2)}
.check{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.check-ico{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:.8rem;flex-shrink:0}
.check.pass{border-color:color-mix(in oklab,var(--success) 30%,var(--border))}
.check.pass .check-ico{background:color-mix(in oklab,var(--success) 25%,var(--surface));color:color-mix(in oklab,var(--success) 60%,var(--text))}
.check.fail{border-color:color-mix(in oklab,var(--danger) 30%,var(--border))}
.check.fail .check-ico{background:color-mix(in oklab,var(--danger) 25%,var(--surface));color:color-mix(in oklab,var(--danger) 60%,var(--text))}
.check.warn .check-ico{background:color-mix(in oklab,var(--warn) 25%,var(--surface));color:color-mix(in oklab,var(--warn) 65%,var(--text))}
.check.na .check-ico{background:var(--surface-2);color:var(--muted)}

.ring{width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--pct,0)*1%),var(--surface-2) 0);display:grid;place-items:center;position:relative}
.ring::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--surface)}
.ring>*{position:relative;z-index:1}

.step-list{display:grid;gap:var(--sp-3);counter-reset:step}
.step-list>li{counter-increment:step;padding:var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-6) + 8px);position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);list-style:none}
.step-list>li::before{content:counter(step);position:absolute;left:var(--sp-3);top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--admin-tint);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem}

/* ── ADMIN: SERP preview + copy-row ─────────────────────── */
.serp-preview{border:1px dashed var(--border);border-radius:var(--r);padding:var(--sp-4);background:var(--surface)}
.serp-title{color:#1a0dab;font-size:1.15rem;margin:0 0 4px;font-weight:500}
.serp-url{color:var(--success);font-size:.85rem;margin-bottom:6px}
.serp-desc{color:var(--text-2);font-size:.92rem;line-height:1.5}
.copy-row{display:flex;gap:8px;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;overflow-x:auto}
.copy-row code{flex:1;white-space:nowrap;overflow-x:auto}

/* ── ADMIN: auto-stack labels/inputs in cards (forms without .form class) ── */
.card form:not(.inline-form):not(.search-form) label{display:block;font-size:.85rem;font-weight:600;color:var(--text);margin:14px 0 6px}
.card form:not(.inline-form):not(.search-form) label:first-of-type{margin-top:0}
.card form:not(.inline-form):not(.search-form) input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.card form:not(.inline-form):not(.search-form) select,
.card form:not(.inline-form):not(.search-form) textarea{display:block;width:100%}
.card form:not(.inline-form):not(.search-form) > button,
.card form:not(.inline-form):not(.search-form) > .btn{margin-top:var(--sp-3)}

/* ── ADMIN: labels inside cards always stack (except styled toggles) ── */
.card label:not(.theme-opt):not(.rm-toggle):not(.check){display:block;font-size:.85rem;font-weight:600;color:var(--text);margin:14px 0 6px}
.card > label:first-child,.card label:first-of-type{margin-top:0}
.card input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.card select,
.card textarea{width:100%;box-sizing:border-box}
.card .inline-form input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.card .search-form input:not([type=hidden]):not([type=checkbox]):not([type=radio]){width:auto}

/* ── ORDER FORM (v15) ────────────────────────────────────── */
.order-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;margin:20px 0;align-items:start}
.order-main{min-width:0}
.order-summary{position:sticky;top:calc(var(--nav-h) + 12px)}
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:8px}
.pkg-card{position:relative;display:flex;flex-direction:column;gap:4px;border:2px solid var(--border);border-radius:var(--r);padding:14px;cursor:pointer;background:var(--surface);transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.pkg-card:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.pkg-card.is-selected{border-color:var(--accent);box-shadow:var(--ring)}
.pkg-card input[type=radio]{position:absolute;top:10px;right:10px}
.pkg-tier{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.pkg-title{font-weight:600}
.pkg-price{font-family:var(--font-display);font-size:1.35rem;color:var(--text)}
.pkg-days{font-size:.8rem;color:var(--muted)}
.pkg-features{font-size:.8rem;color:var(--muted-2);padding-left:16px;margin:4px 0 0}
.addon-list{display:grid;gap:6px;margin-top:6px}
.addon-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);cursor:pointer}
.addon-row:hover{border-color:var(--border-strong)}
.addon-row input:checked ~ .addon-title{color:var(--accent)}
.addon-price{font-size:.85rem;color:var(--muted)}
.sum-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:.92rem}
.sum-row.sum-total{font-size:1.05rem;padding-top:10px;border-top:1px dashed var(--border);margin-top:6px}
.sum-sub{font-size:.78rem;color:var(--muted);padding-left:8px}
.sum-addons{margin:-2px 0 4px}
.coupon-row{display:flex;gap:6px}
.coupon-row input{flex:1;min-width:0}
.coupon-msg{min-height:1.2em;font-size:.85rem;margin:6px 0 4px;line-height:1.35;padding:6px 10px;border-radius:8px;border:1px solid transparent;background:transparent;transition:background .15s,border-color .15s}
.coupon-msg:empty{padding:0;min-height:0}
.coupon-msg.ok{color:var(--success);background:color-mix(in srgb,var(--success) 12%,transparent);border-color:color-mix(in srgb,var(--success) 35%,transparent)}
.coupon-msg.err{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.coupon-msg.pending{color:var(--muted-2);background:color-mix(in srgb,var(--muted) 10%,transparent);border-color:color-mix(in srgb,var(--muted) 30%,transparent)}
.coupon-msg .coupon-sub{display:block;margin-top:4px;font-size:.78rem;opacity:.85;color:var(--muted-2)}
.coupon-hint{font-size:.75rem;color:var(--muted);margin:2px 0 4px}


@media (max-width:900px){
  .order-wrap{grid-template-columns:1fr}
  .order-summary{position:static}
}
@media (max-width:520px){
  .pkg-grid{grid-template-columns:1fr}
  .addon-row{grid-template-columns:auto 1fr;grid-auto-rows:auto}
  .addon-price{grid-column:2}
}

/* Admin table actions — keep buttons on one line, allow scroll */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:640px;width:100%}

/* ═══════════════════════════════════════════════════════════════════
   SITE THEMES — 5 fully distinct trending UI/layouts
   Selected via <html data-site-theme="aurora|neobrutal|nord|retro|cyber">
   Set in Admin → Settings → Site Theme.
   Each theme overrides tokens + adds theme-specific structural CSS.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. AURORA GLASS ─── Glassmorphism, gradients, frosted blur ── */
[data-site-theme="aurora"]{
  --bg:#0b0f1f; --bg-2:#0e1226; --surface:rgba(255,255,255,.06); --surface-2:rgba(255,255,255,.09);
  --text:#f5f6ff; --text-2:#d7d9ee; --muted:#9aa0c0; --muted-2:#6e7396;
  --border:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.24);
  --accent:#7c3aed; --accent-2:#22d3ee; --accent-ink:#fff;
  --grad:linear-gradient(120deg,#7c3aed 0%,#ec4899 45%,#22d3ee 100%);
  --grad-soft:linear-gradient(120deg,rgba(124,58,237,.20),rgba(34,211,238,.20));
  --r:18px; --r-lg:26px; --r-xl:34px;
  --shadow-md:0 20px 50px -20px rgba(124,58,237,.45), 0 6px 18px -6px rgba(34,211,238,.25);
  --shadow-lg:0 40px 90px -30px rgba(124,58,237,.55);
  --font-display:"Instrument Serif",serif;
  --font-ui:"Inter Tight","Inter",sans-serif;
}
[data-site-theme="aurora"] body::before{
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(124,58,237,.45), transparent 60%),
    radial-gradient(700px 420px at -10% 20%, rgba(34,211,238,.30), transparent 60%),
    radial-gradient(600px 380px at 40% 110%, rgba(236,72,153,.30), transparent 60%),
    linear-gradient(180deg,#0b0f1f 0%,#0e1226 100%);
  opacity:1;
}
[data-site-theme="aurora"] .nav,
[data-site-theme="aurora"] .card,
[data-site-theme="aurora"] .panel-nav,
[data-site-theme="aurora"] .stat,
[data-site-theme="aurora"] table,
[data-site-theme="aurora"] .theme-opt,
[data-site-theme="aurora"] .rm-toggle{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);
}
[data-site-theme="aurora"] .btn{
  background:var(--grad); color:#fff; border:0;
  box-shadow:0 10px 30px -10px rgba(124,58,237,.6);
}
[data-site-theme="aurora"] .btn-outline{
  background:rgba(255,255,255,.06); color:var(--text);
  border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(12px);
}
[data-site-theme="aurora"] input,
[data-site-theme="aurora"] select,
[data-site-theme="aurora"] textarea{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  color:var(--text); border-radius:14px;
}
[data-site-theme="aurora"] .brand::before{
  background:var(--grad);
  box-shadow:0 0 20px rgba(124,58,237,.7);
}

/* ─── 2. NEO-BRUTALIST ─── hard shadows, thick borders, pop colors ── */
[data-site-theme="neobrutal"]{
  --bg:#fef9e7; --bg-2:#fef08a; --surface:#ffffff; --surface-2:#fef9e7;
  --text:#000000; --text-2:#0a0a0a; --muted:#404040; --muted-2:#525252;
  --border:#000000; --border-strong:#000000;
  --accent:#ff2e63; --accent-2:#00d9a3; --accent-ink:#000;
  --grad:linear-gradient(90deg,#ff2e63,#ff2e63);
  --grad-soft:#fef08a;
  --r-xs:0px; --r-sm:0px; --r:4px; --r-lg:6px; --r-xl:8px; --r-pill:6px;
  --shadow-xs:2px 2px 0 #000;
  --shadow-sm:4px 4px 0 #000;
  --shadow-md:6px 6px 0 #000;
  --shadow-lg:10px 10px 0 #000;
  --ring:4px 4px 0 var(--accent);
  --font-display:"Archivo Black","Impact",sans-serif;
  --font-ui:"Space Mono",ui-monospace,monospace;
  --font-mono:"Space Mono",monospace;
}
[data-site-theme="neobrutal"] body::before{background:none; opacity:0}
[data-site-theme="neobrutal"] body{background:#fef9e7}
[data-site-theme="neobrutal"] h1,
[data-site-theme="neobrutal"] h2,
[data-site-theme="neobrutal"] h3{text-transform:uppercase;letter-spacing:-.01em;font-weight:900;color:#000}
[data-site-theme="neobrutal"] .nav{
  background:#fef08a; border-bottom:3px solid #000; backdrop-filter:none;
}
[data-site-theme="neobrutal"] .brand{font-family:"Archivo Black",sans-serif;text-transform:uppercase}
[data-site-theme="neobrutal"] .brand::before{background:#ff2e63;border:2px solid #000;border-radius:0;box-shadow:2px 2px 0 #000}
[data-site-theme="neobrutal"] .nav-links a{border:2px solid transparent;border-radius:0}
[data-site-theme="neobrutal"] .nav-links a:hover{background:#00d9a3;border-color:#000;color:#000}
[data-site-theme="neobrutal"] .card,
[data-site-theme="neobrutal"] .stat,
[data-site-theme="neobrutal"] .panel-nav,
[data-site-theme="neobrutal"] .theme-opt,
[data-site-theme="neobrutal"] .rm-toggle,
[data-site-theme="neobrutal"] table{
  background:#fff; border:3px solid #000; border-radius:4px; box-shadow:6px 6px 0 #000;
}
[data-site-theme="neobrutal"] .card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #000}
[data-site-theme="neobrutal"] .btn{
  background:#ff2e63; color:#fff; border:3px solid #000; border-radius:4px;
  box-shadow:4px 4px 0 #000; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
}
[data-site-theme="neobrutal"] .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000;background:#ff2e63}
[data-site-theme="neobrutal"] .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 #000}
[data-site-theme="neobrutal"] .btn-outline{background:#fff;color:#000}
[data-site-theme="neobrutal"] input,
[data-site-theme="neobrutal"] select,
[data-site-theme="neobrutal"] textarea{
  background:#fff; border:3px solid #000; border-radius:2px; color:#000;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.06);
}
[data-site-theme="neobrutal"] input:focus,
[data-site-theme="neobrutal"] select:focus,
[data-site-theme="neobrutal"] textarea:focus{outline:none;box-shadow:4px 4px 0 #ff2e63}
[data-site-theme="neobrutal"] .footer{background:#000;color:#fef08a;border-top:4px solid #ff2e63}
[data-site-theme="neobrutal"] .footer a{color:#fef08a}
[data-site-theme="neobrutal"] .badge,
[data-site-theme="neobrutal"] .tag{border:2px solid #000;border-radius:0;box-shadow:2px 2px 0 #000;font-weight:700;text-transform:uppercase}

/* ─── 3. NORD DEVELOPER ─── Arctic dark, mono, calm blues ─────── */
[data-site-theme="nord"]{
  --bg:#2e3440; --bg-2:#3b4252; --surface:#3b4252; --surface-2:#434c5e;
  --text:#eceff4; --text-2:#e5e9f0; --muted:#d8dee9; --muted-2:#9aa4b8;
  --border:rgba(216,222,233,.12); --border-strong:rgba(216,222,233,.24);
  --accent:#88c0d0; --accent-2:#81a1c1; --accent-ink:#2e3440;
  --grad:linear-gradient(120deg,#5e81ac,#88c0d0);
  --grad-soft:linear-gradient(120deg,rgba(94,129,172,.15),rgba(136,192,208,.15));
  --r-xs:3px; --r-sm:4px; --r:6px; --r-lg:8px; --r-xl:10px; --r-pill:6px;
  --shadow-xs:none;
  --shadow-sm:0 1px 0 rgba(0,0,0,.3);
  --shadow-md:0 2px 0 rgba(0,0,0,.35);
  --shadow-lg:0 6px 20px -6px rgba(0,0,0,.6);
  --font-display:"JetBrains Mono",ui-monospace,monospace;
  --font-ui:"Inter Tight","Inter",sans-serif;
  --font-mono:"JetBrains Mono",monospace;
}
[data-site-theme="nord"] body::before{background:none;opacity:0}
[data-site-theme="nord"] body{background:#2e3440}
[data-site-theme="nord"] h1,
[data-site-theme="nord"] h2,
[data-site-theme="nord"] h3{font-family:"JetBrains Mono",monospace;font-weight:600;letter-spacing:-.02em;color:#eceff4}
[data-site-theme="nord"] h1::before,
[data-site-theme="nord"] .page-title::before{content:"# ";color:#81a1c1;font-family:inherit;opacity:.7}
[data-site-theme="nord"] .nav{background:#242933;border-bottom:1px solid rgba(216,222,233,.08);backdrop-filter:none}
[data-site-theme="nord"] .brand{font-family:"JetBrains Mono",monospace;font-weight:700;color:#88c0d0;font-size:1.15rem}
[data-site-theme="nord"] .brand::before{background:#88c0d0;box-shadow:none;border-radius:2px}
[data-site-theme="nord"] .nav-links a{color:#d8dee9;font-family:"JetBrains Mono",monospace;font-size:.85rem;border-radius:4px}
[data-site-theme="nord"] .nav-links a:hover{background:#3b4252;color:#88c0d0}
[data-site-theme="nord"] .card,
[data-site-theme="nord"] .panel-nav,
[data-site-theme="nord"] .stat,
[data-site-theme="nord"] .theme-opt,
[data-site-theme="nord"] .rm-toggle,
[data-site-theme="nord"] table{
  background:#3b4252; border:1px solid #434c5e; border-radius:6px; box-shadow:none;
}
[data-site-theme="nord"] .btn{
  background:#88c0d0; color:#2e3440; border-radius:6px; font-family:"JetBrains Mono",monospace;
  font-weight:600; box-shadow:0 1px 0 rgba(0,0,0,.3);
}
[data-site-theme="nord"] .btn:hover{background:#8fbcbb}
[data-site-theme="nord"] .btn-outline{background:transparent;color:#88c0d0;border:1px solid #4c566a}
[data-site-theme="nord"] input,
[data-site-theme="nord"] select,
[data-site-theme="nord"] textarea{
  background:#2e3440; border:1px solid #434c5e; color:#eceff4; border-radius:4px;
  font-family:"JetBrains Mono",monospace; font-size:.9rem;
}
[data-site-theme="nord"] input:focus,
[data-site-theme="nord"] select:focus{border-color:#88c0d0;box-shadow:0 0 0 2px rgba(136,192,208,.25);outline:none}
[data-site-theme="nord"] code,
[data-site-theme="nord"] kbd{background:#2e3440;color:#a3be8c;padding:2px 6px;border-radius:3px;border:1px solid #434c5e}
[data-site-theme="nord"] .footer{background:#242933;border-top:1px solid #3b4252;color:#d8dee9}
[data-site-theme="nord"] a:hover{color:#88c0d0}

/* ─── 4. RETRO EDITORIAL ─── Cream, terracotta, serif magazine ── */
[data-site-theme="retro"]{
  --bg:#faf3e7; --bg-2:#f5ebd6; --surface:#fffdf7; --surface-2:#f5ebd6;
  --text:#3d1f0f; --text-2:#5c3320; --muted:#8b6b4f; --muted-2:#a68b6f;
  --border:rgba(61,31,15,.18); --border-strong:rgba(61,31,15,.35);
  --accent:#c2410c; --accent-2:#d97706; --accent-ink:#faf3e7;
  --grad:linear-gradient(120deg,#c2410c,#d97706);
  --grad-soft:linear-gradient(120deg,rgba(194,65,12,.10),rgba(217,119,6,.10));
  --r-xs:2px; --r-sm:3px; --r:4px; --r-lg:6px; --r-xl:8px; --r-pill:999px;
  --shadow-sm:0 1px 0 rgba(61,31,15,.15);
  --shadow-md:0 8px 24px -12px rgba(61,31,15,.25);
  --shadow-lg:0 20px 50px -20px rgba(61,31,15,.35);
  --font-display:"Fraunces","Playfair Display",Georgia,serif;
  --font-ui:"Inter Tight","Inter",sans-serif;
}
[data-site-theme="retro"] body{background:#faf3e7;
  background-image:
    radial-gradient(rgba(61,31,15,.055) 1px, transparent 1px),
    radial-gradient(rgba(61,31,15,.035) 1px, transparent 1px);
  background-size:24px 24px, 8px 8px;
  background-position:0 0, 12px 12px;
}
[data-site-theme="retro"] body::before{background:none;opacity:0}
[data-site-theme="retro"] h1,
[data-site-theme="retro"] h2,
[data-site-theme="retro"] h3,
[data-site-theme="retro"] .page-title{
  font-family:"Fraunces",serif; font-weight:800; letter-spacing:-.03em;
  color:#3d1f0f; font-style:normal;
}
[data-site-theme="retro"] h1{font-size:clamp(2.6rem,6vw,5rem);line-height:.95}
[data-site-theme="retro"] h2{border-bottom:2px solid #3d1f0f;padding-bottom:.3em;display:inline-block}
[data-site-theme="retro"] .nav{
  background:#faf3e7; border-bottom:3px double #3d1f0f; backdrop-filter:none;
}
[data-site-theme="retro"] .brand{font-family:"Fraunces",serif;font-weight:800;font-style:italic;color:#c2410c;font-size:1.9rem}
[data-site-theme="retro"] .brand::before{display:none}
[data-site-theme="retro"] .brand::after{content:"®";font-size:.6em;vertical-align:super;color:#8b6b4f;margin-left:2px}
[data-site-theme="retro"] .nav-links a{color:#3d1f0f;text-transform:uppercase;font-size:.75rem;letter-spacing:.15em;font-weight:600}
[data-site-theme="retro"] .nav-links a:hover{color:#c2410c;background:transparent;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
[data-site-theme="retro"] .card,
[data-site-theme="retro"] .panel-nav,
[data-site-theme="retro"] .stat,
[data-site-theme="retro"] .theme-opt,
[data-site-theme="retro"] .rm-toggle,
[data-site-theme="retro"] table{
  background:#fffdf7; border:1px solid rgba(61,31,15,.22); border-radius:4px;
  box-shadow:0 1px 0 rgba(61,31,15,.15), 0 8px 20px -14px rgba(61,31,15,.2);
}
[data-site-theme="retro"] .btn{
  background:#3d1f0f; color:#faf3e7; border-radius:2px; font-family:"Inter Tight",sans-serif;
  font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.8rem;
  padding:14px 26px; box-shadow:3px 3px 0 #c2410c;
}
[data-site-theme="retro"] .btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #c2410c;background:#3d1f0f}
[data-site-theme="retro"] .btn-outline{background:transparent;color:#3d1f0f;border:1.5px solid #3d1f0f;box-shadow:none}
[data-site-theme="retro"] .btn-outline:hover{background:#3d1f0f;color:#faf3e7}
[data-site-theme="retro"] input,
[data-site-theme="retro"] select,
[data-site-theme="retro"] textarea{
  background:#fffdf7; border:1px solid rgba(61,31,15,.35); color:#3d1f0f; border-radius:2px;
}
[data-site-theme="retro"] input:focus,
[data-site-theme="retro"] select:focus{border-color:#c2410c;outline:none;box-shadow:0 0 0 3px rgba(194,65,12,.15)}
[data-site-theme="retro"] .footer{background:#3d1f0f;color:#faf3e7;border-top:6px double #c2410c}
[data-site-theme="retro"] .footer a{color:#faf3e7}
[data-site-theme="retro"] .badge{border-radius:2px;font-family:"Fraunces",serif;font-style:italic}

/* ─── 5. CYBER NEON ─── Dark base, magenta+cyan glow, sharp ────── */
[data-site-theme="cyber"]{
  --bg:#020617; --bg-2:#0a0b1e; --surface:#0f1128; --surface-2:#151833;
  --text:#e4e8ff; --text-2:#c8ccf0; --muted:#8a8fb8; --muted-2:#5c6191;
  --border:rgba(124,58,237,.28); --border-strong:rgba(34,211,238,.5);
  --accent:#f0abfc; --accent-2:#22d3ee; --accent-ink:#020617;
  --grad:linear-gradient(90deg,#f0abfc 0%,#22d3ee 100%);
  --grad-soft:linear-gradient(120deg,rgba(240,171,252,.14),rgba(34,211,238,.14));
  --r-xs:0; --r-sm:0; --r:2px; --r-lg:2px; --r-xl:2px; --r-pill:0;
  --shadow-sm:0 0 10px rgba(240,171,252,.35);
  --shadow-md:0 0 20px rgba(240,171,252,.5), 0 0 40px rgba(34,211,238,.25);
  --shadow-lg:0 0 40px rgba(240,171,252,.7), 0 0 80px rgba(34,211,238,.35);
  --ring:0 0 0 2px #f0abfc, 0 0 20px rgba(240,171,252,.6);
  --font-display:"Space Grotesk",sans-serif;
  --font-ui:"Space Grotesk",sans-serif;
  --font-mono:"Space Mono",monospace;
}
[data-site-theme="cyber"] body{background:#020617;color:#e4e8ff}
[data-site-theme="cyber"] body::before{
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(240,171,252,.20), transparent 60%),
    radial-gradient(700px 400px at 0% 80%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(rgba(124,58,237,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.06) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 40px 40px, 40px 40px;
  opacity:1;
}
[data-site-theme="cyber"] h1,
[data-site-theme="cyber"] h2,
[data-site-theme="cyber"] h3,
[data-site-theme="cyber"] .page-title{
  font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:-.03em;
  color:#f0abfc; text-shadow:0 0 20px rgba(240,171,252,.5);
}
[data-site-theme="cyber"] h1{text-transform:uppercase}
[data-site-theme="cyber"] .nav{
  background:rgba(2,6,23,.85); border-bottom:1px solid rgba(240,171,252,.3);
  backdrop-filter:blur(10px);
  box-shadow:0 0 30px rgba(240,171,252,.15);
}
[data-site-theme="cyber"] .brand{font-family:"Space Grotesk",sans-serif;font-weight:700;color:#f0abfc;text-transform:uppercase;letter-spacing:.05em;font-size:1.25rem;text-shadow:0 0 15px rgba(240,171,252,.7)}
[data-site-theme="cyber"] .brand::before{background:#22d3ee;box-shadow:0 0 15px #22d3ee, 0 0 30px rgba(34,211,238,.6);border-radius:0}
[data-site-theme="cyber"] .nav-links a{color:#c8ccf0;font-family:"Space Mono",monospace;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;border-radius:0;border:1px solid transparent}
[data-site-theme="cyber"] .nav-links a:hover{background:rgba(240,171,252,.08);color:#f0abfc;border-color:rgba(240,171,252,.4);box-shadow:0 0 12px rgba(240,171,252,.3)}
[data-site-theme="cyber"] .card,
[data-site-theme="cyber"] .panel-nav,
[data-site-theme="cyber"] .stat,
[data-site-theme="cyber"] .theme-opt,
[data-site-theme="cyber"] .rm-toggle,
[data-site-theme="cyber"] table{
  background:rgba(15,17,40,.7); border:1px solid rgba(124,58,237,.35); border-radius:2px;
  box-shadow:0 0 20px rgba(124,58,237,.15), inset 0 0 20px rgba(34,211,238,.03);
  backdrop-filter:blur(8px);
}
[data-site-theme="cyber"] .card:hover{border-color:#22d3ee;box-shadow:0 0 30px rgba(34,211,238,.35)}
[data-site-theme="cyber"] .btn{
  background:linear-gradient(90deg,#f0abfc,#22d3ee); color:#020617; border:0; border-radius:2px;
  font-family:"Space Grotesk",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  box-shadow:0 0 20px rgba(240,171,252,.5), 0 0 40px rgba(34,211,238,.3);
  position:relative;
}
[data-site-theme="cyber"] .btn:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(240,171,252,.7), 0 0 60px rgba(34,211,238,.5)}
[data-site-theme="cyber"] .btn-outline{
  background:transparent; color:#22d3ee; border:1px solid #22d3ee;
  box-shadow:0 0 10px rgba(34,211,238,.3), inset 0 0 10px rgba(34,211,238,.06);
}
[data-site-theme="cyber"] input,
[data-site-theme="cyber"] select,
[data-site-theme="cyber"] textarea{
  background:rgba(2,6,23,.6); border:1px solid rgba(124,58,237,.4); color:#e4e8ff; border-radius:2px;
  font-family:"Space Mono",monospace;
}
[data-site-theme="cyber"] input:focus,
[data-site-theme="cyber"] select:focus{border-color:#22d3ee;box-shadow:0 0 0 2px rgba(34,211,238,.3), 0 0 20px rgba(34,211,238,.4);outline:none}
[data-site-theme="cyber"] code,
[data-site-theme="cyber"] kbd{background:rgba(2,6,23,.7);color:#22d3ee;border:1px solid rgba(34,211,238,.3);border-radius:2px}
[data-site-theme="cyber"] a:hover{color:#f0abfc;text-shadow:0 0 10px rgba(240,171,252,.6)}
[data-site-theme="cyber"] .footer{background:rgba(2,6,23,.85);border-top:1px solid rgba(240,171,252,.3);color:#c8ccf0}
[data-site-theme="cyber"] .badge{border-radius:0;font-family:"Space Mono",monospace;text-transform:uppercase;letter-spacing:.08em;border:1px solid currentColor}
[data-site-theme="cyber"] hr{border-top:1px solid rgba(240,171,252,.25);box-shadow:0 0 8px rgba(240,171,252,.3)}

/* Reduced motion override — respects admin toggle across themes */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after{
  animation-duration:.01ms !important; animation-iteration-count:1 !important;
  transition-duration:.01ms !important; scroll-behavior:auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NEW SKINS (v25) — 5 additional fully distinct themes
   sunset · mono · forest · ocean · terminal
   Selected via <html data-site-theme="…">
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 6. SUNSET GRADIENT ─── warm coral + peach, editorial ───── */
[data-site-theme="sunset"]{
  --bg:#FFF3EA; --bg-2:#FFE6D2; --surface:#FFFFFF; --surface-2:#FFF8F0;
  --text:#3A1B0F; --text-2:#5A2A18; --muted:#8B5A3C; --muted-2:#A67555;
  --border:rgba(58,27,15,.10); --border-strong:rgba(58,27,15,.22);
  --accent:#E85D3A; --accent-2:#F7A25B; --accent-ink:#FFFFFF;
  --grad:linear-gradient(120deg,#F7A25B 0%,#E85D3A 50%,#C43C6E 100%);
  --grad-soft:linear-gradient(120deg,rgba(247,162,91,.18),rgba(196,60,110,.14));
  --r:16px; --r-lg:22px; --r-xl:32px;
  --shadow-md:0 20px 40px -18px rgba(232,93,58,.35);
  --font-display:"Fraunces",serif;
  --font-ui:"Inter Tight",sans-serif;
}
[data-site-theme="sunset"] body::before{
  background:radial-gradient(800px 500px at 100% 0%,rgba(232,93,58,.28),transparent 60%),
             radial-gradient(700px 400px at 0% 20%,rgba(247,162,91,.25),transparent 60%),
             linear-gradient(180deg,#FFF3EA,#FFE6D2);
  opacity:1;
}
[data-site-theme="sunset"] .nav{background:rgba(255,248,240,.85);backdrop-filter:blur(16px);border-bottom:1px solid rgba(58,27,15,.08)}
[data-site-theme="sunset"] .btn{background:var(--grad);color:#fff;border:0;box-shadow:0 12px 28px -12px rgba(232,93,58,.55)}
[data-site-theme="sunset"] .btn-outline{background:transparent;color:var(--text);border:1px solid var(--border-strong)}
[data-site-theme="sunset"] .brand::before{background:var(--grad)}

/* ─── 7. MONOCHROME SWISS ─── strict B&W, Swiss grid, typography ── */
[data-site-theme="mono"]{
  --bg:#FFFFFF; --bg-2:#F5F5F5; --surface:#FFFFFF; --surface-2:#FAFAFA;
  --text:#000000; --text-2:#1a1a1a; --muted:#525252; --muted-2:#737373;
  --border:#000000; --border-strong:#000000;
  --accent:#000000; --accent-2:#404040; --accent-ink:#FFFFFF;
  --grad:#000000; --grad-soft:#F5F5F5;
  --r-xs:0; --r-sm:0; --r:0; --r-lg:0; --r-xl:0; --r-pill:0;
  --shadow-xs:none; --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
  --font-display:"Space Grotesk",sans-serif;
  --font-ui:"Space Grotesk",sans-serif;
}
[data-site-theme="mono"] body::before{opacity:0}
[data-site-theme="mono"] body{background:#fff}
[data-site-theme="mono"] .nav{background:#fff;border-bottom:1px solid #000}
[data-site-theme="mono"] h1,[data-site-theme="mono"] h2,[data-site-theme="mono"] h3{letter-spacing:-.03em;font-weight:700}
[data-site-theme="mono"] .card,[data-site-theme="mono"] .stat,[data-site-theme="mono"] .panel-nav,[data-site-theme="mono"] table{background:#fff;border:1px solid #000;border-radius:0}
[data-site-theme="mono"] .btn{background:#000;color:#fff;border:1px solid #000;border-radius:0;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
[data-site-theme="mono"] .btn:hover{background:#fff;color:#000}
[data-site-theme="mono"] .btn-outline{background:#fff;color:#000;border:1px solid #000}
[data-site-theme="mono"] .btn-outline:hover{background:#000;color:#fff}
[data-site-theme="mono"] input,[data-site-theme="mono"] select,[data-site-theme="mono"] textarea{background:#fff;border:1px solid #000;border-radius:0;color:#000}
[data-site-theme="mono"] .brand::before{background:#000;border-radius:0}
[data-site-theme="mono"] .footer{background:#000;color:#fff;border-top:0}
[data-site-theme="mono"] .footer a{color:#fff}
[data-site-theme="mono"] .badge,[data-site-theme="mono"] .tag{border:1px solid #000;border-radius:0;background:#fff;color:#000}

/* ─── 8. FOREST EARTH ─── deep greens, warm cream, organic ─────── */
[data-site-theme="forest"]{
  --bg:#F5F1E8; --bg-2:#EAE3D2; --surface:#FDFBF5; --surface-2:#F0EAD8;
  --text:#1A2E1A; --text-2:#2D4A2D; --muted:#5C6E4F; --muted-2:#7A8B6B;
  --border:rgba(26,46,26,.12); --border-strong:rgba(26,46,26,.28);
  --accent:#4A7C3C; --accent-2:#6B9E4F; --accent-ink:#FDFBF5;
  --grad:linear-gradient(120deg,#2D4A2D 0%,#4A7C3C 50%,#8FB56C 100%);
  --grad-soft:linear-gradient(120deg,rgba(74,124,60,.14),rgba(143,181,108,.14));
  --r:12px; --r-lg:18px; --r-xl:24px;
  --shadow-md:0 16px 36px -18px rgba(26,46,26,.32);
  --font-display:"Fraunces",serif;
  --font-ui:"Inter Tight",sans-serif;
}
[data-site-theme="forest"] body::before{background:radial-gradient(700px 400px at 90% 10%,rgba(74,124,60,.18),transparent 60%);opacity:1}
[data-site-theme="forest"] .nav{background:rgba(245,241,232,.85);backdrop-filter:blur(14px);border-bottom:1px solid rgba(26,46,26,.08)}
[data-site-theme="forest"] .card,[data-site-theme="forest"] .stat{background:var(--surface);border:1px solid var(--border)}
[data-site-theme="forest"] .btn{background:var(--accent);color:#fff;border:0}
[data-site-theme="forest"] .btn:hover{background:#3d6830}
[data-site-theme="forest"] .btn-outline{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
[data-site-theme="forest"] .brand::before{background:var(--grad)}
[data-site-theme="forest"] .footer{background:#1A2E1A;color:#EAE3D2}

/* ─── 9. OCEAN DEEP ─── navy + teal, professional, calm ────────── */
[data-site-theme="ocean"]{
  --bg:#0A1929; --bg-2:#0F2340; --surface:#132F4C; --surface-2:#1A3A5C;
  --text:#E7F6FF; --text-2:#B8DCF4; --muted:#7FB3D5; --muted-2:#5A8FB3;
  --border:rgba(127,179,213,.16); --border-strong:rgba(127,179,213,.32);
  --accent:#00D4B4; --accent-2:#5CBDB9; --accent-ink:#0A1929;
  --grad:linear-gradient(120deg,#00D4B4 0%,#0EA5E9 50%,#3B82F6 100%);
  --grad-soft:linear-gradient(120deg,rgba(0,212,180,.18),rgba(59,130,246,.14));
  --r:14px; --r-lg:20px; --r-xl:28px;
  --shadow-md:0 20px 40px -18px rgba(0,0,0,.6);
  --font-display:"Inter Tight",sans-serif;
  --font-ui:"Inter Tight",sans-serif;
}
[data-site-theme="ocean"] body::before{background:radial-gradient(900px 500px at 80% -10%,rgba(0,212,180,.22),transparent 60%),radial-gradient(700px 400px at 10% 30%,rgba(59,130,246,.20),transparent 60%),linear-gradient(180deg,#0A1929,#0F2340);opacity:1}
[data-site-theme="ocean"] .nav{background:rgba(19,47,76,.75);backdrop-filter:blur(20px);border-bottom:1px solid rgba(127,179,213,.14)}
[data-site-theme="ocean"] .card,[data-site-theme="ocean"] .stat,[data-site-theme="ocean"] .panel-nav,[data-site-theme="ocean"] table{background:rgba(19,47,76,.6);border:1px solid rgba(127,179,213,.14);backdrop-filter:blur(12px)}
[data-site-theme="ocean"] .btn{background:var(--grad);color:#0A1929;border:0;font-weight:600;box-shadow:0 10px 28px -10px rgba(0,212,180,.55)}
[data-site-theme="ocean"] .btn-outline{background:transparent;color:var(--accent);border:1px solid var(--accent)}
[data-site-theme="ocean"] input,[data-site-theme="ocean"] select,[data-site-theme="ocean"] textarea{background:rgba(10,25,41,.5);border:1px solid rgba(127,179,213,.2);color:var(--text)}
[data-site-theme="ocean"] .brand::before{background:var(--grad)}
[data-site-theme="ocean"] .footer{background:#050F1C;color:#B8DCF4}

/* ─── 10. TERMINAL CRT ─── green phosphor on black, hacker vibe ── */
[data-site-theme="terminal"]{
  --bg:#000000; --bg-2:#0a0a0a; --surface:#0d1a0d; --surface-2:#101f10;
  --text:#00FF41; --text-2:#00E039; --muted:#00B32F; --muted-2:#008524;
  --border:rgba(0,255,65,.24); --border-strong:rgba(0,255,65,.5);
  --accent:#00FF41; --accent-2:#39FF7A; --accent-ink:#000000;
  --grad:linear-gradient(90deg,#00FF41,#39FF7A);
  --grad-soft:linear-gradient(120deg,rgba(0,255,65,.10),rgba(57,255,122,.10));
  --r-xs:0; --r-sm:2px; --r:2px; --r-lg:2px; --r-xl:2px; --r-pill:2px;
  --shadow-md:0 0 24px rgba(0,255,65,.35);
  --font-display:"JetBrains Mono",monospace;
  --font-ui:"JetBrains Mono","Space Mono",monospace;
  --font-mono:"JetBrains Mono",monospace;
}
[data-site-theme="terminal"] body::before{background:repeating-linear-gradient(0deg,rgba(0,255,65,.03) 0,rgba(0,255,65,.03) 1px,transparent 1px,transparent 3px);opacity:1;pointer-events:none;position:fixed;inset:0}
[data-site-theme="terminal"] body{background:#000;text-shadow:0 0 2px rgba(0,255,65,.35)}
[data-site-theme="terminal"] .nav{background:#000;border-bottom:1px solid var(--border-strong)}
[data-site-theme="terminal"] h1::before,[data-site-theme="terminal"] .page-title::before{content:"> ";color:var(--accent-2)}
[data-site-theme="terminal"] .card,[data-site-theme="terminal"] .stat,[data-site-theme="terminal"] table,[data-site-theme="terminal"] .panel-nav{background:var(--surface);border:1px solid var(--border-strong);box-shadow:inset 0 0 30px rgba(0,255,65,.06)}
[data-site-theme="terminal"] .btn{background:transparent;color:var(--accent);border:1px solid var(--accent);text-transform:uppercase;letter-spacing:.1em;font-weight:600;box-shadow:0 0 10px rgba(0,255,65,.3)}
[data-site-theme="terminal"] .btn:hover{background:var(--accent);color:#000;box-shadow:0 0 20px rgba(0,255,65,.6)}
[data-site-theme="terminal"] .btn-outline{background:transparent;color:var(--accent-2);border:1px dashed var(--border-strong)}
[data-site-theme="terminal"] input,[data-site-theme="terminal"] select,[data-site-theme="terminal"] textarea{background:#000;border:1px solid var(--border-strong);color:var(--accent);font-family:"JetBrains Mono",monospace;caret-color:var(--accent)}
[data-site-theme="terminal"] input:focus,[data-site-theme="terminal"] textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,255,65,.3)}
[data-site-theme="terminal"] .brand{color:var(--accent)}
[data-site-theme="terminal"] .brand::before{background:var(--accent);box-shadow:0 0 12px rgba(0,255,65,.6)}
[data-site-theme="terminal"] .footer{background:#000;color:var(--muted);border-top:1px solid var(--border-strong)}
[data-site-theme="terminal"] a{color:var(--accent-2)}
[data-site-theme="terminal"] a:hover{color:#fff;text-shadow:0 0 8px var(--accent)}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL DARK MODE OVERRIDE (v25)
   Wins over any site-theme via html-scoped selector.
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"][data-site-theme="sunset"],
html[data-theme="dark"][data-site-theme="mono"],
html[data-theme="dark"][data-site-theme="forest"],
html[data-theme="dark"][data-site-theme="neobrutal"],
html[data-theme="dark"][data-site-theme="retro"]{
  --bg:#0B0B0C; --bg-2:#111114; --surface:#141416; --surface-2:#1B1B1F;
  --text:#F5F5F2; --text-2:#D8D8D5; --muted:#A0A0A6; --muted-2:#77777C;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.22);
}
html[data-theme="dark"][data-site-theme="sunset"] body::before,
html[data-theme="dark"][data-site-theme="forest"] body::before{background:linear-gradient(180deg,#0B0B0C,#111114);opacity:1}
html[data-theme="dark"][data-site-theme="mono"] body::before,
html[data-theme="dark"][data-site-theme="retro"] body::before{background:none;opacity:0}

/* Universal Dark Mode Fixes - Maps hardcoded colors to tokens */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] .page-title, html[data-theme="dark"] .brand { color: var(--text); }
html[data-theme="dark"] .nav, html[data-theme="dark"] .card, html[data-theme="dark"] .step, html[data-theme="dark"] table, html[data-theme="dark"] .stat, html[data-theme="dark"] .panel-nav, html[data-theme="dark"] .footer { background: var(--surface); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .nav-links a { color: var(--text); }
html[data-theme="dark"] .btn:not(.btn-primary):not(.btn-outline):not(.btn-green):not(.btn-danger) { background: var(--text); color: var(--bg); }
html[data-theme="dark"] .btn-outline { border-color: var(--text); color: var(--text); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }


/* Force light mode override for inherently dark skins → light-friendly recolor */
html[data-theme="light"][data-site-theme="aurora"],
html[data-theme="light"][data-site-theme="nord"],
html[data-theme="light"][data-site-theme="cyber"],
html[data-theme="light"][data-site-theme="ocean"],
html[data-theme="light"][data-site-theme="terminal"]{
  --bg:#FAFAF7; --bg-2:#F4F3EE; --surface:#FFFFFF; --surface-2:#F7F6F1;
  --text:#0B0B0C; --text-2:#2A2A2E; --muted:#6B6B6B; --muted-2:#8A8A8E;
  --border:rgba(11,11,12,.09); --border-strong:rgba(11,11,12,.16);
}
html[data-theme="light"][data-site-theme="aurora"] body::before,
html[data-theme="light"][data-site-theme="ocean"] body::before,
html[data-theme="light"][data-site-theme="nord"] body::before,
html[data-theme="light"][data-site-theme="cyber"] body::before,
html[data-theme="light"][data-site-theme="terminal"] body::before{background:linear-gradient(180deg,#FAFAF7,#F4F3EE);opacity:1}
html[data-theme="light"][data-site-theme="terminal"] body{text-shadow:none;background:#FAFAF7}

/* Universal Light Mode Fixes - Maps hardcoded colors to tokens */
html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] .page-title, html[data-theme="light"] .brand { color: var(--text); }
html[data-theme="light"] .nav, html[data-theme="light"] .card, html[data-theme="light"] .step, html[data-theme="light"] table, html[data-theme="light"] .stat, html[data-theme="light"] .panel-nav, html[data-theme="light"] .footer { background: var(--surface); color: var(--text); border-color: var(--border); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="light"] .nav-links a { color: var(--text); }
html[data-theme="light"] .btn:not(.btn-primary):not(.btn-outline):not(.btn-green):not(.btn-danger) { background: var(--text); color: var(--bg); }
html[data-theme="light"] .btn-outline { border-color: var(--text); color: var(--text); }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }



/* ═══════════════════════════════════════════════════════════════════
   SKIN PICKER (nav dropdown)
   ═══════════════════════════════════════════════════════════════════ */
.skin-picker{position:relative;display:inline-block}
.skin-picker summary{list-style:none;cursor:pointer;padding:6px 10px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-size:.85rem;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.skin-picker summary::-webkit-details-marker{display:none}
.skin-picker[open] summary{background:var(--surface-2)}
.skin-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r);box-shadow:var(--shadow-md);padding:6px;z-index:1000;max-height:70vh;overflow:auto}
.skin-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:transparent;color:var(--text);cursor:pointer;text-align:left;border-radius:var(--r-sm);font-size:.9rem}
.skin-menu button:hover{background:var(--surface-2)}
.skin-menu button.active{background:var(--grad-soft);color:var(--text);font-weight:600}
.skin-swatch{width:22px;height:22px;border-radius:6px;flex-shrink:0;border:1px solid var(--border)}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY — HIGH CONTRAST & REDUCED MOTION (per-user prefs)
   ═══════════════════════════════════════════════════════════════════ */
html[data-contrast="high"]{
  --border:#000; --border-strong:#000; --muted:#111;
  --text:#000; --heading:#000;
}
html[data-contrast="high"][data-theme="dark"]{
  --border:#fff; --border-strong:#fff; --muted:#f5f5f5;
  --text:#fff; --heading:#fff;
}
html[data-contrast="high"] body{background:#fff;color:#000}
html[data-contrast="high"][data-theme="dark"] body{background:#000;color:#fff}
html[data-contrast="high"] a{text-decoration:underline;text-underline-offset:2px}
html[data-contrast="high"] .btn,
html[data-contrast="high"] .card,
html[data-contrast="high"] .nav,
html[data-contrast="high"] input,
html[data-contrast="high"] select,
html[data-contrast="high"] textarea,
html[data-contrast="high"] table,
html[data-contrast="high"] .stat,
html[data-contrast="high"] .panel-side,
html[data-contrast="high"] .panel-main{
  border:2px solid currentColor !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
html[data-contrast="high"] :focus-visible{outline:3px solid currentColor;outline-offset:2px}
html[data-contrast="high"] .muted,html[data-contrast="high"] .page-sub,html[data-contrast="high"] small{color:currentColor !important;opacity:.9}

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after{
  animation-duration:0.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:0.001ms !important;
  scroll-behavior:auto !important;
}
html[data-motion="reduced"] .reveal{opacity:1 !important;transform:none !important}

/* Appearance settings page — preview swatches */
.appearance-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:12px}
.appearance-swatch{cursor:pointer;padding:10px;border-radius:var(--r);border:2px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:8px;transition:border-color .15s}
.appearance-swatch:hover{border-color:var(--accent)}
.appearance-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 30%,transparent)}
.appearance-swatch .sw{height:56px;border-radius:8px}
.appearance-swatch .nm{font-size:.85rem;font-weight:600;color:var(--text)}
.pref-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.pref-row:last-child{border-bottom:0}
.pref-row .lbl{font-weight:600;color:var(--text)}
.pref-row .sub{font-size:.8rem;color:var(--muted);margin-top:2px}
.pref-row .ctrl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ── v25 fixes: Neobrutal services cards + Retro nav Sign Up ── */
[data-site-theme="neobrutal"] .grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
[data-site-theme="neobrutal"] .card{padding:var(--sp-4)}
[data-site-theme="neobrutal"] .card h3{font-size:1.05rem;line-height:1.15;margin:0 0 6px}
[data-site-theme="neobrutal"] .card .price{
  font-size:1.5rem;line-height:1.1;white-space:nowrap;letter-spacing:-.02em;
  margin-top:auto;padding-top:var(--sp-3)
}
[data-site-theme="neobrutal"] .card .btn{width:100%;justify-content:center}

/* Retro: nav-links anchor color rule was hiding the Sign Up button text.
   Force the button variants back to their accent-ink cream. */
[data-site-theme="retro"] .nav-links a.btn,
[data-site-theme="retro"] .nav .btn.btn-primary,
[data-site-theme="retro"] .nav .btn.btn-accent{
  color:#faf3e7 !important;
  background:linear-gradient(120deg,#c2410c,#d97706);
  border:0;
  letter-spacing:.12em;
}
[data-site-theme="retro"] .nav-links a.btn:hover{color:#faf3e7 !important;background:#3d1f0f}

/* ── v27 polish: tables, forms, focus, cards, skeletons, demos ── */
/* Sticky, sortable-looking headers + zebra + hover for all admin/user tables */
.table-wrap{border:1px solid var(--border);border-radius:var(--r);overflow:auto;background:var(--surface)}
.table-wrap table{border-collapse:separate;border-spacing:0;width:100%}
.table-wrap thead tr th,
.table-wrap table > tbody > tr:first-child th,
.table-wrap table > tr:first-child th{
  position:sticky;top:0;z-index:2;
  background:var(--surface-2);
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
  border-bottom:1px solid var(--border);
}
.table-wrap td,.table-wrap th{padding:12px 14px;vertical-align:middle}
.table-wrap tr + tr td{border-top:1px solid var(--border)}
.table-wrap tbody tr:nth-child(even) td,
.table-wrap table > tr:nth-child(even):not(:first-child) td{background:color-mix(in oklab,var(--surface-2) 40%,transparent)}
.table-wrap tbody tr:hover td,
.table-wrap table > tr:hover:not(:first-child) td{background:color-mix(in oklab,var(--accent) 8%,var(--surface))}

/* Consistent focus rings sitewide */
:where(a,button,input,select,textarea,[role="button"],.btn,.chip-f):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;
}

/* Card hover lift (except neobrutal — it uses hard shadow) */
:where(.card):not([data-site-theme="neobrutal"] .card){transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
:where(.card):hover:not([data-site-theme="neobrutal"] .card){transform:translateY(-2px);box-shadow:var(--shadow-lg,0 12px 30px -14px rgba(0,0,0,.25))}

/* Empty state — bigger, friendlier */
.empty-state{text-align:center;padding:40px 20px}
.empty-state .empty-ico{font-size:2.4rem;line-height:1;margin-bottom:10px;opacity:.85}
.empty-state p{color:var(--muted);margin:.4rem 0 1rem}

/* Alert polish + auto-dismiss animation */
.alert{position:relative;overflow:hidden}
.alert.is-dismissing{opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease}

/* Skeleton loader utility */
.skeleton{background:linear-gradient(90deg,var(--surface-2) 0%,color-mix(in oklab,var(--surface-2) 60%,var(--border)) 50%,var(--surface-2) 100%);
  background-size:200% 100%;animation:skshine 1.4s linear infinite;border-radius:6px;color:transparent!important}
@keyframes skshine{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Demo previews: subtle intro animation + monospace log typing look */
.demo-frame{animation:demoFade .45s ease both}
@keyframes demoFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.demo-frame .dfpre{position:relative}
.demo-frame .dfpre::after{content:"▍";color:#7CFFB2;animation:blink 1s steps(1) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}
.demo-frame .dfthumb,.demo-frame .dflogo{transition:transform .2s ease}
.demo-frame .dfthumb:hover,.demo-frame .dflogo:hover{transform:scale(1.03) rotate(-.4deg)}
.demo-frame .dfphone{transition:transform .18s ease,box-shadow .18s ease}
.demo-frame .dfphone:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* Toolbar spacing consistency */
.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0}
.filter-chips{display:flex;gap:6px;flex-wrap:wrap}
.chip-f{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:.85rem;font-weight:600;text-decoration:none;transition:all .15s}
.chip-f span{opacity:.6;font-weight:500;font-size:.78rem}
.chip-f:hover{border-color:var(--accent);color:var(--accent)}
.chip-f.active{background:var(--accent);color:var(--accent-ink,#fff);border-color:var(--accent)}
.chip-f.active span{opacity:.85;color:inherit}

/* Reduced-motion respect */
html[data-motion="reduced"] .demo-frame,
html[data-motion="reduced"] .demo-frame .dfpre::after,
html[data-motion="reduced"] .skeleton{animation:none!important}
html[data-motion="reduced"] :where(.card):hover{transform:none!important}

/* ── v28: mobile improvements — admin tables, demos, service cards ── */
@media (max-width: 720px){
  /* Toolbar stacks and search fills width */
  .toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .toolbar .search-form{display:flex;gap:6px}
  .toolbar .search-form input[type="search"]{flex:1;min-width:0}
  .filter-chips{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:4px;margin:0 -4px;padding-left:4px;padding-right:4px}
  .filter-chips::-webkit-scrollbar{display:none}
  .chip-f{white-space:nowrap;flex:0 0 auto}

  /* Admin/user tables → card list on mobile.
     Rows become stacked cards; each cell gets a label from data-th. */
  .table-wrap{border:0;background:transparent;overflow:visible}
  .table-wrap table,
  .table-wrap thead,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap td,
  .table-wrap th{display:block;width:100%}
  .table-wrap thead,
  .table-wrap table > tr:first-child{position:absolute;left:-9999px;top:-9999px}
  .table-wrap tr,
  .table-wrap table > tr{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
    padding:10px 12px;margin-bottom:10px;box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.04))}
  .table-wrap td{border:0!important;background:transparent!important;padding:6px 0;
    display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:10px;align-items:start}
  .table-wrap td::before{content:attr(data-th);color:var(--muted);font-size:.72rem;
    letter-spacing:.06em;text-transform:uppercase;font-weight:700;line-height:1.7}
  .table-wrap td:empty,
  .table-wrap td:has(> form:only-child:empty){display:none}
  .table-wrap td[style*="max-width"]{max-width:none!important}
  .table-wrap td .inline-form{display:inline-block}

  /* Demo frames: tighten padding, wrap nav */
  .demo-frame{padding:14px}
  .dfnav{flex-direction:column;align-items:flex-start;gap:4px}
  .dfhero{padding:16px}
  .dfhero h2{font-size:1.15rem}
  .dfgrid,.dfgrid.dfgrid-3,.dfgrid.dfgrid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dfpre{font-size:.78rem}
  .dfrow{gap:8px}

  /* Service cards: full-width single column, action buttons stack neatly */
  .grid.grid-3{grid-template-columns:1fr;gap:12px}
  .card{padding:14px}
  .card h3{font-size:1.05rem;line-height:1.25}
  .card .price{font-size:1.4rem}
  .card .actions .btn{flex:1;min-width:0;justify-content:center;text-align:center}

  /* Reduce card hover lift on touch */
  :where(.card):hover{transform:none}
}

/* Auto-label table cells even when server didn't render data-th:
   grab the header text on load (see app.js). */

/* ── v29: responsive images + skeleton placeholders + off-screen paint skips ── */
img{max-width:100%;height:auto}
img[data-lazy]{background:linear-gradient(90deg,color-mix(in oklab,var(--surface-2) 92%,transparent) 25%,color-mix(in oklab,var(--surface-2) 78%,var(--muted) 8%) 37%,color-mix(in oklab,var(--surface-2) 92%,transparent) 63%);background-size:400% 100%;animation:imgshine 1.4s ease-in-out infinite;min-height:80px;border-radius:8px}
img[data-lazy].is-loaded{background:none;animation:none;min-height:0}
@keyframes imgshine{0%{background-position:100% 50%}100%{background-position:0 50%}}
html[data-motion="reduced"] img[data-lazy]{animation:none}
/* Reserve aspect ratio on demo tiles so lazy media / late fonts don't jank mobile */
.dfthumb{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;padding:0 12px}
.dflogo{aspect-ratio:5/2;display:flex;align-items:center;justify-content:center;padding:0 16px}
.dfphone{aspect-ratio:9/16;display:flex;align-items:center;justify-content:center}
.dfsoc,.dfcard-p{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:12px}
/* Skip painting far-off-screen sections on mobile scrolls */
@media (max-width:900px){
  .demo-frame,.svc-card,.table-wrap{content-visibility:auto;contain-intrinsic-size:auto 420px}
}
/* Denser demo grid on very small screens without collapsing to noise */
@media (max-width:520px){
  .dfgrid,.dfgrid.dfgrid-3,.dfgrid.dfgrid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dfthumb{font-size:.85rem}
  .dflogo{font-size:1rem;letter-spacing:.06em}
  .dfhero{padding:16px}
  .dfhero h2{font-size:1.15rem}
}

/* v31 — Trending ribbon & highlight ------------------------------------------------ */
.svc-card.is-trending{box-shadow:0 8px 26px -14px rgba(249,115,22,.55), var(--shadow-md,0 6px 20px -12px rgba(0,0,0,.25))}
.svc-trending-ribbon{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.03em;padding:5px 10px;border-radius:999px;box-shadow:0 4px 12px -4px rgba(239,68,68,.55);text-transform:uppercase;z-index:2}
[data-site-theme="neobrutal"] .svc-trending-ribbon{border:2px solid #000;box-shadow:3px 3px 0 #000;border-radius:6px}
[data-site-theme="terminal"] .svc-trending-ribbon{background:#000;color:#22c55e;border:1px solid #22c55e;box-shadow:none}
[data-site-theme="mono"] .svc-trending-ribbon{background:#000;color:#fff}
@media (max-width:520px){.svc-trending-ribbon{font-size:.65rem;padding:4px 8px}}

/* v33 — Trending section + chip themed for all 10 site themes ----------------------- */
.chip-trending{background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;border:none;font-weight:800;letter-spacing:.02em;box-shadow:0 6px 18px -8px rgba(239,68,68,.55)}
.trending-section{position:relative;padding:34px 0 10px}
.trending-section::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg,18px);background:radial-gradient(ellipse at top,color-mix(in oklab,#f97316 12%,transparent),transparent 70%);pointer-events:none;z-index:-1}

/* Aurora — warm sunset on cool glass */
[data-site-theme="aurora"] .chip-trending{background:linear-gradient(135deg,#fb923c,#ec4899 55%,#a855f7);box-shadow:0 8px 24px -10px rgba(168,85,247,.55)}
[data-site-theme="aurora"] .svc-trending-ribbon{background:linear-gradient(135deg,#f59e0b,#ec4899)}
[data-site-theme="aurora"] .trending-section::before{background:radial-gradient(ellipse at top,rgba(236,72,153,.18),transparent 70%)}

/* Sunset — natural fit */
[data-site-theme="sunset"] .chip-trending{background:linear-gradient(135deg,#fb923c,#be123c);color:#fff}
[data-site-theme="sunset"] .svc-trending-ribbon{background:linear-gradient(135deg,#fb923c,#be123c)}

/* Ocean — teal/aqua contrast */
[data-site-theme="ocean"] .chip-trending{background:linear-gradient(135deg,#f59e0b,#0ea5e9);color:#fff}
[data-site-theme="ocean"] .svc-trending-ribbon{background:linear-gradient(135deg,#fbbf24,#0369a1)}
[data-site-theme="ocean"] .trending-section::before{background:radial-gradient(ellipse at top,rgba(56,189,248,.18),transparent 70%)}

/* Forest — amber on green */
[data-site-theme="forest"] .chip-trending{background:linear-gradient(135deg,#facc15,#166534);color:#052e16}
[data-site-theme="forest"] .svc-trending-ribbon{background:linear-gradient(135deg,#facc15,#166534);color:#052e16;font-weight:900}
[data-site-theme="forest"] .trending-section::before{background:radial-gradient(ellipse at top,rgba(163,230,53,.16),transparent 70%)}

/* Nord — calm blue, no fire clash */
[data-site-theme="nord"] .chip-trending{background:linear-gradient(135deg,#88c0d0,#5e81ac);color:#2e3440;box-shadow:none;border:1px solid #4c566a}
[data-site-theme="nord"] .svc-trending-ribbon{background:#5e81ac;color:#eceff4;text-transform:none;font-weight:700}
[data-site-theme="nord"] .trending-section::before{background:radial-gradient(ellipse at top,rgba(136,192,208,.18),transparent 70%)}

/* Cyber — neon magenta/cyan */
[data-site-theme="cyber"] .chip-trending{background:linear-gradient(135deg,#f0abfc,#22d3ee);color:#020617;text-shadow:none;box-shadow:0 0 24px -4px rgba(34,211,238,.55)}
[data-site-theme="cyber"] .svc-trending-ribbon{background:linear-gradient(135deg,#f0abfc,#22d3ee);color:#020617;text-shadow:none;box-shadow:0 0 18px -4px rgba(240,171,252,.65)}
[data-site-theme="cyber"] .svc-card.is-trending{box-shadow:0 0 32px -10px rgba(34,211,238,.55),0 0 24px -12px rgba(240,171,252,.4)}
[data-site-theme="cyber"] .trending-section::before{background:radial-gradient(ellipse at top,rgba(240,171,252,.2),transparent 70%)}

/* Retro — magazine, no gradient */
[data-site-theme="retro"] .chip-trending{background:#7c2d12;color:#faf3e7;border:2px solid #7c2d12;border-radius:4px;letter-spacing:.08em;font-family:'Fraunces',serif;box-shadow:none}
[data-site-theme="retro"] .svc-trending-ribbon{background:#7c2d12;color:#faf3e7;border-radius:2px;letter-spacing:.08em;font-family:'Fraunces',serif;box-shadow:none;text-transform:uppercase}
[data-site-theme="retro"] .trending-section::before{background:radial-gradient(ellipse at top,rgba(217,119,6,.14),transparent 70%)}

/* Mono — pure black/white already handled; refine chip */
[data-site-theme="mono"] .chip-trending{background:#000;color:#fff;border:none;letter-spacing:.06em}
[data-site-theme="mono"] .trending-section::before{background:radial-gradient(ellipse at top,rgba(0,0,0,.06),transparent 70%)}
[data-theme="dark"][data-site-theme="mono"] .chip-trending{background:#fff;color:#000}

/* Neobrutal — thick borders */
[data-site-theme="neobrutal"] .chip-trending{background:#fef08a;color:#000;border:3px solid #000;border-radius:4px;box-shadow:4px 4px 0 #000;font-weight:900}
[data-site-theme="neobrutal"] .trending-section::before{background:none}

/* Terminal — CRT green */
[data-site-theme="terminal"] .chip-trending{background:#000;color:#22c55e;border:1px solid #22c55e;box-shadow:0 0 12px -2px rgba(34,197,94,.5);font-family:'JetBrains Mono',monospace;text-transform:uppercase}
[data-site-theme="terminal"] .svc-card.is-trending{box-shadow:0 0 22px -8px rgba(34,197,94,.6)}
[data-site-theme="terminal"] .trending-section::before{background:radial-gradient(ellipse at top,rgba(34,197,94,.12),transparent 70%)}

@media (max-width:640px){.trending-section{padding:20px 0 6px}.chip-trending{font-size:.75rem;padding:5px 10px}}

/* ===== Home trust sections (v34) ===== */
.brand-strip{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;padding:22px;border:1px dashed var(--border);border-radius:var(--r);background:var(--surface)}
.brand-logo{font-weight:800;letter-spacing:.5px;font-size:1.05rem;padding:10px 18px;border-radius:10px;background:var(--surface-2,var(--surface));color:var(--muted);border:1px solid var(--border);transition:.25s}
.brand-logo:hover{color:var(--fg);transform:translateY(-2px);border-color:var(--border-strong)}
.trust-badges{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;padding:6px}
.trust-badge{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--fg);font-weight:600;font-size:.9rem;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;position:relative;padding-right:28px}
.faq-item summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:1.4rem;font-weight:400;color:var(--muted);transition:.25s}
.faq-item[open] summary::after{content:"–";color:var(--fg)}
.faq-item p{margin:12px 0 0;color:var(--muted);line-height:1.65;font-size:.95rem}
@media(max-width:640px){
  .brand-logo{font-size:.9rem;padding:8px 12px}
  .trust-badge{font-size:.8rem;padding:8px 12px}
}


/* ── v36: filter chip active state + clear button ── */
.chip-svc{transition:all .18s ease;position:relative}
.chip-svc.is-active{background:var(--accent,var(--primary));color:var(--accent-contrast,#fff);border-color:transparent;box-shadow:0 4px 14px -4px rgba(0,0,0,.25);transform:translateY(-1px)}
.chip-svc.is-active::before{content:"";position:absolute;left:8px;right:8px;bottom:-6px;height:3px;border-radius:3px;background:currentColor;opacity:.55}
.chip-svc.chip-trending{border-color:#f97316;color:#f97316}
.chip-svc.chip-trending.is-active{background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;border-color:transparent}
.chip-clear{margin-left:auto;color:var(--muted);border-style:dashed}
.chip-clear:hover{color:var(--fg);border-color:currentColor}
.chip-clear[hidden]{display:none!important}
.svc-chips{align-items:center;flex-wrap:wrap;gap:8px}
[hidden],
.svc-grid .svc-card[hidden]{display:none!important}
[data-svc-empty][hidden]{display:none!important}
[data-svc-empty] .empty-ico{font-size:2.6rem}


/* ── v37: filter transitions + results counter ── */
@keyframes svcCardIn { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes svcCardOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-6px) scale(.98); } }
.svc-grid .svc-card{transition:box-shadow .2s ease}
.svc-card.svc-anim-in{animation:svcCardIn .24s ease-out both}
.svc-card.svc-anim-out{animation:svcCardOut .2s ease-in both}
@media (prefers-reduced-motion: reduce){
  .svc-card.svc-anim-in,.svc-card.svc-anim-out{animation:none!important}
}
.svc-results{margin:6px 0 14px;color:var(--muted);font-size:.95rem}
.svc-results strong{color:var(--fg);font-weight:700}
.svc-count-tag{display:inline-block;margin-left:4px;padding:2px 10px;border-radius:999px;background:var(--surface-2,var(--surface));border:1px solid var(--border);font-size:.85rem;color:var(--fg);vertical-align:baseline}


/* ── v38: toolbar, search, sort, pager, focus rings ── */
.svc-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}
.svc-search{position:relative;flex:1 1 260px;min-width:200px;display:flex;align-items:center}
.svc-search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.7;pointer-events:none;font-size:.95rem}
.svc-search input{width:100%;padding:10px 12px 10px 34px;border:1px solid var(--border);border-radius:var(--r-md,10px);background:var(--surface);color:var(--fg);font:inherit;outline:none;transition:border-color .18s,box-shadow .18s}
.svc-search input:focus{border-color:var(--accent,var(--primary));box-shadow:0 0 0 3px color-mix(in oklab,var(--accent,var(--primary)) 22%,transparent)}
.svc-sort{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.92rem}
.svc-sort select{padding:9px 12px;border:1px solid var(--border);border-radius:var(--r-md,10px);background:var(--surface);color:var(--fg);font:inherit;cursor:pointer}
.svc-sort select:focus{outline:none;border-color:var(--accent,var(--primary));box-shadow:0 0 0 3px color-mix(in oklab,var(--accent,var(--primary)) 22%,transparent)}
.chip-svc:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in oklab,var(--accent,var(--primary)) 35%,transparent);border-color:var(--accent,var(--primary))}
.chip-svc{scroll-margin:80px}
.svc-pager{display:flex;justify-content:center;margin:18px 0 6px}
.svc-pager[hidden]{display:none!important}
.svc-pager .btn{min-width:180px}
[data-svc-remaining]{opacity:.7;margin-left:6px;font-size:.9em}
@media (max-width:640px){
  .svc-toolbar{gap:8px}
  .svc-sort{width:100%;justify-content:space-between}
}


/* ── v39: search-term highlight ── */
.svc-card mark.svc-hl{background:color-mix(in oklab,var(--accent,var(--primary)) 35%,transparent);color:inherit;padding:0 3px;border-radius:4px;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* v46 — checklist fix + bulk-seo + chip-danger + serp tabs */
.check{align-items:flex-start;flex-wrap:nowrap}
.check .check-body{display:block;flex:1;min-width:0}
.check .check-body strong{display:block;line-height:1.35;color:var(--text)}
.check .check-body small{display:block;color:var(--text-2);font-size:.82rem;margin-top:4px;line-height:1.45}
.check-ico{align-self:flex-start;margin-top:2px}

.chip-danger{background:color-mix(in oklab,var(--danger,#e0344c) 15%,var(--surface-2));color:color-mix(in oklab,var(--danger,#e0344c) 70%,var(--text));border-color:color-mix(in oklab,var(--danger,#e0344c) 35%,var(--border))}

.bulk-seo textarea{width:100%;font-size:.82rem;line-height:1.4;padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface);resize:vertical;min-height:44px;font-family:inherit}
.bulk-seo td{vertical-align:top;padding:8px}
.bulk-seo th{position:sticky;top:0;background:var(--surface-2)}

.serp-tab.active{background:var(--admin-tint,#6c5ce7);color:#fff;border-color:transparent}

/* =====================================================================
   v47 — Deep polish, responsive arrangement, table/form overflow guards
   Additive-only: refines spacing, breakpoints, and layout consistency.
   ===================================================================== */

/* Fluid, consistent container widths across the app */
.container{max-width:min(1600px,100% - 24px);padding-inline:clamp(14px,3vw,32px)}
@media (max-width:640px){
  .container{padding-inline:14px;padding-top:20px;padding-bottom:44px}
  h1{font-size:clamp(2rem,8vw,2.6rem);line-height:1.08}
  h2{font-size:clamp(1.55rem,5.5vw,2.1rem)}
  h3{font-size:clamp(1.15rem,4vw,1.4rem)}
  .band{padding:44px 0}
}

/* Section rhythm */
.band + .band{padding-top:0}
section + section{margin-top:clamp(28px,5vw,56px)}

/* Long words / URLs wrap gracefully everywhere */
p, li, td, th, dd, .card, .tcard, .footer-col a, .nav-links a{overflow-wrap:anywhere;word-break:break-word}
code, pre{overflow-wrap:normal;word-break:normal}

/* Tables — universal responsive wrapper + zebra + sticky head */
.table-wrap, .table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  scrollbar-width:thin}
.table-wrap table, .table-scroll table{width:100%;min-width:640px;border-collapse:separate;border-spacing:0}
.container table{max-width:100%}
table.tbl, .container table:not(.no-style){width:100%;border-collapse:separate;border-spacing:0}
table.tbl th, table.tbl td,
.container table:not(.no-style) th, .container table:not(.no-style) td{
  padding:12px 14px;text-align:left;vertical-align:middle;font-size:.92rem;
  border-bottom:1px solid var(--border)}
table.tbl thead th, .container table:not(.no-style) thead th{
  background:var(--surface-2);position:sticky;top:0;z-index:1;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
table.tbl tbody tr:hover, .container table:not(.no-style) tbody tr:hover{background:color-mix(in oklab,var(--accent) 5%,transparent)}
@media (max-width:640px){
  table.tbl th, table.tbl td{padding:10px 10px;font-size:.86rem}
}

/* Forms — consistent, mobile-friendly */
input, select, textarea{max-width:100%}
textarea{min-height:110px;resize:vertical}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.form-actions .btn{flex:0 1 auto}
@media (max-width:520px){
  .form-actions{flex-direction:column;align-items:stretch}
  .form-actions .btn{width:100%;justify-content:center}
  .form-box{padding:20px;margin:16px auto;border-radius:var(--r)}
}

/* Buttons — never overflow tiny screens */
.btn{max-width:100%;white-space:normal;text-align:center}
.btn-group{display:inline-flex;flex-wrap:wrap;gap:8px}

/* Nav polish */
.nav{padding-block:8px}
.nav-links a{position:relative}
.nav-links a[aria-current="page"]{color:var(--text);background:var(--surface-2)}
@media (max-width:840px){
  .nav-links{max-height:calc(100vh - var(--nav-h) - 24px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .skin-picker{width:100%}
  .skin-picker summary{padding:12px 14px;border-radius:12px;list-style:none}
}

/* Grids — universal responsive card grids */
.grid, .cards, .card-grid, .svc-grid, .tools-grid, .blog-grid, .pkg-grid, .stats-grid{
  display:grid;gap:clamp(14px,2.2vw,24px)}
.svc-grid, .tools-grid, .blog-grid, .pkg-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.cards-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cards-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cards-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* Cards — even heights, better internal spacing */
.card, .tcard, .svc-card{display:flex;flex-direction:column;gap:10px;height:100%}
.card > .card-actions, .svc-card > .card-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}

/* Hero — safer on small phones */
@media (max-width:640px){
  .hero{padding:44px 18px 52px;border-radius:0}
  .hero p{font-size:1rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
}

/* Footer — tighter mobile */
@media (max-width:520px){
  .footer-main{padding:32px 18px 20px;gap:22px;text-align:left}
  .footer-brand p{max-width:100%}
  .footer-bottom{padding:14px 18px 22px;text-align:center}
}

/* Admin panel — sidebar/content grid safety */
.panel{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:20px}
@media (max-width:960px){.panel{grid-template-columns:1fr}}
.panel-side, .panel-main{min-width:0}
.panel-main{overflow-x:hidden}
.panel-main table{max-width:100%}

/* Toolbars — sort/filter rows never break layout */
.toolbar, .svc-toolbar, .admin-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.toolbar > *, .admin-toolbar > *{min-width:0}
.toolbar .grow{flex:1 1 200px}

/* Chips row scrolls on very narrow devices instead of stacking oddly */
.chips-scroll{display:flex;gap:8px;overflow-x:auto;padding:4px 2px;scrollbar-width:none}
.chips-scroll::-webkit-scrollbar{display:none}
.chips-scroll > *{flex:0 0 auto}

/* Images inside cards keep aspect */
.card img, .tcard img, .svc-card img, .blog-card img, .tool-card img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-sm);background:var(--surface-2)}

/* Utility helpers */
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.row-between{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.muted{color:var(--muted)}
.hide-sm{}
.only-sm{display:none}
@media (max-width:640px){
  .hide-sm{display:none!important}
  .only-sm{display:initial}
}

/* Focus visibility everywhere */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;box-shadow:none;border-radius:8px}

/* Prevent horizontal page scroll caused by wide children */
html, body{overflow-x:hidden}
main.container{max-width:100%;width:100%}

/* Better scrollbars on desktop */
@media (hover:hover){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--text) 22%,transparent);border-radius:8px}
  ::-webkit-scrollbar-thumb:hover{background:color-mix(in oklab,var(--text) 38%,transparent)}
  ::-webkit-scrollbar-track{background:transparent}
}

/* WhatsApp float — safer on notched phones */
.wa-float{bottom:max(18px, env(safe-area-inset-bottom));right:max(18px, env(safe-area-inset-right))}

/* Reduced motion respect (site-wide) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Print-friendly */
@media print{
  .nav, .footer, .wa-float, .btn, .toolbar{display:none!important}
  .container{padding:0;max-width:100%}
  a{color:#000;text-decoration:underline}
}

/* =====================================================================
   v48 — Admin/User/Guest deep polish
   Refines panel pages, dashboard stats, alerts, forms and small-screen
   arrangement. Additive-only.
   ===================================================================== */

/* Page title header inside panel context feels grouped with content */
.is-panel .page-title{margin-top:8px}
.is-panel .page-sub{margin-bottom:14px}

/* Panel sidebar polish */
.panel-side{padding:14px 12px}
.panel-side-link{padding:10px 12px;font-size:.92rem;border:1px solid transparent}
.panel-side-link:hover{border-color:var(--border)}
.panel-side-link.active{box-shadow:0 6px 18px -8px color-mix(in oklab,var(--accent) 45%,transparent)}
.panel-side-link .psi{width:22px;font-size:1rem;flex:0 0 22px}
.panel-side-nav{gap:3px}

/* Mobile panel toggle: make it look like a real button */
.panel-side-toggle{position:sticky;top:calc(var(--nav-h) + 6px);z-index:20;
  box-shadow:var(--shadow-sm);width:100%;justify-content:flex-start;text-align:left}
.panel-side-toggle em{color:var(--muted);font-weight:600}

/* Stats — larger, cleaner, with subtle top gradient */
.stat{position:relative;overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
.stat::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);opacity:.7;border-radius:3px 3px 0 0}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.stat .num{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:600;line-height:1.05}
.stat .lbl{text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:600}
[data-role="admin"] .stat::after{background:linear-gradient(120deg,var(--admin-tint),var(--accent))}
[data-role="user"] .stat::after{background:linear-gradient(120deg,var(--user-tint),var(--accent))}
@media (max-width:520px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{padding:14px 12px}
  .stat .num{font-size:1.5rem}
  .stat .lbl{font-size:.68rem}
}

/* Panel grid: on mid screens, stack instead of squishing */
@media (max-width:1100px){
  .panel-grid{grid-template-columns:1fr}
}

/* Cards inside panel content get equal breathing room */
.panel-main .card{padding:18px 18px 20px}
.panel-main .card-head{border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:14px}
.panel-main .card-head h3, .panel-main .card-head h2{font-size:1.1rem;font-weight:600;font-family:var(--font-ui);letter-spacing:-.01em}

/* Alerts with left accent */
.alert{border-left:4px solid var(--border-strong);border-radius:10px;display:flex;gap:10px;align-items:flex-start}
.alert::before{content:"i";flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:currentColor;color:var(--surface);display:inline-grid;place-items:center;font-size:.75rem;font-weight:700;font-style:italic;font-family:var(--font-display);opacity:.9;margin-top:1px}
.alert-success{border-left-color:var(--success)}
.alert-success::before{background:var(--success);content:"✓"}
.alert-error{border-left-color:var(--danger)}
.alert-error::before{background:var(--danger);content:"!"}
.alert-warn{border-left-color:var(--warn);background:color-mix(in oklab,var(--warn) 10%,var(--surface));color:color-mix(in oklab,var(--warn) 60%,var(--text))}
.alert-warn::before{background:var(--warn);content:"!"}

/* Empty state — friendlier */
.empty-state{background:color-mix(in oklab,var(--surface-2) 60%,transparent);border:1px dashed var(--border);border-radius:var(--r-lg);padding:36px 20px}
.empty-state .empty-ico{font-size:2.4rem;margin-bottom:8px;opacity:.85}
.empty-state p{margin-bottom:14px}

/* Badge dot indicator */
.badge{gap:5px}
.badge.pending::before,.badge.processing::before,.badge.completed::before,.badge.cancelled::before,.badge.failed::before,.badge.sent::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}

/* Auth pages (login, register, forgot) — polished form-box */
.form-box{border-radius:18px;box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.form-box h2{font-size:1.6rem;margin-bottom:16px;letter-spacing:-.02em}
.form-box .quick-login .btn{padding:10px 12px;font-size:.88rem}
@media (max-width:480px){
  .form-box .quick-login > div:last-child{flex-direction:column}
  .form-box .quick-login form{width:100%}
  .form-box p[style*="justify-content:space-between"]{flex-direction:column;gap:6px;align-items:flex-start}
}

/* Panel toolbar / filter row — consistent height */
.panel-main .toolbar, .panel-main .svc-toolbar{
  padding:12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin-bottom:14px}
.panel-main .toolbar input, .panel-main .toolbar select{
  padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);min-height:38px}

/* Sticky action bar on mobile forms (buttons stay reachable) */
@media (max-width:640px){
  .form-box form > button.btn:last-child,
  .form-box form .form-actions{
    position:sticky;bottom:8px;background:var(--surface);
    padding-top:8px;margin-top:12px;
    box-shadow:0 -8px 16px -12px rgba(0,0,0,.15)}
}

/* Nav on tablet: reduce link paddings so they fit */
@media (min-width:841px) and (max-width:1080px){
  .nav-links a{padding:6px 8px;font-size:.86rem}
  .nav-links .btn{padding:7px 12px;font-size:.8rem}
}

/* Admin/user role-tinted top accent on hero-less pages */
.is-panel main.container-panel > .page-title{position:relative;padding-left:14px}
.is-panel main.container-panel > .page-title::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:4px;background:var(--grad)}
[data-role="admin"].is-panel main.container-panel > .page-title::before{background:linear-gradient(180deg,var(--admin-tint),var(--accent))}
[data-role="user"].is-panel main.container-panel > .page-title::before{background:linear-gradient(180deg,var(--user-tint),var(--accent))}

/* Quick-actions cards keep icons aligned when text wraps */
.quick-actions .qa{align-items:flex-start}
.qa strong{display:block;font-size:.98rem}
.qa small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px;font-weight:500}

/* Long select/input row on admin settings pages */
.panel-main .form input, .panel-main .form select, .panel-main .form textarea{width:100%}
.panel-main .form-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

/* Order status pills — bigger tap targets */
.badge, .pill, .chip{padding:5px 11px;font-size:.76rem}

/* Guest pages: services / tools / blog headings alignment */
.svc-hero, .page-hero{text-align:center;padding:36px 12px 20px}
.svc-hero h1, .page-hero h1{margin-bottom:8px}
.svc-hero p, .page-hero p{max-width:640px;margin:0 auto;color:var(--muted)}

/* Cards inside a two-col dashboard grid: keep tables edge-aligned */
.panel-grid .card table{margin:0 -4px;width:calc(100% + 8px)}
.panel-grid .card table th, .panel-grid .card table td{padding:10px 8px}

/* WhatsApp float — don't overlap panel toggle on mobile */
@media (max-width:640px){
  .wa-float{width:52px;height:52px}
}

/* Ensure code blocks / long tokens in admin dashboards never overflow */
.panel-main pre, .panel-main code{white-space:pre-wrap;word-break:break-all}

/* ── v49: DESKTOP FIT — panels at 100% zoom (1280–1600) ── */
/* Slim sidebar on tighter desktops so main + tables breathe */
@media (min-width:961px) and (max-width:1400px){
  .panel-shell{grid-template-columns:220px minmax(0,1fr);gap:var(--sp-4)}
  .panel-side{padding:var(--sp-3)}
  .panel-side-link{padding:8px 10px;font-size:.86rem;gap:8px}
}
@media (min-width:1401px) and (max-width:1600px){
  .panel-shell{grid-template-columns:240px minmax(0,1fr)}
}

/* Container shouldn't hug edges too tight on admin pages */
.container-panel{padding-inline:clamp(10px,1.4vw,20px)}

/* Panel main: guarantee tables scroll horizontally instead of wrapping headers ugly */
.panel-main{overflow-x:hidden}
.panel-main .table-wrap,
.panel-main .table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid var(--border)}
.panel-main .table-wrap > table,
.panel-main .table-scroll > table,
.panel-main table.tbl{width:100%;min-width:920px;border-collapse:separate;border-spacing:0}

/* Compact admin table cells so wide tables (Orders) fit at 100% */
.panel-main table.tbl th,
.panel-main table.tbl td,
.panel-main .table-wrap th,
.panel-main .table-wrap td{padding:10px 10px;font-size:.88rem;vertical-align:middle;white-space:normal;word-break:normal;overflow-wrap:anywhere}
.panel-main table.tbl th{white-space:nowrap;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* Action buttons row in tables — keep on single line, small */
.panel-main .actions-row,
.panel-main td .actions,
.panel-main td.actions{display:inline-flex;flex-wrap:nowrap;gap:6px;align-items:center;white-space:nowrap}
.panel-main .actions-row .btn,
.panel-main td.actions .btn,
.panel-main td .actions .btn{padding:6px 10px;font-size:.78rem;min-height:auto}
.panel-main .actions-row .btn.icon,
.panel-main td .actions .btn.icon{padding:6px 8px}

/* Filter tab-chips row & search bar — allow wrap on narrow */
.panel-main .filter-tabs,
.panel-main .chip-row,
.panel-main .tabs-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.panel-main .searchbar,
.panel-main form.searchbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.panel-main .searchbar input[type="search"],
.panel-main .searchbar input[type="text"]{flex:1 1 240px;min-width:0}

/* Requirements-style long text columns capped */
.panel-main td.wrap,
.panel-main td .cell-long{max-width:280px;white-space:normal;overflow-wrap:anywhere;line-height:1.4}

/* Status pill cells shouldn't stretch column */
.panel-main td .badge,
.panel-main td .pill,
.panel-main td .chip{display:inline-flex;white-space:nowrap}

/* Page header row: title left, actions right, wraps on small */
.panel-main .page-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:var(--sp-4)}

/* Prevent page horizontal scroll from stray wide children */
html,body{overflow-x:hidden}

/* Filter chips (All / Pending / Processing) — compact */
.panel-main .filter-tabs .chip,
.panel-main .filter-tabs .pill{padding:6px 12px;font-size:.82rem}

/* ══════════════ v50: Zoom-consistent, cross-browser panel layout ══════════════ */

/* Prevent iOS/Safari from auto-scaling text on orientation change (zoom parity) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Firefox: thin scrollbars inside panel scroll areas (parity with Chrome/Safari) */
.panel-main .table-wrap,
.panel-main .table-scroll,
.panel-main pre{scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
/* WebKit/Blink scrollbars */
.panel-main .table-wrap::-webkit-scrollbar,
.panel-main .table-scroll::-webkit-scrollbar{height:10px;width:10px}
.panel-main .table-wrap::-webkit-scrollbar-thumb,
.panel-main .table-scroll::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--muted) 60%,transparent);border-radius:8px}

/* Safari: force GPU compositing on sticky sidebar to avoid subpixel jitter at 100% zoom */
.panel-side{-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}

/* Refined breakpoints so main content always has ≥ 720px between 900 and 1400px */
@media (min-width:961px) and (max-width:1100px){
  .panel-shell{grid-template-columns:200px minmax(0,1fr);gap:16px}
  .panel-side{padding:10px 10px}
  .panel-side-link{padding:7px 9px;font-size:.82rem;gap:7px}
  .panel-side-link .psi{width:20px;font-size:.95rem;flex:0 0 20px}
  .panel-main table.tbl th,.panel-main table.tbl td,
  .panel-main .table-wrap th,.panel-main .table-wrap td{padding:8px 8px;font-size:.84rem}
  .panel-main table.tbl,.panel-main .table-wrap > table,.panel-main .table-scroll > table{min-width:820px}
}
@media (min-width:1101px) and (max-width:1280px){
  .panel-shell{grid-template-columns:210px minmax(0,1fr);gap:18px}
}
@media (min-width:1281px) and (max-width:1440px){
  .panel-shell{grid-template-columns:224px minmax(0,1fr);gap:20px}
}
@media (min-width:1441px){
  .panel-shell{grid-template-columns:248px minmax(0,1fr)}
}

/* Container width parity: cap so 100 % zoom matches 80 % framing on wide screens */
.container-panel{max-width:min(1560px, 100% - 12px)}

/* Cross-browser: normalize form control sizing that Safari renders 1-2 px taller */
.panel-main input,.panel-main select,.panel-main textarea,.panel-main button{
  font-family:inherit;font-size:inherit;line-height:1.35;box-sizing:border-box}
.panel-main select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}

/* Firefox number-input spinner alignment quirk */
@-moz-document url-prefix(){
  .panel-main input[type="number"]{padding-right:6px}
}

/* Safari-only: prevent overflow-x flicker on sticky panel-side at zoom > 100 % */
@supports (-webkit-touch-callout:none){
  .panel-side{contain:layout paint}
}

/* QA-mode overlay — enabled with ?qa=zoom, injected via app.js */
body.qa-zoom-active .panel-main,
body.qa-zoom-active .container{outline:1px dashed color-mix(in oklab,var(--accent) 55%,transparent);outline-offset:-2px}
body.qa-zoom-active .qa-zoom-ruler{position:fixed;left:0;right:0;top:0;height:22px;background:rgba(0,0,0,.55);color:#fff;font:600 11px/22px "JetBrains Mono",monospace;text-align:center;z-index:9999;letter-spacing:.1em}
body.qa-zoom-active .qa-zoom-ruler b{color:#ffd166;margin:0 6px}

/* Panel toggle should never overlap sticky admin table headers */
.panel-side-toggle{position:relative;z-index:21}

/* === NEW: Panel sidebar enhancements === */
.panel-admin-avatar{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.panel-avatar-ico{font-size:1.8rem;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:rgba(124,58,237,.15);border-radius:10px;flex-shrink:0}
.panel-admin-name{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-admin-role{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:1px}
.panel-nav-group{margin-bottom:4px}
.panel-nav-group-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:14px 18px 4px;opacity:.7}
.panel-badge{background:var(--danger,#ef4444);color:#fff;font-size:.65rem;font-weight:700;padding:1px 6px;border-radius:20px;margin-left:auto;min-width:18px;text-align:center}
.panel-side-footer{margin-top:auto;padding:12px 14px;border-top:1px solid var(--border,rgba(255,255,255,.08))}
.panel-side-logout{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;color:var(--danger,#ef4444);text-decoration:none;font-size:.88rem;font-weight:500;transition:background .2s}
.panel-side-logout:hover{background:rgba(239,68,68,.08)}

/* ============================================================
   PREMIUM ADMIN PANEL — DegitalService v2 Enhanced Styles
   ============================================================ */

/* === Admin Dashboard Stats === */
.adash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.adash-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 16px 18px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.adash-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.adash-stat-icon {
  font-size: 1.8rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}
.adash-stat-num {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.adash-stat-lbl {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.adash-stat-sub {
  font-size: .78rem;
  color: var(--muted);
  margin-top: 4px;
  opacity: .8;
}

/* === Quick Actions Bar === */
.adash-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.adash-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  font-size: .88rem;
  font-weight: 500;
  transition: all .2s;
  position: relative;
  white-space: nowrap;
}
.adash-action:hover {
  border-color: var(--accent, #7c3aed);
  background: var(--accent-ghost, rgba(124,58,237,.08));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.adash-action-ico { font-size: 1.1rem; }
.adash-action-badge {
  background: #ef4444;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  min-width: 18px;
  text-align: center;
  margin-left: 4px;
}

/* === Dashboard Grid === */
.adash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.adash-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .adash-grid, .adash-grid--2 { grid-template-columns: 1fr; }
}

/* === Panel Sidebar Enhancements === */
.panel-admin-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.panel-avatar-ico {
  font-size: 1.6rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124,58,237,.2);
  border-radius: 10px;
  flex-shrink: 0;
}
.panel-admin-name {
  font-weight: 700;
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.panel-admin-role {
  font-size: .68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 2px;
}
.panel-nav-group { margin-bottom: 2px; }
.panel-nav-group-label {
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 18px 4px;
  opacity: .65;
  user-select: none;
}
.panel-badge {
  background: var(--danger, #ef4444);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  margin-left: auto;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.panel-side-footer {
  margin-top: auto;
  padding: 10px 12px;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
  flex-shrink: 0;
}
.panel-side-logout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--danger, #ef4444);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 500;
  transition: background .2s;
}
.panel-side-logout:hover { background: rgba(239,68,68,.08); }

/* Make panel-side flex column so footer sticks to bottom */
.panel-side {
  display: flex !important;
  flex-direction: column !important;
}
.panel-side-nav { flex: 1; overflow-y: auto; }

/* === Enhanced Table Styles === */
.table-wrap table thead tr th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card-bg, #fff);
  backdrop-filter: blur(8px);
}
.table-wrap table tbody tr {
  transition: background .15s;
}
.table-wrap table tbody tr:hover {
  background: var(--hover-bg, rgba(124,58,237,.04));
}

/* === Card Head Enhancements === */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}
.card-head h3 { margin: 0; }

/* === Filter Chips Enhanced === */
.chip-f {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .83rem;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  background: var(--card-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  transition: all .15s;
}
.chip-f:hover {
  border-color: var(--accent, #7c3aed);
  background: var(--accent-ghost, rgba(124,58,237,.08));
}
.chip-f.active {
  background: var(--accent, #7c3aed);
  border-color: var(--accent, #7c3aed);
  color: #fff;
}
.chip-f span {
  background: rgba(255,255,255,.2);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: .75rem;
  font-weight: 700;
}
.chip-f.active span { background: rgba(255,255,255,.25); }

/* === Alert enhancements === */
.alert {
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: .9rem;
  border-left: 4px solid;
}
.alert-success {
  background: rgba(16,185,129,.1);
  border-color: #10b981;
  color: var(--text);
}
.alert-error {
  background: rgba(239,68,68,.1);
  border-color: #ef4444;
  color: var(--text);
}

/* === Badge improvements === */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* === Toolbar flex wrap fix === */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* === Empty state enhancements === */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}
.empty-ico { font-size: 3rem; margin-bottom: 12px; opacity: .6; }

/* === Responsive admin table === */
@media (max-width: 700px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 600px; }
}

/* ============================================================
   END Premium Admin Panel Styles
   ============================================================ */

/* ============================================================
   AUTH SPLIT LAYOUT  — login.php & register.php
   Premium 2-column design: gradient left panel + form card right
   ============================================================ */

/* ── Container: full-viewport split ─────────────────────────── */
.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--nav-h, 64px));
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ── LEFT PANEL: branding + benefits ────────────────────────── */
.auth-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  padding: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 72px);
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, color-mix(in oklab, var(--accent) 28%, transparent), transparent 65%),
    radial-gradient(ellipse 70% 55% at 85% 90%, color-mix(in oklab, var(--admin-tint) 26%, transparent), transparent 60%),
    var(--bg-2, #F4F3EE);
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--border);
}

/* Decorative floating blob */
.auth-left::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--grad);
  opacity: .07;
  bottom: -80px;
  right: -80px;
  pointer-events: none;
}

.auth-left .brand {
  font-size: 1.5rem;
}

.auth-left h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: 6px;
}

.auth-left .page-sub {
  color: var(--muted);
  font-size: .97rem;
  margin-bottom: 0;
}

/* ── Benefit list ────────────────────────────────────────────── */
.auth-benefit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-benefit-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .93rem;
  font-weight: 500;
  color: var(--text-2);
}

.auth-benefit-list .ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

/* ── Social proof strip ─────────────────────────────────────── */
.auth-social-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.auth-avatars {
  display: flex;
  flex-direction: row;
}

.auth-avatars .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid var(--surface);
  margin-left: -10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
}

.auth-avatars .avatar:first-child {
  margin-left: 0;
}

.auth-social-text {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text-2);
}

.auth-social-text strong {
  color: var(--text);
}

/* ── RIGHT PANEL: scrollable form area ──────────────────────── */
.auth-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 56px);
  background: var(--bg);
  overflow-y: auto;
}

/* ── The glass card holding the form ───────────────────────── */
.auth-form-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-md);
}

.auth-form-card h2 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  margin-bottom: 4px;
}

.auth-form-card .page-sub {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 20px;
}

.auth-form-card label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

/* ── "or" divider ───────────────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: .82rem;
  margin: 18px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Dark theme overrides ───────────────────────────────────── */
[data-theme="dark"] .auth-left,
.dark .auth-left {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 65%),
    radial-gradient(ellipse 70% 55% at 85% 90%, color-mix(in oklab, var(--admin-tint) 18%, transparent), transparent 60%),
    var(--bg-2);
}

[data-theme="dark"] .auth-social-proof,
.dark .auth-social-proof {
  background: var(--surface-2);
}

[data-theme="dark"] .auth-benefit-list .ico,
.dark .auth-benefit-list .ico {
  background: var(--surface-2);
}

/* ── Responsive: stack vertically on tablet / mobile ────────── */
@media (max-width: 860px) {
  .auth-split {
    grid-template-columns: 1fr;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    min-height: auto;
  }

  .auth-left {
    padding: 32px 24px;
    gap: 20px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .auth-left::before {
    display: none;
  }

  .auth-benefit-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
  }

  .auth-right {
    padding: 28px 16px 40px;
  }

  .auth-form-card {
    max-width: 100%;
    border-radius: var(--r-lg);
  }
}

@media (max-width: 480px) {
  .auth-left {
    padding: 24px 16px;
  }

  .auth-benefit-list {
    grid-template-columns: 1fr;
  }

  .auth-form-card {
    padding: 24px 18px;
    border-radius: var(--r);
  }
}

/* ============================================================
   END Auth Split Layout
   ============================================================ */

/* ============================================
   SITE ANNOUNCEMENT BAR
   ============================================ */
.site-announcement{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;font-size:.88rem;font-weight:500;gap:12px;position:relative;z-index:50}
.site-announcement a{color:inherit;font-weight:700;text-decoration:underline}
.ann-info{background:#eff6ff;color:#1e40af;border-bottom:1px solid #bfdbfe}
.ann-warning{background:#fffbeb;color:#92400e;border-bottom:1px solid #fcd34d}
.ann-promo{background:linear-gradient(90deg,#7c3aed,#3b82f6);color:#fff}
.ann-maintenance{background:#fee2e2;color:#991b1b;border-bottom:1px solid #fca5a5}
.ann-success{background:#ecfdf5;color:#065f46;border-bottom:1px solid #a7f3d0}
.ann-close{background:none;border:none;cursor:pointer;opacity:.6;font-size:1.3rem;padding:0 4px;line-height:1;color:inherit;flex-shrink:0}
.ann-close:hover{opacity:1}
[data-theme="dark"] .ann-info{background:rgba(59,130,246,.15);color:#93c5fd;border-color:rgba(59,130,246,.3)}
[data-theme="dark"] .ann-warning{background:rgba(245,158,11,.15);color:#fcd34d;border-color:rgba(245,158,11,.3)}
[data-theme="dark"] .ann-maintenance{background:rgba(239,68,68,.15);color:#fca5a5;border-color:rgba(239,68,68,.3)}
[data-theme="dark"] .ann-success{background:rgba(16,185,129,.15);color:#6ee7b7;border-color:rgba(16,185,129,.3)}

/* ============================================
   STAR RATING INPUT (Order Review)
   ============================================ */
.star-rating-input{display:flex;flex-direction:row-reverse;justify-content:flex-start;gap:6px;margin:8px 0}
.star-rating-input input[type=radio]{display:none}
.star-rating-input label{cursor:pointer;font-size:2rem;color:var(--border,#d1d5db);transition:color .15s;line-height:1}
.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label{color:#f59e0b}
.review-star-display{color:#f59e0b;letter-spacing:2px;font-size:1.2rem}
.review-star-display .empty{color:var(--border,#d1d5db)}

/* ============================================
   ORDER STATUS TIMELINE
   ============================================ */
.order-timeline{display:flex;margin:20px 0 28px;position:relative}
.order-timeline::before{content:'';position:absolute;top:18px;left:calc(100%/6);right:calc(100%/6);height:3px;background:var(--border);z-index:0}
.order-tl-step{flex:1;text-align:center;position:relative;z-index:1}
.order-tl-dot{width:36px;height:36px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:1rem;background:var(--card-bg,#fff);border:3px solid var(--border);transition:all .3s}
.order-tl-dot.tl-done{background:#10b981;border-color:#10b981;color:#fff;box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.order-tl-dot.tl-active{background:var(--accent,#7c3aed);border-color:var(--accent,#7c3aed);color:#fff;box-shadow:0 0 0 4px rgba(124,58,237,.2)}
.order-tl-dot.tl-cancelled{background:#ef4444;border-color:#ef4444;color:#fff}
.order-tl-label{font-size:.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.order-tl-sub{font-size:.68rem;color:var(--muted);margin-top:2px}

/* ============================================
   MILESTONE CARD
   ============================================ */
.milestone-card{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.milestone-card:last-child{border-bottom:0}
.milestone-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;margin-top:4px}
.milestone-dot.ms-pending{background:#94a3b8}
.milestone-dot.ms-in_progress{background:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.milestone-dot.ms-delivered{background:#f59e0b}
.milestone-dot.ms-approved{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.milestone-body{flex:1}
.milestone-title{font-weight:600;font-size:.95rem;margin:0 0 4px}
.milestone-desc{font-size:.85rem;color:var(--muted);margin:0 0 8px;line-height:1.5}

/* ============================================
   STICKY TABLE HEADERS
   ============================================ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{border-collapse:collapse;width:100%;min-width:600px}
.table-wrap thead th{position:sticky;top:0;background:var(--card-bg,#fff);z-index:2;box-shadow:0 1px 0 var(--border);padding:10px 12px;text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.table-wrap tbody tr{transition:background .15s}
.table-wrap tbody tr:hover td{background:var(--hover-bg,rgba(0,0,0,.03))}
.table-wrap tbody td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:.9rem}

/* ============================================
   CUSTOMER CRM TABLE EXTRAS
   ============================================ */
.crm-medal{font-size:1.2rem;margin-right:4px}
.crm-at-risk{color:#ef4444;font-size:.8rem;font-weight:600}
.crm-active{color:#10b981;font-size:.8rem;font-weight:600}

/* ============================================
   SETTINGS PAGE TAB UI
   ============================================ */
.settings-tabs {
  display: flex; gap: 10px; margin-bottom: 24px; border-bottom: 2px solid var(--surface-2); padding-bottom: 10px; overflow-x: auto;
}
.settings-tab {
  padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 0.95rem; color: var(--text-2); cursor: pointer; border: 1px solid transparent; transition: all 0.2s; background: transparent; white-space: nowrap;
}
.settings-tab:hover { background: var(--surface-2); color: var(--text); }
.settings-tab.active { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); }
.settings-panel { display: none; animation: fadeIn 0.3s ease-in-out; }
.settings-panel.active { display: block; }
.settings-footer { position: sticky; bottom: 0; background: var(--surface); padding: 16px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 50; margin: 24px -24px -24px -24px; border-radius: 0 0 var(--r-lg) var(--r-lg); }