:root {
  color-scheme: light;
  /* surfaces */
  --bg:            #f4f6fa;
  --panel:         #ffffff;
  --surface-2:     #f7f9fc;   /* subtle: table heads, row hovers */
  --surface-3:     #eef1f6;   /* chips / segmented / code track */
  --code-bg:       #eef1f6;
  --border:        #e5e8ef;
  --border-strong: #d4dae4;
  /* text */
  --text:   #11161e;
  --muted:  #66707f;
  /* brand + semantic */
  --accent:        #2563eb;
  --accent-strong: #1e54c9;
  --accent-2:      #fb8500;
  --accent-tint:        #eaf1ff;
  --accent-tint-border: #d4e2ff;
  --on-accent:     #ffffff;
  --ok:   #0ea371;
  --warn: #e4673f;
  /* sidebar (dark on both themes for a stable brand rail) */
  --sidebar-bg:        #0e1320;
  --sidebar-fg:        #c6cedd;
  --sidebar-mut:       #8893a7;
  --sidebar-active-bg: rgba(255,255,255,0.09);
  --sidebar-active-fg: #ffffff;
  /* elevation */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.05);
  --shadow-md: 0 4px 14px rgba(16,24,40,.08);
  --shadow-lg: 0 18px 42px rgba(16,24,40,.14);
  --ring: 0 0 0 3px rgba(37,99,235,.26);
  /* radius */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --pill: 999px;
  /* legacy aliases (kept so older rules keep resolving) */
  --topbar: #0e1320; --topbar-fg: #c6cedd;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #0b0f17;
  --panel:         #121826;
  --surface-2:     #161d2b;
  --surface-3:     #1d2535;
  --code-bg:       #1d2535;
  --border:        #232c3d;
  --border-strong: #32405a;
  --text:   #e8ecf4;
  --muted:  #97a3b6;
  --accent:        #5b8bff;
  --accent-strong: #7aa2ff;
  --accent-tint:        rgba(91,139,255,.14);
  --accent-tint-border: rgba(91,139,255,.32);
  --on-accent:     #0a0e16;
  --ok:   #2dd4a7;
  --warn: #f5825f;
  --sidebar-bg:        #0c111b;
  --sidebar-fg:        #c6cedd;
  --sidebar-mut:       #828ea3;
  --sidebar-active-bg: rgba(255,255,255,0.10);
  --sidebar-active-fg: #ffffff;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 6px 18px rgba(0,0,0,.5);
  --shadow-lg: 0 22px 48px rgba(0,0,0,.6);
  --ring: 0 0 0 3px rgba(91,139,255,.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

/* ============================ App shell ============================= */
.app { display: flex; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; flex: 0 0 240px; width: 240px;
  display: flex; flex-direction: column;
  background: var(--sidebar-bg); color: var(--sidebar-fg);
  border-right: 1px solid rgba(255,255,255,0.06);
  z-index: 40; transition: width .18s ease;
}
.side-brand { padding: 1rem 1rem 0.9rem; }
.side-logo-link { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.side-brand .logo {
  font-weight: 800; font-size: 1rem; letter-spacing: 0.03em; color: #fff;
  background: var(--accent); padding: 0.32rem 0.55rem; border-radius: var(--r-sm);
  line-height: 1; box-shadow: var(--shadow-sm);
}
.side-name { font-size: 0.92rem; font-weight: 600; color: var(--sidebar-fg); white-space: nowrap; }

.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 0.4rem 0.6rem; flex: 1; overflow-y: auto; }
.side-link {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.7rem; border-radius: var(--r-sm);
  color: var(--sidebar-fg); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  white-space: nowrap; position: relative; transition: background .12s, color .12s;
}
.side-link:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }
.side-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); font-weight: 600; }
.side-link.active::before {
  content: ""; position: absolute; left: -0.6rem; top: 0.45rem; bottom: 0.45rem; width: 3px;
  background: var(--accent); border-radius: 0 3px 3px 0;
}
.side-ic { width: 18px; height: 18px; flex: 0 0 18px; opacity: 0.85; }
.side-link:hover .side-ic, .side-link.active .side-ic { opacity: 1; }

.side-foot { padding: 0.7rem 0.95rem 0.95rem; display: flex; gap: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.06); }
.side-foot-link { color: var(--sidebar-mut); font-size: 0.8rem; text-decoration: none; }
.side-foot-link:hover { color: #fff; }

/* Collapsed rail (desktop, icons only) */
.nav-collapsed .sidebar { width: 66px; flex-basis: 66px; }
.nav-collapsed .side-name,
.nav-collapsed .side-label,
.nav-collapsed .side-foot { display: none; }
.nav-collapsed .side-link { justify-content: center; padding: 0.55rem; }
.nav-collapsed .side-brand { display: flex; justify-content: center; padding: 1rem 0 0.9rem; }

/* Main column */
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 1.6rem;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm);
  background: transparent; border: 1px solid transparent; color: var(--muted);
  cursor: pointer; transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }
.nav-toggle { color: var(--text); }

/* min-width: 0 lets the search shrink below the input's intrinsic width —
   without it the appbar's minimum is ~490px and it stretches every page
   sideways on phones. */
