/* ==========================================================================
   SIA — habbosia.com  ·  "OPS CONSOLE" design system (2026-07 redesign)
   One stylesheet for the whole public site. Dark field-dossier aesthetic:
   sharp corners, hairline rules, mono microcopy, phosphor green on gunmetal,
   optional blurred HQ-photo backdrop behind every page.
   ========================================================================== */

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

:root {
  /* surfaces */
  --ink:        #070b08;                   /* page base            */
  --panel:      rgba(14, 20, 16, 0.88);    /* translucent panel    */
  --panel-soft: rgba(14, 20, 16, 0.62);
  --paper:      #0e1511;                   /* solid card           */
  --paper-2:    #121b15;                   /* raised card          */
  --line:       rgba(158, 187, 167, 0.14); /* hairline             */
  --line-soft:  rgba(158, 187, 167, 0.07);
  --line-hard:  rgba(158, 187, 167, 0.26);

  /* accents */
  --green:        #46d183;
  --green-ink:    #06170d;                 /* text on green fill   */
  --green-soft:   rgba(70, 209, 131, 0.10);
  --green-line:   rgba(70, 209, 131, 0.32);
  --green-faint:  rgba(70, 209, 131, 0.05);
  --amber:        #d9b24a;
  --amber-soft:   rgba(217, 178, 74, 0.10);
  --amber-line:   rgba(217, 178, 74, 0.35);
  --red:          #e05d5d;
  --red-soft:     rgba(224, 93, 93, 0.10);
  --red-line:     rgba(224, 93, 93, 0.35);
  --blue:         #5aa7d6;
  --blue-soft:    rgba(90, 167, 214, 0.10);
  --blue-line:    rgba(90, 167, 214, 0.35);
  --discord:      #5865f2;

  /* text */
  --text:  #dce8de;
  --dim:   #93ac9a;
  --faint: #5c7663;

  /* type */
  --f-display: 'Oxanium', 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --f-body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

  --r: 2px;                                /* the whole site is near-square */
  --pad: 22px;
  --nav-h: 58px;
  --top-h: 26px;
  --ease: 0.18s ease;

  color-scheme: dark;
}

