/* ==========================================================================
   RECZONE, next design system
   Loaded after style.css. Everything here is the new look: the tokens, the
   glass treatment, the nav/footer, and an override layer that re-skins the
   class vocabulary the existing pages are already built from (glass-card,
   page-title, btn-primary, form-input, ...) so every page picks the redesign
   up without being rewritten.
   ========================================================================== */


  :root {
    --bg:        #050507;
    --blue:      #4d8dff;
    --blue-hot:  #6ba3ff;
    --blue-deep: #2563eb;
    --blue-soft: #8fbaff;
    --glow-1:    rgba(77,141,255,.55);
    --glow-2:    rgba(77,141,255,.30);
    --glow-3:    rgba(77,141,255,.14);
    --text:      #f2f3f5;
    --dim:       rgba(242,243,245,.55);
    --dimmer:    rgba(242,243,245,.38);
    --line:      rgba(255,255,255,.065);
    --radius:    18px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg); color: var(--text); overflow-x: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  a { text-decoration: none; color: inherit; }

  /* ── Background layers ─────────────────────────────────────── */
  .bg-logos {
    position: fixed; inset: -20%; z-index: 0; pointer-events: none;
    background-image: url('/img/logo-watermark.png');
    background-size: 150px 150px; background-repeat: repeat;
    opacity: .035; filter: brightness(0) invert(1);
    transform: rotate(-12deg);
    animation: drift 40s linear infinite;
  }
  @keyframes drift { from { background-position: 0 0; } to { background-position: 150px 150px; } }

  /* Film grain, the single biggest thing separating a designed dark UI
     from a flat generated one. Keep it faint. */
  .bg-grain {
    position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  ::selection { background: rgba(77,141,255,.3); color: #fff; }

  .wrap { position: relative; z-index: 1; }
  .container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

  /* ── Liquid glass ──────────────────────────────────────────── */
  .glass {
    background: linear-gradient(158deg, rgba(255,255,255,.032), rgba(255,255,255,.008));
    border: 1px solid var(--line);
  /* No backdrop-filter here on purpose. The page background is very nearly
     flat, so blurring it changes almost nothing visually, but each blurred
     surface is its own compositing layer that re-blurs on every repaint, and
     a long page carrying dozens of them makes scrolling and clicking
     unresponsive, Safari worst of all. It is kept only for the nav and the
     dropdown menus, where content genuinely moves behind the surface.
     The layered gradient and hairline border are what read as glass. */

    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 20px 45px -25px rgba(0,0,0,.95);
    border-radius: var(--radius);
  }

  /* ── Nav ───────────────────────────────────────────────────── */
  /* Flat, full-width bar with the row centred in a container, matching the
     reference exactly: no floating panel, no rounded edges. */
  nav {
    /* Above the announcement banner, which carries an inline z-index of 100 
       otherwise the banner paints over the open dropdown menus. */
    position: sticky; top: 0; z-index: 400;
    background: linear-gradient(180deg, rgba(14,16,22,.96), rgba(9,10,14,.96));
    border-bottom: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    transition: background .3s, border-color .3s;
  }
  nav.scrolled {
    background: linear-gradient(180deg, rgba(11,13,18,.98), rgba(7,8,11,.98));
    border-bottom-color: rgba(255,255,255,.1);
  }
  .rzn-bar {
    display: flex; align-items: center; gap: 26px; height: 62px;
    /* Content width matches .container so the bar lines up with the page. */
    max-width: 1256px; margin: 0 auto; padding: 0 28px;
  }
  .brand { display: flex; align-items: center; gap: 11px; font-weight: 900; font-size: 1.06rem; letter-spacing: .045em; }
  .brand img { width: 30px; height: 30px; border-radius: 8px; }
  .rzn-links { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
  .rzn-links > a, .dd > .dd-trigger {
    display: flex; align-items: center; gap: 5px; padding: 8px 13px; border-radius: 10px;
    font-size: .875rem; font-weight: 600; color: var(--dim); cursor: pointer;
    transition: color .15s, background .15s;
  }
  .rzn-links > a:hover, .dd:hover > .dd-trigger { color: var(--text); background: rgba(255,255,255,.05); }
  /* A direct link in the row sits at full strength, unlike the dropdown
     triggers beside it. */
  .rzn-links > a { color: rgba(242,243,245,.92); font-weight: 700; }
  .nav-right { display: flex; align-items: center; gap: 7px; margin-left: auto; }

  .dd { position: relative; }
  .dd-menu {
    position: absolute; top: calc(100% + 10px); right: 0; min-width: 194px; padding: 7px;
    background: rgba(10,10,13,.95);
    border: 1px solid var(--line); border-radius: 14px;
    backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 50px -18px rgba(0,0,0,.95);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .dd:hover .dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .dd-menu a {
    display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
    font-size: .855rem; font-weight: 600; color: var(--dim); transition: background .13s, color .13s;
  }
  .dd-menu a:hover { background: rgba(255,255,255,.06); color: var(--text); }
  .dd-sep { height: 1px; background: var(--line); margin: 6px 4px; }
  .dd-who {
    padding: 4px 11px 2px; font-size: .74rem; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--dimmer);
  }

  .icon-btn {
    position: relative; width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--dim); font-size: 1rem; cursor: pointer; transition: background .15s, color .15s;
  }
  .icon-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
  .icon-btn svg { width: 18px; height: 18px; }
  .chev { width: 13px; height: 13px; opacity: .65; }
  .icon-btn .count {
    position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 99px; background: #2f6bdd; border: 2px solid #0b0d12;
    font-size: .6rem; font-weight: 800; color: #fff;
    display: flex; align-items: center; justify-content: center;
  }
  .rzn-tag {
    display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; margin-right: 4px;
    border-radius: 99px; font-size: .685rem; font-weight: 800; letter-spacing: .1em;
    white-space: nowrap; color: #7ba8ff;
    background: rgba(45,85,170,.22);
    border: 1px solid rgba(96,150,255,.42);
    transition: background .16s, border-color .16s, color .16s;
  }
  .rzn-tag:hover { background: rgba(45,85,170,.32); border-color: rgba(96,150,255,.6); color: #a9c7ff; }
  .rzn-tag::before {
    content:''; width:5px; height:5px; border-radius:50%; background: #6096ff;
  }

  .rzn-avatar {
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer; margin-left: 4px;
    display: block; object-fit: cover;
    border: 1px solid rgba(255,255,255,.14);
    transition: border-color .15s;
  }
  .rzn-avatar:hover { border-color: rgba(255,255,255,.4); }

  /* ── Buttons ───────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 12px; border: 1px solid transparent;
    font-size: .89rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: transform .16s ease, background .16s, border-color .16s, box-shadow .16s;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-white {
    background: #fff; color: #0a0a0c; position: relative; overflow: hidden;
    box-shadow: 0 10px 26px -12px rgba(255,255,255,.5);
  }
  .btn-white::before {
    content: ''; position: absolute; inset: 0; transform: translateX(-120%);
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  }
  .btn-white:hover::before { transform: translateX(120%); transition: transform .7s ease; }
  .btn-white:hover { box-shadow: 0 14px 32px -12px rgba(255,255,255,.62); }
  .btn-glass {
    color: var(--text); border-color: var(--line);
    background: linear-gradient(158deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  }
  .btn-glass:hover { border-color: rgba(255,255,255,.26); background: linear-gradient(158deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); }
  .btn-blue {
    background: linear-gradient(160deg, var(--blue-hot), var(--blue-deep)); color: #fff;
    box-shadow: 0 8px 26px -8px var(--glow-1), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .btn-blue:hover { box-shadow: 0 10px 32px -8px var(--glow-1), inset 0 1px 0 rgba(255,255,255,.26); }
  .btn-sm { padding: 9px 16px; font-size: .82rem; border-radius: 10px; }

  /* ── Hero (RECZONE layout: copy left, countdown right) ─────── */
  .hero { position: relative; padding: 72px 0 40px; }
  .hero-inner { display: grid; grid-template-columns: minmax(0,1fr) 370px; gap: 52px; align-items: center; }
  .dot { width: 7px; height: 7px; border-radius: 50%; }
  /* Steady, not blinking. A dot that winks at you reads as a machine
     talking rather than a page. */
  .dot-live { background: #35d07f; box-shadow: 0 0 9px rgba(53,208,127,.9); }

  .badge-pill {
    display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 99px;
    font-size: .755rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
    color: var(--blue-soft);
    background: linear-gradient(160deg, rgba(77,141,255,.20), rgba(77,141,255,.07));
    border: 1px solid rgba(77,141,255,.34); margin-bottom: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  }
  h1.hero-title {
    font-size: clamp(2.5rem, 5.2vw, 4.05rem); font-weight: 900; line-height: 1.03;
    letter-spacing: -.034em; margin-bottom: 20px;
  }
  h1.hero-title .accent {
    background: linear-gradient(176deg, #a7ccff 0%, var(--blue-hot) 38%, var(--blue) 72%, var(--blue-deep) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero-sub { font-size: 1.05rem; line-height: 1.68; color: var(--dim); max-width: 500px; margin-bottom: 26px; }
  .hero-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 24px; }
  .chips { display: flex; gap: 9px; flex-wrap: wrap; }
  .chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px;
    font-size: .775rem; font-weight: 500; color: var(--dimmer); border: 1px solid rgba(255,255,255,.06);
  }

  /* Countdown */
  .cd { padding: 26px 28px; text-align: center; }
  .cd-done { font-size: 1.15rem; font-weight: 800; color: var(--blue-soft); }
  .cd-label { font-size: .695rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .cd-units { display: flex; align-items: baseline; justify-content: center; gap: 5px; }
  .cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
  .cd-num { font-size: 2.05rem; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .cd-num.tick { animation: tick .45s cubic-bezier(.22,1,.36,1); }
  @keyframes tick {
    0%   { transform: translateY(-4px); opacity: .45; }
    100% { transform: translateY(0);    opacity: 1; }
  }
  .cd-cap { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dimmer); margin-top: 4px; }
  .cd-sep { font-size: 1.5rem; font-weight: 800; color: var(--dimmer); }

  @media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .cd { max-width: 420px; }
  }

  /* ── Sections ──────────────────────────────────────────────── */
  .section { padding: 54px 0; position: relative; }
  /* Hairline rule so sections read as separated rather than floating in void */
  .section + .section::before {
    content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07) 18%, rgba(255,255,255,.07) 82%, transparent);
  }
  .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
  .eyebrow {
    font-size: .705rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--blue-hot); margin-bottom: 9px;
  }
  .section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 900; letter-spacing: -.025em; text-transform: uppercase; }
  .section-sub { color: var(--dim); font-size: .95rem; margin-top: 8px; }

  .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: 16px; }
  .card { padding: 28px; position: relative; overflow: hidden;
    transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s, box-shadow .28s; }
  /* Hairline that catches light along the top edge, brightening on hover */
  .card::after {
    content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(143,186,255,.42), transparent);
    opacity: .55; transition: opacity .28s, left .28s, right .28s;
  }
  .card:hover::after { opacity: 1; left: 6%; right: 6%; }
  .card:hover {
    transform: translateY(-5px); border-color: rgba(143,186,255,.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 26px 50px -28px rgba(0,0,0,.95);
  }
  .card-icon {
    width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
    color: var(--blue-hot);
    background: linear-gradient(158deg, rgba(77,141,255,.22), rgba(77,141,255,.06));
    border: 1px solid rgba(77,141,255,.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  }
  .card:hover .card-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
  .card h3 { font-size: 1.06rem; font-weight: 800; margin-bottom: 8px; letter-spacing: -.01em; }
  .card p { font-size: .885rem; line-height: 1.62; color: var(--dim); }
  .card-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
    font-size: .83rem; font-weight: 700; color: var(--blue-hot); transition: gap .16s;
  }
  .card-link:hover { gap: 9px; }

  /* News */
  .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 16px; }
  .news-card { padding: 26px; display: block;
    transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s, box-shadow .28s; }
  .news-card:hover {
    transform: translateY(-5px); border-color: rgba(143,186,255,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 26px 50px -28px rgba(0,0,0,.95);
  }
  .news-card h3 { transition: color .2s; }
  .news-card:hover h3 { color: var(--blue-soft); }
  .news-meta { font-size: .735rem; font-weight: 600; color: var(--dimmer); letter-spacing: .03em; margin-bottom: 11px; }
  .news-card h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: 9px; line-height: 1.35; }
  .news-card p { font-size: .865rem; line-height: 1.6; color: var(--dim); }

  /* Discord */
  .dc { padding: 24px; }
  .dc-head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
  .dc-icon { width: 46px; height: 46px; border-radius: 13px; background: rgba(88,101,242,.14); border: 1px solid rgba(88,101,242,.3); display: flex; align-items: center; justify-content: center; }
  .dc-icon img { width: 26px; height: 26px; border-radius: 6px; }
  .dc-name { font-weight: 800; font-size: 1rem; }
  .dc-count { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--dim); margin-top: 3px; }
  .dc-member:hover { background: rgba(255,255,255,.07); border-color: rgba(77,141,255,.3); }
  .dc-members { display: flex; flex-wrap: wrap; gap: 9px; }
  .dc-member { display: flex; align-items: center; gap: 9px; padding: 8px 13px 8px 9px; border-radius: 99px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); font-size: .82rem; font-weight: 600; }
  .dc-av { width: 26px; height: 26px; border-radius: 50%; display: block; object-fit: cover; }

  /* CTA */
  .cta { padding: 60px 36px; text-align: center; position: relative; overflow: hidden; }
  .cta::before {
    content: ''; position: absolute; inset: 0;
    pointer-events: none;
  }
  .cta > * { position: relative; }
  .cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 11px; }
  .cta p { color: var(--dim); margin-bottom: 26px; font-size: .98rem; }

  /* Footer */
  footer { border-top: 1px solid var(--line); padding: 54px 0 40px; margin-top: 40px; }
  .foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; margin-bottom: 40px; }
  .foot-brand { display: flex; align-items: center; gap: 11px; font-weight: 900; letter-spacing: .045em; margin-bottom: 13px; }
  .foot-brand img { width: 28px; height: 28px; border-radius: 8px; }
  .foot-about { font-size: .855rem; line-height: 1.65; color: var(--dim); max-width: 290px; }
  .foot-col h4 { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dimmer); margin-bottom: 14px; }
  .foot-col a { display: block; font-size: .865rem; color: var(--dim); padding: 5px 0; transition: color .13s; }
  .foot-col a:hover { color: var(--text); }
  .foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--dimmer); }

  /* Scroll reveal */
  .reveal, .reveal.in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
    .bg-logos { animation: none; }
  }

  @media (max-width: 880px) {
    .rzn-links { display: none; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  }

/* ==========================================================================
   Legacy vocabulary override
   style.css ships a light-first palette with a dark-theme layer on top. The
   rules below win on load order and re-skin those same components, so pages
   written against the old classes render in the new design untouched.
   ========================================================================== */

[data-theme="dark"] body,
body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* The old animated logo tile is replaced by .bg-logos, which is the same idea
   with the new opacity and drift. Keeping both would double the texture. */
.bg-anim { display: none !important; }

/* Links inherit their surroundings, but never buttons, which carry their own
   foreground. Both halves matter: without the :not(), [data-theme="dark"] a
   outranks .btn-white and paints the label the same colour as the button;
   without the a.btn rules below, the old stylesheet's link blue takes over
   instead. a.btn-white (0,2,1) clears [data-theme="dark"] a (0,1,1). */
[data-theme="dark"] a:not(.btn), a:not(.btn) { color: inherit; }
[data-theme="dark"] a:not(.btn):hover { color: inherit; }

a.btn, button.btn, a.btn:hover, button.btn:hover { color: var(--text); }
a.btn-white, a.btn-white:hover, button.btn-white,
a.btn-primary, a.btn-primary:hover, button.btn-primary { color: #0a0a0c; }
a.btn-blue, a.btn-blue:hover, button.btn-blue { color: #fff; }
a.btn-danger, a.btn-danger:hover, button.btn-danger { color: #f0666e; }
.content a:not(.btn):not(.card-link),
.page-section p a:not(.btn) { color: var(--blue-soft); }
.content a:not(.btn):hover { color: var(--blue-hot); }

h1, h2, h3, h4, h5, h6,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 {
  color: var(--text);
  letter-spacing: -.02em;
}

/* ── Page scaffolding ─────────────────────────────────────────────────── */
.page-section { padding: 54px 0 76px; position: relative; z-index: 1; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 940px; }

.page-header, .page-header-row { margin-bottom: 30px; }
.page-header-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
}
.page-title, [data-theme="dark"] .page-title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 900; letter-spacing: -.035em; line-height: 1.05;
  color: var(--text);
}
.page-subtitle, [data-theme="dark"] .page-subtitle {
  margin-top: 10px; font-size: .93rem; line-height: 1.6;
  color: var(--dim); max-width: 60ch;
}
.section-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.section-header { margin-bottom: 22px; }

/* Small uppercase rule under a page title, the same accent the hero uses. */
.page-title::after {
  content: ''; display: block; width: 54px; height: 3px; margin-top: 14px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), transparent);
  
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.glass-card,
[data-theme="dark"] .glass-card,
.glass-card-solid,
.feature-card, .lk-card, .mod-section, .wz-step,
.btn-glass, .btn-outline, .btn-secondary,
.rzn .auth-card-forced, .rzn .auth-card {
  /* Explicitly off, not merely omitted: style.css sets a blur on .glass-card,
     so dropping the declaration here would leave that one in force. The mod
     panel alone carries 17 of these. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.glass-card,
[data-theme="dark"] .glass-card,
.feature-card, .lk-card, .mod-section, .wz-step {
  background: linear-gradient(158deg, rgba(255,255,255,.032), rgba(255,255,255,.008));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 20px 45px -25px rgba(0,0,0,.95);
  border-radius: var(--radius);
  position: relative;
}
.glass-card { padding: 24px; }

/* Hairline catch-light along the top edge, reads as glass rather than a box. */
.glass-card::after, .feature-card::after {
  content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  pointer-events: none;
}

a.glass-card, .feature-card { transition: transform .22s, border-color .22s, box-shadow .22s; }
a.glass-card:hover, .feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(77,141,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 26px 55px -28px rgba(0,0,0,1);
}

.feature-icon {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 15px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(77,141,255,.22), rgba(77,141,255,.06));
  border: 1px solid rgba(77,141,255,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  color: var(--blue-soft);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 12px; border: 1px solid transparent;
  font-size: .875rem; font-weight: 700; letter-spacing: .01em;
  cursor: pointer; transition: transform .18s, background .18s, border-color .18s, box-shadow .18s;
  text-decoration: none; font-family: inherit;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm, .btn-outline-sm { padding: 9px 16px; font-size: .82rem; border-radius: 10px; }

.btn-primary, [data-theme="dark"] .btn-primary {
  background: #fff; color: #0a0a0c; border-color: #fff;
  box-shadow: 0 8px 26px -12px rgba(255,255,255,.5);
}
.btn-primary:hover { background: #fff; box-shadow: 0 12px 32px -12px rgba(255,255,255,.62); }

.btn-outline, [data-theme="dark"] .btn-outline,
.btn-glass, .btn-secondary {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.13);
  color: var(--text);
}
.btn-outline:hover, [data-theme="dark"] .btn-outline:hover,
.btn-glass:hover, .btn-secondary:hover {
  background: rgba(255,255,255,.085);
  border-color: rgba(255,255,255,.22);
}

.btn-blue, .btn-accent {
  background: linear-gradient(160deg, var(--blue), var(--blue-deep));
  border-color: rgba(255,255,255,.16); color: #fff;
  box-shadow: 0 10px 30px -12px var(--glow-1), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-danger {
  background: rgba(240,102,110,.12); border-color: rgba(240,102,110,.34); color: #f0666e;
}
.btn-danger:hover { background: rgba(240,102,110,.2); }

/* ── Forms ────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label, .form-label {
  display: block; margin-bottom: 7px;
  font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--dim);
}
.form-input, .form-select, .form-textarea,
[data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text); font: inherit; font-size: .9rem;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: rgba(77,141,255,.55);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px var(--glow-3);
}
.form-input::placeholder, .form-textarea::placeholder,
[data-theme="dark"] .form-input::placeholder { color: var(--dimmer); }
.form-select, select.form-input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f3f5' stroke-opacity='.55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 15px;
  padding-right: 38px;
}
.form-select option { background: #14141a; color: var(--text); }

/* ── Badges, chips, tables ────────────────────────────────────────────── */
.badge, .role-badge, .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 99px;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: var(--dim);
}
.badge-blue, .role-badge.mod, .role-badge.admin, .role-badge.edr, .role-badge.eld {
  color: var(--blue-soft);
  background: linear-gradient(160deg, rgba(77,141,255,.2), rgba(77,141,255,.07));
  border-color: rgba(77,141,255,.35);
  
}

.mod-table th, [data-theme="dark"] .mod-table th {
  color: var(--dimmer); border-color: var(--line);
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.mod-table td, [data-theme="dark"] .mod-table td { color: var(--text); border-color: var(--line); }
.mod-table tr:hover td, [data-theme="dark"] .mod-table tr:hover td { background: rgba(255,255,255,.035); }

/* ── Flash messages ───────────────────────────────────────────────────── */
.flash {
  border-radius: 12px; padding: 12px 16px; font-size: .87rem; font-weight: 600;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.flash-success { background: rgba(53,208,127,.1); border: 1px solid rgba(53,208,127,.3); color: #6ee7a8; }
.flash-error   { background: rgba(240,102,110,.1); border: 1px solid rgba(240,102,110,.32); color: #f0888f; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12); border-radius: 99px;
  border: 3px solid var(--bg); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); background-clip: padding-box; }

/* ==========================================================================
   Support
   ========================================================================== */
.eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 10px; }

.sp-grid { display: grid; grid-template-columns: minmax(0,1fr) 370px; gap: 22px; align-items: start; }

.sp-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sp-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.sp-filter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 700;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: var(--dim); transition: background .16s, border-color .16s, color .16s;
}
.sp-filter:hover { background: rgba(255,255,255,.075); color: var(--text); }
.sp-filter.is-on {
  background: #fff; border-color: #fff; color: #0a0a0c;
  box-shadow: 0 8px 22px -12px rgba(255,255,255,.5);
}
.sp-n { font-size: .7rem; font-weight: 800; opacity: .55; }
.sp-filter.is-on .sp-n { opacity: .5; }

.sp-search { position: relative; flex: 1; min-width: 210px; }
.sp-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--dimmer); pointer-events: none; }
.sp-search input {
  width: 100%; padding: 10px 14px 10px 36px; border-radius: 12px; font: inherit; font-size: .85rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: var(--text);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.sp-search input::placeholder { color: var(--dimmer); }
.sp-search input:focus { outline: none; border-color: rgba(77,141,255,.5); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px var(--glow-3); }
.sp-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .4; }

.sp-list { display: flex; flex-direction: column; gap: 11px; }

.sp-ticket { display: flex; gap: 15px; padding: 18px 20px; align-items: flex-start; }
.sp-ticket[hidden] { display: none; }
.sp-ticket-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
}
.sp-ticket-icon svg { width: 18px; height: 18px; }
.sp-ticket-main { flex: 1; min-width: 0; }
.sp-ticket-top { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 6px; }
.sp-ticket-top h3 { font-size: .97rem; font-weight: 800; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-ticket:hover .sp-ticket-top h3 { color: var(--blue-soft); }
.sp-ticket-preview {
  font-size: .845rem; line-height: 1.55; color: var(--dim); margin-bottom: 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-ticket-meta { display: flex; align-items: center; gap: 8px; font-size: .755rem; font-weight: 600; color: var(--dimmer); }
.sp-id { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.sp-dot { opacity: .5; }

.sp-status {
  flex-shrink: 0; padding: 4px 10px; border-radius: 99px;
  font-size: .645rem; font-weight: 800; letter-spacing: .09em;
  border: 1px solid transparent;
}
.sp-st-open    { color: #6ee7a8; background: rgba(53,208,127,.12); border-color: rgba(53,208,127,.3); }
.sp-st-resolved{ color: var(--blue-soft); background: rgba(77,141,255,.12); border-color: rgba(77,141,255,.32); }
.sp-st-closed  { color: var(--dimmer); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.sp-ticket-icon.sp-st-open    { color: #6ee7a8; }
.sp-ticket-icon.sp-st-resolved{ color: var(--blue-soft); }
.sp-ticket-icon.sp-st-closed  { color: var(--dimmer); }

.sp-noresults { padding: 26px; text-align: center; font-size: .87rem; color: var(--dim); }

.sp-side { display: flex; flex-direction: column; gap: 16px; }
.sp-card-title { font-size: 1.02rem; font-weight: 800; margin-bottom: 18px; }
.sp-note { font-size: .76rem; color: var(--dimmer); margin-top: 11px; line-height: 1.5; text-align: center; }

.sp-pin h3 { display: flex; align-items: center; gap: 8px; font-size: .97rem; font-weight: 800; margin-bottom: 14px; }
.sp-pin h3 svg { width: 16px; height: 16px; color: var(--blue-soft); }
.sp-pin p { font-size: .765rem; line-height: 1.55; color: var(--dimmer); margin-top: 13px; }
.sp-pin-digits { display: flex; gap: 7px; }
.sp-pin-digits span {
  flex: 1; text-align: center; padding: 11px 0; border-radius: 10px;
  font-size: 1.28rem; font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--blue-soft);
  background: linear-gradient(160deg, rgba(77,141,255,.16), rgba(77,141,255,.05));
  border: 1px solid rgba(77,141,255,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.sp-empty { padding: 48px 32px; text-align: center; }
.sp-empty-sm { padding: 40px 28px; }
.sp-empty h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 9px; }
.sp-empty p { font-size: .88rem; line-height: 1.6; color: var(--dim); margin: 0 auto 20px; max-width: 42ch; }
.sp-empty p:last-child { margin-bottom: 0; }
.sp-empty-icon {
  width: 52px; height: 52px; border-radius: 15px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(77,141,255,.2), rgba(77,141,255,.05));
  border: 1px solid rgba(77,141,255,.26); color: var(--blue-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.sp-empty-icon svg { width: 24px; height: 24px; }
.sp-empty-icon-warn {
  background: linear-gradient(160deg, rgba(240,102,110,.18), rgba(240,102,110,.05));
  border-color: rgba(240,102,110,.3); color: #f0888f; box-shadow: none;
}

@media (max-width: 960px) {
  .sp-grid { grid-template-columns: 1fr; }
  .sp-side { order: -1; }
}

/* ==========================================================================
   Magnetic button
   The cursor pulls the button, a spotlight tracks the pointer, a gradient ring
   turns behind it and clicks leave a ripple. Reserved for the one real call to
   action on a page, it stops reading as special if every button does it.
   ========================================================================== */
.btn-magnetic {
  position: relative;
  overflow: hidden;
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition: transform .45s cubic-bezier(.22,1,.36,1), background .18s, border-color .18s, box-shadow .3s;
}
/* The pointer drives the transform directly while hovering; the eased
   transition above is what springs it back on the way out. */
.btn-magnetic.is-pulling { transition: transform .08s linear, box-shadow .3s; }

/* A soft halo rather than a rotating gradient rim. The rim version painted a
   hard rectangular outline through anything semi-transparent, which is what
   made these look boxed on hover. */
.btn-magnetic:hover {
  box-shadow: 0 0 26px -6px rgba(255,255,255,.22), 0 14px 34px -18px rgba(0,0,0,.9);
}
.btn-magnetic.btn-white:hover, .btn-magnetic.btn-primary:hover {
  box-shadow: 0 0 30px -8px rgba(255,255,255,.5), 0 14px 34px -18px rgba(0,0,0,.9);
}

/* Pointer spotlight. --mx/--my are written by the script in page coordinates. */
.mag-glow {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.4), transparent 72%);
  mix-blend-mode: overlay;
}
.btn-magnetic:hover .mag-glow { opacity: 1; }

.mag-ripple {
  position: absolute; z-index: 2; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 70%);
  animation: mag-ripple .7s ease-out forwards;
}
@keyframes mag-ripple { to { transform: scale(4.2); opacity: 0; } }

/* Label rides above the spotlight and ripples. */
.btn-magnetic > span:not(.mag-glow):not(.mag-ripple) { position: relative; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .btn-magnetic { transform: none !important; }
  .mag-ripple { display: none; }
}
@media (hover: none) {
  .btn-magnetic { transform: none !important; }
  .mag-glow { display: none; }
}

/* ==========================================================================
   Inherited effects from style.css
   The old stylesheet loads first and brings a few things the redesign does
   not want. They have to be switched off here rather than deleted there,
   since the current site still uses them.
   ========================================================================== */

/* Drifting blue orbs behind every page. */
body::before,
[data-theme="dark"] body::before { content: none !important; background: none !important; animation: none !important; }

/* Pulsing glow on the hero headline, and the glow on countdown/status text. */
.hero-title,
[data-theme="dark"] .hero-title,
.rz-cd-label, .rz-cd-num, .rz-cd-done,
[data-theme="dark"] .rz-cd-label, [data-theme="dark"] .rz-cd-num {
  text-shadow: none !important;
  animation: none !important;
}

/* Announcement / ban strip. Sits below the nav in the stack so an open
   dropdown is never painted over by it. */
.rzn-banner {
  position: relative; z-index: 1;
  text-align: center; padding: 10px 24px;
  font-size: .845rem; font-weight: 600; line-height: 1.5;
  color: rgba(242,243,245,.72);
  background: rgba(255,255,255,.035);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.rzn-banner a { color: rgba(242,243,245,.92); text-decoration: underline; }
.rzn-banner-bad {
  color: #f0888f; font-weight: 700;
  background: rgba(240,102,110,.09);
  border-bottom-color: rgba(240,102,110,.26);
}
.rzn-banner-bad a { color: #f0888f; }

/* Player is the default rank rather than a distinction, so it reads quieter
   than a staff or beta tag. */
.rzn-tag-plain { color: rgba(242,243,245,.62); background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); }
.rzn-tag-plain::before { background: rgba(242,243,245,.45); }
.rzn-tag-plain:hover { color: rgba(242,243,245,.9); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); }

/* ==========================================================================
   Auth pages
   login / signup / forgot / reset / verify / 2fa each carry their own inline
   <style> block with a navy card and blue buttons. Those blocks sit later in
   the document than this file, so overriding them needs the .rzn body hook
   for extra specificity rather than load order.
   ========================================================================== */

.rzn .auth-section { min-height: 74vh; }

.rzn .auth-card-forced,
.rzn .auth-card {
  background: linear-gradient(158deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -30px rgba(0,0,0,1);
  color: var(--text);
}

.rzn .auth-card-forced .auth-logo { box-shadow: none; }
.rzn .auth-card-forced h1 { color: var(--text); letter-spacing: -.02em; }
.rzn .auth-card-forced > p { color: var(--dim); }
.rzn .auth-card-forced label { color: var(--dim); }

.rzn .auth-card-forced input[type=text],
.rzn .auth-card-forced input[type=password],
.rzn .auth-card-forced input[type=email] {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 12px;
}
.rzn .auth-card-forced input:focus {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.rzn .auth-card-forced input::placeholder { color: var(--dimmer); }

/* Primary action: white on dark, the same as every other primary button in
   the redesign. Black on black would disappear. */
.rzn .auth-btn-primary {
  background: #fff; color: #0a0a0c; border: 1px solid #fff; border-radius: 12px;
  font-weight: 700; box-shadow: 0 8px 26px -12px rgba(255,255,255,.45);
  transition: transform .16s, box-shadow .2s;
}
.rzn .auth-btn-primary:hover {
  opacity: 1; transform: translateY(-1px);
  box-shadow: 0 12px 32px -12px rgba(255,255,255,.6);
}

/* Secondary actions: grey glass, readable without competing with the primary. */
.rzn .auth-btn-passkey {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(242,243,245,.92);
  border-radius: 12px;
}
.rzn .auth-btn-passkey:hover:not(:disabled) {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.24);
}

/* Discord keeps a hint of its own identity so it stays recognisable, but
   muted to sit with the rest rather than glow out of the card. */
.rzn .auth-btn-discord {
  background: rgba(88,101,242,.16);
  border: 1px solid rgba(88,101,242,.4);
  color: #c3c9ff;
  border-radius: 12px;
}
.rzn .auth-btn-discord:hover { background: rgba(88,101,242,.26); border-color: rgba(88,101,242,.55); }

.rzn .auth-divider span { color: var(--dimmer); }
.rzn .auth-divider::before, .rzn .auth-divider::after { background: rgba(255,255,255,.08); }
.rzn .auth-forgot a { color: var(--dimmer); }
.rzn .auth-forgot a:hover { color: var(--dim); }
.rzn .auth-footer-links { color: var(--dimmer); }
.rzn .auth-footer-links a { color: rgba(242,243,245,.72); }
.rzn .auth-footer-links a:hover { color: var(--text); }

/* ==========================================================================
   Blocking dialogs (updated terms, username notice)
   These are inline-styled in the layout against the old light palette, so in
   the redesign the card came out white with barely legible text. They also sit
   above everything and swallow every click until dismissed, so they have to be
   unmistakable rather than something you look past.
   ========================================================================== */
.rzn #tosGate > div,
.rzn #unGate > div {
  background: #101014 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,1) !important;
}
.rzn #tosGate h2, .rzn #unGate h2 { color: var(--text) !important; }
.rzn #tosGate p, .rzn #unGate p { color: var(--dim) !important; }
.rzn #tosGate label span { color: var(--text) !important; }
.rzn #tosGate a { color: var(--blue-soft) !important; }

/* ==========================================================================
   Field editor
   A per-field Edit button that opens a dialog, for the long admin forms. The
   inline inputs still work; this is a reliable way in when a click lands
   somewhere unintended on a tall page.
   ========================================================================== */
.rzn-edit {
  margin-left: 6px; padding: 6px 12px; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  color: rgba(242,243,245,.9); white-space: nowrap; flex-shrink: 0;
}
.rzn-edit:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); }

.rzn-fe-backdrop {
  position: fixed; inset: 0; z-index: 99990; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(3,3,5,.72);
}
.rzn-fe {
  width: 100%; max-width: 440px; padding: 26px;
  background: #101014; border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,1);
}
.rzn-fe h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: 6px; }
.rzn-fe .rzn-fe-hint { font-size: .8rem; color: var(--dimmer); margin-bottom: 16px; line-height: 1.5; }
.rzn-fe input, .rzn-fe textarea, .rzn-fe select {
  width: 100%; padding: 12px 14px; border-radius: 11px; font: inherit; font-size: .95rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); color: var(--text);
}
.rzn-fe input:focus, .rzn-fe textarea:focus, .rzn-fe select:focus {
  outline: none; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08);
}
.rzn-fe textarea { min-height: 120px; resize: vertical; }
.rzn-fe-row { display: flex; gap: 9px; margin-top: 18px; }
.rzn-fe-row button {
  flex: 1; padding: 11px; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 700; border: 1px solid transparent;
}
.rzn-fe-save { background: #fff; color: #0a0a0c; }
.rzn-fe-cancel { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--text); }
.rzn-fe-cancel:hover { background: rgba(255,255,255,.11); }

