:root {
  --bg:        #05070d;
  --bg-1:      #0b0f1c;
  --bg-2:      #11141e;
  --bg-3:      #161a26;
  --bg-4:      #1c2030;
  --bg-5:      #232838;
  --border:        rgba(255,255,255,0.06);
  --border-2:      rgba(255,255,255,0.10);
  --fg:        #f3f4f7;
  --muted:     #7c8398;
  --accent:    #22c9ff;
  --accent-3:  #5ad1ff;
  --accent-soft: rgba(34,201,255,0.14);
  --cyan:      #3b6dff;
  --ok:        #4ade80;
  --warn:      #fbbf24;
  --err:       #ef4444;
  --radius:     14px;
  --radius-sm:  9px;
  --ease: cubic-bezier(.2,.6,.25,1);
}

* { box-sizing: border-box; }
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: contain;
}
body {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(34,201,255,0.10), transparent 70%),
    radial-gradient(700px 400px at 90% 8%, rgba(59,109,255,0.08), transparent 60%),
    var(--bg);
  min-height: 100vh;
}
/* Subtle drifting starfield to match the landing page atmosphere. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(180,210,255,0.5), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 88% 22%, rgba(180,210,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 30% 55%, rgba(255,255,255,0.35), transparent);
  animation: star-drift 70s linear infinite;
}
@keyframes star-drift { from { transform: translateY(0); } to { transform: translateY(-40px); } }
/* Keep app content above the starfield. */
#app { position: relative; z-index: 1; }

h1, h2, h3, h4 { margin: 0 0 12px; letter-spacing: -0.01em; }
h1, h2, h3 { font-family: 'Chakra Petch', 'Sora', sans-serif; letter-spacing: 0.3px; }
h1 { font-size: 22px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 6px; font-family: 'JetBrains Mono', monospace; }

a { color: var(--accent-3); }
code { font-family: 'JetBrains Mono', ui-monospace, monospace; background: var(--bg-3); padding: 2px 6px; border-radius: 5px; font-size: 12px; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.ok    { color: var(--ok); }
.error { color: var(--err); margin: 8px 0; font-size: 13px; }
.ok-msg { color: var(--ok); margin: 8px 0; font-size: 13px; }

/* ANNOUNCEMENT BANNER */
.portal-announce {
  position: relative; z-index: 5; text-align: center; padding: 11px 20px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .3px;
  border-bottom: 1px solid var(--border-2);
}
.portal-announce.announce-info   { background: rgba(34,201,255,0.10); color: #bfe9ff; border-bottom-color: rgba(34,201,255,0.30); }
.portal-announce.announce-warn   { background: rgba(251,191,36,0.12); color: #ffe0a3; border-bottom-color: rgba(251,191,36,0.35); }
.portal-announce.announce-danger { background: rgba(239,68,68,0.12);  color: #ffc2c2; border-bottom-color: rgba(239,68,68,0.40); }

/* CARD */
.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 14px 40px rgba(0,0,0,0.30);
}
.narrow { max-width: 460px; }
.card.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)), var(--bg-1);
  backdrop-filter: blur(14px);
}

/* FORM */
label { display: block; margin: 12px 0; font-size: 13px; color: var(--muted); }
input, textarea, select {
  width: 100%;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--fg);
  font-family: inherit;
  /* 16px prevents iOS Safari from zooming when the user taps the field. */
  font-size: 16px;
  min-height: 44px;
  transition: border-color .14s var(--ease);
  appearance: none; -webkit-appearance: none;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34,201,255,0.20);
}
textarea { resize: vertical; min-height: 60px; }

button {
  font-family: inherit; font-size: 15px; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--border-2);
  background: var(--bg-3); color: var(--fg);
  padding: 11px 18px; min-height: 44px;
  transition: background .14s var(--ease), border-color .14s var(--ease),
              transform .08s var(--ease);
  touch-action: manipulation;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:active:not(:disabled) { transform: scale(0.98); }
button:disabled { opacity: 0.55; cursor: default; }
.btn-primary {
  background: var(--accent); border: none; color: white; font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-3); }