/* Light theme — "paper ledger": sage paper, stamped green. */
[data-theme="light"] {
  --ink:        #eef2ec;
  --panel:      rgba(251, 253, 250, 0.9);
  --panel-soft: rgba(251, 253, 250, 0.72);
  --paper:      #fbfdfa;
  --paper-2:    #f2f6f0;
  --line:       rgba(24, 48, 32, 0.14);
  --line-soft:  rgba(24, 48, 32, 0.07);
  --line-hard:  rgba(24, 48, 32, 0.30);
  --green:      #157a45;
  --green-ink:  #f2fbf5;
  --green-soft: rgba(21, 122, 69, 0.08);
  --green-line: rgba(21, 122, 69, 0.34);
  --green-faint:rgba(21, 122, 69, 0.04);
  --amber:      #8a6b14;
  --amber-soft: rgba(138, 107, 20, 0.09);
  --amber-line: rgba(138, 107, 20, 0.35);
  --red:        #b03434;
  --red-soft:   rgba(176, 52, 52, 0.08);
  --red-line:   rgba(176, 52, 52, 0.35);
  --blue:       #2b6f9e;
  --blue-soft:  rgba(43, 111, 158, 0.08);
  --blue-line:  rgba(43, 111, 158, 0.35);
  --text:  #17281c;
  --dim:   #48604f;
  --faint: #7d937f;
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--faint) var(--ink);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--faint); border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--green); }
::selection { background: var(--green); color: var(--green-ink); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
[id] { scroll-margin-top: calc(var(--nav-h) + var(--top-h) + 18px); }

body {
  font-family: var(--f-body);
  font-size: 15.5px;
  background: var(--ink);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  padding-top: calc(var(--nav-h) + var(--top-h));
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 22px; }
.accent { color: var(--green); }

body, .navbar, .topline, .content-card, .info-card, .leader-card, .about-card,
.guide-card, .guide-row, .script-link, .division, .sia-table, .otm-card,
.footer, .page-footer, .cta-panel, .notice {
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}

/* ==========================================================================
   ICONS — currentColor mask glyphs (SIA set, drawn for this site)
   ========================================================================== */
.i {
  display: inline-block; width: 1em; height: 1em;
  background: currentColor; vertical-align: -0.12em;
  -webkit-mask: var(--i) no-repeat center / contain;
          mask: var(--i) no-repeat center / contain;
}
.i-shield        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M12 2.8 4.5 5.6v6.2c0 4.6 3.1 7.6 7.5 9.4 4.4-1.8 7.5-4.8 7.5-9.4V5.6L12 2.8Z'/%3E%3Cpath d='M12 7v9'/%3E%3Cpath d='M8.5 10.5H12'/%3E%3C/svg%3E"); }
.i-lock          { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Crect x='4.5' y='10.5' width='15' height='10'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 14.5v2.5'/%3E%3C/svg%3E"); }
.i-clipboard     { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Crect x='5' y='4.5' width='14' height='17'/%3E%3Cpath d='M9 4.5V2.8h6v1.7'/%3E%3Cpath d='M8.5 10h7M8.5 13.5h7M8.5 17h4'/%3E%3C/svg%3E"); }
.i-target        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 1.5v4M12 18.5v4M1.5 12h4M18.5 12h4'/%3E%3C/svg%3E"); }
.i-repeat        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M4 8h13l-3-3'/%3E%3Cpath d='M20 16H7l3 3'/%3E%3C/svg%3E"); }
.i-users         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='9' cy='8' r='3.4'/%3E%3Cpath d='M2.8 20c.7-3.3 3.2-5 6.2-5s5.5 1.7 6.2 5'/%3E%3Cpath d='M15.8 5a3.4 3.4 0 0 1 0 6'/%3E%3Cpath d='M18.2 15.4c1.7.9 2.7 2.4 3 4.6'/%3E%3C/svg%3E"); }
.i-user          { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.8 20.5c.9-3.7 3.9-5.7 7.2-5.7s6.3 2 7.2 5.7'/%3E%3C/svg%3E"); }
.i-cap           { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M2 9.5 12 5l10 4.5-10 4.5L2 9.5Z'/%3E%3Cpath d='M6.5 12v4.2c0 1.3 2.5 2.6 5.5 2.6s5.5-1.3 5.5-2.6V12'/%3E%3Cpath d='M22 9.5v5'/%3E%3C/svg%3E"); }
.i-chart         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M3.5 3.5v17h17'/%3E%3Cpath d='M7.5 16.5v-5M12 16.5V7.5M16.5 16.5v-7'/%3E%3C/svg%3E"); }
.i-trend         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='m3 17 6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E"); }
.i-star          { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.8 5.8 6.2.8-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2l1.1-6.2L3 9.6l6.2-.8L12 3Z'/%3E%3C/svg%3E"); }
.i-medal         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='9' r='4.8'/%3E%3Cpath d='m9.2 13.4-1.7 7 4.5-2.3 4.5 2.3-1.7-7'/%3E%3Cpath d='M12 7v4M10.2 9h3.6'/%3E%3C/svg%3E"); }
.i-crown         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='m3.5 7.5 4.5 4L12 5l4 6.5 4.5-4L19 18.5H5L3.5 7.5Z'/%3E%3C/svg%3E"); }
.i-globe         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M3.2 12h17.6'/%3E%3Cpath d='M12 3.2c-4.6 4.8-4.6 12.8 0 17.6 4.6-4.8 4.6-12.8 0-17.6Z'/%3E%3C/svg%3E"); }
.i-info          { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='3.5' y='3.5' width='17' height='17'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.4v.4'/%3E%3C/svg%3E"); }
.i-alert         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19L12 3.5Z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 17v.4'/%3E%3C/svg%3E"); }
.i-ban           { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='m5.8 5.8 12.4 12.4'/%3E%3C/svg%3E"); }
.i-check-circle  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='m7.8 12.4 2.8 2.8 5.6-6'/%3E%3C/svg%3E"); }
.i-check         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='m4.5 12.5 5 5L19.5 7'/%3E%3C/svg%3E"); }
.i-plus-circle   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 7.5v9M7.5 12h9'/%3E%3C/svg%3E"); }
.i-gear          { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M18.7 5.3l-2.1 2.1M7.4 16.6l-2.1 2.1'/%3E%3C/svg%3E"); }
.i-bulb          { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M12 3a6 6 0 0 1 3.4 10.9c-.8.6-1.4 1.6-1.4 2.6h-4c0-1-.6-2-1.4-2.6A6 6 0 0 1 12 3Z'/%3E%3Cpath d='M9.8 20h4.4'/%3E%3C/svg%3E"); }
.i-note          { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M5 3.5h14v13l-4 4H5v-17Z'/%3E%3Cpath d='M15 20.5v-4h4'/%3E%3Cpath d='M8.5 9h7M8.5 12.5h5'/%3E%3C/svg%3E"); }
.i-book          { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M4.5 4.5A2 2 0 0 1 6.5 3H19.5v16h-13a2 2 0 0 0-2 2v-16.5Z'/%3E%3Cpath d='M4.5 19a2 2 0 0 1 2-2H19.5'/%3E%3Cpath d='M9 7.5h6'/%3E%3C/svg%3E"); }
.i-folder        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M3 5.5h6l2 2.5h10V19H3V5.5Z'/%3E%3Cpath d='M3 10.5h18'/%3E%3C/svg%3E"); }
.i-clock         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 6.5V12l3.8 2.2'/%3E%3C/svg%3E"); }
.i-megaphone     { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='m3.5 9.5 13-5.5v16l-13-5.5v-5Z'/%3E%3Cpath d='M20.5 9v6'/%3E%3Cpath d='M6.5 15.5v4h4v-3'/%3E%3C/svg%3E"); }
.i-mic           { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Crect x='9' y='2.8' width='6' height='10.5' rx='3'/%3E%3Cpath d='M5.2 11a6.8 6.8 0 0 0 13.6 0'/%3E%3Cpath d='M12 17.8v3.4'/%3E%3C/svg%3E"); }
.i-radio         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='11' r='2'/%3E%3Cpath d='M7.7 15.3a6 6 0 0 1 0-8.6M16.3 6.7a6 6 0 0 1 0 8.6'/%3E%3Cpath d='M4.9 18.1a10 10 0 0 1 0-14.2M19.1 3.9a10 10 0 0 1 0 14.2'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E"); }
.i-volume        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4v-5Z'/%3E%3Cpath d='M15.5 9a4.2 4.2 0 0 1 0 6'/%3E%3Cpath d='M18.3 6.3a8 8 0 0 1 0 11.4'/%3E%3C/svg%3E"); }
.i-volume-x      { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4v-5Z'/%3E%3Cpath d='m15.5 9.5 5 5M20.5 9.5l-5 5'/%3E%3C/svg%3E"); }
.i-play          { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M7 4.5 19 12 7 19.5v-15Z'/%3E%3C/svg%3E"); }
.i-chevron       { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='square'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); }
.i-arrow         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E"); }
.i-external      { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M10 5H4.5v14.5H19V14'/%3E%3Cpath d='M14 3.5h6.5V10'/%3E%3Cpath d='M20 4 11.5 12.5'/%3E%3C/svg%3E"); }
.i-radar         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Ccircle cx='12' cy='12' r='4.6'/%3E%3Cpath d='M12 12 18 6'/%3E%3Cpath d='M12 12h.01'/%3E%3C/svg%3E"); }
.i-coins         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='9' cy='9' r='5.5'/%3E%3Cpath d='M15.2 7.2a5.5 5.5 0 1 1-8 8'/%3E%3C/svg%3E"); }
.i-columns       { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M3 20.5h18'/%3E%3Cpath d='m12 3 8 4.5H4L12 3Z'/%3E%3Cpath d='M6 7.5v13M10 7.5v13M14 7.5v13M18 7.5v13'/%3E%3C/svg%3E"); }
.i-building      { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M5.5 20.5v-16h13v16'/%3E%3Cpath d='M3 20.5h18'/%3E%3Cpath d='M9 8h1.5M13.5 8H15M9 11.5h1.5M13.5 11.5H15M9 15h1.5M13.5 15H15'/%3E%3C/svg%3E"); }
.i-compass       { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5 5-2Z'/%3E%3C/svg%3E"); }
.i-gamepad       { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M7 6.5h10a5 5 0 0 1 5 5.5l-.5 3.5a3 3 0 0 1-5.2 1.6L15 15.5H9l-1.3 1.6A3 3 0 0 1 2.5 15.5L2 12a5 5 0 0 1 5-5.5Z'/%3E%3Cpath d='M7 11h3M8.5 9.5v3'/%3E%3Cpath d='M15.5 10.2v.01M17.5 12.2v.01'/%3E%3C/svg%3E"); }
.i-heart         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M12 20c-5-3-8.3-6-8.3-9.7C3.7 7.7 5.7 6 8 6c1.6 0 3 .8 4 2 1-1.2 2.4-2 4-2 2.3 0 4.3 1.7 4.3 4.3 0 3.7-3.3 6.7-8.3 9.7Z'/%3E%3C/svg%3E"); }
.i-message       { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M3.5 4.5h17v12h-10l-4 3.5v-3.5h-3v-12Z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E"); }
.i-newspaper     { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M4 4.5h13v15H5.5A1.5 1.5 0 0 1 4 18V4.5Z'/%3E%3Cpath d='M17 8.5h3V18a1.5 1.5 0 0 1-1.5 1.5H17'/%3E%3Cpath d='M7 8h7M7 11.5h7M7 15h4.5'/%3E%3C/svg%3E"); }
.i-palette       { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.2 0 2-.9 2-2s-.9-1.6-.9-2.6c0-1 .8-1.9 1.9-1.9H17A4 4 0 0 0 21 10.5C21 6.4 16.9 3 12 3Z'/%3E%3Cpath d='M7.5 11.5v.01M10.5 7.5v.01M14.5 7.5v.01'/%3E%3C/svg%3E"); }
.i-phone         { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h4l1.5 4.5-2 1.5a12 12 0 0 0 6 6l1.5-2 4.5 1.5v4a1.5 1.5 0 0 1-1.6 1.5C10.4 20 4 13.6 3.5 5.1A1.5 1.5 0 0 1 5 3.5Z'/%3E%3C/svg%3E"); }
.i-pin           { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E"); }
.i-rocket        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M12 15.5c5.5-4 7-8.5 7-12.5-4 0-8.5 1.5-12.5 7L12 15.5Z'/%3E%3Cpath d='M6.5 10 3 11.5 5.5 14M14 17.5 12.5 21 10 18.5'/%3E%3Cpath d='M5 19c1-.3 2.7-1.7 3-3'/%3E%3C/svg%3E"); }
.i-sparkles      { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M12 4 13.8 9.2 19 11l-5.2 1.8L12 18l-1.8-5.2L5 11l5.2-1.8L12 4Z'/%3E%3Cpath d='M19 16.5 19.7 18.3 21.5 19l-1.8.7L19 21.5l-.7-1.8-1.8-.7 1.8-.7.7-1.8Z'/%3E%3C/svg%3E"); }
.i-ticket        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M3.5 7h17v3.2a1.8 1.8 0 0 0 0 3.6V17h-17v-3.2a1.8 1.8 0 0 0 0-3.6V7Z'/%3E%3Cpath d='M14.5 7.5v2m0 2.5v2m0 2.5v1.5'/%3E%3C/svg%3E"); }
.i-wrench        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M14.5 3.2a5.4 5.4 0 0 0-5.9 7.5L3 16.3 7.7 21l5.6-5.6a5.4 5.4 0 0 0 7.5-5.9L17.5 12l-3.2-1.3L13 7.5l1.5-4.3Z'/%3E%3C/svg%3E"); }
.i-scroll        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M6.5 3.5h13v14l-3 3h-10v-17Z'/%3E%3Cpath d='M16.5 20.5v-3h3'/%3E%3Cpath d='M10 8h6M10 11.5h6M10 15h3'/%3E%3C/svg%3E"); }
.i-sun           { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.2v2.4M12 19.4v2.4M4.1 4.1l1.7 1.7M18.2 18.2l1.7 1.7M2.2 12h2.4M19.4 12h2.4M4.1 19.9l1.7-1.7M18.2 5.8l1.7-1.7'/%3E%3C/svg%3E"); }

/* ==========================================================================
   HQ BACKDROP — fixed, blurred + duotone-filtered photo behind everything
   ========================================================================== */
.site-bg {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background: var(--ink);
}
.site-bg-img {
  position: absolute; inset: -40px;                /* hide the blur's soft edge */
  background-position: center; background-size: cover;
  filter: blur(14px) saturate(0.45) brightness(0.34) contrast(1.05);
  opacity: 0.85;
}
[data-theme="light"] .site-bg-img {
  filter: blur(16px) saturate(0.3) brightness(1.55) contrast(0.82);
  opacity: 0.5;
}
.site-bg::after {                                   /* green wash + vignette */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(70,209,131,0.06), transparent 55%),
    radial-gradient(ellipse 140% 120% at 50% 110%, rgba(0,0,0,0.55), transparent 60%);
}
[data-theme="light"] .site-bg::after { background: none; }
.site-bg::before {                                  /* faint scanlines */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.14) 3px 4px);
  pointer-events: none;
}
[data-theme="light"] .site-bg::before { opacity: 0.25; }

/* ==========================================================================
   TOPLINE — slim identity strip above the navbar (muted, not a bright bar)
   ========================================================================== */
.topline {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  height: var(--top-h);
  background: var(--ink); color: var(--dim);
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
}
[data-theme="light"] .topline { background: var(--paper-2); }
.topline-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 22px;
  height: 100%; display: flex; align-items: center; gap: 10px;
  overflow: hidden; white-space: nowrap;
}
.topline-brand { color: var(--dim); }
.topline-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--green); box-shadow: 0 0 6px var(--green-line);
}
.topline-right { margin-left: auto; display: flex; gap: 14px; color: var(--faint); }
@media (max-width: 640px) { .topline-hide-sm { display: none; } }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
  position: fixed; top: var(--top-h); left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  background: var(--panel);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.navbar.scrolled { border-bottom-color: var(--green-line); }
.nav-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--green); transition: width 0.1s linear; z-index: 2;
}
.nav-container {
  max-width: 1160px; margin: 0 auto; padding: 0 22px;
  height: 100%; display: flex; align-items: center; gap: 10px;
}
.nav-logo { display: flex; align-items: center; gap: 11px; margin-right: 18px; flex-shrink: 0; }
.logo-shield { width: 34px; height: 34px; object-fit: contain; transition: filter var(--ease); }
.nav-logo:hover .logo-shield { filter: drop-shadow(0 0 6px var(--green-line)); }
.logo-text-group { display: flex; flex-direction: column; line-height: 1; }
.logo-text {
  font-family: var(--f-display); font-weight: 700; font-size: 19px;
  letter-spacing: 0.14em; color: var(--text);
}
.nav-logo:hover .logo-text { color: var(--green); }
.logo-sub {
  font-family: var(--f-mono); font-size: 8.5px; color: var(--faint);
  letter-spacing: 0.18em; text-transform: uppercase; margin-top: 3px;
}

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim); transition: color var(--ease);
}
.nav-link::after {
  content: ''; position: absolute; left: 12px; right: 100%; bottom: 2px;
  height: 1px; background: var(--green); transition: right 0.2s ease;
}
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-link:hover::after, .nav-link.active::after { right: 12px; }
.nav-link.active { color: var(--green); }

.nav-cta {
  margin-left: 10px; padding: 7px 14px;
  background: var(--green); color: var(--green-ink) !important;
  font-weight: 600;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--text); }
.nav-cta .i { font-size: 11px; }

/* dropdowns */
.caret {
  width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px);
  transition: transform var(--ease);
}
.dropdown { position: relative; }
.dropdown:hover > .nav-link .caret { transform: rotate(225deg) translateY(-1px); }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px;
  background: var(--paper); border: 1px solid var(--line-hard);
  padding: 6px 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
  z-index: 10;
}
.dropdown-menu::before {                     /* corner tick */
  content: ''; position: absolute; top: -1px; left: -1px;
  width: 10px; height: 10px;
  border-top: 2px solid var(--green); border-left: 2px solid var(--green);
}
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-menu a {
  display: block; padding: 7px 16px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--dim);
}
.dropdown-menu a:hover, .dropdown-menu a.active { color: var(--green); background: var(--green-faint); }

/* nested flyout — Scripts / Guides listing every entry */
.caret-right { transform: rotate(-45deg) translateX(-1px); margin-left: auto; }
.dropdown-sub { position: relative; }
.dropdown-sub > a {
  display: flex; align-items: center; gap: 8px; padding: 7px 16px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--dim);
}
.dropdown-sub > a:hover, .dropdown-sub > a.active { color: var(--green); background: var(--green-faint); }
.dropdown-submenu {
  position: absolute; top: -7px; left: 100%; min-width: 210px; max-height: 70vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line-hard); padding: 6px 0;
  opacity: 0; visibility: hidden; transform: translateX(-4px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
  z-index: 11;
}
.dropdown-submenu::before {
  content: ''; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px;
  border-top: 2px solid var(--green); border-left: 2px solid var(--green);
}
.dropdown-sub:hover > .dropdown-submenu, .dropdown-sub:focus-within > .dropdown-submenu {
  opacity: 1; visibility: visible; transform: translateX(0);
}
.dropdown-submenu a {
  display: block; padding: 6px 16px; font-family: var(--f-mono);
  font-size: 11.5px; letter-spacing: 0.04em; text-transform: none; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
}
.dropdown-submenu a:hover, .dropdown-submenu a.active { color: var(--green); background: var(--green-faint); }

/* theme toggle */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-left: 4px; flex-shrink: 0;
  background: none; border: 1px solid var(--line); color: var(--dim);
  cursor: pointer; transition: color var(--ease), border-color var(--ease);
}
.theme-toggle:hover { color: var(--green); border-color: var(--green-line); }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* mobile nav */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px; margin-left: auto;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--text); transition: transform 0.25s ease, opacity 0.25s ease; }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-scrim {
  position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,0.6);
  opacity: 0; visibility: hidden; transition: opacity var(--ease), visibility var(--ease);
}
body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

@media (max-width: 920px) {
  .nav-toggle { display: flex; }
  .theme-toggle { margin-left: 0; }
  .nav-links {
    position: fixed; top: calc(var(--top-h) + var(--nav-h)); right: 0;
    width: min(320px, 86vw); height: calc(100vh - var(--top-h) - var(--nav-h));
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-left: 1px solid var(--line-hard);
    padding: 14px 0; overflow-y: auto;
    transform: translateX(100%); transition: transform 0.25s ease;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-link { padding: 12px 22px; font-size: 13px; }
  .nav-link::after { display: none; }
  .nav-cta { margin: 10px 22px 0; justify-content: center; }
  .dropdown > .nav-link { justify-content: space-between; }
  .dropdown-menu {
    position: static; min-width: 0; border: none; background: var(--green-faint);
    opacity: 1; visibility: hidden; transform: none; display: none; padding: 0;
  }
  .dropdown-menu::before { display: none; }
  .dropdown.open .dropdown-menu { display: block; visibility: visible; }
  .dropdown-menu a { padding: 10px 34px; }
  /* nested lists flatten into a deeper-indented static block on mobile */
  .dropdown-sub > a { padding: 10px 34px; }
  .caret-right { display: none; }
  .dropdown-submenu {
    position: static; min-width: 0; max-height: none; border: none;
    background: transparent; opacity: 1; visibility: visible; transform: none; padding: 0;
  }
  .dropdown-submenu::before { display: none; }
  .dropdown-submenu a { padding: 8px 46px; text-transform: none; color: var(--faint); }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border: 1px solid var(--line-hard);
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text); background: transparent; cursor: pointer;
  position: relative; transition: all var(--ease);
}
.btn .i { font-size: 13px; }
.btn:hover { border-color: var(--green); color: var(--green); transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--green-line); }
.btn-primary { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.btn-primary:hover { background: var(--green); color: var(--green-ink); box-shadow: 3px 3px 0 var(--green-line); }
.btn-outline, .btn-hero-outline { background: transparent; }
.btn-discord { background: var(--discord); border-color: var(--discord); color: #fff; }
.btn-discord:hover { color: #fff; border-color: var(--discord); box-shadow: 3px 3px 0 rgba(88,101,242,0.35); }

.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dim);
}
.back-link:hover { color: var(--green); }
.back-link .i { transform: rotate(180deg); }

/* ==========================================================================
   SECTION FURNITURE
   ========================================================================== */
.section { padding: 74px 0; position: relative; }
.section + .section { border-top: 1px solid var(--line-soft); }

.section-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--green);
  margin-bottom: 14px;
}
.section-tag::before { content: ''; width: 22px; height: 1px; background: var(--green); }
.section-title {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 4vw, 38px);
  line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase;
  margin-bottom: 12px;
}
.section-desc { color: var(--dim); max-width: 640px; margin-bottom: 30px; }
.section-head { margin-bottom: 8px; }

/* ==========================================================================
   PANELS / CARDS (shared component set)
   ========================================================================== */
.content-card, .info-card, .about-card, .guide-card, .otm-card, .cta-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); position: relative;
}
.content-card { padding: var(--pad) 24px; }
.content-card h3 {
  font-family: var(--f-display); font-size: 17px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.content-card h3::before { content: ''; width: 4px; height: 16px; background: var(--green); flex-shrink: 0; }
.content-card p { color: var(--dim); }
.content-card ul { margin: 8px 0 0; }
.content-card ul li {
  position: relative; padding: 4px 0 4px 22px; color: var(--dim);
}
.content-card ul li::before {
  content: ''; position: absolute; left: 2px; top: 12px;
  width: 8px; height: 1.5px; background: var(--green);
}
.content-card strong { color: var(--text); }
.content-card a:not(.btn) { color: var(--green); }
.content-card a:not(.btn):hover { text-decoration: underline; }

/* hover bracket accents for interactive cards */
.about-card::before, .guide-card::before, .info-card::before,
.guide-row::before, .script-link::before {
  content: ''; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px;
  border-top: 2px solid transparent; border-left: 2px solid transparent;
  transition: border-color var(--ease);
}
.about-card:hover::before, .guide-card:hover::before, .info-card:hover::before,
.guide-row:hover::before, .script-link:hover::before { border-color: var(--green); }

/* about / directive cards (homepage) */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.about-card { padding: 24px 22px; }
.about-card:hover { border-color: var(--line-hard); background: var(--paper-2); }
.about-icon {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--green-line); color: var(--green); font-size: 19px;
  margin-bottom: 16px; background: var(--green-faint);
}
.about-card h3 {
  font-family: var(--f-display); font-size: 15px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px;
}
.about-card p { color: var(--dim); font-size: 14px; }

/* info stat cards (inner pages) */
.info-grid, .division-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin: 22px 0;
}
.info-card { padding: 20px; text-align: left; }
.info-card-icon {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--green-line); color: var(--green); font-size: 16px;
  background: var(--green-faint); margin-bottom: 12px;
}
.info-card h4 { font-family: var(--f-display); font-size: 24px; font-weight: 700; letter-spacing: 0.03em; }
.info-card p { color: var(--faint); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }

/* guide/duty cards (unit pages) */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0; }
.guide-card { padding: 20px; }
.guide-card:hover { border-color: var(--line-hard); background: var(--paper-2); }
.guide-card-icon {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--green-line); color: var(--green); font-size: 16px;
  background: var(--green-faint); margin-bottom: 12px;
}
.guide-card h4 { font-family: var(--f-display); font-size: 14.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; }
.guide-card p { color: var(--dim); font-size: 13.5px; }

