/* Layout: summary tiles over a two-pane console (roster | sticky live map); one column with a view dock on phones. */
:root {
    --ground: #04030f;
    --panel: #0b0d1c;
    --panel-hi: #121530;
    --text: #e8f0ff;
    --soft: #a8b8d4;
    --mute: #6a7894;
    --brass: #c6a15b;
    --brass-hi: #f0d79a;
    --cyan: #7ee0ff;
    --line: rgba(126, 224, 255, .14);
    --line-hi: rgba(126, 224, 255, .3);
    --run: #5be3a6;
    --stall: #f2b65a;
    --idle: #8fa8ff;
    --off: #5d6884;
    --ban: #ff5d6e;
    --f-d: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --f-u: "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --f-m: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --gutter: 16px;
    --radius: 14px;
    color-scheme: dark;
}
@media (min-width: 720px) { :root { --gutter: 28px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh; background: var(--ground); color: var(--text);
    font: 14px/1.5 var(--f-u); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
.sky {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at 12% -5%, rgba(88, 40, 140, .34), transparent 60%),
        radial-gradient(ellipse 60% 50% at 95% 105%, rgba(18, 60, 120, .38), transparent 60%),
        var(--ground);
}
a { color: var(--cyan); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }

/* Page head: title + live status + privacy (the site header above is shared by every page) */
.hub-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin: 6px 0 20px; }
.hub-title .eyebrow { margin-bottom: 6px; }
.hub-title h1 { margin: 0; font: 500 clamp(38px, 6vw, 58px)/.95 var(--f-d); letter-spacing: -.01em; }
.hub-title h1 em { color: var(--brass-hi); }
.hub-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pulse { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(11, 13, 28, .8); min-width: 0; }
.pulse svg { width: 30px; height: 30px; flex: none; transform: rotate(-90deg); }
.pulse circle { fill: none; stroke-width: 3; }
.pulse .track { stroke: var(--line); }
.pulse .sweep { stroke: var(--cyan); stroke-linecap: round; stroke-dasharray: 94.25; transition: stroke-dashoffset 1s linear; }
.pulse span { display: grid; line-height: 1.25; min-width: 0; }
.pulse b { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.pulse b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--run); box-shadow: 0 0 0 3px rgba(91, 227, 166, .18); }
.pulse.down b::before { background: var(--stall); box-shadow: 0 0 0 3px rgba(242, 182, 90, .18); }
.pulse small { color: var(--mute); font: 10px var(--f-m); letter-spacing: .04em; white-space: nowrap; }
.icon-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 999px; cursor: pointer;
    background: rgba(11, 13, 28, .8); border: 1px solid var(--line); color: var(--soft); font-size: 12px;
}
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (max-width: 559px) {
    .hub-head { align-items: flex-start; }
    .hub-controls { width: 100%; flex-wrap: nowrap; }
    .pulse { flex: 1; }
    .icon-btn span { display: none; }
    .icon-btn { padding: 12px; }
}
.icon-btn[aria-pressed="true"] { color: var(--brass-hi); border-color: rgba(198, 161, 91, .5); background: rgba(198, 161, 91, .1); }

main { padding: 22px var(--gutter) 48px; max-width: 1560px; margin: 0 auto; }

