#login-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px 24px;
  background: rgba(4, 3, 9, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#login-screen.hidden { display: none; }
.login-mascot { width: 96px; height: 96px; margin-bottom: 20px; }
.login-wordmark {
  width: min(68vw, 280px); height: auto;
  margin-bottom: 4px;
}
#login-screen h1 { font-size: 24px; letter-spacing: 3px; }
.login-sub { color: var(--muted); font-size: 13px; margin-top: 6px; letter-spacing: 1px; }
.login-desc { color: var(--muted); font-size: 14px; margin: 18px 0 24px; max-width: 300px; line-height: 1.5; }
.btn-discord {
  background: #5865F2; color: #fff; border: none; border-radius: 12px;
  font-size: 16px; font-weight: 800; padding: 16px 32px; cursor: pointer;
  width: 100%; max-width: 320px;
}
/* Button effects: lift + glow on hover, press on tap, shine sweep on the primary CTA */
.btn-discord, .btn-primary, .btn-ghost {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  will-change: transform;
}
.btn-discord { position: relative; overflow: hidden; }
.btn-discord::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.btn-discord:hover::after { left: 130%; transition: left .6s ease; }
.btn-discord:hover, .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(88,101,242,.45);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(127,140,255,.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.btn-discord:active, .btn-primary:active, .btn-ghost:active { transform: translateY(0) scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .btn-discord, .btn-primary, .btn-ghost { transition: none; }
  .btn-discord::after { display: none; }
}
.login-error { color: #ff8a8a; font-size: 14px; margin-top: 16px; max-width: 300px; line-height: 1.4; }
.blocker-badge {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; color: #0b0614;
  background: #f5c518; border-radius: 6px; padding: 6px 12px; margin-bottom: 14px;
}
#login-screen .btn-ghost {
  text-decoration: none; display: block; width: 100%; max-width: 320px;
  margin-top: 10px; text-align: center;
}
.btn-text {
  background: none; border: none; color: var(--muted); font-size: 13px;
  margin-top: 18px; cursor: pointer; text-decoration: underline;
}
.login-join { margin-top: 26px; max-width: 320px; }
.login-join-title { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 2px; }
.login-label {
  font-size: 12px; font-weight: 800; letter-spacing: 3px;
  color: var(--muted); margin: 20px 0 12px;
}
.login-tagline {
  font-size: 11px; font-weight: 700; letter-spacing: 4px;
  color: var(--muted); margin: 8px 0 0;
}
.login-features {
  font-size: 11px; font-weight: 600; letter-spacing: 2px;
  color: var(--muted); opacity: .75; margin: 6px 0 0;
}
.login-member-card {
  margin-top: 22px; padding: 18px 20px 20px; width: 100%; max-width: 340px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.login-member-card .login-label { margin: 0 0 12px; }
.login-member-card .btn-discord {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.discord-logo-sm { width: 28px; height: 21px; flex: none; }
.login-divider {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 320px; margin: 22px 0 4px;
  color: var(--muted); font-size: 12px;
}
.login-divider::before, .login-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.14);
}
.login-join-sub { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.hq-welcome { margin: 14px 0 4px; padding: 14px 18px; position: relative; overflow: hidden; }
/* Welcome attention animation: gentle glow pulse + sheen sweep, calms down after ~10s */
.hq-welcome.welcome-nudge {
  animation: welcome-pulse 2.2s ease-in-out 4, welcome-calm 1.5s ease 8.8s forwards;
}
.hq-welcome.welcome-nudge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 120% 0;
  animation: welcome-sheen 2.8s ease 0.4s 3;
}
@keyframes welcome-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0); transform: scale(1); }
  50% { box-shadow: 0 0 22px var(--accent-dim, rgba(139,92,246,0.45)); transform: scale(1.012); }
}
@keyframes welcome-sheen {
  0% { background-position: 120% 0; opacity: 1; }
  100% { background-position: -120% 0; opacity: 1; }
}
@keyframes welcome-calm {
  to { box-shadow: 0 0 0 rgba(0,0,0,0); transform: scale(1); }
}
.hq-welcome-text { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hq-welcome-text strong { font-size: 17px; }
.hq-welcome-rank { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.btn-discord-logo {
  width: 88px; max-width: none; height: 64px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.discord-logo { width: 42px; height: 32px; }
.wip-splash {
  margin-top: 30px; font-size: 11px; letter-spacing: 1.5px; line-height: 1.9;
  color: var(--muted); opacity: .85; text-transform: uppercase;
}
.onboard-steps { text-align: left; max-width: 340px; margin: 6px 0 4px; }
.onboard-step { display: flex; gap: 12px; margin: 14px 0; font-size: 14px; }
.onboard-step .btn-discord { margin-top: 8px; }
.onboard-verify { max-width: 340px; margin: 6px auto 0; text-align: left; }
.onboard-verify .field { margin: 6px 0 10px; }
.onboard-verify .btn-primary { width: 100%; margin-top: 10px; }
#login-screen .onboard-verify .btn-ghost { display: inline-block; width: auto; margin: 0 8px 4px 0; }

/* Hide the page scrollbar while keeping scrollability, so its
   appearing/disappearing never resizes layout. */
html, body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
:root {
  --bg: #05030f;
  --bg2: #0d0820;
  --card: #130c2c;
  --text: #f5f3ff;
  --muted: #bdb4e6;
  --accent: #9d6bff;
  --accent-dim: #7c4dff;
  --border: #3d2a75;
  --glass-card: rgba(26, 18, 58, 0.5);
  --glass-bg2: rgba(18, 12, 42, 0.5);
  --glass-chrome: rgba(8, 5, 18, 0.55);
  /* v27: menu tiles + ops */
  --tile-text: #f7f6ff;
  --tile-sub: rgba(247, 246, 255, 0.82);
  --tile-shade-top: rgba(2, 4, 10, 0.62);
  --tile-shade-mid: rgba(2, 4, 10, 0.28);
  --tile-shade-bot: rgba(2, 4, 10, 0.72);
  --tile-tint: none;
  --pos: #35e07a;
  --neg: #f87171;
}
/* ---- Matrix mode: unlocked by sitting through the splash easter egg ---- */
/* Matrix mode: digital rain canvas + green-tinted Starlight wordmark */
#matrix-rain {
  position: fixed; inset: 0; z-index: 1;
  display: none; pointer-events: none;
}
body.matrix-mode #matrix-rain { display: block; }
/* ---- Terminal theme: live background terminal ---- */
#term-bg {
  position: fixed; inset: 0; z-index: 0;
  display: none; pointer-events: none;
}
body[data-theme="terminal"] #term-bg { display: block; }
body.matrix-mode::after {
  background: url("images/wordmark-systems-login.png") no-repeat center / contain;
  filter: sepia(1) saturate(5) hue-rotate(90deg) brightness(1.15);
  width: min(88vw, 560px); aspect-ratio: 1416 / 448;
  top: 36%;
  mix-blend-mode: screen; opacity: .55;
}
body.matrix-mode {
  --bg: #000a00;
  --bg2: #001400;
  --card: #00200a;
  --text: #00ff41;
  --muted: #00b32d;
  --accent: #00ff41;
  --accent-dim: #008f11;
  --border: #004d1a;
  --glass-card: rgba(0, 32, 10, 0.28);
  --glass-bg2: rgba(0, 20, 8, 0.28);
  --glass-chrome: rgba(0, 12, 0, 0.35);
  /* v27: matrix-mode tile treatment (same var remap pattern + green tint over images) */
  --tile-text: #d9ffe4;
  --tile-sub: rgba(217, 255, 228, 0.78);
  --tile-shade-top: rgba(0, 24, 6, 0.68);
  --tile-shade-mid: rgba(0, 30, 10, 0.34);
  --tile-shade-bot: rgba(0, 28, 8, 0.78);
  --tile-tint: linear-gradient(rgba(0, 255, 65, 0.10), rgba(0, 255, 65, 0.10));
  --pos: #00ff41;
  --neg: #ff7a6b;
}
body.matrix-mode #login-screen {
  background: rgba(0, 10, 0, 0.45);
}
body.matrix-mode #splash { background: #000a00; }
body.matrix-mode .app-header { background: rgba(0,10,0,.92); }
body.matrix-mode .btn-discord { background: #008f11; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #040309 url("images/blackhole-bg.jpg") no-repeat center top fixed;
  background-size: cover;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}
/* STARLIGHT wordmark watermark over the space background (screen blend drops the black) */
body::after {
  content: "";
  position: fixed; top: 32%; left: 0; right: 0; margin: 0 auto;
  width: min(94vw, 620px); aspect-ratio: 1812 / 1653;
  background: url("images/wordmark-bg.jpg") no-repeat center / contain;
  mix-blend-mode: screen; opacity: .6;
  pointer-events: none; z-index: 0; user-select: none;
}
#app, #login-screen, #splash { position: relative; z-index: 1; }
/* Glassmorphic panels: translucent cards floating over deep space */
.card, .news-item, .tool-card, .stat, .chat-msg, .review-item, .guide-card,
.roster-list a, .fleet-grid img, .link-list a {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.matrix-mode {
  background-image: url("images/blackhole-bg.jpg");
}
#app { max-width: none; margin: 0 auto; padding-bottom: 110px; }

.app-header {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px;
  padding: 16px 16px 12px;
  position: sticky; top: 0; z-index: 10;
  background: var(--glass-chrome); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
/* Discord Activity: Discord's own overlay bar (app name, invite, leave)
   covers the top of the webview. The client publishes its height as
   --discord-safe-area-inset-top; shift the shell down by it and park the
   sticky header under it. Standalone is untouched. */
html.activity-mode #app { padding-top: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px)); }
html.activity-mode .app-header { top: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px)); }
/* 2-column header: account + nav pinned left, clock + buttons pinned right */
.header-left { display: flex; align-items: center; gap: 12px; justify-self: start; min-width: 0; }
.header-who { min-width: 0; }
.header-who .header-nick, .header-who .header-rank { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-nick { font-size: 18px; font-weight: 700; }
.header-clock { text-align: center; }
.header-icons { justify-self: end; grid-column: 3; }
.header-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
/* Clickable account identity (top-left): button reset + clear affordance */
.header-account { display: flex; align-items: center; gap: 12px; min-width: 0; background: none; border: none; padding: 4px 8px 4px 4px; margin: -4px 0 -4px -4px; border-radius: 12px; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.header-account:hover { background: rgba(255,255,255,0.06); }
.header-account:active { transform: scale(.97); }
.header-account .header-who { display: block; }
.header-avatar-wrap { position: relative; flex: 0 0 auto; }
.header-gear { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); border: 1px solid rgba(255,255,255,0.25); color: var(--muted); font-size: 11px; line-height: 16px; text-align: center; }
.header-account:hover .header-gear { color: #fff; border-color: rgba(255,255,255,0.6); }
.header-account:hover .header-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
.app-header h1 { font-size: 18px; letter-spacing: 0; }
.header-rank { font-size: 13px; color: var(--muted); }

main { padding: 0 0 16px; overflow-x: clip; }
.tab { display: none; }
.tab.active { display: block; }
/* iOS-like slide transitions: old cards slide off, new cards slide in */
.tab.slide-out-left { display: block; animation: tabOutLeft .22s ease-in forwards; }
.tab.slide-out-right { display: block; animation: tabOutRight .22s ease-in forwards; }
.tab.slide-in-left { animation: tabInLeft .3s cubic-bezier(.32,.72,.35,1); }
.tab.slide-in-right { animation: tabInRight .3s cubic-bezier(.32,.72,.35,1); }
@keyframes tabOutLeft { to { transform: translateX(-100%); opacity: 0; } }
@keyframes tabOutRight { to { transform: translateX(100%); opacity: 0; } }
@keyframes tabInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tabInRight { from { transform: translateX(100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Header nav icons (v64): Home/Tools left of clock, News/Guides right ---- */
.nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 0; cursor: pointer;
  color: var(--muted);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.header-icons .nav-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); }
.nav-group { display: inline-flex; gap: 12px; align-items: center; }
.header-left .nav-group { margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.12); }
/* The left icon group must never overflow into the centered clock: if the
   viewport is too narrow for all icons, the group scrolls internally
   (scrollbar hidden) instead of overlapping the clock. */
.header-left .nav-group {
  overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
  flex-shrink: 1; min-width: 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.header-left .nav-group::-webkit-scrollbar { display: none; }
/* Overflow "More" menu for the desktop icon bar. The wrap sits after the
   icon group; the dropdown opens below it. Hidden until JS detects overflow. */
.nav-more-wrap { position: relative; flex-shrink: 0; margin-left: 12px; }
#nav-more-drop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 210px; padding: 6px;
  background: var(--glass-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
#nav-more-drop .nav-btn {
  width: 100%; height: auto; min-height: 44px;
  justify-content: flex-start; gap: 12px; padding: 10px 12px;
  border: none; background: transparent; box-shadow: none; border-radius: 10px;
}
#nav-more-drop .nav-btn:hover { background: rgba(255,255,255,0.08); }
#nav-more-drop .nav-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
#nav-more-drop .nav-btn:active { transform: none; }
.nav-more-label { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
/* The More menu is desktop-traditional only: never in radial mode or on mobile */
body.nav-d-radial .nav-more-wrap { display: none; }
@media (max-width: 899px) {
  .nav-more-wrap { display: none; }
}
.header-icons .nav-group { margin-right: 12px; }
.nav-btn svg { width: 22px; height: 22px; }
.nav-btn:hover { color: var(--text); background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); }
.nav-btn:active { transform: scale(.94); }
.nav-btn.nav-active {
  color: var(--accent);
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.35), inset 0 0 0 1px rgba(139, 92, 246, 0.45);
}
@media (max-width: 420px) {
  .nav-btn { width: 36px; height: 36px; }
  .nav-btn svg { width: 20px; height: 20px; }
  .header-left { gap: 6px; }
  .nav-group { gap: 8px; }
  .header-left .nav-group { margin-left: 8px; padding-left: 8px; }
  .header-icons .nav-group { margin-right: 8px; }
}
/* Medium widths (landscape phones, narrow tablets): tighten the desktop header so nothing overflows */
@media (max-width: 1000px) {
  .app-header { gap: 8px; padding: 12px 12px 10px; }
  .header-left { gap: 8px; }
  .nav-group { gap: 8px; }
  .header-left .nav-group { margin-left: 8px; padding-left: 8px; }
  .header-icons .nav-group { margin-right: 8px; }
  .header-nick { font-size: 16px; }
}
/* Narrow desktop (900-1100px): smaller nav icons so all 7 fit without scrolling */
@media (max-width: 1100px) and (min-width: 900px) {
  .app-header .nav-btn { width: 38px; height: 38px; border-radius: 12px; }
  .app-header .nav-btn svg { width: 20px; height: 20px; }
}
@media (max-width: 860px) and (min-width: 769px) {
  .nav-btn { width: 40px; height: 40px; }
  .nav-btn svg { width: 20px; height: 20px; }
}
/* Mobile section menu: single dropdown button (mobile only) */
#mobile-nav-btn { display: none; }
#mobile-nav-drop { display: none; }
/* Compact header (hamburger menu) whenever the app is at phone width.
   Kicks in below 900px because the desktop icon header needs the full-bleed
   >=900px layout to breathe; in the old 769-899px dead zone it overflowed. */
@media (max-width: 899px) {
  .header-left { grid-column: 1; }
  .header-icons { grid-column: 3; }
  .header-clock { display: none; }
  .header-icons .nav-group { display: none; }
  .header-left .nav-group { display: none; }
  .header-icons #sign-out { display: none; }
  .header-icons { position: relative; }
  #mobile-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16);
    color: var(--text); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  }
  #mobile-nav-btn svg { width: 22px; height: 22px; }
  #mobile-nav-btn:active { transform: scale(.94); }
  #mobile-nav-drop {
    display: block;
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
    min-width: 220px; max-height: calc(100vh - 120px); overflow-y: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 8px;
    background: rgba(23, 18, 49, 0.97); border: 1px solid var(--border); border-radius: 16px;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 48px rgba(0,0,0,.55);
    transform-origin: top right;
  }
  #mobile-nav-drop::-webkit-scrollbar { display: none; }
  #mobile-nav-drop:not(.hidden) { animation: pop-in .2s cubic-bezier(.34,1.4,.64,1); }
  #mobile-nav-drop.hidden { display: none; }
  .mobile-nav-item {
    width: 100%; height: auto; min-height: 48px;
    display: flex; align-items: center; gap: 12px; justify-content: flex-start;
    padding: 10px 14px; border-radius: 10px;
    background: none; border: none; box-shadow: none;
    color: var(--text); font-size: 15px; font-weight: 600; font-family: inherit;
    cursor: pointer; text-align: left;
  }
  .mobile-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
  .mobile-nav-item:hover { background: rgba(255,255,255,0.08); }
  .mobile-nav-item:active { transform: scale(.98); }
  .mobile-nav-item.nav-active { color: var(--accent); background: rgba(139,92,246,0.14); }
}

.hero { position: relative; margin-bottom: 12px; }
.hero-img { width: 100%; height: 220px; object-fit: cover; display: block; }
.hero-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 40px 16px 16px;
  background: linear-gradient(transparent, var(--glass-chrome));
}
.hero-overlay h2 { font-size: 22px; letter-spacing: 1px; }
.hero-overlay p { color: var(--muted); font-size: 14px; margin-top: 4px; }

