/* ==========================================================================
   J.A.D.E. — shared design system  (public site + portal)
   Location: backend/public/css/jade.css
   Own identity, refined: near-black violet base, violet → magenta glow,
   Space Grotesk display / Inter body / JetBrains Mono for system labels.
   ========================================================================== */

:root {
  --bg:        #07060d;
  --bg-2:      #0c0a16;
  --surface:   #110e1e;
  --surface-2: #181429;
  --surface-3: #211b38;
  --line:      #261f40;
  --line-2:    #362c5a;

  --text:      #ece9f7;
  --muted:     #a59ec0;
  --faint:     #948db3; /* (13 Nov 2026: was #6f6890, 3.9:1; now 6.5:1 on the background) */

  --violet:    #a855f7;
  --violet-2:  #8b5cf6;
  --violet-3:  #7c3aed;
  --magenta:   #e879f9;
  --glow:      rgba(168, 85, 247, .35);
  --glow-soft: rgba(168, 85, 247, .12);

  --green:     #34d399;
  --amber:     #fbbf24;
  --red:       #fb7185;
  --gold:      #fcd34d;
  --silver:    #cbd5e1;
  --bronze:    #f0a060;

  --grad:      linear-gradient(135deg, var(--violet) 0%, var(--magenta) 100%);
  --grad-soft: linear-gradient(135deg, rgba(168,85,247,.16), rgba(232,121,249,.08));

  --display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --wrap: 1180px;
  --nav-h: 68px;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* card grids: children shrink to their column instead of spilling into the next card (Oct 2026) */
[class*="grid"] > *, .servers > *, .cmd-list > *, .cmds > *, .shop > *, .lb-pick > *, #rem-list > *, #saved-embeds-list > *, .gp-split > *, .ppl-how > *, .fb-selects > *, .sea-tiles > * { min-width: 0; }
/* (6 Nov 2026) nothing makes the page wider than the screen: phones zoomed out to fit it */
html { overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip; /* (clip keeps the sticky header working) */
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.08; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
::selection { background: rgba(168, 85, 247, .45); color: #fff; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; border-radius: 6px; }
/* (13 Nov 2026) "Skip to content" for keyboard and screen reader users (added by js/portal.js) */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 10px; background: #86198f; color: #fff; font-weight: 600; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.mono { font-family: var(--mono); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ambient background glow + faint grid */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient::before {
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 90vh;
  background:
    radial-gradient(40% 50% at 70% 20%, rgba(168,85,247,.20), transparent 70%),
    radial-gradient(35% 45% at 20% 10%, rgba(232,121,249,.10), transparent 70%);
  filter: blur(10px);
}
.ambient::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 30%, transparent 80%);
}

/* ---------- labels / eyebrows ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--violet);
}
.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow.plain::before { display: none; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(17, 14, 30, .7); border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  backdrop-filter: blur(8px);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(52,211,153,.18); flex: none; }
.dot.off { background: var(--faint); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .dot.live { animation: livePulse 2.2s ease-in-out infinite; }
  @keyframes livePulse { 0%,100% { box-shadow: 0 0 0 3px rgba(52,211,153,.18); } 50% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px; border-radius: 12px;
  font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 28px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 36px -8px rgba(168,85,247,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-ghost { background: rgba(17,14,30,.6); border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--violet); background: var(--surface-2); }
.btn-discord { background: #5865f2; color: #fff; box-shadow: 0 8px 28px -10px rgba(88,101,242,.7); }
.btn-discord:hover { background: #4752c4; transform: translateY(-1px); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* ---------- top navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 6, 13, .72);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(38, 31, 64, .8);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2), 0 0 18px var(--glow-soft); }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .04em; }
.brand-name span { color: var(--violet); }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: block; white-space: nowrap; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 500; transition: color .15s, background .15s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); background: var(--surface); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-2); color: var(--text); border-radius: 10px; width: 42px; height: 42px; cursor: pointer; }
.nav-toggle svg { width: 20px; height: 20px; }

/* the top menu folds into the menu button below 1060px (7 links stopped fitting at laptop widths) */
@media (max-width: 1060px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: var(--nav-h);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 16px 16px; background: rgba(7,6,13,.97); border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav[data-open="true"] .nav-links { display: flex; }
  .nav-links a { padding: 12px 14px; }
}
@media (max-width: 860px) { .nav-actions .btn-ghost { display: none; } }

