/* ════════ Gestaltung (05.10.2026) ════════
   Ruhiger, hochwertiger Look: ein System für Knöpfe, Reiter, Formulare, Hinweise, Tabellen.
   Wird als LETZTE Datei geladen und verfeinert die übrigen Stylesheets.
   Farbsemantik: Akzent = Gold · gut = Grün · Warnung = Bernstein · schlecht = Rot · Info = Blau.
   Icons: client/icons.js (eigene SVGs, currentColor). */
:root {
  --panel-2: #1c2431;
  --line-soft: rgba(255, 255, 255, .07);
  --faint: #677386;
  --accent-ink: #1b1404; --accent-bg: rgba(224, 180, 76, .13);
  --good: #4cc38a; --good-bg: rgba(76, 195, 138, .13); --good-ink: #9be3bf;
  --warn: #f0a43a; --warn-bg: rgba(240, 164, 58, .13); --warn-ink: #f7cd8f;
  --bad: #e8675a;  --bad-bg: rgba(232, 103, 90, .13);  --bad-ink: #f6b3aa;
  --info: #74a4dc; --info-bg: rgba(116, 164, 220, .13); --info-ink: #bcd4f0;
  --glass: rgba(15, 21, 30, .84);
  --shadow: 0 14px 36px rgba(0, 0, 0, .38);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ic-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.9a2 2 0 0 1 3.4 0l7 12.1a2 2 0 0 1-1.7 3H5a2 2 0 0 1-1.7-3zM12 9.5v4.2M12 16.8v.1'/%3E%3C/svg%3E");
  --ic-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.3M12 7.9v.1'/%3E%3C/svg%3E");
  --ic-offline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5l17 17M8.6 16a5 5 0 0 1 6.8 0M5 12.6a10 10 0 0 1 4.3-2.3M14.7 10.3A10 10 0 0 1 19 12.6M12 19.3v.1'/%3E%3C/svg%3E");
  --ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d99aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  --danger: var(--bad);
  font-family: var(--font);
}
[hidden] { display: none !important; }
body { font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: rgba(224, 180, 76, .3); }

/* ── Icons ─────────────────────────────────────────── */
.i { flex: none; display: inline-block; vertical-align: -.2em; }
p > .i:first-child, h3 > .i:first-child, h4 > .i:first-child, li > .i:first-child { margin-right: 2px; }
.muted .i, .hint .i { color: var(--muted); }

/* ── Zahlen & Semantik ─────────────────────────────── */
.num, .pill, .tbl td, .kv b, .stat-row b, .co-sum b, .co-fig b, .big-price, .book, .trades, .bar span { font-variant-numeric: tabular-nums; }
.up { color: var(--good); } .down { color: var(--bad); }
.warn { color: var(--warn); font-weight: 600; }
.here { display: flex; align-items: center; gap: 6px; color: var(--good); font-weight: 600; margin: 10px 0 0; }
.hint { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ── Hinweis-Kästen: .note.info / .ok / .warn / .bad (mit Icon im Text) ── */
.note { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; font-weight: 500;
  background: var(--info-bg); color: var(--info-ink); }
.note > .i { margin-top: 1px; color: currentColor; }
.note.ok { background: var(--good-bg); color: var(--good-ink); }
.note.warn { background: var(--warn-bg); color: var(--warn-ink); }
.note.bad { background: var(--bad-bg); color: var(--bad-ink); }
/* Bestehende Warnzeilen (<p class="warn">) und Offline-Hinweise bekommen dasselbe Aussehen + Icon per CSS */
.win-body p.warn, .region-card p.warn, .win-body .offline-note, .win-body p.hb-warn {
  display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; font-weight: 500;
  background: var(--warn-bg); color: var(--warn-ink); margin: 8px 0; }
.win-body p.warn::before { content: ''; flex: none; width: 15px; height: 15px; margin-top: 1px; background: currentColor; -webkit-mask: var(--ic-warning) center / contain no-repeat; mask: var(--ic-warning) center / contain no-repeat; }
.win-body .offline-note > .i { margin-top: 1px; }
.win-body .box.offline-note { border: 0; }
.battle-line { margin: 10px 0 0; }

/* ── Knöpfe ───────────────────────────────────────── */
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid rgba(224, 180, 76, .55); outline-offset: 2px; }
.primary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 11px; background: var(--accent); color: var(--accent-ink); font-weight: 600;
  transition: filter .15s, transform .08s, opacity .15s; }