.ghost { background: transparent; }
.ghost.danger { color: var(--err); }
.ghost.danger:hover:not(:disabled) { border-color: var(--err); }

/* Icon-only button (e.g. logout in topbar) — 44×44 square tap target. */
.icon-btn {
  width: 44px; height: 44px; padding: 0; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border);
}
.icon-btn:hover:not(:disabled) { color: var(--fg); border-color: var(--border-2); }

.row { display: flex; align-items: center; flex-wrap: wrap; }
.row.gap > * + * { margin-left: 10px; }

/* AUTH (login/register) */
.auth {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  min-height: 100svh;          /* small-viewport-height — accounts for mobile browser chrome */
  padding: 24px;
  padding-top:    max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left:   max(24px, env(safe-area-inset-left));
  padding-right:  max(24px, env(safe-area-inset-right));
}

.tabs2 {
  display: flex; gap: 4px; margin-bottom: 18px;
  padding: 3px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; width: fit-content;
}
.tabs2 button {
  padding: 6px 14px; font-size: 13px;
  background: transparent; border: none; border-radius: 7px;
  color: var(--muted); min-height: auto;
}
.tabs2 button.active { background: var(--accent); color: white; font-weight: 600; }

/* DASHBOARD LAYOUT */
.layout {
  max-width: 1100px; margin: 0 auto;
  padding: 0 20px;
  padding-left:  max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
  /* Transparent on desktop so the page's violet radial glow shows through.
     Mobile bumps a tinted blur back in via the @media block below — there
     the sticky header sits over scrolling content and needs a backdrop. */
  background: transparent;
  padding-top: max(14px, env(safe-area-inset-top));
}
.desktop-only { display: flex; }
.mobile-only  { display: none; }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 17px;
  letter-spacing: 2px; text-transform: uppercase;
}
.brand span:last-child {
  background: linear-gradient(100deg, #22d3ff 0%, #3b6dff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #35e08a; box-shadow: 0 0 12px #35e08a;
  animation: brand-pulse 2.4s ease-in-out infinite;
}
@keyframes brand-pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.tabs-main {
  margin: 0; flex: 1; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs-main::-webkit-scrollbar { display: none; }
.user-chip {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  padding: 4px 4px 4px 12px; background: var(--bg-2); border-radius: 999px;
}
.user-chip-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mobile-only Discord shortcut in the topbar — pill with icon + label
   so it's an obvious 44px-tall tap target, not a tiny mystery icon. */
.topbar-discord {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  background: #5865f2; color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 4px 14px rgba(88,101,242,0.40);
  transition: transform .12s var(--ease), background .14s var(--ease);
}
.topbar-discord:hover  { background: #7983f5; }
.topbar-discord:active { transform: scale(0.95); }

.content {
  padding: 24px 0 60px;
}

/* KPI grid */
.kpi-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.kpi { padding: 18px; }
.kpi p { margin: 0; font-size: 16px; }
.kpi .ok { color: var(--ok); }

/* Subscriptions */
.sub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sub-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; gap: 16px; flex-wrap: wrap;
}
.sub-name { display: flex; flex-direction: column; gap: 2px; }
.sub-meta { display: flex; gap: 6px; flex-wrap: wrap; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.pill-ok    { background: rgba(74,222,128,0.10); color: var(--ok); border-color: rgba(74,222,128,0.30); }
.pill-warn  { background: rgba(251,191,36,0.10); color: var(--warn); border-color: rgba(251,191,36,0.30); }
.pill-muted { background: rgba(124,131,152,0.10); color: var(--muted); border-color: var(--border-2); }
.pill-violet { background: rgba(34,201,255,0.14); color: var(--accent-3); border-color: rgba(34,201,255,0.40); }

/* Changelog */
.changelog-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.changelog-row { padding: 18px 20px; }
.changelog-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.changelog-head strong { font-size: 16px; }
.changelog-body {
  margin: 0;
  font-family: inherit; font-size: 14px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  color: var(--fg);
}

/* Files / downloads */
.loader-block {
  border-radius: var(--radius);
  border: 1px solid rgba(34,201,255,0.30);
  background: linear-gradient(180deg, rgba(34,201,255,0.10), rgba(34,201,255,0.04));
  padding: 16px;
  margin-bottom: 8px;
}
.loader-block-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 12px;
}
.loader-block h3 { color: var(--accent-3); margin: 0 0 2px; }
.loader-block p  { margin: 0; }
.loader-row { border-color: rgba(34,201,255,0.25); }

.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.file-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; gap: 14px; flex-wrap: wrap;
}
.file-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.file-info strong { font-size: 15px; word-break: break-all; }
.file-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sha-mini { font-size: 11px; }
.download-btn {
  text-decoration: none; min-height: 44px;
  padding: 11px 18px; display: inline-flex; align-items: center;
}

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-weight: 500; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: none; }

