/* MyAgura design system.
 *
 * Hand-written rather than generated: the surface is small enough that a
 * token layer plus ~40 components is less code than a utility framework, and
 * every colour pair here is checked against WCAG 2.2 AA (spec 15).
 *
 * Layers: tokens -> reset -> layout -> components -> utilities.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Brand */
  --navy-900: #071d3b;
  --navy-800: #0c2e5c;
  --navy-700: #123c74;
  --navy-600: #1a4f92;
  --navy-100: #e6edf6;
  --navy-50:  #f3f7fb;

  --teal-800: #0b5f6a;
  --teal-700: #10808d;
  --teal-600: #1596a4;
  --teal-100: #def1f3;
  --teal-50:  #f0fafb;

  --gold-700: #9a6f18;
  --gold-600: #b98a22;
  --gold-500: #dca63c;
  --gold-100: #fbf1da;

  /* Neutrals */
  --ink-900: #14181d;
  --ink-800: #232a33;
  --ink-700: #3b4552;
  --ink-600: #566175;
  --ink-500: #6f7b8d;
  --ink-400: #98a2b1;
  --ink-300: #c6ccd6;
  --ink-200: #e0e4ea;
  --ink-100: #eef1f5;
  --ink-50:  #f7f9fb;
  --white:   #ffffff;

  /* Status: each pairs a 700 text tone with a 50 surface at >= 4.5:1 */
  --ok-700:   #1c6b3f;
  --ok-100:   #dcf3e6;
  --warn-700: #8a5a06;
  --warn-100: #fcefd6;
  --err-700:  #a32020;
  --err-100:  #fbe3e3;
  --info-700: #0b5f6a;
  --info-100: #def1f3;

  /* Semantic */
  --surface:        var(--white);
  --surface-sunken: var(--ink-50);
  --surface-raised: var(--white);
  --border:         var(--ink-200);
  --border-strong:  var(--ink-300);
  --text:           var(--ink-900);
  --text-muted:     var(--ink-600);
  --text-faint:     var(--ink-500);
  --accent:         var(--navy-800);
  --accent-text:    var(--white);
  --link:           var(--teal-800);
  --focus:          var(--gold-500);

  /* Scale */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;

  --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(7, 29, 59, .07);
  --shadow:    0 2px 8px rgba(7, 29, 59, .09);
  --shadow-lg: 0 12px 32px rgba(7, 29, 59, .14);

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 68ch;
  --container: 1180px;
  --container-narrow: 760px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:        #10151c;
    --surface-sunken: #0a0e14;
    --surface-raised: #182029;
    --border:         #2a343f;
    --border-strong:  #3a4653;
    --text:           #eef2f7;
    --text-muted:     #b3bdca;
    --text-faint:     #8e99a8;
    --accent:         #2a6bbd;
    --accent-text:    #ffffff;
    --link:           #5fc6d3;

    --navy-100: #16243a;
    --navy-50:  #101927;
    --teal-100: #0e2f36;
    --teal-50:  #0b232a;
    --gold-100: #33280f;
    --ok-100:   #102e1e; --ok-700:   #63d295;
    --warn-100: #33260c; --warn-700: #e8b45a;
    --err-100:  #331414; --err-700:  #f28b8b;
    --info-100: #0e2f36; --info-700: #5fc6d3;
    --ink-100:  #1d2630;
    --ink-50:   #151c24;
  }
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface-sunken);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 var(--sp-3); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }
p  { margin: 0 0 var(--sp-4); max-width: var(--measure); }
a  { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
img, svg, video { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }
small { font-size: .85rem; }
code, pre { font-family: var(--font-mono); font-size: .9em; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy-800); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ layout */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-4); }
.container-narrow { max-width: var(--container-narrow); }
.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.row-top { align-items: flex-start; }
.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(190px, 1fr)); }
.sidebar-layout { display: grid; gap: var(--sp-6); grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .sidebar-layout { grid-template-columns: 1fr; } }
.page { padding: var(--sp-6) 0 var(--sp-8); }
.page-header { margin-bottom: var(--sp-5); }
.page-header p.lede { font-size: 1.08rem; color: var(--text-muted); }