.primary:hover:not(:disabled) { filter: brightness(1.07); }
.primary:active:not(:disabled) { transform: scale(.98); }
.primary.danger, .win-body .primary.danger { background: var(--bad); color: #2a0804; }
.primary:disabled { opacity: .4; cursor: not-allowed; }
/* Sekundär: Grundregel steht in windows.css (.win-body button:not(.primary)…); hier nur Regionskarte + Zustände */
.region-card button:not(.primary):not(.card-close) { border: 1px solid var(--line); background: rgba(255, 255, 255, .035); color: var(--text); font-weight: 500; transition: background .15s, border-color .15s; }
.region-card button:not(.primary):not(.card-close):hover:not(:disabled) { background: rgba(255, 255, 255, .08); border-color: #33415a; }
.win-body .btns button.on:not(.primary) { background: var(--accent-bg); border-color: rgba(224, 180, 76, .35); color: var(--accent); }
.win-body button.danger:not(.primary) { color: var(--bad); border-color: rgba(232, 103, 90, .35); }
.win-body button:disabled, .region-card button:disabled { opacity: .4; cursor: not-allowed; }
/* Knöpfe mit Icon: Icon und Text sauber nebeneinander */
/* Icon-Knöpfe. :has() steht in einer EIGENEN Regel: ein Browser ohne :has() verwirft sonst die ganze Liste (auch .btns button).
   Rückfall ohne :has(): Icons sitzen per vertical-align mittig neben dem Text – unschädlich, falls :has() doch greift. */
.btns button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.win-body button > .i, .region-card button > .i { vertical-align: -0.2em; margin-right: 4px; }
.win-body button:has(> .i), .region-card button:has(> .i) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.win-body button:has(> .i) > .i, .region-card button:has(> .i) > .i { margin-right: 0; }
.win-body button.link { display: inline-flex; align-items: center; }

/* ── Formulare ────────────────────────────────────── */
input, select, textarea { font-family: inherit; }
.win-body select, .win-body input:not([type=checkbox]):not([type=radio]), .win-body textarea, #auth input, #pick input {
  border: 1px solid var(--line); background-color: rgba(0, 0, 0, .22); color: var(--text); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.win-body select, .win-body input:not([type=checkbox]):not([type=radio]) { min-height: 36px; }
.win-body select:focus, .win-body input:focus, .win-body textarea:focus, #auth input:focus, #pick input:focus { outline: none; border-color: rgba(224, 180, 76, .6); box-shadow: 0 0 0 3px rgba(224, 180, 76, .14); }
.win-body select { -webkit-appearance: none; appearance: none; padding-right: 30px; background-image: var(--ic-chev); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }
.win-body input::placeholder, #auth input::placeholder { color: var(--faint); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; }
.win-body label { font-size: 12px; color: var(--muted); font-weight: 500; }

/* ── Reiter (Fensterkopf = Segment-Steuerung) ─────── */
.win-tabs { background: rgba(255, 255, 255, .045); padding: 3px; border-radius: 11px; }
.win-tabs button { padding: 6px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; transition: color .15s, background .15s; }
.win-tabs button:hover { color: var(--text); }
.win-tabs button.on { background: var(--panel-2); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.tabs { background: rgba(0, 0, 0, .25); }
.tabs button.on { background: var(--panel-2); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

/* ── Badges / Tags ────────────────────────────────── */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; line-height: 1.5; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--muted); letter-spacing: .01em; vertical-align: 1px; }
.tag.ok { background: var(--good-bg); color: var(--good); }
.tag.bad { background: var(--bad-bg); color: var(--bad); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.info { background: var(--info-bg); color: var(--info); }
.tag.on { background: var(--accent); color: var(--accent-ink); }
.tag .i { width: 12px; height: 12px; }
.badge { background: var(--bad); box-shadow: 0 0 0 2px #121922; }

/* ── Karten, Kästen, Tabellen ─────────────────────── */
.box { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 14px; }
.win-body h3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; color: var(--muted); }
.win-body h3 .tag { letter-spacing: .01em; text-transform: none; }
.win-body h4 { display: flex; align-items: center; gap: 6px; }
.tbl th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 9px 8px; border-top: 1px solid var(--line-soft); }
.tbl tr:hover > td { background: rgba(255, 255, 255, .022); }
.tbl tr.mine > td { background: var(--accent-bg); }
.kv { gap: 6px 16px; }
.kv span { color: var(--muted); }
.stat-row div, .co-sum div { background: var(--panel); border-color: var(--line-soft); }
.stat-row small, .co-sum small { color: var(--faint); font-weight: 600; }

/* Fortschrittsbalken: ruhige Volltöne statt Verläufe */
.bar { height: 20px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 0; }
.bar i { background: var(--good); border-radius: inherit; }
.bar span { font-size: 12px; line-height: 20px; font-weight: 600; color: var(--text); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.bar.big { height: 24px; border-radius: 12px; } .bar.big span { line-height: 24px; }
.bar.xp i { background: var(--accent); }
.bar.build i { background: var(--info); }
.bar.energy i { background: var(--good); }

/* Vorkommen-Chips */
.dep { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--good-bg); color: var(--good-ink); margin: 1px 0; }
.dep .i { width: 13px; height: 13px; }
.dep.unknown { background: rgba(255, 255, 255, .06); color: var(--muted); padding-left: 8px; }

/* ── Kopfleiste (HUD) ─────────────────────────────── */
.hud-top { background: var(--glass); border: 1px solid var(--line-soft); box-shadow: var(--shadow); border-radius: 16px; }
.logo { font-weight: 700; letter-spacing: -.01em; }
.live { display: inline-flex; align-items: center; gap: 5px; border: 0; background: var(--bad-bg); color: var(--bad); border-radius: 6px; padding: 2px 7px 2px 6px; font-size: 10.5px; letter-spacing: .08em; }
.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: live-pulse 2.4s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .35; } }
#ticker-track { font-size: 13.5px; }
.pill { gap: 6px; height: 32px; padding: 0 11px 0 8px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .045); color: var(--text); font-weight: 600; transition: background .15s; }
.pill .i { color: var(--muted); }
.pill b { font-weight: 600; white-space: nowrap; }
.pill.gold, .pill.gold .i { color: #f3cf6d; }
.pill.lvl { color: var(--text); } .pill.lvl .i { color: var(--accent); }
.pill.energy { padding-left: 5px; }
.ring .ring-track { stroke: rgba(255, 255, 255, .1); }
.ring .ring-val { stroke: var(--good); transition: stroke-dasharray .5s ease; }
.ring g { color: var(--good); }
.pill.energy.low .ring-val { stroke: var(--warn); } .pill.energy.low .ring g { color: var(--warn); }
.pill.loc b { max-width: 170px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--muted); }
.pill.speed { color: var(--bad); border-color: rgba(232, 103, 90, .35); } .pill.speed .i { color: inherit; }
.who { font-weight: 500; }