/* Smooth scrolling made clicks land where a control used to be on these very
   long pages. Instant jumps are less pretty and far more predictable. */
html { scroll-behavior: auto; }

/* ==========================================================================
   Full-screen takeovers
   The application wizard covers the viewport and hides site chrome with
   `.navbar, .footer { display: none }`. The redesign's nav and footer do not
   use those class names, so they stayed put and bled through the overlay.
   ========================================================================== */
.rzn-takeover nav,
.rzn-takeover footer,
.rzn-takeover .rzn-banner { display: none !important; }

/* Match the redesign's background rather than the old navy gradient. */
.wz-shell,
[data-theme="dark"] .wz-shell { background: var(--bg) !important; }

/* These sit on the wizard's own surface and need to be opaque enough to read
   against it, now that nothing is blurred behind them. */
.wz-step, .wz-card {
  background: linear-gradient(158deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

/* ==========================================================================
   Settings
   A sidebar of grouped sections beside one pane at a time, instead of the
   single long scroll the current page uses.
   ========================================================================== */
.set-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 26px; align-items: start; }

.set-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; }
.set-nav-group {
  margin: 18px 0 7px; padding: 0 12px;
  font-size: .67rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dimmer);
}
.set-nav-group:first-child { margin-top: 0; }
.set-nav-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--dim);
  background: none; cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.set-nav-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.set-nav-item.is-on {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
  color: var(--text);
}