.appbar .search { position: relative; flex: 1; max-width: 32rem; min-width: 0; }
.appbar .search input {
  width: 100%; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--pill);
  padding: 0.52rem 1rem 0.52rem 2.3rem; font-size: 0.9rem; box-shadow: var(--shadow-sm);
}
.appbar .search input::placeholder { color: var(--muted); }
.appbar .search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.appbar .search-icon {
  position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted); pointer-events: none;
}
.theme-toggle .ic-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: inline; }

.side-scrim { display: none; }

/* Fluid content: analytics expand with the browser window (no fixed cap).
   overflow-x: clip is the phone guard — one stray wide element must never
   stretch the whole page sideways (wide tables scroll in their own
   .table-wrap; clip, unlike hidden, keeps position:sticky working). */
main { width: 100%; max-width: none; margin: 1.6rem auto; padding: 0 1.8rem; flex: 1; overflow-x: clip; }

@media (max-width: 860px) {
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 250px; flex-basis: 250px;
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg);
  }
  .nav-open .sidebar { transform: translateX(0); }
  .nav-collapsed .sidebar { width: 250px; flex-basis: 250px; }  /* ignore collapse on mobile */
  .nav-collapsed .side-name, .nav-collapsed .side-label, .nav-collapsed .side-foot { display: revert; }
  .nav-collapsed .side-link { justify-content: flex-start; padding: 0.55rem 0.7rem; }
  .side-scrim { display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(8,11,18,0.5); }
  .appbar { padding: 0.55rem 1rem; }
  main { margin: 1rem auto; padding: 0 1rem; }
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Visible focus ring across interactive elements */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
button:focus-visible, .kpi:focus-visible, .quick:focus-visible {
  outline-offset: 3px;
}

footer {
  margin: 3rem auto 1.5rem; max-width: none; padding: 0 1.8rem; width: 100%;
  color: var(--muted); font-size: 0.85rem;
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
}
footer code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
footer a { color: var(--muted); }
footer a:hover { color: var(--accent); }
footer .dot { color: var(--border-strong); }

/* KPI grid */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85rem; margin-bottom: 1.5rem;
}
.kpi {
  position: relative;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r);
  padding: 1.05rem 1.15rem 1.1rem; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s, transform .18s, box-shadow .18s;
  display: flex; flex-direction: column; min-height: 6.4rem;
}
a.kpi:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.kpi.accent { border-top: 3px solid var(--accent); padding-top: calc(1.05rem - 2px); }
.kpi.success { border-top: 3px solid var(--ok); padding-top: calc(1.05rem - 2px); }
.kpi.warn    { border-top: 3px solid var(--warn); padding-top: calc(1.05rem - 2px); }
.kpi-label {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: 0.4rem;
}
.kpi-icon {
  width: 14px; height: 14px; flex: 0 0 14px; color: var(--muted); opacity: 0.85;
}
.kpi.accent  .kpi-icon { color: var(--accent); opacity: 1; }
.kpi.success .kpi-icon { color: var(--ok); opacity: 1; }
.kpi.warn    .kpi-icon { color: var(--warn); opacity: 1; }
.kpi-value {
  font-size: 1.55rem; font-weight: 700; margin: 0.35rem 0 0.05rem;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  line-height: 1.15;
}
.kpi-suffix { font-size: 0.85rem; color: inherit; font-weight: 600; margin-left: 1px; }
.kpi-unit   { font-size: 0.78rem; color: var(--muted); font-weight: 500; margin-left: 0.4rem; }
.kpi-sub  { font-size: 0.8rem; color: var(--muted); margin-top: auto; line-height: 1.35; }
.kpi-sub .delta-up   { color: var(--warn); font-weight: 600; }
.kpi-sub .delta-down { color: var(--ok);  font-weight: 600; }
.kpi-sub .delta-flat { color: var(--muted); font-weight: 600; }

/* Phones: two compact KPI cards per row instead of one tall stack */
@media (max-width: 560px) {
  .appbar { padding: 0.55rem 0.8rem; gap: 0.45rem; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .kpi { padding: 0.7rem 0.75rem 0.75rem; min-height: 4.9rem; }
  .kpi.accent, .kpi.success, .kpi.warn { padding-top: calc(0.7rem - 2px); }
  .kpi-value { font-size: 1.18rem; }
  .kpi-label { font-size: 0.68rem; }
  .panel { padding: 0.95rem 0.9rem 1rem; }
}

/* Panels */
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r);
  padding: 1.3rem 1.45rem 1.45rem; margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.panel h2 { margin: 0 0 0.6rem 0; font-size: 1.12rem; font-weight: 650; letter-spacing: -0.01em; }
.chart-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 200px;
  color: var(--muted); font-size: 0.9rem; font-style: italic;
  background: repeating-linear-gradient(45deg,
    transparent 0, transparent 8px,
    rgba(108,117,135,0.04) 8px, rgba(108,117,135,0.04) 16px);
  border-radius: 6px;
}
.panel h3.cat {
  margin: 1.5rem 0 0.5rem; font-size: 0.85rem; text-transform: uppercase;
  color: var(--muted); letter-spacing: 0.08em;
}
.panel-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
.hint { font-size: 0.88rem; color: var(--muted); margin: 0 0 0.9rem 0; }
.hint code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
.panel.two-col { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1.4rem; }
@media (max-width: 760px) { .panel.two-col { grid-template-columns: 1fr; } }