/* ── Dock ─────────────────────────────────────────── */
.dock { gap: 2px; padding: 6px; border-radius: 20px; background: var(--glass); border: 1px solid var(--line-soft); box-shadow: var(--shadow); }
.dock button { position: relative; gap: 3px; min-width: 62px; padding: 7px 8px 6px; border-radius: 13px; transition: background .15s, color .15s; }
.dock button .ic { display: grid; place-items: center; height: 22px; font-size: 0; }
.dock button .ic .i { width: 21px; height: 21px; }
.dock button b { font-size: 11px; font-weight: 500; letter-spacing: .01em; }
.dock button.on { background: var(--accent-bg); color: var(--accent); }
.dock button.on b { font-weight: 600; }
.dock-more { padding: 8px; gap: 4px; border-radius: 18px; background: #18202c; border: 1px solid var(--line-soft); box-shadow: var(--shadow); }
.dock-more button { min-width: 86px; padding: 10px 6px 8px; }
.dock .badge { top: 3px; right: 10px; }

/* Zoom-Knöpfe */
.zoom button, #game .zoom button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-soft); color: var(--text);
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.zoom button:hover { background: rgba(30, 40, 54, .95); }
.zoom [data-ic] { display: grid; }

/* ── Fenster ──────────────────────────────────────── */
.win { background: #121922; border: 1px solid var(--line-soft); border-radius: 22px; }
.win-head { gap: 14px; padding: 14px 14px 12px 18px; border-bottom: 1px solid var(--line-soft); }
#win-title { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 650; }
#win-title .i { box-sizing: content-box; padding: 6px; border-radius: 10px; background: var(--accent-bg); color: var(--accent); }
.win-close { display: grid; place-items: center; border-radius: 10px; }
.win-close [data-ic] { display: grid; }
.win-body { gap: 14px; }

/* ── Regionskarte ─────────────────────────────────── */
.region-card { width: 330px; padding: 16px; border-radius: 18px; background: rgba(15, 21, 30, .93); border: 1px solid var(--line-soft); box-shadow: var(--shadow); }
.card-close { display: grid; place-items: center; width: 30px; height: 30px; top: 10px; right: 10px; border-radius: 9px; }
.card-close:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.rc-head { display: flex; align-items: center; gap: 12px; margin: 0 32px 12px 0; }
.rc-flag, img.rc-flag { height: 30px; width: auto; max-width: 46px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); margin: 0; flex: none; vertical-align: middle; }
.rc-neutral { display: grid; place-items: center; width: 42px; height: 30px; background: rgba(255, 255, 255, .06); color: var(--muted); box-shadow: none; }
.rc-title { min-width: 0; }
.rc-title h3 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.rc-title .sub-line { margin: 2px 0 0; }
.rc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.rc-facts div { display: grid; gap: 1px; min-width: 0; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.rc-facts small, .rc-sec > small { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.rc-facts b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-sec { display: grid; gap: 6px; margin-bottom: 12px; }
.rc-deps { display: flex; flex-wrap: wrap; gap: 4px; }
.rc-infra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rc-inf { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 0; border-radius: 9px; background: rgba(255, 255, 255, .035); color: var(--faint); font-size: 13px; }
.rc-inf b { font-weight: 600; }
.rc-inf.on { background: var(--accent-bg); color: var(--text); } .rc-inf.on .i { color: var(--accent); }
.rc-nb { margin: 0 0 4px; font-size: 12.5px; }
.region-card .btns { gap: 6px; margin-top: 10px; }
#region-info .card-close { width: 30px; margin: 0; }
.region-card .btns button { width: auto; margin-top: 0; flex: 1 1 40%; min-height: 38px; padding: 8px 12px; border-radius: 11px; font-size: 14px; }
.region-card .primary { padding: 9px 14px; }
.region-card .rc-travel button { flex-basis: 100%; }

/* ── Toast ────────────────────────────────────────── */
#toast { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 14px; font-weight: 500; background: rgba(26, 35, 48, .96);
  border: 1px solid var(--line-soft); box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: toast-in .18s ease-out; }
#toast[hidden] { display: none; }
#toast .i { color: var(--good); }
#toast.bad { border-color: rgba(232, 103, 90, .4); color: #ffdcd6; } #toast.bad .i { color: var(--bad); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 6px); } }

/* ── Einzelne Fenster ─────────────────────────────── */
.inv-row span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.inv-row span .i, .win-body .inv-groups h4 .i { color: var(--muted); }
.inv-row.zero span .i { opacity: .5; }
.inv-row { border-top-color: var(--line-soft); }
.mk { border-radius: 11px; transition: background .12s; }
.mk b { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.mk b .i { color: var(--muted); }
.mk.on b .i { color: var(--accent); }
.mk small { padding-left: 22px; }
.mk-list .mk[data-mk^="X:"] small { padding-left: 0; }
.big-price { font-weight: 650; }
.pr-title { display: inline-flex; align-items: center; gap: 7px; } .pr-title .i { color: var(--info); }
.co-chev { display: grid; place-items: center; width: 18px; color: var(--faint); }
.co-dot { box-shadow: 0 0 0 3px rgba(76, 195, 138, .15); }
.co-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); } .co-dot.bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.co-pips i.on { background: var(--accent); }
.found-info p .i { vertical-align: -.25em; }
.archive p { display: flex; align-items: flex-start; gap: 8px; }
.archive p span { color: var(--text); font-size: inherit; font-variant-numeric: normal; }
.archive .news-ic { color: var(--muted); margin-top: 2px; }
.np-foot span { display: inline-flex; align-items: center; gap: 4px; }
.offline-note { color: var(--warn-ink); }

/* Anmeldung & Startland */
.card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 20px; box-shadow: var(--shadow); }
#auth h1, #pick h1 { font-weight: 700; letter-spacing: -.02em; }
.nation-btn { background: rgba(0, 0, 0, .2); border: 1px solid var(--line-soft); border-top: 3px solid var(--c); transition: background .15s, transform .08s; }
.nation-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .04); }
.nation-btn:active:not(:disabled) { transform: scale(.99); }