.set-panes { display: flex; flex-direction: column; gap: 18px; }
.set-pane { display: none; flex-direction: column; gap: 18px; }
.set-pane.is-on { display: flex; }

.set-card { padding: 26px 28px; }
.set-h { font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; margin-bottom: 5px; }
.set-sub { font-size: .855rem; line-height: 1.6; color: var(--dim); margin-bottom: 22px; }
.set-hint { font-size: .775rem; line-height: 1.5; color: var(--dimmer); margin-top: 8px; }

/* Label beside field on a wide screen, stacked on a narrow one. */
.set-row {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 20px;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.set-row:first-of-type { border-top: none; padding-top: 0; }
.set-row-label { font-size: .82rem; font-weight: 700; color: var(--dim); padding-top: 11px; }
.set-row-body { min-width: 0; }
.set-inline { display: flex; gap: 9px; flex-wrap: wrap; }
.set-inline .form-input { flex: 1; min-width: 200px; }

.set-avatar-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.set-avatar {
  width: 78px; height: 78px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.12);
}
.set-avatar-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; font-weight: 800; color: var(--dim);
  background: rgba(255,255,255,.05);
}

/* The real file input is hidden behind the label, which is the button. */
.set-file { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.set-file-btn { position: relative; overflow: hidden; cursor: pointer; }
.set-file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.set-file .set-hint { width: 100%; margin-top: 2px; }

.set-banner {
  height: 168px; border-radius: 14px;
  background: rgba(255,255,255,.04) center/cover no-repeat;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: var(--dimmer);
}

.set-theme { display: flex; gap: 9px; }
.set-theme-btn {
  padding: 10px 20px; border-radius: 11px; cursor: pointer; font: inherit;
  font-size: .85rem; font-weight: 700;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: var(--dim);
}
.set-theme-btn.is-on { background: #fff; border-color: #fff; color: #0a0a0c; }
.set-theme-btn:hover:not(.is-on) { background: rgba(255,255,255,.09); color: var(--text); }

/* The socials form keeps its own grid class from the current page. */
.set-card .socials-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.set-card h3 { font-size: .95rem; font-weight: 800; margin: 22px 0 10px; }
.set-card h3:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .set-layout { grid-template-columns: 1fr; }
  .set-nav {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 6px;
    padding-bottom: 6px; margin-bottom: 4px;
  }
  .set-nav-group { display: none; }
  .set-nav-item { width: auto; }
  .set-row { grid-template-columns: 1fr; gap: 10px; }
  .set-row-label { padding-top: 0; }
}

/* ==========================================================================
   Chat
   The chat page turns the whole viewport into the app: body is a flex column
   at full height and the message list takes whatever is left. style.css does
   that by hiding `.footer`, a class the redesign's footer does not carry, so
   the footer stayed, ate the viewport, and squeezed the chat into a box.
   ========================================================================== */
body.chat-body.rzn { height: 100vh; height: 100dvh; overflow: hidden; }
body.chat-body.rzn footer { display: none; }

/* main.wrap sits between body and the chat, so it has to pass the height on
   or `flex: 1` inside it has nothing to fill. */
body.chat-body.rzn main.wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
body.chat-body.rzn .chat-wrap { flex: 1; min-height: 0; }

/* Wider than the 1100px the old layout used, on a large screen that left
   most of the window empty. The grid container is .chat-page, not the
   .chat-layout used elsewhere. */
body.chat-body.rzn .chat-page {
  max-width: 1480px;
  padding: 12px 20px 18px;
  grid-template-columns: 250px 1fr;
}
body.chat-body.rzn .chat-topbar { margin: 14px 20px 0; }

/* Roomier rows, now there is somewhere to put them. */
body.chat-body.rzn .chat-messages { padding: 18px 22px; gap: 6px; }
body.chat-body.rzn .chat-sidebar { padding: 20px 14px; }

@media (max-width: 900px) {
  /* The member list costs more than it gives on a phone. */
  body.chat-body.rzn .chat-page { grid-template-columns: 1fr; padding: 8px 12px 12px; }
  body.chat-body.rzn .chat-sidebar { display: none; }
  body.chat-body.rzn .chat-main { border-radius: var(--radius); }
  body.chat-body.rzn .chat-topbar { margin: 10px 12px 0; }
}

/* ==========================================================================
   Staff roster
   Compact rows rather than cards: a roster is for scanning, and a card per
   person turns thirty people into a page you have to scroll twice.
   ========================================================================== */
.ros-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.ros-stat {
  flex: 1; min-width: 118px; padding: 15px 18px; border-radius: 14px;
  background: linear-gradient(158deg, rgba(255,255,255,.032), rgba(255,255,255,.008));
  border: 1px solid var(--line);
}
.ros-stat-n { display: block; font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.ros-stat-time { font-size: 1.15rem; }
.ros-stat-l { display: block; margin-top: 3px; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--dimmer); }

.ros-group { margin-bottom: 30px; }
.ros-group-head {
  font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-soft); margin-bottom: 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.ros-position { margin-bottom: 18px; }
.ros-position-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.ros-position-name { font-size: .93rem; font-weight: 800; letter-spacing: -.01em; }
.ros-position-short {
  padding: 2px 7px; border-radius: 6px; font-size: .62rem; font-weight: 800; letter-spacing: .06em;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--dimmer);
}
.ros-position-count { margin-left: auto; font-size: .75rem; font-weight: 700; color: var(--dimmer); }