/* Signed-out gate */
.gate { display: grid; place-items: center; min-height: 70vh; }
.gate-copy { max-width: 620px; }
.eyebrow { margin: 0 0 14px; color: var(--brass); font: 11px var(--f-m); letter-spacing: .18em; text-transform: uppercase; }
.gate h1 { margin: 0; font: 500 clamp(40px, 8vw, 72px)/1.02 var(--f-d); text-wrap: balance; }
.gate h1 em { color: var(--brass-hi); }
.lead { margin: 20px 0 0; color: var(--soft); font-size: 16px; max-width: 54ch; }
.gate-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.btn {
    display: inline-flex; align-items: center; padding: 12px 18px; border-radius: 12px; text-decoration: none; font-weight: 600;
    color: var(--text); border: 1px solid var(--line-hi); background: rgba(126, 224, 255, .04);
}
.btn.primary { color: #1a1206; border-color: transparent; background: linear-gradient(135deg, var(--brass-hi), var(--brass)); }
.fine { margin-top: 18px; color: var(--mute); font-size: 12px; max-width: 54ch; }

/* Summary tiles */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
.tile { position: relative; padding: 14px 16px 15px; background: linear-gradient(170deg, rgba(18, 21, 48, .95), rgba(11, 13, 28, .95)); min-width: 0; overflow: hidden; }
.tile svg.spark { position: absolute; right: 0; bottom: 0; width: 55%; height: 46px; opacity: .9; pointer-events: none; }
.tile svg.spark path.area { fill: rgba(126, 224, 255, .1); }
.tile svg.spark path.line { fill: none; stroke: var(--cyan); stroke-width: 1.5; }
.tile svg.spark.brass path.area { fill: rgba(240, 215, 154, .1); }
.tile svg.spark.brass path.line { stroke: var(--brass-hi); }
.tile svg.spark circle { fill: var(--ground); stroke-width: 1.5; }
.tile span { display: block; color: var(--mute); font: 10px var(--f-m); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.tile b { display: block; margin-top: 6px; font: 500 26px/1 var(--f-d); white-space: nowrap; }
.tile small { position: relative; display: block; margin-top: 5px; color: var(--soft); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.alert b { color: var(--stall); }
.tile.good b { color: var(--run); }
@media (max-width: 1099px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 559px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile b { font-size: 22px; } }

/* Console split */
.split { display: grid; grid-template-columns: minmax(360px, 470px) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.roster { min-width: 0; }
.atlas {
    position: sticky; top: 16px; height: calc(100vh - 32px); min-height: 460px; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line-hi); background: #0a0f17; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); isolation: isolate;
}
.map { position: absolute; inset: 0; background: #0a0f17; isolation: isolate; }
.map-note {
    position: absolute; left: 12px; bottom: 12px; z-index: 500; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 120px);
    padding: 7px 11px; border-radius: 9px; font-size: 11px; color: var(--soft);
    background: rgba(4, 3, 15, .82); border: 1px solid var(--line); backdrop-filter: blur(6px);
}
.map-note .dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(126, 224, 255, .15); }
.map-legend { position: absolute; top: 12px; right: 12px; z-index: 500; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; max-width: calc(100% - 80px);
    padding: 7px 12px; border-radius: 10px; font-size: 11px; color: var(--soft); background: rgba(4, 3, 15, .82); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { width: 8px; height: 8px; border-radius: 50%; }
.map-legend .running { background: var(--run); } .map-legend .stalled { background: var(--stall); } .map-legend .idle { background: var(--idle); }
.map-legend .offline { background: var(--off); } .map-legend .banned { background: var(--ban); }
.map-fit {
    position: absolute; right: 12px; bottom: 12px; z-index: 500; padding: 7px 12px; border-radius: 9px; cursor: pointer; font-size: 12px;
    background: rgba(4, 3, 15, .82); border: 1px solid var(--line-hi); color: var(--text);
}
@media (max-width: 999px) {
    .split { grid-template-columns: minmax(0, 1fr); }
    .atlas { position: relative; top: auto; height: calc(100vh - 220px); min-height: 380px; }
    body[data-view="list"] .atlas { display: none; }
    body[data-view="map"] .roster, body[data-view="map"] .tiles { display: none; }
    body[data-view="map"] .split { margin-top: 0; }
    body[data-view="map"] .atlas { height: calc(100dvh - 120px - env(safe-area-inset-bottom, 0px)); }
    body[data-view="map"] .map-note, body[data-view="map"] .map-fit { bottom: 12px; }
    main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Filters + search */
.roster-tools { display: grid; gap: 10px; margin-bottom: 12px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
    flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; cursor: pointer; font-size: 12px;
    color: var(--soft); background: transparent; border: 1px solid var(--line);
}
.chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip em { font-style: normal; color: var(--mute); font-family: var(--f-m); font-size: 11px; }
.chip[aria-selected="true"] { color: var(--text); border-color: var(--line-hi); background: var(--panel-hi); }
.search input {
    width: 100%; padding: 10px 13px; border-radius: 11px; color: var(--text); font: inherit;
    background: rgba(11, 13, 28, .9); border: 1px solid var(--line);
}
.search input::placeholder { color: var(--mute); }

/* Account cards */
.cards { display: grid; gap: 10px; }
.card {
    --tone: var(--off);
    position: relative; display: grid; gap: 10px; width: 100%; padding: 14px 15px 13px; text-align: left; cursor: pointer;
    border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(160deg, var(--panel-hi), var(--panel));
    transition: border-color .2s, transform .2s;
}
.card:hover { border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--tone) 12%, transparent); }
.card[aria-current="true"] { border-color: color-mix(in srgb, var(--tone) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 35%, transparent); }
.card.running { --tone: var(--run); } .card.stalled { --tone: var(--stall); } .card.idle { --tone: var(--idle); }
.card.offline { --tone: var(--off); } .card.banned { --tone: var(--ban); background: linear-gradient(160deg, #22101a, var(--panel)); }
.card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.orb { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
    font: 600 13px var(--f-d); color: var(--text); background: color-mix(in srgb, var(--tone) 16%, var(--panel));
    border: 1.5px solid var(--tone); }
.running .orb::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--tone); opacity: 0; animation: ring 2.4s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
.who { min-width: 0; flex: 1; }
.who strong { display: block; font: 600 17px/1.15 var(--f-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { display: block; color: var(--brass-hi); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badges { display: flex; gap: 5px; flex: none; }
.badge { padding: 3px 7px; border-radius: 6px; font: 10px var(--f-m); letter-spacing: .06em; color: var(--soft); border: 1px solid var(--line); white-space: nowrap; }
.badge.state { color: var(--tone); border-color: color-mix(in srgb, var(--tone) 45%, transparent); background: color-mix(in srgb, var(--tone) 10%, transparent); text-transform: uppercase; }
.task { display: grid; gap: 2px; padding: 9px 11px; border-radius: 10px; background: rgba(4, 3, 15, .55); border: 1px solid var(--line); min-width: 0; }
.task-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.task-line b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.task-line time { margin-left: auto; flex: none; color: var(--cyan); font: 11px var(--f-m); }
.task small { color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task.warn { border-color: rgba(242, 182, 90, .35); }
.task.warn .task-line time { color: var(--stall); }
.task.ban { border-color: rgba(255, 93, 110, .4); background: rgba(255, 93, 110, .07); }
.task.ban b { color: var(--ban); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fact span { display: block; color: var(--mute); font: 9.5px var(--f-m); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.fact b { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fact b.up { color: var(--run); }
.hpbar { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #d8404f, #5be3a6); }
.empty { padding: 28px 20px; text-align: center; color: var(--soft); border: 1px dashed var(--line-hi); border-radius: var(--radius); }
.empty h3 { margin: 0 0 6px; font: 500 20px var(--f-d); color: var(--text); }
body.private .who strong, body.private .sheet-name { filter: blur(7px); }
body.private .who strong:hover { filter: none; }

/* Map markers */
.leaflet-container { background: #0a0f17; font-family: var(--f-u); }
.leaflet-control-zoom a { background: rgba(4, 3, 15, .85) !important; color: var(--text) !important; border-color: var(--line) !important; }
.leaflet-control-attribution { background: rgba(4, 3, 15, .7) !important; color: var(--mute) !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: var(--soft) !important; }
.pin { --tone: var(--off); position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    font: 600 11px var(--f-d); color: #04030f; background: var(--tone); border: 2px solid #04030f; box-shadow: 0 0 0 2px var(--tone), 0 6px 16px rgba(0, 0, 0, .55); }
.pin.running { --tone: var(--run); } .pin.stalled { --tone: var(--stall); } .pin.idle { --tone: var(--idle); } .pin.banned { --tone: var(--ban); }
.pin.focus { transform: scale(1.18); }
.pin-label { position: absolute; top: 33px; left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; white-space: nowrap;
    font: 600 11px var(--f-u); color: var(--text); background: rgba(4, 3, 15, .82); border: 1px solid var(--line); }
body.private .pin-label { display: none; }

/* Dock (phones) */
.dock { display: none; }
@media (max-width: 999px) {
    .dock { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; transform: translateX(-50%);
        display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(11, 13, 28, .92); border: 1px solid var(--line-hi);
        backdrop-filter: blur(14px); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); }
    .dock button { padding: 10px 22px; border-radius: 10px; border: 0; background: transparent; color: var(--soft); font-weight: 600; cursor: pointer; }
    .dock button[aria-pressed="true"] { color: #1a1206; background: linear-gradient(135deg, var(--brass-hi), var(--brass)); }
}

/* Detail sheet */
.sheet { position: fixed; inset: 0; z-index: 80; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(2, 1, 10, .62); backdrop-filter: blur(3px); animation: fade .2s ease; }
.sheet-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%); overflow-y: auto; overscroll-behavior: contain;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 22px calc(30px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, #0e1024, #070814); border-left: 1px solid var(--line-hi); animation: slide .26s cubic-bezier(.2, .8, .2, 1);
}
@keyframes slide { from { transform: translateX(40px); opacity: .4; } }
@keyframes fade { from { opacity: 0; } }
@media (max-width: 719px) {
    .sheet-panel { top: 6vh; width: 100%; border-left: 0; border-top: 1px solid var(--line-hi); border-radius: 20px 20px 0 0; padding-inline: 16px; animation-name: rise; }
    @keyframes rise { from { transform: translateY(60px); opacity: .4; } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.sheet-top { display: flex; align-items: flex-start; gap: 12px; }
.sheet-top .orb { width: 46px; height: 46px; font-size: 18px; }
.sheet-name { margin: 0; font: 500 30px/1.05 var(--f-d); text-wrap: balance; overflow-wrap: anywhere; }
.sheet-sub { margin-top: 4px; color: var(--soft); font-size: 13px; }
.close { margin-left: auto; width: 36px; height: 36px; flex: none; border-radius: 10px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 20px; line-height: 1; color: var(--soft); }
.sheet section { margin-top: 22px; }
.sheet h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; color: var(--brass); font: 11px var(--f-m); letter-spacing: .16em; text-transform: uppercase; }
.sheet h3 small { margin-left: auto; color: var(--mute); letter-spacing: .04em; text-transform: none; font-size: 11px; }
.now { padding: 16px; border-radius: var(--radius); border: 1px solid var(--line-hi); background: radial-gradient(ellipse at 0 0, rgba(126, 224, 255, .08), transparent 60%), var(--panel); }
.now-task { font: 500 22px/1.2 var(--f-d); overflow-wrap: anywhere; }
.now-detail { margin-top: 4px; color: var(--soft); }
.now-clock { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; color: var(--mute); font-size: 12px; }
.now-clock b { color: var(--cyan); font-family: var(--f-m); font-weight: 500; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 14px; }
.stat { padding: 9px 11px; border-radius: 10px; background: rgba(4, 3, 15, .6); border: 1px solid var(--line); min-width: 0; }
.stat span { display: block; color: var(--mute); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat b { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.source { margin-top: 10px; color: var(--mute); font-size: 11px; }
.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kv div { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(11, 13, 28, .7); min-width: 0; }
.kv span { display: block; color: var(--mute); font: 9.5px var(--f-m); letter-spacing: .1em; text-transform: uppercase; }
.kv b { display: block; margin-top: 3px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 459px) { .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mini-map { position: relative; height: 240px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-hi); }
.mini-map .map-note { max-width: calc(100% - 24px); }
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.skill { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 9px; background: rgba(11, 13, 28, .75); border: 1px solid var(--line); min-width: 0; }
.skill img { width: 20px; height: 20px; object-fit: contain; }
.skill span { color: var(--soft); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill b { font: 600 15px var(--f-d); }
.skill i { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.skill i::after { content: ""; display: block; width: var(--p); height: 100%; background: var(--brass); }
.skill.maxed b { color: var(--brass-hi); }
@media (max-width: 459px) { .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bank-head { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin-bottom: 10px; }
.bank-head b { font: 500 26px var(--f-d); color: var(--brass-hi); }
.bank-head span { color: var(--mute); font-size: 12px; }
.bank-search { width: 100%; margin-bottom: 10px; padding: 8px 11px; border-radius: 9px; color: var(--text); font: inherit; background: rgba(4, 3, 15, .7); border: 1px solid var(--line); }
.bank { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; max-height: 330px; overflow-y: auto; padding: 8px; border-radius: 12px;
    background: #2b2418; border: 1px solid #4a3d27; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.slot { position: relative; height: 46px; display: grid; place-items: center; border-radius: 6px; }
.slot:hover { background: rgba(255, 255, 255, .06); }
.slot img { width: 34px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.slot b { position: absolute; top: 1px; left: 3px; font: 700 10px/1 var(--f-u); text-shadow: 1px 1px 0 #000; }
.qty-y { color: #ffff00; } .qty-w { color: #ffffff; } .qty-g { color: #00ff80; }
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--mute); font: 10px var(--f-m); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .bar { fill: var(--cyan); opacity: .75; }
.chart .bar.today { fill: var(--brass-hi); opacity: 1; }
.list { display: grid; gap: 4px; }
.row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; background: rgba(11, 13, 28, .7); font-size: 13px; }
.row span { color: var(--soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row b { font-family: var(--f-m); font-weight: 500; color: var(--text); }
details summary { cursor: pointer; color: var(--soft); font-size: 13px; }
.quests { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.quests span { padding: 3px 8px; border-radius: 6px; font-size: 11px; color: var(--soft); border: 1px solid var(--line); }
.muted { color: var(--mute); }