/* Forms */
.inline-form { display: inline-flex; gap: 0.6rem; align-items: center; }
.inline-form input, .inline-form select {
  border: 1px solid var(--border); border-radius: 4px; padding: 0.35rem 0.5rem; background: var(--panel);
}
.inline-form button {
  background: var(--accent); color: #fff; border: 0; padding: 0.4rem 0.9rem;
  border-radius: 4px; cursor: pointer;
}
.inline-form button:hover { filter: brightness(1.05); }

/* Table-wrap: horizontal scroll for wide tables on small screens */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.3rem; }
.table-wrap .grid { min-width: 720px; }

/* Tables */
.grid { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.grid th, .grid td {
  text-align: left; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--border);
}
.grid th {
  font-weight: 600; color: var(--muted); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--surface-2); position: sticky; top: 0;
}
.grid tbody tr:hover { background: var(--surface-2); }
.grid .num   { text-align: right; font-variant-numeric: tabular-nums; }
.grid .rank  { width: 2.5rem; color: var(--muted); }
.grid .empty { text-align: center; padding: 1.5rem 1rem;
               color: var(--muted); font-style: italic; }
.grid.compact th, .grid.compact td { padding: 0.3rem 0.5rem; }
/* Report records stay on one line — wide tables scroll inside .table-wrap /
   .file-report-wrap instead of wrapping cell text into tall rows. Action
   button pairs (View · Download) stay side-by-side for the same reason. */
.grid th, .grid td { white-space: nowrap; }
.grid .btn-group { flex-wrap: nowrap; }
.grid tbody tr.row-hi { background: #ecfdf3; }
.grid tbody tr.row-hi:hover { background: #e3f9ec; }
.grid tbody tr.row-hi td { font-weight: 600; }

.mono  { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
.muted { color: var(--muted); }

.ds-name { font-weight: 500; }
.ds-key { color: var(--muted); font-size: 0.82em; }

/* Badges */
.badge {
  display: inline-block; padding: 0.1rem 0.55rem; border-radius: 12px;
  background: var(--surface-3); color: #4b5563; font-size: 0.78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.badge.federal { background: #dbeafe; color: #1e3a8a; }
.badge.state   { background: #fef3c7; color: #92400e; }
.badge.ok      { background: #d1fae5; color: #065f46; }
.badge.warn    { background: #fee2e2; color: #991b1b; }
/* Long, descriptive category labels (e.g. "Raw Log Samples Digital") read
   better in their natural case than in screaming-caps. */
.badge.natural { text-transform: none; letter-spacing: 0.01em; font-weight: 500; }

/* Log-scale badge prefix on doc-type cells. Holds scale + optional depth
   reference (e.g. "180in" or "1in TVD" / "5in MD"). text-transform is none
   so the scale stays as-stored (lowercase by the parser) while TVD/MD stay
   uppercase — matches oilfield convention. */
.scale-badge   { background: var(--accent-tint); color: #1e3a8a; margin-right: 0.35rem;
                 text-transform: none; letter-spacing: 0.02em; }
.doc-vendor    { color: var(--muted); font-size: 0.78rem; margin-top: 0.1rem; }
.reclass-tag   { background: #fef3c7; color: #92400e; }

/* Definition list (kv) */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1.1rem; margin: 0.4rem 0 1rem; }
.kv dt { color: var(--muted); font-size: 0.85rem; }
.kv dd { margin: 0; }
.kv-row { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); align-items: end; }
.kv-row dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.kv-row dd { font-weight: 600; font-size: 1.15rem; }

/* Segmented control (granularity toggles, etc.) */
.seg {
  display: inline-flex; gap: 0;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px;
  padding: 2px;
}
.seg button {
  background: transparent; border: 0; padding: 0.25rem 0.65rem;
  font-size: 0.82rem; font-weight: 500; color: var(--muted);
  border-radius: 4px; cursor: pointer; transition: background .15s, color .15s;
}
.seg button:hover  { color: var(--text); }
.seg button.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.seg button.disabled, .seg button:disabled { opacity: 0.35; cursor: not-allowed; }
.seg-label { font-size: 0.78rem; color: var(--muted); margin-right: 0.4rem; }

/* ---- Compare explorer ---- */
.ex-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.1rem 1.4rem;
  padding-bottom: 0.9rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--border);
}
.ex-ctl { display: flex; flex-direction: column; gap: 0.32rem; }
.ex-ctl > span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ex-ctl select {
  padding: 0.34rem 0.5rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); font-size: 0.86rem; color: var(--text); min-width: 13rem;
}
.ex-cards { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 0.9rem; }
.ex-card {
  flex: 1 1 170px; min-width: 160px; border: 1px solid var(--border);
  border-left: 3px solid var(--c, var(--border)); border-radius: 8px;
  padding: 0.6rem 0.75rem; background: var(--panel);
}
.ex-card-head { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.88rem; }
.ex-card-head .ex-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); display: inline-block; }
.ex-card-val { font-size: 1.45rem; font-weight: 700; margin: 0.15rem 0 0.1rem; font-variant-numeric: tabular-nums; }
.ex-card-unit { font-size: 0.72rem; font-weight: 500; color: var(--muted); }
.ex-card-sub { font-size: 0.74rem; color: var(--muted); }
.ex-spark { margin-top: 0.4rem; height: 30px; }
.ex-spark svg { display: block; width: 100%; height: 30px; }
.chart-toolbar {
  display: flex; align-items: center; gap: 0.6rem;
  margin: -0.2rem 0 0.6rem;
}
.chart-toolbar .grow { flex: 1; }

/* Compare-operators grid */
.cmp-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
  .cmp-grid { grid-template-columns: 1fr; }
}
.cmp-col {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  border-top: 3px solid var(--accent, var(--accent));
  padding: 0.85rem 1rem 1rem;
}
.cmp-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.cmp-swatch { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.cmp-name { font-weight: 650; font-size: 1rem; text-decoration: none; color: var(--text); }
.cmp-name:hover { color: var(--accent); }
.cmp-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem; margin: 0;
}
.cmp-kpis .kpi { padding: 0.65rem 0.7rem 0.75rem; min-height: 4.6rem; }
.cmp-kpis .kpi-value { font-size: 1.2rem; }
.cmp-kpis .kpi-label { font-size: 0.66rem; }
.cmp-kpis .kpi-sub   { font-size: 0.72rem; }