/* Wraps into as many columns as fit, so a position with one person does not
   own a whole row. */
.ros-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 7px; }

.ros-member {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px 12px 8px 9px; border-radius: 11px;
  background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.055);
  text-decoration: none; color: inherit;
  transition: background .15s, border-color .15s, transform .15s;
}
a.ros-member:hover {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.13);
  transform: translateY(-1px);
}

.ros-av-wrap { position: relative; flex-shrink: 0; line-height: 0; }
.ros-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
/* The status dot notches into the avatar the way Discord's does, with a ring
   in the row colour so it reads as a badge rather than a stray pixel. */
.ros-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2.5px solid #0c0c10;
}

.ros-member-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ros-name {
  font-size: .855rem; font-weight: 700; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ros-sub {
  font-size: .715rem; color: var(--dimmer);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ros-empty-note {
  margin-top: 20px; padding: 14px 18px; border-radius: 12px;
  background: rgba(255,255,255,.025); border: 1px solid var(--line);
  font-size: .8rem; line-height: 1.6; color: var(--dimmer);
}

@media (max-width: 560px) {
  .ros-members { grid-template-columns: 1fr; }
  .ros-stat { min-width: calc(50% - 5px); }
}

/* ==========================================================================
   Staff positions
   ========================================================================== */
.pos-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 22px; align-items: start; }

.pos-group {
  margin: 22px 0 10px; font-size: .7rem; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--blue-soft);
}
.pos-group:first-child { margin-top: 0; }