/* notices */
.notice {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--dim);
  padding: 15px 18px; margin: 14px 0;
}
.notice-icon { font-size: 17px; color: var(--dim); line-height: 1.5; flex-shrink: 0; }
.notice-text { color: var(--dim); font-size: 14.5px; }
.notice-text strong { color: var(--text); }
.notice-text a { color: var(--green); }
.notice-text a:hover { text-decoration: underline; }
.notice-green { border-left-color: var(--green); background: linear-gradient(90deg, var(--green-faint), var(--panel) 40%); }
.notice-green .notice-icon { color: var(--green); }
.notice-gold, .notice-amber { border-left-color: var(--amber); background: linear-gradient(90deg, var(--amber-soft), var(--panel) 40%); }
.notice-gold .notice-icon, .notice-amber .notice-icon { color: var(--amber); }
.notice-red { border-left-color: var(--red); background: linear-gradient(90deg, var(--red-soft), var(--panel) 40%); }
.notice-red .notice-icon { color: var(--red); }
.notice-blue { border-left-color: var(--blue); background: linear-gradient(90deg, var(--blue-soft), var(--panel) 40%); }
.notice-blue .notice-icon { color: var(--blue); }

/* ==========================================================================
   POLICY DOCUMENTS — table of contents + numbered rule lists (code of conduct)
   ========================================================================== */
