/* Parabellum Federation — tactical dark UI */
:root {
  --bg: #070c18;
  --bg-2: #0b1322;
  --panel: rgba(16, 26, 46, 0.78);
  --panel-solid: #111c32;
  --panel-2: rgba(24, 38, 66, 0.7);
  --line: rgba(120, 160, 220, 0.16);
  --line-2: rgba(120, 160, 220, 0.3);
  --text: #e3ecf8;
  --muted: #8b9bb7;
  --dim: #5b6b88;
  --accent: #ffb020;
  --accent-2: #ff8a00;
  --accent-glow: rgba(255, 176, 32, 0.35);
  --teal: #38e1c8;
  --good: #3ddc84;
  --bad: #ff5c5c;
  --warn: #ffcf4a;
  --info: #4fa3ff;
  --credits: #f5d36b;
  --steel: #b9c4d3;
  --fuel: #ff9a5c;
  --electronics: #5ce1ff;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --top-h: 64px;
  --ticker-h: 30px;
  --nav-w: 84px;
  --bottom-h: 0px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(1200px 800px at 70% -10%, #13234a 0%, transparent 60%),
              radial-gradient(900px 700px at -10% 110%, #2a1640 0%, transparent 55%), var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.hidden { display: none !important; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.center { text-align: center; }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: 0.01em; }
h2 { font-size: 20px; }
h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(120, 160, 220, 0.22); border-radius: 8px; }
::selection { background: var(--accent-glow); }

/* ---------- boot ---------- */
.boot { position: fixed; inset: 0; display: grid; place-items: center; align-content: center; gap: 22px; }
.boot-hex {
  width: 70px; height: 80px; background: var(--accent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation: pulse 1.4s ease-in-out infinite;
}
.boot-label { letter-spacing: 0.4em; color: var(--muted); font-size: 12px; }
@keyframes pulse { 0%, 100% { transform: scale(0.9); opacity: 0.6; } 50% { transform: scale(1.05); opacity: 1; } }

/* ---------- buttons & inputs ---------- */
.btn {
  --b: var(--panel-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: var(--b); cursor: pointer; font-weight: 600; white-space: nowrap;
  transition: transform 0.08s ease, background 0.15s, border-color 0.15s, box-shadow 0.2s, opacity 0.15s;
  user-select: none;
}
.btn:hover { border-color: rgba(160, 200, 255, 0.5); background: rgba(40, 60, 100, 0.7); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn.primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #1c1100; border-color: transparent; box-shadow: 0 4px 18px var(--accent-glow); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { background: linear-gradient(180deg, #ff5c5c, #d83434); color: #fff; border-color: transparent; box-shadow: 0 4px 18px rgba(255, 70, 70, 0.35); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: rgba(120, 160, 220, 0.1); }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.btn.icon { padding: 8px; width: 38px; height: 38px; }
.btn.block { width: 100%; }
.btn.nuke { background: repeating-linear-gradient(45deg, #ffd400 0 14px, #1a1a1a 14px 28px); color: #fff; text-shadow: 0 1px 3px #000; border: 2px solid #ffd400; }

.input, select.input, textarea.input {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: rgba(5, 10, 20, 0.6); outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.input.sm { padding: 6px 8px; font-size: 13px; }
input[type=number].input { font-family: var(--mono); }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

.tabs { display: flex; gap: 4px; padding: 4px; background: rgba(5, 10, 20, 0.5); border-radius: 11px; border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 7px 12px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; color: var(--muted); font-weight: 600; white-space: nowrap; transition: background 0.15s, color 0.15s; display: inline-flex; gap: 6px; align-items: center; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }

.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12px; background: rgba(5, 10, 20, 0.4); }
.chip.good { border-color: rgba(61, 220, 132, 0.4); color: var(--good); }
.chip.bad { border-color: rgba(255, 92, 92, 0.4); color: var(--bad); }
.chip.warn { border-color: rgba(255, 207, 74, 0.4); color: var(--warn); }
.chip.info { border-color: rgba(79, 163, 255, 0.4); color: var(--info); }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow);
}
.panel-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.panel-b { padding: 14px 16px; }
.card { background: rgba(10, 18, 34, 0.6); border: 1px solid var(--line); border-radius: 12px; padding: 12px; transition: border-color 0.15s, transform 0.15s; }
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: var(--line-2); transform: translateY(-1px); }
.card.locked { opacity: 0.55; }
.empty { padding: 28px 12px; text-align: center; color: var(--dim); }

/* progress */
.progress { height: 6px; border-radius: 6px; background: rgba(120, 160, 220, 0.14); overflow: hidden; position: relative; }
.progress > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 6px; transition: width 1s linear; }
.progress.teal > i { background: linear-gradient(90deg, #1fa3c9, var(--teal)); }
.progress.red > i { background: linear-gradient(90deg, #b82020, var(--bad)); }
.progress.striped > i { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 8px, transparent 8px 16px), linear-gradient(90deg, var(--accent-2), var(--accent)); background-size: 22px 22px, auto; animation: stripes 0.8s linear infinite; }
@keyframes stripes { to { background-position: 22px 0, 0 0; } }

/* ---------- auth ---------- */
.auth { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.auth canvas.bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.auth-card { position: relative; z-index: 1; width: min(420px, 100%); padding: 28px; animation: rise 0.5s cubic-bezier(.2,.9,.3,1.2); }
.auth-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.auth-logo .hex { width: 46px; height: 52px; background: linear-gradient(160deg, var(--accent), var(--accent-2)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: grid; place-items: center; font-size: 22px; }
.auth-logo h1 { font-size: 22px; letter-spacing: 0.14em; line-height: 1.1; }
.auth-logo h1 small { display: block; font-size: 11px; letter-spacing: 0.45em; color: var(--accent); font-weight: 600; }
.auth-tag { color: var(--muted); margin: 0 0 20px; }
.auth form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.auth .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.auth .features div { text-align: center; font-size: 11px; color: var(--muted); padding: 10px 4px; border-radius: 10px; background: rgba(5, 10, 20, 0.4); border: 1px solid var(--line); }
.auth .features b { display: block; font-size: 20px; margin-bottom: 2px; }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ---------- shell ---------- */
.shell { position: fixed; inset: 0; display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-rows: var(--top-h) var(--ticker-h) 1fr; }
.topbar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 14px; padding-top: var(--safe-t);
  border-bottom: 1px solid var(--line); background: rgba(7, 12, 24, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; width: calc(var(--nav-w) - 14px); flex-shrink: 0; }
.brand .hex { width: 30px; height: 34px; background: linear-gradient(160deg, var(--accent), var(--accent-2)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: grid; place-items: center; font-size: 14px; }
.sett-switch { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(5,10,20,0.5); cursor: pointer; max-width: 240px; min-width: 0; }
.sett-switch:hover { border-color: var(--line-2); }
.sett-switch .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sett-switch .coords { font-family: var(--mono); color: var(--muted); font-size: 12px; }
.resbar { display: flex; gap: 6px; flex: 1; justify-content: center; min-width: 0; }
.res {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; border-radius: 10px;
  background: rgba(5, 10, 20, 0.55); border: 1px solid var(--line); min-width: 112px; overflow: hidden;
}
.res .ico { font-size: 16px; }
.res .v { font-family: var(--mono); font-weight: 700; font-size: 14px; line-height: 1.1; }
.res .rate { font-family: var(--mono); font-size: 10px; color: var(--muted); line-height: 1.1; }
.res .fill { position: absolute; left: 0; bottom: 0; height: 3px; background: currentColor; opacity: 0.9; transition: width 1s linear; }
.res.full { border-color: rgba(255, 92, 92, 0.5); }
.res.full .v { color: var(--bad); }
.res.credits { color: var(--credits); } .res.steel { color: var(--steel); } .res.fuel { color: var(--fuel); } .res.electronics { color: var(--electronics); }
.res .v, .res .rate { color: var(--text); }
.res .rate { color: var(--muted); }
.res.pop { color: var(--teal); min-width: 96px; }
.res.bump .v { animation: bump 0.5s; }
@keyframes bump { 30% { transform: scale(1.18); color: var(--good); } }
.top-actions { display: flex; align-items: center; gap: 4px; }
.top-actions .btn { position: relative; }
.top-actions .badge { position: absolute; top: -2px; right: -2px; }

.sidenav { grid-row: 3; display: flex; flex-direction: column; gap: 2px; padding: 8px 8px; border-right: 1px solid var(--line); background: rgba(7, 12, 24, 0.6); backdrop-filter: blur(10px); z-index: 10; overflow-y: auto; }
.navbtn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border-radius: 12px; border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 600; transition: background 0.15s, color 0.15s; }
.navbtn .i { font-size: 18px; filter: grayscale(0.6); transition: filter 0.15s, transform 0.15s; }
.navbtn:hover { background: rgba(120, 160, 220, 0.08); color: var(--text); }
.navbtn.active { background: linear-gradient(180deg, rgba(255, 176, 32, 0.16), rgba(255, 176, 32, 0.04)); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.3); }
.navbtn.active .i { filter: none; transform: scale(1.1); }
.navbtn .badge { position: absolute; top: 4px; right: 10px; }
.navbtn.alert { animation: alertpulse 1.2s ease-in-out infinite; }
@keyframes alertpulse { 50% { background: rgba(255, 70, 70, 0.22); color: var(--bad); } }

.main { grid-row: 3; position: relative; overflow: hidden; }
.view { position: absolute; inset: 0; overflow-y: auto; padding: 16px; animation: viewin 0.28s ease; }
.view.full { padding: 0; overflow: hidden; }
@keyframes viewin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* incoming banner */
.incoming-banner { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(120, 10, 10, 0.85); border: 1px solid var(--bad); box-shadow: 0 0 30px rgba(255, 50, 50, 0.4); cursor: pointer; font-weight: 600; animation: bannerpulse 1.5s infinite; white-space: nowrap; }
@keyframes bannerpulse { 50% { box-shadow: 0 0 50px rgba(255, 50, 50, 0.7); } }

/* ---------- base view ---------- */
.base { display: grid; grid-template-columns: 1fr 380px; height: 100%; }
.base-canvas { position: relative; min-height: 0; }
.base-canvas canvas, .canvas-wrap canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.base-canvas canvas:active { cursor: grabbing; }
.canvas-hud { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.canvas-hud > * { pointer-events: auto; }
.canvas-tools { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.hud-card { padding: 10px 12px; border-radius: 12px; background: rgba(7, 12, 24, 0.72); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.hud-title { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.base-side { border-left: 1px solid var(--line); background: rgba(7, 12, 24, 0.55); backdrop-filter: blur(10px); overflow-y: auto; display: flex; flex-direction: column; }
.side-section { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.side-section h3 { margin-bottom: 10px; }
.bld-head { display: flex; gap: 12px; align-items: center; }
.bld-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 6px 20px rgba(0,0,0,0.3); }
.bld-name { font-size: 17px; font-weight: 800; }
.lvl { font-family: var(--mono); font-size: 12px; padding: 2px 7px; border-radius: 6px; background: rgba(255, 176, 32, 0.15); color: var(--accent); font-weight: 700; }
.cost { display: flex; flex-wrap: wrap; gap: 6px 12px; font-family: var(--mono); font-size: 12px; }
.cost span { display: inline-flex; align-items: center; gap: 3px; }
.cost .short { color: var(--bad); }
.effect { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12px; margin: 10px 0; }
.effect dt { color: var(--muted); }
.effect dd { margin: 0; font-family: var(--mono); }
.build-list { display: grid; gap: 8px; }
.build-item { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10, 18, 34, 0.6); cursor: pointer; transition: border-color 0.15s, background 0.15s; text-align: left; width: 100%; }
.build-item:hover:not(:disabled) { border-color: var(--accent); background: rgba(255, 176, 32, 0.06); }
.build-item:disabled { opacity: 0.45; cursor: not-allowed; }
.build-item .bld-icon { width: 40px; height: 40px; font-size: 20px; border-radius: 10px; }
.queue-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.queue-item:last-child { border-bottom: 0; }

/* ---------- map view ---------- */
.mapview { position: relative; height: 100%; }
.mapview canvas.map { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.map-search { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; z-index: 5; }
.map-search .input { width: 74px; }
.map-coord { position: absolute; left: 12px; bottom: 12px; font-family: var(--mono); font-size: 12px; z-index: 5; }
.minimap { position: absolute; right: 12px; bottom: 12px; width: 180px; height: 160px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: #050a14; box-shadow: var(--shadow); z-index: 5; }
.minimap canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.map-zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.map-legend { position: absolute; top: 60px; left: 12px; font-size: 11px; display: flex; flex-direction: column; gap: 3px; z-index: 5; }
.map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.map-info { position: absolute; z-index: 8; width: min(340px, calc(100% - 24px)); right: 12px; top: 12px; animation: pop 0.22s cubic-bezier(.2,.9,.3,1.3); }
@keyframes pop { from { opacity: 0; transform: scale(0.94) translateY(-6px); } to { opacity: 1; transform: none; } }
.map-tip { position: absolute; pointer-events: none; z-index: 6; padding: 6px 10px; border-radius: 8px; background: rgba(5, 10, 20, 0.9); border: 1px solid var(--line-2); font-size: 12px; white-space: nowrap; transform: translate(14px, 14px); }
.actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* ---------- military ---------- */
.page { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
.page-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-h h2 { font-size: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.unit-card { display: flex; flex-direction: column; gap: 10px; }
.unit-card .top { display: flex; gap: 10px; align-items: flex-start; }
.unit-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(160deg, rgba(79,163,255,0.25), rgba(79,163,255,0.05)); border: 1px solid var(--line-2); flex-shrink: 0; }
.unit-icon.missile { background: linear-gradient(160deg, rgba(255,92,92,0.3), rgba(255,92,92,0.05)); }
.unit-icon.nuke { background: linear-gradient(160deg, rgba(220,230,60,0.35), rgba(220,230,60,0.05)); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stat { text-align: center; padding: 5px 2px; border-radius: 7px; background: rgba(5, 10, 20, 0.5); font-size: 11px; }
.stat b { display: block; font-family: var(--mono); font-size: 13px; color: var(--text); }
.stat span { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.train-row { display: flex; gap: 6px; }
.train-row .input { flex: 1; min-width: 0; }
.troop-table { width: 100%; border-collapse: collapse; }
.troop-table th, .troop-table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13px; }
.troop-table th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.troop-table td.n { text-align: right; font-family: var(--mono); }
.troop-table tr:last-child td { border-bottom: 0; }
.mv { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.mv:last-child { border-bottom: 0; }
.mv .k { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: rgba(79,163,255,0.15); flex-shrink: 0; }
.mv.hostile .k { background: rgba(255, 92, 92, 0.2); animation: alertpulse 1.5s infinite; }
.mv.strike .k { background: rgba(255, 176, 32, 0.2); }
.mv .eta { font-family: var(--mono); font-weight: 700; text-align: right; }

/* ---------- reports ---------- */
.reports { display: grid; grid-template-columns: 380px 1fr; gap: 16px; height: 100%; }
.report-list { overflow-y: auto; display: flex; flex-direction: column; }
.report-row { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.12s; }
.report-row:hover { background: rgba(120, 160, 220, 0.06); }
.report-row.active { background: rgba(255, 176, 32, 0.08); box-shadow: inset 3px 0 0 var(--accent); }
.report-row .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.report-row.unread .t { font-weight: 700; }
.report-row .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-detail { overflow-y: auto; }
.outcome-win { color: var(--good); } .outcome-loss { color: var(--bad); } .outcome-partial { color: var(--warn); }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.report-hero { padding: 18px; border-radius: 14px; position: relative; overflow: hidden; }
.report-hero.win { background: linear-gradient(135deg, rgba(61,220,132,0.18), transparent); border: 1px solid rgba(61,220,132,0.3); }
.report-hero.loss { background: linear-gradient(135deg, rgba(255,92,92,0.18), transparent); border: 1px solid rgba(255,92,92,0.3); }
.report-hero.partial { background: linear-gradient(135deg, rgba(255,207,74,0.16), transparent); border: 1px solid rgba(255,207,74,0.3); }
.intel-grid canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.intel-grid { height: 360px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: rgba(3, 6, 14, 0.6); position: relative; }

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; height: 100%; min-height: 360px; }
.chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 82%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: rgba(24, 38, 66, 0.8); border: 1px solid var(--line); animation: pop 0.2s; word-wrap: break-word; }
.msg.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: rgba(255, 176, 32, 0.14); border-color: rgba(255, 176, 32, 0.3); }
.msg .who { font-size: 11px; font-weight: 700; color: var(--accent); }
.msg .when { font-size: 10px; color: var(--dim); margin-left: 6px; }
.chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }

/* ---------- toasts ---------- */
#toasts { position: fixed; top: calc(var(--top-h) + 10px); right: 14px; z-index: 200; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 28px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(12, 20, 38, 0.94); border: 1px solid var(--line-2); box-shadow: var(--shadow); animation: toastin 0.35s cubic-bezier(.2,.9,.3,1.3); cursor: pointer; position: relative; overflow: hidden; backdrop-filter: blur(10px); }
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--info); }
.toast.success::before { background: var(--good); } .toast.danger::before { background: var(--bad); } .toast.warn::before { background: var(--warn); }
.toast.danger { border-color: rgba(255, 92, 92, 0.5); }
.toast .ti { font-size: 20px; line-height: 1; }
.toast .tt { font-weight: 700; }
.toast .tb { color: var(--muted); font-size: 12px; }
.toast .life { position: absolute; left: 0; bottom: 0; height: 2px; background: rgba(255,255,255,0.25); animation: life linear forwards; }
.toast.out { animation: toastout 0.3s forwards; }
@keyframes toastin { from { opacity: 0; transform: translateX(40px) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes toastout { to { opacity: 0; transform: translateX(40px); } }
@keyframes life { from { width: 100%; } to { width: 0; } }

/* ---------- modal ---------- */
.modal-back { position: fixed; inset: 0; z-index: 100; background: rgba(2, 5, 12, 0.65); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; animation: fade 0.2s; }
.modal { width: min(560px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; animation: rise 0.28s cubic-bezier(.2,.9,.3,1.2); background: var(--panel-solid); }
.modal.wide { width: min(880px, 100%); }
.modal .panel-b { overflow-y: auto; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); }
@keyframes fade { from { opacity: 0; } }
.dropdown { position: fixed; z-index: 110; min-width: 260px; max-width: calc(100vw - 20px); max-height: 70vh; overflow-y: auto; animation: pop 0.18s; background: var(--panel-solid); }
.dropdown .item { display: flex; gap: 10px; align-items: center; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--line); }
.dropdown .item:hover { background: rgba(120, 160, 220, 0.08); }
.dropdown .item:last-child { border-bottom: 0; }
.dropdown .item.current { color: var(--accent); }

/* unit selector rows in send dialog */
.unit-pick { display: grid; grid-template-columns: 30px 1fr 64px 92px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.unit-pick:last-child { border-bottom: 0; }
.unit-pick .have { font-family: var(--mono); color: var(--muted); text-align: right; cursor: pointer; font-size: 12px; }
.unit-pick .have:hover { color: var(--accent); }
.weapon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.weapon { padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(5,10,20,0.5); cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s; }
.weapon:hover:not(:disabled) { border-color: var(--line-2); }
.weapon.sel { border-color: var(--bad); background: rgba(255, 92, 92, 0.1); box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.15); }
.weapon:disabled { opacity: 0.4; cursor: not-allowed; }
.weapon .wi { font-size: 22px; }

/* screen shake for nuclear impacts */
.shake { animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) 2; }
@keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-6px, 3px); } 40%, 60% { transform: translate(6px, -3px); } }
.flash { position: fixed; inset: 0; background: #fff; z-index: 300; pointer-events: none; animation: flash 1.4s ease-out forwards; }
@keyframes flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .res { min-width: 0; padding: 6px 8px 8px; }
  .res .rate { display: none; }
}
@media (max-width: 1100px) {
  .base { grid-template-columns: 1fr 330px; }
  .reports { grid-template-columns: 320px 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --top-h: 104px; --nav-w: 0px; --bottom-h: calc(62px + var(--safe-b)); }
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--top-h) var(--ticker-h) 1fr var(--bottom-h); }
  .topbar { flex-wrap: wrap; align-content: center; gap: 6px 8px; padding: 6px 10px; padding-top: calc(6px + var(--safe-t)); }
  .brand { width: auto; }
  .brand .label { display: none; }
  .sett-switch { flex: 1; max-width: none; }
  .resbar { order: 5; width: 100%; flex: none; gap: 4px; justify-content: space-between; }
  .res { flex: 0 0 auto; gap: 4px; padding: 4px 6px 6px; border-radius: 8px; }
  .resbar { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .resbar::-webkit-scrollbar { display: none; }
  .res .rate { display: block; font-size: 9px; }
  .cat-tabs .cat-label { display: none; }
  .exchange { grid-template-columns: 1fr !important; }
  .watch-list { max-height: 260px; }
  .soc-hero { grid-template-columns: 1fr 1fr !important; }
  .gauge-card svg { width: 100%; height: auto; }
  .topbar, .main, .page { min-width: 0; }
  .soc-hero .pop-card { grid-column: 1 / -1; }
  .profile-hero { flex-direction: column; text-align: center; }
  .res .ico { font-size: 13px; }
  .res .v { font-size: 12px; }
  .sidenav { grid-row: 4; flex-direction: row; justify-content: space-around; padding: 4px 4px var(--safe-b); border-right: 0; border-top: 1px solid var(--line); background: rgba(7, 12, 24, 0.92); overflow-x: auto; }
  .navbtn { flex: 1; padding: 6px 2px; font-size: 10px; min-width: 52px; }
  .navbtn.more-only { display: none; }
  .navbtn .badge { right: 6px; top: 0; }
  .base { grid-template-columns: 1fr; grid-template-rows: 52% 48%; }
  .base-side { border-left: 0; border-top: 1px solid var(--line); }
  .reports { grid-template-columns: 1fr; }
  .reports.detail-open .report-list-panel { display: none !important; }
  .reports:not(.detail-open) .report-detail-panel { display: none !important; }
  .grid-2, .grid-3, .vs { grid-template-columns: 1fr; }
  .view { padding: 12px; }
  .minimap { width: 120px; height: 106px; }
  .map-legend { display: none; }
  .map-info { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; }
  #toasts { top: auto; bottom: calc(var(--bottom-h) + 10px); right: 10px; left: 10px; width: auto; }
  .modal-back { place-items: end center; padding: 0; }
  .modal, .modal.wide { width: 100%; border-radius: 18px 18px 0 0; max-height: 92dvh; animation: sheet 0.3s cubic-bezier(.2,.9,.3,1); padding-bottom: var(--safe-b); }
  @keyframes sheet { from { transform: translateY(100%); } }
  .intel-grid { height: 300px; }
  .unit-pick { grid-template-columns: 26px 1fr 54px 80px; }
  .top-actions .hide-m { display: none; }
}
@media (min-width: 861px) {
  .navbtn.mobile-only { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ================= v2: economy, society, market, admin ================= */
.wide-page { max-width: 1440px; }
.mono.big, .big { font-size: 22px; font-weight: 800; }
.rate.bad { color: var(--bad) !important; }
.rate.good { color: var(--good) !important; }
.res { cursor: pointer; }
.res.low { border-color: rgba(255, 207, 74, 0.6); animation: alertpulse 2s infinite; }
.res.power { color: #ffe066; min-width: 96px; }
.res.more { min-width: 0; padding: 6px 10px; justify-content: center; color: var(--muted); border: 1px solid var(--line); }
.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; font-weight: 800; font-size: 13px; }
.avatar.ph { background: linear-gradient(160deg, var(--accent), var(--accent-2)); color: #1c1100; }
.avatar.xl { width: 96px; height: 96px; font-size: 40px; border: 3px solid var(--accent); box-shadow: 0 0 30px var(--accent-glow); flex-shrink: 0; }

/* news ticker */
.ticker { grid-column: 1 / -1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px; height: var(--ticker-h); background: rgba(5, 9, 18, 0.9); border-bottom: 1px solid var(--line); overflow: hidden; font-size: 12px; z-index: 19; }
.world-events { display: flex; gap: 6px; flex-shrink: 0; }
.event-chip { padding: 1px 8px; font-size: 11px; white-space: nowrap; }
.ticker-viewport { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: inline-flex; gap: 18px; white-space: nowrap; animation: ticker 60s linear infinite; padding-left: 100%; color: var(--muted); }
.ticker-track:hover { animation-play-state: paused; }
.tick-item b { color: var(--text); }
.tick-sep { color: var(--accent); opacity: 0.6; }
@keyframes ticker { to { transform: translateX(-100%); } }

/* auth additions */
.divider { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 12px; margin: 16px 0 4px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.fedi-form { margin-top: 8px !important; }
.fedi-btn { background: linear-gradient(180deg, #6d4aff, #563acc); border-color: transparent; color: #fff; }
.fedi-btn:hover { filter: brightness(1.1); background: linear-gradient(180deg, #6d4aff, #563acc); }
.fedi-logo { font-size: 18px; line-height: 1; }
.auth .features { grid-template-columns: repeat(3, 1fr); }

/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kpi { padding: 14px; border-radius: 14px; background: linear-gradient(160deg, rgba(24, 38, 66, 0.75), rgba(10, 18, 34, 0.6)); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.kpi-l { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.kpi-v { font-size: 20px; font-weight: 800; }
.kpi-s { font-size: 12px; color: var(--muted); }
.warnbox { border-color: rgba(255, 207, 74, 0.4); background: rgba(255, 207, 74, 0.07); }
.warnbox ul { margin: 6px 0; padding-left: 18px; }
.table-scroll { overflow-x: auto; }
.ledger .tier-row td { padding-top: 14px; color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; border-bottom: 1px solid var(--line-2); }

/* supply chains */
.chain-row { display: flex; align-items: center; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.chain-step { display: flex; flex-direction: column; gap: 6px; min-width: 170px; }
.chain-node { padding: 10px; border-radius: 12px; background: rgba(10, 18, 34, 0.75); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 5px; cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
.chain-node:hover { transform: translateY(-2px); border-color: var(--accent); }
.chain-node.missing { opacity: 0.45; border-style: dashed; }
.chain-node .ci { font-size: 20px; }
.chain-arrow { color: var(--accent); font-size: 18px; flex-shrink: 0; opacity: 0.8; }
.chain-outs { display: flex; flex-wrap: wrap; gap: 4px; }
.gchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-size: 11px; background: rgba(61, 220, 132, 0.12); border: 1px solid rgba(61, 220, 132, 0.3); }
.gchip.neg { background: rgba(255, 92, 92, 0.12); border-color: rgba(255, 92, 92, 0.35); }
.recipe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px; border-radius: 10px; background: rgba(5, 10, 20, 0.45); }
.dep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dep { display: flex; flex-direction: column; gap: 8px; }

/* military readiness */
.readiness { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ready-card { padding: 12px; border-radius: 12px; background: rgba(10, 18, 34, 0.6); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }

/* society */
.soc-hero { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 12px; align-items: stretch; }
.gauge-card { padding: 12px 14px; border-radius: 14px; background: linear-gradient(160deg, rgba(24, 38, 66, 0.75), rgba(10, 18, 34, 0.6)); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.gauge text { font-family: var(--mono); }
.pop-card { display: flex; flex-direction: column; gap: 10px; }
.pop-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.pop-split div { padding: 6px; border-radius: 8px; background: rgba(5, 10, 20, 0.5); display: flex; flex-direction: column; }
.pop-split span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
.needs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.needs > div { display: flex; align-items: center; gap: 6px; }
.needs .progress { flex: 1; }
.factors { display: flex; flex-direction: column; gap: 6px; }
.factor { display: grid; grid-template-columns: 1.3fr 1fr 44px; gap: 8px; align-items: center; font-size: 13px; }
.fbar { position: relative; height: 8px; background: rgba(120, 160, 220, 0.08); border-radius: 4px; }
.fbar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-2); }
.fbar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.fbar i.pos { background: linear-gradient(90deg, rgba(61, 220, 132, 0.5), var(--good)); }
.fbar i.neg { background: linear-gradient(270deg, rgba(255, 92, 92, 0.5), var(--bad)); }
.fv { text-align: right; }
.policy { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.policy:last-child { border-bottom: 0; padding-bottom: 0; }
.slider { width: 100%; accent-color: var(--accent); height: 28px; }
.opt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.opt, .doc { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(5, 10, 20, 0.5); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.12s; color: var(--text); }
.opt span, .doc span { font-size: 12px; color: var(--muted); }
.opt:hover:not(:disabled), .doc:hover:not(:disabled) { border-color: var(--line-2); transform: translateY(-1px); }
.opt.sel, .doc.sel { border-color: var(--accent); background: rgba(255, 176, 32, 0.08); box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.12); }
.doc:disabled { opacity: 0.4; cursor: not-allowed; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.doc-i { font-size: 28px; }

/* market */
.exchange { display: grid; grid-template-columns: 300px 1fr; gap: 16px; margin-top: 12px; }
.watch { display: flex; flex-direction: column; min-height: 0; }
.watch-list { overflow-y: auto; max-height: calc(100dvh - 230px); }
.watch-tier { padding: 8px 14px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.watch-row { display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; border-bottom: 1px solid rgba(120, 160, 220, 0.06); transition: background 0.12s; }
.watch-row:hover { background: rgba(120, 160, 220, 0.06); }
.watch-row.active { background: rgba(255, 176, 32, 0.08); box-shadow: inset 3px 0 0 var(--accent); }
.watch-row .wi { font-size: 20px; }
.watch-row .wp { text-align: right; min-width: 56px; }
.spark { display: block; flex-shrink: 0; }
.candles { width: 100%; height: 260px; display: block; }
.mk-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.mk-stats div { display: flex; flex-direction: column; align-items: flex-end; }
.mk-stats span { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.book { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.book-h, .book-row { display: grid; grid-template-columns: 1fr 1fr 20px; gap: 6px; font-size: 12px; padding: 3px 6px; border-radius: 5px; }
.book-h { color: var(--dim); text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; }
.book-row { cursor: pointer; }
.book-row:hover { background: rgba(120, 160, 220, 0.1); }
.book-row.bid span:first-child { color: var(--good); }
.book-row.ask span:first-child { color: var(--bad); }
.depth { display: block; border-radius: 8px; background: rgba(5, 10, 20, 0.4); }
.side-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.side-tabs .tab { justify-content: center; }
.side-tabs .tab.buy { background: rgba(61, 220, 132, 0.18); color: var(--good); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, 0.4); }
.side-tabs .tab.sell { background: rgba(255, 92, 92, 0.18); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(255, 92, 92, 0.4); }
.tk-sum { display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.goods-picker { display: flex; flex-direction: column; gap: 6px; }
.gp-row select { flex: 2; }
.gp-row input { flex: 1; }
.offer { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.offer-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.cargo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; max-height: 320px; overflow-y: auto; }
.cargo { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(5, 10, 20, 0.45); }
.cargo input { width: 80px; }

/* profile */
.profile-hero { display: flex; gap: 20px; align-items: center; padding: 22px; background: radial-gradient(600px 200px at 0% 0%, rgba(255, 176, 32, 0.12), transparent), var(--panel); }
.profile-hero h2 { font-size: 26px; }
.fedi-handle { display: inline-flex; gap: 6px; align-items: center; color: #a593ff; font-family: var(--mono); text-decoration: none; padding: 3px 10px; border-radius: 999px; background: rgba(109, 74, 255, 0.15); border: 1px solid rgba(109, 74, 255, 0.35); margin-top: 4px; }
.fedi-handle:hover { background: rgba(109, 74, 255, 0.28); }
.bio { margin: 10px 0 0; color: var(--muted); white-space: pre-wrap; }

/* codex */
.codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.codex-card { display: flex; flex-direction: column; gap: 6px; }
.codex-formulas h3 { margin: 16px 0 6px; color: var(--accent); }
.codex-formulas h3:first-child { margin-top: 0; }
.codex-formulas p { margin: 0; color: var(--muted); }
code { font-family: var(--mono); font-size: 12px; padding: 1px 6px; border-radius: 5px; background: rgba(120, 160, 220, 0.12); color: var(--text); }
.cat-tabs { flex-wrap: nowrap; }
@media (max-width: 1100px) {
  .soc-hero { grid-template-columns: repeat(3, 1fr); }
  .soc-hero .pop-card { grid-column: 1 / -1; }
  .exchange { grid-template-columns: 240px 1fr; }
}

/* ================= v3: research, depth, battle analysis, projects, citations ================= */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.tech { display: flex; flex-direction: column; gap: 8px; transition: border-color 0.15s, transform 0.15s; }
.tech:hover { border-color: var(--line-2); transform: translateY(-1px); }
.tech.locked { opacity: 0.6; }
.tech.maxed { border-color: rgba(61, 220, 132, 0.4); background: linear-gradient(160deg, rgba(61, 220, 132, 0.08), rgba(10, 18, 34, 0.6)); }
.tech-i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(160deg, rgba(79, 163, 255, 0.25), rgba(79, 163, 255, 0.05)); border: 1px solid var(--line-2); flex-shrink: 0; }
.pips { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.pips i { width: 12px; height: 5px; border-radius: 2px; background: rgba(120, 160, 220, 0.15); }
.pips i.on { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.pips i.q { background: rgba(255, 176, 32, 0.4); animation: pulse 1.4s infinite; }
.depth-pips { display: flex; gap: 6px; }
.depth-pips i { flex: 1; height: 8px; border-radius: 4px; background: rgba(120, 160, 220, 0.15); }
.depth-pips i.on { background: linear-gradient(90deg, #8ab4ff, #5c7cfa); }
.depth-pips i.on:nth-child(4) { background: linear-gradient(90deg, #ffd54f, #ffb020); }
.depth-pips i.na { background: repeating-linear-gradient(45deg, rgba(120,160,220,.08) 0 4px, transparent 4px 8px); }
.cohort { display: grid; grid-template-columns: 64px 1fr 70px; gap: 8px; align-items: center; }
.cbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(120, 160, 220, 0.1); }
.cbar i { display: block; height: 100%; }
.cbar .el { background: #ffd54f; } .cbar .rg { background: #4fa3ff; } .cbar .sh { background: #8b6f6f; }
.strength { display: block; background: rgba(5, 10, 20, 0.4); border-radius: 8px; margin-top: 4px; }
.salvo { display: flex; flex-wrap: wrap; gap: 4px; }
.salvo .ev { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; font-size: 15px; background: rgba(5, 10, 20, 0.5); border: 1px solid var(--line); animation: pop 0.25s backwards; }
.salvo .ev.hit { border-color: rgba(255, 92, 92, 0.6); background: rgba(255, 92, 92, 0.12); }
.salvo .ev.sam, .salvo .ev.interceptor, .salvo .ev.abm { border-color: rgba(61, 220, 132, 0.5); background: rgba(61, 220, 132, 0.1); }
.salvo .ev.dud { opacity: 0.6; }
.demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.demo > div { padding: 10px; border-radius: 10px; background: rgba(5, 10, 20, 0.45); display: flex; flex-direction: column; gap: 2px; }
.demo span { font-size: 12px; color: var(--muted); }
.demo b { font-size: 18px; }
.project { display: flex; flex-direction: column; gap: 8px; }
.project.done { border-color: rgba(61, 220, 132, 0.45); }
.project.wonder { background: radial-gradient(300px 120px at 0 0, rgba(255, 176, 32, 0.12), transparent), rgba(10, 18, 34, 0.6); border-color: rgba(255, 176, 32, 0.3); }
.proj-i { font-size: 30px; }
.pbars { display: flex; flex-direction: column; gap: 6px; }
.pbar { display: grid; grid-template-columns: 1.2fr 1fr 90px; gap: 8px; align-items: center; }
.cite-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.cite { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px; border-radius: 14px; background: rgba(10, 18, 34, 0.6); border: 1px solid var(--line); filter: grayscale(0.9); opacity: 0.55; }
.cite.got { filter: none; opacity: 1; }
.cite .cite-i { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: rgba(120, 160, 220, 0.1); }
.cite.got.bronze .cite-i { background: radial-gradient(circle at 35% 30%, #f0b27a, #8d5524); box-shadow: 0 0 14px rgba(205, 127, 50, 0.5); }
.cite.got.silver .cite-i { background: radial-gradient(circle at 35% 30%, #f5f7fa, #8e9aab); box-shadow: 0 0 14px rgba(200, 210, 225, 0.5); }
.cite.got.gold .cite-i { background: radial-gradient(circle at 35% 30%, #fff2a8, #c9a227); box-shadow: 0 0 18px rgba(255, 210, 60, 0.6); }
.cite.got.platinum .cite-i { background: radial-gradient(circle at 35% 30%, #ffffff, #7fd6ff 60%, #6d4aff); box-shadow: 0 0 22px rgba(127, 214, 255, 0.7); }
.cite .progress { width: 100%; }

/* ================= v4: supporters, feedback, air defense ================= */
.sup { display: inline-block; font-size: 0.95em; line-height: 1; vertical-align: 1px; text-shadow: 0 0 8px currentColor; }
.sup.t1 { color: #7fd6ff; } .sup.t2 { color: #ffd54f; } .sup.t3 { color: #ff7ad9; animation: supglow 2.4s ease-in-out infinite; }
@keyframes supglow { 50% { text-shadow: 0 0 14px currentColor, 0 0 4px #fff; } }
.support-hero { display: flex; gap: 20px; align-items: center; padding: 24px; background: radial-gradient(600px 220px at 0% 0%, rgba(255, 122, 217, 0.14), transparent), var(--panel); }
.sup-heart { font-size: 64px; filter: drop-shadow(0 0 20px rgba(255, 122, 217, 0.5)); animation: pulse 2.6s ease-in-out infinite; }
.support-text { white-space: normal; line-height: 1.6; }
.crypto { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 8px; border-radius: 10px; background: rgba(5, 10, 20, 0.5); }
.crypto .addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.thanks { display: flex; flex-wrap: wrap; gap: 8px; }
.thank { display: inline-flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10, 18, 34, 0.6); text-decoration: none; color: var(--text); font-weight: 700; }
.thank.t2 { border-color: rgba(255, 213, 79, 0.4); } .thank.t3 { border-color: rgba(255, 122, 217, 0.5); box-shadow: 0 0 16px rgba(255, 122, 217, 0.2); }
@media (max-width: 860px) { .support-hero { flex-direction: column; text-align: center; } }