/* ============ HOME / OVERVIEW ============ */
.home-hero {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
.home-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--bg-3); border: 1px solid var(--border);
  flex-shrink: 0;
}
.home-avatar-default {
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 600; color: var(--accent-3);
  background: linear-gradient(135deg, rgba(34,201,255,0.20), rgba(59,109,255,0.20));
}

.sub-hero {
  padding: 22px 24px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(34,201,255,0.10), rgba(59,109,255,0.05)), var(--bg-1);
  border-color: rgba(34,201,255,0.30);
}
.sub-hero.sub-hero-warn   { background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(251,191,36,0.04)), var(--bg-1); border-color: rgba(251,191,36,0.35); }
.sub-hero.sub-hero-danger { background: linear-gradient(135deg, rgba(239,68,68,0.14),  rgba(239,68,68,0.04)),  var(--bg-1); border-color: rgba(239,68,68,0.40); }
.sub-hero.sub-hero-empty  { background: var(--bg-1); border-color: var(--border); }
.sub-hero-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.sub-hero-title { margin: 4px 0 8px; font-size: 24px; }
.sub-hero-status { margin: 0 0 14px; font-size: 14px; color: var(--fg); }
.sub-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.home-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 18px;
}
.home-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.home-card-head h4 { margin: 0; color: var(--fg); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.home-card-head a:hover { color: var(--accent-3); }

.home-loader { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.home-loader-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(34,201,255,0.10), rgba(59,109,255,0.05));
  border: 1px solid rgba(34,201,255,0.25);
  border-radius: 12px;
}
.loader-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34,201,255,0.15); color: var(--accent-3);
  border: 1px solid rgba(34,201,255,0.30);
}
.home-loader-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.home-loader-info strong { font-size: 15px; word-break: break-all; }
.loader-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--accent); color: white; font-weight: 600; font-size: 13px;
  white-space: nowrap; flex-shrink: 0;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(34,201,255,0.40);
  transition: background .15s var(--ease), transform .12s var(--ease),
              box-shadow .15s var(--ease);
}
.loader-cta:hover {
  background: var(--accent-3);
  box-shadow: 0 6px 20px rgba(34,201,255,0.55);
}
.loader-cta:hover svg { transform: translateX(2px); }
.loader-cta:active { transform: scale(0.97); }
.loader-cta svg { transition: transform .15s var(--ease); }