.toc { margin: 18px 0 24px; }
.toc-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--green);
}
.toc-head::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.toc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.toc-grid a {
  display: flex; align-items: baseline; gap: 9px; padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.03em;
  color: var(--dim); transition: all var(--ease);
}
.toc-grid a:hover { border-color: var(--green-line); background: var(--green-faint); color: var(--green); }
.toc-n { color: var(--green); font-weight: 600; flex-shrink: 0; }

/* subsection heading inside a policy card (e.g. "1.A — Interpersonal") */
.rule-group {
  display: flex; align-items: center; gap: 10px; margin: 22px 0 2px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
}
.rule-group::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.rule-group:first-of-type { margin-top: 12px; }

/* one row per rule: mono rule-code chip + body */
.rule-list { margin: 4px 0 0; }
.content-card .rule-list > li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px dashed var(--line-soft);
}
.content-card .rule-list > li::before { content: none; }
.content-card .rule-list > li:last-child { border-bottom: none; }
.rule-id {
  flex-shrink: 0; min-width: 62px; padding-top: 1px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--green);
}
.rule-text { color: var(--dim); font-size: 14.5px; }
.rule-text strong { color: var(--text); }
.rule-text ol, .rule-text ul { margin: 8px 0 0 20px; }
.rule-text ol { list-style: decimal; }
.rule-text ol li, .rule-text ul li { padding: 3px 0; color: var(--dim); }
.rule-text ul li { list-style: none; position: relative; padding-left: 16px; }
.rule-text ul li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 7px; height: 1.5px; background: var(--green);
}
.content-card code, .rule-text code {
  font-family: var(--f-mono); font-size: 12.5px; color: var(--green);
  background: var(--green-faint); border: 1px solid var(--line); padding: 1px 6px;
}
@media (max-width: 560px) {
  .content-card .rule-list > li { flex-direction: column; gap: 3px; }
  .rule-id { min-width: 0; }
}