/* ------------------------------------------------------------- site chrome */
.site-header {
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
}
.site-header .container { display: flex; align-items: center; gap: var(--sp-4); min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; flex: 0 0 auto; }
.brand img { height: 34px; width: auto; display: block; }
.brand-text { font-family: var(--font-serif); font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em; }
.brand-text .b1 { color: var(--navy-800); } .brand-text .b2 { color: var(--teal-700); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-text .b1 { color: #9dc0ea; }
  :root:not([data-theme="light"]) .brand-text .b2 { color: #5fc6d3; }
}
.site-nav { display: flex; gap: var(--sp-1); align-items: center; margin-left: auto; flex-wrap: wrap; }
.site-nav a {
  color: var(--text-muted); text-decoration: none; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius); font-weight: 500; font-size: .95rem;
}
.site-nav a:hover { background: var(--ink-100); color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--navy-800); background: var(--navy-100); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-nav a[aria-current="page"] { color: #cfe0f5; }
}
.nav-toggle { display: none; }
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: var(--sp-3); }
  .site-nav.open { display: flex; }
  .site-header .container { flex-wrap: wrap; }
}

.site-footer {
  background: var(--navy-900); color: #c9d6e6; margin-top: var(--sp-8);
  padding: var(--sp-7) 0 calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
}
.site-footer a { color: #9dc0ea; }
.site-footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--sp-2); font-size: .92rem; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--sp-6); padding-top: var(--sp-4); font-size: .85rem; }

/* ------------------------------------------------------------------- cards */
.card {
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm);
}
.card-compact { padding: var(--sp-4); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }
.card-link { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s; }
.card-link:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.card-link:hover .card-title { text-decoration: underline; }
.card-title { color: var(--navy-800); font-weight: 700; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card-title { color: #9dc0ea; } }

.panel { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); }

/* ------------------------------------------------------------------ badges */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: .76rem; font-weight: 600; letter-spacing: .02em;
  padding: 3px var(--sp-2); border-radius: var(--radius-pill);
  background: var(--ink-100); color: var(--ink-700); white-space: nowrap;
}
.badge-ok    { background: var(--ok-100);   color: var(--ok-700); }
.badge-warn  { background: var(--warn-100); color: var(--warn-700); }
.badge-err   { background: var(--err-100);  color: var(--err-700); }
.badge-info  { background: var(--info-100); color: var(--info-700); }
.badge-brand { background: var(--navy-100); color: var(--navy-800); }
.badge-gold  { background: var(--gold-100); color: var(--gold-700); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-brand { color: #9dc0ea; } }
/* Sponsored results are always visually distinct from organic ones. */
.badge-sponsored { background: var(--gold-100); color: var(--gold-700); border: 1px solid var(--gold-600); }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font: inherit; font-weight: 600; line-height: 1.2;
  padding: .62rem 1.05rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  background: var(--accent); color: var(--accent-text);
  min-height: 44px; /* touch target */
  transition: background-color .12s, border-color .12s;
}
.btn:hover { background: var(--navy-700); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--ink-100); }
.btn-teal { background: var(--teal-700); } .btn-teal:hover { background: var(--teal-800); }
.btn-danger { background: var(--err-700); } .btn-danger:hover { filter: brightness(.92); }
.btn-ghost { background: transparent; color: var(--link); border-color: transparent; }
.btn-ghost:hover { background: var(--ink-100); }
.btn-sm { padding: .34rem .7rem; font-size: .88rem; min-height: 36px; }
.btn-lg { padding: .82rem 1.5rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------------- forms */
.field { margin-bottom: var(--sp-4); }
.field > label, .field-label {
  display: block; font-weight: 600; margin-bottom: var(--sp-1); font-size: .94rem;
}
.field .hint { display: block; color: var(--text-muted); font-size: .86rem; margin-bottom: var(--sp-2); max-width: var(--measure); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel],
input[type=number], input[type=date], input[type=datetime-local], input[type=search],
select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: .58rem .7rem; min-height: 44px;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
select { min-height: 44px; }
input:disabled, select:disabled, textarea:disabled { background: var(--ink-100); color: var(--text-faint); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--err-700); border-width: 2px;
}
.field-error { display: block; color: var(--err-700); font-size: .87rem; margin-top: var(--sp-1); font-weight: 500; }
.checkline { display: flex; gap: var(--sp-2); align-items: flex-start; margin-bottom: var(--sp-2); }
.checkline input { width: 1.15rem; height: 1.15rem; min-height: 0; margin-top: .28rem; flex: 0 0 auto; accent-color: var(--navy-700); }
.checkline label { font-weight: 400; margin: 0; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); margin: 0 0 var(--sp-4); }
legend { font-weight: 700; padding: 0 var(--sp-2); }
.form-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin-top: var(--sp-5); }
.required-mark { color: var(--err-700); font-weight: 700; }