.pos-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 9px; }

.pos-order { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; padding-top: 2px; }
.pos-arrow {
  width: 26px; height: 22px; border-radius: 6px; cursor: pointer; font-size: .6rem; line-height: 1;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--dim);
}
.pos-arrow:hover:not(:disabled) { background: rgba(255,255,255,.1); color: var(--text); }
.pos-arrow:disabled { opacity: .25; cursor: default; }

.pos-form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pos-line { display: flex; gap: 8px; flex-wrap: wrap; }
.pos-line .form-input { padding: 8px 11px; font-size: .85rem; }
.pos-label { flex: 1; min-width: 150px; }
.pos-short { width: 88px; text-transform: uppercase; }
.pos-groupname { width: 150px; }
.pos-role { flex: 1; min-width: 190px; font-family: ui-monospace, monospace; font-size: .8rem !important; }

.pos-meta { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; font-size: .73rem; color: var(--dimmer); }
.pos-meta code { font-size: .73rem; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,.05); }
.pos-warn { color: #fbbf24; font-weight: 700; }

.pos-del {
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; flex-shrink: 0; font-size: .8rem;
  background: rgba(240,102,110,.1); border: 1px solid rgba(240,102,110,.25); color: #f0888f;
}
.pos-del:hover { background: rgba(240,102,110,.2); }

.pos-add { padding: 24px 26px; position: sticky; top: 88px; }
.pos-note { padding: 18px 22px; margin-top: 16px; }
.pos-note h3 { font-size: .9rem; font-weight: 800; margin-bottom: 7px; }
.pos-note p { font-size: .83rem; line-height: 1.6; color: var(--dim); }
.pos-note code { padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,.06); font-size: .8rem; }

@media (max-width: 1000px) {
  .pos-grid { grid-template-columns: 1fr; }
  .pos-add { position: static; }
}

/* ── Game staff moderation panel (.mg-*) ─────────────────────────────────
   Deliberately plain: two columns, a form on the left and the staff member's
   own history on the right. */
.mg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: start; }
.mg-card { padding: 26px 28px; }
.mg-h { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; }
.mg-note { color: var(--muted); font-size: .88rem; line-height: 1.55; margin: 0 0 20px; }
.mg-form { display: grid; gap: 14px; }
.mg-label { display: grid; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.mg-opt { font-weight: 500; opacity: .6; text-transform: none; }
.mg-form textarea.form-input { resize: vertical; line-height: 1.5; }
.mg-empty { color: var(--muted); font-size: .88rem; margin: 0; }
.mg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mg-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: rgba(255,255,255,.02); }
.mg-item-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mg-target { font-weight: 700; }
.mg-status { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
             border: 1px solid; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.mg-reason { margin-top: 6px; font-size: .86rem; font-weight: 600; }
.mg-details { margin-top: 4px; font-size: .84rem; color: var(--muted); line-height: 1.55; white-space: pre-wrap; }
.mg-evidence { margin-top: 6px; font-size: .78rem; color: var(--blue); word-break: break-all; }
.mg-meta { margin-top: 8px; font-size: .72rem; color: var(--muted); opacity: .75; }
.mg-note-back { margin-top: 8px; font-size: .8rem; font-style: italic; color: var(--muted); }

/* Ban-request queue on the full panel */
.br-row { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.br-row.is-pending { border-color: rgba(251,191,36,.35); }
.br-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.br-who { font-size: .76rem; color: var(--muted); }
.br-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.br-actions input { flex: 1 1 220px; }

@media (max-width: 900px) {
  .mg-grid { grid-template-columns: 1fr; }
}
.pos-env { color: #4ade80; font-size: .72rem; }

/* Set A Rank panel */
.rank-tool-line { display: flex; gap: 12px; flex-wrap: wrap; }
.rank-tool-label { display: block; font-size: .76rem; font-weight: 600; letter-spacing: .03em;
                   color: var(--muted); margin-bottom: 5px; }

/* Rank held through a Discord staff role, shown alongside the site role */
.role-badge.role-position { background: rgba(77,141,255,.14); color: #4d8dff;
                            border: 1px solid rgba(77,141,255,.3); }

/* ── Set A Rank page (.rk-*) ─────────────────────────────────────────────── */
.rk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.rk-card { padding: 26px 28px; }
.rk-search { position: relative; }
.rk-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
              border: 1px solid var(--line); border-radius: 12px; background: #0b0b0f;
              box-shadow: 0 20px 50px rgba(0,0,0,.55); overflow: hidden; max-height: 320px; overflow-y: auto; }
.rk-result { display: flex; align-items: center; justify-content: space-between; gap: 12px;
             width: 100%; text-align: left; padding: 10px 14px; background: none; border: 0;
             color: var(--text); font: inherit; font-size: .88rem; cursor: pointer; }
.rk-result:hover { background: rgba(255,255,255,.06); }
.rk-result-role { font-size: .72rem; color: var(--muted); }
.rk-none { color: var(--muted); cursor: default; }
.rk-check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; }
.rk-check em { display: block; font-style: normal; font-size: .78rem; color: var(--muted); line-height: 1.5; margin-top: 3px; }
.rk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rk-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.rk-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rk-arrow { color: #4ade80; }
.rk-item .rk-arrow { font-weight: 700; }
.rk-new { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
          border: 1px solid rgba(77,141,255,.4); color: #4d8dff; border-radius: 999px; padding: 2px 9px; }
.rk-item-meta { margin-top: 5px; font-size: .74rem; color: var(--muted); }
.rk-item-note { margin-top: 6px; font-size: .8rem; font-style: italic; color: var(--muted); }
.rk-item-state { margin-top: 7px; display: flex; gap: 7px; font-size: .7rem; color: var(--muted); opacity: .8; }

@media (max-width: 900px) { .rk-grid { grid-template-columns: 1fr; } }
.rk-arrow.rk-down { color: #f87171; }
.rk-src { font-size: .66rem; color: var(--muted); opacity: .8; }

/* ── Beta access page (.bt-*) ────────────────────────────────────────────── */
.bt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.bt-card { padding: 26px 28px; margin-bottom: 20px; }
.bt-grid > .bt-card { margin-bottom: 0; }
.bt-alert { padding: 16px 20px; margin-bottom: 20px; border-color: rgba(248,113,113,.4); display: grid; gap: 4px; }
.bt-alert span { font-size: .86rem; color: var(--muted); line-height: 1.55; }
.bt-form { display: flex; gap: 10px; flex-wrap: wrap; }
.bt-form .form-input { flex: 1 1 200px; }
.bt-count { font-size: .76rem; font-weight: 700; color: var(--muted); }
.bt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bt-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
           border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; }
.bt-item-main { min-width: 0; }
.bt-name { font-weight: 700; }
.bt-item-meta { font-size: .74rem; color: var(--muted); margin-top: 3px; }
.bt-bad { color: #f87171; }
.bt-revoke { border-color: rgba(248,113,113,.5); color: #f87171; }

@media (max-width: 900px) { .bt-grid { grid-template-columns: 1fr; } }
.ros-note { padding: 14px 18px; margin-bottom: 20px; font-size: .85rem; line-height: 1.6;
            color: var(--muted); border-color: rgba(250,168,26,.35); }
.ros-note strong { color: var(--text); }

/* ---- Moderation hub (views/partials/mod-hub.ejs) ---- */
.mh-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.mh-count { font-size:0.78rem; color:var(--text-muted); }
.mh-group { margin-bottom:22px; }
.mh-group:last-child { margin-bottom:0; }
.mh-group-head {
  font-size:0.72rem; font-weight:800; letter-spacing:0.09em; text-transform:uppercase;
  color:#7dd3fc; margin-bottom:10px; padding-bottom:7px;
  border-bottom:1px solid rgba(255,255,255,0.09);
}
.mh-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:10px; }
.mh-card {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid rgba(255,255,255,0.11); background:rgba(255,255,255,0.035);
  border-radius:12px; text-decoration:none; color:inherit;
  transition:border-color .15s, background .15s, transform .15s;
}
.mh-card:hover { border-color:rgba(56,189,248,0.5); background:rgba(56,189,248,0.08); transform:translateY(-1px); }
.mh-icon { font-size:1.15rem; flex-shrink:0; line-height:1; }
.mh-body { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.mh-label { font-size:0.92rem; font-weight:700; }
.mh-desc { font-size:0.74rem; color:var(--text-muted); line-height:1.35; }
.mh-lvl {
  flex-shrink:0; font-size:0.62rem; font-weight:800; letter-spacing:0.04em;
  padding:3px 7px; border-radius:999px; border:1px solid currentColor; opacity:0.85;
}
.mh-lvl-gamestaff { color:#86efac; }
.mh-lvl-mod       { color:#7dd3fc; }
.mh-lvl-admin     { color:#fcd34d; }
.mh-lvl-eld       { color:#f9a8d4; }
.mh-lvl-edr       { color:#fca5a5; }
@media (max-width:640px) { .mh-grid { grid-template-columns:1fr; } }

/* ---- Unlinked-Discord prompt for staff ---- */
.link-discord-bar {
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  padding:9px 16px; font-size:0.84rem; text-align:center;
  background:rgba(88,101,242,0.14); border-bottom:1px solid rgba(88,101,242,0.4); color:#c7d2fe;
}
.link-discord-bar a {
  font-weight:700; color:#fff; text-decoration:none; white-space:nowrap;
  background:#5865f2; padding:5px 13px; border-radius:999px;
}
.link-discord-bar a:hover { opacity:0.9; }

/* ---- Permission checkboxes on the staff positions editor ---- */
.pos-perms { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.pos-perm { display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--text-muted); cursor:pointer; }
.pos-perm input { accent-color:#38bdf8; cursor:pointer; }

/* ---- Ban request form and evidence ---- */
.brq-form { display:flex; flex-direction:column; gap:12px; }
.brq-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.brq-kind { display:inline-flex; align-items:center; gap:6px; font-size:0.84rem; cursor:pointer; }
.brq-kind input { accent-color:#38bdf8; cursor:pointer; }
.brq-form button { align-self:flex-start; }
.br-kind {
  font-size:0.62rem; font-weight:800; letter-spacing:0.05em; padding:2px 7px; border-radius:999px;
  border:1px solid #818cf8; background:rgba(99,102,241,0.18); color:#c7d2fe; margin-left:8px;
}
.br-proof { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.br-proof-item {
  width:132px; height:88px; object-fit:cover; border-radius:8px;
  border:1px solid rgba(255,255,255,0.14); background:#000; display:block;
}

/* ---- Public records ---- */
.rec-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.rec-chip {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 15px; border-radius:999px; font-size:0.82rem; font-weight:600; text-decoration:none;
  border:1px solid rgba(255,255,255,0.13); background:rgba(255,255,255,0.04); color:var(--text-muted);
  transition:border-color .15s, background .15s, color .15s;
}
.rec-chip:hover { border-color:rgba(56,189,248,0.5); color:#e2e8f0; }
.rec-chip.is-on { border-color:#38bdf8; background:rgba(56,189,248,0.14); color:#7dd3fc; }
.rec-n { font-size:0.72rem; opacity:0.7; font-variant-numeric:tabular-nums; }
.rec-note { font-size:0.8rem; color:var(--text-muted); margin:0 0 16px; }
.rec-wrap { display:block; }
.rec-list { display:flex; flex-direction:column; gap:14px; }
.rec-empty { text-align:center; padding:44px 20px; }
.rec-empty p { margin:0; font-size:0.95rem; }
.rec-empty-sub { margin-top:6px !important; font-size:0.82rem; color:var(--text-muted); }

/* One record.
   Laid out as a dated ledger rather than a card with a coloured spine: the
   timestamp gets its own rail down the left, the verdict is a line of text
   under the name instead of a pill floating off to the right, and the reason
   sits behind a hairline rule rather than in a sunken box. The border stays
   neutral whatever the punishment was, the colour lives on one small dot, so
   a page of bans does not read as a wall of red. */
.rc {
  display:grid; grid-template-columns:82px minmax(0,1fr); gap:0;
  border:1px solid rgba(255,255,255,0.09); border-radius:14px;
  background:rgba(255,255,255,0.025); overflow:hidden;
}

/* The rail carries the type colour as a solid edge, red ban, amber warning,
   blue for anything that only silences somebody for a while, and the date
   sits centred in it rather than stacked at the top. */
.rc-rail {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:1px; padding:18px 8px; text-align:center;
  background:rgba(0,0,0,0.28);
  border-right:1px solid rgba(255,255,255,0.07);
  border-left:4px solid var(--rc-tone, #64748b);
  font-variant-numeric:tabular-nums; cursor:default;
}

/* One variable drives the edge and the verdict dot, so they cannot disagree. */
.rc-t-ban  { --rc-tone:#ef4444; }
.rc-t-warn { --rc-tone:#f59e0b; }
.rc-t-mute { --rc-tone:#3b82f6; }
.rc-t-good { --rc-tone:#22c55e; }
.rc-day  { font-size:0.82rem; font-weight:800; color:#e2e8f0; line-height:1.15; }
.rc-time { font-size:0.7rem; color:var(--text-muted); }
.rc-year { font-size:0.62rem; color:var(--text-muted); opacity:0.6; margin-top:3px; }

.rc-main { padding:15px 20px 16px; min-width:0; }

.rc-head { display:flex; align-items:center; gap:12px; }
.rc-av {
  width:40px; height:40px; border-radius:11px; object-fit:cover; flex-shrink:0;
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05);
}
.rc-id { display:flex; flex-direction:column; gap:3px; min-width:0; }
.rc-name { font-size:0.97rem; font-weight:800; line-height:1.2; word-break:break-word; }
.rc-name a { color:#e2e8f0; text-decoration:none; }
.rc-name a:hover { color:#7dd3fc; text-decoration:underline; }

.rc-line {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:0.76rem; color:var(--text-muted);
}
.rc-dot { opacity:0.4; }
/* The only colour on the card. A dot rather than a filled pill, so the type is
   readable at a glance without shouting over the reason. */
.rc-verdict { display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.rc-verdict::before {
  content:""; width:7px; height:7px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.rc-verdict { color:var(--rc-tone, #94a3b8); }
.rc-t-ban  .rc-verdict { color:#f87171; }
.rc-t-warn .rc-verdict { color:#fbbf24; }
.rc-t-mute .rc-verdict { color:#60a5fa; }
.rc-t-good .rc-verdict { color:#4ade80; }

.rc-reason {
  margin:13px 0 0; padding:0 0 0 13px;
  border-left:2px solid rgba(255,255,255,0.13);
  font-size:0.89rem; line-height:1.55; color:#dbe3ec;
  white-space:pre-wrap; word-break:break-word;
}
.rc-reason.is-empty { color:var(--text-muted); font-style:italic; }

/* Who issued it, on its own line at the foot and pushed right, it belongs to
   the record but it is not the first thing you should read. */
.rc-foot {
  display:flex; justify-content:flex-end; align-items:center;
  margin-top:12px; padding:0; border:0;
  font-size:0.76rem; color:var(--text-muted);
}
.rc-by strong { color:#cbd5e1; font-weight:700; }

.rc-ev { margin-top:13px; }
.rc-ev-label {
  display:block; margin-bottom:8px;
  font-size:0.64rem; font-weight:800; letter-spacing:0.11em; text-transform:uppercase;
  color:var(--text-muted);
}
.rc-ev-grid { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; }
.rc-ev-link { display:block; line-height:0; max-width:100%; }
/* A punishment filed by right-clicking a message carries the message itself
   rather than an upload: what was said, and a jump link to where. */
.rc-ev-quote {
  flex:1 1 100%; margin:0; padding:10px 12px;
  border-left:2px solid rgba(255,255,255,0.28);
  font-size:0.88rem; white-space:pre-wrap; word-break:break-word;
}
.rc-ev-where { display:block; margin-top:6px; font-size:0.72rem; color:var(--text-muted); }
.rc-ev-jump { font-size:0.8rem; text-decoration:underline; }
/* Images keep their own shape up to a ceiling, a wide screenshot stays wide,
   a tall one is capped rather than running the page off the screen. */
.rc-ev-item {
  max-height:300px; max-width:min(100%,460px); height:auto; width:auto;
  border-radius:9px; border:1px solid rgba(255,255,255,0.11); background:#000; display:block;
}
/* A video has no intrinsic size until it loads, so without this it sits at the
   browser's 300x150 default and jumps once the file arrives. */
video.rc-ev-item {
  width:min(100%,460px); height:auto; aspect-ratio:16/9; max-height:300px;
  object-fit:contain;
}
.rc-ev-link .rc-ev-item { cursor:zoom-in; transition:border-color .15s, transform .15s; }
.rc-ev-link:hover .rc-ev-item { border-color:rgba(56,189,248,0.5); transform:translateY(-1px); }

/* Overturned.
   Deliberately the loudest thing on the page: a struck record that still looks
   like a live one is worse than no record at all. Green rather than red 
   this is the system correcting itself, not another punishment, and the whole
   card shifts so it cannot be mistaken for the row above it. */
.rc.is-reverted {
  border-color:rgba(74,222,128,0.55);
  background:
    repeating-linear-gradient(135deg,
      rgba(74,222,128,0.05) 0 12px, transparent 12px 24px),
    rgba(74,222,128,0.06);
  box-shadow:0 0 0 1px rgba(74,222,128,0.18) inset;
}
.rc.is-reverted { --rc-tone:#4ade80; }
.rc.is-reverted .rc-rail { background:rgba(74,222,128,0.10); border-right-color:rgba(74,222,128,0.28); }
.rc.is-reverted .rc-day,
.rc.is-reverted .rc-time { color:#86efac; }
/* The original verdict is struck through: it is what was decided, and it no
   longer stands. */
.rc.is-reverted .rc-verdict { color:var(--text-muted); text-decoration:line-through; opacity:0.8; }
.rc.is-reverted .rc-verdict::before { box-shadow:none; opacity:0.55; }
.rc.is-reverted .rc-name { color:var(--text-muted); }
.rc.is-reverted .rc-reason { border-left-color:rgba(74,222,128,0.35); color:var(--text-muted); }

.rc-revert-banner {
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin:0 0 14px; padding:9px 13px; border-radius:10px;
  border:1px solid rgba(74,222,128,0.45); background:rgba(74,222,128,0.12);
}
.rc-revert-tag {
  font-size:0.7rem; font-weight:900; letter-spacing:0.14em; text-transform:uppercase;
  color:#052e16; background:#4ade80; padding:4px 11px; border-radius:6px; white-space:nowrap;
}
.rc-revert-text { font-size:0.8rem; color:#bbf7d0; line-height:1.45; }
.rc-revert-text strong { color:#dcfce7; font-weight:700; }

/* Staff-only controls, kept visually quiet so they do not compete with the
   record itself. */
.rc-admin { margin-top:12px; padding-top:11px; border-top:1px dashed rgba(255,255,255,0.10); }
.rc-admin-form { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.rc-admin-in {
  flex:1; min-width:180px; padding:7px 11px; border-radius:8px; font-size:0.8rem;
  color:inherit; border:1px solid rgba(255,255,255,0.14); background:rgba(0,0,0,0.25);
}
.rc-btn {
  padding:7px 14px; border-radius:8px; font-size:0.78rem; font-weight:700; cursor:pointer;
  color:#cbd5e1; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.05);
  transition:border-color .15s, color .15s;
}
.rc-btn:hover { border-color:rgba(255,255,255,0.35); color:#f1f5f9; }
.rc-btn-warn { color:#fca5a5; border-color:rgba(248,113,113,0.4); }
.rc-btn-warn:hover { color:#fecaca; border-color:rgba(248,113,113,0.75); background:rgba(248,113,113,0.12); }

/* On a phone the rail would eat the width, so the date becomes a line above. */
@media (max-width:560px) {
  .rc { grid-template-columns:1fr; }
  .rc-rail {
    flex-direction:row; justify-content:flex-start; gap:8px; padding:9px 16px;
    border-right:0; border-left:0;
    border-top:4px solid var(--rc-tone, #64748b);
    border-bottom:1px solid rgba(255,255,255,0.07);
  }
  .rc-year { margin-top:0; }
  .rc-main { padding:14px 16px 16px; }
  .rc.is-reverted .rc-rail { border-bottom-color:rgba(74,222,128,0.28); }
}

/* Infinite scroll */
.rec-sentinel { display:flex; justify-content:center; padding:22px 0; }
.rec-spin {
  width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.18); border-top-color:#38bdf8;
  animation:rec-spin 0.7s linear infinite;
}
@keyframes rec-spin { to { transform:rotate(360deg); } }
.rec-total { text-align:center; font-size:0.8rem; color:var(--text-muted); margin:16px 0 0; }
.rec-pageno { font-size:0.8rem; color:var(--text-muted); }

@media (max-width:620px) {
  .rc-ev-item { max-height:260px; }
}
@media (prefers-reduced-motion:reduce) {
  .rec-spin { animation:none; }
  .rc-ev-link:hover .rc-ev-item { transform:none; }
}

/* ---- Music ---- */
.mu-status {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:7px 15px; border-radius:999px; font-size:0.8rem; font-weight:700;
  border:1px solid currentColor;
}
.mu-status::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.mu-status.is-on   { color:#86efac; background:rgba(34,197,94,0.13); }
.mu-status.is-warn { color:#fcd34d; background:rgba(245,158,11,0.13); }
.mu-status.is-off  { color:#fca5a5; background:rgba(239,68,68,0.13); }

.mu-empty { text-align:center; padding:34px 20px; margin-bottom:18px; }
.mu-empty h2 { margin:0 0 8px; font-size:1.05rem; }
.mu-empty p { margin:0; font-size:0.86rem; color:var(--text-muted); }
.mu-empty code { background:rgba(255,255,255,0.08); padding:2px 6px; border-radius:5px; font-size:0.85em; }

.mu-now {
  display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  padding:22px; margin-bottom:18px; overflow:hidden; position:relative;
}
.mu-art-wrap { flex-shrink:0; }
.mu-art {
  width:132px; height:132px; border-radius:14px; object-fit:cover; display:block;
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05);
  box-shadow:0 10px 34px rgba(0,0,0,0.42);
}
.mu-meta { flex:1; min-width:230px; }
.mu-label {
  font-size:0.66rem; font-weight:800; letter-spacing:0.11em; text-transform:uppercase;
  color:#7dd3fc; margin-bottom:6px;
}
.mu-title {
  margin:0 0 4px; font-size:1.35rem; font-weight:800; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mu-artist { margin:0 0 14px; font-size:0.88rem; color:var(--text-muted); }
.mu-bar { height:5px; border-radius:999px; background:rgba(255,255,255,0.11); overflow:hidden; }
.mu-fill {
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#2563eb,#38bdf8); transition:width .6s linear;
}
.mu-times {
  display:flex; justify-content:space-between; margin-top:6px;
  font-size:0.74rem; color:var(--text-muted); font-variant-numeric:tabular-nums;
}
.mu-chips { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.mu-chip {
  font-size:0.72rem; padding:4px 10px; border-radius:999px; color:var(--text-muted);
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04);
}

.mu-cols { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
.mu-h {
  display:flex; align-items:center; gap:9px; margin:0 0 14px;
  font-size:0.95rem; font-weight:800;
}
.mu-count, .mu-edr {
  font-size:0.66rem; font-weight:800; padding:3px 9px; border-radius:999px;
  border:1px solid currentColor;
}
.mu-count { color:#7dd3fc; background:rgba(56,189,248,0.13); }
.mu-edr   { color:#fca5a5; background:rgba(239,68,68,0.13); }

.mu-queue { padding:20px; }
.mu-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.mu-item {
  display:flex; align-items:center; gap:12px; padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.mu-item:last-child { border-bottom:none; }
.mu-thumb {
  width:42px; height:42px; border-radius:8px; object-fit:cover; flex-shrink:0;
  border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05);
}
.mu-item-meta { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.mu-item-title { font-size:0.88rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mu-item-artist { font-size:0.74rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mu-item-len { font-size:0.75rem; color:var(--text-muted); font-variant-numeric:tabular-nums; flex-shrink:0; }
.mu-none { padding:16px 0; font-size:0.85rem; color:var(--text-muted); }

.mu-node { padding:20px; }
.mu-stats { margin:0; display:flex; flex-direction:column; gap:9px; }
.mu-stats > div { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.mu-stats dt { font-size:0.78rem; color:var(--text-muted); }
.mu-stats dd {
  margin:0; font-size:0.8rem; font-weight:600; text-align:right;
  word-break:break-all; font-variant-numeric:tabular-nums;
}
.mu-stats dd.ok  { color:#86efac; }
.mu-stats dd.bad { color:#fca5a5; }
.mu-hint { margin:14px 0 0; font-size:0.74rem; color:var(--text-muted); line-height:1.5; }

@media (max-width:900px) { .mu-cols { grid-template-columns:1fr; } }
@media (max-width:560px) {
  .mu-now { gap:16px; padding:18px; }
  .mu-art { width:96px; height:96px; }
  .mu-title { font-size:1.12rem; white-space:normal; }
}
@media (prefers-reduced-motion:reduce) { .mu-fill { transition:none; } }

/* The one-time YouTube sign-in prompt from the music node */
.mu-oauth {
  margin:14px 0 0; padding:11px 13px; border-radius:10px; font-size:0.78rem; line-height:1.55;
  border:1px solid rgba(251,191,36,0.45); background:rgba(251,191,36,0.10); color:#fde68a;
  word-break:break-word;
}

/* ---- Music: search, results, side panels ---- */
.mu-search { padding:20px; margin-bottom:18px; }
.mu-search-label {
  display:block; font-size:0.66rem; font-weight:800; letter-spacing:0.11em;
  text-transform:uppercase; color:#7dd3fc; margin-bottom:9px;
}
.mu-search-row { display:flex; gap:10px; flex-wrap:wrap; }
.mu-search-row .form-input { flex:1; min-width:200px; }
.mu-search-hint { margin:9px 0 0; font-size:0.76rem; color:var(--text-muted); }
.mu-results { display:flex; flex-direction:column; margin-top:14px; }
.mu-result {
  display:flex; align-items:center; gap:12px; padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.mu-result:last-child { border-bottom:none; }
.mu-result .mu-item-meta { flex:1; min-width:0; }
.mu-add { flex-shrink:0; }
.mu-add:disabled { opacity:0.55; cursor:default; }
.mu-msg {
  margin:12px 0 0; padding:9px 12px; border-radius:9px; font-size:0.8rem;
  border:1px solid rgba(56,189,248,0.4); background:rgba(56,189,248,0.10); color:#bae6fd;
}
.mu-msg.is-bad { border-color:rgba(251,191,36,0.45); background:rgba(251,191,36,0.10); color:#fde68a; }
.mu-side { display:flex; flex-direction:column; gap:18px; }
.mu-panel { padding:20px; }
.mu-plays {
  flex-shrink:0; font-size:0.72rem; font-weight:800; color:#7dd3fc;
  padding:2px 8px; border-radius:999px; background:rgba(56,189,248,0.12);
  border:1px solid rgba(56,189,248,0.35);
}
@media (max-width:900px) { .mu-side { gap:14px; } }

/* ---- Music: playback controls ---- */
.mu-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }
.mu-btn {
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; cursor:pointer; padding:0;
  border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.05); color:#cbd5e1;
  transition:border-color .15s, background .15s, color .15s, transform .12s;
}
.mu-btn svg { width:17px; height:17px; }
.mu-btn:hover { border-color:rgba(56,189,248,0.55); background:rgba(56,189,248,0.12); color:#e2e8f0; }
.mu-btn:active { transform:scale(0.94); }
.mu-btn.is-on { border-color:#38bdf8; background:rgba(56,189,248,0.18); color:#7dd3fc; }
.mu-btn-main {
  width:44px; height:44px;
  border-color:rgba(56,189,248,0.5); background:linear-gradient(135deg,#1d4ed8,#2563eb); color:#fff;
}
.mu-btn-main svg { width:19px; height:19px; }
.mu-btn-main:hover { background:linear-gradient(135deg,#2563eb,#38bdf8); color:#fff; }
.mu-btn-stop { color:#fca5a5; border-color:rgba(239,68,68,0.4); background:rgba(239,68,68,0.10); }
.mu-btn-stop:hover { border-color:#fca5a5; background:rgba(239,68,68,0.20); color:#fecaca; }
.mu-vol {
  display:inline-flex; align-items:center; gap:8px; margin-left:4px;
  padding:0 12px; height:38px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:var(--text-muted);
}
.mu-vol svg { width:15px; height:15px; flex-shrink:0; }
.mu-vol input[type=range] { width:96px; accent-color:#38bdf8; cursor:pointer; }
.mu-vol span { font-size:0.74rem; font-variant-numeric:tabular-nums; min-width:34px; }
@media (max-width:560px) {
  .mu-controls { gap:6px; }
  .mu-vol { margin-left:0; width:100%; justify-content:space-between; }
  .mu-vol input[type=range] { flex:1; width:auto; }
}

/* ── activity log ──────────────────────────────────────────────────────────
   Who worked the music. Built from the same pieces as the lists above it
   rather than anything new, so it reads as part of the page and not as a
   table bolted to the bottom. */
.mu-log-row { gap:12px; align-items:center; }
.mu-log-did { color:var(--text-muted); font-weight:500; }
.mu-log-where { flex:0 0 auto; font-size:0.66rem; padding:3px 8px; }
.mu-log-when { flex:0 0 auto; min-width:64px; text-align:right; opacity:0.6; }

.mu-pages {
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.07);
}
.mu-page {
  min-width:32px; padding:5px 9px; border-radius:8px; text-align:center;
  font-size:0.82rem; font-weight:600; text-decoration:none;
  color:var(--text-muted); border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03); transition:background 0.15s, color 0.15s, border-color 0.15s;
}
.mu-page:hover { background:rgba(255,255,255,0.08); color:var(--text); }
.mu-page.is-on {
  color:#7dd3fc; border-color:rgba(56,189,248,0.45); background:rgba(56,189,248,0.13);
}
/* Still shown at the ends of the range, because a control that disappears
   moves everything next to it. */
.mu-page.is-off { opacity:0.35; pointer-events:none; }
.mu-page.is-gap { border:none; background:none; pointer-events:none; opacity:0.45; }

@media (max-width:640px) {
  .mu-log-where { display:none; }
}