/* My Characters page. Shares the Character Lookup visual language. */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  color-scheme: dark;
  --vs: #a855f7; --vs-dim: rgba(168,85,247,.15);
  --nc: #3b82f6; --nc-dim: rgba(59,130,246,.15);
  --tr: #ef4444; --tr-dim: rgba(239,68,68,.15);
  --nso: #94a3b8; --green: #22c55e; --amber: #fbbf24; --red: #fb7185; --sky: #38bdf8;
  --bg: #030507; --surface: #0a0e13; --surface2: #0f1319; --surface3: #131a23;
  --text: #e2e8f0; --muted: #64748b; --muted2: #94a3b8;
  --border: #1e293b; --border2: #263147;
  --character-accent: var(--green);
  --character-accent-soft: rgba(34,197,94,.13);
}
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, var(--character-accent-soft), transparent 34%),
    radial-gradient(circle at 88% 4%, rgba(168,85,247,.07), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
body[data-faction="vs"] { --character-accent: var(--vs); --character-accent-soft: var(--vs-dim); }
body[data-faction="nc"] { --character-accent: var(--nc); --character-accent-soft: var(--nc-dim); }
body[data-faction="tr"] { --character-accent: var(--tr); --character-accent-soft: var(--tr-dim); }
body[data-faction="nso"] { --character-accent: #e2e8f0; --character-accent-soft: rgba(148,163,184,.14); }
button, input, select { font: inherit; color: inherit; }
a { color: var(--sky); }
:focus-visible { outline: 2px solid var(--character-accent); outline-offset: 2px; }
.note { color: var(--muted2); font-size: .8rem; line-height: 1.6; }
.note + .note { margin-top: 6px; }

main { padding: 110px 48px 80px; }
.my-characters-shell { max-width: 1360px; margin: 0 auto; }
.section-label { font-family: 'Orbitron', monospace; font-size: .65rem; letter-spacing: .35em; text-transform: uppercase; color: var(--character-accent); margin-bottom: 12px; }
h1 { font-family: 'Orbitron', monospace; font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.1; color: #fff; margin-bottom: 10px; }
.section-sub { max-width: 760px; font-size: .95rem; color: var(--muted2); line-height: 1.7; }
.my-characters-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.my-characters-count { flex: none; display: inline-flex; align-items: center; gap: 10px; color: var(--muted2); font-family: 'JetBrains Mono', monospace; font-size: .78rem; }
.my-characters-count i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }

/* Add form and tools */
.my-characters-manage { display: grid; grid-template-columns: minmax(280px, 520px) minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 8px; }
.manage-tools, .selected-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.suggest-host { position: relative; min-width: 0; }
.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; max-height: 340px; overflow-y: auto; padding: 4px; border: 1px solid var(--border2); border-radius: 8px; background: #0b1016; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.suggest-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: center; padding: 8px 10px; border-radius: 5px; cursor: pointer; }
.suggest-row strong { color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.suggest-row small { grid-column: 2; color: var(--muted2); font-size: .72rem; }
.suggest-row.active, .suggest-row:hover { background: var(--character-accent-soft); }
.lookup-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 6px; border: 1px solid var(--border2); border-radius: 8px; background: rgba(12,15,20,.9); }
.lookup-form:focus-within { border-color: var(--character-accent); }
.lookup-input { width: 100%; height: 42px; min-width: 0; border: 0; border-radius: 5px; background: transparent; color: #fff; padding: 0 12px; font-size: .95rem; font-family: 'JetBrains Mono', monospace; }
.lookup-input:focus { outline: none; }
.lookup-submit, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; border: 1px solid var(--border2); border-radius: 5px;
  background: rgba(255,255,255,.035); color: #e2e8f0; padding: 0 14px;
  cursor: pointer; font-family: 'Orbitron', monospace; font-size: .6rem;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.lookup-submit { height: 42px; padding: 0 18px; border-color: color-mix(in srgb, var(--character-accent) 55%, transparent); background: var(--character-accent-soft); color: #fff; }
.btn:hover, .btn:focus-visible, .lookup-submit:hover, .lookup-submit:focus-visible { border-color: var(--character-accent); color: #fff; }
.btn.small { min-height: 30px; padding: 0 10px; font-size: .56rem; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted2); }
.btn.danger { border-color: rgba(251,113,133,.35); color: #fda4af; }
.btn.danger:hover, .btn.danger:focus-visible { border-color: var(--red); color: #fff; }
.btn:disabled { cursor: default; opacity: .4; }
.btn[aria-pressed="true"] { border-color: var(--character-accent); background: var(--character-accent-soft); color: #fff; }
.select { min-height: 34px; border: 1px solid var(--border2); border-radius: 5px; background: var(--surface2); color: #fff; padding: 0 10px; font-size: .8rem; }
.select:focus { outline: 2px solid var(--character-accent); outline-offset: 1px; }
.inline-select { display: inline-flex; align-items: center; gap: 8px; color: var(--muted2); font-size: .78rem; }
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--muted2); font-size: .8rem; cursor: pointer; }
.check input { accent-color: var(--character-accent); }
.lookup-status { display: flex; align-items: center; gap: 10px; min-height: 22px; margin-bottom: 10px; color: var(--muted2); font-size: .76rem; font-family: 'JetBrains Mono', monospace; }
.lookup-status.error { color: var(--amber); }
.lookup-status .spinner { display: none; }
.lookup-status.busy .spinner { display: inline-block; }
.spinner { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 2px solid rgba(255,255,255,.14); border-top-color: var(--character-accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.add-matches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.add-matches > span { color: var(--muted2); font-size: .76rem; }
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; border: 1px solid var(--border2); border-radius: 999px; background: rgba(255,255,255,.025); color: #cbd5e1; padding: 2px 12px; cursor: pointer; font-size: .78rem; }
.chip:hover, .chip:focus-visible { border-color: var(--character-accent); color: #fff; }
.chip small { color: var(--muted); font-size: .68rem; }
.fdot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--nso); }
.fdot.vs { background: var(--vs); } .fdot.nc { background: var(--nc); } .fdot.tr { background: var(--tr); }

/* Character cards */
.my-character-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 16px; }
.my-character-card {
  --card-accent: var(--nso);
  position: relative; display: grid; gap: 3px; min-width: 0; min-height: 86px; padding: 12px 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: rgba(10,14,19,.92); color: var(--text); overflow: hidden;
}
.my-character-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--card-accent); opacity: .7; }
.my-character-card[data-faction="vs"] { --card-accent: var(--vs); }
.my-character-card[data-faction="nc"] { --card-accent: var(--nc); }
.my-character-card[data-faction="tr"] { --card-accent: var(--tr); }
.my-character-card.is-all { --card-accent: var(--green); background: linear-gradient(135deg, rgba(34,197,94,.08), rgba(10,14,19,.92) 70%); }
.my-character-card:hover, .my-character-card:focus-visible { border-color: var(--card-accent); }
.my-character-card.is-selected { border-color: var(--card-accent); background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 16%, transparent), rgba(10,14,19,.94) 72%); box-shadow: 0 0 0 1px var(--card-accent) inset; }
.my-character-card strong { color: #fff; font-family: 'Orbitron', monospace; font-size: .72rem; letter-spacing: .06em; overflow-wrap: anywhere; }
.my-character-card small { color: var(--muted2); font-size: .74rem; }
.my-character-card span { display: flex; align-items: center; gap: 6px; margin-top: auto; color: var(--muted2); font-size: .72rem; }
.my-character-card span i { width: 7px; height: 7px; border-radius: 50%; background: #475569; }
.my-character-card span i.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.my-character-card span i.err { background: var(--amber); }
.my-character-card span b { margin-left: auto; color: #cbd5e1; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.my-characters-empty { padding: 26px; border: 1px dashed var(--border2); border-radius: 10px; background: rgba(10,14,19,.7); }
.my-characters-empty h2 { font-family: 'Orbitron', monospace; font-size: .9rem; letter-spacing: .1em; color: #fff; margin-bottom: 8px; }
.my-characters-empty p { color: var(--muted2); font-size: .9rem; max-width: 760px; }
.my-characters-empty ul { margin: 14px 0 0 18px; display: grid; gap: 6px; color: var(--muted2); font-size: .86rem; }
.my-characters-empty strong { color: #fff; }

/* Tabs */
.tab-shell { border: 1px solid var(--border); border-radius: 10px; background: rgba(10,14,19,.94); min-width: 0; scroll-margin-top: 80px; }
.character-tabs {
  position: sticky; top: 70px; z-index: 24;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--border2) rgba(3,5,7,.76);
  border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; background: rgba(3,5,7,.94); backdrop-filter: blur(16px);
}
.character-tab {
  position: relative; min-height: 54px; min-width: 104px; border: 0; border-right: 1px solid rgba(255,255,255,.05); white-space: nowrap;
  background: transparent; color: var(--muted2); padding: 9px 14px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  font-family: 'Orbitron', monospace; font-weight: 800; text-align: left;
}
.character-tab::after { content: ""; position: absolute; right: 14px; bottom: 0; left: 14px; height: 2px; background: var(--character-accent); transform: scaleX(0); transform-origin: left; transition: transform 150ms ease; }
.character-tab-label { font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; }
.character-tab-hint { color: var(--muted); font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 500; }
.character-tab:hover { background: rgba(255,255,255,.035); color: #cbd5e1; }
.character-tab:focus-visible { outline: 2px solid var(--character-accent); outline-offset: -2px; }
.character-tab.active { color: #fff; background: linear-gradient(180deg, var(--character-accent-soft), rgba(255,255,255,.012)); }
.character-tab.active::after { transform: scaleX(1); }
.character-tab.active .character-tab-hint { color: var(--character-accent); }
.character-tab:last-child { border-right: 0; }
.character-panel { padding: 18px; display: grid; gap: 14px; }
.character-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.character-panel-grid > .wide, .app-section.wide { grid-column: 1 / -1; }
.stack { display: grid; gap: 12px; }
.sub-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.sub-nav-btn { min-height: 34px; border: 1px solid rgba(255,255,255,.09); border-radius: 4px; background: rgba(255,255,255,.03); color: var(--muted2); cursor: pointer; padding: 0 14px; font-family: 'Orbitron', monospace; font-size: .58rem; font-weight: 800; letter-spacing: .1em; }
.sub-nav-btn:hover, .sub-nav-btn:focus-visible, .sub-nav-btn.active { border-color: color-mix(in srgb, var(--character-accent) 62%, transparent); color: #fff; background: var(--character-accent-soft); }

/* Character header */
.character-head { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: rgba(8,11,15,.9); position: relative; }
.character-head::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--character-accent); box-shadow: 0 0 18px var(--character-accent); }
.character-head > .loading-block, .character-head > .lookup-empty, .character-head > .section-tools, .character-head > .skeleton-lines { grid-column: 1 / -1; padding: 0 18px; }
.character-head > .loading-block { padding-top: 14px; }
.character-head > .skeleton-lines { padding-bottom: 14px; }
.character-head-main { display: grid; gap: 6px; padding: 18px 20px; background: linear-gradient(125deg, var(--character-accent-soft), transparent 60%); }
.dossier-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted2); font-size: .78rem; }
.dossier-name { font-family: 'Orbitron', monospace; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.15; color: #fff; overflow-wrap: anywhere; }
.dossier-name small { color: var(--character-accent); font-size: .6em; margin-left: 8px; }
.character-head-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.05); }
.stat-tile { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 14px 16px; background: rgba(8,11,15,.97); }
.stat-label { color: var(--muted2); font-family: 'Orbitron', monospace; font-size: .54rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.stat-value { color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; font-weight: 500; overflow-wrap: anywhere; }
.faction-chip { display: inline-block; padding: 3px 8px; border-radius: 3px; font-family: 'Orbitron', monospace; font-size: .6rem; font-weight: 800; letter-spacing: .12em; background: rgba(255,255,255,.06); color: var(--muted2); }
.faction-chip.vs { background: var(--vs-dim); color: #d8b4fe; }
.faction-chip.nc { background: var(--nc-dim); color: #93c5fd; }
.faction-chip.tr { background: var(--tr-dim); color: #fca5a5; }
.faction-chip.nso { background: rgba(148,163,184,.16); color: #e2e8f0; }
.presence { display: inline-flex; align-items: center; gap: 6px; }
.presence::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #475569; }
.presence.online { color: #86efac; }
.presence.online::before { background: var(--green); box-shadow: 0 0 10px var(--green); }

/* Sections and shared widgets */
.app-section { border: 1px solid rgba(255,255,255,.07); border-radius: 8px; background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.01)); padding: 18px; min-width: 0; }
.app-section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; color: var(--muted2); font-family: 'Orbitron', monospace; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }
.app-section-title small { font-family: 'Inter', sans-serif; font-size: .74rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.telemetry-section { border-color: rgba(255,255,255,.1); background: linear-gradient(100deg, var(--character-accent-soft), transparent 32%), rgba(255,255,255,.018); }
.section-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.lookup-empty { color: var(--muted2); font-size: .84rem; line-height: 1.6; }
.loading-block { display: flex; align-items: center; gap: 10px; color: var(--muted2); font-size: .84rem; padding: 6px 0; }
.skeleton-lines { display: grid; gap: 8px; margin-top: 10px; }
.skeleton-lines span { height: 12px; border-radius: 4px; background: linear-gradient(90deg, #111821, #18212d, #111821); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skeleton-lines span:nth-child(2) { width: 82%; } .skeleton-lines span:nth-child(3) { width: 64%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.lookup-stat-list { display: grid; gap: 2px; }
.lookup-stat-row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .84rem; }
.lookup-stat-row span { color: var(--muted2); }
.lookup-stat-row strong { color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 500; text-align: right; }
.lookup-stat-row strong small { color: var(--muted); font-size: .72rem; }
.app-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.06); border-radius: 6px; }
.app-table-wrap.scroll-window { max-height: min(64vh, 720px); overflow: auto; scrollbar-color: var(--character-accent) #080b0f; }
.app-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.app-table th { position: sticky; top: 0; z-index: 2; padding: 9px 10px; border-bottom: 1px solid var(--border2); color: var(--muted2); font-family: 'Orbitron', monospace; font-size: .55rem; letter-spacing: .12em; text-align: left; text-transform: uppercase; white-space: nowrap; background: #0c1016; }
.app-table th.num { text-align: right; }
.app-table-sort { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.app-table-sort:hover, .app-table-sort.active { color: #fff; }
.app-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.05); color: #fff; font-size: .8rem; white-space: nowrap; }
.app-table td.num { text-align: right; font-family: 'JetBrains Mono', monospace; }
.app-table td.pos { color: #86efac; } .app-table td.neg { color: #fca5a5; }
.app-table tr:last-child td { border-bottom: none; }
.app-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.app-table tr.is-selected td { background: var(--character-accent-soft); }
.app-table tr.kill-row td:nth-child(2) { color: #86efac; }
.app-table tr.death-row td:nth-child(2) { color: #fca5a5; }
.link-btn { border: 0; background: transparent; color: #fff; cursor: pointer; padding: 0; font: inherit; text-align: left; text-decoration: none; }
.link-btn:hover, .link-btn:focus-visible { color: var(--character-accent); text-decoration: underline; }
.metric-deck { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.06); }
.metric-card { position: relative; min-width: 0; min-height: 96px; padding: 14px; background: rgba(7,10,14,.92); }
.metric-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, var(--character-accent), transparent 72%); opacity: .45; }
.metric-label, .data-tile span { display: block; color: var(--muted2); font-family: 'Orbitron', monospace; font-size: .55rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.metric-value { display: block; margin-top: 10px; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; overflow-wrap: anywhere; }
.metric-context { display: block; margin-top: 8px; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: .66rem; }
.data-tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.055); }
.data-tile { min-width: 0; padding: 12px 14px; background: rgba(7,10,14,.8); }
.data-tile strong { display: block; margin-top: 6px; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: .92rem; font-weight: 500; overflow-wrap: anywhere; }
.progress-readout { margin-top: 12px; padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: rgba(3,5,7,.36); }
.progress-readout-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 8px; color: var(--muted2); font-size: .76rem; }
.progress-readout-head strong { color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.progress-readout-track { height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.04); }
.progress-readout-fill { height: 100%; background: linear-gradient(90deg, var(--character-accent), var(--green)); }
.app-meter { display: grid; gap: 7px; }
.app-meter-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(90px, auto); gap: 10px; align-items: center; font-size: .78rem; color: var(--muted2); }
.app-meter-row strong { font-family: 'JetBrains Mono', monospace; font-weight: 500; color: #fff; text-align: right; font-size: .74rem; }
.app-meter-track { height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.04); }
.app-meter-fill { height: 100%; background: linear-gradient(90deg, var(--character-accent), var(--sky)); }
.app-meter-row.vs span { color: var(--vs); } .app-meter-row.nc span { color: var(--nc); } .app-meter-row.tr span { color: var(--tr); }
.app-meter-row.vs .app-meter-fill { background: var(--vs); } .app-meter-row.nc .app-meter-fill { background: var(--nc); } .app-meter-row.tr .app-meter-fill { background: var(--tr); }
.ranked-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ranked-card { position: relative; min-width: 0; padding: 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; background: rgba(3,5,7,.48); }
.ranked-card:first-child { border-color: color-mix(in srgb, var(--character-accent) 45%, var(--border)); background: linear-gradient(135deg, var(--character-accent-soft), rgba(3,5,7,.58) 62%); }
.ranked-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.ranked-position { color: var(--character-accent); font-family: 'JetBrains Mono', monospace; font-size: .75rem; }
.ranked-name { min-width: 0; color: #fff; font-family: 'Orbitron', monospace; font-size: .7rem; font-weight: 700; overflow-wrap: anywhere; }
.ranked-total { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; color: var(--muted2); font-size: .72rem; }
.ranked-total strong { color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.ranked-track { height: 6px; margin-top: 8px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.055); }
.ranked-fill { height: 100%; background: var(--character-accent); }
.ranked-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; color: var(--muted2); font-family: 'JetBrains Mono', monospace; font-size: .66rem; }
.weapon-browser { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: rgba(3,5,7,.38); }
.weapon-filter-field { display: grid; gap: 6px; min-width: min(280px, 100%); }
.weapon-filter-field > span { color: var(--muted2); font-family: 'Orbitron', monospace; font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }
.weapon-filter-input { height: 38px; min-width: 0; border: 1px solid var(--border2); border-radius: 5px; background: var(--surface2); color: #fff; padding: 0 12px; font-family: 'JetBrains Mono', monospace; font-size: .78rem; }
.weapon-filter-input:focus { outline: 2px solid var(--character-accent); outline-offset: 1px; }
.weapon-count { color: var(--muted2); font-family: 'JetBrains Mono', monospace; font-size: .72rem; text-align: right; }
.weapon-sort-help { display: block; margin-top: 4px; color: var(--muted); font-family: 'Inter', sans-serif; font-size: .68rem; }
.weapon-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 6px; }
.weapon-pagination button { min-height: 34px; border: 1px solid var(--border2); border-radius: 5px; background: rgba(255,255,255,.035); color: #cbd5e1; padding: 0 12px; cursor: pointer; font-family: 'Orbitron', monospace; font-size: .55rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.weapon-pagination button:hover { border-color: var(--character-accent); color: #fff; }
.weapon-pagination button:disabled { cursor: default; opacity: .35; }
.weapon-page-label { min-width: 110px; color: var(--muted2); font-family: 'JetBrains Mono', monospace; font-size: .72rem; text-align: center; }
.data-disclosure { margin-top: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: rgba(3,5,7,.34); }
.data-disclosure summary { cursor: pointer; color: var(--muted2); padding: 10px 14px; font-family: 'Orbitron', monospace; font-size: .56rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.data-disclosure[open] > summary { border-bottom: 1px solid rgba(255,255,255,.06); color: #fff; }
.data-disclosure-body { padding: 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border2); color: var(--muted2); font-size: .72rem; font-weight: 600; }
.badge.watch { color: var(--amber); border-color: #6b5316; }
.badge.review { color: #fda4af; border-color: #7a2b39; background: #23090f; }
.badge.strong { color: #fff; border-color: var(--red); background: #5b1322; }
.mini-title { color: #fff; font-size: .84rem; margin-bottom: 10px; }

/* Overview */
.overview-playtime { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted2); font-size: .8rem; }
.overview-playtime strong { color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.overview-factions { display: grid; gap: 8px; margin-top: 12px; color: var(--muted2); font-size: .78rem; }
.overview-faction-track { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #111821; }
.overview-faction-track i, .overview-faction-key i { background: var(--nso); }
.overview-faction-track i[data-faction="vs"], .overview-faction-key i[data-faction="vs"] { background: var(--vs); }
.overview-faction-track i[data-faction="nc"], .overview-faction-key i[data-faction="nc"] { background: var(--nc); }
.overview-faction-track i[data-faction="tr"], .overview-faction-key i[data-faction="tr"] { background: var(--tr); }
.overview-faction-key { display: flex; flex-wrap: wrap; gap: 14px; }
.overview-faction-key span { display: inline-flex; align-items: center; gap: 6px; }
.overview-faction-key i { width: 9px; height: 9px; border-radius: 50%; }
.overview-faction-key b { color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.overview-findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.overview-findings button { display: grid; gap: 4px; padding: 14px 16px; text-align: left; cursor: pointer; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(3,5,7,.5); color: var(--text); }
.overview-findings button:hover, .overview-findings button:focus-visible { border-color: var(--character-accent); }
.overview-findings span { color: var(--muted2); font-family: 'Orbitron', monospace; font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }
.overview-findings strong { color: #fff; font-size: .95rem; }
.overview-findings small { color: var(--muted); font-size: .76rem; }
.overview-metric-picker { display: flex; gap: 6px; margin-bottom: 12px; }
.overview-metric-picker button { min-height: 30px; padding: 0 12px; border: 1px solid var(--border2); border-radius: 4px; background: transparent; color: var(--muted2); cursor: pointer; font-size: .76rem; }
.overview-metric-picker button[aria-pressed="true"] { border-color: var(--character-accent); background: var(--character-accent-soft); color: #fff; }
.overview-ranking-rows { display: grid; gap: 6px; margin-bottom: 10px; }
.overview-ranking-rows button { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 84px; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid transparent; border-radius: 5px; background: rgba(255,255,255,.02); color: var(--text); cursor: pointer; text-align: left; font-size: .8rem; }
.overview-ranking-rows button:hover, .overview-ranking-rows button:focus-visible { border-color: var(--border2); }
.overview-ranking-rows span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-ranking-rows b { height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.05); }
.overview-ranking-rows b i { display: block; height: 100%; background: var(--character-accent); }
.overview-ranking-rows strong { text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.overview-trends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.overview-trends > div { display: grid; gap: 4px; color: var(--muted2); font-size: .74rem; }
.overview-trends small { color: var(--muted); font-size: .68rem; }
.overview-trends > small { grid-column: 1 / -1; }
.overview-trends svg { width: 100%; height: 46px; }
.overview-trends svg line { stroke: rgba(255,255,255,.08); stroke-width: .4; }
.overview-trends svg polyline { fill: none; stroke: var(--character-accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.overview-session-list { display: grid; gap: 6px; }
.overview-session-list button { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: rgba(3,5,7,.4); color: var(--text); cursor: pointer; text-align: left; font-size: .8rem; }
.overview-session-list button:hover, .overview-session-list button:focus-visible { border-color: var(--character-accent); }
.overview-session-list strong { color: #fff; }
.overview-session-list small { display: block; color: var(--muted); font-size: .72rem; }
.overview-session-list span:last-child { text-align: right; font-family: 'JetBrains Mono', monospace; }
.overview-table td:first-child { white-space: nowrap; }

/* Calendar */
.session-calendar { display: grid; gap: 14px; }
.cal-head { display: flex; justify-content: space-between; align-items: start; gap: 14px; flex-wrap: wrap; }
.cal-head h3 { font-family: 'Orbitron', monospace; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.cal-head p { color: var(--muted2); font-size: .8rem; }
.cal-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
.cal-month, .cal-agenda { border: 1px solid rgba(255,255,255,.07); border-radius: 8px; background: rgba(3,5,7,.4); padding: 14px; min-width: 0; }
.cal-month-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-month-head h4 { color: #fff; font-family: 'Orbitron', monospace; font-size: .8rem; letter-spacing: .08em; }
.cal-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.cal-summary div { padding: 8px 10px; border-radius: 5px; background: rgba(255,255,255,.025); }
.cal-summary dt { color: var(--muted2); font-family: 'Orbitron', monospace; font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; }
.cal-summary dd { color: #fff; font-family: 'JetBrains Mono', monospace; font-size: .95rem; }
.cal-weekdays, .cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-weekdays span { color: var(--muted); font-size: .66rem; text-align: center; padding-bottom: 4px; }
.cal-day { display: grid; align-content: start; gap: 2px; min-height: 66px; padding: 6px; border: 1px solid rgba(255,255,255,.05); border-radius: 5px; background: rgba(255,255,255,.015); color: var(--muted); text-align: left; cursor: pointer; font-size: .7rem; }
.cal-day.has-sessions { color: var(--text); background: color-mix(in srgb, var(--character-accent) 10%, rgba(255,255,255,.02)); border-color: color-mix(in srgb, var(--character-accent) 30%, transparent); }
.cal-day[aria-pressed="true"] { border-color: var(--character-accent); box-shadow: 0 0 0 1px var(--character-accent) inset; }
.cal-day[aria-current="date"] .cal-num { color: var(--character-accent); font-weight: 700; }
.cal-num { font-family: 'JetBrains Mono', monospace; }
.cal-count { color: #fff; font-family: 'JetBrains Mono', monospace; font-size: .78rem; }
.cal-count small, .cal-stats { color: var(--muted2); font-size: .62rem; }
.cal-agenda header { margin-bottom: 10px; }
.cal-eyebrow { color: var(--character-accent); font-family: 'Orbitron', monospace; font-size: .52rem; letter-spacing: .16em; text-transform: uppercase; }
.cal-agenda h4 { color: #fff; font-size: .95rem; }
.cal-agenda header p { color: var(--muted2); font-size: .76rem; }
.cal-agenda-list { display: grid; gap: 10px; max-height: 520px; overflow-y: auto; }
.cal-agenda-group { display: grid; gap: 5px; }
.cal-agenda-group h5 { color: var(--muted2); font-size: .72rem; font-weight: 600; }
.cal-agenda-group button { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 5px; background: rgba(255,255,255,.02); color: var(--text); cursor: pointer; text-align: left; font-size: .78rem; }
.cal-agenda-group button:hover, .cal-agenda-group button:focus-visible, .cal-agenda-group button.selected { border-color: var(--character-accent); }
.cal-agenda-group small { display: block; color: var(--muted); font-size: .68rem; }
.cal-time { font-family: 'JetBrains Mono', monospace; }
.cal-character { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.cal-score { text-align: right; font-family: 'JetBrains Mono', monospace; }
.cal-score strong { font-weight: 500; }
.cal-pad { min-height: 66px; }

/* Session analysis */
.session-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.session-toolbar > div { margin-right: auto; }
.session-toolbar h3 { font-family: 'Orbitron', monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.session-indicator { color: var(--muted2); font-family: 'JetBrains Mono', monospace; font-size: .74rem; }
.session-event-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 10px; }
.event-group { padding: 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: rgba(3,5,7,.4); }
.event-group h4 { color: var(--muted2); font-family: 'Orbitron', monospace; font-size: .58rem; letter-spacing: .14em; margin-bottom: 6px; }
.session-timeline { display: grid; gap: 8px; }
.tl-head { display: flex; justify-content: space-between; gap: 12px; color: var(--muted2); font-family: 'JetBrains Mono', monospace; font-size: .72rem; }
.session-timeline svg { width: 100%; height: 190px; border: 1px solid rgba(255,255,255,.06); border-radius: 6px; background: rgba(3,5,7,.5); }
.session-timeline text { fill: var(--muted); font-size: 11px; font-family: 'JetBrains Mono', monospace; }
.tl-grid { stroke: rgba(255,255,255,.05); }
.tl-base { stroke: rgba(255,255,255,.12); }
.tl-kpm { fill: none; stroke: var(--sky); stroke-width: 2; vector-effect: non-scaling-stroke; }
.session-timeline text.tl-star { fill: var(--amber); font-size: 16px; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .74rem; color: var(--muted2); }
.tl-legend .k { color: #4ade80; } .tl-legend .d { color: #f87171; } .tl-legend .r { color: var(--sky); } .tl-legend .o { color: var(--amber); }

/* Fair play and population */
.population-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.fp-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.fp-score { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 600 19px 'JetBrains Mono', monospace; background: conic-gradient(var(--c, #2b3b50) calc(var(--v) * 1%), #141d28 0); }
.fp-score b { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #0b1016; font-weight: 600; }
.fp-head p { margin-top: 4px; color: var(--muted2); font-size: .78rem; }
.signals { list-style: none; display: grid; gap: 8px; }
.signals li { border: 1px solid var(--border); border-left: 3px solid var(--border2); border-radius: 6px; padding: 10px 12px; background: #0b1118; font-size: .82rem; }
.signals li.strong { border-left-color: var(--red); } .signals li.moderate { border-left-color: var(--amber); }
.signals .sev { float: right; font: .64rem 'JetBrains Mono', monospace; color: var(--muted2); text-transform: uppercase; }
.signals p { margin-top: 4px; color: var(--muted2); font-size: .76rem; }
.shift { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 8px; justify-items: start; }
.shift h4 { font-size: .84rem; }
.shift .app-table-wrap { width: 100%; }
.percentile-meter .app-meter-row { grid-template-columns: 150px minmax(0, 1fr) minmax(110px, auto); }

/* Directives */
.directive-layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 12px; align-items: start; }
.directive-list { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow-y: auto; padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; background: rgba(3,5,7,.4); }
.directive-list-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--muted2); font-size: .76rem; }
.directive-list-head strong { color: #fff; }
.directive-list-head .btn { margin-left: auto; }
.directive-group { display: grid; gap: 4px; margin-bottom: 12px; }
.directive-group-title { color: var(--muted2); font-family: 'Orbitron', monospace; font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; padding: 4px 2px; }
.directive-tree-btn { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid transparent; border-left: 3px solid #334155; border-radius: 4px; background: rgba(255,255,255,.02); color: var(--text); cursor: pointer; text-align: left; font-size: .78rem; }
.directive-tree-btn small { flex: none; color: var(--muted2); font-size: .68rem; }
.directive-tree-btn.complete { border-left-color: var(--green); }
.directive-tree-btn.in-progress { border-left-color: var(--amber); }
.directive-tree-btn:hover, .directive-tree-btn:focus-visible { border-color: var(--border2); }
.directive-tree-btn.selected { border-color: var(--character-accent); background: var(--character-accent-soft); }
.directive-tier-list { display: grid; gap: 8px; margin-top: 14px; }
.directive-tier { border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: rgba(3,5,7,.32); padding: 4px 12px; }
.directive-tier[open] { padding-bottom: 10px; }
.directive-tier-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; cursor: pointer; font-family: 'Orbitron', monospace; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.directive-tier-title span:last-child { color: var(--muted2); font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: 0; text-transform: none; }
.directive-row { display: grid; grid-template-columns: auto minmax(180px, 1fr) minmax(170px, 260px); gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.045); }
.directive-row-badge { min-width: 52px; border: 1px solid rgba(234,179,8,.35); border-radius: 3px; padding: 3px 6px; color: #fde68a; font-family: 'JetBrains Mono', monospace; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.directive-row.done .directive-row-badge { border-color: rgba(34,197,94,.42); color: var(--green); }
.directive-name { min-width: 0; color: #dbeafe; font-size: .82rem; overflow-wrap: anywhere; }
.directive-name.completed { color: var(--green); }
.directive-progress { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--muted2); }
.directive-progress-track { height: 9px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.04); }
.directive-progress-fill { height: 100%; background: linear-gradient(90deg, var(--green), #eab308); }
.directive-progress.completed { color: var(--green); font-weight: 700; }
.directive-complete-note { border-left: 2px solid var(--green); padding: 9px 11px; background: rgba(34,197,94,.07); color: var(--muted2); font-size: .78rem; }

/* Tracker and collection matrices */
.tracker-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 12px; }
.tracker-toolbar .select { min-height: 38px; }
.tracker-summary { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; color: var(--muted2); font-family: 'JetBrains Mono', monospace; font-size: .74rem; }
.matrix-scroll { overflow: auto; max-height: min(70vh, 820px); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; }
.matrix { display: grid; }
.matrix-row { display: grid; gap: 1px; border-bottom: 1px solid rgba(255,255,255,.05); }
.matrix-head { position: sticky; top: 0; z-index: 2; background: #0c1016; }
.matrix-head span { padding: 9px 10px; color: var(--muted2); font-family: 'Orbitron', monospace; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matrix-label { display: grid; gap: 2px; padding: 8px 10px; min-width: 0; }
.matrix-label strong { color: #fff; font-size: .82rem; overflow-wrap: anywhere; }
.matrix-label small { color: var(--muted); font-size: .7rem; }
.matrix-cell { display: grid; align-content: center; gap: 1px; margin: 4px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.06); border-radius: 5px; background: rgba(255,255,255,.02); color: var(--muted2); text-align: left; font-size: .76rem; }
button.matrix-cell { cursor: pointer; }
button.matrix-cell:hover, button.matrix-cell:focus-visible { border-color: var(--character-accent); }
.matrix-cell small { color: var(--muted); font-size: .64rem; }
.matrix-cell.complete { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); color: #86efac; }
.matrix-cell.in-progress { border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.06); color: #fde68a; }
.matrix-cell.not-started { color: var(--muted2); }
.matrix-cell.unavailable { border-style: dashed; color: var(--muted); }
.matrix-empty { padding: 14px; color: var(--muted2); font-size: .84rem; }

/* Packs and certs */
.economy-pack-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.economy-pack-totals > div { display: grid; gap: 3px; padding: 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(3,5,7,.5); color: var(--muted2); font-size: .8rem; }
.economy-pack-totals strong { color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 1.8rem; font-weight: 500; }
.economy-pack-totals > div > span:first-child { font-family: 'Orbitron', monospace; font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; }
.economy-deluxe { border-color: rgba(168,85,247,.35) !important; }
.economy-recycler { border-color: rgba(56,189,248,.3) !important; }
.economy-pack-totals small { color: var(--muted); font-size: .7rem; }
.economy-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 12px 0; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.06); }
.economy-ledger > div { display: grid; gap: 3px; padding: 12px 14px; background: rgba(7,10,14,.92); color: var(--muted2); font-size: .74rem; }
.economy-ledger strong { color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; font-weight: 500; }
.economy-ledger small { color: var(--muted); font-size: .66rem; }
.economy-findings { margin: 4px 0 0 18px; display: grid; gap: 4px; color: var(--muted2); font-size: .82rem; }
.economy-share { display: inline-grid; grid-template-columns: 80px auto; gap: 8px; align-items: center; font-family: 'JetBrains Mono', monospace; }
.economy-share i { display: block; height: 7px; border-radius: 4px; background: var(--vs); max-width: 80px; }
.economy-detail { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.economy-detail h4 { color: #fff; font-family: 'Orbitron', monospace; font-size: .74rem; letter-spacing: .1em; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translateX(-50%); padding: 9px 16px; border: 1px solid var(--border2); border-radius: 999px; background: rgba(10,14,19,.96); color: #fff; font-size: .8rem; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
footer { padding: 32px 48px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.f-logo { font-family: 'Orbitron', monospace; font-weight: 700; font-size: 1rem; color: var(--vs); letter-spacing: .15em; }
.f-copy { font-size: .75rem; color: var(--muted); }

@media (max-width: 1100px) {
  .character-head { grid-template-columns: minmax(0, 1fr); }
  .population-grid, .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .directive-layout { grid-template-columns: minmax(0, 1fr); }
  .directive-list { position: static; max-height: 360px; }
}
@media (max-width: 960px) {
  main { padding: 100px 24px 60px; }
  .my-characters-manage, .character-panel-grid { grid-template-columns: minmax(0, 1fr); }
  .manage-tools { justify-content: flex-start; }
  .character-panel-grid > .wide, .app-section.wide { grid-column: auto; }
  .metric-deck { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .character-head-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ranked-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .economy-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  main { padding: 88px 14px 48px; }
  .my-characters-header { flex-direction: column; align-items: start; }
  .my-character-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-character-card { min-height: 74px; padding: 10px 12px; }
  .character-tabs { top: 64px; }
  .character-panel { padding: 10px; }
  .app-section { padding: 14px; }
  .metric-deck, .data-tile-grid, .character-head-stats, .economy-pack-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranked-grid { grid-template-columns: minmax(0, 1fr); }
  .weapon-browser { flex-direction: column; align-items: stretch; }
  .weapon-count { text-align: left; }
  .cal-day { min-height: 52px; padding: 4px; }
  .cal-stats, .cal-count small { display: none; }
  .cal-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directive-row { grid-template-columns: auto minmax(0, 1fr); }
  .directive-progress { grid-column: 1 / -1; }
  .app-meter-row, .percentile-meter .app-meter-row { grid-template-columns: 96px minmax(0, 1fr) auto; }
  footer { flex-direction: column; gap: 14px; text-align: center; padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .character-tab::after { transition: none; }
  .spinner, .skeleton-lines span { animation: none; }
}