/* ---------- sections ---------- */
.section { padding-block: 96px; position: relative; }
.section-tight { padding-block: 64px; }
.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; text-align: center; align-items: center; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 48px); font-weight: 700; }
.section-head p { color: var(--muted); font-size: 18px; max-width: 62ch; }
.divider { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); margin: 0; }

/* ---------- cards ---------- */
.card {
  position: relative; background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.card.hover:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(168,85,247,.45); }
.card h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; }
.icon-chip {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid var(--line-2); color: var(--magenta); margin-bottom: 18px;
}
.icon-chip svg { width: 22px; height: 22px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li { font-size: 13px; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }

/* ---------- stats strip ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-2);
}
/* dividers are borders, not 1px gaps: a gap can round to nothing at fractional zoom/display scaling.
   Each tile draws its left + top edge and is pulled 1px out so the outer ones hide under the frame. */
.stat { background: var(--bg-2); padding: 26px 24px; display: flex; flex-direction: column; gap: 4px;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line); margin: -1px 0 0 -1px; }
.stat-value { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -.02em; transition: opacity .4s; }
.stat-value.loading { opacity: .3; }
.stat-label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.stat-sub { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r); }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th {
  text-align: left; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); padding: 12px 18px; border-bottom: 1px solid var(--line);
}
table.data td { padding: 14px 18px; border-bottom: 1px solid rgba(38,31,64,.6); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background .15s; }
table.data tbody tr:hover { background: rgba(168,85,247,.05); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- empty / loading states ---------- */
.state { text-align: center; padding: 56px 20px; color: var(--muted); }
.state small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.skeleton { background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; border-radius: 8px; }
@media (prefers-reduced-motion: no-preference) { .skeleton { animation: shimmer 1.4s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: 48px 40px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer p { color: var(--muted); font-size: 14px; max-width: 34ch; margin-top: 12px; }
.footer h3, .footer h4 { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { text-decoration: none; color: var(--muted); font-size: 15px; }
.footer ul a:hover { color: var(--text); }
.footer-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; }
.footer-base .vc { color: var(--muted); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .wrap { padding-inline: 16px; }
  .section { padding-block: 72px; }
  .card { padding: 22px; }
}

/* ---------- legal pages (privacy / terms) ---------- */
.legal-hero { padding: 64px 0 40px; border-bottom: 1px solid var(--line); }
.legal-hero h1 { font-size: clamp(38px, 5.5vw, 60px); margin-top: 14px; }
.legal-hero p { color: var(--muted); font-size: 18px; margin-top: 14px; max-width: 64ch; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; padding-block: 48px 64px; }
.toc { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; }
.toc h2 { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.toc a { display: block; padding: 7px 12px; border-left: 2px solid var(--line); color: var(--muted); text-decoration: none; font-size: 14px; transition: color .15s, border-color .15s; }
.toc a:hover { color: var(--text); }
.toc a.active { color: var(--text); border-left-color: var(--violet); }
.prose { max-width: 74ch; }
.prose section { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.prose section:last-child { border-bottom: 0; }
.prose h2 { font-size: 26px; font-weight: 600; margin-bottom: 16px; display: flex; gap: 14px; align-items: baseline; }
.prose h2 .n { font-family: var(--mono); font-size: 13px; color: var(--violet); font-weight: 500; }
.prose h3 { font-size: 18px; font-weight: 600; margin: 24px 0 8px; }
.prose p, .prose li { color: #cfc9e3; font-size: 16px; line-height: 1.75; }
.prose p + p { margin-top: 14px; }
.prose ul { padding-left: 20px; margin: 12px 0 0; display: grid; gap: 8px; }
.prose li::marker { color: var(--violet); }
.prose strong { color: var(--text); }
.prose a { color: var(--magenta); text-underline-offset: 3px; }
.callout { margin: 18px 0; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--grad-soft); font-size: 15px; color: var(--text); }
.callout.warn { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.06); }
.kv { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 15px; }
.kv th, .kv td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.kv th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.kv td:first-child { color: var(--text); font-weight: 600; width: 30%; min-width: 8em; } /* (13 Nov 2026: wraps, so long names don't squash the other columns) */
.kv td:nth-child(3), .kv th:nth-child(3) { width: 18%; }
.kv td { color: #cfc9e3; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } .toc { position: static; max-height: none; } .toc ol { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .toc ol { grid-template-columns: minmax(0, 1fr); } .kv td:first-child { white-space: normal; } .kv th, .kv td { padding: 10px 8px; } }

/* ==========================================================================
   PORTAL APP SHELL  (dashboard, profile, utilities, admin, owner)
   ========================================================================== */
.app { display: grid; grid-template-columns: var(--side-w, 252px) minmax(0, 1fr); min-height: 100vh; }
.app > div { min-width: 0; }
.side {
  position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 6px;
  padding: 20px 14px; border-right: 1px solid var(--line); background: rgba(9, 8, 17, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 60;
  /* scrolls when the links don't fit (more servers, a short phone or laptop screen), instead of cutting off the bottom */
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.side > * { flex-shrink: 0; }
.side .brand { padding: 4px 8px 18px; }
.side-label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 14px 12px 6px; }
.side-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px; transition: background .15s, color .15s;
}
.side-link svg { width: 18px; height: 18px; flex: none; }
.side-link:hover { background: var(--surface); color: var(--text); }
.side-link[aria-current="page"] { background: var(--glow-soft); color: var(--text); box-shadow: inset 0 0 0 1px rgba(168,85,247,.25); }
.side-link[aria-current="page"] svg { color: var(--magenta); }
.side-link.owner svg { color: var(--text); }
.side-gicon { width: 20px; height: 20px; border-radius: 6px; flex: none; object-fit: cover; }
.side-link:not(.side-site) span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.side-legal { display: flex; gap: 14px; padding: 0 12px; font-size: 13px; }
.side-legal a { color: var(--faint); text-decoration: none; }
.side-legal a:hover { color: var(--muted); }

.user-chip { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.user-chip img, .user-chip .ph { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover; background: var(--surface-3); }
.user-chip .who-n { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .who-s { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip > div { min-width: 0; flex: 1; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer; text-decoration: none; flex: none; }
.icon-btn:hover { color: var(--text); border-color: var(--violet); }
.icon-btn svg { width: 16px; height: 16px; }

.topbar { display: none; }
.main { min-width: 0; padding: 36px 40px 64px; }
.main-inner { max-width: 1160px; margin: 0 auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.page-head h1 { font-size: clamp(28px, 3.6vw, 40px); margin-top: 8px; }
.page-head p { color: var(--muted); margin-top: 6px; }

.panel { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.panel-head h2 svg { width: 18px; height: 18px; color: var(--magenta); }
.panel-body { padding: 20px 22px; }
.panel-note { font-family: var(--mono); font-size: 12px; color: var(--faint); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.kpi { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); min-width: 0; }
.kpi-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.kpi-value { font-family: var(--display); font-weight: 700; font-size: 26px; margin-top: 6px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub { font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* form controls */
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; color: var(--muted); font-weight: 500; }
.input, .select {
  width: 100%; min-height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--bg); color: var(--text); font: 15px var(--body); transition: border-color .15s, box-shadow .15s;
}
.select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a59ec0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.input:focus, .select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--glow-soft); }
.input::placeholder { color: var(--faint); }
.sa-ctl { min-height: 36px; width: auto; min-width: 140px; font-size: 14px; } /* (13 Nov 2026) the analytics filters */
.input[type="date"] { color-scheme: dark; } :root[data-theme="light"] .input[type="date"] { color-scheme: light; }
.input-group { display: flex; gap: 8px; }
.input-group .input { flex: 1; min-width: 0; }
.search { position: relative; }
.search svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.search .input { padding-left: 38px; }

.btn-danger { background: rgba(251,113,133,.1); border-color: rgba(251,113,133,.35); color: var(--red); }
.btn-danger:hover { background: rgba(251,113,133,.18); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--line-2); color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.badge.admin { color: var(--magenta); border-color: rgba(232,121,249,.35); background: rgba(232,121,249,.08); }
.badge.ok { color: var(--green); border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.08); }
.badge.warn { color: var(--amber); border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.08); }

.progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--grad); transition: width .6s ease; }

/* drawer (right-side sheet) */
.scrim { position: fixed; inset: 0; background: rgba(4,3,9,.66); backdrop-filter: blur(3px); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .2s; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); z-index: 100;
  background: var(--bg-2); border-left: 1px solid var(--line-2); overflow-y: auto;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: -40px 0 80px -40px rgba(0,0,0,.8);
}
.drawer.open { transform: none; }
.drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: rgba(12,10,22,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.drawer-head img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--surface-3); flex: none; }
.drawer-head h2 { font-size: 20px; }
.drawer-head .grow { flex: 1; min-width: 0; }
.drawer-head .grow > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-body { padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.drawer-section { min-width: 0; }
.drawer-section h3 { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .drawer, .scrim { transition: none; } }

/* toast */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); }
.toast { padding: 12px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 14px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); display: flex; gap: 10px; align-items: center; }
.toast.ok { border-color: rgba(52,211,153,.4); }
.toast.err { border-color: rgba(251,113,133,.45); }
.toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); flex: none; }
.toast.ok::before { background: var(--green); } .toast.err::before { background: var(--red); }