/* ------------------------------------------------------------------ alerts */
.alert {
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid; margin-bottom: var(--sp-4);
}
.alert p:last-child { margin-bottom: 0; }
.alert-success { background: var(--ok-100);   border-color: var(--ok-700);   color: var(--ok-700); }
.alert-info    { background: var(--info-100); border-color: var(--info-700); color: var(--info-700); }
.alert-warning { background: var(--warn-100); border-color: var(--warn-700); color: var(--warn-700); }
.alert-error   { background: var(--err-100);  border-color: var(--err-700);  color: var(--err-700); }
.alert strong { color: inherit; }

/* ------------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-raised); }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); background: var(--surface-sunken); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--ink-50); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- data lists */
.dl { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.dl dt { font-weight: 600; color: var(--text-muted); font-size: .9rem; }
.dl dd { margin: 0; }
@media (max-width: 560px) { .dl { grid-template-columns: 1fr; gap: var(--sp-1); } .dl dd { margin-bottom: var(--sp-2); } }

/* ------------------------------------------------------------------- steps */
.steps { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.steps li { flex: 1 1 130px; }
.steps a, .steps span {
  display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); text-decoration: none;
  color: var(--text-muted); font-size: .88rem; font-weight: 600;
}
.steps .done a, .steps .done span { background: var(--ok-100); color: var(--ok-700); border-color: var(--ok-700); }
.steps .current a, .steps .current span { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.step-index { display: block; font-size: .74rem; font-weight: 500; opacity: .8; }

/* ------------------------------------------------------------------ misc UI */
.meter { height: 8px; background: var(--ink-200); border-radius: var(--radius-pill); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--teal-700); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.avatar {
  width: 48px; height: 48px; border-radius: var(--radius); background: var(--navy-100);
  color: var(--navy-800); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; flex: 0 0 auto; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: contain; }
.reason-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.reason-list li { font-size: .82rem; background: var(--teal-50); color: var(--teal-800); border: 1px solid var(--teal-100); padding: 2px var(--sp-2); border-radius: var(--radius-sm); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .reason-list li { color: #8fdbe4; } }

.empty {
  text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--text-muted);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface);
}
.empty h3 { color: var(--text); }

.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--border); }
.timeline li { position: relative; padding: 0 0 var(--sp-4) var(--sp-5); }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: .45rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--teal-700); border: 2px solid var(--surface);
}
.timeline time { display: block; font-size: .82rem; color: var(--text-faint); }

