/* Easy Radio: a control-panel look (grey panel, rounded side menu, boxed sections). */
:root { --bg:#e9eaec; --card:#fff; --ink:#1d2430; --sub:#6b7480; --line:#cfd3d8; --head:#eceef0; --navy:#2a5a8c;
        --gold:#e2a21a; --ok:#2e8b3d; --bad:#c0392b; --side:#f3f3f3; --barbg:#d7dade; --barfg:#5b6470; --blue:#2f8fd8; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14181d; --card:#1d232a; --ink:#e6eaef; --sub:#9aa4b1; --line:#323a44; --head:#262d36; --navy:#7fb0e8;
          --gold:#f0b43a; --ok:#5ccf83; --bad:#ff8a80; --side:#1a1f25; --barbg:#323a44; --barfg:#9aa4b1; --blue:#5aaeea; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.45 "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
a { color:var(--navy); }
h1 { font-size:20px; margin:0 0 8px; font-weight:600; } h2 { font-size:16px; margin:0 0 8px; }

/* top bar with the meters */
.top { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:8px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--gold); font-size:20px; font-weight:600; }
.brand small { display:block; font-size:11px; color:var(--sub); font-weight:400; }
.brand .ico { fill:var(--bad); }
.meters { display:flex; gap:18px; margin-left:auto; flex-wrap:wrap; }
.meter { font-size:12px; min-width:170px; }
.meter b { color:var(--ink); }
.bar { display:block; width:100%; height:10px; margin-top:3px; border:1px solid var(--line); border-radius:2px; }
.bar .bg { fill:var(--barbg); } .bar .fg { fill:var(--barfg); } .bar.blue .fg { fill:var(--blue); }
.top nav { display:flex; gap:12px; }
.top nav a, .link { color:var(--navy); text-decoration:none; background:none; border:0; font:inherit; cursor:pointer; padding:0; }

