/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens ──
   Dark-first palette, Inter, flat panels. Variable *names* are kept
   general so every template/inline-style reference resolves consistently
   across light/dark and the explicit [data-theme] override. */
:root {
  color-scheme: dark;
  --indigo:        #4ea1ff;
  --indigo-dark:   #3a86e0;
  --indigo-light:  rgba(78,161,255,.16);
  --indigo-subtle: rgba(78,161,255,.16);
  --indigo-soft:   rgba(78,161,255,.16);
  --gold:          #f59e0b;
  --gold-bg:       rgba(245,158,11,.16);
  --gold-border:   rgba(245,158,11,.35);
  --red:           #ef4444;
  --red-bg:        rgba(239,68,68,.12);
  --red-border:    rgba(239,68,68,.35);
  --green:         #22c55e;
  --green-bg:      rgba(34,197,94,.10);
  --green-border:  rgba(34,197,94,.35);
  --purple:        #9b6bff;
  --text-1:        #e6e9ef;
  --text-2:        #8a93a3;
  --text-3:        #5b6371;
  --border:        rgba(255,255,255,.06);
  --bg:            #0b0d10;
  --surface:       #13161b;
  --surface-2:     #181c22;
  --shadow-xs:     0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:     0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:     0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.2);
  --shadow-lg:     0 10px 40px rgba(0,0,0,.6);
  --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;
  --sidebar-w: 0px; --top-h: 60px; --tab-h: 68px; --max-w: 540px;
  --font-scale: 1;
  --font-sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --indigo:        #2563eb;
    --indigo-dark:   #1d4fc4;
    --indigo-light:  rgba(37,99,235,.12);
    --indigo-subtle: rgba(37,99,235,.12);
    --indigo-soft:   rgba(37,99,235,.12);
    --gold:          #d97706;
    --gold-bg:       rgba(217,119,6,.14);
    --gold-border:   rgba(217,119,6,.32);
    --green:         #16a34a;
    --green-bg:      rgba(22,163,74,.10);
    --green-border:  rgba(22,163,74,.32);
    --purple:        #7c3aed;
    --text-1:        #1a1d23;
    --text-2:        #5b6371;
    --text-3:        #9aa3b2;
    --border:        rgba(0,0,0,.08);
    --bg:            #f4f5f8;
    --surface:       #ffffff;
    --surface-2:     #f7f8fb;
    --shadow-xs:     0 1px 2px rgba(15,23,42,.06);
    --shadow-sm:     0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md:     0 4px 12px rgba(15,23,42,.1), 0 2px 4px rgba(15,23,42,.05);
    --shadow-lg:     0 10px 40px rgba(15,23,42,.18);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --indigo:        #4ea1ff;
  --indigo-dark:   #3a86e0;
  --indigo-light:  rgba(78,161,255,.16);
  --indigo-subtle: rgba(78,161,255,.16);
  --indigo-soft:   rgba(78,161,255,.16);
  --gold:          #f59e0b;
  --gold-bg:       rgba(245,158,11,.16);
  --gold-border:   rgba(245,158,11,.35);
  --green:         #22c55e;
  --green-bg:      rgba(34,197,94,.10);
  --green-border:  rgba(34,197,94,.35);
  --purple:        #9b6bff;
  --text-1:        #e6e9ef;
  --text-2:        #8a93a3;
  --text-3:        #5b6371;
  --border:        rgba(255,255,255,.06);
  --bg:            #0b0d10;
  --surface:       #13161b;
  --surface-2:     #181c22;
  --shadow-xs:     0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:     0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:     0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.2);
  --shadow-lg:     0 10px 40px rgba(0,0,0,.6);
}

/* iOS standalone home-screen apps have been observed rendering the whole
   page at a shrunk visualViewport.scale (~0.85) that neither a client-side
   viewport-meta mutation nor a server-rendered numeric width corrects —
   compensate directly by scaling every font-size up instead. */
@media (display-mode: standalone) {
  :root { --font-scale: 1.176; }
}

