/* ============================================================================
   TDB — Design V2 "Obsidian & Champagne"
   Loaded AFTER styles.css and overrides it. The classic UI stays intact in
   styles.css; removing this link (admin toggle) restores it exactly.
   ============================================================================ */

:root{
  --bg:#070708; --panel:#101013; --panel2:#17171b; --line:#26262c;
  --text:#f5f4f1; --muted:#a2a1a8; --gold:#e2b84e; --gold-dim:#9a7a1e;
  --gold-soft:rgba(226,184,78,.14); --silver:#cfd2d8; --green:#39d98a;
  --radius:16px;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.28);
  --shadow-2:0 2px 4px rgba(0,0,0,.45),0 16px 40px rgba(0,0,0,.38);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- base ---------- */
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(226,184,78,.05), transparent 60%),
    radial-gradient(700px 420px at -10% 20%, rgba(226,184,78,.03), transparent 55%),
    var(--bg);
  font-family:Inter,system-ui,sans-serif;font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:rgba(226,184,78,.28);color:#fff}
h1,h2,h3,h4{font-family:Sora,Inter,sans-serif;font-weight:700;letter-spacing:-.015em;margin:.2em 0}
h1{font-size:clamp(30px,4.2vw,40px);line-height:1.12}
h2{font-size:clamp(21px,2.6vw,26px)}
h3{font-size:17px}
.lead{color:#cfcdc7;font-size:17px;max-width:640px;line-height:1.65}
.eyebrow{color:var(--gold);letter-spacing:.22em;font-size:11.5px;font-weight:600}
.eyebrow::before{content:"";display:inline-block;width:18px;height:1px;background:var(--gold);vertical-align:middle;margin-right:9px;opacity:.7}
.small{font-size:13px}
.link{color:var(--gold);font-weight:600;transition:color .15s var(--ease)}
.link:hover{color:#f0d387}

/* subtle scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#2c2c33;border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#3a3a42}
::-webkit-scrollbar-track{background:transparent}

/* ---------- header ---------- */
.site-header{
  background:rgba(7,7,8,.72);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{height:70px}
.brand-logo{height:46px}
.nav-links{gap:24px;font-size:14px}
.nav-links a{position:relative;padding:4px 0;color:var(--silver);transition:color .15s var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a.gold{color:var(--gold)}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);transition:right .22s var(--ease);
}
.nav-links a:not(.btn):hover::after{right:0}
.theme-btn{border-radius:12px;transition:all .15s var(--ease)}
.theme-btn:hover{transform:translateY(-1px)}

/* ---------- buttons ---------- */
.btn{
  border-radius:12px;padding:11px 19px;font-weight:600;letter-spacing:.01em;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease),filter .16s var(--ease);
}
.btn:hover{transform:translateY(-1px);border-color:var(--gold-dim)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gold-soft),0 0 0 1px var(--gold)}
.btn-gold{
  background:linear-gradient(160deg,#f3d47c 0%,var(--gold) 42%,#c49a2e 100%);
  color:#241a00;box-shadow:0 2px 10px rgba(226,184,78,.24),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover{filter:brightness(1.05);box-shadow:0 4px 18px rgba(226,184,78,.34),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-ghost{background:rgba(255,255,255,.02)}
.btn-lg{padding:14px 26px;font-size:15.5px;border-radius:14px}
.btn-sm{padding:7px 13px;border-radius:10px}

/* ---------- hero ---------- */
.hero{padding:64px 0 36px;position:relative}
.hero h1{font-size:clamp(38px,5.6vw,54px);letter-spacing:-.025em;max-width:780px}
.hero h1 .gold{
  background:linear-gradient(120deg,#f3d47c,var(--gold) 55%,#caa138);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero .lead{margin-top:10px}
.hero .btn{margin-top:26px}

/* ---------- surfaces ---------- */
.card,.panel-card,.brand-card,.form-card,.offer-card,.pick-card,.dev-card,.cat-bar{
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0) 40%),var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-1);
}
.card,.pick-card,.dev-card{transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.card:hover,.pick-card:hover,.dev-card:hover{
  transform:translateY(-3px);border-color:rgba(226,184,78,.45);box-shadow:var(--shadow-2);
}
.card{padding:20px}
.card .price{font-family:Sora,sans-serif;font-size:26px;letter-spacing:-.02em}
.card-top .muted{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}
.pick-card{padding:26px 18px}
.pick-ic{border-radius:16px;background:linear-gradient(180deg,var(--panel2),#121215);transition:transform .18s var(--ease)}
.pick-card:hover .pick-ic{transform:scale(1.06)}
.dev-photo{border-radius:12px;background:linear-gradient(180deg,var(--panel2),#121215)}
.dev-offer .sel-price{font-family:Sora,sans-serif;font-size:22px;letter-spacing:-.02em}
.offer-price{font-family:Sora,sans-serif;letter-spacing:-.03em}

/* chips */
.chip{border-radius:999px;padding:8px 16px;transition:all .16s var(--ease);background:rgba(255,255,255,.025)}
a.chip-link:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.3)}

/* ---------- forms ---------- */
input,select,textarea{
  background:#0b0b0d;border:1px solid var(--line);border-radius:11px;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
input::placeholder,textarea::placeholder{color:#63636b}
.form-card{padding:26px;border-radius:18px}
.form-card label{font-size:11.5px;letter-spacing:.09em}

/* notices + messages */
.notice{background:var(--gold-soft);border:1px solid rgba(226,184,78,.35);border-radius:13px}
.note{border-left-width:3px;border-radius:12px;background:rgba(255,255,255,.02)}
.flash{border-radius:12px;background:rgba(57,217,138,.09);border-color:rgba(57,217,138,.32)}
.error{border-radius:12px}
.empty{border-radius:var(--radius);border-style:dashed;padding:56px 28px}

/* ---------- tables ---------- */
table.data th,table.price-table th{font-size:10.5px;letter-spacing:.09em;padding:11px 10px}
table.data td{padding:13px 10px}
table.data tbody tr{transition:background .12s var(--ease)}
table.data tbody tr:hover{background:rgba(255,255,255,.018)}
.price-cell,td.price-cell{font-family:Sora,sans-serif;letter-spacing:-.01em}
.status{border-radius:999px;padding:4px 12px;font-weight:600}

/* ---------- admin ---------- */
.rail-item{border-radius:11px;transition:all .14s var(--ease)}
.rail-item:hover{transform:translateX(2px)}
.rail-item.active{background:linear-gradient(90deg,var(--gold-soft),transparent 130%);border-color:rgba(226,184,78,.4)}
.brand-card{padding:20px}
.price-table input{border-radius:9px}
.vtag{border-radius:999px;font-size:9.5px;letter-spacing:.06em;padding:3px 9px}
.vtag.unlocked{box-shadow:0 0 0 1px rgba(57,217,138,.12)}
.xbtn{border-radius:8px;transition:all .13s var(--ease)}
.cat-bar{border-radius:14px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:30px 0;margin-top:30px}
.pill{border-radius:999px;background:rgba(255,255,255,.03)}

/* ---------- quote flow polish ---------- */
.crumbs{font-size:13px;letter-spacing:.01em}
.imei-cta{transition:transform .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease)}
.imei-cta:hover{transform:translateY(-2px);border-color:rgba(226,184,78,.45);box-shadow:var(--shadow-2)}
.quote-search input{border-radius:12px !important}
.deliv-opt{border-radius:13px;transition:all .15s var(--ease);background:rgba(255,255,255,.015)}
.deliv-opt:hover{transform:translateY(-1px)}
.box-panel{border-radius:13px;background:rgba(255,255,255,.015)}

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* ============================================================================
   LIGHT THEME — warm porcelain + espresso + deepened gold for contrast
   ============================================================================ */
html[data-theme="light"]{
  --bg:#f7f5f1; --panel:#ffffff; --panel2:#efece6; --line:#e3dfd6;
  --text:#221f1a; --muted:#6d6a63; --silver:#3d3a33;
  --gold:#a37b16; --gold-dim:#8a6812; --gold-soft:rgba(163,123,22,.12);
  --shadow-1:0 1px 2px rgba(35,30,20,.05),0 8px 24px rgba(35,30,20,.06);
  --shadow-2:0 2px 6px rgba(35,30,20,.07),0 18px 44px rgba(35,30,20,.1);
}
html[data-theme="light"] body{
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(163,123,22,.05), transparent 60%),
    var(--bg);
}
html[data-theme="light"] .lead{color:#4a463e}
html[data-theme="light"] .site-header{background:rgba(247,245,241,.8);border-bottom-color:rgba(35,30,20,.08)}
html[data-theme="light"] .nav-links a{color:#55524a}
html[data-theme="light"] .nav-links a:hover{color:var(--text)}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{background:#fbfaf7}
html[data-theme="light"] .hero h1 .gold{
  background:linear-gradient(120deg,#b8901f,#a37b16 55%,#7d5e0e);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
html[data-theme="light"] .btn-gold{
  background:linear-gradient(160deg,#e7c96a 0%,#c99e2a 45%,#a37b16 100%);
  color:#231900;box-shadow:0 2px 10px rgba(163,123,22,.25),inset 0 1px 0 rgba(255,255,255,.4);
}
html[data-theme="light"] ::selection{background:rgba(163,123,22,.22)}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#d5d0c5;border-color:var(--bg)}
html[data-theme="light"] .pick-ic,html[data-theme="light"] .dev-photo{background:linear-gradient(180deg,#f2efe9,#eae6dd)}
html[data-theme="light"] .card:hover,html[data-theme="light"] .pick-card:hover,html[data-theme="light"] .dev-card:hover{border-color:rgba(163,123,22,.45)}
html[data-theme="light"] table.data tbody tr:hover{background:rgba(35,30,20,.025)}
html[data-theme="light"] .site-footer{border-top-color:rgba(35,30,20,.08)}

/* ---------- Phase 2 components (V2 polish) ---------- */
.trust-row{margin-top:26px;gap:22px}
.how-card{background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0) 40%),var(--panel);box-shadow:var(--shadow-1);transition:transform .18s var(--ease),border-color .18s var(--ease)}
.how-card:hover{transform:translateY(-3px);border-color:rgba(226,184,78,.45)}
.how-ic{border-radius:14px;background:linear-gradient(180deg,var(--panel2),#121215)}
html[data-theme="light"] .how-ic{background:linear-gradient(180deg,#f2efe9,#eae6dd)}
.qsteps li{background:rgba(255,255,255,.02);transition:all .15s var(--ease)}
.qsteps li.now{box-shadow:0 0 0 3px var(--gold-soft)}
.site-footer{padding:38px 0 26px}

/* ---------- Phase 3: unified admin nav (V2 polish) ---------- */
.admin-nav a{border-radius:11px;background:rgba(255,255,255,.02);transition:all .15s var(--ease)}
.admin-nav a:hover{transform:translateY(-1px)}
.admin-nav a.on{background:linear-gradient(90deg,var(--gold-soft),transparent 140%);box-shadow:0 0 0 1px rgba(226,184,78,.25)}