/* ═══════════════════════════════════════════════════════════════════════
   SHEPHERD DIRECT — Shared Stylesheet
   Loaded by every page. Design system + components + responsive + dark.
   Loyalty. Efficiency. Dedication.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&display=swap');

:root{
  --ink:        #0F1E38;
  --ink-2:      #1B2F52;
  --ink-soft:   #4B5C80;
  --paper:      #FFFFFF;
  --tint:       #F2F5FA;
  --tint-2:     #E7ECF6;
  --kraft:      #E6D5AB;
  --kraft-dark: #C9B279;
  --red:        #C8372D;
  --red-dark:   #9C2A22;
  --red-light:  #E05043;
  --blue:       #2C5BA8;
  --blue-light: #4A7FD4;
  --green:      #1E7B34;
  --green-light:#27AE60;
  --amber:      #D98A0B;
  --line:       #D8DEEA;
  --line-soft:  #EAEFF7;

  --font-display:'Oswald', 'Arial Narrow', sans-serif;
  --font-sans:   'Barlow', system-ui, -apple-system, Arial, sans-serif;
  --font-label:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-mono:   'Barlow Condensed', 'Arial Narrow', sans-serif;

  --shadow-sm: 0 2px 8px rgba(15,30,56,0.07);
  --shadow-md: 0 6px 24px rgba(15,30,56,0.10);
  --shadow-lg: 0 18px 50px rgba(15,30,56,0.16);
  --radius:    10px;
  --radius-lg: 16px;
  --t:         0.2s ease;
  --maxw:      1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; }

.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.muted{ color:var(--ink-soft); }
.small{ font-size:.84rem; }
.center{ text-align:center; }
.nowrap{ white-space:nowrap; }
.hidden{ display:none !important; }

/* ── TYPE ─────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.15; }
h1,.h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.3rem,5.6vw,4.1rem); letter-spacing:-.005em; line-height:1.1;
  text-transform:uppercase;
}
h2,.h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.7rem,3.8vw,2.7rem); letter-spacing:-.004em; line-height:1.05;
  text-transform:uppercase;
}
h3{ font-family:var(--font-display); font-weight:600; font-size:1.18rem; letter-spacing:.005em; }
h4{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; letter-spacing:.005em; }
p{ margin:0 0 1em; }
.hl{
  /* Band sits inside the cap height so it cannot touch the line above.
     box-decoration-break keeps it correct if the phrase ever wraps. */
  background:linear-gradient(transparent 26%, var(--kraft) 26%, var(--kraft) 95%, transparent 95%);
  padding:0 8px; margin:0 -3px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.eyebrow{
  font-family:var(--font-label); font-size:.8rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red);
  margin:0 0 .7em; display:block;
}
.lede{ font-size:1.06rem; color:var(--ink-soft); max-width:52ch; }
.sub{ color:var(--ink-soft); max-width:60ch; }