[data-theme="light"] {
  color-scheme: light;
  --indigo:        #2563eb;
  --indigo-dark:   #1d4fc4;
  --indigo-light:  rgba(37,99,235,.12);
  --indigo-subtle: rgba(37,99,235,.12);
  --indigo-soft:   rgba(37,99,235,.12);
  --gold:          #d97706;
  --gold-bg:       rgba(217,119,6,.14);
  --gold-border:   rgba(217,119,6,.32);
  --green:         #16a34a;
  --green-bg:      rgba(22,163,74,.10);
  --green-border:  rgba(22,163,74,.32);
  --purple:        #7c3aed;
  --text-1:        #1a1d23;
  --text-2:        #5b6371;
  --text-3:        #9aa3b2;
  --border:        rgba(0,0,0,.08);
  --bg:            #f4f5f8;
  --surface:       #ffffff;
  --surface-2:     #f7f8fb;
  --shadow-xs:     0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:     0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:     0 4px 12px rgba(15,23,42,.1), 0 2px 4px rgba(15,23,42,.05);
  --shadow-lg:     0 10px 40px rgba(15,23,42,.18);
}

/* ── Base ── */
body {
  font-family: var(--font-sans);
  background: var(--bg); color: var(--text-1);
  min-height: 100vh; overflow-x: hidden;
  font-size: calc(14px * var(--font-scale, 1)); line-height: 1.5;
  transition: background .25s, color .25s;
  -webkit-font-smoothing: antialiased;
}

/* ── App Shell ── */
#app { max-width: var(--max-w); margin: 0 auto; min-height: 100vh; position: relative; padding-top: env(safe-area-inset-top, 0px); }

/* ── Utilities ── */
.hidden { display: none !important; }
[hidden]  { display: none !important; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; }

/* ── Cards ── */
.card { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }

/* ── Avatars ── */
.avatar {
  border-radius: 50%; font-weight: 700; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.avatar-sm { width: 28px; height: 28px; font-size: calc(10px * var(--font-scale, 1)); }
.avatar-md { width: 40px; height: 40px; font-size: calc(14px * var(--font-scale, 1)); }
.avatar-lg { width: 64px; height: 64px; font-size: calc(22px * var(--font-scale, 1)); }

/* ── Sidebar (desktop only) ── */
.sidebar {
  display: none; position: fixed; top: 0; left: 0; bottom: 0;
  width: 240px; z-index: 110; background: var(--surface);
  border-right: 1px solid var(--border);
  flex-direction: column; overflow: hidden;
}
.sidebar-logo {
  height: var(--top-h); padding: 0 20px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sidebar-brand { color: var(--text-1); font-size: calc(16px * var(--font-scale, 1)); font-weight: 700; letter-spacing: -.3px; }
.sidebar-nav {
  flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto;
}
.sidebar-section-label {
  padding: 6px 12px 4px; font-size: calc(10px * var(--font-scale, 1)); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
.sidebar-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: var(--r-sm); border: none; background: none;
  color: var(--text-2); font-size: calc(13.5px * var(--font-scale, 1)); font-weight: 500;
  cursor: pointer; transition: all .12s; text-align: left; width: 100%;
  text-decoration: none;
}
.sidebar-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.sidebar-item:hover { background: var(--surface-2); color: var(--text-1); }
.sidebar-item.active { background: var(--indigo-light); color: var(--indigo); }
.sidebar-divider { height: 1px; background: var(--border); margin: 8px 0; }
.sidebar-footer {
  padding: 12px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
}
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 4px; }
.sidebar-user-info { min-width: 0; }
.sidebar-user-name { font-size: calc(13px * var(--font-scale, 1)); font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-sub  { font-size: calc(11px * var(--font-scale, 1)); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Bottom Tab Bar (mobile) ── */
.tab-bar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--max-w);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--border);
  display: flex; z-index: 100; box-shadow: 0 -1px 8px rgba(0,0,0,.06);
}
.tab-item {
  flex: 1; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding-bottom: env(safe-area-inset-bottom, 0);
  color: var(--text-3); font-size: calc(10px * var(--font-scale, 1)); font-weight: 500; white-space: nowrap;
  font-family: inherit;
  transition: color .12s; position: relative; text-decoration: none;
}
.tab-icon { font-size: calc(20px * var(--font-scale, 1)); line-height: 1; }
.tab-item.active { color: var(--indigo); }
.tab-item.active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 2px; background: var(--indigo); border-radius: 0 0 2px 2px;
}

/* ── Page Content ── */
.page-content { padding: calc(var(--top-h) + 16px) 16px calc(var(--tab-h) + 16px + env(safe-area-inset-bottom, 0px)); }

