/* ═══════════════════════════════════════════════════════════════════════════
   ITV — CRAFTED PIXEL / TERMINAL  ·  main.css  (core layer)
   Carbon-black base · amber/gold accent · hard pixel edges · CRT scanlines
   Fonts: Silkscreen (display), Space Mono (body/data), VT323 (terminal numerals)
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=VT323&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ── TOKENS ──────────────────────────────────────────────────────────────── */
:root {
  /* Warm carbon base — coal-black with a faint ember undertone */
  --bg:        #0d0b08;
  --bg-2:      #0a0806;
  --bg-card:   #14110b;
  --bg-card2:  #1b1710;
  --bg-input:  #0c0a07;
  --bg-nav:    rgba(9,7,5,0.97);
  --bg-panel:  #110e09;

  /* Amber/gold dominant accent — Mineshaft ore & lava warmth */
  --emerald:        #ffb627;
  --emerald-dim:    #d98e12;
  --emerald-bright: #ffd166;
  --emerald-deep:   #3a2708;
  --emerald-soft:   rgba(255,182,39,0.10);
  --emerald-border: rgba(255,182,39,0.34);
  --emerald-glow:   rgba(255,182,39,0.22);

  /* Sharp secondary accents (use sparingly) */
  --gold:        #ffaa00;
  --gold-soft:   rgba(255,170,0,0.10);
  --gold-border: rgba(255,170,0,0.30);

  --diamond:        #55ffff;
  --diamond-dim:    #33bbbb;
  --diamond-soft:   rgba(85,255,255,0.10);
  --diamond-border: rgba(85,255,255,0.30);

  --red:        #ff5555;
  --red-soft:   rgba(255,85,85,0.10);
  --red-border: rgba(255,85,85,0.30);

  --green:      #55ff55;
  --green-soft: rgba(85,255,85,0.10);

  /* SQ sub-area: re-mapped from cliché purple to Diamond-Cyan */
  --purple:        var(--diamond);
  --purple-dim:    var(--diamond-dim);
  --purple-bright: #88ffff;
  --purple-soft:   var(--diamond-soft);
  --purple-border: var(--diamond-border);

  /* Borders & text */
  --border:    rgba(220,190,140,0.10);
  --border-md: rgba(220,190,140,0.20);
  --border-hi: rgba(220,190,140,0.34);

  --text:   #ece4d6;
  --text-2: #ab9f8d;
  --text-3: #75695b;
  --text-4: #47402f;

  /* Rank colours */
  --r-owner:#ff5555; --r-manager:#ffaa00; --r-dev:#5588ff;
  --r-builder:#55ffff; --r-tbuilder:#88ffff; --r-tdev:#88aaff;
  --r-mod:#55ff55; --r-helper:#55ffff;
  --r-t5g:#ffaa00; --r-t5gr:#aaaaaa; --r-t4b:#5588ff; --r-t4a:#00cccc;
  --r-t3:#ff5555; --r-t2:#ffff55; --r-t1:#55ff55; --r-member:#7c8a74;

  /* Category colours */
  --cat-armor:#aaaaaa; --cat-tools:#ffaa00; --cat-talismans:#55ffff;
  --cat-rare:#ffaa00; --cat-misc:#62755b;

  /* Hard edges — zero rounding is the rule */
  --radius:0px; --radius-lg:0px; --radius-xl:0px;

  /* Pixel shadows: hard offset blocks, never soft glow */
  --px-sh:    4px 4px 0 rgba(0,0,0,0.65);
  --px-sh-lg: 6px 6px 0 rgba(0,0,0,0.7);
  --px-sh-sm: 2px 2px 0 rgba(0,0,0,0.6);

  /* Digital, stepped timing */
  --t-fast: 0.1s steps(2, end);
  --t:      0.14s steps(3, end);
  --t-slow: 0.2s steps(4, end);

  /* Fonts */
  --font-d: 'Silkscreen', 'Courier New', monospace;   /* pixel display */
  --font-b: 'Space Mono', 'Courier New', monospace;    /* body */
  --font-m: 'Space Mono', 'Courier New', monospace;    /* data / mono */
  --font-s: 'Silkscreen', 'Courier New', monospace;    /* nav / system */
  --font-t: 'VT323', monospace;                        /* big terminal numerals */

  --scan: rgba(255,182,39,0.030);
}

/* ── RESET ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html { background: var(--bg-2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: transparent;
  color: var(--text);
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
img { image-rendering: pixelated; }

a { color: var(--emerald); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--emerald-bright); }
button { cursor: pointer; font-family: var(--font-b); }
input, textarea, select { font-family: var(--font-m); }

h1,h2,h3 { font-family: var(--font-d); letter-spacing: 0.5px; line-height: 1.2; }

::selection { background: var(--emerald); color: #1a1206; }
:focus-visible { outline: 2px solid var(--emerald-border); outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--emerald-deep); border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--emerald-dim); }

/* ── ATMOSPHERE: scanlines + vignette ────────────────────────────────────── */
.space-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.space-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 18% 8%,  rgba(255,182,39,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 55% at 82% 88%, rgba(255,182,39,0.04) 0%, transparent 72%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(20,28,18,0.5)    0%, transparent 75%);
}
.space-particles {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 25%, rgba(255,182,39,0.18) 100%, transparent),
    radial-gradient(1px 1px at 35% 65%, rgba(220,190,140,0.10) 100%, transparent),
    radial-gradient(1px 1px at 55% 15%, rgba(255,170,0,0.10)  100%, transparent),
    radial-gradient(1px 1px at 78% 45%, rgba(255,182,39,0.10) 100%, transparent),
    radial-gradient(1px 1px at 92% 72%, rgba(85,255,255,0.10) 100%, transparent),
    radial-gradient(1px 1px at 20% 84%, rgba(220,190,140,0.08)100%, transparent);
}

/* CRT scanline overlay + vignette — sits above bg, below content */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    transparent 0, transparent 2px, var(--scan) 2px, var(--scan) 3px);
  mix-blend-mode: overlay; opacity: 0.7;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,0.5) 100%);
}
body > *:not(.space-bg) { position: relative; z-index: 2; }