.home-security { padding: 18px; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.check-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-2);
}
.check-list .check-icon {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.check-list .check-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.check-list .check-text strong { font-size: 13px; }
.check-list li.check-on  { border-color: rgba(74,222,128,0.30); }
.check-list li.check-on  .check-icon  { background: rgba(74,222,128,0.15); color: var(--ok); }
.check-list li.check-off { border-color: rgba(251,191,36,0.25); }
.check-list li.check-off .check-icon  { background: rgba(251,191,36,0.12); color: var(--muted); }

/* Discord join CTA card */
.discord-join {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; margin-bottom: 18px;
  text-decoration: none; color: var(--fg);
  background: linear-gradient(135deg, rgba(88,101,242,0.20), rgba(88,101,242,0.05)), var(--bg-1);
  border: 1px solid rgba(88,101,242,0.35);
  border-radius: 12px;
  transition: transform .14s var(--ease), border-color .14s var(--ease),
              box-shadow .14s var(--ease);
}
.discord-join:hover {
  border-color: rgba(88,101,242,0.65);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(88,101,242,0.22);
}
.discord-join-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(88,101,242,0.20); color: #b4baff;
  border: 1px solid rgba(88,101,242,0.35);
}
.discord-join-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.discord-join-text strong { font-size: 15px; }
.discord-join-sub {
  font-size: 12px; color: var(--muted); line-height: 1.4;
}
.discord-join-cta {
  padding: 8px 14px; border-radius: 999px;
  background: #5865f2; color: #fff; font-weight: 600; font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(88,101,242,0.40);
}
.discord-join:hover .discord-join-cta { background: #7983f5; }
.discord-join-arrow {
  display: none;            /* mobile-only chevron */
  color: rgba(255,255,255,0.85);
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

.home-news { padding: 18px; margin-bottom: 18px; }
.news-title-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.news-title-row strong { font-size: 15px; }
.news-teaser {
  margin: 0; padding: 0;
  font-family: inherit; font-size: 13px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  /* Clamp to ~3 lines so the home stays compact. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-history { padding: 18px; margin-bottom: 18px; }
.mini-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.mini-history li {
  display: grid;
  grid-template-columns: 10px 170px auto 1fr;
  gap: 10px; align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.mini-history li:last-child { border-bottom: none; }
.mini-history-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
}
.mini-history-dot.dot-ok   { background: var(--ok); }
.mini-history-dot.dot-warn { background: var(--warn); }
.mini-history-dot.dot-info { background: var(--accent-3); }
.mini-history code { font-size: 11px; }

@media (max-width: 720px) {
  .home-hero { gap: 12px; margin-bottom: 14px; }
  .home-avatar { width: 56px; height: 56px; }
  .home-avatar-default { font-size: 24px; }
  .sub-hero { padding: 18px; }
  .sub-hero-title { font-size: 20px; }
  .home-row { grid-template-columns: 1fr; }
  .news-teaser { -webkit-line-clamp: 4; }

  /* Discord card switches to a solid blurple button-style on mobile so
     the whole row reads as a single tappable action with clear
     affordance. */
  .discord-join {
    padding: 14px 14px;
    gap: 14px;
    background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
    border-color: rgba(255,255,255,0.18);
    color: #fff;
    box-shadow: 0 8px 24px rgba(88,101,242,0.35);
  }
  .discord-join:active { transform: scale(0.985); }
  .discord-join-icon {
    background: rgba(255,255,255,0.20);
    border-color: rgba(255,255,255,0.30);
    color: #fff;
  }
  .discord-join-text strong { color: #fff; font-size: 16px; }
  .discord-join-sub { color: rgba(255,255,255,0.80); font-size: 12px; }
  .discord-join-cta  { display: none; }
  .discord-join-arrow { display: inline-flex; }

  /* Loader row stays a single tappable card on phones. The CTA text
     drops out so the long filename and the size pill have breathing room.
     The arrow alone is enough of an affordance on touch. */
  .home-loader-row { padding: 12px 14px; gap: 12px; }
  .loader-icon { width: 38px; height: 38px; }
  .loader-cta span { display: none; }
  .loader-cta { padding: 8px 10px; }
  .mini-history li { grid-template-columns: 10px 1fr; gap: 8px; row-gap: 2px; }
  .mini-history li > code,
  .mini-history li > .muted:last-child { grid-column: 2 / 3; }
}

/* Ban appeal card */
.ban-card { border-color: rgba(239,68,68,0.30); }
.ban-head { text-align: center; margin-bottom: 14px; }
.ban-icon {
  font-size: 40px; line-height: 1;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.30);
}
.appeal-state {
  padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-2);
  display: flex; flex-direction: column; gap: 6px;
  margin: 14px 0;
}
.appeal-state strong { display: block; }
.appeal-state p { margin: 0; }
.appeal-pending  { border-color: rgba(251,191,36,0.30); background: rgba(251,191,36,0.06); }
.appeal-granted  { border-color: rgba(74,222,128,0.30); background: rgba(74,222,128,0.06); }
.appeal-denied   { border-color: rgba(239,68,68,0.30); background: rgba(239,68,68,0.06); }
.appeal-msg {
  margin: 6px 0 0; padding: 8px 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}

/* Discord linkage */
.discord-linked {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; background: var(--bg-2); border-radius: 8px;
  border: 1px solid var(--border);
}
.discord-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bg-3); flex-shrink: 0;
}
.discord-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.discord-info strong { font-size: 15px; }

