:root {
  color-scheme:dark; font-family:"Segoe UI",system-ui,sans-serif;
  --bg:#111111; --panel:#191919; --panel-2:#212121; --border:#2f2f2f;
  --text:#f5f2eb; --muted:#7a7a7a; --accent:#e4572e; --accent-hover:#c74823;
  --green:#7fbf8e; --red:#ef6f6f; background:var(--bg); color:var(--text);
  --chart-1:#3987e5; --chart-2:#d95926; --chart-3:#199e70; --chart-4:#c98500;
  --chart-5:#d55181; --chart-6:#008300; --chart-7:#9085e9; --chart-8:#e66767;
  --chart-other:#5c5c5c; --chart-grid:#2c2c2a; --chart-axis:#3a3a3a
}
[hidden] { display:none !important }
body { margin:0; background:var(--bg); color:var(--text) } main { max-width:1280px; margin:auto; padding:24px }
#topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; min-height:58px; padding:0 max(24px,calc((100vw - 1280px)/2 + 24px)); border-bottom:1px solid var(--border); background:rgba(17,17,17,.96); backdrop-filter:blur(12px) }
.brand { font-size:16px; font-weight:700; letter-spacing:.2px }
#account-shell { position:relative }
#account-toggle { display:flex; align-items:center; gap:9px; background:transparent; border:1px solid var(--border); padding:8px 12px }
#account-toggle:hover,#account-toggle[aria-expanded="true"] { background:var(--panel-2) }
.account-menu { position:absolute; right:0; top:calc(100% + 8px); width:270px; padding:16px; border:1px solid var(--border); border-radius:10px; background:var(--panel); box-shadow:0 18px 50px rgba(0,0,0,.45) }
.account-menu strong { display:block; margin-bottom:8px }
.account-menu p { margin:0 0 14px; line-height:1.45 }
.account-menu button { width:100% }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px }
.page-head h1 { margin:0 0 4px; font-size:24px }
.page-head p { margin:0 }
.card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px; margin:16px 0 }
form { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 }
input,select,button,.button { box-sizing:border-box; border:1px solid var(--border); border-radius:8px; padding:9px 12px; background:var(--panel-2); color:inherit }
button,.button { cursor:pointer; background:var(--accent); border:0; text-decoration:none; display:inline-block }
button:hover,.button:hover { background:var(--accent-hover) }
button.danger { background:transparent; border:1px solid rgba(239,111,111,.4); color:var(--red) } .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--border) }
.muted { color:var(--muted) } .error { color:var(--red) } pre { white-space:pre-wrap; overflow-wrap:anywhere }
label { font-size:.85em; color:var(--muted); align-self:center }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; align-items:end; padding:16px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2) }
.compact-grid { grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto }
.stacked-form { display:block; padding:16px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2) }
.stacked-form .form-grid { padding:0; border:0; background:transparent }
.field { min-width:0 }
.field label { display:block; margin:0 0 6px }
.field input,.field select,.field textarea { width:100% }
.field-help { display:block; min-height:1.2em; margin-top:6px; font-size:.8em }
.wide-field { grid-column:span 2 }
.form-actions { display:flex; align-items:center; align-self:end; gap:8px; min-height:38px }
fieldset { border:1px solid var(--border); border-radius:8px; padding:10px; margin:0; display:flex; flex-wrap:wrap; gap:10px }
fieldset label { display:flex; gap:4px; align-items:center; color:inherit; font-size:1em }
nav#income-nav { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 }
nav#income-nav { border-bottom:1px solid var(--border); padding-bottom:8px }
nav#income-nav button { background:transparent; color:var(--muted) }
nav#income-nav button:hover { color:var(--text); background:var(--panel-2) }
nav#income-nav button[aria-current="true"] { color:var(--text); background:var(--panel-2); box-shadow:inset 0 -2px 0 var(--accent) }
.masked { font-family: ui-monospace, monospace; letter-spacing:1px }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
@media (max-width: 600px) {
  main { padding:12px }
  #topbar { padding:0 12px }
  .brand { font-size:14px }
  #identity { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .account-menu { position:fixed; left:12px; right:12px; top:64px; width:auto }
  form { flex-direction:column; align-items:stretch }
  .row { flex-direction:column; align-items:flex-start }
  .form-grid,.compact-grid { display:grid; grid-template-columns:1fr }
  .wide-field { grid-column:auto }
}
.income-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:12px 0 }
.income-stat,.income-compare-card { border:1px solid var(--border); background:var(--panel); border-radius:10px; padding:14px 16px; display:grid; gap:5px }
.income-stat strong { font-size:1.25rem }
.income-compare-card { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); margin:8px 0 }
.income-bill-preview { border:1px solid var(--border); border-radius:10px; padding:12px; margin:12px 0 }
.income-bill-preview img,#income-logo-preview { display:block; max-width:100%; max-height:520px; margin:10px 0; border-radius:8px }
.income-section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:12px }
.income-section-heading h3,.income-section-heading p { margin:0 0 6px }
.income-toolbar-form { align-items:flex-end; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--panel) }
.status-tag { display:inline-block; font-size:10px; padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px }
.status-tag.active { background:rgba(127,191,142,.14); color:var(--green) }
.status-tag.removed { background:rgba(228,87,46,.14); color:var(--accent) }
.status-tag.delay-mild { background:rgba(228,87,46,.10); color:var(--accent) }
.status-tag.delay-warning { background:rgba(228,87,46,.22); color:var(--accent) }
.status-tag.delay-severe { background:rgba(239,111,111,.22); color:var(--red) }
#income-main > section { min-height:280px; padding-top:8px }
#income-groups-list > .row,#income-players-list > .row { display:grid; grid-template-columns:minmax(180px,2fr) minmax(120px,1fr) repeat(3,minmax(110px,auto)) auto; gap:14px }
@media (max-width: 850px) {
  #income-groups-list > .row,#income-players-list > .row { display:flex }
}
.income-picker { padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--panel); margin:10px 0 }
.income-picker > label { display:block; margin-bottom:6px }
.income-picker input[type="text"] { width:100%; margin-bottom:8px }
.picker-results { display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto }
.picker-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2) }
.picker-row.selected { border-color:var(--accent) }
.picker-row button { padding:4px 10px; font-size:.85em }
.picker-selected { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:var(--panel-2); border:1px solid var(--border); font-size:.85em }
.chip button { background:transparent; border:0; padding:0 2px; color:var(--muted); font-size:1.1em; line-height:1 }
.chip button:hover { color:var(--red) }
.picker-actions { display:flex; gap:8px; margin-bottom:8px }
.inline-game-add { display:inline-flex; gap:6px; align-items:center; margin-left:6px }
.inline-game-add input { width:180px }
button.ghost { background:transparent; border:1px solid var(--border); color:var(--text) }
button.ghost:hover { background:var(--panel-2) }
button.small { padding:5px 10px; font-size:.85em }
.onetime-entry { padding-left:24px; border-left:2px solid var(--border) }
#income-bill-previews-actions { margin:10px 0 }
button:disabled { opacity:.5; cursor:not-allowed }
.bill-items-breakdown { margin:10px 0; border:1px solid var(--border); border-radius:8px; overflow:hidden }
.bill-item { padding:6px 10px; margin:0; border-bottom:1px solid var(--border) }
.bill-item:last-child { border-bottom:0 }
.bill-destinations { margin:10px 0 }
.checkbox-line { display:flex; align-items:center; gap:6px; font-size:1em; color:inherit }
button.armed { background:var(--red); color:#fff; border-color:var(--red) }
.chart-toggle { display:inline-flex; gap:4px }
.chart-toggle button { background:transparent; border:1px solid var(--border); color:var(--muted); padding:5px 12px; font-size:.85em }
.chart-toggle button.active { background:var(--panel-2); color:var(--text); border-color:var(--accent) }
.chart-wrap { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px 16px 8px }
.chart-wrap > svg { display:block; width:100%; height:auto }
.chart-bar-value, .chart-axis-label { fill:var(--muted); font-size:11px }
.chart-line-value { fill:var(--text); font-size:12px; font-weight:600 }
.chart-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-size:.85em; color:var(--muted) }
.chart-legend-item { display:flex; align-items:center; gap:6px }
.chart-legend-swatch { width:10px; height:10px; flex-shrink:0 }
.chart-pie-svg { max-width:260px; margin:0 auto }
.chart-up { color:var(--green); fill:var(--green) }
.chart-down { color:var(--red); fill:var(--red) }
.chart-tooltip { position:fixed; z-index:100; pointer-events:none; background:var(--panel-2); border:1px solid var(--border); border-radius:6px; padding:6px 10px; font-size:.85em; box-shadow:0 6px 18px rgba(0,0,0,.4); white-space:nowrap }
[data-tooltip] { cursor:default }