/* Shared colors and components for the student portal. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --t-bg: #f6f7f3;
  --t-bg2: #ffffff;
  --t-bg3: #e9ede5;
  --t-fg: #202622;
  --t-fg2: #657062;
  --t-fg3: #657062;
  --t-ac: #f75383;
  --t-ac-ink: #ffffff;
  --t-ac2: #e03d6c;
  --t-ac3: #e03d6c;
  --t-bd: #dce2d8;
  --t-bda: #c5cfc0;
  --t-gl: transparent;
  --t-gls: #fdeef3;
  --t-gr: #f75383;
  --t-bgr: none;
  --t-radius: 10px;
  --t-radius-sm: 7px;
  --t-motion: 0.14s;
  --t-display: 'DM Sans', system-ui, -apple-system, sans-serif;
  --t-font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --sheet-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ink-shadow: none;
  --mobile-dock-space: 0px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --t-bg: #17191b;
    --t-bg2: #222527;
    --t-bg3: #2b2f31;
    --t-fg: #f4f5f1;
    --t-fg2: #a6adaf;
    --t-fg3: #828b8c;
    --t-ac: #ff6f99;
    --t-ac-ink: #ffffff;
    --t-ac2: #ff8bad;
    --t-ac3: #ff8bad;
    --t-bd: #363a3c;
    --t-bda: #4b5355;
    --t-gls: #332127;
    --t-gr: #ff6f99;
  }
}

/* Manual light/dark override (site-theme.js sets data-theme from the
   "theme" cookie via the preferences page's Theme Preset). Both blocks sit
   outside the media query and key off an attribute selector so they outrank
   the query regardless of actual OS preference or source order. */
:root[data-theme="light"] {
  --t-bg: #f6f7f3;
  --t-bg2: #ffffff;
  --t-bg3: #e9ede5;
  --t-fg: #202622;
  --t-fg2: #657062;
  --t-fg3: #657062;
  --t-ac: #f75383;
  --t-ac-ink: #ffffff;
  --t-ac2: #e03d6c;
  --t-ac3: #e03d6c;
  --t-bd: #dce2d8;
  --t-bda: #c5cfc0;
  --t-gl: transparent;
  --t-gls: #fdeef3;
  --t-gr: #f75383;
}
:root[data-theme="dark"] {
  --t-bg: #17191b;
  --t-bg2: #222527;
  --t-bg3: #2b2f31;
  --t-fg: #f4f5f1;
  --t-fg2: #a6adaf;
  --t-fg3: #828b8c;
  --t-ac: #ff6f99;
  --t-ac-ink: #ffffff;
  --t-ac2: #ff8bad;
  --t-ac3: #ff8bad;
  --t-bd: #363a3c;
  --t-bda: #4b5355;
  --t-gls: #332127;
  --t-gr: #ff6f99;
}

/* High contrast mode (Preferences → Appearance, or OS "increase contrast").
   Darkens/lightens text and borders well past the normal palette and swaps
   the accent for a more AA-compliant shade; background tokens are left
   alone since text/border contrast is what actually hurts readability. */