/* Multi-select toolbar on the operators page */
.tools {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  background: var(--accent-tint); border: 1px solid var(--accent-tint-border); border-radius: 6px;
  margin-bottom: 0.9rem; font-size: 0.9rem;
}
.tools.hidden { display: none; }
.tools button {
  background: var(--accent); color: #fff; border: 0;
  padding: 0.35rem 0.85rem; border-radius: 4px; cursor: pointer; font-size: 0.88rem;
}
.tools button[disabled] { background: var(--muted); cursor: not-allowed; }
.tools .clear { background: transparent; color: var(--accent); }

/* Markdown article (rendered BSEE field-definition docs) */
.md h1 { font-size: 1.3rem; margin: 0.2rem 0 0.8rem; }
.md h2 { font-size: 1.05rem; margin: 1.3rem 0 0.5rem; color: var(--muted);
         text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.md ul { padding-left: 1.2rem; margin: 0.3rem 0 0.8rem; }
.md li { margin: 0.1rem 0; }
.md table {
  width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 0.4rem 0 1rem;
}
.md th, .md td {
  text-align: left; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.md th {
  font-weight: 600; color: var(--muted); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.05em; background: var(--surface-2);
}
.md tr:hover td { background: var(--surface-2); }
.md code {
  background: var(--surface-3); padding: 1px 5px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em;
}
.md em { color: var(--muted); }

/* Quick-link strip */
.quicklinks { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1rem 0; }
.quick {
  display: inline-flex; padding: 0.55rem 0.95rem; background: var(--panel);
  border: 1px solid var(--border); border-radius: 4px; text-decoration: none;
  color: var(--accent); font-size: 0.9rem;
}
.quick:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Wells filter form */
.wells-filter { display: flex; flex-direction: column; gap: 0.7rem; margin: 0.6rem 0 0; }
.wells-filter .wf-row {
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.1rem; align-items: flex-start;
}
.wells-filter label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.wells-filter .wf-grow { flex: 1 1 18rem; }
.wells-filter .wf-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.wells-filter input[type="search"],
.wells-filter input[type="number"],
.wells-filter input[type="date"],
.wells-filter select {
  border: 1px solid var(--border); border-radius: 4px; padding: 0.4rem 0.55rem;
  background: var(--panel); font-size: 0.9rem; color: var(--text); min-width: 9rem;
}
.wells-filter .wf-pair { display: inline-flex; gap: 0.35rem; }
.wells-filter .wf-pair input { min-width: 5rem; width: 6.5rem; }
.wells-filter select[multiple] { min-width: 8rem; padding: 0.2rem; }

.wells-filter fieldset {
  border: 1px solid var(--border); border-radius: 4px; padding: 0.45rem 0.7rem 0.55rem;
  margin: 0; min-width: 0;
}
.wells-filter legend {
  font-size: 0.72rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0 0.3rem;
}
.wells-filter .wf-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.55rem 0.15rem 0.3rem;
  border: 1px solid transparent; border-radius: 999px; font-size: 0.85rem;
  cursor: pointer; user-select: none;
}
.wells-filter .wf-chip input { accent-color: var(--accent); margin: 0; }
.wells-filter .wf-chip:hover { background: var(--surface-3); }
.wells-filter .wf-count {
  color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums;
}

.wells-filter .wf-actions { display: flex; gap: 0.8rem; align-items: center; }
.wells-filter button[type="submit"] {
  background: var(--accent); color: #fff; border: 0; padding: 0.5rem 1.1rem;
  border-radius: 4px; cursor: pointer; font-size: 0.9rem;
}
.wells-filter button[type="submit"]:hover { filter: brightness(1.05); }
.wf-reset { color: var(--muted); text-decoration: none; font-size: 0.88rem; }
.wf-reset:hover { color: var(--accent); }

.wf-pager {
  display: flex; gap: 1.2rem; align-items: center; padding: 0.8rem 0 0.2rem;
  font-size: 0.88rem; color: var(--muted);
}
.wf-pager a {
  color: var(--accent); text-decoration: none; padding: 0.3rem 0.7rem;
  border: 1px solid var(--border); border-radius: 4px; background: var(--panel);
}
.wf-pager a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Page heading                                                       */
/* ------------------------------------------------------------------ */
.page-head {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  margin: 0 0 0.4rem;
}
.page-head h1 {
  margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em;
}
.page-head .crumbs {
  font-size: 0.82rem; color: var(--muted); display: flex; gap: 0.4rem;
  align-items: center; flex-wrap: wrap;
}
.page-head .crumbs a { color: var(--muted); }
.page-head .crumbs a:hover { color: var(--accent); }
.page-head .crumbs .sep::before { content: "›"; color: var(--border-strong); padding: 0 0.1rem; }

/* ------------------------------------------------------------------ */
/* Section anchor nav (lease / well detail jumps)                     */
/* ------------------------------------------------------------------ */
.section-nav {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  padding: 0.5rem 0.6rem; margin: 0 0 1.1rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.section-nav a {
  font-size: 0.83rem; color: var(--muted);
  padding: 0.25rem 0.65rem; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border);
  text-decoration: none;
}
.section-nav a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.panel[id] { scroll-margin-top: 3rem; }

/* ------------------------------------------------------------------ */
/* Active-filter chip bar (wells page)                                 */
/* ------------------------------------------------------------------ */
.filter-chips {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 0.2rem;
  align-items: center;
}
.filter-chips .lbl { font-size: 0.78rem; color: var(--muted); margin-right: 0.2rem;
                     text-transform: uppercase; letter-spacing: 0.05em; }
.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.18rem 0.55rem; border-radius: 999px;
  background: var(--accent-tint); color: #1e3a8a; border: 1px solid var(--accent-tint-border);
  font-size: 0.8rem;
}
.chip .x {
  color: #6b7280; text-decoration: none; padding: 0 0.05rem;
  font-weight: 600; line-height: 1;
}
.chip .x:hover { color: var(--warn); }
.chip-clear {
  color: var(--muted); text-decoration: none; font-size: 0.8rem;
  margin-left: 0.4rem;
}
.chip-clear:hover { color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Legend strip (pipelines status, etc.)                              */
/* ------------------------------------------------------------------ */
.legend-strip {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem;
  margin: 0 0 0.7rem; font-size: 0.82rem; color: var(--muted);
}
.legend-strip .leg {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 0.12rem 0.55rem; border-radius: 4px;
}
.legend-strip .leg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8em; color: var(--text); background: transparent; padding: 0;
}

