:root {
  color-scheme: dark;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --bg: #0b0d12;
  --card: #151923;
  --line: #2a3040;
  --text: #f5f7fb;
  --muted: #aab2c4;
  --accent: #83e6c2;
  --danger: #ff9a9a;
  --ink: var(--text);
  --surface: var(--card);
  --inner: #0e1118;
  --raised: #10141d;
  --accent-soft: color-mix(in srgb, var(--accent) 13%, var(--inner));
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 20% 0, #172236 0, var(--bg) 45%); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 .35rem; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .15em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .35rem; font-size: clamp(1.55rem, 3vw, 2.15rem); letter-spacing: -.04em; }
h2 { margin-bottom: 1rem; font-size: 1.05rem; }
h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; background: radial-gradient(circle at 20% 0, #172236 0, var(--bg) 45%); }
.login-card { width: min(420px, 100%); padding: 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 22px 60px #0008; }
.login-card label { display: block; margin: 1.5rem 0 .5rem; font-weight: 700; }
.login-card input { width: 100%; padding: .8rem .9rem; color: var(--text); background: var(--inner); border: 1px solid var(--line); border-radius: 10px; }
.login-card button { width: 100%; margin-top: 1rem; padding: .82rem; color: #07110e; background: var(--accent); border: 0; border-radius: 10px; font-weight: 750; }
.status { min-height: 1.3rem; color: var(--muted); }
.status.error { color: var(--danger); }

.dashboard { max-width: 1540px; margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 3rem) 4rem; }
.topbar, .filters, .panel-title, .dialog-head, .pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar { margin-bottom: 1.2rem; }
button, select { border: 1px solid var(--line); border-radius: 9px; background: var(--raised); color: var(--ink); }
button { padding: .58rem .78rem; }
button:hover { border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .45; }
.secondary { background: #222a37; }
.icon-button { min-width: 2.35rem; font-size: 1.05rem; }

.filters { position: sticky; top: .6rem; z-index: 2; flex-wrap: wrap; padding: .75rem; margin-bottom: 1.25rem; background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px #0005; backdrop-filter: blur(12px); }
.period-tabs { display: flex; gap: .25rem; }
.period-tabs button { border-color: transparent; background: transparent; }
.period-tabs button.active { color: #07110e; background: var(--accent); }
.period-nav { display: flex; align-items: center; gap: .7rem; }
.period-nav strong { min-width: 9rem; text-align: center; }
.account-filter { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .85rem; font-weight: 700; }
.account-filter select { min-width: 9rem; padding: .55rem .7rem; }

.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; margin-bottom: .8rem; }
.kpi-card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; }
.kpi-card { padding: 1rem 1.05rem; }
.kpi-card span { display: block; margin-bottom: .45rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.kpi-card strong { font-size: clamp(1.35rem, 2.5vw, 2rem); letter-spacing: -.04em; }
.panel { padding: 1.1rem; margin-bottom: .8rem; overflow: hidden; }
.two-column { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, .8fr); gap: .8rem; }
#trend-chart { display: block; width: 100%; min-height: 250px; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: url(#area-gradient); opacity: .9; }
.chart-gradient-stop { stop-color: var(--accent); }
.chart-dot { fill: var(--inner); stroke: var(--accent); stroke-width: 2; }
.chart-label { fill: var(--muted); font-size: 11px; }

.funnel { display: grid; gap: .55rem; }
.funnel-row { display: grid; grid-template-columns: 6.5rem 1fr 2.2rem; align-items: center; gap: .65rem; font-size: .8rem; }
.bar-track { height: .55rem; overflow: hidden; background: var(--inner); border: 1px solid var(--line); border-radius: 999px; }
.bar-track span { display: block; height: 100%; min-width: 2px; background: var(--accent); border-radius: inherit; }

.distribution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.distribution-row { display: grid; grid-template-columns: minmax(5rem, 1fr) 3fr auto; align-items: center; gap: .55rem; margin: .6rem 0; font-size: .82rem; }
.distribution-row .bar-track span { background: color-mix(in srgb, var(--accent) 78%, var(--card)); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .79rem; }
th { color: var(--muted); font-size: .69rem; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
th, td { padding: .72rem .55rem; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
td.song-cell { max-width: 240px; white-space: normal; }
td a { color: var(--accent); text-decoration: none; }
.badge { display: inline-block; padding: .18rem .42rem; color: var(--muted); background: var(--raised); border: 1px solid var(--line); border-radius: 999px; font-size: .7rem; }
.badge.ready, .badge.completed { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.badge.failed, .badge.interrupted { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--inner)); border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
.pagination { justify-content: flex-end; padding-top: .9rem; }

dialog { width: min(1060px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 80px #000a; }
dialog::backdrop { background: #000a; backdrop-filter: blur(3px); }
.dialog-head { position: sticky; top: 0; z-index: 1; padding: 1rem 1.25rem; background: var(--card); border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 0; }
#detail-content { padding: 1.25rem; }
.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.detail-card { padding: .8rem; background: var(--inner); border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; }
.detail-card span { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .69rem; text-transform: uppercase; }
.detail-card strong { font-size: .85rem; }
.timeline-visual { position: relative; height: 52px; margin: 1rem 0; background: var(--inner); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.timeline-beat { position: absolute; top: 21px; width: 2px; height: 10px; background: color-mix(in srgb, var(--accent) 65%, var(--line)); }
.timeline-bar { position: absolute; top: 10px; width: 2px; height: 32px; background: var(--accent); }
.event-list { position: relative; margin: 0; padding: 0; list-style: none; }
.event-list li { display: grid; grid-template-columns: 10.5rem 1fr auto; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .8rem; }
.event-list code { white-space: normal; overflow-wrap: anywhere; color: var(--muted); }

@media (max-width: 1050px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .two-column { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .dashboard { padding-inline: .7rem; }
  .topbar { align-items: flex-start; }
  .filters { position: static; align-items: stretch; }
  .period-tabs { width: 100%; }
  .period-tabs button { flex: 1; }
  .period-nav { order: 3; width: 100%; justify-content: center; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .distribution-grid, .detail-grid { grid-template-columns: 1fr; }
  .event-list li { grid-template-columns: 1fr; gap: .2rem; }
}