:root[data-contrast="high"] {
  --t-fg: #000000;
  --t-fg2: #1a1a1a;
  --t-fg3: #000000;
  --t-bd: #3d3d42;
  --t-bda: #19191c;
  --t-ac: #c81855;
  --t-ac2: #a10f43;
  --t-ac3: #a10f43;
}
@media (prefers-contrast: more) {
  :root {
    --t-fg: #000000;
    --t-fg2: #1a1a1a;
    --t-fg3: #000000;
    --t-bd: #3d3d42;
    --t-bda: #19191c;
    --t-ac: #c81855;
    --t-ac2: #a10f43;
    --t-ac3: #a10f43;
  }
}
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"] {
    --t-fg: #f6f7f3;
    --t-fg2: #f0f0f0;
    --t-fg3: #f6f7f3;
    --t-bd: #9a9aa0;
    --t-bda: #c7c7cc;
    --t-ac: #ffb3c9;
    --t-ac2: #ffd1df;
    --t-ac3: #ffd1df;
  }
  @media (prefers-contrast: more) {
    :root {
      --t-fg: #f6f7f3;
      --t-fg2: #f0f0f0;
      --t-fg3: #f6f7f3;
      --t-bd: #9a9aa0;
      --t-bda: #c7c7cc;
      --t-ac: #ffb3c9;
      --t-ac2: #ffd1df;
      --t-ac3: #ffd1df;
    }
  }
}
:root[data-theme="light"][data-contrast="high"] {
  --t-fg: #000000;
  --t-fg2: #1a1a1a;
  --t-fg3: #000000;
  --t-bd: #3d3d42;
  --t-bda: #19191c;
  --t-ac: #c81855;
  --t-ac2: #a10f43;
  --t-ac3: #a10f43;
}
:root[data-theme="dark"][data-contrast="high"] {
  --t-fg: #f6f7f3;
  --t-fg2: #f0f0f0;
  --t-fg3: #f6f7f3;
  --t-bd: #9a9aa0;
  --t-bda: #c7c7cc;
  --t-ac: #ffb3c9;
  --t-ac2: #ffd1df;
  --t-ac3: #ffd1df;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  min-height: 100dvh;
  background: var(--t-bg);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color: var(--t-fg);
  background-color: var(--t-bg);
  font-family: var(--t-font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.encrypt-page, body.cellar-page { padding-bottom: 0 !important; }

input, textarea { scroll-margin-bottom: max(80px, env(safe-area-inset-bottom, 0px)); }
img, svg, video, canvas { max-width: 100%; display: block; }

a { color: var(--t-ac); text-decoration: none; transition: color var(--t-motion) ease; }
a:hover { color: var(--t-ac2); }

h1, h2, h3, h4, h5, h6 { font-family: var(--t-font); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; color: var(--t-fg); }

* { scrollbar-width: thin; scrollbar-color: var(--t-bda) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--t-bda); border-radius: 999px; }
::selection { background: var(--t-gls); color: var(--t-fg); }

/* --------------------------------------------------------------------------
   Shared masthead — app-shell.js builds #app-topbar (classes "app-topbar
   unified-masthead") on every page that doesn't already have its own
   (index.html's .home-masthead opts out). One definition, used everywhere.
   -------------------------------------------------------------------------- */

.app-topbar, #app-topbar {
  position: sticky;
  /* body's own padding-top only covers this bar's initial, unstuck
     position - once sticky kicks in on scroll it re-anchors to 0 from the
     viewport, which on an installed iPhone PWA sits right under the
     Dynamic Island. Keep the same clearance once stuck. */
  top: env(safe-area-inset-top, 0px);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.6rem;
  width: 100%;
  margin: 0;
  padding: 0 clamp(0.85rem, 2.5vw, 2rem);
  border: 0;
  border-bottom: 1px solid var(--t-bd);
  background: color-mix(in srgb, var(--t-bg) 92%, transparent);
  backdrop-filter: none;
}
.app-topbar::before { content: none; }
.app-brand, .app-shell #app-topbar .app-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: fit-content;
  font-family: var(--t-font);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--t-fg);
  white-space: nowrap;
}
.app-brand span { color: var(--t-fg2); font-weight: 500; }
.app-brand::before { content: none; }
.brand-monogram {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 32px; height: 32px;
  background: var(--t-ac); color: var(--t-ac-ink);
  font: 700 17px/1 var(--t-font); letter-spacing: -0.04em;
  border-radius: 8px;
}
.site-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 7px; flex-shrink: 0; }

.app-nav { display: flex; align-self: stretch; align-items: stretch; flex: 1; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.app-nav::-webkit-scrollbar { display: none; }
.app-nav a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 3.6rem; flex-shrink: 0;
  color: var(--t-fg2); font-size: 0.86rem; font-weight: 600;
  white-space: nowrap;
  transition: color var(--t-motion);
}
.app-nav a:hover { color: var(--t-fg); }
.app-nav a[aria-current="page"] { color: var(--t-fg); }
.app-nav a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--t-ac); }
.nav-pill-free { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--t-ac) 55%, var(--t-bd)); border-radius: 999px; color: var(--t-ac); font-size: 9px; font-weight: 800; letter-spacing: 0.06em; vertical-align: middle; }

.app-account-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; min-width: fit-content;
  color: var(--t-fg); background: var(--t-bg2); border: 1px solid var(--t-bd); border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  transition: border-color var(--t-motion), background-color var(--t-motion);
}
.app-account-link:hover { background: var(--t-bg3); border-color: var(--t-fg3); }
.app-account-link svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; }