/* ── Section Headings ── */
.section-gap { margin-top: 20px; }
.section-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.section-title {
  font-size: calc(11px * var(--font-scale, 1)); font-weight: 700; color: var(--text-3);
  letter-spacing: .07em; text-transform: uppercase;
}
.link-action {
  background: none; border: none; cursor: pointer;
  color: var(--indigo); font-size: calc(12.5px * var(--font-scale, 1)); font-weight: 500;
}
.link-action:hover { text-decoration: underline; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: none; border-radius: var(--r-sm); cursor: pointer;
  font-size: calc(13.5px * var(--font-scale, 1)); font-weight: 600; padding: 9px 16px;
  transition: all .15s; white-space: nowrap; line-height: 1;
}
.btn-sm { padding: 7px 12px; font-size: calc(12.5px * var(--font-scale, 1)); }
.btn-full { width: 100%; }
.btn-primary {
  background: var(--indigo); color: #fff;
  box-shadow: 0 1px 3px rgba(79,70,229,.3);
}
.btn-primary:hover {
  background: var(--indigo-dark);
  transform: translateY(-1px); box-shadow: 0 4px 10px rgba(79,70,229,.35);
}
.btn-primary:active { transform: translateY(0); }
.btn-danger {
  background: var(--red); color: #fff; box-shadow: 0 1px 3px rgba(220,38,38,.3);
}
.btn-danger:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(220,38,38,.35); }
.btn-success {
  background: var(--green); color: #fff; box-shadow: 0 1px 3px rgba(5,150,105,.3);
}
.btn-success:hover { background: #047857; transform: translateY(-1px); }
.btn-outline {
  background: transparent; color: var(--text-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: calc(13px * var(--font-scale, 1)); font-weight: 600; cursor: pointer;
  padding: 8px 14px; transition: all .12s;
}
.btn-outline:hover { background: var(--surface-2); border-color: var(--text-3); }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: var(--r-pill);
  font-size: calc(11px * var(--font-scale, 1)); font-weight: 600;
}
.badge-count  { background: var(--red); color: #fff; font-size: calc(11px * var(--font-scale, 1)); padding: 1px 5px; border-radius: var(--r-pill); margin-left: 5px; }
.badge-grey   { background: var(--surface-2); color: var(--text-3); margin-left: 5px; font-size: calc(11px * var(--font-scale, 1)); padding: 1px 6px; border-radius: var(--r-pill); }
.badge-indigo { background: var(--indigo-light); color: var(--indigo); font-size: calc(10.5px * var(--font-scale, 1)); padding: 2px 6px; border-radius: var(--r-pill); }

/* ── Toggle ── */
.toggle {
  position: relative; width: 36px; height: 20px;
  background: var(--text-3); border: none; border-radius: var(--r-pill);
  cursor: pointer; transition: background .2s; flex-shrink: 0;
}
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; background: #fff; border-radius: 50%;
  transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle.on { background: var(--indigo); }
.toggle.on::after { transform: translateX(16px); }

/* ── Greeting ── */
.greeting-row { margin-bottom: 16px; }
.greeting-text { font-size: calc(22px * var(--font-scale, 1)); font-weight: 700; color: var(--text-1); letter-spacing: -.4px; }
.greeting-sub  { font-size: calc(13px * var(--font-scale, 1)); color: var(--text-3); margin-top: 2px; }

/* ── Profile / Account ── */
.profile-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; background: var(--surface);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.profile-info { min-width: 0; }
.profile-name { font-size: calc(18px * var(--font-scale, 1)); font-weight: 700; color: var(--text-1); letter-spacing: -.3px; }
.profile-role { font-size: calc(13px * var(--font-scale, 1)); color: var(--indigo); font-weight: 600; margin-top: 2px; }
.profile-hh   { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-3); margin-top: 1px; }

.settings-list { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 16px; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; cursor: pointer; transition: background .1s;
}
.settings-row + .settings-row { border-top: 1px solid var(--border); }
.settings-row:hover { background: var(--surface-2); }
.settings-row-left {
  display: flex; align-items: center; gap: 10px;
  font-size: calc(13.5px * var(--font-scale, 1)); color: var(--text-1); font-weight: 500;
}
.settings-row-left svg { color: var(--text-3); flex-shrink: 0; }
.settings-chevron { color: var(--text-3); font-size: calc(18px * var(--font-scale, 1)); }
.logout-btn {
  width: 100%; padding: 11px; background: none;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  color: var(--red); font-size: calc(13.5px * var(--font-scale, 1)); font-weight: 600; cursor: pointer; transition: all .15s;
}
.logout-btn:hover { background: var(--red-bg); border-color: var(--red); }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .15s;
}
.modal {
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  width: 100%; max-width: var(--max-w);
  padding: 24px 20px calc(36px + env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: slideUp .2s ease-out; box-shadow: 0 -4px 24px rgba(0,0,0,.18);
  display: flex; flex-direction: column; gap: 14px;
}
.modal-header { font-size: calc(20px * var(--font-scale, 1)); font-weight: 700; color: var(--text-1); text-align: center; margin-bottom: 6px; }
.modal-sub    { font-size: calc(14px * var(--font-scale, 1)); color: var(--text-2); text-align: center; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-delete-link {
  display: block; width: 100%; text-align: center; margin-top: 12px;
  border: none; background: none; font: inherit; font-size: calc(12.5px * var(--font-scale, 1));
  font-weight: 500; color: var(--text-3); cursor: pointer;
}
.modal-delete-link:hover { color: var(--red); text-decoration: underline; }

/* ── Toast ── */
.toast-wrap {
  position: fixed; bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%); z-index: 400;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.toast {
  background: var(--text-1); color: var(--bg); padding: 10px 20px;
  border-radius: var(--r-pill); font-size: calc(13.5px * var(--font-scale, 1)); font-weight: 600;
  box-shadow: var(--shadow-lg); white-space: nowrap;
  animation: toastIn .2s ease-out, toastOut .3s ease-in 2.6s forwards;
}

/* ── Install (PWA) Banner ── */
.install-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom, 0px));
  width: calc(100% - 24px); max-width: 380px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px;
  z-index: 300; animation: slideUp .2s ease-out;
}
.install-banner-icon { width: 38px; height: 38px; border-radius: var(--r-md); flex-shrink: 0; }
.install-banner-text { flex: 1; min-width: 0; }
.install-banner-title { font-size: calc(13px * var(--font-scale, 1)); font-weight: 700; color: var(--text-1); }
.install-banner-sub { font-size: calc(11.5px * var(--font-scale, 1)); color: var(--text-2); margin-top: 1px; }
.install-banner-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.install-banner-close {
  border: none; background: none; cursor: pointer; color: var(--text-3);
  width: 26px; height: 26px; border-radius: var(--r-sm); font-size: calc(15px * var(--font-scale, 1));
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.install-banner-close:hover { background: var(--surface-2); color: var(--text-1); }

/* ── Animations ── */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
:focus-visible { outline: 2.5px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 16px 24px; background: var(--bg);
}
.auth-card {
  width: 100%; max-width: 400px; background: var(--surface);
  border-radius: var(--r-lg); padding: 32px 28px;
  box-shadow: var(--shadow-md); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 14px;
}
.auth-brand { display: flex; justify-content: center; margin-bottom: 4px; color: var(--indigo); }
.auth-card h1 { font-size: calc(22px * var(--font-scale, 1)); font-weight: 800; text-align: center; color: var(--text-1); }
.auth-sub { font-size: calc(14px * var(--font-scale, 1)); color: var(--text-2); text-align: center; margin-top: -6px; }
.auth-card label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: calc(13px * var(--font-scale, 1)); font-weight: 600; color: var(--text-2);
}
.auth-card input, .auth-card textarea {
  padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: var(--r-sm); font-size: calc(14px * var(--font-scale, 1));
  background: var(--surface); color: var(--text-1);
  transition: border-color .2s; outline: none; font-family: inherit;
}
.auth-card input:focus, .auth-card textarea:focus { border-color: var(--indigo); }
.auth-card .btn-primary {
  width: 100%; padding: 12px; font-size: calc(15px * var(--font-scale, 1));
  border-radius: var(--r-sm); font-weight: 700;
  min-height: 48px;
}
.auth-remember { flex-direction: row !important; align-items: center; gap: 8px !important; cursor: pointer; }
.auth-remember input { width: auto; }
.auth-error { font-size: calc(13px * var(--font-scale, 1)); color: var(--red); text-align: center; margin: -4px 0; }
.auth-note  { font-size: calc(13px * var(--font-scale, 1)); color: var(--indigo); text-align: center; }
.auth-alt   { font-size: calc(13px * var(--font-scale, 1)); text-align: center; color: var(--text-3); }
.auth-alt a { color: var(--indigo); text-decoration: none; font-weight: 600; }
.auth-alt a:hover { text-decoration: underline; }
.auth-alt .dot { margin: 0 6px; }
.hint { font-weight: 400; color: var(--text-3); font-size: calc(12px * var(--font-scale, 1)); }