/* tags */
.rank-tag {
  display: inline-block; padding: 2px 9px; margin-left: 8px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--line-hard); color: var(--dim);
}
.tag-gold   { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }
.tag-blue   { color: var(--blue); border-color: var(--blue-line); background: var(--blue-soft); }
.tag-red    { color: var(--red); border-color: var(--red-line); background: var(--red-soft); }
.tag-purple { color: #b48ce0; border-color: rgba(180,140,224,0.35); background: rgba(180,140,224,0.1); }

/* tables */
.sia-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); margin: 14px 0; }
.sia-table th {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--green);
  text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line-hard);
  background: var(--green-faint);
}
.sia-table td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); color: var(--dim); font-size: 14.5px; }
.sia-table tr:last-child td { border-bottom: none; }
.sia-table tr:hover td { background: var(--green-faint); }
.sia-table td strong { color: var(--text); }

/* ==========================================================================
   HOME — HERO
   ========================================================================== */
.hero {
  position: relative; padding: 92px 0 70px; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before {                                   /* blueprint grid */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 75%);
}
.hero-inner { max-width: 860px; }
.hero-kicker {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--green);
  margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.hero-kicker::before { content: ''; width: 30px; height: 1px; background: var(--green); }
.hero-title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(38px, 7vw, 74px); line-height: 1.02;
  letter-spacing: 0.015em; text-transform: uppercase; margin-bottom: 22px;
}
.hero-desc { color: var(--dim); font-size: 17px; max-width: 560px; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 46px; }

.hero-stats {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line); background: var(--panel);
}
.stat { padding: 14px 26px; text-align: left; }
.stat-num {
  display: block; font-family: var(--f-display); font-weight: 700;
  font-size: 26px; color: var(--green); line-height: 1.1;
}
.stat-label {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint);
}
.stat-divider { width: 1px; background: var(--line); }

/* ==========================================================================
   LEADERSHIP / ROSTERS — dossier cards
   ========================================================================== */
.leadership-tier { margin-top: 34px; }
.tier-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim);
  margin-bottom: 16px;
}
.tier-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.ic-badge { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }

.leadership-row { display: flex; flex-wrap: wrap; gap: 14px; }
.leader-card {
  width: 158px; padding: 18px 12px 14px; text-align: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); position: relative;
  transition: border-color var(--ease), background-color var(--ease), transform var(--ease);
}
.leader-card:hover { border-color: var(--green-line); background: var(--paper-2); transform: translateY(-3px); }
.leader-card::after {
  content: ''; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px;
  border-right: 2px solid transparent; border-bottom: 2px solid transparent;
  transition: border-color var(--ease);
}
.leader-card:hover::after { border-color: var(--green); }