@media (max-width: 1080px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { z-index: 95; position: fixed; left: 0; top: 0; bottom: 0; width: 272px; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 40px 0 80px -40px rgba(0,0,0,.8); }
  .app[data-nav="open"] .side { transform: none; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 50; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: rgba(7,6,13,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
  .main { padding: 24px 16px 56px; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- switch (checkbox) ---------- */
.tgl { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.tgl input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.tgl span { position: absolute; inset: 0; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--line-2); transition: background .2s, border-color .2s; }
.tgl span::before { content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; border-radius: 50%; background: var(--faint); transition: transform .2s, background .2s; }
.tgl input:checked + span { background: var(--grad); border-color: transparent; }
.tgl input:checked + span::before { transform: translateX(20px); background: #fff; }
.tgl input:focus-visible + span { outline: 2px solid var(--magenta); outline-offset: 2px; }
.tgl input:disabled { cursor: not-allowed; }
.tgl input:disabled + span { opacity: .45; }
.range { width: 100%; accent-color: var(--violet); }

/* "Back to the main website" at the top of the portal menu (Oct 2026: people didn't know the logo goes home) */
.side-link.side-site { border: 1px solid var(--line-2); margin-bottom: 10px; color: var(--text); }
.side-link.side-site:hover { border-color: var(--violet); }

/* owner console 8-week health chart */
.wk-bar { cursor: default; outline: none; }
.wk-bar:hover path, .wk-bar:focus path { filter: brightness(1.25); }
.wk-bar:focus-visible rect { stroke: var(--violet); stroke-width: 1; }

/* iPhone date/time boxes have a built-in width and ran off the side of cards (Oct 2026) */
input[type="date"], input[type="time"], input[type="datetime-local"] { min-width: 0; max-width: 100%; box-sizing: border-box; }
input[type="date"]::-webkit-date-and-time-value, input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; }

/* inputs and dropdowns are never wider than their space (iPhone Safari sizes a dropdown to its longest option) */
.input, .select, select, textarea { max-width: 100%; min-width: 0; }
.field { min-width: 0; grid-template-columns: minmax(0, 1fr); }

/* phones: big numbers in stat tiles wrap instead of being cut off (e.g. a 7-digit wallet) */
@media (max-width: 520px) { .kpi-value { font-size: 21px; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; } .kpi-sub { white-space: normal; } }

/* ---------- light (late Oct 2026: js/theme.js sets <html data-theme="light">) ---------- */
:root[data-theme="light"] {
  --bg:        #f7f5fc;
  --bg-2:      #f0ecf9;
  --surface:   #ffffff;
  --surface-2: #f6f2fe;
  --surface-3: #ebe4fa;
  --line:      #e2dbf1;
  --line-2:    #cdc2ea;

  --text:      #1b1530;
  --muted:     #554d73;
  --faint:     #68628a; /* (was #8a83a6, 3.3:1; now 5.3:1) */

  --violet:    #8b3fe6;
  --violet-2:  #7c4ef0;
  --violet-3:  #6d28d9;
  --magenta:   #a21caf; /* (was #c026d3; now 5.9:1 as text) */
  --glow:      rgba(139, 63, 230, .28);
  --glow-soft: rgba(139, 63, 230, .10);

  --green:     #059669;
  --amber:     #b45309;
  --red:       #be123c;
  --gold:      #b7791f;
  --silver:    #64748b;
  --bronze:    #b45f22;
  --grad-soft: linear-gradient(135deg, rgba(139,63,230,.12), rgba(192,38,211,.06));
  color-scheme: light;
}
:root[data-theme="light"] ::selection { background: rgba(139, 63, 230, .25); color: var(--text); }
:root[data-theme="light"] .ambient::before { opacity: .55; }
:root[data-theme="light"] .ambient::after { background-image: linear-gradient(rgba(40,20,90,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(40,20,90,.045) 1px, transparent 1px); }
:root[data-theme="light"] .pill { background: rgba(255,255,255,.8); }
:root[data-theme="light"] .btn-ghost { background: rgba(255,255,255,.75); }
:root[data-theme="light"] .nav { background: rgba(247,245,252,.82); border-bottom-color: var(--line); }
:root[data-theme="light"] .side { background: rgba(255,255,255,.88); }
:root[data-theme="light"] .drawer-head { background: rgba(255,255,255,.94); }
:root[data-theme="light"] .scrim { background: rgba(30,20,60,.32); }
:root[data-theme="light"] table.data td { border-bottom-color: var(--line); }
:root[data-theme="light"] .prose p, :root[data-theme="light"] .prose li, :root[data-theme="light"] .kv td { color: #3b3456; }
:root[data-theme="light"] .side, :root[data-theme="light"] .drawer, :root[data-theme="light"] .toast { box-shadow: 0 20px 40px -24px rgba(40,20,90,.25); }
@media (max-width: 1060px) { :root[data-theme="light"] .nav-links { background: rgba(247,245,252,.97); } }
@media (max-width: 900px) { :root[data-theme="light"] .topbar { background: rgba(247,245,252,.88); } }
/* the switch (portal sidebar and the site's nav) */
.theme-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font: 13px var(--body); cursor: pointer; }
.theme-btn:hover { color: var(--text); border-color: var(--violet); }
/* parts drawn over the dark banner artwork keep the dark colours in light mode (class="keep-dark", and the
   banner heroes by name: member pages, server pages, your profile, the portal home) */
:root[data-theme="light"] :is(.keep-dark, .mp-hero, .sp-hero, .id-card, .hello) {
  --bg: #07060d; --bg-2: #0c0a16; --surface: #110e1e; --surface-2: #181429; --surface-3: #211b38; --line: #261f40; --line-2: #362c5a;
  --text: #ece9f7; --muted: #a59ec0; --faint: #6f6890; --violet: #a855f7; --magenta: #e879f9;
  --green: #34d399; --amber: #fbbf24; --red: #fb7185; --gold: #fcd34d;
  color: var(--text); color-scheme: dark;
}
:root[data-theme="light"] :is(.keep-dark, .mp-hero, .sp-hero, .id-card, .hello) .btn-ghost { background: rgba(17,14,30,.6); }
/* light mode: page-level panels that were drawn dark on purpose for the dark theme */
:root[data-theme="light"] .subnav { background: rgba(255,255,255,.88); }
:root[data-theme="light"] dialog.modal::backdrop { background: rgba(30,20,60,.35); }
:root[data-theme="light"] .convos { background: var(--bg-2); }
:root[data-theme="light"] .tools { background: var(--bg-2); }
:root[data-theme="light"] .pane-head { background: rgba(255,255,255,.82); }
:root[data-theme="light"] .bubble pre, :root[data-theme="light"] .dbg pre { background: #f3f0fb; }
:root[data-theme="light"] .me-tabs { background: var(--surface-2); }
:root[data-theme="light"] .login-card { background: rgba(255,255,255,.9); }
/* the website's Discord look-alikes follow Discord's own light theme */
:root[data-theme="light"] .w-embed { background: #f2f3f5; }
:root[data-theme="light"] .w-embed-title { color: #060607; }
:root[data-theme="light"] .w-embed-text { color: #313338; }
:root[data-theme="light"] .w-embed-foot { color: #5c5e66; }

/* Server layout preview, drawn like Discord's channel list (JADE.layoutPreview · blueprints and /template layouts) */
.dsb { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px; font-size: 14px; max-height: 620px; overflow-y: auto; }
.dsb-head { font-weight: 700; padding: 4px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.dsb-cat { margin: 10px 0 4px; }
.dsb-cat-name { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 2px 6px; }
.dsb-cat-name span { display: inline-block; width: 12px; }
.dsb-ch { display: flex; align-items: center; gap: 6px; padding: 4px 8px; margin: 1px 0 1px 8px; border-radius: 6px; color: var(--muted); }
.dsb-ch:hover { background: var(--line); color: inherit; }
.dsb-ic { width: 18px; text-align: center; opacity: .8; flex: none; }
.dsb-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dsb-lock { font-size: 11px; opacity: .7; }
.dsb-chip { margin-left: auto; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-2); white-space: nowrap; }
.dsb-chip.ok { color: var(--green); border-color: rgba(52,211,153,.35); }
.dsb-chip.warn { color: var(--amber); border-color: rgba(251,191,36,.35); }
.dsb-chip.err { color: #f87171; border-color: rgba(248,113,113,.4); }
.dsb-ch.gone .dsb-n { text-decoration: line-through; }
.dsb-empty { font-style: italic; opacity: .6; }
.dsb-archive, .dsb-delete { opacity: .65; }
.bp-ops { display: grid; gap: 4px; max-height: 420px; overflow-y: auto; font-size: 13px; }
.bp-ops div { padding: 4px 8px; border-radius: 6px; background: var(--surface-2); }
.bp-ops .danger { color: #f87171; }

/* ---- log lists (admin panel → Logs, owner console → Network logs): a row each, details on a tap ---- */
.lg-list { display: grid; gap: 2px; }
.lg-day { margin: 14px 0 4px; font: 600 12px var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.lg-day:first-child { margin-top: 0; }
.lg-row { padding: 9px 12px; border-left: 3px solid var(--lg, #94a3b8); border-radius: 8px; background: var(--surface-2, rgba(255,255,255,.03)); }
.lg-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.lg-ico { flex: none; }
.lg-what { font-size: 14px; }
.lg-who, .lg-who-x { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--magenta, #e879f9); cursor: pointer; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-who-x { color: var(--text); cursor: default; }
.lg-by { font-size: 12.5px; color: var(--faint); }
.lg-by .lg-who, .lg-by .lg-who-x { font-size: 12.5px; }
.lg-srv { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.lg-time { margin-left: auto; font: 500 12px var(--mono, monospace); color: var(--faint); }
.lg-sum, .lg-more summary { margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.lg-more summary { cursor: pointer; list-style: none; }
.lg-more summary::-webkit-details-marker { display: none; }
.lg-more summary::after { content: ' ▾'; color: var(--faint); }
.lg-more[open] summary::after { content: ' ▴'; }
.lg-more > div { margin-top: 6px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.lg-k { display: inline-block; min-width: 52px; font: 600 11px var(--mono, monospace); text-transform: uppercase; color: var(--faint); }

/* ---- overflow guards (6 Nov 2026): long words, links, ids and paths wrap inside their box instead of widening the page ---- */
.panel, .panel-body, .card, .view, main, section { min-width: 0; }
p, li, dd, .hint, .panel-note, .panel-body, .card, .r, .status-row, .lg-row { overflow-wrap: anywhere; }
table, .btn, .chip, .pn-chip, .kbd, .badge, nav, .side, .tabs, .subnav { overflow-wrap: normal; }
img, video, iframe, svg, canvas { max-width: 100%; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
/* phones zoom in when you tap a box with text under 16px: 16px there */
@media (max-width: 760px), (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .input, .select { font-size: 16px !important; } }

/* ---- one server, its places (7 Nov 2026): admin panel · server tools · community owner · your community ---- */
.place-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 16px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, rgba(255,255,255,.02)); }
.place-srv { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; font-size: 14px; }
.place-srv img { border-radius: 6px; }
.place { padding: 6px 12px; border-radius: 9px; font-size: 14px; color: var(--muted); text-decoration: none; }
.place:hover { color: var(--text); background: var(--surface-2, rgba(255,255,255,.05)); }
.place.on { color: var(--text); background: var(--surface-2, rgba(255,255,255,.08)); font-weight: 600; }
.place-you { margin-left: auto; font-size: 12px; color: var(--faint); padding: 0 8px; }
/* the member side: one community, four views */
.community-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 18px; }
.ctab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--muted); text-decoration: none; }
.ctab svg { width: 16px; height: 16px; }
.ctab:hover { color: var(--text); border-color: var(--line-2); }
.ctab.on { color: var(--text); border-color: var(--violet); background: var(--glow-soft); font-weight: 600; }
.ctab-more { margin-left: auto; display: inline-flex; gap: 12px; align-items: center; font-size: 13px; }
.ctab-more a { color: var(--muted); }
@media (max-width: 640px) { .place-you, .ctab-more { margin-left: 0; width: 100%; } }

/* ---- the portal's levels (8 Nov 2026): Community · Server admin · Server owner · Network ---- */
.side-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 10px 4px 2px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; }
.lvl { font: inherit; font-size: 12.5px; padding: 7px 6px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.lvl:hover { color: var(--text); background: var(--surface); }
.lvl.on { color: var(--text); background: var(--glow-soft); box-shadow: inset 0 0 0 1px var(--violet); font-weight: 600; }
.side-note { padding: 4px 12px; font-size: 13px; color: var(--faint); }

/* (8 Nov 2026) a row of things side by side, wrapping on small screens. It was only defined on the Play page, so
   rows everywhere else (owner console, Community owner, admin panel) ran their words together. */
.line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
/* small pictures with a set size (server icons, avatars) keep it: "images fit their box" squeezed them in narrow table cells */
img[width][height] { max-width: none; flex: none; }

/* (8 Nov 2026) every sidebar icon white */
.side-link svg { color: var(--text); }
.user-chip .ph { display: grid; place-items: center; font-weight: 600; color: var(--text); }
/* the server picker at the top of the Server admin and Server owner sides */
.side-pick { width: calc(100% - 8px); margin: 4px 4px 6px; }

/* (8 Nov 2026) the level switcher: one, two, three or four sides; the odd one out spans the whole width */
.side-levels .lvl:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* (8 Nov 2026) the sidebar folds to its icons, and its edge can be dragged (desktop only) */
.side-fold { position: absolute; top: 22px; right: 10px; z-index: 2; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; font: 600 14px/1 var(--body); }
.side-fold:hover { color: var(--text); border-color: var(--line-2); }
.side-grip { position: absolute; top: 0; right: -3px; bottom: 0; width: 6px; cursor: col-resize; z-index: 3; }
.side-grip:hover, .side-grip:active { background: linear-gradient(90deg, transparent 2px, var(--violet) 2px, var(--violet) 4px, transparent 4px); }
.app[data-side-mini] { --side-w: 72px; }
.app[data-side-mini] .side { padding-inline: 10px; align-items: center; }
.app[data-side-mini] .side-fold { position: static; margin: 0 auto 8px; }
.app[data-side-mini] .side-grip, .app[data-side-mini] .brand-name, .app[data-side-mini] .side-label, .app[data-side-mini] .side-link span, .app[data-side-mini] .side-levels, .app[data-side-mini] .side-pick, .app[data-side-mini] .side-note, .app[data-side-mini] #presence-bar, .app[data-side-mini] .user-chip > div, .app[data-side-mini] .user-chip .icon-btn, .app[data-side-mini] .theme-btn, .app[data-side-mini] .side-legal { display: none !important; }
.app[data-side-mini] .side-link { justify-content: center; padding-inline: 0; width: 44px; }
.app[data-side-mini] .side .brand { padding: 4px 0 10px; justify-content: center; }
.app[data-side-mini] .user-chip { justify-content: center; padding: 6px; }
@media (max-width: 900px) { .side-fold, .side-grip { display: none; } .app[data-side-mini] { --side-w: auto; } }

/* (8 Nov 2026) the household member that looks after a page (portal.js keeperChip) */
.keeper { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--muted); width: fit-content; }
/* (8 Nov 2026) a different member takes over the page: a brief glow */
.keeper canvas { width: 18px; height: 18px; }
.keeper-pass { animation: keeper-pass 2.6s ease-out; }
@keyframes keeper-pass { 0% { box-shadow: 0 0 0 0 rgba(168,85,247,.7); border-color: var(--violet, #a855f7); color: var(--text); } 100% { box-shadow: 0 0 0 14px rgba(168,85,247,0); } }
@media (prefers-reduced-motion: reduce) { .keeper-pass { animation: none; } }
/* (8 Nov 2026) inside Discord as an Activity: no portal sidebar, the arcade gets the whole frame */
html[data-activity] #side, html[data-activity] .side-fold, html[data-activity] #presence-bar, html[data-activity] #flag-btn { display: none !important; }
html[data-activity] .app { grid-template-columns: minmax(0, 1fr) !important; }