/* ── KEYFRAMES ───────────────────────────────────────────────────────────── */
@keyframes fadeUp  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes slideIn { from { transform:translateX(8px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes modalIn { from { transform:translateY(-6px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes spin    { to { transform:rotate(360deg); } }
@keyframes blink   { 0%,49% { opacity:1; } 50%,100% { opacity:0.25; } }
@keyframes fadeOut { to { opacity:0; transform:translateX(8px); } }

/* ── LAYOUT ──────────────────────────────────────────────────────────────── */
main { width: min(1120px, 94%); margin: 0 auto; padding: 32px 0 64px; }
.page { display: none; flex: 1; }
.page.active { display: block; animation: fadeUp 0.18s steps(4, end); }

.page-header {
  margin-bottom: 26px; padding-bottom: 16px;
  border-bottom: 2px solid var(--border-md);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.page-title {
  font-family: var(--font-d); font-size: 19px; color: var(--emerald);
  text-transform: uppercase; letter-spacing: 1px;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.6);
  text-wrap: balance;
}
.page-title::before { content: '> '; color: var(--text-3); }
.page-sub { color: var(--text-2); font-size: 12px; margin-top: 6px; font-family: var(--font-m); }

.section-label {
  font-family: var(--font-d); font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin: 26px 0 14px;
  display: flex; align-items: center; gap: 12px;
}
.section-label::before { content: '#'; color: var(--emerald-dim); }
.section-label::after { content: ''; flex: 1; height: 2px;
  background: repeating-linear-gradient(90deg, var(--border-md) 0 6px, transparent 6px 10px); }

.divider { height: 2px; background: var(--border-md); margin: 16px 0; }

/* ── NAVBAR → COMMAND BAR ────────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 300;
  height: 62px;
  display: flex; align-items: center;
  padding: 0 22px; gap: 0;
  background: var(--bg-nav);
  border-bottom: 2px solid var(--emerald-border);
  box-shadow: 0 4px 0 rgba(0,0,0,0.55);
}
.navbar::before {
  content: 'ITV://';
  font-family: var(--font-d); font-size: 11px; letter-spacing: 1px;
  color: var(--emerald); opacity: 0.65;
  margin-right: 4px; white-space: nowrap;
}
.navbar.scrolled { box-shadow: 0 4px 0 rgba(0,0,0,0.7); }

.nav-logo {
  cursor: pointer; user-select: none; flex-shrink: 0;
  margin: 0 14px 0 10px; display: flex; align-items: center;
  transition: opacity var(--t-fast);
}
.nav-logo:hover { opacity: 0.8; }
.nav-logo img { height: 34px; width: auto; display: block; filter: brightness(0) invert(1) drop-shadow(2px 2px 0 var(--emerald-deep)); }

.nav-links { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.nav-link {
  display: flex; align-items: center;
  padding: 7px 11px;
  font-family: var(--font-s); font-size: 10px; letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-2);
  background: transparent;
  border: 2px solid transparent;
  position: relative; white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.nav-link:hover { color: var(--emerald-bright); background: var(--emerald-soft); }
.nav-link.active { color: var(--emerald); background: var(--emerald-soft); border-color: var(--emerald-border); }

.nav-sep { width: 2px; height: 18px; background: var(--border-hi); margin: 0 8px; flex-shrink: 0; }
.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* unread badge */
.nav-link[data-unread]::after {
  content: attr(data-unread);
  position: absolute; top: -2px; right: -2px;
  min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--red); color: #fff;
  font-family: var(--font-d); font-size: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #000; line-height: 1;
}

/* hamburger */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 38px; padding: 8px; margin-left: 8px;
  background: var(--emerald-soft); border: 2px solid var(--emerald-border);
  transition: background var(--t-fast);
}
.nav-hamburger:hover { background: var(--emerald-glow); }
.nav-hamburger span { display: block; height: 2px; background: var(--emerald); transition: transform 0.2s steps(3,end), opacity 0.2s steps(3,end), width 0.2s steps(3,end); }
.nav-hamburger span:nth-child(2) { width: 70%; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.nav-drawer {
  display: none; position: fixed; top: 62px; left: 0; right: 0; z-index: 299;
  background: var(--bg-nav);
  border-bottom: 2px solid var(--emerald-border);
  box-shadow: 0 6px 0 rgba(0,0,0,0.5);
  padding: 12px 16px 16px; flex-direction: column; gap: 5px;
  animation: fadeUp 0.12s steps(3,end);
}
.nav-drawer.open { display: flex; }
.nav-drawer .nav-link { width: 100%; font-size: 11px; padding: 11px 14px; }
.nav-drawer .nav-sep { width: 100%; height: 2px; margin: 5px 0; }

/* ── HOUSING SWITCHER ────────────────────────────────────────────────────── */
.nav-housing-switch { display: flex; align-items: center; margin-left: 14px; position: relative; flex-shrink: 0; }
.nav-housing-badge {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  font-family: var(--font-s); font-size: 9px; letter-spacing: 0.5px;
  text-transform: uppercase; cursor: pointer; user-select: none;
  border: 2px solid; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.nav-housing-badge.mst { background: var(--emerald-soft); border-color: var(--emerald-border); color: var(--emerald); }
.nav-housing-badge.mst:hover { background: var(--emerald-glow); color: var(--emerald-bright); }
.nav-housing-badge.sq { background: var(--diamond-soft); border-color: var(--diamond-border); color: var(--diamond); }
.nav-housing-badge.sq:hover { background: rgba(85,255,255,0.18); color: var(--purple-bright); }
.nav-housing-badge .nh-dot { width: 7px; height: 7px; flex-shrink: 0; }
.nav-housing-badge.mst .nh-dot { background: var(--emerald); }
.nav-housing-badge.sq  .nh-dot { background: var(--diamond); }
.nav-housing-badge .nh-arrow { font-size: 8px; opacity: 0.7; }

.nav-housing-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--bg-panel); border: 2px solid var(--border-hi);
  box-shadow: var(--px-sh-lg);
  padding: 5px; min-width: 190px; z-index: 400; display: none;
  animation: fadeUp 0.1s steps(3,end);
}
.nav-housing-dropdown.open { display: block; }
.nav-housing-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border: 2px solid transparent; background: transparent;
  font-family: var(--font-m); font-size: 12px; color: var(--text);
  cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
.nav-housing-opt:hover { background: var(--emerald-soft); border-color: var(--border-md); }
.nav-housing-opt.active-opt { background: var(--bg-card2); }
.nav-housing-opt .nh-opt-dot { width: 8px; height: 8px; flex-shrink: 0; }
.nav-housing-opt.opt-mst .nh-opt-dot { background: var(--emerald); }
.nav-housing-opt.opt-sq  .nh-opt-dot { background: var(--diamond); }
.nav-housing-opt .nh-opt-label { flex: 1; }
.nav-housing-opt .nh-opt-check { font-family: var(--font-d); font-size: 11px; color: var(--emerald); }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 18px; min-height: 40px;
  font-family: var(--font-d); font-size: 10px; letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text); text-decoration: none; white-space: nowrap;
  background: var(--bg-card2);
  border: 2px solid var(--border-hi);
  box-shadow: var(--px-sh);
  position: relative;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: var(--px-sh-lg); border-color: var(--emerald-border); color: var(--emerald-bright); }
.btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 rgba(0,0,0,0); }
.btn[disabled], .btn.loading { opacity: 0.4; pointer-events: none; }

.btn-purple { background: var(--emerald-soft); border-color: var(--emerald-border); color: var(--emerald); }
.btn-purple:hover { background: var(--emerald); border-color: var(--emerald); color: #1a1206; }

.btn-ghost { background: transparent; border-color: var(--border-md); color: var(--text-2); }
.btn-ghost:hover { border-color: var(--emerald-border); color: var(--emerald); background: var(--emerald-soft); }

.btn-outline { background: transparent; border-color: var(--border-hi); color: var(--text-2); }
.btn-outline:hover { border-color: var(--emerald-border); color: var(--emerald); background: var(--emerald-soft); }

.btn-danger { background: var(--red-soft); border-color: var(--red-border); color: var(--red); }
.btn-danger:hover { background: var(--red); border-color: var(--red); color: #1a0606; }

.btn-success { background: var(--green-soft); border-color: rgba(85,255,85,0.3); color: var(--green); }
.btn-success:hover { background: var(--green); color: #1a1206; }

.btn-discord { background: #5865f2; border-color: #3a44c0; color: #fff; }
.btn-discord:hover { background: #6470f5; border-color: #4a55d8; color: #fff; }

.btn-sm { padding: 6px 12px; min-height: 32px; font-size: 9px; }
.btn-lg { padding: 12px 26px; min-height: 46px; font-size: 12px; }
.btn-icon { padding: 8px; min-width: 40px; }
.w-full { width: 100%; }

/* Hero buttons */
.btn-hero-primary {
  background: var(--emerald); border-color: var(--emerald-bright); color: #1a1206;
  padding: 13px 26px; min-height: 48px; font-size: 12px;
}
.btn-hero-primary:hover { background: var(--emerald-bright); color: #1a1206; }
.btn-hero-secondary {
  background: rgba(0,0,0,0.5); border-color: var(--border-hi); color: var(--text);
  padding: 13px 26px; min-height: 48px; font-size: 12px;
}
.btn-hero-secondary:hover { color: var(--emerald-bright); border-color: var(--emerald-border); }

/* ── AVATARS ─────────────────────────────────────────────────────────────── */
.avatar {
  width: 32px; height: 32px; flex-shrink: 0; overflow: hidden;
  border: 2px solid var(--border-md); background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 10px; color: var(--emerald); cursor: pointer;
  transition: border-color var(--t-fast);
}
.avatar:hover { border-color: var(--emerald-border); }
.avatar-xl {
  width: 64px; height: 64px; flex-shrink: 0;
  border: 3px solid var(--border-md); background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 22px; color: var(--emerald);
}

/* ── CARDS ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 2px solid var(--border-md);
  box-shadow: var(--px-sh);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card-pad { padding: 18px; }
.card:hover { border-color: var(--emerald-border); transform: translate(-2px,-2px); box-shadow: var(--px-sh-lg); }

/* ── FORMS ───────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-label {
  display: block; font-family: var(--font-d); font-size: 9px; color: var(--text-3);
  margin-bottom: 7px; letter-spacing: 1px; text-transform: uppercase;
}
.input {
  width: 100%; appearance: none; outline: none;
  background: var(--bg-input);
  border: 2px solid var(--border-md); color: var(--text);
  padding: 10px 12px; font-size: 14px; font-family: var(--font-m);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.45);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:hover { border-color: var(--border-hi); }
.input:focus { border-color: var(--emerald-border); box-shadow: inset 2px 2px 0 rgba(0,0,0,0.45), 0 0 0 2px var(--emerald-glow); }
.input::placeholder { color: var(--text-4); }
textarea.input { resize: vertical; min-height: 90px; line-height: 1.7; }
select.input option { background: var(--bg-card); color: var(--text); }

/* ── TAGS & RANKS ────────────────────────────────────────────────────────── */
.tag, .rank {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  font-family: var(--font-d); font-size: 9px; letter-spacing: 0.5px;
  text-transform: uppercase; border: 2px solid;
  box-shadow: var(--px-sh-sm);
}
.tag-t1 { color:#55FF55; background:rgba(85,255,85,0.12);   border-color:rgba(85,255,85,0.3); }
.tag-t2 { color:#FFFF55; background:rgba(255,255,85,0.12);  border-color:rgba(255,255,85,0.3); }
.tag-t3 { color:#FF5555; background:rgba(255,85,85,0.12);   border-color:rgba(255,85,85,0.3); }
.tag-t4 { color:#5588FF; background:rgba(85,136,255,0.12);  border-color:rgba(85,136,255,0.3); }
.tag-t5 { color:#FFAA00; background:rgba(255,170,0,0.12);   border-color:rgba(255,170,0,0.3); }
.tag-armor     { color:var(--cat-armor);     background:rgba(170,170,170,0.08); border-color:rgba(170,170,170,0.2); }
.tag-tools     { color:var(--cat-tools);     background:var(--gold-soft);    border-color:rgba(255,170,0,0.2); }
.tag-talismans { color:var(--cat-talismans); background:var(--diamond-soft); border-color:rgba(85,255,255,0.2); }
.tag-rare      { color:var(--cat-rare);      background:var(--gold-soft);    border-color:rgba(255,170,0,0.2); }
.tag-misc      { color:var(--cat-misc);      background:rgba(98,117,91,0.12);border-color:rgba(98,117,91,0.3); }
.tag-open { color:var(--emerald-bright); background:var(--emerald-soft); border-color:var(--emerald-border); }
.tag-done { color:var(--green); background:var(--green-soft); border-color:rgba(85,255,85,0.25); }

.rank-owner         { color:var(--r-owner);   background:rgba(255,85,85,0.12);   border-color:rgba(255,85,85,0.3); }
.rank-manager       { color:var(--r-manager); background:rgba(255,170,0,0.12);   border-color:rgba(255,170,0,0.3); }
.rank-dev           { color:var(--r-dev);     background:rgba(85,136,255,0.12);  border-color:rgba(85,136,255,0.3); }
.rank-builder       { color:var(--r-builder); background:rgba(85,255,255,0.12);  border-color:rgba(85,255,255,0.3); }
.rank-trial-builder { color:var(--r-tbuilder);background:rgba(136,255,255,0.08); border-color:rgba(136,255,255,0.2); }
.rank-trial-dev     { color:var(--r-tdev);    background:rgba(136,170,255,0.12); border-color:rgba(136,170,255,0.3); }
.rank-moderator     { color:var(--r-mod);     background:rgba(85,255,85,0.12);   border-color:rgba(85,255,85,0.3); }
.rank-helper        { color:var(--r-helper);  background:rgba(85,255,255,0.12);  border-color:rgba(85,255,255,0.3); }
.rank-t5-gold       { color:var(--r-t5g);     background:rgba(255,170,0,0.12);   border-color:rgba(255,170,0,0.3); }
.rank-t5-gray       { color:var(--r-t5gr);    background:rgba(170,170,170,0.08); border-color:rgba(170,170,170,0.2); }
.rank-t4-blue       { color:var(--r-t4b);     background:rgba(85,136,255,0.12);  border-color:rgba(85,136,255,0.3); }
.rank-t4-aqua       { color:var(--r-t4a);     background:rgba(0,204,204,0.12);   border-color:rgba(0,204,204,0.3); }
.rank-t3-red        { color:var(--r-t3);      background:rgba(255,85,85,0.12);   border-color:rgba(255,85,85,0.3); }
.rank-t2-yellow     { color:var(--r-t2);      background:rgba(255,255,85,0.12);  border-color:rgba(255,255,85,0.3); }
.rank-t1-green      { color:var(--r-t1);      background:rgba(85,255,85,0.12);   border-color:rgba(85,255,85,0.3); }
.rank-member        { color:var(--r-member);  background:rgba(124,138,116,0.1);  border-color:rgba(124,138,116,0.2); }

/* ── ALERTS ──────────────────────────────────────────────────────────────── */
.alert { display:flex; align-items:flex-start; gap:8px; padding:11px 13px; font-size:12px; border:2px solid; box-shadow:var(--px-sh-sm); font-family:var(--font-m); }
.alert-success { background:var(--green-soft); border-color:rgba(85,255,85,0.3); color:var(--green); }
.alert-error   { background:var(--red-soft);   border-color:var(--red-border); color:var(--red); }
.alert-info    { background:var(--emerald-soft); border-color:var(--emerald-border); color:var(--emerald-bright); }

/* ── TOASTS ──────────────────────────────────────────────────────────────── */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column-reverse; gap:8px; pointer-events:none; }
.toast {
  background: var(--bg-card2); border: 2px solid var(--border-hi);
  padding: 11px 14px; font-size: 12px; font-family: var(--font-m);
  max-width: 320px; box-shadow: var(--px-sh);
  display: flex; align-items: center; gap: 8px; pointer-events: all;
  animation: slideIn 0.14s steps(3,end), fadeOut 0.2s steps(4,end) 3.7s forwards;
}
.toast-success { border-left: 4px solid var(--green); }
.toast-error   { border-left: 4px solid var(--red); }
.toast-info    { border-left: 4px solid var(--emerald); }

/* ── MODALS ──────────────────────────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0; z-index: 400; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,0.82);
}
.modal-bg.open { display: flex; animation: fadeIn 0.1s steps(2,end); }
.modal {
  background: var(--bg-card);
  border: 2px solid var(--emerald-border);
  width: 100%; max-width: 480px; padding: 24px; position: relative;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--px-sh-lg), 0 0 0 1px rgba(0,0,0,0.5);
  animation: modalIn 0.15s steps(3,end);
}
.modal-lg { max-width: 560px; }
.modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px;
  background: var(--bg-card2); border: 2px solid var(--border-hi); color: var(--text-2);
  font-family: var(--font-d); font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.modal-close:hover { color: var(--red); background: var(--red-soft); border-color: var(--red-border); }
.modal-title {
  font-family: var(--font-d); font-size: 14px; color: var(--emerald);
  margin-bottom: 16px; padding-right: 32px; letter-spacing: 0.5px;
  text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

/* ── TOGGLE ──────────────────────────────────────────────────────────────── */
.toggle { width: 40px; height: 20px; background: var(--bg-input); border: 2px solid var(--border-hi); position: relative; flex-shrink: 0; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.toggle::after { content: ''; width: 12px; height: 12px; background: var(--text-3); position: absolute; top: 2px; left: 2px; transition: left var(--t), background var(--t); }
.toggle.on { background: var(--emerald-soft); border-color: var(--emerald-border); }
.toggle.on::after { left: 22px; background: var(--emerald); }
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:2px solid var(--border); gap:14px; }
.toggle-row:last-of-type { border-bottom: none; }
.toggle-info strong { display:block; font-size:14px; font-weight:700; color:var(--text); margin-bottom:2px; }
.toggle-info span { font-size:12px; color:var(--text-2); }

/* ── HERO ────────────────────────────────────────────────────────────────── */
/* ── HERO · terminal-boot, left-aligned asymmetric ───────────────────────── */
.hero {
  position: relative; overflow: hidden;
  padding: 64px 6% 60px;
  margin: 16px auto 8px; max-width: 1200px; width: 94%;
  border: 2px solid var(--border-hi);
  box-shadow: var(--px-sh-lg);
  background: var(--bg-2);
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s steps(10,end);
  filter: saturate(0.45) contrast(1.05) brightness(0.7) sepia(0.3);
}
.hero-slide.active { opacity: 0.5; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(105deg, var(--bg-2) 0%, var(--bg-2) 40%, rgba(13,11,8,0.78) 64%, rgba(13,11,8,0.4) 100%),
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.22) 2px 4px);
}
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--emerald) 30%, var(--emerald-bright) 50%, var(--emerald) 70%, transparent);
  opacity: 0.7;
}
.hero-content { position: relative; z-index: 3; max-width: 680px; }

.hero-term {
  border: 2px solid var(--border-md);
  background: rgba(6,5,3,0.82);
  box-shadow: var(--px-sh);
  margin-bottom: 28px; max-width: 460px;
  animation: fadeUp 0.3s steps(4,end) both;
}
.hero-term-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-bottom: 2px solid var(--border-md);
  background: var(--bg-card);
}
.htb-dot { width: 9px; height: 9px; background: var(--emerald-deep); border: 1px solid var(--emerald-border); }
.htb-dot:nth-child(2) { background: #2a2208; }
.htb-path { font-family: var(--font-m); font-size: 10px; color: var(--text-3); margin-left: 6px; letter-spacing: 0.3px; }
.hero-term-body { padding: 12px 14px; font-family: var(--font-m); font-size: 11.5px; line-height: 1.85; }
.ht-line { color: var(--text-2); white-space: nowrap; overflow: hidden; opacity: 0; animation: bootline 0.01s steps(1,end) both; }
.ht-line:nth-child(1) { animation-delay: 0.15s; }
.ht-line:nth-child(2) { animation-delay: 0.45s; }
.ht-line:nth-child(3) { animation-delay: 0.7s; }
.ht-line:nth-child(4) { animation-delay: 0.95s; }
.ht-line:nth-child(5) { animation-delay: 1.2s; }
@keyframes bootline { to { opacity: 1; } }
.ht-prompt { color: var(--emerald); font-weight: 700; }
.ht-tag { color: var(--emerald); font-weight: 700; }
.ht-ok { color: var(--text); }
.ht-muted { color: var(--text-3); }
.ht-caret { color: var(--emerald); animation: blink 1s steps(1,end) infinite; }

.hero-title {
  font-family: var(--font-d);
  font-size: clamp(36px, 6.5vw, 72px); line-height: 1.04;
  color: var(--text); margin-bottom: 18px; text-transform: uppercase;
  letter-spacing: 1px; text-wrap: balance;
  text-shadow: 4px 4px 0 #000;
  animation: fadeUp 0.35s steps(5,end) 0.5s both;
}
.hero-title span {
  color: var(--emerald);
  text-shadow: 4px 4px 0 #000, 0 0 26px var(--emerald-glow);
}
.hero-sub {
  font-size: 13.5px; color: var(--text-2); line-height: 1.7;
  max-width: 540px; margin: 0 0 30px; font-family: var(--font-m);
  text-shadow: 0 2px 6px #000; text-wrap: pretty;
  border-left: 2px solid var(--emerald-border); padding-left: 14px;
  animation: fadeUp 0.35s steps(5,end) 0.62s both;
}
.hero-cta { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; animation: fadeUp 0.35s steps(5,end) 0.74s both; }

/* ── FEATURE CARDS ───────────────────────────────────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 12px; margin: 0 0 38px; }
.feature-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card); border: 2px solid var(--border-md);
  padding: 18px 18px; cursor: pointer; position: relative; overflow: hidden;
  box-shadow: var(--px-sh);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
}
.feature-card:hover { transform: translate(-2px,-2px); box-shadow: var(--px-sh-lg); border-color: var(--emerald-border); background: var(--bg-card2); }
.fc-icon-wrap {
  flex-shrink: 0; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--emerald-soft); border: 2px solid var(--emerald-border);
  transition: background var(--t);
}
.feature-card:hover .fc-icon-wrap { background: var(--emerald-glow); }
.fc-icon-img { width: 28px; height: 28px; image-rendering: pixelated; }
.fc-icon { display: none; }
.fc-body { flex: 1; min-width: 0; }
.fc-title { font-family: var(--font-d); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text); margin-bottom: 5px; }
.fc-desc { font-size: 12px; color: var(--text-2); line-height: 1.5; text-wrap: pretty; }
.fc-arrow { flex-shrink: 0; align-self: center; font-family: var(--font-d); font-size: 14px; color: var(--text-3); transition: color var(--t), transform var(--t); }
.feature-card:hover .fc-arrow { color: var(--emerald); transform: translateX(3px); }

/* ── ANNOUNCEMENTS ───────────────────────────────────────────────────────── */
.announce-list { display: flex; flex-direction: column; gap: 12px; }
.announce-pinned {
  position: relative; overflow: hidden;
  background: var(--bg-card); border: 2px solid var(--gold-border);
  border-left: 4px solid var(--gold);
  padding: 22px; box-shadow: var(--px-sh); animation: fadeUp 0.18s steps(4,end);
}
.announce-eyebrow { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; flex-wrap:wrap; }
.announce-pin-badge { font-family:var(--font-d); font-size:9px; color:var(--gold); background:var(--gold-soft); border:2px solid var(--gold-border); padding:3px 9px; letter-spacing:0.5px; text-transform:uppercase; }
.announce-admin-btns { display:flex; gap:6px; }
.announce-pinned-title { font-family:var(--font-d); font-size:14px; color:var(--gold); margin-bottom:10px; line-height:1.4; text-transform:uppercase; text-shadow:1px 1px 0 rgba(0,0,0,0.4); text-wrap:balance; }
.announce-pinned-body { color:var(--text-2); line-height:1.7; font-size:13px; margin-bottom:14px; text-wrap:pretty; }
.announce-pinned-body strong { color:var(--text); }

.announce-card {
  background: var(--bg-card); border: 2px solid var(--border-md);
  padding: 16px 18px; box-shadow: var(--px-sh);
  animation: fadeUp 0.18s steps(4,end);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.announce-card:hover { border-color: var(--emerald-border); transform: translate(-2px,-2px); box-shadow: var(--px-sh-lg); }
.announce-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.announce-card-title { font-family:var(--font-d); font-size:12px; color:var(--text); flex:1; text-transform:uppercase; letter-spacing:0.3px; text-wrap:balance; }
.announce-card-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.announce-body { color:var(--text-2); line-height:1.7; font-size:13px; text-wrap:pretty; }
.announce-body strong { color:var(--text); }
.announce-body a { color: var(--emerald); }
.announce-meta { margin-top:12px; padding-top:10px; border-top:2px solid var(--border); display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-3); flex-wrap:wrap; font-family:var(--font-m); }

/* ── TRADES ──────────────────────────────────────────────────────────────── */
.trade-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; padding:12px 14px; background:var(--bg-card); border:2px solid var(--border-md); box-shadow:var(--px-sh-sm); }
.filter-group { display:flex; gap:3px; padding:0; }
.filter-btn { padding:7px 12px; border:2px solid transparent; background:transparent; cursor:pointer; font-family:var(--font-d); font-size:9px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-3); white-space:nowrap; transition:color var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
.filter-btn:hover { color:var(--emerald); background:var(--emerald-soft); }
.filter-btn.active { background:var(--emerald-soft); color:var(--emerald-bright); border-color:var(--emerald-border); }

.trades-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; }
.trade-card {
  background:var(--bg-card); border:2px solid var(--border-md);
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  box-shadow:var(--px-sh); animation:fadeUp 0.18s steps(4,end);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.trade-card:hover { border-color:var(--emerald-border); transform:translate(-2px,-2px); box-shadow:var(--px-sh-lg); }
.trade-card.status-done { opacity:0.5; }
.trade-accent { height:3px; width:100%; flex-shrink:0; }
.trade-card.cat-armor     .trade-accent { background:var(--cat-armor); }
.trade-card.cat-tools     .trade-accent { background:var(--cat-tools); }
.trade-card.cat-talismans .trade-accent { background:var(--cat-talismans); }
.trade-card.cat-rare      .trade-accent { background:var(--cat-rare); }
.trade-card.cat-misc      .trade-accent { background:var(--cat-misc); }
.trade-body { padding:14px 16px; display:flex; flex-direction:column; flex:1; }
.trade-meta-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:6px; }
.trade-cat-label { font-family:var(--font-d); font-size:9px; color:var(--text-3); text-transform:uppercase; letter-spacing:0.5px; display:flex; align-items:center; gap:4px; }
.trade-tags { display:flex; gap:4px; flex-wrap:wrap; }
.trade-title { font-family:var(--font-d); font-size:12px; color:var(--emerald); margin-bottom:6px; line-height:1.4; text-transform:uppercase; letter-spacing:0.3px; text-shadow:1px 1px 0 rgba(0,0,0,0.4); text-wrap:balance; }
.trade-title-row { display:flex; align-items:center; gap:6px; margin-bottom:6px; position:relative; }
.trade-title-row .trade-title { margin-bottom:0; }
.trade-desc { color:var(--text-2); font-size:13px; line-height:1.6; flex:1; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; text-wrap:pretty; }
.trade-footer { display:flex; align-items:center; justify-content:space-between; padding-top:10px; margin-top:10px; border-top:2px solid var(--border); font-size:11px; color:var(--text-3); flex-wrap:wrap; gap:6px; font-family:var(--font-m); }
.trade-detail-lore { margin-bottom:14px; display:inline-block; }
.trade-lore-popup { display:none; position:fixed; z-index:99999; pointer-events:none; min-width:240px; }
.trade-title-row.has-lore-popup:hover .trade-lore-popup { display:block; }

/* ── ITEM SEARCH + MC TOOLTIPS ───────────────────────────────────────────── */
.item-search-wrap { position:relative; }
.item-search-results {
  position:absolute; top:100%; left:0; right:0; z-index:100;
  background:var(--bg-panel); border:2px solid var(--border-hi); max-height:260px; overflow-y:auto;
  box-shadow:var(--px-sh-lg);
}
.item-search-row { padding:8px 12px; cursor:pointer; position:relative; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); transition:background var(--t-fast); }
.item-search-row:hover { background:var(--emerald-soft); }
.item-search-name { font-size:13px; white-space:nowrap; font-family:var(--font-m); }
.item-search-empty { padding:12px; color:var(--text-3); font-size:12px; text-align:center; }
.item-search-lore-popup { display:none; position:fixed; z-index:99999; pointer-events:none; min-width:240px; }
.item-search-row:hover .item-search-lore-popup { display:block; }

.mc-tooltip { background:#0c0814; border:2px solid #2a1a3a; padding:8px 10px; font-family:var(--font-m); font-size:12px; line-height:1.5; box-shadow:var(--px-sh); min-width:200px; }
.mc-tooltip-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.mc-tooltip-name { font-weight:700; font-size:13px; }
.mc-tooltip-lore { display:flex; flex-direction:column; gap:1px; }
.mc-obfuscated { display:inline-block; animation:mc-obf 0.1s steps(3) infinite; letter-spacing:1px; }
@keyframes mc-obf { 0%{opacity:0.8; filter:blur(1.5px);} 50%{opacity:1; filter:blur(0.5px);} 100%{opacity:0.8; filter:blur(2px);} }
.lore-line { white-space:nowrap; min-height:14px; }

.item-icon { width:32px; height:32px; image-rendering:pixelated; flex-shrink:0; vertical-align:middle; }
.item-icon-emoji { font-size:20px; flex-shrink:0; width:32px; text-align:center; line-height:32px; }
.item-search-row .item-icon, .item-search-row .item-icon-emoji { width:24px; height:24px; font-size:16px; line-height:24px; }
.trade-title-row .item-icon, .trade-title-row .item-icon-emoji { width:24px; height:24px; font-size:16px; line-height:24px; }
.selected-item-card { position:relative; display:inline-block; margin-top:8px; }
.item-clear-btn { position:absolute; top:4px; right:4px; background:var(--red-soft); border:2px solid var(--red-border); color:var(--red); cursor:pointer; width:22px; height:22px; font-size:11px; display:flex; align-items:center; justify-content:center; padding:0; line-height:1; }
.item-clear-btn:hover { background:var(--red); color:#1a0606; }

/* ── REPLIES ─────────────────────────────────────────────────────────────── */
.reply-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.reply-card { background:var(--bg-card); border:2px solid var(--border-md); padding:10px 12px; box-shadow:var(--px-sh-sm); }
.reply-header { display:flex; align-items:center; gap:6px; margin-bottom:4px; flex-wrap:wrap; }

/* ── EMPTY / SPINNER ─────────────────────────────────────────────────────── */
.empty { text-align:center; padding:44px 16px; border:2px dashed var(--border-md); color:var(--text-3); font-family:var(--font-m); }
.empty-icon { font-size:32px; margin-bottom:10px; opacity:0.45; }
.empty-text { font-size:13px; }
.spinner { width:14px; height:14px; border:2px solid var(--emerald-glow); border-top-color:var(--emerald); border-radius:50%; animation:spin 0.8s steps(8,end) infinite; flex-shrink:0; }

/* ── LIVE DOT / VIEWERS ──────────────────────────────────────────────────── */
.live-dot { width:8px; height:8px; background:var(--green); animation:blink 1.5s steps(2,end) infinite; flex-shrink:0; }
.viewers-pill { font-family:var(--font-m); font-size:11px; color:var(--text-2); background:var(--bg-input); border:2px solid var(--border-md); padding:4px 10px; }

/* ── BRIDGE / LIVE CHAT ──────────────────────────────────────────────────── */
.bridge-layout {
  display: grid; grid-template-columns: 220px 1fr;
  height: calc(100vh - 90px); max-height: 880px;
  border: 2px solid var(--border-hi); background: var(--bg-card);
  box-shadow: var(--px-sh); overflow: hidden;
}
.bridge-sidebar { border-right: 2px solid var(--border-md); display: flex; flex-direction: column; background: var(--bg-panel); min-height: 0; }
.bridge-sidebar-header { padding: 10px; border-bottom: 2px solid var(--border-md); flex-shrink: 0; }
.bridge-filter { width:100%; background:var(--bg-input); border:2px solid var(--border-md); color:var(--text); padding:8px 10px; font-size:13px; font-family:var(--font-m); outline:none; box-shadow:inset 2px 2px 0 rgba(0,0,0,0.4); }
.bridge-filter:focus { border-color:var(--emerald-border); }
.bridge-player-list { flex:1; overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:1px; min-height:0; }
.bridge-player-item { padding:7px 10px; font-size:13px; color:var(--text-2); cursor:pointer; display:flex; align-items:center; gap:8px; flex-shrink:0; transition:background var(--t-fast), color var(--t-fast); }
.bridge-player-item:hover { background:var(--emerald-soft); color:var(--emerald); }
.bridge-player { display:flex; align-items:center; gap:8px; width:100%; }
.bridge-player-head { width:22px; height:22px; image-rendering:pixelated; border:1px solid var(--border-md); flex-shrink:0; }
.bridge-player-info { min-width:0; flex:1; }
.bridge-player-name-row { display:flex; align-items:center; gap:6px; }

.bridge-main { display:flex; flex-direction:column; min-height:0; }
.bridge-header { padding:10px 14px; border-bottom:2px solid var(--border-md); display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0; background:var(--bg-panel); }
.bridge-title-badge { font-family:var(--font-d); font-size:9px; padding:4px 10px; border:2px solid var(--border-md); color:var(--text-2); text-transform:uppercase; letter-spacing:1px; }
.bridge-search { background:var(--bg-input); border:2px solid var(--border-md); color:var(--text); padding:6px 10px; font-size:13px; font-family:var(--font-m); outline:none; box-shadow:inset 2px 2px 0 rgba(0,0,0,0.4); }
.bridge-search:focus { border-color:var(--emerald-border); }
.bridge-status { font-family:var(--font-d); font-size:9px; color:var(--text-3); display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:0.5px; }
.bridge-messages { flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:2px; min-height:0; }
.bridge-msg { padding:4px 8px; margin:0 -8px; font-size:13px; line-height:1.5; font-family:var(--font-m); display:flex; align-items:baseline; justify-content:space-between; gap:8px; transition:background var(--t-fast); }
.bridge-msg:hover { background:var(--emerald-soft); }
.bridge-msg.hidden-search { display:none !important; }
.bridge-msg.highlight { background:var(--emerald-soft); }
.bridge-msg-content, .bridge-msg-body { flex:1; min-width:0; }
.bridge-msg-name, .bridge-msg-user { font-weight:700; }
.bridge-msg-sep { color:var(--text-4); margin:0 2px; }
.bridge-msg-src { font-family:var(--font-d); font-size:8px; color:var(--text-3); padding:1px 5px; border:1px solid var(--border); text-transform:uppercase; }
.bridge-msg-text { color:var(--text-2); }
.bridge-msg-time, .bridge-msg-ts { flex-shrink:0; font-size:10px; color:var(--text-3); font-family:var(--font-m); white-space:nowrap; }
.bridge-footer, .bridge-input-area { padding:10px 12px; border-top:2px solid var(--border-md); display:flex; gap:6px; flex-shrink:0; }
.chat-placeholder { text-align:center; color:var(--text-3); font-size:13px; padding:20px; font-family:var(--font-m); }

/* Minecraft colour codes */
.mc-0{color:#000;} .mc-1{color:#0000AA;} .mc-2{color:#00AA00;} .mc-3{color:#00AAAA;}
.mc-4{color:#AA0000;} .mc-5{color:#AA00AA;} .mc-6{color:#FFAA00;} .mc-7{color:#AAAAAA;}
.mc-8{color:#555;} .mc-9{color:#5555FF;} .mc-a{color:#55FF55;} .mc-b{color:#55FFFF;}
.mc-c{color:#FF5555;} .mc-d{color:#FF55FF;} .mc-e{color:#FFFF55;} .mc-f{color:#FFF;}

/* ── ACCOUNT ─────────────────────────────────────────────────────────────── */
.account-layout { display:grid; grid-template-columns:220px 1fr; gap:16px; }
.account-sidebar { display:flex; flex-direction:column; gap:12px; }
.profile-card { background:var(--bg-card); border:2px solid var(--border-md); padding:18px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; box-shadow:var(--px-sh); }
.profile-name { font-family:var(--font-d); font-size:13px; color:var(--emerald); text-transform:uppercase; text-shadow:1px 1px 0 rgba(0,0,0,0.4); }
.profile-tag { font-family:var(--font-m); font-size:11px; color:var(--text-3); }
.acc-nav { background:var(--bg-card); border:2px solid var(--border-md); padding:5px; display:flex; flex-direction:column; gap:2px; box-shadow:var(--px-sh); }
.acc-item { padding:10px 12px; cursor:pointer; color:var(--text-2); font-family:var(--font-d); font-size:9px; text-transform:uppercase; letter-spacing:0.5px; display:flex; align-items:center; gap:8px; border:2px solid transparent; background:none; text-align:left; width:100%; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.acc-item:hover { background:var(--emerald-soft); color:var(--text); }
.acc-item.active { background:var(--emerald-soft); color:var(--emerald-bright); border-color:var(--emerald-border); }
.acc-item.danger { color:var(--red); }
.acc-item.danger:hover { background:var(--red-soft); }
.acc-sep { height:2px; background:var(--border); margin:4px 4px; }
.acc-panel { display:none; }
.acc-panel.active { display:block; animation:fadeUp 0.12s steps(3,end); }
.acc-panels { min-width: 0; }
.panel-title { font-family:var(--font-d); font-size:13px; color:var(--emerald); margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--border-md); text-transform:uppercase; text-shadow:1px 1px 0 rgba(0,0,0,0.4); }

.discord-card { display:flex; align-items:center; gap:10px; background:rgba(88,101,242,0.1); border:2px solid rgba(88,101,242,0.3); padding:10px 12px; margin-bottom:12px; }
.discord-tag { font-family:var(--font-m); font-size:12px; color:#8b9ff4; }
.role-warn  { padding:10px 12px; font-size:12px; border:2px solid var(--gold-border); margin-bottom:14px; background:var(--gold-soft); color:var(--gold); font-family:var(--font-m); }
.role-owner { padding:10px 12px; font-size:12px; border:2px solid var(--red-border); margin-bottom:14px; background:var(--red-soft); color:var(--red); font-family:var(--font-m); }
.user-row { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--bg-card); border:2px solid var(--border-md); gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.user-row-l { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.user-row-r { display:flex; gap:4px; align-items:center; }

/* MC linking steps */
.mc-step { background:var(--bg-card); border:2px solid var(--border-md); padding:14px 16px; margin-bottom:8px; box-shadow:var(--px-sh-sm); }
.mc-step.active { border-color:var(--emerald-border); }
.mc-step-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.mc-num { width:26px; height:26px; background:var(--emerald-soft); border:2px solid var(--emerald-border); color:var(--emerald-bright); font-family:var(--font-d); font-size:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mc-num.done { background:var(--green-soft); border-color:rgba(85,255,85,0.3); color:var(--green); }
.mc-step-title { font-weight:700; font-size:14px; color:var(--text); }
.mc-step-body { color:var(--text-2); font-size:13px; line-height:1.6; }
.mc-linked { display:flex; align-items:center; gap:10px; background:var(--green-soft); border:2px solid rgba(85,255,85,0.3); padding:12px 14px; }
.server-tag { display:inline-flex; align-items:center; gap:4px; background:var(--bg-input); border:2px solid var(--border-md); padding:4px 10px; font-family:var(--font-m); font-size:11px; color:var(--text-2); cursor:pointer; }
.server-tag:hover { border-color:var(--emerald-border); color:var(--emerald); }
.code-timer-val { font-family:var(--font-m); color:var(--emerald-bright); font-weight:700; }

/* ── DASHBOARD SEARCH ────────────────────────────────────────────────────── */
.dash-search-wrap { max-width:520px; margin:0 0 8px; }
.dash-search-row { display:flex; gap:8px; position:relative; }
.dash-suggestions { position:absolute; top:100%; left:0; right:0; z-index:100; background:var(--bg-panel); border:2px solid var(--border-hi); max-height:220px; overflow-y:auto; box-shadow:var(--px-sh-lg); }
.dash-suggest-row { padding:8px 12px; cursor:pointer; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); font-size:13px; color:var(--text); font-family:var(--font-m); }
.dash-suggest-row:hover { background:var(--emerald-soft); }
.dash-recent-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.dash-recent-pill { display:inline-flex; align-items:center; gap:6px; background:var(--bg-card); border:2px solid var(--border-md); padding:6px 12px; font-family:var(--font-m); font-size:12px; color:var(--text-2); cursor:pointer; transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.dash-recent-pill:hover { border-color:var(--emerald-border); color:var(--emerald); background:var(--emerald-soft); }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.site-footer { position:relative; border-top:2px solid var(--emerald-border); margin-top:auto; background:var(--bg-panel); box-shadow:0 -4px 0 rgba(0,0,0,0.4); }
.footer-inner { max-width:1100px; margin:0 auto; padding:18px 20px; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.footer-logo { font-family:var(--font-d); font-size:14px; color:var(--emerald); text-shadow:2px 2px 0 var(--emerald-deep); }
.footer-links { display:flex; gap:16px; }
.footer-links a { font-family:var(--font-d); font-size:9px; text-transform:uppercase; color:var(--text-3); }
.footer-links a:hover { color:var(--emerald); }
.footer-copy { font-size:11px; color:var(--text-3); font-family:var(--font-m); }
.footer-copy a { color: var(--gold); }

/* ── UTILITIES ───────────────────────────────────────────────────────────── */
.flex { display:flex; } .items-center { align-items:center; }
.gap-4{gap:4px;} .gap-6{gap:6px;} .gap-8{gap:8px;} .gap-12{gap:12px;}
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-20{margin-top:20px;} .mt-32{margin-top:32px;}
.mb-8{margin-bottom:8px;} .mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;}
.text-dim{color:var(--text-3);} .text-sm{font-size:12px;} .text-purple{color:var(--diamond);}
.font-mono{font-family:var(--font-m);} .hidden{display:none!important;}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media(max-width:900px) {
  .footer-inner{gap:12px;}
  .account-layout{grid-template-columns:1fr;}
}
@media(max-width:768px) {
  .navbar::before { display:none; }
  .nav-links{display:none;}
  .nav-hamburger{display:flex;}
  .trades-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .hero{padding:80px 18px 60px;}
  .bridge-layout{grid-template-columns:1fr; height:calc(100vh - 130px);}
  .bridge-sidebar{display:none;}
}
@media(max-width:600px) {
  .cards-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  .space-particles { display: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}