.leader-avatar-wrap { position: relative; display: inline-block; }
/* Habbo size=l avatars are 128×220; scaled down smoothly (not pixelated —
   that looks jagged) and bottom-aligned so the figure stands in the frame. */
.leader-avatar {
  width: 96px; height: 132px; margin: 0 auto 10px; overflow: hidden;
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 12px 12px,
    var(--green-faint);
  border: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: center;
}
.leader-avatar img { width: 100%; height: auto; image-rendering: auto; margin-bottom: -14px; }
.vacant-avatar span {
  font-family: var(--f-display); font-size: 40px; color: var(--faint);
  align-self: center; margin: 0 auto;
}
.vacant-card { opacity: 0.6; }
.leader-name { font-family: var(--f-display); font-weight: 600; font-size: 14.5px; letter-spacing: 0.03em; margin-bottom: 6px; }
.leader-rank {
  display: inline-block; padding: 2px 8px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--line-hard); color: var(--dim);
}
.leader-rank.founder-rank { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }
.leader-rank.advisor-rank { color: var(--blue); border-color: var(--blue-line); background: var(--blue-soft); }
.leader-rank.ic-rank { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }
.leader-rank.pa-rank { color: #b48ce0; border-color: rgba(180,140,224,0.35); background: rgba(180,140,224,0.1); }
.leader-card.founder { border-color: var(--amber-line); }
.leader-card.advisor { border-color: var(--blue-line); }
.leader-card.pa { border-color: rgba(180,140,224,0.3); }

/* on an approved Leave of Absence today — sitting it out, back on <date> */
.leader-card.on-leave { border-color: var(--amber-line); }
.leader-card.on-leave .leader-avatar {
  background:
    radial-gradient(ellipse 70% 40% at 50% 96%, var(--amber-soft), transparent 70%),
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 12px 12px,
    var(--amber-soft);
}
.leader-card.on-leave .leader-avatar img { filter: saturate(0.62) brightness(0.94); }
.leader-card.on-leave:hover .leader-avatar img { filter: none; }
.leave-flag {
  position: absolute; top: -1px; left: -1px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px;
  background: var(--amber); color: var(--ink);
  font-family: var(--f-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.leave-flag .i { font-size: 10px; }
.leave-until {
  margin-top: 6px; font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--amber);
}

/* Habbo online dot */
.status-dot {
  position: absolute; top: 6px; right: 6px; width: 9px; height: 9px;
  border-radius: 50%; border: 2px solid var(--paper);
}
.status-online { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-offline { background: var(--faint); }
.status-loading { background: var(--amber); opacity: 0.6; }
.avatar-loading { position: relative; }
.avatar-loading::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--line-soft) 50%, transparent 70%);
  background-size: 200% 100%; animation: shimmer 1.1s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ==========================================================================
   OF THE MONTH (homepage honours)
   ========================================================================== */
.otm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 320px)); gap: 16px; }
.otm-card { padding: 26px 22px 20px; text-align: center; overflow: hidden; }
.otm-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--green), transparent 70%);
}
.otm-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
  margin-bottom: 18px;
}
.otm-avatar {
  width: 140px; height: 218px; margin: 0 auto 12px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 92%, var(--green-soft), transparent 70%),
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 12px 12px;
  border: 1px solid var(--line);
}
.otm-avatar img {
  width: 140px; height: auto; image-rendering: pixelated;
  margin-bottom: 0; transform: translateX(13px);
}
.otm-name { font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: 0.04em; }
.otm-note { color: var(--dim); font-size: 13.5px; margin-top: 6px; }
.otm-month {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--faint);
}

/* ==========================================================================
   NEWSLETTER (homepage bulletin)
   ========================================================================== */
.bulletin {
  background: var(--panel); border: 1px solid var(--line); position: relative;
  padding: 30px 32px;
}
.bulletin::before, .bulletin::after {
  content: ''; position: absolute; width: 14px; height: 14px;
}
.bulletin::before { top: -1px; left: -1px; border-top: 2px solid var(--green); border-left: 2px solid var(--green); }
.bulletin::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--green); border-right: 2px solid var(--green); }
.bulletin-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px dashed var(--line);
}
.bulletin-head .i { color: var(--green); font-size: 18px; }
.bulletin-title { font-family: var(--f-display); font-size: 18px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.bulletin-stamp {
  margin-left: auto; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber);
  border: 1px solid var(--amber-line); padding: 3px 10px;
}
.bulletin-body { color: var(--dim); }
.bulletin-body p { margin-bottom: 10px; }
.bulletin-body p:last-child { margin-bottom: 0; }
.bulletin-body strong { color: var(--text); }
.bulletin-body a { color: var(--green); }
.bulletin-body a:hover { text-decoration: underline; }
.bulletin-body ul { margin: 6px 0; }
.bulletin-body ul li { position: relative; padding: 3px 0 3px 20px; }
.bulletin-body ul li::before { content: ''; position: absolute; left: 2px; top: 12px; width: 8px; height: 1.5px; background: var(--green); }

/* ==========================================================================
   JOIN / CTA PANELS (discord + portal)
   ========================================================================== */
.cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.cta-panel { padding: 30px 28px; overflow: hidden; }
.cta-panel .cta-icon { font-size: 26px; margin-bottom: 14px; display: block; }
.cta-panel h3 { font-family: var(--f-display); font-size: 19px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
.cta-panel p { color: var(--dim); font-size: 14.5px; margin-bottom: 20px; }
.cta-discord .cta-icon { color: var(--discord); }
.cta-discord { border-top: 3px solid var(--discord); }
.cta-portal .cta-icon { color: var(--green); }
.cta-portal { border-top: 3px solid var(--green); }
.cta-discord svg { width: 34px; height: auto; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  margin-top: 60px; border-top: 1px solid var(--line);
  background: var(--panel); position: relative; overflow: hidden;
}
.footer::before {
  content: 'SIA'; position: absolute; right: -20px; bottom: -70px;
  font-family: var(--f-display); font-weight: 800; font-size: 240px;
  letter-spacing: 0.04em; color: var(--line-soft); pointer-events: none; line-height: 1;
}
.footer .container { position: relative; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px; padding: 48px 0 30px;
}
.footer-brand p { color: var(--dim); font-size: 13.5px; max-width: 300px; margin-top: 12px; }
.footer-logo { display: flex; align-items: center; gap: 10px; }
.footer-logo .logo-shield { width: 32px; height: 32px; }
.footer-logo .logo-text { font-size: 18px; }
.footer-disclaimer { color: var(--faint) !important; font-size: 11.5px !important; margin-top: 12px !important; }
.footer-col h5 {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--green);
  margin-bottom: 12px;
}
.footer-col ul li { margin-bottom: 7px; }
.footer-col a { color: var(--dim); font-size: 13.5px; transition: color var(--ease); }
.footer-col a:hover { color: var(--green); }
.footer-bottom {
  border-top: 1px solid var(--line-soft); padding: 18px 0 26px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--faint);
}
.credit {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
  padding: 5px 12px 5px 6px; border: 1px solid var(--line);
  background: var(--panel);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint);
  transition: border-color var(--ease), color var(--ease);
}
.credit:hover { border-color: var(--green-line); color: var(--dim); }
.credit:hover strong { text-decoration: underline; }
/* served at size=m (54x62) and shown at exactly half — a clean 2:1 downscale */
.credit-face { width: 27px; height: 31px; image-rendering: pixelated; flex-shrink: 0; }
.credit strong { color: var(--green); font-weight: 600; }