/* ── Admin panel (/admin) ── */
.admin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 8px;
}
.admin-row.is-decided { opacity: .65; }
.admin-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-row-name { font-size: calc(14px * var(--font-scale, 1)); font-weight: 600; color: var(--text-1); }
.admin-row-email { font-size: calc(12.5px * var(--font-scale, 1)); color: var(--text-2); overflow-wrap: anywhere; }
.admin-row-msg { font-size: calc(12.5px * var(--font-scale, 1)); color: var(--text-2); font-style: italic; }
.admin-row-meta { font-size: calc(11.5px * var(--font-scale, 1)); color: var(--text-3); flex-shrink: 0; }
.admin-row-actions {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  flex-wrap: wrap; justify-content: flex-end;
}
.admin-badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-pill);
  font-size: calc(11px * var(--font-scale, 1)); font-weight: 600; background: var(--surface-2);
  color: var(--text-2); text-transform: capitalize; vertical-align: 1px;
}
.admin-badge-live, .admin-badge-approved { background: var(--green-bg); color: var(--green); }
.admin-badge-denied, .admin-badge-revoked, .admin-badge-expired { background: var(--red-bg); color: var(--red); }
.admin-count {
  padding: 2px 10px; border-radius: var(--r-pill); font-size: calc(11.5px * var(--font-scale, 1));
  font-weight: 700; background: var(--red); color: #fff;
}
.admin-count-plain { background: var(--surface-2); color: var(--text-2); }
.admin-empty { font-size: calc(13px * var(--font-scale, 1)); color: var(--text-3); padding: 8px 2px; }
.admin-seen-now { color: var(--green); font-weight: 600; }