/* Shared top-of-page content container */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; position: relative; }
.app-main, main.shell, .legal-shell, .prefs-shell, .enroll-shell, .vms-container, .portal-shell {
  width: min(1180px, calc(100% - 56px));
  max-width: 1180px;
  margin-inline: auto;
  padding-top: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: 4.5rem;
}
.page-head, .page-header { margin: 0 0 2rem; padding: 0 0 1.6rem; border-bottom: 1px solid var(--t-bd); }
.page-head::before, .page-header::before { content: none; }
.page-head h1, .page-header h1 { margin: 0 0 0.7rem; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.035em; color: var(--t-fg); }
.page-head p, .page-header p, .page-sub, .subline, .subtitle { margin: 0; max-width: 60ch; color: var(--t-fg2); font-size: 0.95rem; line-height: 1.6; }
.eyebrow, .kicker, .section-label, .section-index { color: var(--t-ac); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }

.app-footer, #_agree_footer {
  margin-top: auto;
  max-width: 760px;
  margin-inline: auto;
  padding: 1.5rem clamp(0.85rem, 2.5vw, 1.75rem) 1.75rem;
  border-top: 1px solid var(--t-bd);
  color: var(--t-fg3);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
}
#_agree_footer a { color: inherit; text-decoration: underline; }
#_agree_footer a:hover { color: var(--t-ac); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn, .btn-primary, .btn-ghost,
:where(button:not([id^="_"]):not(.msg-more):not(.msg-action):not(.hub-action)) {
  appearance: none;
  align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--t-radius-sm);
  border: 1px solid var(--t-bd);
  background: var(--t-bg);
  color: var(--t-fg);
  font-family: inherit; font-size: 0.88rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; user-select: none;
  transition: background-color var(--t-motion) ease, border-color var(--t-motion) ease, color var(--t-motion) ease, transform 0.12s ease;
}
.btn:hover,
:where(button:not([id^="_"]):not(.msg-more):not(.msg-action):not(.hub-action)):hover { background: var(--t-bg2); border-color: var(--t-fg3); }
.btn:active, .btn-primary:active, .btn-ghost:active { transform: scale(0.97); }
.btn-primary, .btn.primary, button.primary, button[type="submit"].primary {
  background: var(--t-ac); color: var(--t-ac-ink); border-color: var(--t-ac); font-weight: 700;
}
.btn-primary:hover, .btn.primary:hover, button.primary:hover { background: var(--t-ac2); border-color: var(--t-ac2); }
.btn-ghost, .back-btn, .btn-secondary { background: transparent; color: var(--t-fg2); border-color: var(--t-bd); }
.btn-ghost:hover, .back-btn:hover, .btn-secondary:hover { color: var(--t-fg); background: var(--t-bg2); }
.btn, .btn-primary, .btn-ghost { display: inline-flex; }
.btn:disabled, .btn-primary:disabled, .btn-ghost:disabled, button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.chip, .pill, .tab-btn, .filter-btn { color: var(--t-fg2); border: 1px solid var(--t-bd); background: transparent; border-radius: 999px; }
.chip.active, .tab-btn.active, .filter-btn.active { color: var(--t-fg); background: var(--t-bg3); border-color: var(--t-ac); }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 2147483647; padding: 12px 20px; background: var(--t-ac); color: var(--t-ac-ink); border-radius: 6px; }
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

label, .field-label { display: block; margin-bottom: 0.35rem; color: var(--t-fg2); font-size: 0.8rem; font-weight: 600; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select), .field-input {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--t-bd);
  border-radius: var(--t-radius-sm);
  background: var(--t-bg);
  color: var(--t-fg);
  font-family: inherit; font-size: 0.92rem;
  transition: border-color var(--t-motion) ease, box-shadow var(--t-motion) ease;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, textarea:focus, select:focus, .field-input:focus { outline: none; border-color: var(--t-ac); box-shadow: 0 0 0 3px var(--t-gls); }
input::placeholder, textarea::placeholder { color: var(--t-fg3); }
input:is([type=checkbox], [type=radio], [type=range]) { accent-color: var(--t-ac); }
.field { margin-bottom: 1rem; }
.field-hint { margin-top: 0.35rem; color: var(--t-fg2); font-size: 0.75rem; }

/* --------------------------------------------------------------------------
   Panels, cards, and every synonym this codebase has accumulated for them
   -------------------------------------------------------------------------- */