.live-clock { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.live-clock .i { color: var(--green); }
.live-clock strong { color: var(--dim); }
.clock-sep { opacity: 0.5; }
.page-footer {
  margin-top: 60px; border-top: 1px solid var(--line); background: var(--panel);
  padding: 22px 0 26px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--faint);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   INNER PAGES — hero strip + content
   ========================================================================== */
.page-hero {
  padding: 52px 0 34px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--green-faint), transparent);
  position: relative;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent);
          mask-image: linear-gradient(180deg, #000 20%, transparent);
}
.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 18px;
}
.breadcrumb a:hover { color: var(--green); }
.breadcrumb span:last-child { color: var(--dim); }
.page-title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(28px, 5vw, 46px); line-height: 1.08;
  letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 10px;
}
.page-desc { color: var(--dim); max-width: 640px; }
.page-content { padding: 36px 0 20px; }

/* ==========================================================================
   RANK PAGES (rank-list / rank-prices) — client-rendered .division blocks
   ========================================================================== */
.rank-search { margin: 18px 0 6px; }
.rank-search-count { font-family: var(--f-mono); font-size: 11.5px; color: var(--faint); letter-spacing: 0.08em; margin-left: 4px; }
.rank-search-empty {
  padding: 26px; text-align: center; color: var(--dim);
  border: 1px dashed var(--line-hard); margin: 18px 0;
  font-family: var(--f-mono); font-size: 13px;
}
.viewer-input, .viewer-select {
  width: 100%; padding: 11px 14px;
  background: var(--paper); border: 1px solid var(--line-hard);
  color: var(--text); font-family: var(--f-mono); font-size: 13.5px;
  transition: border-color var(--ease);
}
.viewer-input:focus, .viewer-select:focus { outline: none; border-color: var(--green); }
.viewer-input::placeholder { color: var(--faint); }

.division { background: var(--panel); border: 1px solid var(--line); margin: 18px 0; }
.division-hidden { display: none; }
.division-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  background: var(--green-faint);
}
.division-badge { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.division-head h3 { font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.division-meta { margin-left: auto; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.division-desc { padding: 12px 20px 0; color: var(--dim); font-size: 14px; }
.rank-ladder { padding: 12px 8px 14px; }
.rank-ladder li {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px; border-bottom: 1px dashed var(--line-soft);
}
.rank-ladder li:last-child { border-bottom: none; }
.rank-ladder li:hover { background: var(--green-faint); }
.rank-ladder li.rl-hidden { display: none; }
.rl-num { font-family: var(--f-mono); font-size: 11px; color: var(--faint); width: 26px; flex-shrink: 0; }
.rl-name { color: var(--dim); font-size: 14.5px; }
.rank-ladder li.top .rl-name { color: var(--text); font-weight: 600; }
.rl-price { margin-left: auto; font-family: var(--f-mono); font-size: 13px; color: var(--green); }

/* rank calculator */
.rank-calc { max-width: 560px; background: var(--panel); border: 1px solid var(--line); padding: 26px; margin: 20px 0; }
.rc-row { margin-bottom: 16px; }
.rc-field label {
  display: block; font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 7px;
}
.rc-arrow { text-align: center; color: var(--faint); font-size: 16px; margin: 4px 0; }
.rc-result {
  margin-top: 20px; padding: 20px; text-align: center;
  border: 1px dashed var(--line-hard); background: var(--green-faint);
}
.rc-result-icon { font-size: 20px; color: var(--green); margin-bottom: 6px; }
.rc-result-amount { font-family: var(--f-display); font-size: 30px; font-weight: 800; color: var(--green); }
.rc-result-note { color: var(--dim); font-family: var(--f-mono); font-size: 12px; margin-top: 4px; }
.rc-error .rc-result-amount { color: var(--red); font-size: 20px; }

/* ==========================================================================
   SCRIPTS — index rows + terminal-style script pages
   ========================================================================== */
.scripts, .guide-list { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.script-link, .guide-row {
  display: flex; align-items: center; gap: 16px;
  background: var(--panel); border: 1px solid var(--line);
  padding: 15px 20px; position: relative;
  transition: border-color var(--ease), background-color var(--ease);
}
.script-link:hover, .guide-row:hover { border-color: var(--green-line); background: var(--paper-2); }
.script-num, .guide-num { font-family: var(--f-mono); font-size: 12px; color: var(--faint); flex-shrink: 0; }
.script-icon, .guide-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--green-line); background: var(--green-faint);
  color: var(--green); font-size: 16px;
}
.script-titles, .guide-titles { display: flex; flex-direction: column; min-width: 0; }
.script-name, .guide-name { font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: 0.03em; }
.script-sub, .guide-sub { color: var(--faint); font-size: 13px; }
.script-link-count {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
}
.script-chevron, .guide-open { color: var(--green); flex-shrink: 0; }
.guide-open {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.guide-open .i { font-size: 11px; transition: transform var(--ease); }
.guide-row:hover .guide-open .i { transform: translateX(3px); }
@media (max-width: 560px) { .script-link-count { display: none; } }

/* script page */
.script-single { margin: 8px 0; }
.script-body { background: var(--panel); border: 1px solid var(--line); }
.script-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  background: var(--green-faint); flex-wrap: wrap;
}
.script-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--faint);
}
.script-hint .i { color: var(--green); }
.copy-all {
  padding: 7px 14px; background: transparent;
  border: 1px solid var(--line-hard); color: var(--dim); cursor: pointer;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: all var(--ease);
}
.copy-all:hover { border-color: var(--green); color: var(--green); }
.copy-all.copied { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.script-text { padding: 14px 0; counter-reset: sline; }
.script-text p { padding: 6px 20px; font-size: 14.5px; }
.sl-heading {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--green);
  margin-top: 12px; display: flex; align-items: center; gap: 10px;
}
.sl-heading::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.sl-cue { color: var(--faint); font-style: italic; font-size: 13.5px; }
.sl-line {
  position: relative; color: var(--dim); cursor: pointer;
  counter-increment: sline; padding-left: 52px !important;
  transition: color var(--ease), background-color var(--ease);
}
.sl-line::before {
  content: counter(sline, decimal-leading-zero);
  position: absolute; left: 20px; top: 7px;
  font-family: var(--f-mono); font-size: 11px; color: var(--faint);
}
.sl-line:hover { color: var(--text); background: var(--green-faint); }
.sl-line:hover::before { content: '>'; color: var(--green); font-weight: 700; }
.sl-line.copied { color: var(--text); background: var(--green-soft); box-shadow: inset 3px 0 0 var(--green); }
.sl-line.copied::before { content: 'OK'; color: var(--green); font-weight: 700; }
.sl-line.copied::after {
  content: 'COPIED'; position: absolute; right: 16px; top: 8px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--green);
}