/* TOTP */
.totp-qr {
  display: block; max-width: 200px; margin: 12px 0; border-radius: 8px;
  background: white; padding: 8px;
}

/* BOTTOM NAV (mobile) */
.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: rgba(13,15,23,0.92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--border);
  padding: 6px 4px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}
.bottom-nav button {
  flex: 1; min-height: 56px; padding: 6px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  background: transparent; border: none; color: var(--muted);
  font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
  border-radius: 10px;
  transition: color .12s var(--ease), background .12s var(--ease);
}
.bottom-nav button svg { opacity: 0.85; }
.bottom-nav button.active {
  color: var(--accent-3);
  background: var(--accent-soft);
}
.bottom-nav button.active svg { opacity: 1; stroke-width: 2.2; }

/* TOASTS */
.toasts {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--border-2);
  font-size: 13px; max-width: 360px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.toast-ok  .toast-icon { color: var(--ok); }
.toast-err .toast-icon { color: var(--err); }
.toast-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-3); font-weight: 700;
}

/* ====================== MOBILE ====================== */
@media (max-width: 720px) {
  body { font-size: 15px; }
  h1 { font-size: 20px; }
  h2 { font-size: 18px; margin-bottom: 10px; }
  h3 { font-size: 15px; }

  .desktop-only { display: none; }
  .mobile-only  { display: flex; }

  .layout {
    padding-left:  max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .topbar {
    padding: 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left:  max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    margin-left:  calc(-1 * max(14px, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(14px, env(safe-area-inset-right)));
    justify-content: space-between;
    background: rgba(13,15,23,0.78);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .brand { font-size: 15px; }
  .user-chip { padding: 4px 4px 4px 10px; }
  .user-chip-name { max-width: 110px; }

  /* Push the page content above the bottom-nav. */
  .content {
    padding: 16px 0;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* Tighter cards on small screens. */
  .card { padding: 16px; border-radius: 12px; }
  .card.glass { padding: 22px 18px; }
  .narrow { max-width: 100%; }

  /* KPI grid: one card per row on phones (clearer, less cramped). */
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px; }
  .kpi p { font-size: 15px; }
  .kpi h4 { font-size: 11px; margin-bottom: 4px; }

  /* Auth screen — fill the viewport, no card-shaped float on small screens. */
  .auth { padding: 0; }
  .auth .card.glass {
    width: 100%; max-width: 100%;
    min-height: 100vh; min-height: 100svh;
    border-radius: 0; border: none;
    padding: 32px 22px;
    padding-top:    calc(48px + env(safe-area-inset-top));
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    box-shadow: none;
  }
  .auth h1 { font-size: 24px; margin-bottom: 18px; }

  /* Primary submit buttons stretch full width on mobile. */
  form .btn-primary { width: 100%; }

  /* Subscription rows stack vertically. */
  .sub-row { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; }
  .sub-meta { gap: 5px; }

  /* File rows stack with full-width download button. */
  .file-row { flex-direction: column; align-items: stretch; padding: 14px 16px; }
  .download-btn { justify-content: center; }

  /* Toasts pinned above the bottom-nav with safe-area awareness. */
  .toasts {
    left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom));
  }
  .toast { max-width: 100%; }

  /* Tighter forms inside cards. */
  label { margin: 14px 0; }

  /* Table: prevent extreme columns from pushing the layout. */
  th, td { padding: 9px 10px; font-size: 12px; }
  td code { font-size: 11px; }

  /* QR for 2FA shouldn't overflow on small phones. */
  .totp-qr { max-width: 180px; }
}

/* Very small phones (< 360 wide) — collapse KPI grid to single column. */
@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .bottom-nav button { font-size: 9px; }
}

.recaptcha-wrap { margin: 4px 0 2px; min-height: 78px; }