.panel, .card, .cpanel, .glass-card, .pref-section, .stat-card, .mod-card,
.rj-card, .action-card, .listing-item, .item-card, .member-card, .friend-card,
.notif-card, .plan-card, .profile-card, .balance-card, .rank-overview,
.box, .widget, .section-card, .form-card, .admin-card, .shop-card,
.market-card, .game-card, .modal-card, .content-panel, .glass-panel,
.blog-panel, .request-item, .feed-entry, .loading-card, .category-group {
  color: var(--t-fg);
  background: var(--t-bg2);
  border: 1px solid var(--t-bd);
  border-radius: var(--t-radius);
  padding: clamp(18px, 2.4vw, 28px);
  min-width: 0;
}
.panel::before, .card::before, .action-card::before, .listing-item::before, .category-group::before { content: none; }
.panel-title, .section-title, .panel h2, .card h2 { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.panel-desc { margin: 0 0 0.85rem; color: var(--t-fg2); font-size: 0.85rem; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.empty, .empty-state { padding: 2rem 1.25rem; text-align: center; color: var(--t-fg2); line-height: 1.7; }
@media (hover: hover) {
  :is(.member-card, .friend-card, .game-card, .listing-item, .category-link, .hub-action):hover { border-color: var(--t-ac); transform: translateY(-2px); }
}

/* --------------------------------------------------------------------------
   Tables, badges, tabs
   -------------------------------------------------------------------------- */

table, .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--t-bd); text-align: left; }
th { color: var(--t-fg2); background: var(--t-bg2); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
tbody tr:hover { background: var(--t-bg2); }
.table-wrap, .table-container { overflow-x: auto; }
.badge, .tag, .role-tag, .status, .role, .label { border-radius: 5px; }
pre, code, .code, .terminal, .log, .console { border: 1px solid var(--t-bd); border-radius: var(--t-radius-sm); color: var(--t-fg); background: var(--t-bg); }
.price, .listing-price, .balance-value, .accent, .highlight, .rank-position, .stat-value, .stat-number { color: var(--t-ac); font-variant-numeric: tabular-nums; }
.avatar, .member-avatar, .profile-avatar { border: 1px solid var(--t-bd); }

/* --------------------------------------------------------------------------
   Generic page archetypes (auth hero, legal/faq content, profile, prefs,
   games/library grid, admin/moderator panels) — real layout rules carried
   over from portal-redesign.css, retargeted at this page's own palette.
   -------------------------------------------------------------------------- */

:is(.legal-shell, .enroll-shell, .faq-shell) { max-width: 1040px; }
:is(.legal-content, .faq-content, .faq-section) { color: var(--t-fg2); line-height: 1.85; }
:is(.legal-content, .faq-section) h2 { padding-top: 24px; color: var(--t-fg); }
:is(.legal-nav, .faq-nav, .pref-nav, .prefs-nav) { background: transparent; border-color: var(--t-bd); }
:is(.enroll-hero, .claim-hero, .auth-hero, .story) { background: none; border: 0; }
:is(.enroll-hero, .claim-hero, .auth-hero, .story) h1 { color: var(--t-fg); font-size: clamp(2.6rem, 5vw, 4.8rem); line-height: 1.04; background: none; -webkit-text-fill-color: currentColor; }
:is(.enroll-hero, .claim-hero) h1 em { font-weight: 400; color: var(--t-ac); }
:is(.enroll-page, .auth-claim-page) :is(.enroll-main, .claim-layout) { width: min(1140px, calc(100% - 64px)); margin: 64px auto; gap: clamp(32px, 7vw, 100px); }
:is(.auth-panel, .claim-card, .appeal-panel, .form-panel) { padding: clamp(26px, 4vw, 44px); background: var(--t-bg2); border: 1px solid var(--t-bd); border-radius: var(--t-radius); }
.auth-tab-btn.active, .tab.active { color: var(--t-fg); border-color: var(--t-ac); background: var(--t-bg3); }

.profile-page { padding: 0 0 60px; }
.profile-page > .wrap { width: min(700px, calc(100% - 36px)); max-width: 700px; margin: 48px auto; padding: 36px; background: var(--t-bg2); border: 1px solid var(--t-bd); border-radius: var(--t-radius); }

.prefs-page .page-head h1::before { content: none; }
.prefs-page .pref-stack { display: grid; grid-template-columns: 1fr; gap: 14px; }
.prefs-page .pref-section { padding: 22px 26px; border-radius: var(--t-radius); }
.prefs-page .pref-section h2 { font-size: 21px; letter-spacing: -0.02em; text-align: left; margin: 0; }
.prefs-jump-nav { top: 60px; background: var(--t-bg); }

.games-page .games-shell { width: min(1280px, calc(100% - 64px)); margin: auto; padding: 40px 0 80px; }
:is(.games-hero, .portal-hero) { position: relative; padding: 46px; border: 1px solid var(--t-bd); border-radius: var(--t-radius); background: var(--t-bg2); overflow: hidden; }
:is(.games-hero, .portal-hero)::before, :is(.games-hero, .portal-hero)::after { content: none; }
:is(.games-hero, .portal-hero) h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 0.98; font-weight: 700; letter-spacing: -0.045em; color: var(--t-fg); background: none; -webkit-text-fill-color: currentColor; }
.portal-hero h1 em { color: var(--t-ac); font-weight: 400; }
:is(.games-hero, .portal-hero) p { color: var(--t-fg2); max-width: 58ch; font-size: 15px; }
:is(.hero-console, .command-bar, .featured-panel) { background: var(--t-bg2); border: 1px solid var(--t-bd); }
:is(.feature-card, .cat-card, .library-card) { background: var(--t-bg2); border: 1px solid var(--t-bd); border-radius: var(--t-radius); transition: transform 0.18s ease, border-color 0.18s ease; }
:is(.feature-card, .cat-card, .library-card):hover { transform: translateY(-3px); border-color: var(--t-ac); }
.library-grid { gap: 24px; margin-top: 28px; }
.library-card { min-height: 260px; padding: 30px; background-image: none; }
.library-card::before, .library-card::after { content: none; }
.library-logo { background: var(--t-bg3); color: var(--t-ac); border: 1px solid var(--t-bd); border-radius: var(--t-radius-sm); }
.portal-topbar { display: none; }
.portal-note { color: var(--t-fg2); }
.hero-btn, .library-card .card-enter i { color: var(--t-ac-ink); background: var(--t-ac); border-radius: var(--t-radius-sm); }

