:root {
--navy: #0d1117; --navy-2: #161b22; --ink: #e6edf3; --body: #c2ccd6;
--muted: #8b949e; --line: #2a3138; --bg: #0f1318; --card: #171c22;
--surface: #171c22; --surface-2: #1d232b; --surface-hover: #232a33; --code-bg: #1d232b;
--accent: #90CF8E; --accent-ink: #A7DCA5; --accent-soft: #16281a;
--good: #7ee2a8; --good-soft: #14301f; --danger: #ff9a8f; --danger-soft: #3a1a16;
--radius: 12px; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
--scroll-thumb: #39424d; --scroll-thumb-hover: #4a5563;
--border-hover: #3d4650; --placeholder: #6e7885;
--warn: #f0c66b; --warn-soft: #35290f;
--on-accent: #0a1220;
/* The sign-in card is `--navy` — a deliberately DARK card on a light page, and the right design
   there. On a dark page it is #0d1117 sitting on a #0f1318 background: two colours nobody can tell
   apart, so the card stopped existing and the form floated in space. It lifts to the ordinary card
   surface here, and only here; light themes never define this and keep the navy card. */
--auth-card: #171c22;
/* Tells the BROWSER the page is dark, which our variables cannot: the native date-picker glyph,
   <select> popup lists, autofill highlight and scrollbar corners are drawn by the platform and
   were still light. One line, and it is the difference between a themed page and a themed page
   with a light calendar icon in the middle of it. */
color-scheme: dark;
--danger-hover: #d9776b; --btn-shadow: 0 1px 2px rgba(0,0,0,.45);
--secondary-shadow: 0 1px 2px rgba(0,0,0,.35);
--z-sticky: 10; --z-nudge: 20; --z-dropdown: 30; --z-lifted: 40;
--z-shell: 50; --z-shell-nav: 54; --z-banner: 60; --z-shell-pop: 65;
--z-modal: 70; --z-modal-top: 71; --z-modal-over: 72;
--z-tour: 80; --z-toast: 90;
--fab-clear: 84px; --bar-clear: 0px;
}
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--body);
       background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased;
       text-rendering: optimizeLegibility; }
h1 { font-size: 23px; font-weight: 750; } h2 { font-size: 18px; font-weight: 700; } h3 { font-size: 15.5px; font-weight: 650; }
h1, h2, h3 { color: var(--ink); line-height: 1.25; letter-spacing: -.015em; }
a { color: var(--accent-ink); text-decoration: none; } a:hover { text-decoration: underline; }
code { background: var(--code-bg); color: var(--ink); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }
.muted { color: var(--muted); }
::selection { background: var(--accent-soft); }

/* Every collapsible card across the app is a <summary> inside a <details> — without this, tapping
   one to expand it flashes the browser's own default tap-highlight/focus overlay (often a plain
   gray or the platform's own accent), which reads as "the card's background changed to something
   wrong" since it briefly overrides whatever themed background the card actually has. */
summary { -webkit-tap-highlight-color: transparent; }
summary:focus, summary:focus-visible { outline: none; }

/* Scrollbars (WebKit/Blink) — slim, rounded, unobtrusive. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb, #ccd2dd); border-radius: 999px;
                            border: 2.5px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover, #b4bccb); border: 2.5px solid transparent; background-clip: padding-box; }

/* Buttons. --control-radius/--control-shadow only exist for a "sharp" custom theme (see AppTheme.cs)
   — everyone else falls back to exactly today's fixed values, so this is a no-op elsewhere. */
button, .btn, input[type=submit] {
  font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border: 1px solid transparent; border-radius: var(--control-radius, 9px);
  background: var(--accent); color: var(--on-accent, #fff); font-weight: 600; font-size: 14px; cursor: pointer;
  box-shadow: var(--control-shadow, var(--btn-shadow, 0 1px 2px rgba(16,24,40,.10)), inset 0 1px 0 rgba(255,255,255,.12));
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .04s ease; }
/* HOVER IS A POINTER'S IDEA, AND A FINGER CANNOT UN-HAVE IT. On a touch screen the browser leaves
   :hover latched on whatever was tapped last, so this rule — the only global one that REPAINTS a
   button rather than nudging it — stops being a transient emphasis and becomes the button's
   permanent appearance. It reached the shell's nav group header that way (a chrome button styled
   `background: none`, which this out-specifies at 0,1,1 against 0,1,0) and left an expanded group
   title sitting on --accent-ink at 1.02:1 for the rest of the session. That header now states its
   own hover background, but the general fault is this rule, not that button: every unstyled button
   anywhere in the app is one tap away from wearing the accent for good.
   `(hover: hover)` asks about the primary INPUT DEVICE, not the window — a touch laptop still gets
   hover, a narrow desktop window still gets hover, a phone and a tablet get none. The class-scoped
   hovers below (.secondary/.ghost/.danger) are left outside the guard on purpose: each repaints a
   control that already declared that same background family, so a latched one is the button looking
   slightly warmer, never the button becoming something else. */
@media (hover: hover) {
  button:hover, .btn:hover { background: var(--accent-ink); text-decoration: none; }
}
button:active, .btn:active { transform: translateY(1px); box-shadow: var(--secondary-shadow, 0 1px 2px rgba(16,24,40,.08)); }
button:focus-visible, .btn:focus-visible, input[type=submit]:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
button:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
button.secondary, .btn.secondary, button.ghost, .btn.ghost {
  background: var(--surface); color: var(--ink); border-color: var(--line);
  box-shadow: var(--secondary-shadow, 0 1px 2px rgba(16,24,40,.05)); }
button.secondary:hover, .btn.ghost:hover { background: var(--surface-hover); border-color: var(--border-hover, #cfd4df); }
/* --on-accent, not #fff. In dark, --danger is a pale salmon meant to be a FOREGROUND colour;
   white on it is 2.04:1. Nothing hits this today — every .danger on every screen is overridden by
   a page rule — but it fires the moment somebody uses the bare class, which is exactly the kind of
   trap that gets shipped. */
button.danger, .btn.danger { background: var(--danger); color: var(--on-accent, #fff); }
button.danger:hover { background: var(--danger-hover, #94170f); }

/* Inputs */
input, select, textarea {
  font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--control-radius, 9px);
  background: var(--surface); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease; }
input::placeholder, textarea::placeholder { color: var(--placeholder, #9aa3b5); }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--border-hover, #cfd4df); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Cards / surfaces */
.card, .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
                box-shadow: var(--shadow); }

/* Tables */
table { border-collapse: collapse; width: 100%; background: var(--surface); border-radius: var(--radius); overflow: hidden;
        box-shadow: var(--shadow); }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { background: var(--surface-2); color: var(--muted); font-weight: 650; font-size: 11.5px;
     text-transform: uppercase; letter-spacing: .05em; }
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }

/* Badges */
.badge { display: inline-block; background: var(--accent-soft); color: var(--accent-ink);
         border-radius: var(--control-radius, 999px); padding: 2px 10px; font-size: 12px; font-weight: 600;
         letter-spacing: .01em; white-space: nowrap; }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.warn { background: var(--warn-soft, #fef3c7); color: var(--warn, #92400e); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }