/* Vela — site-wide styles.
   Extracted verbatim from views/layout.ejs (was ~1,400 inline lines);
   the trailing block came from the mobile-menu <style> that sat near the
   end of the body. Cascade order is preserved: these rules come after the
   main sheet exactly as they came after it inline. */
    *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

    :root {
      /*
       * Type. Three faces, each with one job.
       *
       * The site used to run Syne for everything and Syne Mono for every label,
       * 412 declarations against 19 for the display face. Monospace was the
       * dominant typeface on the site, which is why it read as a hacker theme
       * rather than a product, and Syne is an extended display face doing
       * workhorse duty, which is why buttons and stats looked stretched.
       *
       * Geist is the quiet one now and does the work. Cinzel keeps the gothic
       * identity for display. Syne is kept for accents where its personality
       * earns its place. Mono means code, not decoration.
       */
      --font-display: 'Cinzel', Georgia, serif;
      --font-sans:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
      --font-accent:  'Syne', var(--font-sans);
      --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;

      /* Labels, eyebrows, table headers, chips. These were all monospace, which
         is what made the site read as a terminal. They keep their uppercase and
         their tracking, which is where their character actually came from, and
         lose the typewriter. */
      --font-ui:      var(--font-sans);

      /* Motion. One curve and three durations, used everywhere. Things moving
         to the same rhythm is most of what reads as considered; every element
         easing differently is what reads as assembled. */
      --ease:      cubic-bezier(0.4, 0, 0.2, 1);
      --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
      --dur-fast:  0.15s;
      --dur:       0.25s;
      --dur-slow:  0.45s;

      /* The palette below described the brand, but the pages were actually
         built in cyan/teal with status colours that had no token at all — so
         people inlined hex because there was nothing to reach for. These are
         the colours the views were already using, named. */
      --cyan:      #22d3ee;   /* primary accent */
      --sky:       #bae6fd;
      --sky-dim:   #7dd3fc;
      --ok:        #4ade80;
      --warn:      #fb923c;
      --danger:    #f87171;
      --danger-hi: #ef4444;
      --info:      #60a5fa;

      /* Channel triplets, for rgba() where an alpha is needed:
         rgba(var(--cyan-rgb), 0.12) */
      --foam-rgb:      124, 58, 237;
      --biolum-rgb:    167, 139, 250;
      --glow-rgb:      196, 181, 253;
      --cyan-rgb:      34, 211, 238;
      --sky-dim-rgb:   125, 211, 252;
      --danger-hi-rgb: 239, 68, 68;

      --void:    #000005;
      --deep:    #03000f;
      --trench:  #07000a;
      --surface: #0d0015;
      --raised:  #160020;

      --foam:    #7c3aed;
      --biolum:  #a78bfa;
      --glow:    #c4b5fd;
      --pearl:   #f0e8ff;
      --mist:    #ddd6fe;
      --text:    #e9d5ff;

      --teal:    #06b6d4;
      --teal-dim: #0e7490;
      --pulsar:  #fbbf24;
      --pulsar-hot: #fef3c7;

      --abyss:   #040009;
      --navy:    #08000d;
      --mid:     #110018;

      /* ─ Nav geometry ─
         The nav is a detached floating pill, so anything that used to sit flush
         under a full-width top:0 bar now needs to clear both the pill's height
         AND the gap above it. These derive that number once instead of leaving
         magic pixel offsets scattered around (#mobMenu, .dash-sidebar and the
         easter-egg popup were each independently tuned to the old 61px bar and
         all three ended up overlapping the pill).

         --nav-offset doubles as the pill's margin-top and its sticky top, so
         the two can't drift apart — if they differ, sticky clamps to the larger
         and --nav-bottom silently becomes wrong. */
      --nav-offset:  1.25rem;
      --nav-inset-x: 0;
      --nav-pad-y:   0.8rem;
      --nav-ctl:     36px;  /* tallest control inside the pill */
      --nav-h:       calc(var(--nav-ctl) + var(--nav-pad-y) * 2 + 2px);
      --nav-bottom:  calc(var(--nav-offset) + var(--nav-h));
      --nav-gap:     0.55rem;  /* breathing room below the pill */
      --below-nav:   calc(var(--nav-bottom) + var(--nav-gap));
    }

    html { scroll-behavior:smooth; }

    body {
      font-family:var(--font-sans);
      background:var(--void);
      color:var(--text);
      overflow-x:hidden;
      min-height:100vh;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* Numbers that sit in columns or tick upward must not jitter. */
    .count-up, .tbl-th + *, table td, .stat-value { font-variant-numeric:tabular-nums; }

    /* ─ Void background — deep space / deep ocean ─ */
    #ocean-bg {
      position:fixed;
      inset:0;
      z-index:0;
      pointer-events:none;
      background:radial-gradient(ellipse 65% 45% at 20% 35%, rgba(124,58,237,0.055) 0%, transparent 60%),
        radial-gradient(ellipse 45% 38% at 80% 20%, rgba(167,139,250,0.03) 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 50% 95%, rgba(7,0,10,0.95) 0%, transparent 65%),
        linear-gradient(180deg, var(--void) 0%, var(--deep) 38%, var(--trench) 70%, var(--surface) 100%);
    }

    /* ─ Particles canvas ─ */
    #particles-js {
      position:fixed;
      inset:0;
      z-index:1;
    }

    /* ─ Film grain ─ */
    #grain {
      position:fixed;
      inset:0;
      z-index:2;
      pointer-events:none;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      opacity:0.32;
    }

    /* ─ Wave canvas ─ */
    #wave-canvas {
      position:fixed;
      bottom:0;
      left:0;
      width:100%;
      height:240px;
      z-index:2;
      pointer-events:none;
    }

    /* ─ Site wrapper ─ */
    .site {
      position:relative;
      z-index:3;
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }

    /* ─ Glass ─ */
    .glass {
      background:rgba(7, 0, 15, 0.58);
      backdrop-filter:blur(24px);
      -webkit-backdrop-filter:blur(24px);
      border:1px solid rgba(124,58,237,0.18);
    }

    /* The "← Back to X" link at the top of a page. Was 21 copies of the same
       inline style, each with its own onmouseover/onmouseout pair doing what
       :hover does for free. Pages needing more space below it still set
       margin-bottom inline. */
    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-ui);
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(125,211,252,0.4);
      text-decoration: none;
      transition: color 0.2s;
      margin-bottom: 1.5rem;
    }
    .back-link:hover { color: var(--cyan); }

    /* Table header cell — 23 identical copies across the data tables. Columns
       that align right or must not wrap set that one property inline. */
    .tbl-th {
      padding: 1rem 1.4rem;
      text-align: left;
      font-family: var(--font-ui);
      font-size: 0.6rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(125,211,252,0.38);
      font-weight: 700;
    }

    /* The main page heading. 14 views declared exactly this inline. */
    .page-h1 {
      font-size: 2.2rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.03em;
      margin-bottom: 0.3rem;
    }

    .glass-dark {
      background:rgba(3, 0, 10, 0.75);
      backdrop-filter:blur(32px);
      -webkit-backdrop-filter:blur(32px);
      border:1px solid rgba(124,58,237,0.22);
    }

    /* ─ Nav — floating detached pill, not edge-to-edge sticky ─ */
    nav {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1.5rem;
      padding:var(--nav-pad-y) 1.7rem;
      background:rgba(7,0,15,0.72);
      backdrop-filter:blur(28px);
      -webkit-backdrop-filter:blur(28px);
      border:1px solid rgba(124,58,237,0.2);
      border-radius:999px;
      position:sticky;
      top:var(--nav-offset);
      z-index:100;
      width:min(94%, 1080px);
      margin:var(--nav-offset) auto 0;
      box-shadow:0 10px 34px rgba(0,0,0,0.5);
      transition:border-color 0.3s, box-shadow 0.3s;
    }

    .nav-logo {
      font-size:1.05rem;
      font-weight:800;
      letter-spacing:-0.025em;
      color:#fff;
      display:flex;
      align-items:center;
      gap:0.7rem;
      text-decoration:none;
    }

    .nav-logo-mark {
      width:33px;
      height:33px;
      background:linear-gradient(135deg, var(--foam), var(--biolum));
      border-radius:9px;
      display:grid;
      place-items:center;
      font-family:var(--font-ui);
      font-size:0.72rem;
      color:var(--void);
      font-weight:700;
      box-shadow:0 0 18px rgba(124,58,237,0.45), 0 0 40px rgba(124,58,237,0.12);
      transition:box-shadow 0.3s;
    }

    .nav-logo:hover .nav-logo-mark {
      box-shadow:0 0 28px rgba(167,139,250,0.65), 0 0 55px rgba(124,58,237,0.2);
    }

    .nav-right { display:flex; align-items:center; gap:1.5rem; }

    .nav-links { display:flex; gap:2rem; list-style:none; }

    .nav-links a {
      font-size:0.75rem;
      color:rgba(221,214,254,0.45);
      text-decoration:none;
      letter-spacing:0.1em;
      text-transform:uppercase;
      font-family:var(--font-ui);
      transition:color 0.2s;
      position:relative;
    }

    .nav-links a::after {
      content:'';
      position:absolute;
      bottom:-3px; left:0; right:0;
      height:1px;
      background:var(--biolum);
      transform:scaleX(0);
      transform-origin:left;
      transition:transform 0.25s;
    }

    .nav-links a:hover { color:#fff; }
    .nav-links a:hover::after { transform:scaleX(1); }

    .nav-pill {
      display:flex;
      align-items:center;
      gap:0.6rem;
      padding:0.35rem 0.85rem 0.35rem 0.4rem;
      background:rgba(124,58,237,0.08);
      border:1px solid rgba(124,58,237,0.2);
      border-radius:999px;
      font-size:0.8rem;
      color:var(--mist);
      transition:border-color 0.2s;
    }

    .nav-pill:hover { border-color:rgba(124,58,237,0.42); }
    .nav-pill img { width:26px; height:26px; border-radius:50%; border:1.5px solid rgba(124,58,237,0.38); }
    .nav-pill span { font-weight:700; color:#fff; font-size:0.78rem; }

    /* Hamburger → X morph, not an innerHTML glyph swap */
    .hamburger-icon { position:relative; display:inline-block; width:16px; height:12px; }
    .ham-line {
      position:absolute; left:0; width:16px; height:2px; border-radius:2px;
      background:currentColor;
      transition:transform 0.32s cubic-bezier(0.32,0.72,0,1), opacity 0.2s ease, top 0.32s cubic-bezier(0.32,0.72,0,1);
    }
    .ham-line:nth-child(1) { top:0; }
    .ham-line:nth-child(2) { top:5px; }
    .ham-line:nth-child(3) { top:10px; }
    .hamburger-icon.open .ham-line:nth-child(1) { top:5px; transform:rotate(45deg); }
    .hamburger-icon.open .ham-line:nth-child(2) { opacity:0; }
    .hamburger-icon.open .ham-line:nth-child(3) { top:5px; transform:rotate(-45deg); }

    .btn-nav {
      padding:0.45rem 1.15rem;
      border-radius:8px;
      font-family:var(--font-sans);
      font-weight:700;
      font-size:0.78rem;
      text-decoration:none;
      transition:transform 0.18s, box-shadow 0.18s, background 0.18s, border-color 0.18s;
      border:none;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:0.4rem;
    }

    .btn-action {
      transition:transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s !important;
    }

    .btn-action:active {
      transform:scale(0.93) !important;
      transition-duration:0.06s !important;
    }

    .btn-nav-primary {
      background:linear-gradient(135deg, var(--foam), var(--biolum));
      color:var(--void);
      box-shadow:0 0 16px rgba(124,58,237,0.35);
      position:relative;
      overflow:hidden;
    }

    .btn-nav-primary::after {
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
      background-size:200% 100%;
      background-position:200% 0;
      transition:background-position 0.38s ease;
    }

    .btn-nav-primary:hover {
      box-shadow:0 0 30px rgba(167,139,250,0.6);
      transform:translateY(-1px);
    }

    .btn-nav-primary:hover::after { background-position:-200% 0; }

    .btn-nav-primary:active {
      transform:translateY(1px) scale(0.96);
      box-shadow:0 0 10px rgba(124,58,237,0.28);
      transition-duration:0.06s;
    }

    .btn-nav-ghost {
      background:rgba(124,58,237,0.07);
      border:1px solid rgba(124,58,237,0.25);
      color:var(--biolum);
    }

    .btn-nav-ghost:hover {
      background:rgba(124,58,237,0.15);
      border-color:rgba(124,58,237,0.5);
      box-shadow:0 0 14px rgba(124,58,237,0.14);
      transform:translateY(-1px);
    }

    .btn-nav-ghost:active {
      transform:translateY(1px) scale(0.96);
      box-shadow:none;
      transition-duration:0.06s;
    }

    /* ─ Main ─ */
    main { flex:1; }

    /* ─ Global buttons ─ */
    /*
     * The primary action used to be a three-stop amber gradient with a white
     * gloss sweep, a heavy gold halo and near-black text: the whole 2010 glossy
     * button playbook, in a colour that appears nowhere else in the identity.
     * Gloss reads as free; restraint reads as expensive.
     *
     * Now it is the brand violet, flat but for a single soft vertical shade, a
     * one pixel highlight along the top edge where light would actually catch,
     * and a shadow that grounds it instead of glowing at you.
     */
    .btn-primary {
      display:inline-flex;
      align-items:center;
      gap:0.5rem;
      padding:0.9rem 2.2rem;
      border-radius:12px;
      background:linear-gradient(180deg, #8b5cf6, var(--foam));
      color:#fff;
      font-family:var(--font-sans);
      font-weight:600;
      font-size:0.9rem;
      letter-spacing:-0.005em;
      text-decoration:none;
      border:1px solid rgba(167,139,250,0.5);
      cursor:pointer;
      transition:transform 0.18s var(--ease), background 0.18s, box-shadow 0.18s;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 1px 2px rgba(0,0,0,0.5),
        0 8px 24px rgba(124,58,237,0.28);
      position:relative;
    }

    .btn-primary:hover {
      transform:translateY(-1px);
      background:linear-gradient(180deg, #9d6bff, #8b5cf6);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        0 1px 2px rgba(0,0,0,0.5),
        0 12px 32px rgba(124,58,237,0.4);
    }

    .btn-primary:active {
      transform:translateY(0);
      box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.28),
        0 1px 2px rgba(0,0,0,0.4);
      transition-duration:0.07s;
    }

    /* Button-in-button trailing icon — nested circular wrapper, not a naked arrow glyph */
    .btn-arrow {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:22px;
      height:22px;
      margin-left:0.1rem;
      border-radius:50%;
      background:rgba(0,0,0,0.14);
      flex-shrink:0;
      transition:transform 0.32s cubic-bezier(0.32,0.72,0,1);
    }
    .btn-primary:hover .btn-arrow { transform:translate(2px,-1px) scale(1.08); }

    .btn-secondary {
      display:inline-flex;
      align-items:center;
      gap:0.5rem;
      padding:0.9rem 2.2rem;
      border-radius:12px;
      background:rgba(124,58,237,0.07);
      border:1px solid rgba(124,58,237,0.32);
      color:var(--biolum);
      font-family:var(--font-sans);
      font-weight:700;
      font-size:0.9rem;
      text-decoration:none;
      transition:transform 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
      cursor:pointer;
    }

    .btn-secondary:hover {
      transform:translateY(-2px);
      background:rgba(124,58,237,0.15);
      border-color:rgba(124,58,237,0.58);
      box-shadow:0 0 26px rgba(124,58,237,0.2), 0 4px 16px rgba(0,0,0,0.3);
    }

    .btn-secondary:active {
      transform:translateY(1px) scale(0.975);
      box-shadow:none;
      transition-duration:0.07s;
    }

    /* ─ Toggle ─ */
    .toggle-wrap { position:relative; display:inline-block; width:50px; height:27px; flex-shrink:0; }
    .toggle-wrap input { opacity:0; width:0; height:0; position:absolute; }
    .toggle-track {
      position:absolute;
      inset:0;
      background:rgba(124,58,237,0.1);
      border:1px solid rgba(124,58,237,0.25);
      border-radius:999px;
      cursor:pointer;
      transition:all 0.3s;
    }
    .toggle-thumb {
      position:absolute;
      width:19px; height:19px;
      top:3px; left:3px;
      background:rgba(196,181,253,0.45);
      border-radius:50%;
      transition:all 0.3s;
      pointer-events:none;
    }
    .toggle-wrap:hover .toggle-track {
      border-color:rgba(124,58,237,0.48);
      background:rgba(124,58,237,0.18);
    }
    .toggle-wrap input:checked ~ .toggle-track {
      background:rgba(124,58,237,0.28);
      border-color:var(--foam);
      box-shadow:0 0 14px rgba(124,58,237,0.4);
    }
    .toggle-wrap:hover input:checked ~ .toggle-track {
      box-shadow:0 0 22px rgba(124,58,237,0.6);
    }
    .toggle-wrap input:checked ~ .toggle-thumb {
      transform:translateX(23px);
      background:var(--biolum);
      box-shadow:0 0 10px rgba(167,139,250,0.75);
    }

    /* ─ Input ─ */
    .input-ocean {
      width:100%;
      padding:0.85rem 1.1rem;
      background:rgba(3, 0, 10, 0.78);
      border:1px solid rgba(124,58,237,0.2);
      border-radius:11px;
      color:var(--pearl);
      font-family:var(--font-sans);
      font-size:0.88rem;
      outline:none;
      transition:border-color 0.2s, box-shadow 0.2s;
    }

    .input-ocean:hover { border-color:rgba(124,58,237,0.36); }

    .input-ocean:focus {
      border-color:var(--foam);
      box-shadow:0 0 0 3px rgba(124,58,237,0.12), 0 0 18px rgba(124,58,237,0.08);
    }

    .input-ocean::placeholder { color:rgba(196,181,253,0.28); }

    .input-error {
      border-color:rgba(248,113,113,0.45) !important;
      box-shadow:0 0 0 3px rgba(248,113,113,0.08) !important;
    }
    .input-error:focus {
      border-color:rgba(248,113,113,0.65) !important;
      box-shadow:0 0 0 3px rgba(248,113,113,0.12), 0 0 18px rgba(248,113,113,0.06) !important;
    }

    select.input-ocean {
      appearance:none;
      -webkit-appearance:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%237c3aed' d='M8 11L2 5h12z'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 0.8rem center;
      background-size:0.85rem;
      padding-right:2.4rem;
      cursor:pointer;
    }
    select.input-ocean option { background:var(--trench); color:var(--text); }

    .input-label {
      display:block;
      font-family:var(--font-ui);
      font-size:0.63rem;
      letter-spacing:0.2em;
      text-transform:uppercase;
      color:rgba(196,181,253,0.5);
      margin-bottom:0.55rem;
    }

    /* ─ Badges ─ */
    .badge {
      display:inline-flex;
      align-items:center;
      gap:0.25rem;
      padding:0.22rem 0.7rem;
      border-radius:999px;
      font-family:var(--font-ui);
      font-size:0.62rem;
      font-weight:700;
      letter-spacing:0.1em;
      text-transform:uppercase;
    }

    .badge-cyan   { background:rgba(124,58,237,0.12); border:1px solid rgba(124,58,237,0.32);  color:var(--biolum); }
    .badge-green  { background:rgba(34,197,94,0.1);   border:1px solid rgba(34,197,94,0.3);    color:var(--ok); }
    .badge-red    { background:rgba(239,68,68,0.1);   border:1px solid rgba(239,68,68,0.3);    color:var(--danger); }
    .badge-yellow { background:rgba(251,191,36,0.1);  border:1px solid rgba(251,191,36,0.3);   color:var(--pulsar); }
    .badge-orange { background:rgba(249,115,22,0.1);  border:1px solid rgba(249,115,22,0.3);   color:var(--warn); }
    .badge-purple { background:rgba(139,92,246,0.12); border:1px solid rgba(139,92,246,0.35);  color:var(--glow); }
    .badge-blue   { background:rgba(6,182,212,0.1);   border:1px solid rgba(6,182,212,0.3);    color:var(--cyan); }

    /* ─ Section label ─ */
    .section-label {
      font-family:var(--font-ui);
      font-size:0.63rem;
      letter-spacing:0.22em;
      text-transform:uppercase;
      color:var(--foam);
    }

    /* ─ Glow divider ─ */
    .glow-divider {
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(124,58,237,0.25), rgba(167,139,250,0.42), rgba(124,58,237,0.25), transparent);
    }

    /* ─ Text selection ─ */
    ::selection {
      background:rgba(124,58,237,0.32);
      color:var(--pearl);
    }

    /* ─ Scrollbar ─ */
    ::-webkit-scrollbar { width:5px; }
    ::-webkit-scrollbar-track { background:var(--abyss); }
    ::-webkit-scrollbar-thumb { background:var(--surface); border-radius:3px; }
    ::-webkit-scrollbar-thumb:hover { background:var(--foam); }

    /* ─ Footer ─ */
    footer {
      background:rgba(0,0,5,0.92);
      border-top:1px solid rgba(124,58,237,0.08);
      text-align:center;
      padding:1.6rem 2rem;
      font-family:var(--font-ui);
      font-size:0.62rem;
      letter-spacing:0.14em;
      color:rgba(196,181,253,0.2);
      text-transform:uppercase;
    }

    footer a { color:rgba(196,181,253,0.38); text-decoration:none; transition:color 0.2s; }
    footer a:hover { color:var(--biolum); }

    /* ─ Animations ─ */
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(18px); }
      to   { opacity:1; transform:translateY(0); }
    }

    @keyframes sonar {
      0%   { transform:scale(0.6); opacity:0.8; }
      100% { transform:scale(2.8); opacity:0; }
    }

    @keyframes drip {
      0%, 100% { transform:scaleY(1); opacity:0.5; }
      50%       { transform:scaleY(1.45); opacity:1; }
    }

    @keyframes sentinelShift {
      0%   { background-position:0% 50%; }
      100% { background-position:200% 50%; }
    }

    @keyframes shimmer {
      0%   { background-position:-200% center; }
      100% { background-position:200% center; }
    }

    @keyframes float {
      0%, 100% { transform:translateY(0px); }
      50%       { transform:translateY(-10px); }
    }

    @keyframes pulseGlow {
      0%, 100% { box-shadow:0 0 20px rgba(124,58,237,0.25); }
      50%       { box-shadow:0 0 42px rgba(167,139,250,0.55); }
    }

    @keyframes spinSlow {
      to { transform:rotate(360deg); }
    }

    @keyframes pulsarBreath {
      0%, 100% { opacity:0.7; transform:scale(1); }
      50%       { opacity:1;   transform:scale(1.04); }
    }

    /* ─ Scroll-to-top ─ */
    #scrollTopBtn {
      position:fixed; bottom:1.75rem; left:1.5rem; z-index:9997;
      width:38px; height:38px; border-radius:50%;
      background:rgba(0,0,5,0.9); border:1px solid rgba(124,58,237,0.25);
      color:rgba(196,181,253,0.55); cursor:pointer; display:flex;
      align-items:center; justify-content:center; font-size:1rem;
      opacity:0; transform:translateY(10px);
      transition:opacity 0.3s, transform 0.3s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
      backdrop-filter:blur(16px); pointer-events:none; line-height:1;
    }
    #scrollTopBtn.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
    #scrollTopBtn:hover { border-color:rgba(167,139,250,0.6); color:var(--biolum); box-shadow:0 0 18px rgba(124,58,237,0.28); }

    /* ─ Mobile nav ─ */
    #mobBtn { display:none; }
    #mobMenu {
      display:none; position:fixed; z-index:98;
      /* Sits below the floating pill and matches its horizontal inset, so it
         reads as a panel hanging off the pill rather than a full-bleed bar. */
      top: var(--below-nav);
      left:var(--nav-inset-x); right:var(--nav-inset-x);
      background:rgba(0,0,5,0.98); backdrop-filter:blur(30px);
      -webkit-backdrop-filter:blur(30px);
      border:1px solid rgba(124,58,237,0.15);
      border-radius:18px;
      box-shadow:0 10px 34px rgba(0,0,0,0.5);
      padding:0.75rem 1.5rem 1.25rem; animation:fadeUp 0.22s ease;
    }
    #mobMenu.open { display:block; }
    /*
     * Mobile nav rows. These were 13px muted text separated by hairlines, with
     * a hover state that a touch screen never sees and tap targets under the
     * 44px anyone can reliably hit. They are rows now: an icon, a real label, a
     * chevron, and a press state that actually responds to a finger.
     */
    .mob-link {
      display:flex; align-items:center; gap:0.85rem;
      min-height:48px; padding:0.7rem 0.85rem;
      border-radius:12px;
      font-family:var(--font-sans); font-size:0.95rem; font-weight:500;
      color:var(--text); text-decoration:none;
      background:transparent;
      transition:background var(--dur-fast) var(--ease),
                 transform var(--dur-fast) var(--ease);
    }
    .mob-link + .mob-link { margin-top:2px; }
    .mob-link .mob-ico {
      display:grid; place-items:center;
      width:32px; height:32px; flex-shrink:0;
      border-radius:9px;
      background:rgba(124,58,237,0.1);
      border:1px solid rgba(124,58,237,0.18);
      color:var(--biolum);
    }
    .mob-link .mob-ico svg { width:15px; height:15px; }
    .mob-link .mob-chev { margin-left:auto; color:rgba(196,181,253,0.28); font-size:0.9rem; }
    .mob-link:hover { background:rgba(124,58,237,0.07); }
    .mob-link:active {
      background:rgba(124,58,237,0.13);
      transform:scale(0.985);
    }

    /*
     * One hover behaviour for every card on the site, on the shared curve.
     * Cards used to sit inert, or lift by whatever number the page that
     * defined them happened to pick. Things moving to the same rhythm is most
     * of what reads as considered.
     */
    .glass, .feat-card, .hiw-card, .cl-card {
      transition:transform var(--dur) var(--ease),
                 border-color var(--dur) var(--ease),
                 box-shadow var(--dur) var(--ease);
    }
    .feat-card:hover, .hiw-card:hover, .cl-card:hover {
      transform:translateY(-3px);
      border-color:rgba(124,58,237,0.32);
      box-shadow:0 12px 34px rgba(0,0,0,0.45), 0 0 0 1px rgba(124,58,237,0.1);
    }

    /* Keyboard users get the same affordance the mouse gets. */
    a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
      outline:2px solid var(--biolum);
      outline-offset:3px;
      border-radius:6px;
    }

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

    /* ─ Tooltip ─ */
    [data-tip] { position:relative; }
    [data-tip]::before {
      content:attr(data-tip);
      position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
      background:rgba(3,0,10,0.97); border:1px solid rgba(124,58,237,0.25);
      color:var(--text); font-family:var(--font-ui); font-size:0.67rem;
      white-space:nowrap; padding:0.3rem 0.65rem; border-radius:7px;
      pointer-events:none; opacity:0; transition:opacity 0.18s, transform 0.18s;
      z-index:9000;
    }
    [data-tip]:hover::before, [data-tip]:focus-visible::before { opacity:1; transform:translateX(-50%) translateY(0); }
    @media (hover: none) { [data-tip]::before { display:none; } }

    @media (max-width: 640px) {
      /* Re-derive the nav geometry for mobile — everything keyed off
         --below-nav (#mobMenu, .dash-sidebar, the easter-egg popup) follows
         automatically. Don't set nav's top/margin/padding directly here. */
      :root {
        --nav-offset:  0.8rem;
        --nav-inset-x: 0.8rem;
        --nav-pad-y:   0.75rem;
      }
      nav { padding-left:1.1rem; padding-right:1.1rem; width:calc(100% - var(--nav-inset-x) * 2); }
      .nav-links { display:none; }
      #mobBtn { display:flex !important; align-items:center; justify-content:center; }

      /* Hide desktop-only nav items — they live in the mobile drawer */
      .nav-pill { display:none !important; }
      nav .btn-nav { display:none !important; }

      /* Server overview header — let chips wrap to its own row */
      .srv-header { flex-wrap:wrap !important; }
      .srv-chips  { flex-basis:100%; justify-content:flex-start !important; }

      /* Responsive grids */
      .resp-2col { grid-template-columns:1fr !important; }
      .resp-3col { grid-template-columns:1fr 1fr !important; }
      .channels-grid { grid-template-columns:1fr !important; gap:1.25rem 0 !important; }

      /* Tighten page padding on small screens */
      .page-wrap { padding-left:1rem !important; padding-right:1rem !important; padding-top:1.75rem !important; }

      /* Hide heavy visuals and sound toggle — not loaded on mobile */
      #particles-js, #wave-canvas { display:none !important; }
      #velaSfxBtn { display:none !important; }

      /* Tables — horizontal scroll inside glass card */
      .tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
      .tbl-scroll table { min-width:620px; }

      /* Hero elements — visible without GSAP on mobile */
      #hero-status, #hero-line1, #hero-line2, #hero-ctas { opacity:1 !important; }

      /* The galaxy stays. It is the best thing on the page, and hiding it was
         most of why mobile felt flat. Its cost is trimmed in the scene itself:
         no bloom pass and a lower pixel ratio. */

      /* Ctrl+S keyboard hint — not applicable on touch devices */
      .ctrl-s-hint { display:none !important; }

      /* Tap focus ring on utility buttons */
      #scrollTopBtn:focus, #velaSfxBtn:focus { outline:none !important; box-shadow:none !important; }

      /* Docs — tighter horizontal padding */
      .docs-wrap { padding-left:1rem !important; padding-right:1rem !important; }
      .sub-row { grid-template-columns:1fr !important; }

      /* Admin reports/appeals — collapse two-column card layout */
      .rpt-body { grid-template-columns:1fr !important; }
      .rpt-users { grid-template-columns:1fr !important; }
      .rpt-preview { min-width:0 !important; max-width:100% !important; border-left:none !important; border-top:1px solid rgba(14,165,201,0.08) !important; }
    }

    /* ─ Toast ─ */
    @keyframes toastIn {
      from { opacity:0; transform:translateX(20px) scale(0.96); }
      to   { opacity:1; transform:translateX(0) scale(1); }
    }
    @keyframes toastOut {
      from { opacity:1; transform:translateX(0); }
      to   { opacity:0; transform:translateX(20px); }
    }
    @keyframes toastBar {
      from { transform:scaleX(1); }
      to   { transform:scaleX(0); }
    }

    /* ─ Cinzel display class ─ */
    .font-cinzel { font-family:var(--font-display); }

    /* ─ Dashboard sidebar layout ─ */
    .dash-wrap { display:flex; min-height:calc(100vh - var(--below-nav)); }

    .dash-sidebar {
      width:210px;
      flex-shrink:0;
      background:rgba(1,0,6,0.78);
      backdrop-filter:blur(24px);
      -webkit-backdrop-filter:blur(24px);
      border-right:1px solid rgba(124,58,237,0.12);
      position:sticky;
      top:var(--below-nav);
      height:calc(100vh - var(--below-nav));
      overflow-y:auto;
      scrollbar-width:none;
    }
    .dash-sidebar::-webkit-scrollbar { display:none; }

    .dash-content {
      flex:1;
      min-width:0;
      padding:2.5rem 2.5rem 6rem;
    }
    /* Base for the 27 views that use .page-wrap. There was no base rule, only
       the overrides below, so every view re-supplied the same margin and
       padding inline. Views needing a different max-width still set that one
       property inline. */
    .page-wrap {
      margin:0 auto;
      padding:3rem 2rem 6rem;
      max-width:1100px;
    }

    .dash-content .page-wrap {
      padding-left:0 !important;
      padding-right:0 !important;
      padding-top:0 !important;
      margin-left:0 !important;
      margin-right:0 !important;
      max-width:none !important;
    }

    /* Sidebar internals */
    .sb-identity {
      padding:1rem;
      border-bottom:1px solid rgba(124,58,237,0.1);
    }
    .sb-back {
      display:block;
      font-family:var(--font-ui);
      font-size:0.6rem;
      letter-spacing:0.08em;
      text-transform:uppercase;
      color:rgba(196,181,253,0.28);
      text-decoration:none;
      margin-bottom:0.85rem;
      transition:color 0.18s;
    }
    .sb-back:hover { color:rgba(196,181,253,0.65); }
    .sb-server { display:flex; align-items:center; gap:0.6rem; }
    .sb-avatar {
      width:34px; height:34px;
      border-radius:10px; flex-shrink:0;
      border:1.5px solid rgba(124,58,237,0.22);
      object-fit:cover;
    }
    .sb-avatar-letter {
      background:linear-gradient(135deg,rgba(124,58,237,0.3),rgba(167,139,250,0.2));
      display:flex; align-items:center; justify-content:center;
      font-size:0.9rem; font-weight:800; color:var(--biolum);
    }
    .sb-server-info { min-width:0; }
    .sb-server-name {
      font-size:0.8rem; font-weight:700; color:#fff;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .sb-server-sub {
      font-family:var(--font-ui);
      font-size:0.55rem; letter-spacing:0.08em;
      text-transform:uppercase; color:rgba(196,181,253,0.28);
      margin-top:0.1rem;
    }

    .sb-nav {
      display:flex;
      flex-direction:column;
      padding:0.75rem 0 2rem;
    }
    .sb-group-label {
      display:block;
      padding:0.65rem 1rem 0.3rem;
      font-family:var(--font-ui);
      font-size:0.53rem;
      letter-spacing:0.2em;
      text-transform:uppercase;
      color:rgba(196,181,253,0.2);
    }
    .sb-sep {
      height:1px;
      background:rgba(124,58,237,0.08);
      margin:0.5rem 1rem;
    }
    .sb-item {
      display:flex;
      align-items:center;
      gap:0.55rem;
      padding:0.5rem 1rem;
      font-family:var(--font-sans);
      font-size:0.83rem;
      font-weight:500;
      color:rgba(221,214,254,0.4);
      text-decoration:none;
      border-left:2px solid transparent;
      transition:color 0.14s, background 0.14s, border-color 0.14s;
    }
    .sb-icon {
      font-size:0.88rem; line-height:1;
      flex-shrink:0; opacity:0.55;
      transition:opacity 0.14s;
    }
    .sb-label { flex:1; }
    .sb-item:hover {
      color:rgba(221,214,254,0.88);
      background:rgba(124,58,237,0.08);
      border-left-color:rgba(124,58,237,0.35);
    }
    .sb-item:hover .sb-icon { opacity:0.85; }
    .sb-item.sb-active {
      color:var(--glow);
      background:rgba(124,58,237,0.13);
      border-left-color:var(--foam);
      font-weight:700;
    }
    .sb-item.sb-active .sb-icon { opacity:1; }

    /* ─ Admin dropdown — click-based ─ */
    .nav-admin-wrap {
      position:relative;
    }
    .admin-dropdown {
      position:absolute;
      top:calc(100% + 8px);
      right:0;
      min-width:170px;
      background:rgba(3,0,10,0.98);
      backdrop-filter:blur(28px);
      border:1px solid rgba(124,58,237,0.22);
      border-radius:12px;
      padding:0.4rem 0;
      box-shadow:0 12px 40px rgba(0,0,0,0.7);
      display:none;
      z-index:200;
    }
    .admin-dropdown.admin-open { display:block; animation:csFadeIn 0.15s ease; }
    .admin-dropdown a {
      display:block;
      padding:0.6rem 1.1rem;
      font-family:var(--font-sans);
      font-size:0.8rem;
      font-weight:600;
      color:rgba(196,181,253,0.45);
      text-decoration:none;
      transition:color 0.13s, background 0.13s;
    }
    .admin-dropdown a:hover { color:#fff; background:rgba(124,58,237,0.1); }
    .admin-dropdown a.adm-red    { color:rgba(239,68,68,0.65); }
    .admin-dropdown a.adm-red:hover    { color:var(--danger); }
    .admin-dropdown a.adm-gold   { color:rgba(251,191,36,0.65); }
    .admin-dropdown a.adm-gold:hover   { color:var(--pulsar); }
    .admin-dropdown a.adm-purple { color:rgba(167,139,250,0.65); }
    .admin-dropdown a.adm-purple:hover { color:var(--biolum); }
    .admin-dropdown-sep {
      height:1px;
      background:rgba(124,58,237,0.1);
      margin:0.3rem 0;
    }

    @media (max-width: 960px) {
      .dash-sidebar { width:190px; }
      .dash-content { padding:2rem 1.75rem 5rem; }
    }

    @media (max-width: 640px) {
      .dash-wrap { flex-direction:column; }
      .dash-sidebar {
        width:100%;
        height:auto;
        position:static;
        border-right:none;
        border-bottom:1px solid rgba(124,58,237,0.1);
      }
      .sb-identity { display:none; }
      .sb-nav {
        flex-direction:row;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        padding:0.3rem 0.5rem;
        gap:0;
        align-items:center;
      }
      .sb-nav::-webkit-scrollbar { display:none; }
      .sb-group-label { display:none; }
      .sb-sep { display:none; }
      .sb-item {
        padding:0.42rem 0.7rem;
        font-size:0.76rem;
        border-left:none;
        border-bottom:2px solid transparent;
        white-space:nowrap;
        gap:0.35rem;
        flex-shrink:0;
      }
      .sb-icon { font-size:0.8rem; }
      .sb-item:hover  { border-bottom-color:rgba(124,58,237,0.35); background:rgba(124,58,237,0.06); border-left:none; }
      .sb-item.sb-active { border-bottom-color:var(--foam); background:rgba(124,58,237,0.1); border-left:none; }
      .dash-content { padding:1.25rem 1rem 4rem; }
      .dash-content .page-wrap { padding:0 !important; }
    }

    /* ─ Custom Channel Select ─ */
    .cs-wrap { position:relative; user-select:none; }

    .cs-trigger {
      width:100%; display:flex; align-items:center; gap:0.5rem;
      padding:0.72rem 0.95rem;
      background:rgba(2,9,18,0.75);
      border:1px solid var(--cs-ab, rgba(14,165,201,0.2));
      border-radius:10px; cursor:pointer;
      transition:border-color 0.18s, box-shadow 0.18s;
      text-align:left; font-family:var(--font-sans); outline:none;
    }
    .cs-trigger:hover,
    .cs-wrap.cs-open .cs-trigger {
      border-color:var(--cs-ac, var(--cyan));
      box-shadow:0 0 0 3px var(--cs-aa, rgba(34,211,238,0.14));
    }
    .cs-caret {
      flex-shrink:0; color:rgba(125,211,252,0.3);
      transition:transform 0.2s; font-size:0.7rem; line-height:1;
    }
    .cs-wrap.cs-open .cs-caret { transform:rotate(180deg); }

    .cs-panel {
      display:none; position:fixed;
      z-index:99999;
      /* top / left / width set by JS on open */
      background: rgba(2,8,16,0.98);
      border:1px solid var(--cs-ab, rgba(14,165,201,0.2));
      border-radius:12px; overflow:hidden;
      box-shadow:0 12px 48px rgba(0,0,0,0.75), 0 0 0 1px rgba(14,165,201,0.05);
      backdrop-filter:blur(28px);
      animation:csFadeIn 0.14s ease;
    }
    .cs-wrap.cs-open .cs-panel { display:block; }
    @keyframes csFadeIn {
      from { opacity:0; transform:translateY(-5px); }
      to   { opacity:1; transform:translateY(0); }
    }

    .cs-search-wrap { padding:0.55rem 0.6rem; border-bottom:1px solid rgba(14,165,201,0.07); }
    .cs-search {
      width:100%; background:rgba(14,165,201,0.06);
      border:1px solid rgba(14,165,201,0.11); border-radius:7px;
      padding:0.42rem 0.7rem 0.42rem 2rem;
      font-family:var(--font-ui); font-size:0.75rem;
      color:var(--sky); outline:none;
      transition:border-color 0.15s, background 0.15s;
    }
    .cs-search:focus {
      border-color:var(--cs-ac, var(--cyan));
      background:rgba(14,165,201,0.1);
    }
    .cs-search::placeholder { color:rgba(125,211,252,0.27); }
    .cs-search-icon {
      position:absolute; left:1.05rem; top:50%; transform:translateY(-50%);
      color:rgba(125,211,252,0.28); pointer-events:none; flex-shrink:0;
    }

    .cs-list {
      max-height:230px; overflow-y:auto; padding:0.35rem 0;
      scrollbar-width:thin; scrollbar-color:rgba(14,165,201,0.18) transparent;
    }
    .cs-list::-webkit-scrollbar { width:3px; }
    .cs-list::-webkit-scrollbar-track { background:transparent; }
    .cs-list::-webkit-scrollbar-thumb { background:rgba(14,165,201,0.2); border-radius:3px; }

    .cs-group-label {
      padding:0.6rem 0.9rem 0.2rem;
      font-family:var(--font-ui); font-size:0.58rem;
      letter-spacing:0.13em; text-transform:uppercase;
      color:rgba(125,211,252,0.25); font-weight:700;
      pointer-events:none;
    }
    .cs-option {
      display:flex; align-items:center; gap:0.5rem;
      padding:0.42rem 0.9rem; cursor:pointer;
      transition:background 0.1s;
    }
    .cs-option:hover       { background:rgba(14,165,201,0.07); }
    .cs-option.cs-focused  { background:rgba(14,165,201,0.1); }
    .cs-option.cs-selected { background:var(--cs-aa, rgba(34,211,238,0.11)); }
    .cs-option[hidden]     { display:none; }

    .cs-opt-hash {
      font-family:var(--font-ui); font-size:0.82rem;
      font-weight:700; color:var(--cs-ac, var(--cyan)); flex-shrink:0; line-height:1;
    }
    .cs-opt-name {
      flex:1; font-size:0.82rem; color:var(--sky);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .cs-opt-check {
      color:var(--cs-ac, var(--cyan)); font-size:0.7rem;
      flex-shrink:0; opacity:0; transition:opacity 0.1s;
    }
    .cs-option.cs-selected .cs-opt-check { opacity:1; }
    .cs-none-opt .cs-opt-hash { opacity:0.3; letter-spacing:-0.05em; }
    .cs-none-opt .cs-opt-name { color:rgba(125,211,252,0.33); font-style:italic; font-size:0.78rem; }
    .cs-no-results {
      padding:0.8rem 0.9rem; font-size:0.78rem;
      color:rgba(125,211,252,0.22); text-align:center; font-style:italic;
    }

    /* ─ Role Select ─ */
    .rs-dot {
      width:10px; height:10px; border-radius:50%; flex-shrink:0;
      transition:background 0.15s, box-shadow 0.15s;
    }
    .rs-chips { display:flex; align-items:center; gap:0.3rem; flex:1; overflow:hidden; min-width:0; }
    .rs-chip {
      display:inline-flex; align-items:center; gap:0.28rem;
      padding:0.15rem 0.55rem 0.15rem 0.3rem;
      background:rgba(167,139,250,0.1); border:1px solid rgba(167,139,250,0.2);
      border-radius:99px; font-size:0.73rem; font-weight:600;
      color:var(--text); white-space:nowrap; max-width:130px;
      overflow:hidden; text-overflow:ellipsis; flex-shrink:0;
    }
    .rs-more { font-family:var(--font-ui); font-size:0.7rem; color:rgba(125,211,252,0.38); white-space:nowrap; flex-shrink:0; }
    .rs-tick {
      width:15px; height:15px; border-radius:4px; flex-shrink:0;
      border:1.5px solid rgba(125,211,252,0.18);
      display:flex; align-items:center; justify-content:center;
      transition:background 0.1s, border-color 0.1s;
      font-size:0.6rem; line-height:1; color:transparent;
    }
    .cs-option.cs-selected .rs-tick {
      background:var(--cs-ac, var(--biolum));
      border-color:var(--cs-ac, var(--biolum));
      color:#fff;
    }
    .rs-done-btn {
      display:block; width:calc(100% - 1.2rem); margin:0.35rem 0.6rem 0.55rem;
      padding:0.48rem; background:var(--cs-aa, rgba(167,139,250,0.1));
      border:1px solid var(--cs-ab, rgba(167,139,250,0.22));
      border-radius:8px; font-family:var(--font-sans); font-size:0.78rem;
      font-weight:700; color:var(--cs-ac, var(--biolum)); cursor:pointer;
      transition:background 0.15s, border-color 0.15s; text-align:center;
    }
    .rs-done-btn:hover { background:rgba(167,139,250,0.18); border-color:var(--cs-ac, var(--biolum)); }

    /* ── VIP badges ─────────────────────────────────────────────────── */
    .vip-badge {
      display:inline-flex; align-items:center;
      padding:0.18rem 0.55rem;
      border-radius:6px;
      font-family:var(--font-ui);
      font-size:0.6rem;
      font-weight:700;
      letter-spacing:0.1em;
      background:color-mix(in srgb, var(--vip-color) 14%, transparent);
      border:1px solid color-mix(in srgb, var(--vip-color) 45%, transparent);
      color:var(--vip-color);
      box-shadow:0 0 10px color-mix(in srgb, var(--vip-color) 18%, transparent);
      white-space:nowrap;
      vertical-align:middle;
    }
    /* Owner — The Architect: spinning rainbow border + cycling glow */
    @property --vip-owner-angle {
      syntax:'<angle>';
      inherits:false;
      initial-value:0deg;
    }
    .vip-owner {
      background:linear-gradient(rgba(8,3,20,0.93), rgba(8,3,20,0.93)) padding-box,
        conic-gradient(from var(--vip-owner-angle),
          #ff6b6b, #ffa94d, #ffe066, #69db7c, #4dabf7, #cc5de8, #ff6b6b
        ) border-box;
      border:2px solid transparent;
      padding:0.22rem 0.65rem;
      font-size:0.62rem;
      color:#fff;
      text-shadow:0 0 10px rgba(255,220,120,0.9);
      animation:vip-owner-spin 1.8s linear infinite, vip-owner-glow 3.6s linear infinite;
      position:relative;
    }
    .vip-owner::before {
      content:'♛ ';
      font-size:0.55rem;
      opacity:0.85;
    }
    @keyframes vip-owner-spin {
      to { --vip-owner-angle: 360deg; }
    }
    @keyframes vip-owner-glow {
      0%,100% { box-shadow:0 0 10px rgba(255,107,107,0.55), 0 0 22px rgba(255,107,107,0.25); }
      25%     { box-shadow:0 0 10px rgba(77,171,247,0.55),  0 0 22px rgba(77,171,247,0.25); }
      50%     { box-shadow:0 0 10px rgba(105,219,124,0.55), 0 0 22px rgba(105,219,124,0.25); }
      75%     { box-shadow:0 0 10px rgba(204,93,232,0.55),  0 0 22px rgba(204,93,232,0.25); }
    }

    /* Twin — Ride or Die: shimmer sweep violet → fuchsia */
    .vip-twin {
      background:linear-gradient(90deg,
        rgba(167,139,250,0.22), rgba(232,121,249,0.28), rgba(167,139,250,0.22));
      background-size:200% 100%;
      border-color:transparent;
      color:#f0e6ff;
      text-shadow:0 0 10px rgba(232,121,249,0.7);
      animation:vip-twin-shimmer 2.2s ease-in-out infinite;
    }
    @keyframes vip-twin-shimmer {
      0%, 100% { background-position:0% 50%;   box-shadow:0 0 8px rgba(167,139,250,0.3); }
      50%       { background-position:200% 50%; box-shadow:0 0 18px rgba(232,121,249,0.55); }
    }

    /* HG — wife: romantic heartbeat with deep glow */
    .vip-hg::before {
      content:'♥ ';
      color:#fb7185;
      text-shadow:0 0 8px rgba(251,113,133,0.9);
    }
    .vip-hg {
      color:#fce7f3;
      text-shadow:0 0 10px rgba(249,168,212,0.7);
      animation:vip-hg-beat 1.5s ease-in-out infinite;
    }
    @keyframes vip-hg-beat {
      0%,  100% { box-shadow:0 0 6px rgba(249,168,212,0.2), 0 0 0px rgba(244,114,182,0);    transform:scale(1); }
      15%        { box-shadow:0 0 20px rgba(249,168,212,0.75), 0 0 36px rgba(244,114,182,0.35); transform:scale(1.13); }
      30%        { box-shadow:0 0 8px rgba(249,168,212,0.3), 0 0 0px rgba(244,114,182,0);   transform:scale(1); }
      45%        { box-shadow:0 0 15px rgba(249,168,212,0.6), 0 0 22px rgba(244,114,182,0.22); transform:scale(1.08); }
      65%        { box-shadow:0 0 6px rgba(249,168,212,0.2), 0 0 0px rgba(244,114,182,0);   transform:scale(1); }
    }

    /* Favorite — My Constant: slow silver starlight breathe */
    .vip-favorite::before {
      content:'✦ ';
      opacity:0.75;
    }
    .vip-favorite {
      color:#e2e8f0;
      text-shadow:0 0 8px rgba(226,232,240,0.55);
      animation:vip-favorite-breathe 4s ease-in-out infinite;
    }
    @keyframes vip-favorite-breathe {
      0%,  100% { box-shadow:0 0 5px rgba(148,163,184,0.18);                               opacity:0.8; }
      50%        { box-shadow:0 0 18px rgba(226,232,240,0.5), 0 0 34px rgba(148,163,184,0.22); opacity:1;   }
    }

    /* Teto — The Chimera: hot-pink star pulse */
    .vip-teto::before {
      content:'★ ';
      font-size:0.52rem;
      color:#E5117C;
      text-shadow:0 0 8px rgba(229,17,124,0.9);
    }
    .vip-teto {
      color:#ffd0e8;
      text-shadow:0 0 8px rgba(229,17,124,0.7);
      animation:vip-teto-pulse 2s ease-in-out infinite;
    }
    @keyframes vip-teto-pulse {
      0%,  100% { box-shadow:0 0 6px rgba(229,17,124,0.25); }
      50%        { box-shadow:0 0 16px rgba(229,17,124,0.65), 0 0 30px rgba(255,126,199,0.28); }
    }

    /* Miku — Star of the Void: holographic teal spinning conic border + wave glow */
    @property --vip-miku-angle {
      syntax:'<angle>';
      inherits:false;
      initial-value:0deg;
    }
    .vip-miku {
      background:linear-gradient(rgba(0,4,12,0.92), rgba(0,4,12,0.92)) padding-box,
        conic-gradient(from var(--vip-miku-angle),
          #39C5BB, #00e5d4, #7fffd4, #e8fffb, #00e5d4,
          #39C5BB, #00e5d4, #7fffd4, #e8fffb, #39C5BB
        ) border-box;
      border:2px solid transparent;
      padding:0.22rem 0.7rem;
      font-size:0.62rem;
      color:#e0fffe;
      text-shadow:0 0 10px rgba(57,197,187,0.9), 0 0 22px rgba(0,229,212,0.5);
      animation:vip-miku-spin 2s linear infinite, vip-miku-wave 3.5s ease-in-out infinite;
      position:relative;
    }
    .vip-miku::before {
      content:'♪ ';
      font-size:0.65rem;
      opacity:0.92;
    }
    @keyframes vip-miku-spin {
      to { --vip-miku-angle: 360deg; }
    }
    @keyframes vip-miku-wave {
      0%,  100% { box-shadow:0 0 10px rgba(57,197,187,0.5),   0 0 22px rgba(57,197,187,0.2); }
      33%        { box-shadow:0 0 16px rgba(0,229,212,0.75),   0 0 32px rgba(0,229,212,0.32); }
      66%        { box-shadow:0 0 13px rgba(127,255,212,0.65), 0 0 28px rgba(127,255,212,0.25); }
    }
  #_imgCropModal { display:none;position:fixed;inset:0;z-index:9900;
    background:rgba(1,6,15,0.9);align-items:flex-start;justify-content:center;
    padding:1.25rem;overflow-y:auto; }
  #_cropModalWrap { background:#020912;border:1px solid rgba(14,165,201,0.18);
    border-radius:20px;width:100%;max-width:960px;margin:auto;display:flex;
    flex-direction:column;overflow:hidden;box-shadow:0 0 100px rgba(14,165,201,0.07); }
  #_cropBody { display:flex;flex-direction:row;height:55vh;min-height:280px; }
  #_cropCanvasWrap { flex:1;min-width:0;background:#010609;overflow:hidden;position:relative; }
  #_cropCanvasWrap > img { display:block;max-width:100%;max-height:100%; }
  #_cropSidebar { width:220px;flex-shrink:0;border-left:1px solid rgba(14,165,201,0.09);
    background:rgba(2,9,18,0.45);padding:1.1rem;display:flex;flex-direction:column;
    gap:0.85rem;overflow-y:auto; }
  @media(max-width:640px){
    #_cropBody { flex-direction:column;height:auto; }
    #_cropCanvasWrap { height:42vh; }
    #_cropSidebar { width:100%;border-left:none;border-top:1px solid rgba(14,165,201,0.09); }
  }