/* the panel: side menu + content */
.panel { display:flex; gap:12px; padding:12px; align-items:flex-start; }
.side { width:230px; flex:0 0 230px; background:var(--side); border:1px solid var(--line); border-radius:18px; padding:10px 8px;
        box-shadow:inset 0 1px 0 #fff3; }
.stpick { width:100%; margin:0 0 8px; }
.grp { display:flex; gap:10px; align-items:flex-start; padding:10px 6px; border-bottom:1px solid var(--line); }
.grp:last-child { border-bottom:0; }
.grp b { display:block; font-size:14px; }
.grp a, .grp .link { font-size:12px; color:var(--sub); text-decoration:none; }
.grp a.on, .grp a:hover { color:var(--navy); text-decoration:underline; }
.ico { flex:0 0 28px; fill:var(--navy); color:var(--navy); }
.ico-stats { fill:var(--bad); } .ico-session { fill:none; } .ico-general { fill:#c0392b; } .ico-info { fill:var(--navy); }
.content { flex:1; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; }
main { max-width:1100px; margin:0 auto; padding:12px; }
.content, .panel main { max-width:none; margin:0; }

/* page header like "Account overview" */
.phead { display:flex; gap:12px; align-items:center; margin:0 0 14px; }
.pico .ico { width:44px; height:44px; flex-basis:44px; }
.phead h1 { margin:0; color:var(--navy); font-weight:400; }
.phead .sub, .ptitle .sub { color:var(--sub); font-size:12px; font-weight:400; }
.pright { margin-left:auto; text-align:right; font-size:12px; color:var(--sub); }
.ptitle { color:var(--navy); font-weight:400; }

/* boxes with grey headers */
.cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.box, .card { background:var(--card); border:1px solid var(--line); border-radius:4px; margin:0 0 12px; box-shadow:0 1px 2px #0001; }
.card { padding:14px; border-radius:8px; }
.bh { background:linear-gradient(var(--card), var(--head)); border-bottom:1px solid var(--line); padding:7px 10px; font-weight:600;
      display:flex; justify-content:space-between; }
.bh.center { justify-content:center; }
.pad { padding:10px; }
.links a, .links span { display:block; padding:2px 0; font-weight:600; text-decoration:none; color:var(--ink); }
.kv { width:100%; border-collapse:collapse; }
.kv td, .kv th { padding:5px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.kv td:last-child { text-align:right; }
.kv th { font-weight:600; }
.files { width:100%; border-collapse:collapse; }
.files td, .files th { padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.files audio { width:100%; max-width:320px; height:32px; margin-top:4px; }

/* statistics */
.period { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; border:1px solid var(--line); border-left:4px solid var(--gold);
          padding:7px 10px; margin:0 0 10px; }
.period a { font-weight:600; text-decoration:none; } .period a.on { color:var(--ink); }
.tabs { display:flex; gap:2px; flex-wrap:wrap; }
.tabs a { padding:6px 12px; border:1px solid var(--line); border-bottom:0; border-radius:4px 4px 0 0; background:var(--head); text-decoration:none; color:var(--ink); }
.tabs a.on { background:var(--card); font-weight:600; }
.tabbody { border:1px solid var(--line); padding:10px; }
.chartbox { max-width:700px; margin:12px auto; }
.chart { width:100%; height:auto; display:block; }
.chart .gl { stroke:var(--line); stroke-width:1; } .chart .ax { fill:var(--sub); font-size:11px; }
.chart .ln { fill:none; stroke:var(--gold); stroke-width:2; } .chart .dt { fill:#fff; stroke:var(--gold); stroke-width:2; }

/* forms and buttons */
label { display:block; margin:6px 0; }
input, select { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:4px; background:var(--card); color:var(--ink); max-width:100%; }
label > input:not([type=checkbox]):not([type=radio]), label > select { display:block; width:100%; margin-top:2px; }
.row label > input, .row label > select, .track label > input { width:auto; display:inline-block; }
.tick { display:flex; gap:8px; align-items:flex-start; }
fieldset { border:1px solid var(--line); border-radius:6px; margin:10px 0; }
.btn { display:inline-block; background:var(--ok); color:#fff; border:0; border-radius:4px; padding:7px 14px; font:inherit; cursor:pointer; text-decoration:none; }
.btn.small { padding:4px 10px; font-size:13px; }
.btn.ghost { background:transparent; color:var(--navy); border:1px solid var(--navy); }
.btn.danger { background:var(--bad); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.between { justify-content:space-between; }
.inline { display:inline; }
.mt { margin-top:8px; } .mb { margin-bottom:8px; }
.big { font-size:20px; font-weight:600; }
.note { color:var(--sub); font-size:12px; }
.linkbox { font-family:ui-monospace, Consolas, monospace; font-size:12px; }
.tag { background:var(--head); border:1px solid var(--line); border-radius:10px; padding:1px 8px; font-size:12px; }
.tight { margin:4px 0; padding-left:20px; }
.msg { padding:8px 12px; border-radius:4px; border:1px solid var(--line); background:var(--card); margin:0 0 10px; }
.msg.ok { border-color:var(--ok); color:var(--ok); } .msg.bad { border-color:var(--bad); color:var(--bad); }
.ok { color:var(--ok); } .bad { color:var(--bad); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; align-items:end; }
.narrow { max-width:440px; margin-left:auto; margin-right:auto; }
.center { text-align:center; } .wide { width:100%; }
.track { border-top:1px solid var(--line); padding:10px 0; }

/* the upload queue */
.uprow { border:1px solid var(--line); border-radius:4px; padding:6px 8px; margin:6px 0; }
.upname { font-weight:600; }
.upbar { height:10px; background:var(--barbg); border-radius:5px; overflow:hidden; margin:4px 0; }
.upfill { height:100%; width:0; background:var(--blue); transition:width .3s; }

footer { text-align:center; padding:16px; font-size:12px; } footer a { color:var(--sub); }

@media (max-width:860px) {
  .panel { flex-direction:column; }
  .side { width:100%; flex-basis:auto; border-radius:12px; display:grid; grid-template-columns:1fr 1fr; gap:0 8px; }
  .stpick { grid-column:1 / -1; }
  .cols, .grid2 { grid-template-columns:1fr; }
  .meters { margin-left:0; width:100%; }
  .meter { flex:1 1 140px; min-width:0; }
  .pright { display:none; }
}

.trace { white-space:pre-wrap; font-size:11px; background:var(--head); padding:8px; border-radius:4px; overflow:auto; max-height:320px; }
.qr svg { display:block; margin:8px 0; background:#fff; padding:4px; border-radius:4px; }