.card {
  background: var(--glass-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; margin: 12px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.card h3 { font-size: 16px; margin-bottom: 8px; color: var(--text); }
.card p { font-size: 14px; color: var(--muted); line-height: 1.5; }
.card p strong { color: var(--text); }

.patch-card { border-left: 4px solid var(--accent); }
.patch-card .patch-ver { font-size: 13px; color: var(--accent); font-weight: 700; letter-spacing: 1px; }
.patch-card h3 { margin: 4px 0 8px; font-size: 18px; }
.patch-card ul { margin: 8px 0 8px 18px; }
.patch-card li { font-size: 13.5px; color: var(--muted); margin-bottom: 6px; line-height: 1.45; }

.stats { display: flex; gap: 12px; margin: 12px; }
.stat {
  flex: 1; background: var(--glass-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 8px; text-align: center;
}
.stat-num { display: block; font-size: 20px; font-weight: 800; color: var(--accent); }
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

.section-title { font-size: 15px; margin: 18px 16px 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

.news-list { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.news-item {
  display: block; background: var(--glass-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; text-decoration: none; color: var(--text);
}
.news-item .news-title { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.news-item .news-meta { font-size: 12px; color: var(--accent); margin-top: 6px; }
.news-card {
  background: var(--glass-card); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.news-card .news-img img { width: 100%; max-height: 180px; object-fit: cover; display: block; }
.news-card .news-body { padding: 12px 14px; }
.news-card .news-title { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.news-card .news-meta { font-size: 12px; color: var(--accent); margin-top: 6px; }
.news-card .news-text { font-size: 13px; line-height: 1.5; color: var(--text); opacity: 0.85; margin: 8px 0 0; white-space: pre-wrap; }
.news-card .news-link { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 600; }
.op-type-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 10px; border-radius: 20px; }
.op-type-trading { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.op-type-mining { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.op-type-salvage { background: rgba(167, 139, 250, 0.15); color: #a78bfa; }
.op-type-combat { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.op-type-fleet { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.op-rsvp-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
/* Ship picker */
.mfr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mfr-card { position: relative; min-height: 110px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background-color: rgba(255,255,255,0.04); cursor: pointer; overflow: hidden; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.mfr-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.15)); pointer-events: none; }
.mfr-name { position: absolute; left: 10px; bottom: 8px; z-index: 1; font-weight: 700; font-size: 14px; color: #fff; text-align: left; }
.ship-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 50vh; overflow-y: auto; }
.ship-card { border-radius: 12px; border: 2px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); cursor: pointer; overflow: hidden; padding: 0; text-align: left; }
.ship-card img { width: 100%; height: 90px; object-fit: cover; display: block; }
.ship-card .ship-name { display: block; padding: 8px 10px; font-weight: 600; font-size: 13.5px; color: #fff; }
.ship-card.selected { border-color: #34d399; box-shadow: 0 0 0 2px rgba(52,211,153,0.4); }
.ship-mini-card { display: inline-block; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 16px; background: rgba(96,165,250,0.15); color: #93c5fd; border: 1px solid rgba(96,165,250,0.35); }
/* @mention autocomplete */
.mention-picker { position: absolute; bottom: 100%; left: 8px; right: 8px; margin-bottom: 6px; background: rgba(23,18,49,0.98); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; overflow: hidden; z-index: 50; max-height: 240px; overflow-y: auto; }
.chat-input-wrap { position: relative; }
.mention-item { display: block; width: 100%; text-align: left; padding: 10px 14px; background: none; border: none; cursor: pointer; color: #fff; font-size: 14px; }
.mention-item.highlighted { background: rgba(139,92,246,0.35); }
.mention-nick { font-weight: 600; }
.chat-mention { color: #a78bfa; font-weight: 600; cursor: pointer; }
.chat-mention:hover { text-decoration: underline; }
.chat-deleted { color: var(--muted); font-style: italic; font-size: 13px; }
.chat-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(23,18,49,0.95); border: 1px solid rgba(139,92,246,0.5); color: #fff; padding: 10px 18px; border-radius: 20px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 9999; }
.chat-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.st-pill.unverified { background: rgba(220,38,38,0.25); border: 1px solid rgba(220,38,38,0.6); color: #fca5a5; }
.chat-react-btn { display: none; position: absolute; right: 4px; top: 2px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(23,18,49,0.9); color: #a78bfa; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.chat-line { position: relative; }
.chat-line:hover .chat-react-btn { display: block; }
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-reaction { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.18); background: rgba(23,18,49,0.7); color: #fff; font-size: 14px; cursor: pointer; }
.chat-reaction .rcount { font-size: 12px; color: #c4b5fd; }
.chat-reaction.mine { border-color: rgba(139,92,246,0.7); background: rgba(139,92,246,0.25); }
.emoji-picker { display: flex; flex-wrap: wrap; gap: 2px; max-width: 264px; padding: 8px; background: rgba(23,18,49,0.98); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.emoji-opt { font-size: 22px; padding: 4px; background: none; border: none; cursor: pointer; border-radius: 8px; }
.emoji-opt:hover { background: rgba(139,92,246,0.3); }
.dps-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.dps-spec { display: flex; justify-content: space-between; padding: 8px 12px; background: rgba(23,18,49,0.6); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; font-size: 13px; }
.dps-spec-k { color: #a78bfa; font-weight: 600; }
.dps-spec-v { color: #fff; text-align: right; }
.dps-hero { position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 14px; border: 1px solid var(--border); }
.dps-hero img { width: 100%; height: 220px; object-fit: cover; display: block; }
.dps-hero-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; background: linear-gradient(transparent, rgba(10,6,24,0.9)); }
.dps-hero-label h3 { margin: 0; font-size: 22px; color: #fff; }
.dps-hero-label span { color: #c4b5fd; font-size: 13px; }
.dps-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: rgba(0,230,118,0.2); border: 1px solid rgba(0,230,118,0.5); color: #6ee7b7; margin-left: 4px; }

.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px; }
.tool-menu { display: flex; gap: 8px; padding: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tool-menu-btn {
  flex: 0 0 auto; padding: 10px 16px; border-radius: 10px;
  background: var(--glass-card); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; cursor: pointer; white-space: nowrap;
}
.tool-menu-btn.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
@media (max-width: 600px) {
  .tool-menu { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .tool-menu-btn { flex: none; text-align: center; }
}
.tool-pane { display: none; }
.tool-pane.active { display: block; }
.finder-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ref-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ref-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.ref-pick-list { position: relative; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; margin-top: 4px; scrollbar-width: none; }
.ref-pick-list::-webkit-scrollbar { display: none; }
.ref-pick-btn { padding: 10px 12px; border-radius: 8px; text-align: left; background: var(--glass-card); border: 1px solid var(--border); color: var(--text); font-size: 14px; cursor: pointer; }
.ref-pick-btn:hover { border-color: var(--accent); }
.ref-time-row { display: flex; gap: 8px; }
.ref-time-row .field { flex: 1; }
.ref-job { padding: 12px; border-radius: 10px; background: var(--glass-card); border: 1px solid var(--border); margin-bottom: 8px; }
.ref-job.ready { border-color: var(--pill-green); }
.ref-job-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.ref-job-actions { margin-top: 8px; display: flex; gap: 8px; }
.finder-group-btn {
  padding: 12px 8px; border-radius: 10px; text-align: center;
  background: var(--glass-card); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; cursor: pointer;
}
.finder-group-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.finder-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; max-height: 400px; overflow-y: auto; }
.finder-item-btn {
  padding: 10px 12px; border-radius: 8px; text-align: left;
  background: var(--glass-card); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; cursor: pointer;
}
.finder-item-btn.active { border-color: var(--accent); }
.finder-item-btn .muted { font-size: 12px; margin-left: 8px; }
.finder-price-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-radius: 8px; margin-bottom: 6px;
  background: var(--glass-card); border: 1px solid var(--border);
}
.finder-price-row .loc { font-size: 13px; }
.finder-price-row .price { font-weight: bold; color: var(--accent); }
.tool-card {
  display: block; background: var(--glass-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; text-decoration: none; color: var(--text);
}
.tool-card .tool-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); font-weight: 700; }
.tool-card h4 { font-size: 15px; margin: 6px 0; }
.tool-card p { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

.link-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.link-list a {
  display: block; padding: 12px 14px; border-radius: 10px;
  background: var(--glass-bg2); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600;
}
.btn-primary {
  background: var(--accent) !important; border-color: var(--accent) !important;
  text-align: center; color: #fff !important;
}
.btn-ghost {
  margin-top: 10px; background: none; border: 1px solid var(--accent);
  color: var(--accent); border-radius: 10px; padding: 10px 16px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}

.guide-card {
  display: block; width: calc(100% - 24px); text-align: left;
  background: var(--glass-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; margin: 8px 12px; color: var(--text); cursor: pointer;
}
.guide-card h4 { font-size: 16px; margin-bottom: 4px; }
.guide-card .guide-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #0b0614; background: var(--accent);
  border-radius: 6px; padding: 3px 8px; margin-bottom: 8px;
}
.guide-card p { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
#guide-body h3 { font-size: 20px; margin-bottom: 12px; }
#guide-body p { margin-bottom: 12px; }
/* Reading lanes (P2-4): on the full-width canvas, prose keeps a readable
   measure. Containers, cards, tables and the canvas itself stay full. */
#guide-body p, #guide-body li, #guide-content p, #guide-content li { max-width: 72ch; }
.hidden { display: none !important; }

/* Guides: section tabs, patch tags, stale flags */
.guide-tabs { display: flex; gap: 8px; padding: 0 12px; margin-bottom: 12px; }
.guide-tab {
  flex: 1; padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--glass-card); color: var(--muted); font-size: 14px; font-weight: 700; cursor: pointer;
}
.guide-tab.active { color: var(--text); border-color: var(--accent); background: rgba(139,92,246,.15); }
.guide-patch {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  color: var(--muted); border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 8px; margin: 0 6px 8px 0;
}
.guide-stale {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #fbbf24; border: 1px solid rgba(251,191,36,.4);
  border-radius: 6px; padding: 3px 8px; margin: 0 6px 8px 0;
}

/* Guide comments */
#guide-comments { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
.comments-title { font-size: 16px; margin-bottom: 12px; }
.comment { display: flex; gap: 10px; margin-bottom: 14px; }
.comment-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover; }
.comment-main { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.comment-head strong { font-size: 13px; }
.comment-time { font-size: 11px; color: var(--muted); }
.comment-quote {
  border-left: 3px solid var(--accent); padding: 6px 10px; margin-bottom: 6px;
  background: rgba(139,92,246,.08); border-radius: 0 8px 8px 0; font-size: 12.5px; color: var(--muted);
}
.comment-body { font-size: 14px; line-height: 1.5; margin-bottom: 6px; word-wrap: break-word; }
.comment-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.react-btn {
  border: 1px solid var(--border); background: transparent; border-radius: 16px;
  padding: 3px 10px; font-size: 13px; color: var(--muted); cursor: pointer;
}
.react-btn.on { border-color: var(--accent); color: var(--text); background: rgba(139,92,246,.15); }
.comment-reply, .comment-del { font-size: 12px; padding: 3px 8px; }
.comment-form { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.comment-form textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(0,0,0,.25); color: var(--text); padding: 10px; font-size: 14px; resize: vertical;
}
.comment-quote-preview {
  font-size: 12px; color: var(--muted); padding: 6px 10px;
  border-left: 3px solid var(--accent); background: rgba(139,92,246,.08); border-radius: 0 8px 8px 0;
}

.roster-tools { padding: 0 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#roster-search {
  flex: 1 1 180px; padding: 12px 14px; border-radius: 10px; font-size: 15px;
  background: var(--glass-bg2); border: 1px solid var(--border); color: var(--text);
}
select.asset-sort {
  flex: 0 1 auto; padding: 10px 12px; border-radius: 10px; font-size: 14px;
  background: var(--glass-bg2); border: 1px solid var(--border); color: var(--text);
  font-family: inherit;
}
.roster-count { font-size: 12px; color: var(--muted); margin: 4px 4px 8px; flex: 1 1 100%; }
.roster-list { list-style: none; padding: 0 12px; }
.roster-list li { border-bottom: 1px solid var(--border); }
.roster-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 4px; color: var(--text); text-decoration: none; font-size: 14.5px;
}
.roster-list a .ext { color: var(--accent); font-size: 13px; }
/* Roster pagination */
.roster-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 12px 4px; }
.roster-page-info { font-size: 13px; color: var(--muted); }
.roster-page-btn[disabled] { opacity: .35; cursor: default; }

.fleet-grid { display: grid; gap: 10px; padding: 0 12px; }
.fleet-grid img { width: 100%; border-radius: 12px; border: 1px solid var(--border); }
/* Live org fleet (HQ) */
#hq-fleet { padding: 0 12px; }
#hq-fleet .hq-stats { margin: 0 0 12px; }
.mfr-block {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px;
  background: var(--glass-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.mfr-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mfr-name { width: 110px; flex: none; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mfr-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(139, 92, 246, .15); overflow: hidden; }
.mfr-bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.mfr-count { width: 28px; text-align: right; color: var(--muted); font-weight: 700; }
/* ---- DPS calculator (Tools tab) ---- */
.dps-ship-list { display: grid; gap: 8px; margin: 10px 0; max-height: 320px; overflow-y: auto; }
.dps-ship-pick {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--glass-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 12px; color: var(--text); font-family: inherit; cursor: pointer; width: 100%;
}
.dps-ship-pick img { width: 72px; height: 40px; object-fit: cover; border-radius: 8px; flex: none; }
.dps-ship-pick span { display: flex; flex-direction: column; }
.dps-ship-pick strong { font-size: 15px; }
.dps-ship-pick em { font-style: normal; font-size: 12px; color: var(--muted); }
.dps-ship-head { display: flex; align-items: center; gap: 14px; margin: 14px 0 10px; }
.dps-head-img { width: 120px; height: 68px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.dps-ship-head h4 { margin: 0 0 2px; font-size: 19px; }
.dps-ship-head p { margin: 0; font-size: 13px; }
.dps-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.dps-stat {
  background: var(--glass-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 6px; text-align: center;
}
.dps-stat-num { display: block; font-size: 19px; font-weight: 800; }
.dps-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dps-up { color: #35e07a; font-size: 13px; font-weight: 700; }
.dps-down { color: #ff6b6b; font-size: 13px; font-weight: 700; }
.dps-h { margin: 16px 0 8px; font-size: 15px; }
.dps-list { display: flex; flex-direction: column; gap: 8px; }
.dps-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--glass-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px;
}
.dps-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dps-row strong { font-size: 14px; }
.dps-size { font-size: 12px; color: var(--muted); }
.dps-wdps { font-size: 12px; color: var(--accent); font-weight: 700; }
select.dps-pick { flex: 0 1 200px; min-width: 0; font-size: 13px; padding: 8px 10px; }
#dps-reset2 { margin-top: 14px; }

.fleet-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.fleet-tools .fleet-search { flex: 1 1 160px; margin-bottom: 0; }
.fleet-tools select.asset-sort { flex: 1 1 120px; }
.fleet-tools .btn-ghost.seg { flex: 0 1 auto; }
.fleet-count { font-size: 12px; margin: 8px 2px 10px; }
.fleet-search {
  width: 100%; box-sizing: border-box; margin-bottom: 10px;
  padding: 10px 14px; border-radius: 10px; font-size: 14px;
  background: rgba(20, 14, 40, .6); border: 1px solid var(--border); color: var(--text);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.fleet-ship {
  background: var(--glass-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.fleet-ship-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fleet-ship-name { font-weight: 700; color: var(--text); font-size: 15px; }
.fleet-ship-count { font-weight: 800; color: var(--accent); font-size: 14px; }
.fleet-ship-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.fleet-ship-sub .st-pill { font-size: 10px; padding: 2px 8px; margin-left: 4px; }
.fleet-ship-owners { font-size: 12px; color: var(--muted); opacity: .8; margin-top: 2px; }

/* ---- Ship image cards (org fleet + personal roster) ---- */
.ship-card { position: relative; overflow: hidden; }
.ship-card.has-bg {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  min-height: 148px; border-color: rgba(255,255,255,.14);
}
.ship-card-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(2,4,12,.86) 0%, rgba(2,4,12,.45) 52%, rgba(2,4,12,.10) 100%);
}
.ship-card-body { position: relative; z-index: 1; }
.ship-card.has-bg .fleet-ship-name, .ship-card.has-bg .fleet-name {
  color: #fff; font-size: 17px; text-shadow: 0 1px 8px rgba(0,0,0,.85);
}
.ship-card.has-bg .fleet-ship-count { text-shadow: 0 1px 6px rgba(0,0,0,.85); }
.ship-card.has-bg .fleet-ship-sub, .ship-card.has-bg .fleet-sub,
.ship-card.has-bg .fleet-meta, .ship-card.has-bg .fleet-ship-owners {
  color: rgba(255,255,255,.88); text-shadow: 0 1px 5px rgba(0,0,0,.85);
}
.ship-card.has-bg .fleet-badges { margin-top: 6px; }
.ship-card .fleet-row-actions { position: relative; z-index: 1; padding-bottom: 2px; }
/* Browser thumbnails */
.fleet-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; border: 1px solid var(--border); }

/* ---- UEX tools section ---- */
.uex-subnav { padding: 12px 12px 4px; overflow-x: auto; margin-bottom: 0; }
.uex-subnav .uex-seg { white-space: nowrap; flex: none; }
.uex-panel.hidden { display: none; }
.uex-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; align-items: center; }
.uex-filters .field { flex: 1 1 130px; min-width: 0; }
.uex-filters .btn-primary { flex: none; }
#uex-trend-chart { margin: 8px 0; }
#uex-trend-chart svg { width: 100%; height: auto; display: block; }
.trend-up { color: #22c55e; font-weight: 700; }
.trend-down { color: #f87171; font-weight: 700; }
.uex-route-path { white-space: nowrap; }

.join-steps { margin: 8px 0 8px 20px; }
.join-steps li { font-size: 14px; color: var(--muted); margin-bottom: 8px; line-height: 1.5; }
.join-steps strong { color: var(--text); }

.footnote { font-size: 12px; color: var(--muted); padding: 12px 16px; text-align: center; }

/* ---- Login splash: terminal verification readout ---- */
#splash {
  position: fixed; inset: 0; z-index: 100;
  background: #040309;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .45s ease;
}
#splash.hidden { display: none; }
#splash.fade { opacity: 0; pointer-events: none; }
.splash-inner {
  width: min(94vw, 560px); padding: 32px 28px; margin: 0 auto;
  text-align: center;
}
#splash-body {
  display: inline-block; text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px; line-height: 2; color: #cfcbe0;
  white-space: pre-wrap; overflow-wrap: break-word; min-height: 140px;
}
#splash-body .sp-green { color: #35e07a; }
#splash-body .sp-red { color: #ff5c5c; }
#splash-body .cursor {
  display: inline-block; width: 12px; height: 24px;
  background: #35e07a; vertical-align: -4px;
  animation: sp-blink 1s steps(1) infinite;
}
@keyframes sp-blink { 50% { opacity: 0; } }
.splash-hint {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; color: #6b6680; text-align: center; margin-top: 32px;
  animation: sp-blink 1.6s steps(1) infinite;
}
.splash-hint.hidden { display: none; }

/* ---- CRT power-on boot overlay (Alien-style) ---- */
#crt-boot {
  position: fixed; inset: 0; z-index: 200;
  background: #000;
  overflow: hidden;
  pointer-events: none;
}
#crt-boot.hidden { display: none; }
/* Persistent CRT scanline overlay (toggleable in Account settings) */
#crt-overlay {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0, 0, 0, 0.12) 2px, rgba(0, 0, 0, 0.12) 4px
  );
  mix-blend-mode: multiply;
}
#crt-overlay.hidden { display: none; }
#crt-overlay::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.28) 100%);
}
/* Faint version stamp, under the header clock */
#app-version {
  font-size: 9px; font-family: monospace; color: rgba(255,255,255,0.28);
  pointer-events: none; user-select: none; letter-spacing: 0.5px;
  text-align: center; line-height: 1; margin-top: 1px;
}
/* The bright horizontal line that expands to full screen */
.crt-line {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 3px; margin-top: -1px;
  background: #fff;
  box-shadow: 0 0 30px 8px rgba(255,255,255,.9), 0 0 80px 20px rgba(180,220,255,.5);
  transform: scaleY(1);
  animation: crtExpand .7s cubic-bezier(.2,.7,.3,1) .15s forwards;
}
@keyframes crtExpand {
  0% { transform: scaleY(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: scaleY(400); opacity: 1; }
}
/* Scanlines over everything */
.crt-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0,0,0,.35) 2px, rgba(0,0,0,.35) 4px
  );
  animation: crtFlicker .12s steps(2) infinite;
}
/* Static noise: animated background-position jitter on a tiny noise tile */
.crt-noise {
  position: absolute; inset: -100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .12;
  animation: crtNoise .25s steps(3) infinite;
}
@keyframes crtNoise {
  0% { transform: translate(0,0); }
  33% { transform: translate(-30px,20px); }
  66% { transform: translate(25px,-35px); }
  100% { transform: translate(0,0); }
}
/* Flicker: subtle brightness jitter like an old tube warming up */
@keyframes crtFlicker {
  0% { opacity: .85; }
  50% { opacity: 1; }
  100% { opacity: .92; }
}
/* Vignette: darkened curved-tube edges */
.crt-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}
/* Whole overlay flash-in then fade-out handled by JS classes */
#crt-boot.crt-flash { animation: crtFlash .18s ease-out; }
@keyframes crtFlash {
  0% { filter: brightness(3); }
  100% { filter: brightness(1); }
}
#crt-boot.crt-out { transition: opacity .5s ease; opacity: 0; }
/* Boot countdown: green Alien terminal text, synced to the boot chirps */
#boot-count {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(48px, 10vw, 96px); font-weight: 700; letter-spacing: .1em;
  color: #4ade80;
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.85);
  text-shadow: 0 0 18px rgba(74,222,128,.8), 0 0 60px rgba(74,222,128,.4), 2px 2px 0 rgba(0,0,0,0.9), -2px -2px 0 rgba(0,0,0,0.9), 2px -2px 0 rgba(0,0,0,0.9), -2px 2px 0 rgba(0,0,0,0.9);
  pointer-events: none; z-index: 5;
  opacity: 0;
}
#boot-count.on { opacity: 1; }
#boot-count.booted { animation: bootCountPop .3s ease-out; }
@keyframes bootCountPop {
  0% { transform: scale(.8); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
/* White flash on BOOTED */
#crt-boot.crt-whiteflash { animation: crtWhiteFlash .25s ease-out; }
@keyframes crtWhiteFlash {
  0% { filter: brightness(6); }
  100% { filter: brightness(1); }
}

.btn-signout {
  margin-left: auto; background: none; border: 1px solid var(--border);
  color: var(--muted); font-size: 12px; padding: 6px 10px; border-radius: 8px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.btn-signout:active { color: var(--text); border-color: var(--muted); }

/* ---- Chat ---- */
.chat-wrap { display: flex; flex-direction: column; height: calc(100dvh - 220px); min-height: 320px; }
.chat-log {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.chat-log::-webkit-scrollbar { display: none; }
.chat-msg {
  background: var(--glass-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px; font-size: 14px; max-width: 92%;
}
.chat-msg .chat-meta { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.chat-msg .chat-nick { font-weight: 700; }
.chat-msg.mine { align-self: flex-end; border-color: var(--accent); }
.chat-msg.system {
  align-self: center; background: none; border: none;
  color: var(--muted); font-size: 12.5px; font-style: italic; text-align: center;
}
.chat-input-row { display: flex; gap: 8px; padding: 10px 12px 16px; }
.chat-input-row input {
  flex: 1; min-width: 0; background: var(--glass-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; color: var(--text); font-size: 14px;
}
.chat-input-row .btn-primary { flex-shrink: 0; }
/* Paper-plane send button (circle icon, Messenger style) */
.chat-send-btn {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); border: none; color: #fff; cursor: pointer;
  padding: 0;
}
.chat-send-btn:active { transform: scale(0.92); }
.chat-send-btn svg { width: 20px; height: 20px; margin-left: 2px; }
.lobby-chat-input-row .chat-send-btn { width: 36px; height: 36px; }
.lobby-chat-input-row .chat-send-btn svg { width: 17px; height: 17px; }
@media (max-width: 768px) {
  .chat-input-row { gap: 6px; padding: 8px 10px 14px; }
  .chat-input-row .chat-tool { padding: 8px 8px; font-size: 12px; }
  .chat-input-row input { padding: 10px 8px; font-size: 14px; }
  .chat-input-row .btn-primary { padding: 10px 12px; font-size: 14px; }
}

/* ---- Account ---- */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 6px; }
.profile-grid > div { display: flex; flex-direction: column; gap: 2px; }
.profile-grid .muted { font-size: 11.5px; }
.profile-grid strong { font-size: 14.5px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px !important; }
.field {
  width: 100%; box-sizing: border-box; background: var(--glass-card);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; color: var(--text); font-size: 14px; margin-bottom: 10px;
  font-family: inherit;
}
textarea.field { resize: vertical; }

/* ---- Review queue ---- */
.seg-row { display: flex; gap: 8px; margin: 10px 0; }
.seg-row .seg { opacity: .55; }
.seg-row .seg.active { opacity: 1; border-color: var(--accent); color: var(--text); }
.review-item {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; background: var(--glass-card);
}
.review-item .review-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.review-item .review-subject { font-weight: 700; font-size: 14px; }
.review-item .review-from { font-size: 12px; color: var(--muted); }
.review-item .review-body { font-size: 13.5px; margin: 8px 0; white-space: pre-wrap; }
.review-actions { display: flex; gap: 8px; }
.status-pill {
  font-size: 11px; padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.status-pill.open { color: #ffb020; border-color: #ffb020; }
.status-pill.reviewed { color: #35e07a; border-color: #35e07a; }
.status-pill.resolved { color: var(--muted); }

/* ---------- Threaded inbox ---------- */
.thread-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; color: var(--text);
}
.thread-item:active { transform: scale(.99); }
.thread-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.thread-subject { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.thread-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 0 4px; }
.thread-subject-lg { font-size: 18px; font-weight: 800; }
.thread-conv { margin: 12px 0; }
.thread-msg {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
}
.thread-op { border-color: var(--accent); }
.thread-msg-head { display: flex; gap: 8px; align-items: baseline; font-size: 12px; margin-bottom: 4px; }
.thread-msg-nick { font-weight: 700; }
.thread-msg-rank { color: var(--accent); }
.thread-msg-time { color: var(--muted); margin-left: auto; white-space: nowrap; }
.thread-msg-body { white-space: pre-wrap; font-size: 14px; }
.thread-reply { margin-top: 12px; }
.thread-reply .field { margin-bottom: 8px; }

.muted { color: var(--muted); font-size: 13px; }

/* ---- Verification card ---- */
.verify-rows { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.verify-row { display: flex; justify-content: space-between; align-items: center; }
.verify-row .muted { font-size: 14px; }
.verify-row strong { font-size: 14px; }
.v-ok { color: #4ade80; }
.v-bad { color: #f87171; }
.v-warn { color: #fbbf24; font-weight: 600; }
.v-link { color: #4ade80; text-decoration: none; }
.v-link:hover { text-decoration: underline; }
.btn-verify {
  width: 100%; padding: 12px; border: none; border-radius: 10px;
  background: #16a34a; color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer; margin-top: 8px;
}
.btn-verify:active { background: #15803d; }

/* ---- Slide-out verification panel ---- */
.verify-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
  z-index: 50; transform: translateX(105%);
  transition: transform .35s cubic-bezier(.32,.72,.35,1);
  background: var(--glass-card);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid var(--border);
  padding: 24px 20px;
  overflow-y: auto;
}
.verify-panel.open { transform: translateX(0); }
.verify-panel.closing { transform: translateX(105%); }
.verify-panel-inner { position: relative; padding-top: 24px; }
.verify-close {
  position: absolute; top: 0; right: 0;
  background: none; border: none; color: var(--muted);
  font-size: 20px; cursor: pointer; padding: 4px;
}
.verify-code {
  font-family: monospace; font-size: 22px; font-weight: 700;
  letter-spacing: 2px; text-align: center; color: var(--accent);
  background: rgba(0,0,0,.3); border: 1px dashed var(--border);
  border-radius: 8px; padding: 12px; margin: 12px 0;
  user-select: all;
}
.verify-link {
  display: block; text-align: center; color: var(--accent);
  font-size: 14px; margin: 8px 0 16px; text-decoration: none;
}
.verify-link:hover { text-decoration: underline; }
.btn-verify-check {
  width: 64px; height: 64px; border-radius: 50%; border: none;
  background: #16a34a; color: #fff; font-size: 28px; font-weight: 700;
  cursor: pointer; display: block; margin: 16px auto 0;
}
.btn-verify-check:active { background: #15803d; }
.btn-verify-check:disabled { opacity: .5; cursor: default; }
.v-error { color: #f87171; font-size: 13px; text-align: center; margin-top: 12px; min-height: 18px; }

/* ---- FaceID success animation (Apple-style) ---- */
#v-panel-success { text-align: center; padding-top: 40px; }
.faceid { width: 120px; height: 120px; margin: 0 auto; color: #4ade80; }
.faceid-svg { width: 100%; height: 100%; transform-box: fill-box; transform-origin: center; }
.faceid-face {
  stroke-dasharray: 300; stroke-dashoffset: 300;
  animation: faceDraw .9s ease forwards;
}
.faceid-scan { opacity: 0; animation: faceScan 1s ease-in-out .25s forwards; }
.faceid-check {
  stroke-dasharray: 60; stroke-dashoffset: 60;
  opacity: 0; animation: faceCheck .45s cubic-bezier(.34,1.56,.64,1) 1.1s forwards;
}
@keyframes faceDraw { to { stroke-dashoffset: 0; } }
@keyframes faceScan {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  70% { opacity: 1; transform: translateY(44px); }
  100% { opacity: 0; transform: translateY(44px); }
}
@keyframes faceCheck {
  0% { stroke-dashoffset: 60; opacity: 0; }
  1% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
#v-panel-success .faceid-face { animation: faceDraw .9s ease forwards, faceFade .5s ease 1.05s forwards; }
@keyframes faceFade { to { opacity: .3; } }
#v-panel-success .faceid-svg { animation: facePop .55s ease 1.1s; }
@keyframes facePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.verify-passed {
  color: #4ade80; font-size: 20px; font-weight: 700; margin-top: 20px;
  animation: passedIn .5s ease 1.3s both;
}
@keyframes passedIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#v-panel-form.fading { animation: formFade .4s ease forwards; }
@keyframes formFade { to { opacity: 0; } }

/* ---- Splash thumbprint gate (tap to scan, then morphs to FaceID) ---- */
.splash-thumb {
  color: #4ade80;
  margin: 0 auto 24px;
  cursor: pointer;
  animation: thumbIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  filter: drop-shadow(0 0 12px rgba(74, 222, 128, 0.4));
  transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1), opacity .5s ease;
}
.splash-thumb .thumb-svg {
  width: 120px; height: 120px;
  animation: thumbPulse 2.2s ease-in-out infinite;
}
@keyframes thumbIn {
  0% { opacity: 0; transform: scale(.7); filter: blur(4px); }
  60% { opacity: 1; transform: scale(1.05); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes thumbPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.3)); }
  50% { filter: drop-shadow(0 0 20px rgba(74, 222, 128, 0.6)); }
}
.splash-thumb .thumb-print {
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: thumbDraw 1.1s ease forwards;
}
@keyframes thumbDraw { to { stroke-dashoffset: 0; } }
.splash-thumb .thumb-scan { opacity: 0; }
.splash-thumb.scanning .thumb-scan {
  opacity: 1;
  animation: thumbScan 1.1s ease-in-out forwards;
}
.splash-thumb.scanning .thumb-svg {
  animation: thumbScanGlow .55s ease-in-out 2;
}
@keyframes thumbScan {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  75% { opacity: 1; transform: translateY(58px); }
  100% { opacity: 0; transform: translateY(58px); }
}
@keyframes thumbScanGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.3)); }
  50% { filter: drop-shadow(0 0 26px rgba(74, 222, 128, 0.85)); }
}
.splash-thumb-hint {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; color: #6b6680; text-align: center; margin-top: 16px;
  animation: sp-blink 1.6s steps(1) infinite;
}
.splash-thumb.morph-out {
  transform: translateY(-46px) scale(.55);
  opacity: 0;
  pointer-events: none;
}
.splash-thumb.hidden { display: none; }

/* ---- Splash FaceID (top center, above the typing sequence) ---- */
.splash-faceid {
  color: #4ade80;
  margin: 0 auto 24px;
  animation: splashFaceidIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  filter: drop-shadow(0 0 12px rgba(74, 222, 128, 0.4));
}
.splash-inner { position: relative; }
@keyframes splashFaceidIn {
  0% { opacity: 0; transform: scale(.7) rotate(-8deg); filter: blur(4px); }
  60% { opacity: 1; transform: scale(1.05) rotate(2deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.splash-faceid .faceid-svg {
  animation: faceidPulse 2.5s ease-in-out infinite;
}
@keyframes faceidPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.3)); }
  50% { filter: drop-shadow(0 0 20px rgba(74, 222, 128, 0.6)); }
}

/* ================= v23: old-site 1:1 rebuild ================= */
/* Old-site palette */
:root {
  --pill-green: #00e676;
  --pill-green-dim: #00b35c;
  --pill-red: #c62828;
  --pill-blue: #4a9eff;
  --discord-blurple: #5865F2;
}

/* ---- Green/red/blue pill buttons (old site) ---- */
.pill-btn {
  display: inline-block; border: none; cursor: pointer;
  background: var(--pill-green); color: #fff;
  font-size: 15px; font-weight: 700;
  padding: 10px 26px; border-radius: 999px;
  text-decoration: none; text-align: center;
}
.pill-btn:active { background: var(--pill-green-dim); }
.pill-btn:disabled { opacity: .5; }
.pill-btn.blue { background: var(--pill-blue); }
.pill-btn.red { background: var(--pill-red); }

/* status pills: OK / PASS green, NO / FAIL red */
.st-pill {
  display: inline-block; font-size: 13px; font-weight: 800;
  padding: 5px 14px; border-radius: 999px; color: #fff;
  background: rgba(0,230,118,0.18); border: 1px solid var(--pill-green); white-space: nowrap;
}
.st-pill.no { background: var(--pill-red); }
.st-pill.alpha { background: rgba(139,92,246,0.22); border: 1px solid rgba(139,92,246,0.65); color: #c4b5fd; }
.st-txt-link { color: var(--pill-green); font-size: 13px; text-decoration: none; }
.st-txt-link:hover { text-decoration: underline; }

/* ---- Header: clock + action buttons ---- */
.header-clock { text-align: center; line-height: 1.25; flex-shrink: 0; position: relative; background: none; border: 1px solid transparent; border-radius: 12px; padding: 4px 14px; cursor: pointer; color: inherit; font: inherit; }
.header-clock .hc-time { font-size: 15px; font-weight: 800; display: block; }
.header-clock .hc-date { font-size: 11px; color: var(--muted); display: block; }
.header-clock:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
.header-clock:hover .hc-date { color: var(--text); }
.header-clock:active { transform: scale(.96); }
/* ---- Notifications (v74) ---- */
.header-icons { display: flex; gap: 2px; align-items: center; flex-shrink: 0; position: relative; }
#notif-bell { position: relative; }
#notif-bell svg { width: 22px; height: 22px; }
.notif-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #ff4444; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.notif-badge.hidden { display: none; }
#mobile-nav-notif .notif-badge { position: static; margin-left: auto; }
#notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  width: 340px; max-width: calc(100vw - 24px); max-height: 440px;
  display: flex; flex-direction: column;
  background: rgba(23, 18, 49, 0.92); border: 1px solid var(--border); border-radius: 16px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0,0,0,.55); overflow: hidden;
  transform-origin: top right;
}
#notif-panel.hidden { display: none; }
#notif-panel:not(.hidden) { animation: pop-in .2s cubic-bezier(.34,1.4,.64,1); }
.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 15px;
}
#notif-list { overflow-y: auto; padding: 8px; }
.notif-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px;
  background: none; border: none; cursor: pointer;
  color: var(--text); font-family: inherit;
}
.notif-item:hover { background: rgba(255,255,255,0.06); }
.notif-item.unread { background: rgba(139,92,246,0.10); }
.notif-item.unread:hover { background: rgba(139,92,246,0.16); }
.notif-title { display: block; font-weight: 700; font-size: 14px; }
.notif-body { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.notif-time { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; opacity: .8; }
@media (max-width: 899px) { #notif-bell { display: none; } }
.header-icons button {
  background: none; border: none; color: var(--muted);
  font-size: 19px; padding: 8px; cursor: pointer;
}
.header-icons button:active { color: var(--text); }
.app-header .btn-signout { margin-left: 0; }

/* ---- Headquarters (Home) ---- */
.hq-title { font-size: 26px; font-weight: 800; margin: 18px 16px 4px; }
.hq-sub { color: var(--muted); font-size: 14px; margin: 0 16px 8px; line-height: 1.5; }

/* ---- Chat, old HQ style: grouped messages, nick + time headers ---- */
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 10px; }
.chat-title { font-size: 17px; font-weight: 800; }
.chat-head .btn-ghost { margin-top: 0; padding: 6px 12px; font-size: 13px; }
.chat-head .btn-ghost.on { border-color: var(--neg); color: var(--neg); }
.chat-group { margin-bottom: 14px; }
.chat-group-head {
  font-size: 13px; font-weight: 800; color: var(--text);
  margin-bottom: 2px;
}
.chat-group-head .chat-time { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
.chat-group .chat-line { font-size: 14.5px; line-height: 1.45; padding: 1px 0; word-wrap: break-word; display: flex; align-items: center; gap: 8px; }
.chat-del {
  margin-left: auto; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--neg); background: none; color: var(--neg);
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
}
.chat-del:active { background: var(--neg); color: #fff; }

/* ---- Personal glass calendar ---- */
.header-clock { cursor: pointer; }
.cal-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 3, 12, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 16px;
  overscroll-behavior: contain;
}
.cal-overlay.hidden { display: none; }
.cal-card {
  width: min(430px, 94vw); max-height: 88vh; overflow-y: auto;
  background: var(--glass-card);
  background: color-mix(in srgb, var(--glass-card) 30%, rgb(13, 10, 26) 70%);
  border: 1px solid var(--border); border-radius: 18px;
  padding: 14px 14px 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  overscroll-behavior: contain;
}
.cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.cal-title { flex: 1; text-align: center; font-size: 17px; font-weight: 800; }
.cal-today-btn { margin: 0 0 0 8px; padding: 4px 10px; font-size: 12px; }
.cal-nav {
  width: 34px; height: 34px; border-radius: 10px; font-size: 20px; line-height: 1;
  background: none; border: 1px solid var(--border); color: var(--text); cursor: pointer;
}
.cal-close {
  width: 34px; height: 34px; border-radius: 10px; font-size: 15px;
  background: none; border: 1px solid var(--border); color: var(--muted); cursor: pointer;
}
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
  aspect-ratio: 1; border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--text); font-size: 13.5px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 0;
}
.cal-cell:hover { border-color: var(--border); }
.cal-cell.blank { visibility: hidden; }
.cal-cell.today { border-color: var(--accent); font-weight: 800; }
.cal-cell .cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cal-cell .cal-dot.org { background: #f5c542; }
.cal-event.org { border-color: rgba(245, 197, 66, 0.55); }
.cal-org-tag {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 1px;
  border-radius: 6px; padding: 3px 8px; margin-bottom: 6px; color: #0b0614;
}
.cal-org-tag.live { background: #22c55e; }
.cal-org-tag.ptu { background: #f59e0b; }
.cal-org-tag.evocati { background: #a78bfa; }
.cal-sync {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}
.cal-sync .btn-ghost { padding: 4px 12px; font-size: 12px; }
.cal-ev-link { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--accent); }
.cal-day-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-day-head .btn-ghost { margin-top: 0; padding: 6px 12px; font-size: 13px; }
#cal-day-title { font-size: 16px; font-weight: 800; }
.cal-day-title-wrap { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.cal-day-nav { width: 28px; height: 28px; font-size: 16px; }
.cal-day-events { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cal-empty { color: var(--muted); font-size: 13.5px; }
.cal-event {
  background: var(--glass-bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px;
}
.cal-event .cal-ev-title { font-weight: 700; font-size: 14.5px; }
.cal-event .cal-ev-time { font-size: 12.5px; color: var(--accent); margin-top: 2px; }
.cal-event .cal-ev-notes { font-size: 13px; color: var(--muted); margin-top: 4px; white-space: pre-wrap; }
.cal-event .cal-ev-actions { display: flex; gap: 8px; margin-top: 8px; }
.cal-event .cal-ev-actions button {
  background: none; border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 4px 12px; font-size: 12.5px; cursor: pointer;
}
.cal-event .cal-ev-actions .cal-ev-del { border-color: var(--neg); color: var(--neg); }
.cal-form { display: flex; flex-direction: column; gap: 8px; }
.cal-form input, .cal-form textarea {
  background: var(--glass-bg2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); padding: 10px 12px; font-size: 14px; font-family: inherit; resize: vertical;
}
.cal-form input::placeholder, .cal-form textarea::placeholder { color: var(--muted); }
.cal-form-row { display: flex; gap: 8px; }
.cal-form-row .btn-ghost { margin-top: 0; }
.chat-log { gap: 0; }
.chat-msg { display: none; } /* replaced by grouped rendering */

/* ---- Timestamp converter (Epoch) ---- */
.ts-conv input[type="datetime-local"] {
  width: 100%; box-sizing: border-box;
  background: var(--glass-bg2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text);
  font-size: 15px; padding: 12px; margin-bottom: 14px;
  color-scheme: dark;
}
.ts-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.ts-row .ts-label { color: var(--muted); }
.ts-row .ts-code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--text); }
.ts-row .ts-prev { color: var(--text); grid-column: 1; }
.ts-row .pill-btn { grid-column: 2; grid-row: 1 / span 2; padding: 6px 16px; font-size: 13px; }

/* ---- World clock ---- */
.wc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.wc-cols h4 { font-size: 14px; margin-bottom: 8px; text-align: center; }
.wc-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.wc-row .wc-tz { font-weight: 700; }
.wc-row .wc-time { font-variant-numeric: tabular-nums; color: var(--muted); }

/* ---- Account: old two-card layout ---- */
.acct-profile { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.acct-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.acct-name { font-size: 20px; font-weight: 800; }
.acct-rank { font-size: 15px; font-weight: 700; color: var(--text); }
.acct-sub { font-size: 13px; color: var(--muted); }
.acct-rows { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; font-size: 14.5px; }
.acct-edit label { display: block; font-size: 14px; margin: 10px 0 6px; }
.acct-edit .field { margin-bottom: 4px; }

/* verify instruction list (old site bullets) */
.verify-steps { margin: 12px 0 12px 20px; font-size: 14px; line-height: 1.55; color: var(--text); }
.verify-steps li { margin-bottom: 6px; }
.verify-steps a { color: var(--pill-green); text-decoration: none; }
.verify-steps a:hover { text-decoration: underline; }
.verify-code-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 15px; flex-wrap: wrap; }
.verify-code-row .mono { font-size: 16px; font-weight: 700; }
.v-step { display: flex; gap: 12px; margin: 14px 0; }
.v-step-n {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--pill-green); color: #0b1020;
  font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.v-step-body { flex: 1; min-width: 0; }
.v-step-title { font-weight: 700; font-size: 14.5px; margin-bottom: 8px; }
.v-step .field { margin: 0 0 4px; }
.v-link-btn { display: inline-block; margin: 4px 0; text-decoration: none; }
.v-note { font-size: 12.5px; margin: 6px 0 0; }
.v-linked { margin: 12px 0; border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px; }
.v-linked-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.v-linked-row:last-child { border-bottom: none; }
.v-linked-row .mono { font-weight: 700; }

/* ---- Admin verification dashboard ---- */
.admin-title { font-size: 20px; font-weight: 800; margin: 16px 16px 10px; }
.admin-bar { display: flex; gap: 10px; align-items: center; margin: 0 16px 12px; flex-wrap: wrap; }
.admin-bar .nonce { margin-left: auto; font-size: 12px; color: var(--muted); }
.admin-table-wrap { overflow-x: auto; margin: 0 8px; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; }
.admin-table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); padding: 8px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-table td { padding: 9px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table .mono { font-size: 12px; }
.admin-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.admin-history { margin: 16px; font-size: 13.5px; }
.admin-history h4 { font-size: 16px; margin-bottom: 8px; }
.admin-history ul { margin-left: 20px; }
.admin-history li { margin-bottom: 5px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }

/* v417: verify dashboard polish. Skipped-check pill, card margin trims,
   and the phone restack (rows become per-member blocks under 760px). */
.st-pill.skip { background: rgba(148,163,184,0.15); border: 1px solid var(--border); color: var(--muted); }
#cmd-pane-verify .admin-title { margin: 0 0 10px; }
#cmd-pane-verify .admin-bar { margin: 0 0 12px; }
#cmd-pane-verify .admin-table-wrap { margin: 0; }
#cmd-pane-verify .admin-history { margin: 16px 0 0; }
@media (max-width: 760px) {
  table.admin-table { min-width: 0; }
  .admin-table thead { display: none; }
  .admin-table tbody tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--border); }
  .admin-table td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 5px 2px; border-bottom: none; text-align: right; }
  .admin-table td::before { content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); text-align: left; }
  .admin-table td[colspan] { display: block; text-align: center; }
  .admin-table td[colspan]::before { display: none; }
  .admin-actions { flex-direction: row; align-items: center; }
}


/* ============ Desktop / wide-screen scaling (v25) ============ */
/* Mobile-first below 900px stays exactly as designed. Wider screens spread out. */
@media (min-width: 900px) {

  /* Full-bleed header: spans the viewport, inner content aligns to the container.
     Negative margins (no width:100vw, so no scrollbar-width overflow). The
     overflow-x:clip lives on main, not #app, so this bleed is never clipped. */
  .app-header {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 20px;
    padding-right: 20px;
  }

  main { padding: 0 20px 28px; }

  /* Headquarters */
  #tab-home { padding: 0 8px; }
  #tab-home .hq-title, #tab-home .hq-sub { margin-left: 20px; margin-right: 20px; }

  /* Tools: three columns */
  .tool-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 20px; }

  /* Guides: two columns */
  #guide-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 20px; }
  #guide-list .guide-card { margin: 0; }

  /* Roster: two columns */
  .roster-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; padding: 0 20px; }

  /* Fleet images side by side */
  .fleet-grid { grid-template-columns: 1fr 1fr; padding: 0 20px; }

  /* Chat stays a readable width */
  .chat-wrap { max-width: 780px; margin: 0 auto; }

  /* Account: cards in two columns via the acct-grid wrapper */
  .acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: start; padding: 0 8px; }
  .acct-grid .card { margin: 12px 4px; }
  #acct-signout-card { grid-column: 1 / -1; text-align: center; }
  .acct-subsect { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
  .acct-subsect h4 { margin: 0 0 8px; font-size: 14px; }

  /* Admin table gets the room */
  .admin-table-wrap { margin: 0 8px; }
}

/* ---- Command: Operations + Ledger (v27) ---- */
.ledger-balance {
  font-size: 34px; font-weight: 800; color: var(--text);
  margin: 4px 0 12px; font-variant-numeric: tabular-nums;
}
.ledger-balance small { font-size: 13px; font-weight: 400; color: var(--muted); }
.table-wrap { overflow-x: auto; margin: 0 -2px; }
.ops-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ops-table th, .ops-table td {
  padding: 8px 6px; border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top;
}
.ops-table th {
  color: var(--muted); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .5px; white-space: nowrap;
}
.ops-table td.num, .ops-table th.num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ops-table tr.op-row { cursor: pointer; }
.ops-table tr.op-row:hover { background: var(--glass-bg2); }
.amt-pos { color: var(--pos); }
.amt-neg { color: var(--neg); }
.op-card { cursor: pointer; }
.op-card:hover { border-color: var(--accent); }
.op-status { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border);
  color: var(--muted); }
.op-status.open { color: var(--pos); border-color: var(--pos); }
.op-status.closed { color: var(--muted); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-sub { font-size: 14px; margin: 14px 0 8px; color: var(--text); }
.check-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text); margin-bottom: 10px;
}
.check-row input { width: 18px; height: 18px; }
.btn-ghost.danger { border-color: var(--neg); color: var(--neg); }
select.field { font-family: inherit; }
label.muted { display: block; font-size: 12px; margin-bottom: 4px; }
/* payout preview grid */
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pv-cell {
  background: var(--glass-bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px;
}
.pv-cell .pv-label {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px;
}
.pv-cell .pv-val {
  font-size: 16px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.pv-cell .pv-val.pos { color: var(--pos); }
.pv-cell .pv-val.neg { color: var(--neg); }
.op-head-title { font-size: 19px; font-weight: 800; color: var(--text); }
.op-head-meta { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
@media (min-width: 900px) {
  #ops-root .card { margin-left: 20px; margin-right: 20px; }
  #op-back, #close-back { margin-left: 20px; }
  .pv-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Headquarters hub (v57) ---- */
.hq-announce {
  background: #0a0a0d;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 4px solid #dc2626;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 4px 16px 4px;
  color: #f5f5f7;
  font-size: 14px;
  line-height: 1.5;
}
.hq-announce-label {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.65); margin-bottom: 6px; text-transform: uppercase;
}
.hq-announce .btn, .hq-announce .btn-ghost {
  color: #f5f5f7; border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
}
.hq-health {
  background: rgba(80, 8, 8, 0.55);
  border: 1px solid rgba(255, 68, 68, 0.6);
  border-left: 4px solid #ff4444;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 4px 16px 12px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.hq-health-title {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: #ff6b6b; margin-bottom: 6px; text-transform: uppercase;
}
.hq-health ul { margin: 0; padding-left: 18px; }
.hq-health li { margin: 4px 0; }
.hq-health li strong { color: #ffb3b3; }
/* System Alerts sub-tab (Commander) */
.sysalert-item {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(80, 8, 8, 0.45);
  border: 1px solid rgba(255, 68, 68, 0.45);
  border-left: 4px solid #ff4444;
  border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
  font-size: 13px; line-height: 1.5;
}
.sysalert-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 4px;
  background: #ff4444; box-shadow: 0 0 8px rgba(255, 68, 68, 0.8);
}
.sysalert-text { flex: 1; min-width: 0; }
.sysalert-text strong { color: #ffb3b3; }
.hq-event { margin-bottom: 10px; }
.hq-ev-time { color: var(--accent); font-size: 13px; font-weight: 700; margin: 2px 0 8px; }
.hq-rsvp-counts { display: flex; gap: 14px; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
.hq-rsvp-counts strong { color: var(--text); }
.rsvp-row { display: flex; gap: 8px; margin-top: 8px; }
.hq-rsvp-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 8px 0; }
.hq-rsvp-col { text-align: center; padding: 8px 4px; border-radius: 8px; background: var(--glass-card); border: 1px solid var(--border); }
.hq-rsvp-head { font-size: 12px; font-weight: bold; margin-bottom: 4px; }
.hq-rsvp-num { font-size: 20px; font-weight: bold; margin-bottom: 6px; }
.hq-rsvp-who { font-size: 12px; line-height: 1.4; min-height: 1em; }
.hq-op-lead { font-size: 13px; margin: 6px 0; color: var(--text); }
.hq-op-lead .op-lead-link { color: var(--accent); text-decoration: none; font-weight: bold; }
.hq-op-lead .op-lead-link:hover { text-decoration: underline; }
.hq-phase-badge {
  display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: 12px; font-weight: bold; margin: 6px 0;
}
.phase-scheduled { background: rgba(127,140,255,0.15); color: #a5b4fc; border: 1px solid #a5b4fc; }
.phase-preop { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid #fbbf24; }
.phase-active { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid #4ade80; }
.phase-endphase { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid #fb923c; }
.phase-completed { background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid #94a3b8; }
/* Source badge (v400): marks content mirrored in from Discord. */
.src-badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px; vertical-align: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: rgba(88, 101, 242, .18); color: #a5b0ff; border: 1px solid rgba(88, 101, 242, .65);
}
.discord-post-toggle {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  margin: 10px 0; cursor: pointer;
}
.discord-post-toggle input { width: 16px; height: 16px; accent-color: #5865f2; flex: none; }
.hq-phase-ctl { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.hq-phase-ctl .btn-sm { white-space: nowrap; overflow: visible; min-width: 100px; }

/* ---- Operation lobbies (bottom-right fixture) ---- */
#lobby-fixture { position: fixed; right: 16px; bottom: 16px; z-index: 70; }
#lobby-fixture.hidden { display: none !important; }
#lobby-panel {
  position: fixed; right: 16px; bottom: 84px; z-index: 60;
  width: 300px; max-width: calc(100vw - 32px); max-height: 400px;
  /* Bubble-pop: scale out of the FAB (bottom-right), springy overshoot on open */
  transform-origin: calc(100% - 28px) calc(100% - 40px);
  transform: scale(.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.5,-.15,.6,1), opacity .2s ease, visibility 0s linear .28s;
}
#lobby-panel.open {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .34s cubic-bezier(.34,1.45,.64,1), opacity .22s ease;
}
@media (prefers-reduced-motion: reduce) {
  #lobby-panel, #lobby-panel.open { transform: none; transition: opacity .15s ease, visibility 0s; }
}
.lobby-wrap {
  margin: 0;
  background: var(--glass-card); border: 1px solid var(--border); border-radius: 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  display: flex; flex-direction: column; max-height: 400px; overflow: hidden;
}
.lobby-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid rgba(127,140,255,0.2);
}
.lobby-title { font-weight: bold; font-size: 15px; }
.lobby-list { overflow-y: auto; padding: 8px; scrollbar-width: none; -ms-overflow-style: none; }
.lobby-list::-webkit-scrollbar { display: none; }
.lobby-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px; border-radius: 8px; cursor: pointer; margin-bottom: 4px;
  background: rgba(127,140,255,0.08);
}
.lobby-item:hover { background: rgba(127,140,255,0.15); }
.lobby-item-name { font-weight: 600; }
.lobby-item-count {
  background: rgba(74,222,128,0.2); color: #4ade80;
  padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: bold;
}
.lobby-empty { text-align: center; padding: 24px; color: #6b7280; font-style: italic; }
#lobby-dock {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 12px;
}
#lobby-dock.visible { display: flex; }
#lobby-fab {
  position: relative;
  height: 56px; padding: 0 18px 0 15px; border-radius: 999px;
  background: var(--glass-card); border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  transition: transform .15s ease, border-color .15s ease, color .15s ease;
}
#lobby-fab:hover { border-color: var(--accent); color: var(--accent); }
#lobby-fab:active { transform: scale(.94); }
#lobby-fab.active { border-color: var(--accent); color: var(--accent); }
.fab-label { font-size: 13px; font-weight: 700; white-space: nowrap; letter-spacing: .01em; }
.lobby-dot {
  position: absolute; top: -6px; right: -6px;
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #4ade80; color: #06210f; border: 2px solid rgba(23,18,49,0.97);
  font-size: 12px; font-weight: 800; line-height: 1;
}
.lobby-dot.hidden { display: none; }
/* Pulse ring when there is new activity while the bubble is closed */
@keyframes fab-pulse {
  0% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(139,92,246,.55); }
  70% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 14px rgba(139,92,246,0); }
  100% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(139,92,246,0); }
}
.fab-pulse { animation: fab-pulse 1.8s ease-out infinite; }

/* ---- Lobby modal ---- */
#lobby-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.7); display: flex;
  align-items: center; justify-content: center; padding: 16px;
}
#lobby-modal.hidden { display: none; }
#archive-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.7); display: flex;
  align-items: center; justify-content: center; padding: 16px;
}
#archive-modal.hidden { display: none; }
#archive-modal-body { overflow-y: auto; padding: 20px; scrollbar-width: none; -ms-overflow-style: none; }
#archive-modal-body::-webkit-scrollbar { display: none; }
#lobby-preview-modal {
  position: fixed; inset: 0; z-index: 1001;
  background: rgba(0,0,0,0.7); display: flex;
  align-items: center; justify-content: center; padding: 16px;
}
#lobby-preview-modal.hidden { display: none; }
#lobby-preview-body { overflow-y: auto; padding: 20px; scrollbar-width: none; -ms-overflow-style: none; }
#lobby-preview-body::-webkit-scrollbar { display: none; }
.lobby-modal-card {
  background: rgba(23,18,49,0.98); border: 1px solid rgba(127,140,255,0.3);
  border-radius: 16px; width: 100%; max-width: 500px; max-height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.lobby-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid rgba(127,140,255,0.2);
}
.lobby-modal-head h3 { margin: 0; }
#lobby-modal-body { overflow-y: auto; padding: 20px; scrollbar-width: none; -ms-overflow-style: none; }
#lobby-modal-body::-webkit-scrollbar { display: none; }
/* v391: nothing inside the scrolling lobby body may backdrop-blur.
   Android smears backdrop-filtered children across repaints and scroll
   frames; the modal card itself is already opaque. */
#lobby-modal-body { overscroll-behavior: contain; }
#lobby-modal-body .card { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Collapsible lobby sections (v388): header click folds the body;
   open state is kept client-side across heartbeat re-renders. */
.lobby-sec-head { cursor: pointer; }
.lobby-sec-chev { float: right; color: #9ca3af; font-size: 12px; margin-left: 8px; }
.lobby-sec.closed .lobby-sec-body { display: none; }
.lobby-sec.closed > .lobby-sec-head { margin-bottom: 0; }
/* Lobby roster rows (v388): single line, name/ship ellipsize, action
   button pinned right instead of wrapping underneath. */
.lobby-member-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.lobby-member-row .lmr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-member-row .lmr-ship { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-member-row .lobby-member-dot { flex-shrink: 0; }
.lobby-member-row button { margin-left: auto; flex-shrink: 0; }
.lobby-member {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-radius: 8px; margin-bottom: 6px;
  background: rgba(127,140,255,0.06);
}
.lobby-member.ready { border-left: 3px solid #4ade80; }
.lobby-member-name { font-weight: 600; }
.lobby-member-ship { font-size: 12px; color: #9ca3af; }
.lobby-member-status { font-size: 12px; }
.lobby-member-status.ready { color: #4ade80; font-weight: bold; }
.lobby-actions { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.lobby-ship-input { display: flex; gap: 8px; margin-top: 12px; }
.confirm-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.7); display: flex;
  align-items: center; justify-content: center; padding: 16px;
}
.confirm-card {
  background: var(--glass-card); border: 1px solid var(--border); border-radius: 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  padding: 24px; max-width: 400px; width: 100%; text-align: center;
}
.confirm-msg { margin: 0 0 20px 0; font-size: 15px; }
.confirm-btns { display: flex; gap: 12px; justify-content: center; }
.btn-confirm-yes {
  background: #16a34a; color: white; border: none; border-radius: 8px;
  padding: 10px 24px; font-weight: bold; cursor: pointer; font-size: 14px;
}
.btn-confirm-yes:hover { background: #15803d; }
.btn-confirm-no {
  background: #dc2626; color: white; border: none; border-radius: 8px;
  padding: 10px 24px; font-weight: bold; cursor: pointer; font-size: 14px;
}
.btn-confirm-no:hover { background: #b91c1c; }
.lobby-picker-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0.8); display: flex;
  align-items: center; justify-content: center; padding: 16px;
}
.lobby-picker-overlay.hidden { display: none; }
.ship-card.selected-green {
  border: 3px solid #16a34a !important;
  box-shadow: 0 0 12px rgba(22,163,74,0.5);
}
.lobby-chat-log {
  min-height: 100px; max-height: 180px; overflow-y: auto; padding: 10px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(127,140,255,0.3); border-radius: 8px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 6px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.lobby-chat-log:empty::after {
  content: "No messages yet. Say something!";
  color: #6b7280; font-style: italic; text-align: center; padding: 20px;
}
.lobby-chat-log::-webkit-scrollbar { display: none; }
.lobby-chat-input-row { display: flex; gap: 8px; }
.lobby-chat-input-row input { flex: 1; min-width: 0; }
.lobby-chat-input-row .btn-primary { flex-shrink: 0; }
.btn-lobby-ready {
  background: #16a34a; color: white; border: none; border-radius: 8px;
  padding: 10px 20px; font-weight: bold; cursor: pointer; font-size: 14px;
}
.btn-lobby-ready:hover { background: #15803d; }
.btn-lobby-ready:disabled { opacity: 0.6; }
.btn-lobby-notready {
  background: #dc2626; color: white; border: none; border-radius: 8px;
  padding: 10px 20px; font-weight: bold; cursor: pointer; font-size: 14px;
}
.btn-lobby-notready:hover { background: #b91c1c; }
.btn-lobby-notready:disabled { opacity: 0.6; }
.op-edit-form { margin-top: 12px; padding: 12px; border-radius: 8px; background: rgba(0,0,0,0.2); }
.op-edit-form .field { width: 100%; margin-bottom: 8px; }
.rsvp-names { margin-top: 10px; font-size: 13px; }
.rsvp-name-group { margin-bottom: 4px; }
.rsvp-going { color: #4ade80; }
.rsvp-maybe { color: #fbbf24; }
.rsvp-cant { color: #f87171; }
.rsvp-btn {
  flex: 1; padding: 9px 0; border-radius: 10px; cursor: pointer;
  background: rgba(127, 140, 255, 0.08); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; font-weight: 700;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.rsvp-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.rsvp-btn:disabled { opacity: 0.6; cursor: default; }
.hq-ev-done { font-size: 12px; color: var(--muted); margin-top: 10px; }
.hq-attend { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.hq-attend .btn-ghost { margin-top: 0; }
.hq-attend-form { margin-top: 10px; }
.hq-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #23a55a; margin-right: 8px; box-shadow: 0 0 8px #23a55a;
}
.hq-online { font-size: 15px; margin-bottom: 10px; }
.hq-ingame-title {
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); margin: 12px 0 6px;
}
.hq-ingame { list-style: none; margin: 0; padding: 0; }
.hq-ingame li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--border); font-size: 14px;
}
.hq-ingame li span { color: var(--muted); font-size: 12px; }
.hq-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 12px; }
.hq-stat {
  background: rgba(23, 18, 49, 0.85); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 8px; text-align: center;
}
.hq-stat-num { display: block; font-size: 28px; font-weight: 800; color: var(--text); }
.hq-stat-label {
  display: block; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); margin-top: 4px;
}
.hq-leader { list-style: none; margin: 0; padding: 0; }
.attn-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.attn-nav #attn-month-label { font-weight: bold; font-size: 14px; }
.attn-slide { transition: transform 0.3s ease, opacity 0.3s ease; }
.attn-slide.slide-left { transform: translateX(-30px); opacity: 0; }
.attn-slide.slide-right { transform: translateX(30px); opacity: 0; }
.attn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.attn-head h3 { margin-bottom: 0; }
.attn-head .attn-nav { display: flex; align-items: center; gap: 8px; }
.hq-leader li {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px;
}
.hq-leader li:first-child { border-top: none; }
.hq-rank {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: rgba(139, 92, 246, 0.18); border: 1px solid var(--accent);
  color: var(--text); font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.hq-nick { flex: 1; font-weight: 700; }
.hq-count { color: var(--muted); font-size: 13px; }
.act-item { display: flex; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.act-icon {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: rgba(139, 92, 246, 0.15); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 14px; font-weight: 800;
}
.act-body { flex: 1; min-width: 0; }
.act-title { font-size: 14px; font-weight: 700; color: var(--text); }
.act-detail { font-size: 13px; color: var(--muted); margin-top: 2px; }
.act-time { font-size: 12px; color: var(--muted); margin-top: 4px; }
.pol-card { margin-bottom: 12px; }
.pol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pol-grid figure { margin: 0; }
.pol-grid img { width: 100%; border-radius: 8px; display: block; }
.pol-grid figcaption { font-size: 11px; color: var(--muted); margin-top: 4px; }
.ev-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ev-dates label { font-size: 12px; color: var(--muted); display: block; }
.ev-dates .field { margin-top: 4px; }
.fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.fb-grid label { font-size: 12px; color: var(--muted); display: block; }
.fb-grid .field { margin-top: 4px; width: 100%; }
.fb-card > label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 10px; }
.fb-card > label .field { margin-top: 4px; width: 100%; }
.fb-meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.fb-type { font-size: 11px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.fb-type-bug { border-color: #e11d48; color: #fda4af; }
.fb-type-suggestion { border-color: #38bdf8; color: #7dd3fc; }
.fb-type-praise { border-color: #22c55e; color: #86efac; }
/* Guide video embeds (16:9 responsive) */
.guide-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 14px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.guide-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ---- Fleet Manager (Account tab) ---- */
.fleet-filter-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.fleet-label { font-size: 13px; color: var(--muted); font-weight: 700; min-width: 92px; }
.fleet-select { flex: 1; }
.fleet-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; margin-top: 8px; }
.fleet-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass-bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.fleet-info { flex: 1; min-width: 0; }
.fleet-name { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
.fleet-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.fleet-mfg { color: var(--accent); font-weight: 700; letter-spacing: .5px; }
.fleet-meta { font-size: 12px; color: var(--muted); margin-top: 2px; font-style: italic; }
.fleet-add-btn { margin-top: 0; padding: 10px 20px; flex-shrink: 0; }
.fleet-count { color: var(--accent); font-weight: 700; }
.fleet-cart-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--glass-bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
}
.fleet-stepper { display: flex; align-items: center; gap: 6px; }
.fleet-step-btn { margin-top: 0; padding: 8px 14px; font-size: 16px; line-height: 1; }
.fleet-qty { font-size: 15px; font-weight: 800; color: var(--text); min-width: 26px; text-align: center; }
.fleet-acq-toggle { display: flex; gap: 6px; }
.fleet-toggle-btn { margin-top: 0; padding: 8px 14px; font-size: 13px; opacity: .55; }
.fleet-toggle-btn.active { opacity: 1; border-color: var(--accent); background: rgba(139, 92, 246, .18); color: var(--text); }
.fleet-remove-btn { margin-top: 0; padding: 8px 14px; font-size: 13px; border-color: var(--neg); color: var(--neg); }
.fleet-delete-btn { margin-top: 0; padding: 8px 14px; font-size: 13px; border-color: var(--neg); color: var(--neg); }
#fleet-commit { width: 100%; margin-top: 10px; padding: 14px; font-size: 15px; }
.fleet-roster-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.fleet-edit-btn { margin-top: 0; padding: 8px 20px; font-size: 13px; }
.fleet-row-edit { flex-wrap: wrap; }
.fleet-row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; margin-top: 6px; }
.fleet-badges { display: flex; gap: 6px; margin-top: 6px; }
.fleet-badge { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; }
.fleet-badge-pledged { background: rgba(139, 92, 246, .25); color: var(--accent); border: 1px solid var(--accent); }
.fleet-badge-ingame { background: rgba(53, 224, 122, .15); color: var(--pos); border: 1px solid var(--pos); }
.fleet-badge-loaner { background: rgba(56, 189, 248, .15); color: #38bdf8; border: 1px solid #38bdf8; }
.fleet-op-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  background: rgba(53, 224, 122, .2); color: var(--pos); border: 1px solid var(--pos);
  padding: 3px 9px; border-radius: 20px; margin-left: 6px; vertical-align: middle;
}

/* ---- Chat fixture: floating bottom-left (v63) ---- */
#chat-fixture.hidden { display: none !important; }
#chat-dock {
  position: fixed; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 12px;
}
#chat-fab {
  position: relative;
  height: 56px; padding: 0 18px 0 15px; border-radius: 999px;
  background: var(--glass-card); border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  transition: transform .15s ease, border-color .15s ease, color .15s ease;
}
#chat-fab:hover { border-color: var(--accent); color: var(--accent); }
#chat-fab:active { transform: scale(.94); }
#chat-fab.active { border-color: var(--accent); color: var(--accent); }
.chat-dot {
  position: absolute; top: 9px; right: 9px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--neg); border: 2px solid #0b0614;
}
#chat-panel {
  position: fixed; left: 16px; bottom: 84px; z-index: 60;
  width: 380px; max-width: calc(100vw - 32px);
  /* Bubble-pop: scale out of the FAB (bottom-left), springy overshoot on open */
  transform-origin: 28px calc(100% - 40px);
  transform: scale(.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.5,-.15,.6,1), opacity .2s ease, visibility 0s linear .28s;
}
#chat-panel.open {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .34s cubic-bezier(.34,1.45,.64,1), opacity .22s ease;
}
@media (prefers-reduced-motion: reduce) {
  #chat-panel, #chat-panel.open { transform: none; transition: opacity .15s ease, visibility 0s; }
}
.chat-panel-wrap {
  margin: 0;
  background: var(--glass-card); border: 1px solid var(--border); border-radius: 16px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
  height: 520px; max-height: calc(100dvh - 116px); min-height: 0;
}
.chat-head-btns { display: flex; gap: 8px; align-items: center; }
#chat-close { font-size: 18px; line-height: 1; padding: 6px 12px; }
@media (max-width: 768px) {
  #chat-panel { left: 8px; right: 8px; bottom: 84px; width: auto; }
  .chat-panel-wrap { height: 70dvh; max-height: 70dvh; }
}
/* ---- Presence pill: online members next to the chat FAB ---- */
#presence-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px 0 12px; border-radius: 20px;
  background: var(--glass-card); border: 1px solid var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text); font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.45);
  transition: transform .15s ease, border-color .15s ease;
}
#presence-pill:hover { border-color: var(--accent); }
#presence-pill:active { transform: scale(.95); }
.presence-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.9); flex-shrink: 0; }
.presence-dot.sm { width: 8px; height: 8px; }
.presence-dot.dim { background: #4b5563; box-shadow: none; }
#presence-pop {
  position: fixed; left: 84px; bottom: 84px; z-index: 61;
  width: 264px; max-width: calc(100vw - 100px); max-height: 340px; overflow-y: auto;
  background: var(--glass-card); border: 1px solid var(--border); border-radius: 14px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0,0,0,.55); padding: 12px 14px;
  transform-origin: bottom left;
}
#presence-pop:not(.hidden) { animation: pop-in .22s cubic-bezier(.34,1.4,.64,1); }
@keyframes pop-in { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.presence-pop-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 14px; }
.presence-pop-head span { font-size: 12px; color: var(--muted); }
.presence-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; border-top: 1px solid rgba(255,255,255,0.06); }
.presence-row:first-of-type { border-top: none; }
button.presence-row.presence-link { width: 100%; background: none; border: none; border-top: 1px solid rgba(255,255,255,0.06); color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 6px; padding-left: 6px; padding-right: 6px; }
button.presence-row.presence-link:first-of-type { border-top: none; }
button.presence-row.presence-link:hover { background: rgba(139,92,246,.12); }
button.presence-row.presence-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.presence-game { margin-left: auto; font-size: 11px; color: var(--accent); font-weight: 700; }
/* ---- Roster rows open the in-app profile modal ---- */
.roster-list button.roster-row {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 12px 4px; color: var(--text); font-size: 14.5px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit;
}
.roster-list button.roster-row .ext { color: var(--accent); font-size: 13px; }
.roster-list button.roster-row:hover { color: var(--accent); }
.roster-list .roster-name { font-weight: 600; }
.roster-list .roster-sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }

/* ---- Member profile modal ---- */
#profile-card h4 { margin: 16px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.profile-head { display: flex; justify-content: flex-end; }
.profile-close {
  background: none; border: none; color: var(--muted); font-size: 26px;
  line-height: 1; cursor: pointer; padding: 0 4px;
}
.profile-close:hover { color: var(--text); }
.profile-id { display: flex; gap: 14px; align-items: center; margin: 4px 0 10px; }
.profile-avatar {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--border); flex-shrink: 0;
}
.profile-name { font-size: 20px; font-weight: 800; }
.profile-tags { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.profile-rsi { color: var(--muted); font-size: 12.5px; }
.profile-about { font-size: 14px; line-height: 1.5; }
.profile-fleet { display: grid; gap: 8px; }
.profile-ship {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.profile-ship-tags { display: flex; gap: 6px; flex-shrink: 0; }
.profile-recent { list-style: none; padding: 0; margin: 0; }
.profile-recent li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid var(--border);
}
.profile-recent li:last-child { border-bottom: none; }
.muted-card {
  background: rgba(255, 255, 255, 0.04); border-style: dashed;
  color: var(--muted); font-size: 14px;
}
.small { font-size: 12.5px; }
#about-text { width: 100%; box-sizing: border-box; resize: vertical; }

/* ---- Announcement card (rich) ---- */
.hq-announce-title { font-size: 16px; font-weight: 800; margin: 2px 0 6px; }
.hq-announce-media {
  width: 100%; max-height: 280px; object-fit: cover; border-radius: 8px;
  margin: 6px 0; display: block; background: rgba(0, 0, 0, 0.3);
}
.hq-announce-body { margin-top: 6px; overflow-wrap: break-word; }
.hq-announce-body p { margin: 0 0 8px; }
.hq-announce-body ul, .hq-announce-body ol { margin: 0 0 8px; padding-left: 20px; }
.hq-announce-body blockquote {
  margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #f5c518;
  background: rgba(245, 197, 24, 0.07); border-radius: 0 8px 8px 0;
}
.hq-announce-body a { color: #93c5fd; }
.ann-edit-btn { margin-top: 8px; }

/* ---- Announcement editor modal ---- */
.ann-edit-card { width: min(560px, 94vw); }
.ann-edit-card .field { width: 100%; box-sizing: border-box; margin: 4px 0 10px; }
.ann-toolbar { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.ann-toolbar button {
  min-width: 34px; padding: 6px 8px; border-radius: 8px;
  background: var(--glass-card); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; cursor: pointer;
}
.ann-toolbar button:hover { border-color: #f5c518; }
.ann-editor {
  min-height: 120px; max-height: 260px; overflow-y: auto;
  background: var(--glass-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; color: var(--text);
  font-size: 14px; line-height: 1.5; margin: 4px 0 6px; overflow-wrap: break-word;
}
.ann-editor:focus { outline: none; border-color: #f5c518; }
.ann-editor p { margin: 0 0 8px; }
.ann-editor ul, .ann-editor ol { margin: 0 0 8px; padding-left: 20px; }
.ann-media-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }
.ann-media-row .field { flex: 1; min-width: 150px; margin: 0; }
#ann-media-preview { max-width: 120px; max-height: 80px; border-radius: 8px; }
#ann-media-preview.hidden { display: none; }
.ann-edit-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ---- Chat attachments ---- */
.chat-input-wrap { position: relative; }
.chat-input-row .chat-tool { padding: 8px 10px; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.chat-input-row .chat-tool:disabled { opacity: 0.7; }
.chat-img { max-width: 100%; max-height: 220px; border-radius: 10px; margin-top: 6px; display: block; }
.gif-picker {
  position: absolute; bottom: 100%; left: 0; right: 0; z-index: 30;
  background: var(--glass-card); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border); border-radius: 14px; padding: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); margin-bottom: 8px;
}
.gif-picker.hidden { display: none; }
.gif-search-row { display: flex; gap: 6px; margin-bottom: 8px; }
.gif-search-row input {
  flex: 1; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px; color: var(--text); font-size: 14px;
}
.gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 260px; overflow-y: auto; }
.gif-grid img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; cursor: pointer; }
.gif-grid .muted { grid-column: 1 / -1; text-align: center; padding: 20px 0; }
#sw-update-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 14px; background: rgba(23,18,49,0.95); backdrop-filter: blur(14px); border: 1px solid rgba(127,140,255,0.35); box-shadow: 0 4px 18px rgba(0,0,0,.45); font-size: 14px; color: #e5e7eb; }
#sw-update-toast button { background: linear-gradient(135deg, #7c8cff, #5b6cf0); color: white; border: none; border-radius: 10px; padding: 8px 18px; font-weight: 700; font-size: 13px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
#sw-update-toast button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,140,255,0.4); }
/* Leader's Guide (Command tab book) */
#guide-content .guide-ch-title { font-size: 18px; margin: 4px 0 12px; color: var(--text); }
#guide-content h4 { font-size: 15px; margin: 16px 0 6px; color: var(--text); }
#guide-content p, #guide-content li { font-size: 14px; line-height: 1.55; color: var(--muted); }
#guide-content p { margin: 0 0 10px; }
#guide-content ul, #guide-content ol { margin: 0 0 12px; padding-left: 22px; }
#guide-content li { margin-bottom: 6px; }
#guide-content strong { color: var(--text); }
#guide-content a[data-gch] { color: var(--accent); text-decoration: none; }
#guide-content a[data-gch]:hover { text-decoration: underline; }
.guide-idx-ch { margin-bottom: 14px; }
.guide-idx-ch h4 { margin-bottom: 4px !important; }
.guide-idx-topics { list-style: disc; margin-top: 2px !important; }
.guide-idx-topics li { margin-bottom: 2px !important; }
#guide-menu { padding-left: 0; padding-right: 0; }

/* Roadmap (bottom of Headquarters) */
.rm-group { margin-bottom: 18px; }
.rm-group:last-child { margin-bottom: 0; }
.rm-group-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; opacity: 0.9; }
.rm-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.rm-item:last-child { border-bottom: none; }
.rm-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rm-dot.rm-done { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,0.7); }
.rm-dot.rm-progress { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.7); }
.rm-dot.rm-planned { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,0.7); }
.rm-name { flex: 1; font-size: 14px; }
.rm-status { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.rm-status.rm-done { color: #34d399; }
.rm-status.rm-progress { color: #fbbf24; }
.rm-status.rm-planned { color: #f87171; }

/* Activity feed: capped at ~5 rows, internally scrollable, hidden scrollbar */
#hq-activity { max-height: 340px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;
  background: var(--glass-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#hq-activity::-webkit-scrollbar { display: none; }

/* Roadmap item descriptions */
.rm-text { flex: 1; min-width: 0; }
.rm-item { align-items: flex-start; }
.rm-dot { margin-top: 4px; }
.rm-desc { font-size: 12.5px; color: #9ca3af; margin-top: 2px; line-height: 1.4; }
.rm-name { font-size: 14px; font-weight: 600; }

/* Changelog modal: scrollable, hidden scrollbar */
#changelog-full-body { overflow-y: auto; max-height: 70vh; scrollbar-width: none; -ms-overflow-style: none; }
#changelog-full-body::-webkit-scrollbar { display: none; }
#changelog-full-body ul { margin: 6px 0 0 18px; padding: 0; }
/* Privacy policy modal: scrollable, hidden scrollbar */
#privacy-body { overflow-y: auto; max-height: 70vh; scrollbar-width: none; -ms-overflow-style: none; }
#privacy-body::-webkit-scrollbar { display: none; }
#privacy-body h4 { margin: 14px 0 6px; }
#privacy-body ul { margin: 6px 0 0 18px; padding: 0; }
#privacy-body p { margin: 8px 0; line-height: 1.5; }
/* Login screen + account footer links */
.login-legal { margin-top: 18px; font-size: 12px; color: var(--muted); text-align: center; }
.login-legal a, .acct-legal a { color: var(--muted); text-decoration: underline; cursor: pointer; }
.acct-legal { margin-top: 10px; font-size: 12px; color: var(--muted); }
#changelog-full-body li { margin-bottom: 4px; font-size: 14px; }

/* Trade Deck: material detail popup */
#matdetail-body { overflow-y: auto; max-height: 70vh; scrollbar-width: none; -ms-overflow-style: none; }
#matdetail-body::-webkit-scrollbar { display: none; }
.matdetail-h { font-size: 14px; font-weight: 700; margin: 14px 0 8px; }
.matdetail-h:first-child { margin-top: 0; }
.matloc-list { display: flex; flex-direction: column; gap: 6px; }
.matloc-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,0.03); }
.matloc-row.matloc-best { border-color: var(--accent); background: rgba(139,92,246,0.12); }
.matloc-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.matloc-name { font-weight: 600; font-size: 14px; }
.matloc-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.matloc-sub { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 13px; }
.matloc-price { color: var(--text); font-weight: 600; }
.matloc-stock { color: var(--muted); }
.mat-row { cursor: pointer; }
.mat-row:hover td { background: rgba(139,92,246,0.08); }
.mat-row:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Trade Deck: commodity picker */
.uex-picker-wrap { position: relative; }
.uex-picker-btn { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.uex-picker-caret { opacity: 0.6; font-size: 12px; }
.uex-picker-drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; background: var(--glass-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 12px; padding: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
.uex-picker-drop .field { margin-bottom: 6px; }
.uex-picker-list { max-height: 240px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.uex-picker-list::-webkit-scrollbar { display: none; }
.uex-picker-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.uex-picker-item:hover { background: rgba(139,92,246,0.12); }
.uex-picker-item.picked { color: var(--accent); font-weight: 600; }

/* Trade Deck: ship selector */
.uex-ship-wrap { display: flex; align-items: center; gap: 10px; }
#shipsel-list { max-height: 50vh; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; margin: 10px 0; }
#shipsel-list::-webkit-scrollbar { display: none; }
.shipsel-mfg { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 12px 0 6px; }
.shipsel-mfg:first-child { margin-top: 0; }
.shipsel-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; cursor: pointer; }
.shipsel-row:hover { background: rgba(139,92,246,0.08); }
.shipsel-row.picked { border-color: var(--accent); background: rgba(139,92,246,0.12); }
.shipsel-info { display: flex; flex-direction: column; gap: 2px; }
.shipsel-name { font-weight: 600; font-size: 14px; }
.shipsel-scu { font-size: 12px; color: var(--muted); }
.shipsel-radio { font-size: 18px; color: var(--accent); }
.shipsel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border); }

/* Pathfinder pill: cyan/teal glass, distinct from the purple Alpha pill */
.st-pill.pathfinder { background: rgba(34,211,238,0.16); border: 1px solid rgba(34,211,238,0.6); color: #a5f3fc; }
.st-pill .pill-ico { width: 12px; height: 12px; vertical-align: -1px; margin-right: 4px; }

/* ---- Radial navigation (opt-in via Account settings) ---- */
body.nav-d-radial .app-header .nav-group { display: none; }
body.nav-m-radial #mobile-nav-btn { display: none; }

/* Quarter radial: shared element, shown per platform pref */
.radial-m { position: fixed; z-index: 60; top: 0; left: 0; width: min(320px, 90vw); height: min(320px, 90vw); }
@media (max-width: 899px) {
  body:not(.nav-m-radial) .radial-m { display: none; }
  .rm-launcher { display: none; }
}
@media (min-width: 900px) {
  body:not(.nav-d-radial) .radial-m { display: none; }
  /* Desktop: quarter radial sits below the header, opens from a launcher */
  body.nav-d-radial .radial-m { top: 78px; left: 10px; }
  body.nav-d-radial .rm-stage {
    transform: scale(.15); opacity: 0; transform-origin: top left; pointer-events: none;
    transition: transform .32s cubic-bezier(.2,.82,.2,1), opacity .18s ease;
  }
  body.nav-d-radial .radial-m.q-open .rm-stage { transform: scale(1); opacity: 1; pointer-events: auto; }
  body.nav-d-radial .rdm-item:hover .rdm-name { opacity: 1; }
}
.rm-launcher {
  display: none; position: absolute; z-index: 6;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border: 2px solid var(--accent); border-radius: 50%;
  background: var(--glass-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--text); cursor: pointer; place-items: center;
  box-shadow: 0 0 16px rgba(139,92,246,0.35);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.rm-launcher:hover { border-color: var(--accent); background: rgba(139,92,246,.18); transform: translate(-50%, -50%) scale(1.08); }
.rm-launcher svg { width: 20px; height: 20px; }
@media (min-width: 900px) {
  body.nav-d-radial .rm-launcher { display: grid; }
  /* Header needs relative positioning for the centered launcher */
  body.nav-d-radial .site-header { position: relative; }
}
.rm-tip {
  position: absolute; z-index: 8; left: 120px; top: 96px;
  padding: 8px 12px; border: 1px solid var(--accent); border-radius: 9px;
  background: var(--glass-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--text); font-size: 11px; font-weight: 800; white-space: nowrap; pointer-events: none;
}

/* Mobile quarter radial */
.radial-m { position: fixed; z-index: 60; top: 0; left: 0; width: min(320px, 90vw); height: min(320px, 90vw); }
.rm-stage { position: absolute; inset: 0; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.rm-arc-svg { position: absolute; inset: 0; overflow: visible; }
.rm-arc-line { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .5; stroke-linecap: round; }
.rm-step {
  position: absolute; z-index: 5; width: 38px; height: 38px;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--glass-card); backdrop-filter: blur(14px);
  color: var(--accent); font-size: 15px; display: grid; place-items: center; cursor: pointer;
}
.rm-step:active { background: rgba(139,92,246,.2); }
.rm-prev { left: 200px; top: 16px; }
.rm-next { left: 16px; top: 200px; }
.rm-account {
  position: absolute; z-index: 4; left: 14px; top: 14px; width: 176px;
  border: 1px solid var(--border); border-radius: 0 20px 20px 20px;
  background: var(--glass-card); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 9px;
  padding: 10px 11px 26px; cursor: pointer; color: var(--text); text-align: left;
}
.rm-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 1px solid var(--border); }
.rm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rm-account-copy { min-width: 0; }
.rm-account-copy strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-account-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 700; }
.rm-expand {
  position: absolute; z-index: 5; left: 72px; top: 72px;
  border: 0; border-top: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: 10px; font-weight: 800;
  display: flex; align-items: center; gap: 6px; padding: 5px 4px 2px; cursor: pointer;
}
.rm-account-popup {
  position: absolute; z-index: 8; left: 14px; top: 108px; width: 172px; padding: 5px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--glass-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.rm-account-popup button {
  width: 100%; border: 0; border-radius: 8px; padding: 9px 11px;
  background: transparent; color: var(--text); text-align: left; font-size: 13px; cursor: pointer;
}
.rm-account-popup button:hover { background: rgba(139,92,246,.15); }
.rdm-item {
  position: absolute; z-index: 3; width: 52px; height: 52px; transform: translate(-50%, -50%);
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--glass-card); backdrop-filter: blur(14px);
  display: grid; place-items: center; cursor: pointer; color: var(--text);
  transition: left .2s cubic-bezier(.2,.82,.2,1), top .2s cubic-bezier(.2,.82,.2,1), opacity .15s ease;
}
.rdm-item .glyph { font-size: 21px; line-height: 1; }
.rdm-item.current { border-color: var(--accent); background: rgba(139,92,246,.18); }
.rdm-item.outside { opacity: 0; pointer-events: none; }
.rdm-item .rdm-name {
  position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%);
  padding: 4px 7px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--glass-card); font-size: 10px; font-weight: 700; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.rm-stage.show-names .rdm-item:not(.outside) .rdm-name { opacity: 1; }
.rm-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(5,2,11,.4); }
.rm-shelf {
  position: absolute; left: 0; right: 12px; top: 110px;
  padding: 16px 12px; border: 1px solid var(--border); border-left: 0; border-radius: 0 24px 24px 0;
  background: var(--glass-card); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.rm-shelf-head { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 10px; }
.rm-shelf-head strong { font-size: 16px; }
.rm-shelf-head button { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--text); font-size: 17px; cursor: pointer; }
.rm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.rm-shelf-item {
  border: 1px solid transparent; border-radius: 12px; background: rgba(255,255,255,.03);
  padding: 10px 4px; display: grid; place-items: center; gap: 5px; cursor: pointer; color: var(--text);
}
.rm-shelf-item:hover, .rm-shelf-item.current { background: rgba(139,92,246,.15); border-color: var(--border); }
.rm-shelf-item .glyph { font-size: 20px; color: var(--accent); }
.rm-shelf-item span:last-child { font-size: 10px; font-weight: 700; }
@media (min-width: 900px) { .radial-m { display: none; } }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* ---- Rank themes: accent + wallpaper per org rank ---- */
body[data-theme="freelancer"] {
  --accent: #22c55e; --accent-dim: #16a34a; --border: #14532d;
  --glass-card: rgba(8, 38, 20, 0.28); --glass-bg2: rgba(6, 30, 16, 0.28); --glass-chrome: rgba(4, 20, 10, 0.35);
  background-image: url("images/themes/theme-freelancer.jpg?v=2");
}
body[data-theme="certified"] {
  --accent: #f97316; --accent-dim: #ea580c; --border: #7c2d12;
  --glass-card: rgba(45, 20, 8, 0.28); --glass-bg2: rgba(36, 16, 6, 0.28); --glass-chrome: rgba(24, 10, 4, 0.35);
  background-image: url("images/themes/theme-certified.jpg?v=2");
}
body[data-theme="specialist"] {
  --accent: #a855f7; --accent-dim: #9333ea; --border: #581c87;
  --glass-card: rgba(35, 15, 55, 0.28); --glass-bg2: rgba(28, 12, 44, 0.28); --glass-chrome: rgba(18, 8, 30, 0.35);
  background-image: url("images/themes/theme-specialist.jpg?v=2");
}
body[data-theme="commander"] {
  --accent: #ef4444; --accent-dim: #dc2626; --border: #7f1d1d;
  --glass-card: rgba(45, 10, 10, 0.28); --glass-bg2: rgba(36, 8, 8, 0.28); --glass-chrome: rgba(24, 5, 5, 0.35);
  background-image: url("images/themes/theme-commander.jpg?v=2");
}
body[data-theme="director"] {
  --accent: #6366f1; --accent-dim: #4f46e5; --border: #312e81;
  --glass-card: rgba(18, 18, 50, 0.28); --glass-bg2: rgba(14, 14, 40, 0.28); --glass-chrome: rgba(10, 10, 28, 0.35);
  background-image: url("images/themes/theme-director.jpg?v=2");
}
body[data-theme="executive"] {
  --accent: #f5c542; --accent-dim: #d4a017; --border: #713f12;
  --glass-card: rgba(45, 32, 8, 0.28); --glass-bg2: rgba(36, 26, 6, 0.28); --glass-chrome: rgba(24, 17, 4, 0.35);
  background-image: url("images/themes/theme-executive.jpg?v=2");
}
/* Alternate: ForceFlex Autumn inspired, organic red/maroon camo blobs with hex overlay */
body[data-theme="alternate"] {
  --accent: #d72337; --accent-dim: #a31626; --border: #6e3a44;
  --glass-card: rgba(52, 26, 30, 0.34); --glass-bg2: rgba(42, 22, 26, 0.34); --glass-chrome: rgba(30, 16, 20, 0.40);
  background-image: url("images/themes/theme-alternate.jpg?v=2");
}
/* ---- Terminal theme: OB-SR-VR 6000 phosphor green CRT ---- */
body[data-theme="terminal"] {
  --bg: #020604; --bg2: #04120a;
  --card: #03130a;
  --text: #c9ffd9; --muted: #5fae7c;
  --accent: #33ff66; --accent-dim: #1db954;
  --border: #0f3d22;
  --glass-card: rgba(3, 30, 14, 0.42); --glass-bg2: rgba(2, 24, 12, 0.42); --glass-chrome: rgba(1, 14, 7, 0.48);
  --tile-text: #d6ffe2; --tile-sub: rgba(214, 255, 226, 0.75);
  --pos: #33ff66; --neg: #ff5f5f;
  background-image: url("images/themes/theme-terminal.jpg?v=1");
  background-color: #020604;
}
/* phosphor glow on headings */
body[data-theme="terminal"] h1, body[data-theme="terminal"] h2,
body[data-theme="terminal"] h3, body[data-theme="terminal"] .hq-title,
body[data-theme="terminal"] .section-title {
  text-shadow: 0 0 6px rgba(51, 255, 102, 0.55), 0 0 18px rgba(51, 255, 102, 0.25);
  letter-spacing: 0.04em;
}
/* monospace terminal type for headers and key labels */
body[data-theme="terminal"] h1, body[data-theme="terminal"] h2,
body[data-theme="terminal"] h3, body[data-theme="terminal"] .hq-title,
body[data-theme="terminal"] .section-title, body[data-theme="terminal"] .card-title,
body[data-theme="terminal"] .nav-btn, body[data-theme="terminal"] .btn,
body[data-theme="terminal"] .btn-ghost, body[data-theme="terminal"] .hq-welcome-text {
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* green-tinted chrome: header, inputs, buttons */
body[data-theme="terminal"] .app-header {
  border-bottom-color: rgba(51, 255, 102, 0.22);
  box-shadow: 0 1px 12px rgba(51, 255, 102, 0.08);
}
body[data-theme="terminal"] .nav-btn.nav-active {
  box-shadow: 0 0 10px rgba(51, 255, 102, 0.45);
  border-color: rgba(51, 255, 102, 0.6);
}
body[data-theme="terminal"] input, body[data-theme="terminal"] select,
body[data-theme="terminal"] textarea {
  caret-color: #33ff66;
}
/* subtle CRT flicker on the background only (cheap, GPU-friendly) */
body[data-theme="terminal"]::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
  animation: termFlicker 4s infinite steps(60);
}
@keyframes termFlicker {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}
/* ---- Matrix theme: digital rain green on black ---- */
body[data-theme="matrix"] {
  --bg: #000000; --bg2: #001100;
  --card: #001200;
  --text: #ccffcc; --muted: #3a7d44;
  --accent: #00ff41; --accent-dim: #00cc33;
  --border: #0a3d1a;
  --glass-card: rgba(0, 30, 8, 0.42); --glass-bg2: rgba(0, 22, 6, 0.42); --glass-chrome: rgba(0, 12, 4, 0.48);
  --tile-text: #d0ffd0; --tile-sub: rgba(208, 255, 208, 0.75);
  --pos: #00ff41; --neg: #ff5f5f;
  background-image: url("images/themes/theme-matrix.jpg?v=1");
  background-color: #000000;
}
/* bright green glow on headings */
body[data-theme="matrix"] h1, body[data-theme="matrix"] h2,
body[data-theme="matrix"] h3, body[data-theme="matrix"] .hq-title,
body[data-theme="matrix"] .section-title {
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.6), 0 0 24px rgba(0, 255, 65, 0.3);
  letter-spacing: 0.06em;
}
/* monospace matrix type for headers and key labels */
body[data-theme="matrix"] h1, body[data-theme="matrix"] h2,
body[data-theme="matrix"] h3, body[data-theme="matrix"] .hq-title,
body[data-theme="matrix"] .section-title, body[data-theme="matrix"] .card-title,
body[data-theme="matrix"] .nav-btn, body[data-theme="matrix"] .btn,
body[data-theme="matrix"] .btn-ghost, body[data-theme="matrix"] .hq-welcome-text {
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* green-tinted chrome */
body[data-theme="matrix"] .app-header {
  border-bottom-color: rgba(0, 255, 65, 0.22);
  box-shadow: 0 1px 12px rgba(0, 255, 65, 0.08);
}
body[data-theme="matrix"] .nav-btn.nav-active {
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.45);
  border-color: rgba(0, 255, 65, 0.6);
}
body[data-theme="matrix"] input, body[data-theme="matrix"] select,
body[data-theme="matrix"] textarea {
  caret-color: #00ff41;
}
/* The executive wallpaper is bright; on mobile it washes out headers, so a
   dark gradient sits over it on small screens. Desktop is untouched. */
@media (max-width: 899px) {
  body[data-theme="executive"] {
    background-image: linear-gradient(rgba(10, 6, 0, 0.5), rgba(10, 6, 0, 0.35)), url("images/themes/theme-executive.jpg?v=2");
  }
}
/* Theme picker swatches */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 8px; }
.theme-swatch { position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 10px 6px 8px;
  background: var(--glass-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  cursor: pointer; text-align: center; color: var(--text); }
.theme-swatch .theme-dot { width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 6px;
  box-shadow: 0 0 12px 0 currentColor; }
.theme-swatch .theme-name { font-size: 12px; font-weight: 600; }
.theme-swatch .theme-lock { font-size: 10px; color: var(--muted); margin-top: 2px; }
.theme-swatch.active { outline: 2px solid var(--accent); }
.theme-swatch.locked { opacity: .45; cursor: not-allowed; }
/* Rank change modal */
#rankup-card { text-align: center; }
#rankup-card.demotion { --accent: #ef4444; }
#rankup-title { font-size: 20px; margin-bottom: 8px; }
#rankup-card .rankup-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

/* Started operation cards: present roster center, RSVP summary right */
.hq-started-row { display: flex; gap: 8px; margin: 8px 0; align-items: stretch; }
.hq-present-col { flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px; background: var(--glass-card); border: 1px solid var(--border); }
.hq-rsvp-side { width: 42%; min-width: 180px; }
.hq-rsvp-side .hq-rsvp-cols { grid-template-columns: 1fr 1fr 1fr; margin: 0; }
.hq-rsvp-side .hq-rsvp-col { padding: 6px 2px; }
.hq-rsvp-side .hq-rsvp-num { font-size: 1em; }
.hq-rsvp-side .hq-rsvp-who { font-size: 11px; }
@media (max-width: 600px) {
  .hq-started-row { flex-direction: column; }
  .hq-rsvp-side { width: 100%; min-width: 0; }
}

/* Changelog version rows: clickable, with DB size delta */
#changelog-version-list .cl-row { cursor: pointer; }
#changelog-version-list .cl-row:hover .rm-name { color: var(--accent); }
#changelog-version-list .cl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-delta { float: right; font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 10px; }

/* Generic centered modal (terminal detail, ship detail) */
.overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(5,3,12,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 16px; overscroll-behavior: contain; }
.overlay.hidden { display: none; }
.overlay-card { width: min(480px, 94vw); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; background: var(--glass-card); background: color-mix(in srgb, var(--glass-card) 30%, rgb(13, 10, 26) 70%); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 18px 60px rgba(0,0,0,.5); overscroll-behavior: contain; }
.overlay-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; flex: none; }
.overlay-head h3 { font-size: 17px; font-weight: 800; margin: 0; }
.overlay-body { overflow-y: auto; padding: 0 14px 18px; scrollbar-width: none; -ms-overflow-style: none; }
.overlay-body::-webkit-scrollbar { display: none; }

/* Trade Deck: ship browser (manufacturers + ships) */
.shipbrowse { display: flex; gap: 14px; margin-top: 12px; }
.shipbrowse-mfrs { width: 220px; flex: none; max-height: 560px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; display: flex; flex-direction: column; gap: 6px; }
.shipbrowse-mfrs::-webkit-scrollbar { display: none; }
.mfr-card { text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--glass-card); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.mfr-card:hover { border-color: var(--accent); }
.mfr-card.active { border-color: var(--accent); background: rgba(139,92,246,.15); }
.mfr-logo { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex: none; background: rgba(0,0,0,.4); }
.mfr-name { flex: 1; min-width: 0; }
.mfr-count { font-size: 11px; color: var(--muted); font-weight: 400; flex: none; }
.shipbrowse-ships { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; max-height: 560px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; align-content: start; }
.shipbrowse-ships::-webkit-scrollbar { display: none; }
.ship-card { border: 1px solid var(--border); border-radius: 10px; background: var(--glass-card); padding: 10px; cursor: pointer; text-align: left; color: var(--text); }
.ship-card:hover { border-color: var(--accent); }
.ship-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; margin-bottom: 8px; background: rgba(0,0,0,.3); }
.ship-card-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.ship-card-meta { font-size: 12px; color: var(--muted); }
/* Ship browser isolation (v328): .mfr-card and .ship-card are shared with
   the DPS picker and the roster cards, whose rules leak into the ship
   browsers (manufacturer cards rendered as tall 110px tiles; ship cards
   inherited overflow:hidden, which can clip their name text). Scope the
   intended browser design to .shipbrowse so the other components keep
   their own styles. Covers both the Fleet add browser and UEX browser. */
.shipbrowse .mfr-card { flex-direction: row; min-height: 0; }
.shipbrowse .ship-card { overflow: visible; height: auto; }
.shipbrowse .ship-card-name { line-height: 1.35; }
@media (max-width: 700px) { .shipbrowse { flex-direction: column; } .shipbrowse-mfrs { width: 100%; max-height: 180px; } }
/* Mobile ship catalog: manufacturer chips with logos, ship list scrolls internally. */
@media (max-width: 899px) {
  .shipbrowse { flex-direction: column; }
  .shipbrowse-mfrs {
    width: 100%; max-height: none; flex: none;
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 2px 2px 8px; gap: 8px;
  }
  .shipbrowse-mfrs::-webkit-scrollbar { display: none; }
  .mfr-card { flex: none; white-space: nowrap; padding: 6px 12px 6px 6px; font-size: 13px; }
  .mfr-logo { width: 30px; height: 30px; border-radius: 7px; }
  .shipbrowse-ships {
    grid-template-columns: 1fr; max-height: 62vh; overflow-y: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 24px;
  }
  .shipbrowse-ships::-webkit-scrollbar { display: none; }
  .ship-card { padding: 12px; }
  .ship-card img { aspect-ratio: 16/9; margin-bottom: 10px; }
  .ship-card-name { font-size: 16px; }
  .ship-card-meta { font-size: 12px; }
}

/* Ship detail modal */
.shipspec { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 12px 0; }
.shipspec div { font-size: 13px; }
.shipspec dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.shipspec dd { margin: 2px 0 0; font-weight: 600; }
.shiplink-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.shiplink-row a { font-size: 13px; }
.shipvideo { margin: 12px 0; }
.shipvideo iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; }

/* Terminal type sub-tabs */
#uex-term-types { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
#uex-term-types .seg.active { background: rgba(139,92,246,.2); border-color: var(--accent); }
.term-row { cursor: pointer; }
.term-row:hover td { color: var(--accent); }

/* Terminal detail inventory */
.inv-cat { margin: 14px 0; }
.inv-cat > h4 { font-size: 14px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.inv-item { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.04); }
.inv-price { color: var(--muted); white-space: nowrap; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.gal-card { position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.35); padding: 0; cursor: pointer; text-align: left; }
.gal-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: rgba(0,0,0,.5); }
.gal-video { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(0,0,0,.6)); }
.gal-play { font-size: 32px; color: rgba(255,255,255,.85); }
.gal-multi { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.gal-meta { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.gal-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }
.gal-nick { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-more-wrap { text-align: center; padding-bottom: 24px; }
.gal-detail-media { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.gal-full { width: 100%; border-radius: 10px; max-height: 60vh; object-fit: contain; background: #000; }
.gal-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gal-caption { font-size: 14px; margin: 0 0 12px; white-space: pre-wrap; word-break: break-word; }
.gallery-card { max-width: 640px; }

/* ---- Notification toasts: top-right glass cards ---- */
#toast-wrap {
  position: fixed; top: 76px; right: 16px; z-index: 120;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(340px, calc(100vw - 32px));
  pointer-events: none;
}
.toast-card {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(20, 14, 40, 0.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(139, 92, 246, 0.45);
  border-radius: 14px; padding: 12px 12px 12px 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transform: translateX(120%); opacity: 0;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.1), opacity 0.25s ease;
  cursor: pointer;
}
.toast-card.toast-in { transform: translateX(0); opacity: 1; }
.toast-card.toast-out { transform: translateX(120%); opacity: 0; }
.toast-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.toast-text strong { font-size: 14px; color: #fff; }
.toast-text span { font-size: 13px; color: rgba(255, 255, 255, 0.75); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.toast-x {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7); font-size: 16px; line-height: 1; cursor: pointer;
}
.toast-x:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ---- Voice now card (Headquarters) ---- */
.voice-chan { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.voice-chan:first-of-type { margin-top: 8px; padding-top: 0; border-top: none; }
.voice-chan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.voice-chan-name { font-weight: 600; font-size: 15px; }
.voice-members { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.voice-member { display: flex; align-items: center; gap: 8px; min-width: 0; }
.voice-member img { width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover; }
.voice-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.voice-nick { font-size: 13.5px; font-weight: 500; }
.voice-time { font-size: 11.5px; color: rgba(255, 255, 255, 0.55); }
.op-voice-slot { margin-top: 10px; }
.op-voice-slot .btn-ghost[disabled] { opacity: 0.55; cursor: default; }
.voice-ticker { overflow: hidden; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.voice-ticker-inner { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: voice-tick-scroll 40s linear infinite; }
.voice-ticker:hover .voice-ticker-inner, .voice-ticker:active .voice-ticker-inner { animation-play-state: paused; }
@keyframes voice-tick-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.voice-tick-item { font-size: 12px; color: rgba(255, 255, 255, 0.65); }
.voice-tick-item b { font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.voice-tick-ts { color: rgba(255, 255, 255, 0.4); }
.voice-tick-sep { margin: 0 14px; color: rgba(255, 255, 255, 0.25); font-size: 10px; }

/* Recent operations: compact rows */
.hq-recent-list { display: flex; flex-direction: column; }
.hq-recent-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 2px; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.hq-recent-row:last-child { border-bottom: none; }
.hq-recent-title { font-weight: 600; font-size: 14px; }
.hq-recent-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }

.hq-welcome-summary { font-size: 13px; color: var(--muted); margin-top: 6px; }
.hq-welcome-summary a { color: var(--accent); text-decoration: none; font-weight: 600; }
.hq-welcome-summary a:hover { text-decoration: underline; }

/* OB-SR-VR 6000 prefetch loading screen */
.muthur-load {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #000; font-family: monospace; color: #33ff66;
  padding: 24px; text-align: center;
}
.muthur-load.hidden { display: none; }
.muthur-head {
  font-size: 22px; font-weight: 700; letter-spacing: 6px;
  text-shadow: 0 0 12px rgba(51,255,102,0.7); margin-bottom: 6px;
}
.muthur-sub {
  font-size: 11px; letter-spacing: 3px; opacity: 0.7; margin-bottom: 28px;
}
.muthur-status {
  font-size: 13px; letter-spacing: 2px; margin-bottom: 14px; min-height: 20px;
  text-shadow: 0 0 8px rgba(51,255,102,0.5);
}
.muthur-barwrap {
  width: min(420px, 80vw); height: 22px;
  border: 2px solid #33ff66; padding: 3px;
  box-shadow: 0 0 14px rgba(51,255,102,0.35), inset 0 0 8px rgba(51,255,102,0.15);
  margin-bottom: 10px;
}
.muthur-bar {
  height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, #33ff66 0 8px, transparent 8px 12px);
  box-shadow: 0 0 10px rgba(51,255,102,0.6);
  transition: width 0.3s ease;
}
.muthur-pctwrap { height: 30px; margin-bottom: 18px; position: relative; width: 100%; }
.muthur-pct {
  font-size: 20px; font-weight: 700; letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(51,255,102,0.8);
  display: inline-block; position: relative;
}
.muthur-log {
  font-size: 11px; opacity: 0.65; text-align: left;
  width: min(420px, 80vw); height: 90px; overflow: hidden;
  letter-spacing: 1px;
}
.muthur-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ref-job.ref-highlight {
  animation: refHighlight 3s ease;
  border-color: var(--accent);
}
@keyframes refHighlight {
  0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
  20%, 80% { box-shadow: 0 0 20px var(--accent); }
}

/* Member chips: avatar + clickable name, used everywhere names display */
.member-link {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; border-radius: 6px; padding: 1px 2px;
  vertical-align: middle;
}
.member-link:hover .member-name, .member-link:focus .member-name { text-decoration: underline; }
.member-link:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.member-av {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; flex: none; background: var(--glass-card);
}
.member-name { font-weight: inherit; }
.member-link.member-static { cursor: default; }
.member-link.member-static:hover .member-name { text-decoration: none; }
.roster-av { width: 32px; height: 32px; }
.roster-row { gap: 10px; }

#obsrvr-quote {
  transition: opacity 0.4s ease;
  font-family: monospace;
  letter-spacing: 1px;
}

.muthur-skip { margin-top: 24px; }
.muthur-skip-q { font-size: 13px; letter-spacing: 2px; margin-bottom: 16px; color: #33ff66; }
.muthur-skip-btns { display: flex; gap: 16px; justify-content: center; }
.muthur-skip-btn {
  font-family: monospace; font-size: 14px; letter-spacing: 2px;
  background: transparent; color: #33ff66;
  border: 1px solid transparent; padding: 8px 24px; cursor: pointer;
}
.muthur-skip-btn:hover { border: 1px solid #33ff66; background: rgba(51,255,102,0.1); }

.collapsible .collapse-arrow { font-size: 0.8em; transition: transform 0.2s; display: inline-block; }
.collapsible.open .collapse-arrow { transform: rotate(90deg); }

.mobile-nav-version { text-align: center; padding: 8px; font-size: 11px; opacity: 0.5; font-family: monospace; }

/* ---- Mobile radial navigation v2: launcher + fullscreen module grid (opt-in via Account settings) ---- */
@media (min-width: 900px) {
  .mradial, .mradial-launcher { display: none !important; }
}
body:not(.nav-m-radial) .mradial,
body:not(.nav-m-radial) .mradial-launcher { display: none !important; }
/* The old quarter-arc UI is desktop-only now; mobile uses the fullscreen grid */
@media (max-width: 899px) {
  body.nav-m-radial #radial-m { display: none !important; }
}
.mradial-launcher {
  position: fixed; z-index: 62;
  right: 16px; bottom: calc(92px + env(safe-area-inset-bottom));
  width: 60px; height: 60px; border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--glass-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--text); cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 0 18px rgba(139,92,246,.4), 0 8px 24px rgba(0,0,0,.45);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), background .15s ease, border-color .15s ease;
  touch-action: manipulation;
}
.mradial-launcher:active { transform: scale(.9); }
.mradial-launcher svg { width: 24px; height: 24px; }
.mradial-launcher .mrl-x { display: none; font-size: 28px; line-height: 1; }
.mradial-launcher.open { z-index: 96; transform: rotate(90deg); background: rgba(139,92,246,.22); }
.mradial-launcher.open svg { display: none; }
.mradial-launcher.open .mrl-x { display: block; transform: rotate(-90deg); }
.mradial {
  position: fixed; inset: 0; z-index: 65;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 24px 170px;
}
.mradial.hidden { display: none; }
.mradial-scrim {
  position: absolute; inset: 0;
  background: rgba(5,2,11,.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .25s ease;
}
.mradial.open .mradial-scrim { opacity: 1; }
.mradial-panel {
  position: relative; width: min(344px, 100%);
  max-height: calc(100dvh - 220px); overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  border: 1px solid var(--border); border-radius: 24px;
  background: var(--glass-card); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  padding: 16px 14px 18px;
  transform: translateY(28px) scale(.96); opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), opacity .22s ease;
  touch-action: pan-y;
}
.mradial-panel::-webkit-scrollbar { display: none; }
.mradial.open .mradial-panel { transform: none; opacity: 1; }
.mradial-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 6px 12px; }
.mradial-head strong { font-size: 15px; letter-spacing: .5px; }
.mradial-close {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: transparent;
  color: var(--text); font-size: 20px; line-height: 1; cursor: pointer;
}
.mradial-close:active { background: rgba(139,92,246,.18); }
.mradial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mradial-node {
  min-height: 78px; border: 1px solid var(--border); border-radius: 16px;
  background: rgba(255,255,255,.03); color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 4px; cursor: pointer; font-size: 11px; font-weight: 700;
  transform: scale(.6); opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s ease, background .15s ease, border-color .15s ease;
  touch-action: manipulation;
}
.mradial.open .mradial-node { transform: scale(1); opacity: 1; }
.mradial-node .glyph { font-size: 24px; line-height: 1; color: var(--accent); }
.mradial-node:active { background: rgba(139,92,246,.2); }
.mradial-node.current { border-color: var(--accent); background: rgba(139,92,246,.16); }
@media (prefers-reduced-motion: reduce) {
  .mradial-panel, .mradial-node, .mradial-scrim { transition-duration: .01s !important; }
}

.login-version {
  position: absolute; bottom: 12px; left: 0; right: 0;
  text-align: center; font-size: 11px; font-family: monospace;
  opacity: 0.4; pointer-events: none;
}
#login-screen { position: relative; }

/* ============ BLUEPRINTS MODULE ============ */
.bp-subnav { display: flex; gap: 8px; padding: 0 12px 12px; }
.bp-subnav-btn {
  flex: 1; padding: 10px 8px; border-radius: 12px; font-size: 13px; font-weight: 700;
  background: var(--glass-card); border: 1px solid var(--border); color: var(--muted);
  cursor: pointer;
}
.bp-subnav-btn.active { color: var(--text); border-color: var(--accent); background: rgba(139, 92, 246, 0.15); }
.bp-view.hidden { display: none; }
.bp-search-row { display: flex; gap: 8px; padding: 10px; margin: 0 12px 10px; background: var(--glass-card); border: 1px solid var(--border); border-radius: 12px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bp-search-row .field { flex: 1; }
.bp-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0 12px; }
@media (min-width: 700px) { .bp-grid { grid-template-columns: 1fr 1fr; } }
.bp-card { margin: 0; }
.bp-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.bp-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bp-holders { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.bp-holder { margin: 0; padding: 10px 14px; }
.bp-order-meta { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: 14px; }
.bp-mats { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.bp-mat { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.bp-status-open { color: #22c55e; border-color: #22c55e66; }
.bp-status-accepted { color: #3b82f6; border-color: #3b82f666; }
.bp-status-fulfilled { color: #f59e0b; border-color: #f59e0b66; }
.bp-status-verified, .bp-status-closed { color: #9ca3af; border-color: #9ca3af66; }
.bp-status-cancelled { color: #ef4444; border-color: #ef444466; }
.bp-chat {
  max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 12px; margin: 0 12px; background: rgba(0,0,0,0.2); border-radius: 12px;
  border: 1px solid var(--border);
}
.bp-msg { background: var(--glass-card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; max-width: 85%; align-self: flex-start; }
.bp-msg.mine { align-self: flex-end; background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.3); }
.bp-msg-head { font-size: 12px; margin-bottom: 4px; }
.bp-chat-input { display: flex; gap: 8px; padding: 10px 12px 0; }
.bp-chat-input .field { flex: 1; }
.bp-star-picker { display: flex; gap: 4px; margin: 10px 0; }
.bp-star { font-size: 32px; background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; }
.bp-star.lit { color: #f59e0b; }
.bp-stars-static { color: #f59e0b; font-size: 16px; letter-spacing: 2px; }
.bp-review { margin: 8px 12px; }
.bp-mat-row { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; }
.bp-modal-card h4 { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.bp-modal-card h3 { margin: 0 0 4px; }

/* Feedback screenshot attached to a review card (v326). */
.fb-shot { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; border: 1px solid var(--border); margin-top: 8px; }

/* Voice lobby shortcut card in the lobby panel (v329). */
#voice-lobby-card { margin-bottom: 8px; }
.lobby-voice-item { border-color: var(--accent); cursor: pointer; }
.lobby-voice-note { font-size: 11px; color: var(--accent); flex: none; }

/* Discord control panel (Command > Discord, v331). All classes are
   dcp- prefixed to avoid the shared-class collision trap. */
.dcp-label { display: block; font-size: 12px; opacity: .75; margin: 10px 0 4px; }
.dcp-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: inherit; }
.dcp-check { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; font-size: 14px; }
.dcp-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.dcp-status { font-size: 13px; }
.dcp-subhead { font-weight: 700; margin: 16px 0 6px; font-size: 14px; }
.dcp-stat-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.dcp-guild-icon { width: 52px; height: 52px; border-radius: 50%; }
.dcp-stat { display: flex; flex-direction: column; }
.dcp-stat strong { font-size: 20px; }
.dcp-stat span { font-size: 11px; }
.dcp-perm-row { display: flex; gap: 6px; flex-wrap: wrap; }
.dcp-perm { font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); }
.dcp-perm.on { border-color: var(--accent); color: var(--accent); }
.dcp-perm.off { opacity: .38; text-decoration: line-through; }
.dcp-wd-row { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: 14px; }
.dcp-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dcp-dot.ok { background: #2ecc71; }
.dcp-dot.bad { background: #e74c3c; }
.dcp-chan-row { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.dcp-chan-name { font-weight: 600; }
.dcp-chan-type { font-size: 12px; opacity: .6; margin-right: auto; }
.dcp-chan-form { padding: 6px 0 12px; }
.dcp-voice-row { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.dcp-voice-head { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.dcp-voice-head .dcp-rally { margin-left: auto; }
.dcp-lobby-badge { font-size: 11px; color: var(--accent); border: 1px solid var(--accent); padding: 2px 7px; border-radius: 999px; }
.dcp-occ-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.dcp-occ { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; padding: 2px 8px 2px 3px;
  border-radius: 999px; background: rgba(255,255,255,.06); }
.dcp-occ img { width: 18px; height: 18px; border-radius: 50%; }
.dcp-member-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 6px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.06); }
.dcp-member-row:hover { background: rgba(255,255,255,.04); }
.dcp-member-head { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.dcp-avatar { width: 48px; height: 48px; border-radius: 50%; }
.dcp-role-row { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.dcp-role-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dcp-role-name { margin-right: auto; }
.dcp-has { font-size: 11px; color: var(--accent); }
.dcp-audit-row { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.dcp-actions-inline { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }

/* RSI link popup (v333). */
.rsi-pop-body { padding: 4px 2px; }
.rsi-pop-code-row { display: flex; gap: 10px; align-items: center; }
.rsi-pop-code-row code { font-size: 18px; letter-spacing: 1px; padding: 8px 12px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.ob-applied { display: flex; gap: 8px; align-items: center; margin: 12px 0 4px; font-size: 14px; }

/* Applicant preview overlay (leadership walkthrough of intake) */
#pv-overlay { position: fixed; inset: 0; background: rgba(3, 5, 12, 0.9); z-index: 4200; overflow-y: auto; padding: 18px 12px 40px; }
.pv-frame { max-width: 400px; margin: 0 auto; background: #0b0f1d; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; padding: 20px 22px 28px; text-align: center; }
.pv-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pv-note { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 4px 0 10px; }
.pv-steps { display: flex; gap: 6px; justify-content: center; margin: 8px 0 16px; flex-wrap: wrap; }
.pv-stepdot { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); color: var(--muted); }
.pv-stepdot.on { background: var(--accent, #8a63ff); color: #fff; border-color: transparent; }
.pv-frame h1 { font-size: 24px; letter-spacing: 3px; }
.pv-frame .onboard-verify .btn-ghost { display: inline-block; width: auto; margin: 0 8px 4px 0; }

/* Verification codes: one tap selects the whole code (long-press copy
   is the floor when clipboard APIs are blocked, e.g. in the Activity). */
.verify-code-row .mono, #rsi-pop-code { -webkit-user-select: all; user-select: all; }

/* RSI sign-in warning: styled to echo the red RESTRICTED AREA banner
   on the RSI site so members recognize the page they landed on. */
.rsi-warn {
  margin: 12px 0 4px;
  border: 1px solid rgba(232, 17, 45, .55);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(232, 17, 45, .07);
  text-align: left;
}
.rsi-warn-banner {
  background: #e8112d;
  color: #0b0b0d;
  font-weight: 800;
  letter-spacing: .13em;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.25;
  padding: 7px 10px;
  text-transform: uppercase;
}
.rsi-warn p { margin: 0; padding: 9px 12px 10px; font-size: .9rem; }

/* ---- Eclipse theme: the black-on-white brand colorway (full light theme) ---- */
body[data-theme="eclipse"] {
  --bg: #ffffff; --bg2: #f2f2f4;
  --card: #ffffff;
  --text: #101014; --muted: #5a5b64;
  --accent: #111113; --accent-dim: #000000;
  --border: #d7d7dd;
  --glass-card: rgba(255, 255, 255, 0.88); --glass-bg2: rgba(242, 242, 244, 0.88); --glass-chrome: rgba(255, 255, 255, 0.86);
  background-image: none;
  background-color: #ffffff;
}
body[data-theme="eclipse"] #splash { background: #ffffff; }
body[data-theme="eclipse"] #splash-body { color: #26262c; }
body[data-theme="eclipse"] #login-screen { background: rgba(255, 255, 255, 0.55); }
body[data-theme="eclipse"] .login-mascot { filter: invert(1); }
body[data-theme="eclipse"] .login-wordmark { filter: brightness(0); }
body[data-theme="eclipse"] .login-member-card { border-color: rgba(0, 0, 0, .14); background: rgba(0, 0, 0, .03); }
body[data-theme="eclipse"] input, body[data-theme="eclipse"] select,
body[data-theme="eclipse"] textarea {
  background-color: #ffffff; color: var(--text); border-color: var(--border);
}
body[data-theme="eclipse"] .header-icons .nav-btn { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.14); }
body[data-theme="eclipse"] .mention-item { color: var(--text); }
body[data-theme="eclipse"] .dps-spec-v { color: var(--text); }

/* ---- v345: Eclipse field-test fixes + two all-theme collision repairs.
   The fleet bar names were stacked by a leaked position:absolute from
   the shared .mfr-name card rule, and the ship-browser chips carried a
   photo-shade overlay they never wanted; both hurt every theme. ---- */
.mfr-row .mfr-name { position: static; }
.shipbrowse .mfr-card::after { display: none; }
body[data-theme="eclipse"] .hq-health { background: rgba(255, 68, 68, 0.08); }
body[data-theme="eclipse"] .hq-stat { background: var(--glass-card); }
/* v402: the lobby modal family was never rethemed for Eclipse. The modal
   card was hardcoded dark navy while its text follows the theme, so under
   the light theme everything rendered dark on dark. Give the modal cards
   a solid light surface and lift the lobby's dark inset panels and grays. */
body[data-theme="eclipse"] .lobby-modal-card { background: rgba(255, 255, 255, 0.98); border-color: var(--border); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25); }
body[data-theme="eclipse"] .lobby-modal-head { border-bottom-color: var(--border); }
body[data-theme="eclipse"] .overlay-card, body[data-theme="eclipse"] .cal-card { background: var(--card); }
body[data-theme="eclipse"] .lobby-chat-log { background: rgba(0, 0, 0, 0.04); border-color: var(--border); }
body[data-theme="eclipse"] .op-edit-form { background: rgba(0, 0, 0, 0.04); }
body[data-theme="eclipse"] .lobby-member-ship, body[data-theme="eclipse"] .lobby-sec-chev { color: var(--muted); }
body[data-theme="eclipse"] .lobby-item-count { color: #15803d; }
body[data-theme="eclipse"] .guide-card .guide-tag { color: #ffffff; }
body[data-theme="eclipse"] #notif-panel { background: rgba(255, 255, 255, 0.97); box-shadow: 0 16px 48px rgba(0, 0, 0, .18); }
body[data-theme="eclipse"] #mobile-nav-drop { background: rgba(255, 255, 255, 0.97); box-shadow: 0 16px 48px rgba(0, 0, 0, .18); }
body[data-theme="eclipse"] .shipbrowse .mfr-card.active { background: rgba(0, 0, 0, 0.06); }
body[data-theme="eclipse"] .shipbrowse .ship-card img { background: rgba(0, 0, 0, 0.06); }

/* ---- v346: Eclipse voice/ticker text (hardcoded white-alpha family) ---- */
body[data-theme="eclipse"] .voice-ticker { border-top-color: rgba(0, 0, 0, 0.10); }
body[data-theme="eclipse"] .voice-tick-item { color: rgba(0, 0, 0, 0.65); }
body[data-theme="eclipse"] .voice-tick-item b { color: rgba(0, 0, 0, 0.88); }
body[data-theme="eclipse"] .voice-tick-ts { color: rgba(0, 0, 0, 0.45); }
body[data-theme="eclipse"] .voice-tick-sep { color: rgba(0, 0, 0, 0.30); }
body[data-theme="eclipse"] .voice-time { color: rgba(0, 0, 0, 0.55); }

/* ---- v348: one button system. Every action button in the app shares
   the same geometry: 10px radius, 1px border, 700 weight, two sizes.
   Variants differ by color only. Badges and pills are labels, not
   buttons, and keep the pill shape. ---- */
.btn-primary, .btn-ghost, .seg {
  font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1.2;
  border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-primary { border: 1px solid var(--accent); padding: 10px 16px; }
.btn-ghost { padding: 10px 16px; }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 10px; }
.seg-row .seg.active, #uex-term-types .seg.active, .guide-tab.active {
  background: rgba(127, 140, 255, .10);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
/* Eclipse: the OB-SR-VR prefetch loader matches the light theme, and
   cards get a touch more shadow so they lift off the white. */
body[data-theme="eclipse"] .muthur-load { background: #ffffff; color: #111113; }
body[data-theme="eclipse"] .muthur-head,
body[data-theme="eclipse"] .muthur-status,
body[data-theme="eclipse"] .muthur-pct { text-shadow: none; }
body[data-theme="eclipse"] .muthur-barwrap { border-color: #111113; box-shadow: none; }
body[data-theme="eclipse"] .muthur-bar { background: repeating-linear-gradient(90deg, #111113 0 8px, transparent 8px 12px); box-shadow: none; }
body[data-theme="eclipse"] .card,
body[data-theme="eclipse"] .guide-card,
body[data-theme="eclipse"] .news-item,
body[data-theme="eclipse"] .tool-card,
body[data-theme="eclipse"] .hq-stat,
body[data-theme="eclipse"] .ship-card {
  box-shadow: 0 1px 2px rgba(16, 16, 20, .07), 0 6px 18px rgba(16, 16, 20, .06);
}

/* ---- v349: button heights are fixed numbers in the system (40px
   regular, 32px small), so mixed rows of primary and ghost buttons
   are always one height and cannot drift by cascade accidents. ---- */
.btn-primary, .btn-ghost, .seg, .guide-tab { box-sizing: border-box; height: 40px; padding-top: 0; padding-bottom: 0; }
.btn-sm { height: 32px; padding-top: 0; padding-bottom: 0; }
.btn-ghost { margin-top: 0; }

/* ---- v350: ship card fill + ship info popup ----
   Photo cards anchor their text block to the bottom of the photo,
   over the darkest part of the shade, and frame the subject a
   little higher so ships stop getting cropped out of their cards.
   Manufacturer picker cards show the whole logo, contained and
   never tiled. */
.ship-card.has-bg { display: flex; flex-direction: column; align-items: stretch; background-position: center 35%; }
.ship-card.has-bg .ship-card-body { margin-top: auto; }
.fleet-ship[data-slug] { cursor: pointer; }
.mfr-card { background-size: contain; background-position: center; background-repeat: no-repeat; }
.ship-pop-org { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 13.5px; }
.ship-pop-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ship-pop-spec { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.ship-pop-spec span { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.ship-pop-spec strong { font-size: 14px; }

/* ---- v351: blueprint cards are clickable throughout ---- */
.bp-card[data-bpuuid] { cursor: pointer; }

/* ---- v352: scrolling fleet lists never compress their rows.
   .fleet-list is a max-height flex column; without this its cards
   shrink below their content height and the card's overflow:hidden
   slices the bottom row of buttons. ---- */
.fleet-list > * { flex-shrink: 0; }

/* Faction reputation (v354) */
.rep-earn-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted, #9aa3b2); white-space: nowrap; cursor: pointer; }
.bp-search-row { flex-wrap: wrap; }
.rep-row { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(128, 128, 128, .15); }
.rep-row:last-child { border-bottom: none; }
.rep-qual { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* Missions browser + detail (Phase B) */
.msn-card { cursor: pointer; }
.msn-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.msn-pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border, #3a3f4a); color: var(--muted, #9aa3b2); }
.msn-pill.good { border-color: #2e7d4f; color: #7fd6a4; }
.msn-pill.bad { border-color: #8a3b3b; color: #e79a9a; }
.msn-top { display: flex; gap: 10px; align-items: flex-start; }
.msn-mono { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px; background: linear-gradient(145deg, #2b2145, #171226); border: 1px solid #4a3a75; color: #cdbcf5; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: .5px; }
.msn-head { min-width: 0; }
.msn-head h4 { margin: 0; }
.msn-tok { color: #7dd3fc; }
.msn-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.msn-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border, #3a3f4a); color: var(--muted, #9aa3b2); }
.msn-chip.sys { border-color: #8a6d2f; color: #e8c56a; }
.msn-chip.typ { border-color: #5b4a9e; color: #b7a6f2; }
.msn-chip.bad { border-color: #8a3b3b; color: #e79a9a; }
.msn-chip.lock { border-color: #9e6a2f; color: #eda95c; }
.msn-chip.bp { border-color: #2f5f8a; color: #8ec9f2; }
.msn-chip.good { border-color: #2e7d4f; color: #7fd6a4; }
.msn-chip.dim { border-color: var(--border, #3a3f4a); color: var(--muted, #9aa3b2); font-weight: 500; }
.msn-stats { display: flex; gap: 28px; border-top: 1px solid var(--border, #3a3f4a); margin-top: 10px; padding-top: 8px; }
.msn-stat span { display: block; font-size: 10px; letter-spacing: 1px; color: var(--muted, #9aa3b2); margin-bottom: 2px; }
.msn-stat strong { font-size: 15px; font-weight: 700; }
.msn-stat strong.rw { color: #f0a832; }
.msn-stat strong.xp { color: #57d98e; }
#tab-blueprints.bp-proto .msn-mono { width: 36px; height: 36px; font-size: 12.5px; border-radius: 8px; }
#tab-blueprints.bp-proto .msn-chip { font-size: 10.5px; padding: 1px 7px; }
#tab-blueprints.bp-proto .msn-stat strong { font-size: 13.5px; }
.msn-desc { white-space: pre-line; }
.msn-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 10px; border: 1px solid var(--border, #3a3f4a); border-radius: 8px; margin: 10px 0; font-size: 13px; }
.msn-h { margin: 14px 0 6px; }
.msn-list { margin: 4px 0 8px; padding-left: 18px; }
.msn-list li { margin: 3px 0; }
.msn-warn { border: 1px solid #8a6d3b; background: rgba(138, 109, 59, 0.12); border-radius: 8px; padding: 8px 10px; margin: 10px 0; font-size: 13px; }
.msn-link { background: none; border: none; padding: 0; color: var(--accent, #8a63ff); cursor: pointer; font: inherit; text-decoration: underline; }
.msn-pool-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.msn-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border, #3a3f4a); background: none; color: inherit; cursor: pointer; }
.msn-chip:hover { border-color: var(--accent, #8a63ff); }

/* Rank Path Planner + rep calculator (Phase C) */
.pln-tier { border: 1px solid var(--border, #3a3f4a); border-radius: 8px; padding: 10px 12px; margin: 8px 0; background: var(--glass-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pln-tier-h { font-weight: 600; margin-bottom: 6px; }
.pln-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; flex-wrap: wrap; }

/* Blueprints layout toggle + Prototype (dense) layout (v360, Rob 2026-10-14).
   The dense layout is scoped to #tab-blueprints.bp-proto: full-width breakout of
   the 640px app column, compact multi-column cards, tightened lists. */
.bp-subnav { flex-wrap: wrap; align-items: center; }
.bp-layout-toggle { margin-left: auto; display: flex; gap: 4px; }
.bp-layout-btn {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); font-size: 12.5px; cursor: pointer;
}
.bp-layout-btn.active { color: var(--text); border-color: var(--accent); background: rgba(139, 92, 246, 0.15); }
#app { transition: max-width 0.25s ease; }
#tab-blueprints.bp-proto .hq-sub { display: none; }
#tab-blueprints.bp-proto .hq-title { margin: 4px 4px 8px; font-size: 20px; }
#tab-blueprints.bp-proto .bp-subnav { padding: 0 4px 8px; gap: 6px; }
#tab-blueprints.bp-proto .bp-subnav-btn { padding: 5px 10px; font-size: 12.5px; }
#tab-blueprints.bp-proto .bp-layout-btn { padding: 5px 10px; font-size: 12px; }
#tab-blueprints.bp-proto .bp-view { padding-left: 0; padding-right: 0; }
#tab-blueprints.bp-proto .bp-grid { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 8px; padding: 0 4px; }
#tab-blueprints.bp-proto .card { padding: 9px 11px; margin: 0 4px 8px; border-radius: 8px; }
#tab-blueprints.bp-proto .bp-grid .card { margin: 0; }
#tab-blueprints.bp-proto .card h3 { font-size: 14px; margin-bottom: 4px; }
#tab-blueprints.bp-proto .card p { font-size: 12px; line-height: 1.4; }
#tab-blueprints.bp-proto .bp-card-top { margin-bottom: 4px; font-size: 13px; }
#tab-blueprints.bp-proto .bp-card-type { font-size: 10px; }
#tab-blueprints.bp-proto .bp-card-actions { gap: 6px; }
#tab-blueprints.bp-proto .bp-search-row { gap: 6px; padding: 0 4px 8px; }
#tab-blueprints.bp-proto .field { padding: 7px 9px; font-size: 13px; }
#tab-blueprints.bp-proto .section-title { margin: 12px 4px 6px; font-size: 15px; }
#tab-blueprints.bp-proto .msn-desc { display: none; }
#tab-blueprints.bp-proto .msn-h { font-size: 13.5px; margin-bottom: 2px; }
#tab-blueprints.bp-proto .msn-pill { font-size: 10.5px; padding: 1px 7px; }
#tab-blueprints.bp-proto .msn-stats { font-size: 12px; }
#tab-blueprints.bp-proto .msn-list { padding: 0 4px; }
#tab-blueprints.bp-proto .btn-ghost, #tab-blueprints.bp-proto .btn-primary { padding: 6px 10px; font-size: 12.5px; }

/* Mobile + legibility pass for the Blueprints module (v365, Rob 2026-10-14):
   filter selects were crushed into unreadable slivers on phones, planner
   steps and intro text sat directly on the nebula. */
.bp-intro { background: var(--glass-card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 0 12px 12px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pln-summary { background: var(--glass-card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#tab-blueprints .bp-view > p.muted { text-shadow: 0 1px 6px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .9); }
#msn-count { padding: 0 12px; }
.msn-head h4 { overflow-wrap: anywhere; }
.rep-earn-toggle input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent, #8a63ff); flex: 0 0 auto; }
@media (max-width: 700px) {
  .bp-search-row .field { flex: 1 1 44%; max-width: none !important; font-size: 16px; min-height: 44px; min-width: 0; }
  .bp-search-row input.field { flex: 1 1 100%; }
  .bp-search-row .rep-earn-toggle { flex: 1 1 44%; min-height: 44px; display: flex; align-items: center; gap: 8px; }
  .bp-search-row .btn-ghost, .bp-search-row .btn-primary { flex: 1 1 44%; min-height: 44px; }
  .rep-row { flex-wrap: wrap; }
  .rep-row > * { min-width: 0; }
  .pln-row { font-size: 13.5px; }
}

/* Shopping list links + rows (v366) */
#bp-shop-list { padding: 0 12px; }
.shop-for { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.shop-for .msn-chip { font-size: 12.5px; text-align: left; }
.shop-mat { cursor: pointer; }
.shop-mat-main { min-width: 0; overflow-wrap: anywhere; }
.shop-mat-amt { flex: 0 0 auto; white-space: nowrap; }

/* Catalog category hub (v367) */
.bp-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 12px 10px; }
.bp-crumb { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; }
.bp-crumb.on { color: var(--text); border-color: var(--accent, #8a63ff); }
.bp-crumb-sep { color: var(--muted); font-size: 12px; }
.bp-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; padding: 0 12px 12px; }
.bp-tile { text-align: left; background: var(--glass-card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; cursor: pointer; color: var(--text); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bp-tile:hover { border-color: var(--accent, #8a63ff); }
.bp-tile h4 { margin: 0 0 4px; font-size: 15.5px; }
.bp-tile .bp-tile-n { font-size: 22px; font-weight: 800; color: var(--accent, #8a63ff); }
.bp-tile p { margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.bp-mode-toggle { display: flex; gap: 4px; padding: 0 12px 10px; }
.bp-facets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 12px 10px; }
.bp-facets .msn-chip.on { border-color: var(--accent, #8a63ff); color: var(--text); background: rgba(138, 99, 255, .16); }
.bp-facets select.field { max-width: 200px; margin-bottom: 0; }
.bp-facet-label { font-size: 11px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; margin-right: 2px; }
.shop-for .msn-chip.on { border-color: var(--accent, #8a63ff); color: var(--text); background: rgba(138, 99, 255, .16); }
#bp-catalog.bp-nav-browse #bp-type-filter, #bp-catalog.bp-nav-browse #bp-sort, #bp-catalog.bp-nav-browse .rep-earn-toggle { display: none; }

/* Ship loadout editor (v374) */
.lo-row { margin-bottom: 10px; }
.lo-row .lo-label { width: 100%; }
.lo-row2 { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.lo-row2 .field { flex: 1 1 100px; min-width: 0; }
.lo-row2 .lo-count { flex: 0 1 64px; }
.lo-row2 .lo-del { flex: 0 0 auto; }

/* User-centric home (v376): wide canvas + widget grid */
#app { transition: max-width .35s ease; }
#app.wide { max-width: none; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; margin-bottom: 14px; }
.home-grid .card { margin-bottom: 0; }
.home-strip { margin-bottom: 14px; }
/* v437: Headquarters home is organized into labeled zones
   (Operations / My Fleet / Progression). Each zone is its own grid;
   cards stretch to fill their cell so rows align and the wide canvas
   reads as one composed deck instead of scattered cards. Narrow
   screens stack each zone in a single column, zone order preserved. */
.home-zone { margin-bottom: 22px; }
/* v438: zone headers get a real band (accent bar + tinted gradient +
   trailing rule) so the splits read at a glance. */
.home-zone-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 9px 14px; font-size: 13px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; background: linear-gradient(90deg, rgba(138,99,255,0.22), rgba(138,99,255,0.05) 55%, transparent); border-left: 3px solid var(--accent, #8a63ff); border-radius: 8px; }
.home-zone-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(138,99,255,0.5), transparent); }
.home-zone-stack { display: grid; gap: 14px; }
.home-zone-stack > .card { margin-bottom: 0; }
#hq-announcement { margin-bottom: 14px; }
#hq-announcement:empty { display: none; margin: 0; }
.home-zone-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
.home-zone-grid > .card { margin-bottom: 0; height: 100%; display: flex; flex-direction: column; }
@media (min-width: 1150px) {
  .home-zone-grid { grid-auto-rows: 1fr; }
  .zone-ops { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
  .zone-fleet { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .zone-prog { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
}
.home-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.home-row:first-of-type { border-top: none; }
.home-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 5px; }
.home-bar span { display: block; height: 100%; background: var(--accent, #7f8cff); border-radius: 3px; }

/* My Reputation tool (v379) */
.rep-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.rep-card { margin-bottom: 0; }
.rep-card-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.rep-logo { width: 40px; height: 40px; border-radius: 9px; object-fit: contain; background: rgba(255,255,255,0.06); flex-shrink: 0; }
.rep-mono { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--accent, #8ab4ff); }
.rep-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-chip { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: inherit; border-radius: 999px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; }
.rep-chip:hover { border-color: var(--accent, #8ab4ff); }
.rep-chip.on { background: var(--accent, #7f8cff); border-color: var(--accent, #7f8cff); color: #fff; font-weight: 600; }
.rep-chip-xp { opacity: 0.65; font-size: 11px; }
.rep-tree-seg { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.rep-tree-seg .btn-ghost.active { background: var(--accent, #7f8cff); color: #fff; border-color: var(--accent, #7f8cff); }
.rep-flash { outline: 2px solid var(--accent, #7f8cff); outline-offset: 2px; }
.rep-row .rep-logo { width: 34px; height: 34px; }

/* Loadout fit totals (v380) */
.lo-stats { border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,0.03); }

/* Main Ship card (v381) */
.mainship-card { padding: 0; overflow: hidden; }
.mainship-hero { position: relative; min-height: 150px; background: linear-gradient(135deg, rgba(127,140,255,0.25), rgba(0,0,0,0.35)); }
.mainship-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mainship-hero-text { position: relative; padding: 64px 14px 12px; background: linear-gradient(transparent, rgba(5,8,16,0.72)); color: #fff; }
.mainship-hero-text h3 { margin: 2px 0; font-size: 22px; color: #fff; }
.mainship-sub { font-size: 12.5px; opacity: 0.9; }
.mainship-fit { padding: 10px 14px 0; font-size: 13px; }
.mainship-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 14px 14px; }
.main-pick-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-bottom: 8px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; background: rgba(255,255,255,0.03); color: inherit; cursor: pointer; }
.main-pick-row img { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }

.mainship-card > h3, .mainship-card > p, .mainship-card > button { margin-left: 14px; margin-right: 14px; }
.mainship-card > h3 { margin-top: 14px; }
.mainship-card > button { margin-bottom: 14px; }

/* In-app tip card (v396): one rotating tip per visit, bottom right,
   clear of the chat dock on the left. Solid surface (--card, NOT the
   translucent --glass-card: Rob's 2026-10-15 screenshot showed the
   form ghosting through), no backdrop filter (it can sit over
   scrolling content). */
.tip-card {
  position: fixed; right: 14px; bottom: 18px; z-index: 900;
  width: min(340px, calc(100vw - 28px));
  background: var(--card, #17141f);
  border: 1px solid rgba(138, 99, 255, .45);
  border-left: 3px solid #8a63ff;
  border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.tip-card .tip-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #b79cff; margin-bottom: 4px;
}
.tip-card p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.tip-card .tip-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.tip-card .tip-close {
  position: absolute; top: 4px; right: 8px;
  background: none; border: none; color: inherit; opacity: .6;
  font-size: 18px; line-height: 1; cursor: pointer; padding: 4px;
}
@media (max-width: 760px) {
  .tip-card { bottom: 86px; }
}

/* ---- v403: Command > Ledger ---- */
.ledger-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.ledger-stat { background: rgba(127, 140, 255, 0.06); border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; min-width: 0; }
.ledger-stat-num { display: block; font-size: 18px; font-weight: 800; }
.ledger-stat-label { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
#cmd-pane-ledger .seg-row { flex-wrap: wrap; }
#tool-library .seg-row { flex-wrap: wrap; }
.lib-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.doc-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.doc-body { min-height: 42vh; max-height: 60vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: rgba(127, 140, 255, .04); line-height: 1.5; }
.doc-body:focus { outline: 1px solid var(--accent); }
@media (max-width: 560px) { .ledger-stat-num { font-size: 14px; } }
.ledger-catchip { display: inline-block; font-size: 12px; border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; margin: 0 6px 8px 0; color: var(--muted); }
.ledger-row { border-top: 1px solid var(--border); padding: 10px 0; }
.ledger-main { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ledger-kind { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(127, 140, 255, 0.12); }
.ledger-kind-deposit { background: rgba(74, 222, 128, 0.15); }
.ledger-kind-withdrawal { background: rgba(248, 113, 113, 0.15); }
.ledger-kind-transfer { background: rgba(251, 191, 36, 0.15); }
.ledger-who { font-weight: 700; }
.ledger-cat { color: var(--muted); font-size: 12px; }
.ledger-note { font-size: 13px; margin-top: 2px; overflow-wrap: break-word; }
.ledger-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--muted); }
.ledger-src { border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; }
.ledger-amt-in { color: #4ade80; font-weight: 800; margin-left: auto; }
.ledger-amt-out { color: #f87171; font-weight: 800; margin-left: auto; }
.ledger-amt-xfer { color: var(--muted); font-weight: 800; margin-left: auto; }
body[data-theme="eclipse"] .ledger-amt-in { color: #16a34a; }
body[data-theme="eclipse"] .ledger-amt-out { color: #dc2626; }

/* v404: screenshot deposit submissions */
.ledger-sub{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.ledger-sub-img{width:150px;height:110px;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:rgba(0,0,0,0.15);flex:0 0 auto}
.ledger-sub-main{flex:1 1 auto;display:flex;flex-direction:column;gap:6px}
.ledger-sub-who{font-size:.95rem}
#dep-card input[type="file"]{color:var(--text)}
@media (max-width:640px){.ledger-sub{flex-direction:column}.ledger-sub-img{width:100%;height:180px}}

/* v426: Android scroll-ghosting fix (Rob's 2026-10-16 recording).
   Headquarters cards are translucent glass with backdrop blur, and
   Android WebView repaints backdrop-filtered surfaces that move with
   the page as doubled text and horizontal streaks. On touch devices
   the home cards and the floating chrome over the scrolling page use
   the solid theme surface instead; desktop keeps the glass look. */
@media (pointer: coarse) {
  #tab-home .card {
    background: var(--card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .app-header, #chat-fab, #presence-pill, #lobby-fab {
    background: var(--card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Manage Roles editor chips (v429) */
.mgr-chip.mgr-on { background: rgba(127,140,255,0.85); border-color: rgba(127,140,255,0.85); color: #fff; }

/* ================================================================
   NEXT 1.0 TEST THEME (test bed only, started 2026-10-23)
   Design language from the 1.0 concept frames: deep indigo-black,
   luminous violet glass panels, glowing primary actions.
   This layer sits last so it wins; remove the block to revert.
   ================================================================ */
.card, .ship-card, .guide-card, .op-card, .news-card, .tip-card,
.patch-card, .tool-card, .fb-card, .mfr-card, .mainship-card,
.login-member-card, .toast-card {
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.16), rgba(19, 12, 44, 0.55) 42%, rgba(9, 6, 22, 0.68));
  border: 1px solid rgba(167, 139, 250, 0.38);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(139, 92, 246, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.app-header {
  background: linear-gradient(180deg, rgba(16, 10, 36, 0.88), rgba(8, 5, 18, 0.78));
  border-bottom: 1px solid rgba(167, 139, 250, 0.4);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 1px 14px rgba(139, 92, 246, 0.22);
}
.btn-primary {
  background: linear-gradient(135deg, #9d6bff, #6d3fd4);
  border: 1px solid rgba(196, 181, 253, 0.55);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-ghost {
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.08);
}
.tab.active, .nav-btn.active {
  color: #e9e4ff;
  text-shadow: 0 0 12px rgba(167, 139, 250, 0.8);
}
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background: rgba(10, 7, 24, 0.72);
  border: 1px solid rgba(167, 139, 250, 0.32);
  border-radius: 12px;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(167, 139, 250, 0.85);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25), 0 0 16px rgba(139, 92, 246, 0.2);
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.45); border-radius: 99px; }
::-webkit-scrollbar-track { background: rgba(10, 7, 24, 0.4); }