/* ==========================================================================
   GUIDES — embed page + empty state
   ========================================================================== */
.guide-embed {
  position: relative; margin: 18px 0;
  background: var(--paper); border: 1px solid var(--line);
  aspect-ratio: 16 / 9.6;
}
.guide-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Same embed inside the home page bulletin, split off from the text above it. */
.bulletin-deck { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); }
.bulletin-deck .guide-embed { margin: 0; }
.empty-state {
  padding: 60px 26px; text-align: center;
  border: 1px dashed var(--line-hard); background: var(--panel-soft); margin: 20px 0;
}
.empty-icon { font-size: 30px; color: var(--faint); display: inline-block; margin-bottom: 12px; }
.empty-state h3 { font-family: var(--f-display); font-size: 17px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; }
.empty-state p { color: var(--faint); font-size: 14px; max-width: 420px; margin: 0 auto; }

/* ==========================================================================
   RADIO DOCK — bottom-right comms module (js/radio.js)
   ========================================================================== */
#radio-widget {
  position: fixed; right: 18px; bottom: 18px; z-index: 950;
  width: min(320px, calc(100vw - 36px));
  background: var(--paper); border: 1px solid var(--line-hard);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  font-family: var(--f-body);
}
#radio-widget::before {
  content: ''; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px;
  border-top: 2px solid var(--green); border-left: 2px solid var(--green);
}
.rd-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--line-soft);
}
.rd-collapsed .rd-head { border-bottom: none; }
.rd-title {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
}
.rd-listeners {
  margin-left: auto; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--faint); display: flex; align-items: center; gap: 5px;
}
.rd-caret {
  width: 7px; height: 7px; border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg); transition: transform var(--ease); margin-left: 2px;
}
.rd-collapsed .rd-caret { transform: rotate(-135deg); }
.rd-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.rd-eq i {
  width: 3px; background: var(--green); height: 4px;
  animation: rd-eq 0.9s ease-in-out infinite;
}
.rd-eq i:nth-child(2) { animation-delay: 0.15s; }
.rd-eq i:nth-child(3) { animation-delay: 0.35s; }
.rd-eq i:nth-child(4) { animation-delay: 0.55s; }
@keyframes rd-eq { 0%, 100% { height: 4px; } 50% { height: 12px; } }
.rd-eq.paused i { animation-play-state: paused; height: 4px; background: var(--faint); }
.rd-body { padding: 12px 14px 14px; }
.rd-collapsed .rd-body { display: none; }
.rd-track { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-sub { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-sub b { color: var(--amber); font-weight: 600; }
.rd-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); margin-right: 4px; animation: rd-blink 1.2s infinite;
}
@keyframes rd-blink { 50% { opacity: 0.25; } }
.rd-progress { height: 3px; background: var(--line); margin: 10px 0; position: relative; }
.rd-progress-fill { position: absolute; inset: 0 auto 0 0; background: var(--green); width: 0%; }
.rd-controls { display: flex; align-items: center; gap: 10px; }
.rd-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  flex: 1; padding: 8px 10px; cursor: pointer;
  background: var(--green); border: 1px solid var(--green); color: var(--green-ink);
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: all var(--ease);
}
.rd-btn.rd-muted { background: transparent; color: var(--dim); border-color: var(--line-hard); }
.rd-btn.rd-muted:hover { border-color: var(--green); color: var(--green); }
.rd-vol { flex: 1; accent-color: var(--green); height: 3px; cursor: pointer; }
.rd-hint {
  margin-top: 8px; font-family: var(--f-mono); font-size: 10px; line-height: 1.5;
  letter-spacing: 0.04em; color: var(--amber);
}

/* suggest-a-song half of the dock (guests, when the radio team allows it) */
.rd-collapsed .rd-suggest { display: none; }
.rd-suggest { border-top: 1px solid var(--line-soft); }
.rd-sg-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 14px; cursor: pointer;
  background: none; border: 0; color: var(--dim);
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: color var(--ease), background-color var(--ease);
}
.rd-sg-toggle:hover { color: var(--green); background: var(--green-faint); }
.rd-sg-panel { padding: 0 14px 14px; }
.rd-sg-row { display: flex; gap: 6px; }
.rd-sg-q {
  flex: 1; min-width: 0; padding: 7px 10px;
  background: var(--ink); border: 1px solid var(--line-hard); color: var(--text);
  font-family: var(--f-body); font-size: 13px;
}
.rd-sg-q:focus { outline: none; border-color: var(--green); }
.rd-sg-go {
  padding: 7px 12px; cursor: pointer;
  background: var(--green); border: 1px solid var(--green); color: var(--green-ink);
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.rd-sg-results { max-height: 190px; overflow-y: auto; margin-top: 8px; }
.rd-sg-hit {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 7px 9px; margin-bottom: 4px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  transition: border-color var(--ease), background-color var(--ease);
}
.rd-sg-hit:hover:not(:disabled) { border-color: var(--green-line); background: var(--green-faint); }
.rd-sg-hit:disabled { opacity: 0.5; cursor: default; }
.rd-sg-hit-title {
  font-size: 12.5px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rd-sg-hit-sub { font-family: var(--f-mono); font-size: 10px; color: var(--faint); }
.rd-sg-msg { margin-top: 6px; font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); }
.rd-sg-ok { color: var(--green); }
.rd-sg-err { color: var(--amber); }

/* ==========================================================================
   MOTION — reveals + decrypt titles
   ========================================================================== */
.sia-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.sia-reveal.in { opacity: 1; transform: none; }
.back-to-top {
  position: fixed; left: 18px; bottom: 18px; z-index: 940;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--line-hard); color: var(--dim);
  cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--ease);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { color: var(--green); border-color: var(--green-line); }
.back-to-top .i { transform: rotate(-90deg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .sia-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   RESPONSIVE ODDS & ENDS
   ========================================================================== */
@media (max-width: 640px) {
  .section { padding: 54px 0; }
  .hero { padding: 60px 0 50px; }
  .hero-stats { display: flex; width: 100%; }
  .stat { flex: 1; padding: 12px 14px; }
  .stat-num { font-size: 21px; }
  .content-card { padding: 18px; }
  #radio-widget { right: 12px; bottom: 12px; }
}