.stat { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); }
.stat .value { font-size: 1.85rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--navy-800); }
.stat .label { font-size: .84rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.stat .note { font-size: .82rem; color: var(--text-faint); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stat .value { color: #9dc0ea; } }

/* ------------------------------------------------------------------- hero */
.hero { background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 55%, var(--teal-800) 140%); color: #fff; padding: var(--sp-8) 0; }
.hero h1 { color: #fff; max-width: 18ch; }
.hero p { color: #d6e2f0; font-size: 1.14rem; max-width: 56ch; }
.hero .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.hero .btn-secondary:hover { background: rgba(255,255,255,.12); }
.hero-search { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-lg); padding: var(--sp-4); }
.hero-search input, .hero-search select { background: rgba(255,255,255,.96); color: var(--ink-900); border-color: transparent; }

/* -------------------------------------------------------------- admin shell */
.admin-shell { display: grid; grid-template-columns: 232px minmax(0,1fr); min-height: 100vh; }
.admin-nav { background: var(--navy-900); color: #c9d6e6; padding: var(--sp-4) var(--sp-3); }
.admin-nav a { display: block; color: #c9d6e6; text-decoration: none; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); font-size: .93rem; }
.admin-nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.admin-nav a[aria-current="page"] { background: var(--teal-700); color: #fff; font-weight: 600; }
.admin-nav h4 { color: #8ea6c4; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; margin: var(--sp-4) 0 var(--sp-1) var(--sp-3); }
.admin-main { padding: var(--sp-5); background: var(--surface-sunken); min-width: 0; }
@media (max-width: 900px) { .admin-shell { grid-template-columns: 1fr; } .admin-nav { padding-bottom: var(--sp-2); } }

/* ------------------------------------------------------------------ tabs */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 2px solid var(--border); margin-bottom: var(--sp-5); overflow-x: auto; }
.tabs a { padding: var(--sp-3) var(--sp-4); text-decoration: none; color: var(--text-muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--navy-800); border-bottom-color: var(--teal-700); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabs a[aria-current="page"] { color: #9dc0ea; } }

/* ------------------------------------------------------------- pagination */
.pager { display: flex; gap: var(--sp-2); align-items: center; justify-content: center; margin-top: var(--sp-5); }

/* -------------------------------------------------------------- utilities */
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: .88rem; }
.tiny  { font-size: .78rem; }
.bold  { font-weight: 700; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); }
.text-center { text-align: center; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
ul.plain, ol.plain { list-style: none; padding: 0; margin: 0; }

@media print {
  .site-header, .site-footer, .admin-nav, .form-actions, .btn { display: none !important; }
  body { background: #fff; }
}

/* ------------------------------------------------ CSP-safe helper classes
 * The Content-Security-Policy forbids inline style attributes and inline
 * event handlers, so anything a template would have written inline lives
 * here instead. */
.card-link-bare { display: block; text-decoration: none; color: inherit; }
.card-hover { transition: box-shadow .15s, border-color .15s; }
.card-hover:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.card-hover:hover .card-title { text-decoration: underline; }
.empty p { margin-inline: auto; }
.admin-brand { padding: 0 .75rem .75rem; }
.admin-brand span { color: #fff; font-weight: 700; }
.mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.inline-form { display: inline; }
.w-auto { width: auto; }
.gap-sm { gap: var(--sp-2); }
.text-right { text-align: right; }
.maxw-measure { max-width: var(--measure); }
.pill-choice { display: inline-flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); }
.pill-choice input { width: 1rem; height: 1rem; min-height: 0; accent-color: var(--navy-700); }
.choice-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.section-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: var(--sp-5) 0 var(--sp-2); }
.kpi-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.split { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.meter > span.w-0 { width: 0; }
.notice-banner { background: var(--warn-100); color: var(--warn-700); border-bottom: 1px solid var(--warn-700); padding: var(--sp-2) 0; font-size: .9rem; }
.code-box { font-family: var(--font-mono); font-size: 1.4rem; letter-spacing: .12em; padding: var(--sp-3) var(--sp-4); background: var(--surface-sunken); border: 1px dashed var(--border-strong); border-radius: var(--radius); display: inline-block; }
.nav-badge { display: inline-flex; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: var(--radius-pill); background: var(--err-700); color: #fff; font-size: .72rem; font-weight: 700; align-items: center; justify-content: center; margin-left: var(--sp-1); }
progress { width: 100%; height: 8px; border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--ink-200); -webkit-appearance: none; appearance: none; }
progress::-webkit-progress-bar { background: var(--ink-200); border-radius: var(--radius-pill); }
progress::-webkit-progress-value { background: var(--teal-700); border-radius: var(--radius-pill); }
progress::-moz-progress-bar { background: var(--teal-700); border-radius: var(--radius-pill); }
.h4 { font-size: 1.02rem; }
details.card > summary { cursor: pointer; }