:is(.admin-page, .moderator-page) :is(.topbar, .admin-dayboard, .staff-command-center, .staff-card, .staff-hero, .tool-group, .admin-day-card, .admin-panel, .mod-section, .admin-sidebar) {
  background: var(--t-bg2); color: var(--t-fg); border: 1px solid var(--t-bd); border-radius: var(--t-radius-sm);
}
:is(.admin-page, .moderator-page) :is(.tool-tabs, .admin-tabs, .filter-row) { background: var(--t-bg); border: 1px solid var(--t-bd); }
.admin-calendar-days span.today { color: var(--t-ac-ink); background: var(--t-ac); }
:is(.bell-day-board, .live-tracker, .schedule-card, .period-card, .lunch-selector, .vms-plan, .apply-section) { color: var(--t-fg); background: var(--t-bg2); border: 1px solid var(--t-bd); border-radius: var(--t-radius); }
:is(.live-tracker, .period-card.active) { border-left: 3px solid var(--t-ac); }

#mitch-cookie-banner { background: var(--t-bg2); color: var(--t-fg); border: 1px solid var(--t-bd); border-radius: var(--t-radius); }
.mitch-banner-text a { color: var(--t-ac); }
.mitch-banner-btn.accept { background: var(--t-ac); color: var(--t-ac-ink); }
.mitch-banner-btn.decline { color: var(--t-fg); border-color: var(--t-bd); }

/* --------------------------------------------------------------------------
   Shared service-worker notification bell + guest preview (any page) —
   previously community-refresh.css.
   -------------------------------------------------------------------------- */

#sw-notif-btn { min-width: 42px; height: 38px; border-radius: 999px; border: 1px solid var(--t-bd); background: var(--t-bg); color: var(--t-fg2); display: flex; align-items: center; justify-content: center; gap: 7px; position: relative; }
#sw-notif-btn:hover { color: var(--t-fg); background: var(--t-bg2); }
#sw-notif-btn svg { width: 20px; height: 20px; flex: none; }
#sw-notif-btn:has(#sw-notif-count:not([style*="none"])) { box-shadow: 0 0 0 3px var(--t-gls); }
#sw-notif-panel { background: var(--t-bg); border: 1px solid var(--t-bd); border-radius: var(--t-radius); max-height: min(620px, calc(100dvh - 90px)); }

.guest-clock { position: fixed; right: 16px; bottom: 16px; z-index: 9000; padding: 10px 15px; background: var(--t-bg2); color: var(--t-fg); border: 1px solid var(--t-bd); border-radius: 999px; font: 600 12px var(--t-font); }
.guest-signup { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); padding: 30px; border: 1px solid var(--t-bd); border-radius: var(--t-radius); background: var(--t-bg); color: var(--t-fg); font-family: inherit; }
.guest-signup::backdrop { background: rgba(10, 8, 14, 0.5); backdrop-filter: blur(6px); }
.guest-signup img { width: 48px; height: 48px; border-radius: 12px; }
.guest-signup h2 { font-size: 26px; letter-spacing: -0.03em; margin: 18px 0 10px; }
.guest-signup p { color: var(--t-fg2); line-height: 1.6; font-size: 14px; }
.guest-signup a { display: block; padding: 13px; text-align: center; margin-top: 12px; border-radius: var(--t-radius-sm); text-decoration: none; color: var(--t-fg); border: 1px solid var(--t-bd); }
.guest-signup a:first-of-type { background: var(--t-ac); color: var(--t-ac-ink); font-weight: 700; border-color: var(--t-ac); }
html.guest-preview .home-account-link, html.guest-preview .app-account-link, html.guest-preview #auth-warning { display: none; }

.owner-account-tools { padding: 20px; border: 1px solid var(--t-bd); border-radius: var(--t-radius); margin: 16px 0; background: var(--t-bg2); }
.owner-account-tools p { color: var(--t-fg2); font-size: 13px; line-height: 1.6; }
.owner-account-tools .owner-account-list { max-height: 300px; overflow: auto; margin: 12px 0; }
.owner-account-tools label { display: flex; align-items: center; gap: 10px; padding: 10px; overflow-wrap: anywhere; font-size: 13px; }
.owner-account-tools input[type=text], .owner-account-tools input[type=search] { width: 100%; padding: 11px; margin: 8px 0; }
.owner-account-tools [data-danger] { border: 1px solid #dc2626; }

body.enroll-page { background: var(--t-bg); }

/* --------------------------------------------------------------------------
   Mobile bottom dock (phones only) — app-shell.js builds the DOM; this is
   its only stylesheet now (previously mitch-ui.css).
   -------------------------------------------------------------------------- */

#mobile-dock { display: none; }
#mobile-menu { width: min(520px, calc(100% - 24px)); max-height: 85dvh; padding: 20px; color: var(--t-fg); background: var(--t-bg); border: 1px solid var(--t-bd); border-radius: var(--t-radius); }
#mobile-menu::backdrop { background: rgba(10, 8, 14, 0.55); backdrop-filter: blur(6px); }
#mobile-menu > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; }
#mobile-menu h2 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
#mobile-menu header button { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
#mobile-menu nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
#mobile-menu nav a { display: flex; align-items: center; min-height: 54px; padding: 14px; border: 1px solid var(--t-bd); border-radius: var(--t-radius-sm); background: var(--t-bg2); color: var(--t-fg); text-decoration: none; font-size: 14px; }
#mobile-menu nav a:hover { border-color: var(--t-ac); background: var(--t-gls); }

@media (max-width: 760px) {
  body { --mobile-dock-space: calc(76px + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--mobile-dock-space); }
  html:has(body.app-shell) { scroll-padding-top: 84px; }
  .app-topbar, #app-topbar { position: sticky; top: env(safe-area-inset-top, 0px); min-height: 3.2rem; padding: 0.5rem 1rem; gap: 10px; flex-wrap: nowrap; }
  .app-nav, .home-masthead-links { display: none !important; }
  .app-account-link { flex: 0 0 38px; width: 38px; min-height: 38px; display: grid; place-items: center; font-size: 0; padding: 0; }
  .app-account-link span { font-size: 22px; }
  #theme-btn, #sw-notif-btn { position: static; width: 38px; height: 38px; flex-shrink: 0; }
  #mobile-dock { position: fixed; z-index: 9000; bottom: max(10px, env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 5px; border: 1px solid var(--t-bd); border-radius: 21px; background: color-mix(in srgb, var(--t-bg) 95%, transparent); box-shadow: 0 8px 32px rgba(20, 16, 24, 0.12); backdrop-filter: blur(16px); }
  #mobile-dock :is(a, button) { min-width: 0; min-height: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; border: 0; border-radius: 16px; background: none; color: var(--t-fg2); padding: 4px 2px; text-decoration: none; font: 650 12px/1.2 var(--t-font); cursor: pointer; }
  #mobile-dock svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  #mobile-dock [aria-current] { color: var(--t-ac-ink); background: var(--t-ac); }
  body.mobile-keyboard #mobile-dock { display: none; }
  .app-main, main.shell, .legal-shell, .prefs-shell, .enroll-shell, .vms-container, .portal-shell { width: calc(100% - 28px); padding-top: 22px; }
  :is(.enroll-page, .auth-claim-page) :is(.enroll-main, .claim-layout) { width: calc(100% - 36px); grid-template-columns: 1fr; margin-block: 28px; }
  .games-page .games-shell { width: calc(100% - 36px); }
  :is(.games-hero, .portal-hero) { padding: 28px; }
  .library-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Readability layer — line-height, min tap targets, focus rings. Small,
   zero-specificity (:where), safe to apply everywhere.
   -------------------------------------------------------------------------- */

:where(p, li, dd, td, th, label, summary, blockquote) { line-height: 1.65; }
:where(h1, h2, h3) { line-height: 1.18; }
:where(button:not([id^="_"]), .btn, [role="button"]) { min-height: 38px; font-weight: 650; }
:where(th, td) { padding-block: 0.62rem; }
@media (max-width: 720px) {
  :where(button:not([id^="_"]), .btn) { min-height: 42px; }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@keyframes app-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.app-fade-in { animation: app-fade-in 0.45s ease both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   Responsive — general
   -------------------------------------------------------------------------- */

@media (max-width: 719px) {
  .page-head h1, .page-header h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .panel, .card { padding: 18px; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .app-main, main.shell { width: min(960px, 100%); }
}
@media (min-width: 761px) and (max-width: 1500px) and (max-height: 820px) {
  .app-topbar, #app-topbar { min-height: 52px; }
  .page-head h1, .page-header h1 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
}

:where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--t-ac); outline-offset: 3px; }
:where(main, .app-main, .panel, .card, .layout, .listing-item) { min-width: 0; }
:where(input, textarea, select) { min-width: 0; max-width: 100%; }
:where(.page-head, .page-header, .panel-actions) { flex-wrap: wrap; }

.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--t-ac); outline-offset: 3px; }

html[data-radius] :is(.panel, .card, .pref-section, .stat-card, .member-card, .friend-card, .modal-card) { border-radius: var(--t-radius); }
html[data-material="glass"] :is(.panel, .card, .pref-section, .app-topbar, .home-feature) { background-color: color-mix(in srgb, var(--t-bg2) 80%, transparent); backdrop-filter: blur(14px); }
.theme-no-motion *, .theme-no-motion *::before, .theme-no-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }

/* Purchased name colors, shared by friends and member surfaces. */
html body .name.neon_purple {color:#c291ff!important;}
html body .name.electric_blue {color:#72b5ff!important;}
html body .name.mint_flash {color:#81d9b0!important;}
html body .name.rose_spark {color:#f2a4bf!important;}
html body .name.ember_red {color:#f69689!important;}
html body .name.void_white {color:var(--t-fg)!important;}
html body .name.gold_glow {color:#e8c578!important;}
html body .name.rainbow_name {color:var(--t-ac);}
html.theme-light body .name.neon_purple, html[data-theme="light"] body .name.neon_purple {color:#7840b3!important}
html.theme-light body .name.electric_blue, html[data-theme="light"] body .name.electric_blue {color:#215dab!important}
html.theme-light body .name.mint_flash, html[data-theme="light"] body .name.mint_flash {color:#24734f!important}
html.theme-light body .name.rose_spark, html[data-theme="light"] body .name.rose_spark {color:#aa3f69!important}
html.theme-light body .name.ember_red, html[data-theme="light"] body .name.ember_red {color:#ae392f!important}
html.theme-light body .name.gold_glow, html[data-theme="light"] body .name.gold_glow {color:#856019!important}

@media (prefers-color-scheme:light) {
  html:not([data-theme="dark"]) body .name.neon_purple { color:#7840b3!important; }
  html:not([data-theme="dark"]) body .name.electric_blue { color:#215dab!important; }
  html:not([data-theme="dark"]) body .name.mint_flash { color:#24734f!important; }
  html:not([data-theme="dark"]) body .name.rose_spark { color:#aa3f69!important; }
  html:not([data-theme="dark"]) body .name.ember_red { color:#ae392f!important; }
  html:not([data-theme="dark"]) body .name.gold_glow { color:#856019!important; }
}