/* ── Handy (≤ 760 px, getestet für 375 px) ─────────── */
@media (max-width: 760px) {
  .hud-stats { gap: 4px; }
  .pill { height: 30px; padding: 0 8px 0 6px; gap: 4px; font-size: 12.5px; }
  .pill.energy { padding-left: 3px; }
  .pill .ring { width: 20px; height: 20px; }
  .pill.loc b { max-width: 74px; }
  .dock { gap: 0; padding: 4px; border-radius: 18px; }
  .dock button { min-width: 0; padding: 6px 0 5px; gap: 2px; border-radius: 11px; }
  .dock button .ic .i { width: 19px; height: 19px; }
  .dock button b { font-size: 9.5px; }
  /* „Mehr“ auf dem Handy: so breit wie das Dock (das reicht von 8 px bis 8 px vor dem Rand) → bleibt immer im Bild */
  .dock-more { left: 0; right: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dock-more button { min-width: 0; padding: 9px 4px 7px; }
  .dock-more button b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dock .badge { right: 2px; }
  .region-card { width: auto; padding: 14px; max-height: calc(100% - 160px); overflow-y: auto; }
  .win { border-radius: 0; }
  .win-head { padding: 10px 10px 10px 14px; }
  #win-title { font-size: 18px; }
  #win-title .i { padding: 5px; width: 18px; height: 18px; }
  .win-tabs { overflow-x: auto; scrollbar-width: none; }
  .win-tabs button { padding: 6px 8px; font-size: 13px; white-space: nowrap; }
  .mk small { padding-left: 0; }
}
@media (max-width: 400px) {
  .pill.loc { display: none; }
  .pill { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .live::before, #toast, .win { animation: none; }
}

/* ── Ergänzungen: KI-Politiker, Startprämie, Firmen, Produktion, Staatslager, Ranglisten ── */
.tag.ki-tag { background: rgba(116, 164, 220, .14); color: var(--info); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; padding: 0 6px; line-height: 16px; border-radius: 5px; margin-left: 4px; vertical-align: 1px; box-shadow: inset 0 0 0 1px rgba(116, 164, 220, .25); }
.bonus-box { background: linear-gradient(180deg, rgba(224, 180, 76, .08), rgba(224, 180, 76, .02)), var(--panel); border-color: rgba(224, 180, 76, .22); }
.bonus-box h3, .bonus-box h3 .i { color: var(--accent); }
.good-cell { display: inline-flex; align-items: center; gap: 7px; } .good-cell .i { color: var(--muted); }
.stockpile-box h3 .i { color: var(--info); }

/* Firmen-Übersicht (depth.css): ruhigere Zeilen, klare Ampel */
.co-item { border-radius: 14px; }
.co-row { padding: 11px 14px; transition: background .12s; }
.co-row:hover { background: rgba(255, 255, 255, .025); }
.co-item.open .co-row { border-bottom: 1px solid var(--line-soft); }
.co-name b { font-weight: 600; }
.co-fig small, .co-name small { color: var(--faint); }
.co-dot { background: var(--good); }
.co-pips i { width: 5px; height: 12px; background: rgba(255, 255, 255, .1); }
.co-tabs { padding: 10px 14px 8px; gap: 6px; border-bottom: 1px solid var(--line-soft); }
.win-body .co-tabs button { padding: 4px 11px; border-radius: 999px; font-size: 12px; }
.win-body .co-tabs button.on { background: var(--accent-bg) !important; color: var(--accent) !important; border-color: rgba(224, 180, 76, .35) !important; }
.co-body { padding: 12px 14px 14px; }
.co-sum b { font-size: 16px; font-weight: 650; }
.win-body .co-found summary, .co-account summary, .co-prod summary, .co-upg summary { list-style: none; display: flex; align-items: center; gap: 8px; }
.co-found summary::-webkit-details-marker, .co-account summary::-webkit-details-marker, .co-prod summary::-webkit-details-marker, .co-upg summary::-webkit-details-marker { display: none; }
.co-found summary::before, .co-account summary::before, .co-prod summary::before, .co-upg summary::before { content: ''; width: 14px; height: 14px; flex: none; background: var(--muted);
  -webkit-mask: var(--ic-chev) center / contain no-repeat; mask: var(--ic-chev) center / contain no-repeat; transform: rotate(-90deg); transition: transform .15s; }
.co-found[open] summary::before, .co-account[open] summary::before, .co-prod[open] summary::before, .co-upg[open] summary::before { transform: none; }
.co-found summary { padding: 10px 0; color: var(--accent); }

/* Produktion & Upgrades (production.css) */
.co-prod .up, .co-upg .up { color: var(--good); } .co-prod .down { color: var(--bad); }
.prod-bars rect { fill: rgba(255, 255, 255, .12); } .prod-bars rect.today { fill: var(--accent); }
.prod-fc { background: rgba(255, 255, 255, .03); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px; }
.upg { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.upg .pips i { background: rgba(255, 255, 255, .1); } .upg .pips i.on { background: var(--accent); }
.upg small.warn { color: var(--warn); }

/* Ranglisten (stats.css) */
.st-rank { width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .05); font-size: 11.5px; font-weight: 600; margin-right: 6px; }
tr:nth-child(2) .st-rank, .st-list > :nth-child(1) .st-rank { background: rgba(224, 180, 76, .2); color: var(--accent); }
.st-tile, .st-bar i { border-color: var(--line-soft); }
.st-seg button.on { background: var(--panel-2) !important; color: var(--text) !important; }
/* aktiver Fenster-Reiter deutlich erkennbar (Hauptagent 05.10.) */
.win-tabs button.on { background: rgba(255, 255, 255, .1); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent), 0 1px 2px rgba(0, 0, 0, .35); }
.win-tabs button:focus:not(.on):not(:hover) { background: none; }
/* Mini-Kursverlauf in der Marktliste */
.mk .mk-spark { width: 60px; height: 18px; flex: none; margin-left: auto; }
.mk .mk-spark path { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.mk .mk-spark.up path { stroke: #4cc38a; } .mk .mk-spark.down path { stroke: #e5484d; }