/* ── Account tab submenu (mobile tab bar; admins only) ── */
.tab-caret {
  position: absolute; top: 6px; left: 50%; margin-left: 15px;
  font-size: calc(7px * var(--font-scale, 1)); opacity: .55; pointer-events: none;
}
.tab-item.active .tab-caret { opacity: .9; }
.tab-menu-scrim {
  position: fixed; inset: 0; z-index: 120; background: rgba(15,23,42,.3);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.tab-menu-scrim.open { opacity: 1; pointer-events: auto; }
.tab-menu {
  position: fixed; z-index: 130; width: 216px;
  bottom: calc(var(--tab-h) + 24px + env(safe-area-inset-bottom, 0px));
  right: max(16px, calc(50vw - var(--max-w)/2 + 16px));
  background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lg);
  padding: 8px; transform-origin: bottom right;
  transform: scale(.85) translateY(10px); opacity: 0; pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.tab-menu.open { transform: none; opacity: 1; pointer-events: auto; }
.tab-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 14px; text-decoration: none;
  font-size: calc(14px * var(--font-scale, 1)); font-weight: 700; color: var(--text-1); line-height: 1.25;
}
.tab-menu-item:hover, .tab-menu-item:active { background: var(--surface-2); }
.tab-menu-item svg { width: 19px; height: 19px; color: var(--text-2); flex-shrink: 0; }
.tab-menu-sub { display: block; font-size: calc(11px * var(--font-scale, 1)); font-weight: 500; color: var(--text-3); margin-top: 1px; }

/* ── Mobile form controls ──
   iOS Safari zooms the page when a focused control's font-size is under 16px,
   and does not zoom back out on blur. Keep every control at 16px on any
   touch device (pointer: coarse covers iPads wider than 900px). */
@media (max-width: 899px), (pointer: coarse) {
  input, select, textarea { font-size: calc(16px * var(--font-scale, 1)) !important; }
}

/* ── Desktop ── */
@media (min-width: 900px) {
  :root { --sidebar-w: 240px; --tab-h: 0px; }

  #app { max-width: none; display: flex; min-height: 100vh; }

  .sidebar { display: flex; }
  .tab-bar { display: none; }

  .content-col { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--sidebar-w); height: 100vh; overflow: hidden; }
  .page-content { flex: 1; margin-left: 0; width: 100%; max-height: none; overflow-y: auto; padding: 28px 40px 40px; }

  .toast-wrap { left: calc(var(--sidebar-w) / 2 + 50vw); transform: translateX(-50%); bottom: 24px; }

  .modal-overlay { align-items: center; }
  .modal { border-radius: var(--r-lg); max-width: 480px; animation: fadeIn .15s; }

  .greeting-text { font-size: calc(26px * var(--font-scale, 1)); }
}