/* ------------------------------------------------------------------ */
/* Rank bars (safety, etc.)                                           */
/* ------------------------------------------------------------------ */
.rank-bar {
  position: relative; height: 0.42rem; background: var(--surface-3); border-radius: 999px;
  overflow: hidden; min-width: 4rem;
}
.rank-bar > span {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--accent), #59a0ff);
  border-radius: 999px;
}
.rank-bar.warn > span { background: linear-gradient(90deg, var(--warn), #f8a382); }
.rank-bar.success > span { background: linear-gradient(90deg, var(--ok), #6dd0bf); }

/* ------------------------------------------------------------------ */
/* Friendlier empty state (when no data anywhere on a section)         */
/* ------------------------------------------------------------------ */
.placeholder {
  text-align: center; padding: 2rem 1rem; color: var(--muted);
  background: repeating-linear-gradient(45deg,
    transparent 0, transparent 10px,
    rgba(108,117,135,0.04) 10px, rgba(108,117,135,0.04) 20px);
  border-radius: 6px; border: 1px dashed var(--border);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------ */
/* Loading skeletons + chart placeholder                              */
/* ------------------------------------------------------------------ */
.loading { position: relative; }
.loading::before {
  content: "loading…"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 0.85rem; font-style: italic;
  background: var(--panel); border-radius: 6px;
  z-index: 2;
}

/* ------------------------------------------------------------------ */
/* Panel collapse helper (uses native <details>)                      */
/* ------------------------------------------------------------------ */
details.collapse {
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-2); margin: 0 0 0.8rem;
}
details.collapse > summary {
  cursor: pointer; padding: 0.55rem 0.85rem; font-weight: 500;
  list-style: none; color: var(--text);
  display: flex; align-items: center; gap: 0.5rem;
}
details.collapse > summary::-webkit-details-marker { display: none; }
details.collapse > summary::before {
  content: "▸"; font-size: 0.78rem; color: var(--muted);
  transition: transform .15s;
}
details.collapse[open] > summary::before { transform: rotate(90deg); }
details.collapse > summary:hover { background: #f1f4fa; border-radius: 6px 6px 0 0; }
details.collapse[open] > summary { border-bottom: 1px solid var(--border); }
details.collapse .collapse-body { padding: 0.8rem 1rem 1rem; }
details.collapse .collapse-hint {
  color: var(--muted); font-size: 0.82rem; font-weight: 400;
  margin-left: auto;
}

/* ------------------------------------------------------------------ */
/* Wellbore-lifecycle report — phase panels                           */
/* ------------------------------------------------------------------ */
.phase-panel { border-top: 3px solid var(--accent); padding-top: calc(1.15rem - 2px); }
.phase-panel.planning    { border-top-color: #1f6feb; }
.phase-panel.drilling    { border-top-color: #fb8500; }
.phase-panel.logging     { border-top-color: #7d3cff; }
.phase-panel.completion  { border-top-color: #2a9d8f; }
.phase-panel.production  { border-top-color: #10b981; }
.phase-panel.abandonment { border-top-color: #6b7280; }
.phase-panel.other       { border-top-color: #94a3b8; }
.phase-panel .panel-head { flex-wrap: wrap; gap: 0.5rem 0.8rem; }
.phase-panel .panel-head h2 { display: flex; align-items: center; gap: 0.4rem; }
.phase-subhead {
  margin: 1.2rem 0 0.5rem;
  font-size: 0.95rem; font-weight: 600;
  color: var(--text);
}
.phase-categories { color: var(--muted); font-size: 0.82rem; }

/* ------------------------------------------------------------------ */
/* Buttons (modern, touch-friendly — min 40px tap target on mobile)   */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.55rem 1rem; min-height: 2.4rem;
  background: var(--accent); color: var(--on-accent) !important;
  border: 1px solid var(--accent); border-radius: var(--r-sm);
  font-size: 0.9rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: filter .15s, transform .08s, box-shadow .15s;
}
.btn:hover    { filter: brightness(1.06); text-decoration: none; box-shadow: var(--shadow-md); }
.btn:active   { transform: translateY(1px); }
.btn.ghost    { background: transparent; color: var(--accent) !important; border-color: var(--border); }
.btn.ghost:hover { background: var(--accent-tint); border-color: var(--accent); }
.btn.small    { padding: 0.3rem 0.65rem; min-height: 1.8rem; font-size: 0.8rem; font-weight: 500; }
/* Disabled state — visually inert; pointer-events: none stops hover/click
   on <a> if anyone wires up the disabled class on a real anchor by mistake. */
.btn.disabled, .btn[aria-disabled="true"] {
  background: var(--surface-3) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
  cursor: not-allowed;
  pointer-events: none;
  filter: none;
  box-shadow: none;
}
.btn.ghost.disabled, .btn.ghost[aria-disabled="true"] {
  background: transparent !important;
  color: #9aa3b2 !important;
}
.btn-group    { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
@media (max-width: 760px) {
  .btn { padding: 0.6rem 1.05rem; min-height: 2.6rem; font-size: 0.92rem; }
}

/* ------------------------------------------------------------------ */
/* Viewer toolbar (sticky action bar on file-viewer pages)            */
/* ------------------------------------------------------------------ */
.viewer-toolbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem;
  padding: 0.6rem 0.85rem;
  background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  margin: 0 0 1rem;
}
.viewer-toolbar .vt-title {
  font-weight: 650; font-size: 1rem; letter-spacing: -0.005em;
  min-width: 0; flex: 1 1 12rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.viewer-toolbar .vt-meta {
  display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center;
}
.viewer-toolbar .vt-actions {
  display: flex; gap: 0.4rem; flex-wrap: wrap; margin-left: auto;
}
@media (max-width: 560px) {
  .viewer-toolbar { padding: 0.55rem 0.7rem; gap: 0.4rem 0.5rem; }
  .viewer-toolbar .vt-actions { width: 100%; margin-left: 0; }
  .viewer-toolbar .vt-actions .btn { flex: 1 1 0; }
}

/* ------------------------------------------------------------------ */
/* File-viewer body containers (PDF embed, TIF strips, etc.)          */
/* ------------------------------------------------------------------ */
.doc-frame {
  width: 100%; height: 85vh; min-height: 480px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
}
.strip-stack {
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
  padding: 0; text-align: center; overflow: hidden;
}
.strip-stack img {
  max-width: 100%; height: auto; display: block; margin: 0 auto;
  background: var(--panel);
}
.viewer-controls {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.65rem;
  align-items: center;
  margin: 0 0 0.7rem;
  font-size: 0.84rem; color: var(--muted);
}
.viewer-controls strong { color: var(--text); font-weight: 600; }
.viewer-controls .seg-label { margin: 0; }
/* Inline LAS/TXT preview — scrollable, monospace, preserves whitespace. */
.text-view {
  max-height: 85vh; overflow: auto;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
  padding: 0.8rem 1rem; margin: 0;
  font-family: var(--mono, ui-monospace, monospace); font-size: 0.8rem;
  line-height: 1.45; white-space: pre; tab-size: 4;
}
.zip-row-actions { white-space: nowrap; font-size: 0.85rem; }
/* LAS well-log track viewer — server-rendered matplotlib PNG */
.las-plot-img {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
}
@media (max-width: 760px) {
  .doc-frame { height: 70vh; min-height: 360px; }
  .text-view { max-height: 70vh; }
}

/* ------------------------------------------------------------------ */
/* KV definition list — collapse to single column on mobile           */
/* ------------------------------------------------------------------ */
@media (max-width: 560px) {
  .kv {
    grid-template-columns: 1fr;
    gap: 0.05rem 0;
  }
  .kv dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
           margin-top: 0.5rem; }
  .kv dt:first-of-type { margin-top: 0; }
  .kv dd { font-size: 0.95rem; word-break: break-word; }
}

/* Help long mono values wrap on narrow screens (doc_ids, filenames) */
.kv .mono, .grid .mono { overflow-wrap: anywhere; word-break: break-word; }

/* ------------------------------------------------------------------ */
/* File report table — wide grid with per-column header filters       */
/* ------------------------------------------------------------------ */
.file-report-toolbar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0 0 0.5rem; font-size: 0.85rem;
}
.file-report-toolbar .file-counter { color: var(--muted); }
.file-report-toolbar .file-counter b { color: var(--text); font-variant-numeric: tabular-nums; }
.file-report { font-size: 0.86rem; }
.file-report th { white-space: nowrap; }
.file-report .filter-row th {
  padding: 0.2rem 0.4rem; background: #f7f9fc;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  position: sticky; top: 1.65rem; z-index: 1;
  border-bottom: 1px solid var(--border);
}
.file-report .filter-row input,
.file-report .filter-row select {
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 0.18rem 0.35rem; font-size: 0.78rem;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--panel); color: var(--text);
}
.file-report .filter-row input:focus,
.file-report .filter-row select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(31,111,235,0.18);
}
.file-report .filter-row input::placeholder { color: #9aa3b2; }

/* Range-cell column header — TLI/BLI need TWO inputs (min/max) side by side
   without breaking the table-cell layout. The flex lives on an INNER div so
   the <th> keeps its native `display: table-cell`, which is what makes the
   column width align with the header above and the data cells below. */
.file-report .filter-row th.range-cell {
  padding: 0.2rem 0.3rem;            /* tighter than other filter cells */
}
.file-report .filter-row th.range-cell .range-inputs {
  display: flex; gap: 0.18rem; width: 100%;
}
.file-report .filter-row th.range-cell .range-inputs input {
  flex: 1 1 0; min-width: 0; width: 100%;
  -moz-appearance: textfield;        /* drop FF spinner */
}
.file-report .filter-row th.range-cell .range-inputs input::-webkit-outer-spin-button,
.file-report .filter-row th.range-cell .range-inputs input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
/* Give the TLI/BLI columns enough horizontal space for the two narrow
   inputs without forcing the data cells to wrap. 110px = ~50px per input
   + gap + padding. */
.file-report th:nth-child(11),
.file-report th:nth-child(12),
.file-report td:nth-child(11),
.file-report td:nth-child(12) { min-width: 110px; }

.file-report-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.file-report-wrap .file-report { min-width: 1500px; }

/* ZIP entries table: allow path wrapping on small screens (overrides the
   global .grid nowrap — long archive paths would force absurd table widths) */
.zip-entries .grid td:first-child { white-space: normal; word-break: break-all; max-width: 28rem; }
@media (max-width: 560px) {
  .zip-entries .grid td:first-child { max-width: 100%; }
}

/* ------------------------------------------------------------------ */
/* Status pill with semantic colors (PA, ACT, etc.)                   */
/* ------------------------------------------------------------------ */
.status-pill {
  display: inline-block; padding: 0.1rem 0.55rem; border-radius: 12px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase;
}
.status-pill.act  { background: #d1fae5; color: #065f46; }
.status-pill.warn { background: #fee2e2; color: #991b1b; }
.status-pill.cool { background: #dbeafe; color: #1e3a8a; }
.status-pill.gray { background: var(--surface-3); color: #4b5563; }

/* --- Admin · Operations command catalog + log tail ---------------------- */
.cmd-list { display: flex; flex-direction: column; gap: 0.6rem; }
.cmd {
  border: 1px solid #e3e6eb; border-left: 3px solid var(--ok);
  border-radius: 6px; padding: 0.6rem 0.8rem; background: #fbfcfd;
}
.cmd.danger { border-left-color: var(--warn); }
.cmd-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.cmd-label { font-weight: 600; font-size: 0.9rem; }
.cmd-head .cmd-copy { margin-left: auto; }
.cmd-copy.ok { color: var(--ok); border-color: var(--ok); }
.cmd-text {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84rem; background: #0d1117; color: #e6edf3;
  padding: 0.45rem 0.65rem; border-radius: 4px; overflow-x: auto; white-space: pre;
}
.cmd-note { font-size: 0.8rem; margin-top: 0.35rem; }
.log-tail {
  max-height: 420px; overflow: auto; background: #0d1117; color: #e6edf3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem; line-height: 1.45; padding: 0.7rem 0.9rem; border-radius: 6px;
  margin: 0;
}


/* ===================== Dark-mode component overrides ===================== */
/* Semantic-colored bits (pastel bg + dark text) that can't be pure-tokenized:
   give them translucent tints + light text so they read on dark surfaces. */
:root[data-theme="dark"] .badge            { background: var(--surface-3); color: #c3ccda; }
:root[data-theme="dark"] .badge.federal    { background: rgba(96,165,250,.16);  color: #bcd4ff; }
:root[data-theme="dark"] .badge.state      { background: rgba(251,191,36,.16);  color: #f3d68f; }
:root[data-theme="dark"] .badge.ok         { background: rgba(45,212,167,.16);  color: #9eead2; }
:root[data-theme="dark"] .badge.warn       { background: rgba(248,130,98,.18);  color: #f7b6a6; }
:root[data-theme="dark"] .scale-badge      { background: rgba(91,139,255,.18);  color: #c2d3ff; }
:root[data-theme="dark"] .reclass-tag      { background: rgba(251,191,36,.16);  color: #f3d68f; }
:root[data-theme="dark"] .chip             { background: var(--accent-tint); color: #cdddff;
                                             border-color: var(--accent-tint-border); }
:root[data-theme="dark"] .chip .x          { color: #93a0b5; }
:root[data-theme="dark"] .tools            { color: var(--text); }
:root[data-theme="dark"] .tools button     { color: #fff; }
:root[data-theme="dark"] .grid tbody tr.row-hi        { background: rgba(45,212,167,.12); }
:root[data-theme="dark"] .grid tbody tr.row-hi:hover  { background: rgba(45,212,167,.18); }
:root[data-theme="dark"] .quick:hover      { color: #fff; }
/* Plotly draws on a transparent paper; give charts a hair more contrast. */
:root[data-theme="dark"] .js-plotly-plot .bg { fill: transparent; }

/* ===================== Commercial UI (auth / pricing / account) ========== */
.auth-wrap { display: flex; justify-content: center; padding: 2.5rem 0; }
.auth-card { width: 100%; max-width: 420px; }
.auth-title { margin: 0 0 .2rem; font-size: 1.4rem; letter-spacing: -.01em; }
.auth-form { display: flex; flex-direction: column; gap: .8rem; margin: 1rem 0 .6rem; }
.auth-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--muted); }
.auth-form input { padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--panel); color: var(--text); font-size: .95rem; }
.auth-form input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.auth-alt { font-size: .88rem; margin: .3rem 0 0; }
.auth-error { background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn);
  padding: .6rem .8rem; border-radius: var(--r-sm); font-size: .88rem; max-width: 420px; margin: .2rem 0 .8rem; }
.upgrade-ok { background: color-mix(in srgb, var(--ok) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok);
  padding: .7rem .9rem; border-radius: var(--r-sm); margin-bottom: 1rem; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.price-card { position: relative; display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--accent); box-shadow: var(--shadow-md); }
.price-card.is-current { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.price-tag { position: absolute; top: -.7rem; right: 1rem; background: var(--accent); color: var(--on-accent);
  font-size: .7rem; font-weight: 700; padding: .2rem .6rem; border-radius: var(--pill);
  text-transform: uppercase; letter-spacing: .04em; }
.price-name { margin: .2rem 0; font-size: 1.1rem; }
.price-amt { display: flex; align-items: baseline; gap: .2rem; }
.price-num { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.price-per { color: var(--muted); font-size: .9rem; }
.price-blurb { margin: .3rem 0 .8rem; font-size: .88rem; }
.price-feats { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column;
  gap: .4rem; flex: 1; }
.price-feats li { font-size: .9rem; padding-left: 1.3rem; position: relative; }
.price-feats li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.price-cta { margin-top: auto; }

/* Account */
.acct-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.acct-email { font-size: 1.1rem; font-weight: 650; }
.acct-actions { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.ent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; }
.ent { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: .9rem; background: var(--surface-2); }
.ent-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.ent.on { color: var(--text); } .ent.on .ent-dot { background: var(--ok); }
.ent.off { color: var(--muted); }

/* Appbar account menu */
.acct-menu { position: relative; }
.acct-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem; }
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; }
.acct-plan-chip { font-size: .72rem; color: var(--muted); }
.acct-pop { position: absolute; right: 0; top: 2.6rem; min-width: 210px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: .4rem; z-index: 50; display: flex; flex-direction: column; }
.acct-pop-email { font-size: .8rem; color: var(--muted); padding: .4rem .6rem;
  border-bottom: 1px solid var(--border); margin-bottom: .3rem; word-break: break-all; }
.acct-pop a { padding: .5rem .6rem; border-radius: var(--r-sm); color: var(--text); font-size: .9rem;
  text-decoration: none; }
.acct-pop a:hover { background: var(--surface-3); text-decoration: none; }
.appbar-signin, .appbar-signup { white-space: nowrap; }
@media (max-width: 560px) { .appbar-signin { display: none; } }

/* Account — change-password form */
.pw-form { display: flex; flex-direction: column; gap: .7rem; max-width: 380px; }
.pw-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--muted); }
.pw-form input { padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--panel); color: var(--text); font-size: .92rem; }
.pw-form input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.pw-form button { align-self: flex-start; }

/* Sidebar collapse control (desktop) */
.side-collapse { display: flex; align-items: center; gap: .7rem; margin: .2rem .6rem .4rem;
  padding: .5rem .7rem; border: 0; background: transparent; color: var(--sidebar-mut);
  cursor: pointer; border-radius: var(--r-sm); font-size: .85rem; font-weight: 500;
  width: calc(100% - 1.2rem); }
.side-collapse:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-collapse-ic { width: 18px; height: 18px; flex: 0 0 18px; transition: transform .18s; }
.nav-collapsed .side-collapse { justify-content: center; width: auto; }
.nav-collapsed .side-collapse-ic { transform: rotate(180deg); }
@media (max-width: 860px) { .side-collapse { display: none; } }

/* ===================== Admin console ===================================== */
.section-nav a.active {
  color: var(--accent); border-color: var(--accent);
  background: var(--accent-tint); font-weight: 600;
}
.notice {
  display: block; padding: .7rem .9rem; border-radius: var(--r-sm);
  margin: 0 0 1rem; font-size: .9rem;
  background: var(--surface-2); border: 1px solid var(--border);
}
.notice.warn {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn);
}
.notice.ok {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}
.credentials-box .cred-line { margin-top: .45rem; }
.credentials-box .lbl {
  display: inline-block; min-width: 8.5rem; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.credentials-box code {
  background: var(--code-bg); padding: 2px 8px; border-radius: 4px;
  font-size: .95rem; user-select: all;
}
.admin-actions { display: flex; flex-direction: column; gap: .7rem; }
.admin-actions .lbl { font-size: .8rem; color: var(--muted); min-width: 2.6rem; }
.inline-form button.danger, .btn.danger {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
}
.inline-form button.danger:hover, .btn.danger:hover {
  background: color-mix(in srgb, var(--warn) 22%, transparent); filter: none;
}
.inline-form button[disabled] { opacity: .45; cursor: not-allowed; }