/* ── LAYOUT ───────────────────────────────────────────────────────────── */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.wrap-narrow{ max-width:820px; margin:0 auto; padding:0 20px; }
section{ padding:76px 0; }
.section-alt{ background:var(--tint); }
.section-ink{ background:var(--ink); color:#fff; }
.section-ink h2,.section-ink h3{ color:#fff; }
.section-ink p{ color:#B9C6E0; }
.section-title{ text-align:center; margin-bottom:48px; }
.section-title p{ color:var(--ink-soft); max-width:60ch; margin:12px auto 0; }
.grid{ display:grid; gap:22px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.gauto{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

/* ── TOPBAR (unused, header banner removed) ───────────────────────────── */
.topbar{
  background:var(--ink); color:#fff; text-align:center;
  padding:9px 20px; font-size:12.5px; font-weight:500; letter-spacing:.02em;
}
.topbar strong{ color:var(--kraft); }


/* ── CALL BAR (always-visible contact) ─────────────────────────────────── */
.callbar{
  background:var(--ink); color:#fff; display:flex; justify-content:center;
  align-items:center; gap:22px; flex-wrap:wrap; padding:9px 20px;
  font-family:var(--font-label); font-size:15px; letter-spacing:.03em;
}
.callbar span{ color:#A9B6D4; }
.callbar .callbar-sep{ font-size:14px; }
.callbar a{
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.05em;
  border-bottom:2px solid var(--red); padding-bottom:1px;
}
.callbar a:hover{ color:var(--kraft); border-color:var(--kraft); }

/* ── CONTACT in the nav: outlined so it reads as the primary action ───── */
nav.site-nav a.nav-contact{
  border:2px solid var(--ink); color:var(--ink) !important; font-weight:700;
  padding:7px 16px; border-radius:6px;
}
nav.site-nav a.nav-contact:hover{ background:var(--ink); color:#fff !important; }

@media (max-width:768px){
  .callbar{ font-size:13.5px; gap:10px; padding:7px 12px; }
  .callbar .callbar-sep{ display:none; }
}

/* ── HEADER / NAV ─────────────────────────────────────────────────────── */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.95); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo-link{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.logo-mascot{ flex-shrink:0; }
.logo-mark{ flex-shrink:0; display:grid; place-items:center; }
.logo-word{
  font-family:var(--font-display); font-weight:700; font-size:1.16rem;
  letter-spacing:.005em; line-height:.92; color:var(--ink); text-transform:uppercase;
}
.logo-word em{ font-style:normal; color:var(--red); }
.logo-word .tagline{
  display:block; font-family:var(--font-label); font-weight:600; font-size:.56rem;
  letter-spacing:.24em; color:var(--ink-soft); margin-top:2px;
}
nav.site-nav{ display:flex; align-items:center; gap:2px; }
nav.site-nav a{
  text-decoration:none; color:var(--ink-soft); font-size:15px; font-weight:600;
  font-family:var(--font-label); letter-spacing:.035em; text-transform:uppercase;
  padding:8px 11px; border-radius:6px; transition:background var(--t),color var(--t); white-space:nowrap;
}
nav.site-nav a:hover, nav.site-nav a.active{ color:var(--ink); background:var(--tint); }
nav.site-nav a.btn-nav{
  background:var(--red); color:#fff; font-weight:700; padding:9px 18px;
  box-shadow:0 2px 10px rgba(200,55,45,.28);
}
nav.site-nav a.btn-nav:hover{ background:var(--red-dark); color:#fff; }
.nav-cart{
  display:inline-flex; align-items:center; gap:7px; color:var(--ink) !important;
  border:1px solid var(--line); background:#fff;
}
.cart-badge{
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  background:var(--ink); color:#fff; border-radius:999px;
  min-width:19px; height:19px; display:inline-grid; place-items:center; padding:0 5px;
}
.cart-badge.hidden{ display:none; }

/* avatar */
#nav-avatar-wrap{ position:relative; display:none; flex-shrink:0; }
.nav-avatar-btn{
  width:38px; height:38px; border-radius:50%; background:var(--ink); color:#fff;
  font-size:14px; font-weight:700; border:2px solid var(--line);
  display:grid; place-items:center; transition:transform .15s;
}
.nav-avatar-btn:hover{ transform:scale(1.07); }
.nav-avatar-dd{
  position:absolute; top:calc(100% + 8px); right:0; width:216px; z-index:9999;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg); overflow:hidden; display:none;
}
.nav-avatar-dd.open{ display:block; }
.nav-dd-header{ padding:13px 15px 10px; border-bottom:1px solid var(--line-soft); background:var(--tint); }
.nav-dd-name{ font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-dd-email{ font-size:11.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-dd-link{
  display:block; width:100%; text-align:left; padding:11px 15px; font-size:13.5px;
  text-decoration:none; color:var(--ink); background:none; border:0;
}
.nav-dd-link:hover{ background:var(--tint); }

/* ── BUTTONS ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--ink); color:#fff; border:0; border-radius:7px;
  padding:12px 22px; font-family:var(--font-label); font-size:1.02rem; font-weight:700;
  letter-spacing:.045em; text-transform:uppercase; text-decoration:none;
  transition:transform var(--t),background var(--t),box-shadow var(--t);
}
.btn:hover:not(:disabled){ background:var(--ink-2); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:disabled{ background:var(--line); color:#94A0B8; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-red{ background:var(--red); box-shadow:0 3px 12px rgba(200,55,45,.28); }
.btn-red:hover:not(:disabled){ background:var(--red-dark); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover:not(:disabled){ background:var(--tint); color:var(--ink); }
.btn-white{ background:#fff; color:var(--ink); }
.btn-white:hover:not(:disabled){ background:var(--tint); color:var(--ink); }
.btn-lg{ padding:15px 30px; font-size:1rem; }
.btn-sm{ padding:8px 14px; font-size:.82rem; }
.btn-full{ width:100%; }
.linkbtn{
  background:none; border:0; padding:0; color:var(--blue); font-size:.85rem;
  text-decoration:underline; text-underline-offset:3px;
}
.linkbtn:hover{ color:var(--ink); }

/* ── PILLS / BADGES ───────────────────────────────────────────────────── */
.pill{
  display:inline-block; font-family:var(--font-label); font-size:.76rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  background:var(--kraft); color:var(--ink); padding:4px 9px; border-radius:4px;
}
.pill-red{ background:var(--red); color:#fff; }
.pill-green{ background:#DCF1E1; color:var(--green); }
.pill-blue{ background:#DEE8FA; color:var(--blue); }
.status-badge{
  display:inline-block; font-family:var(--font-label); font-size:.82rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px; background:var(--tint-2); color:var(--ink-soft);
}
.st-pending{ background:#FEF3D7; color:#8A6100; }
.st-quoted{ background:#DEE8FA; color:var(--blue); }
.st-approved{ background:#DCF1E1; color:var(--green); }
.st-production{ background:#E7DDF7; color:#5B37A8; }
.st-mailed,.st-shipped{ background:#D7EEF5; color:#0E6E88; }
.st-delivered{ background:#DCF1E1; color:var(--green); }
.st-cancelled{ background:#F9DEDC; color:var(--red-dark); }

/* ── CARDS ────────────────────────────────────────────────────────────── */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px; transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.card-hover:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--ink); }

/* ── FORMS ────────────────────────────────────────────────────────────── */
.field{ display:block; margin-bottom:15px; }
.field > span, label.lbl{
  display:block; font-family:var(--font-label); font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;
}
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=number],input[type=date],textarea,select{
  width:100%; padding:11px 13px; font-family:var(--font-sans); font-size:.95rem;
  color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:7px;
  outline:none; transition:border-color var(--t),box-shadow var(--t);
}
input:focus,textarea:focus,select:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(44,91,168,.13);
}
textarea{ min-height:110px; resize:vertical; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.row3{ display:grid; grid-template-columns:2fr .7fr 1fr; gap:14px; }

/* option buttons */
.opts{ display:grid; gap:9px; }
.opts.two{ grid-template-columns:1fr 1fr; }
.opt{
  text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:9px;
  padding:12px 14px; display:grid; gap:3px; transition:border-color var(--t),background var(--t);
}
.opt:hover{ border-color:var(--ink-soft); }
.opt.on{ border-color:var(--ink); background:var(--tint); box-shadow:inset 3px 0 0 var(--red); }
.opt-t{ font-weight:700; font-size:.92rem; }
.opt-s{ font-family:var(--font-mono); font-size:.8rem; color:var(--blue); }
.opt-n{ font-size:.78rem; color:var(--ink-soft); }

/* ── ALERTS ───────────────────────────────────────────────────────────── */
.alert{ border-radius:8px; padding:13px 16px; font-size:.9rem; margin-bottom:16px; }
.alert-ok{ background:#E8F6EC; border:1px solid #A9DDB8; color:#1B6B2F; }
.alert-err{ background:#FDECEA; border:1px solid #F2BDB8; color:var(--red-dark); }
.alert-warn{ background:#FDF3DE; border:1px solid #EBD49B; color:#8A6100; }
.alert-info{ background:#E9F0FB; border:1px solid #BBCFF0; color:var(--blue); }

/* ── MAIL PIECE PREVIEW ───────────────────────────────────────────────── */
.pc{
  width:100%; display:grid; grid-template-rows:1fr auto; background:#FCFBF7;
  border:1px solid var(--line); border-radius:5px; box-shadow:var(--shadow-lg); overflow:hidden;
}
.pc-front{ position:relative; padding:24px 18px 14px; display:flex; align-items:center; }
.pc-stripe{
  position:absolute; inset:0 0 auto 0; height:7px;
  background:repeating-linear-gradient(-45deg,var(--red) 0 9px,#fff 9px 18px,var(--blue) 18px 27px,#fff 27px 36px);
}
.pc-head{ font-family:var(--font-display); font-size:clamp(1.05rem,3.3vw,1.85rem); line-height:1; margin:0 0 5px; word-break:break-word; }
.pc-sub{ margin:0; font-size:.82rem; color:var(--ink-soft); }
.pc-back{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; border-top:1px dashed var(--line); padding:12px 14px; }
.indicia{ border:1px solid var(--ink); padding:5px 8px; display:grid; font-family:var(--font-mono); font-size:.5rem; line-height:1.35; text-align:center; }
.addr{ display:grid; gap:1px; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.05em; text-align:right; }
.imb{ justify-self:end; margin-top:4px; width:92px; height:12px; background-image:repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 4px); }

/* ── STATS STRIP ──────────────────────────────────────────────────────── */
.strip{ background:var(--ink); color:#fff; }
.strip-inner{ max-width:var(--maxw); margin:0 auto; padding:30px 20px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.stat-k{ font-family:var(--font-display); font-size:2rem; font-weight:700; line-height:1.05; color:#fff; }
.stat-v{ font-family:var(--font-label); font-size:.86rem; letter-spacing:.05em; text-transform:uppercase; color:#A9B6D4; }

/* ── VALUE STRIP ──────────────────────────────────────────────────────── */
.value-strip{ background:var(--green); display:flex; justify-content:center; flex-wrap:wrap; }
.value-item{
  color:#fff; font-family:var(--font-label); font-size:15px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; padding:14px 26px;
  display:flex; align-items:center; gap:8px; border-right:1px solid rgba(255,255,255,.22);
}
.value-item:last-child{ border-right:none; }

/* ── TABLES ───────────────────────────────────────────────────────────── */
table.tbl{ width:100%; border-collapse:collapse; background:#fff; font-size:.9rem; }
table.tbl th{
  text-align:left; padding:11px 13px; background:var(--tint); color:var(--ink-soft);
  font-family:var(--font-label); font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
table.tbl td{ padding:12px 13px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
table.tbl tr:hover td{ background:var(--tint); }

/* ── FOOTER ───────────────────────────────────────────────────────────── */
footer.site-footer{ background:#0A1526; color:#fff; padding:56px 0 24px; }
footer.site-footer .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:38px; }
footer.site-footer h4{
  font-family:var(--font-label); font-size:.8rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--kraft); margin-bottom:14px;
}
footer.site-footer ul{ list-style:none; margin:0; padding:0; }
footer.site-footer li{ margin-bottom:9px; }
footer.site-footer a{ color:#96A5C0; text-decoration:none; font-size:13.5px; transition:color var(--t); }
footer.site-footer a:hover{ color:var(--kraft); }
footer.site-footer p{ color:#7E8DA8; font-size:13.5px; line-height:1.7; }
.footer-brand-word{
  font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:#fff;
  margin-bottom:10px; text-transform:uppercase; letter-spacing:.005em;
}
.footer-brand-word em{ font-style:normal; color:var(--red-light); }
.footer-bottom{
  border-top:1px solid #1C2C46; padding-top:20px; display:flex;
  justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.footer-bottom p{ margin:0; font-size:12px; color:#63728C; }
.footer-legal{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-legal a{ font-size:12px; color:#63728C; }

/* ── MODAL ────────────────────────────────────────────────────────────── */
.modal-overlay{
  display:none; position:fixed; inset:0; z-index:2000; padding:20px;
  background:rgba(10,21,38,.6); align-items:center; justify-content:center; overflow-y:auto;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:#fff; border-radius:var(--radius-lg); max-width:560px; width:100%;
  box-shadow:var(--shadow-lg); position:relative; max-height:92vh; overflow-y:auto;
}
.modal-head{ padding:22px 26px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:2; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.modal-body{ padding:22px 26px; }
.modal-foot{ padding:16px 26px 22px; border-top:1px solid var(--line); position:sticky; bottom:0; background:#fff; }
.modal-x{
  position:absolute; top:16px; right:18px; background:none; border:0;
  font-size:24px; line-height:1; color:var(--ink-soft);
}

/* ── TOAST ────────────────────────────────────────────────────────────── */
#toast{
  display:none; position:fixed; bottom:26px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:13px 24px; border-radius:8px;
  font-size:.9rem; font-weight:600; z-index:5000; box-shadow:var(--shadow-lg);
}

/* ── LOADER ───────────────────────────────────────────────────────────── */
#page-loader{
  display:none; position:fixed; inset:0; z-index:4000;
  background:rgba(255,255,255,.85); align-items:center; justify-content:center;
}
.spinner{
  width:42px; height:42px; border:4px solid var(--line); border-top-color:var(--red);
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── FADE IN ──────────────────────────────────────────────────────────── */
.fade-in{ opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease; }
.fade-in.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .fade-in{ opacity:1; transform:none; }
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width:980px){
  .g4{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:repeat(2,1fr); }
  footer.site-footer .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  section{ padding:40px 0; }
  .section-title{ margin-bottom:28px; }
  .section-title p{ margin-top:8px; }
  .grid{ gap:16px; }
  h1,.h1{ font-size:clamp(2rem,8.5vw,2.8rem); }
  h2,.h2{ font-size:clamp(1.5rem,6.5vw,2rem); }
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  .strip-inner{ grid-template-columns:1fr 1fr; gap:16px; }
  .row2,.row3{ grid-template-columns:1fr; }
  .topbar{ font-size:11px; padding:7px 12px; }
  .header-inner{ padding:8px 12px; gap:8px; }
  nav.site-nav{ flex:1; overflow-x:auto; scrollbar-width:none; justify-content:flex-end; }
  nav.site-nav::-webkit-scrollbar{ display:none; }
  nav.site-nav a{ font-size:11.5px; padding:7px 8px; }
  nav.site-nav a.btn-nav{ padding:8px 13px; }
  .logo-word{ font-size:.95rem; }
  .value-item{ padding:11px 14px; font-size:11.5px; }
  .btn{ min-height:44px; }
  input,textarea,select{ font-size:16px; min-height:44px; }
  footer.site-footer .footer-grid{ grid-template-columns:1fr; gap:26px; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}
@media (max-width:480px){
  .logo-word{ display:none; }
  .value-item{ width:50%; border-right:none; justify-content:center; }
  .strip-inner{ grid-template-columns:1fr 1fr; }
  .opts.two{ grid-template-columns:1fr; }
}

/* ── DARK MODE ────────────────────────────────────────────────────────── */
html.dark-mode{ color-scheme:dark; }
html.dark-mode body{
  --paper:#0F1526; --tint:#161E33; --tint-2:#1D273F; --line:#26314C; --line-soft:#1E2740;
  --ink:#E6EBF5; --ink-2:#D2DAEA; --ink-soft:#94A2BE;
  background:#0F1526; color:#E6EBF5;
}
html.dark-mode header.site-header{ background:rgba(15,21,38,.95); }
html.dark-mode .card,html.dark-mode .modal,html.dark-mode .nav-avatar-dd,
html.dark-mode input,html.dark-mode textarea,html.dark-mode select,
html.dark-mode .opt,html.dark-mode table.tbl{ background:#161E33; color:#E6EBF5; }
html.dark-mode .modal-head,html.dark-mode .modal-foot{ background:#161E33; }
html.dark-mode .btn-white{ background:#E6EBF5; color:#0F1526; }
html.dark-mode .btn-ghost{ color:#E6EBF5; }
html.dark-mode .pc{ background:#1B2440; }
html.dark-mode .logo-word{ color:#E6EBF5; }
html.dark-mode .logo-mark{ background:#E6EBF5; }
html.dark-mode .logo-mark span{ color:#0F1526; }

/* ── A11Y ─────────────────────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--red); outline-offset:2px;
}
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
  padding:10px 18px; z-index:9999; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--tint); }
::-webkit-scrollbar-thumb{ background:#BAC5D8; border-radius:5px; }
::-webkit-scrollbar-thumb:hover{ background:#9AA8C0; }