:root { --bg:#09090b; --panel:#18181b; --line:#27272a; --fg:#fafafa;
        --dim:#a1a1aa; --accent:#60a5fa; --warn:#f59e0b; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.55 ui-sans-serif,
       system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
header.bar { position:sticky; top:0; z-index:40; display:flex; align-items:center;
         gap:20px; padding:10px 24px; border-bottom:1px solid var(--line);
         background:color-mix(in srgb, var(--bg) 88%, transparent);
         backdrop-filter:blur(8px); flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:8px; color:var(--fg); font-weight:600; }
.brand:hover { text-decoration:none; }
.brand .logo { flex:none; }
h1 { font-size:17px; margin:0; } h2 { font-size:15px; margin:24px 0 8px; }
main { padding:20px 24px 60px; max-width:1200px; margin:0 auto; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line);
        vertical-align:top; }
th { color:var(--dim); font-size:12px; text-transform:uppercase; font-weight:500; }
td.num { text-align:right; font-variant-numeric:tabular-nums; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
.dim { color:var(--dim); }
.tag { background:var(--panel); border:1px solid var(--line);
       padding:1px 6px; font-size:12px; color:var(--dim); }
input,select,textarea,button { background:var(--panel); color:var(--fg);
       border:1px solid var(--line); padding:8px 10px; font:inherit; }
button { cursor:pointer; } button:hover { border-color:var(--accent); }
button.primary { background:var(--fg); color:var(--bg); border-color:var(--fg);
       font-weight:600; }
textarea { width:100%; min-height:90px; font-family:ui-monospace,monospace; font-size:13px; }
.toasts { position:fixed; right:16px; bottom:16px; z-index:50;
          display:flex; flex-direction:column; gap:8px; max-width:min(460px, 90vw); }
.msg { padding:11px 14px; box-shadow:0 6px 24px rgba(0,0,0,.35);
       display:flex; gap:10px; align-items:flex-start; font-size:13px;
       animation:toast-in .18s ease-out; }
.msg.ok { background:#14243d; border:1px solid var(--accent); }
.msg.err { background:#2b1616; border:1px solid #ef4444; }
.msg button { background:none; border:none; color:var(--dim); padding:0 2px;
              font-size:15px; line-height:1; cursor:pointer; }
.msg button:hover { color:var(--fg); }
.msg.going { opacity:0; transform:translateY(6px); transition:all .3s ease; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .msg { animation:none; } .msg.going { transition:none; }
}
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
label { display:block; font-size:12px; color:var(--dim); margin-bottom:4px; }
.box { background:var(--panel); border:1px solid var(--line);        padding:16px; margin-bottom:20px; }
.scroll { max-height:280px; overflow-y:auto; border:1px solid var(--line);
          }

nav.top { display:flex; gap:2px; align-items:center; flex-wrap:wrap; flex:1; }
nav.top a { color:var(--dim); padding:6px 10px; border-radius:6px; }
nav.top a:hover { color:var(--fg); background:var(--panel); text-decoration:none; }
nav.top a.on { color:var(--fg); background:var(--panel); }
nav.top .sep { width:1px; height:18px; background:var(--line); margin:0 6px; }
.me { display:flex; gap:10px; align-items:center; font-size:13px; }
.me form { margin:0; }
.pill { font-size:11px; padding:1px 8px; border-radius:99px; border:1px solid var(--line);
        color:var(--dim); text-transform:uppercase; letter-spacing:.04em; }
.pill.admin { color:var(--warn); border-color:color-mix(in srgb, var(--warn) 50%, transparent); }
.pill.contributor { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
a.button { display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
           border:1px solid var(--line); background:var(--panel); color:var(--fg); }
a.button:hover { border-color:var(--accent); text-decoration:none; }
a.button.small { padding:3px 10px; font-size:13px; }
a.button.discord { background:#5865f2; border-color:#5865f2; color:#fff; font-weight:600;
                   justify-content:center; width:100%; padding:11px 14px; border-radius:8px; }
a.button.discord:hover { background:#4752c4; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.stats .box { margin:0; display:flex; flex-direction:column; gap:2px; border-radius:10px; }
.stats b { font-size:22px; font-variant-numeric:tabular-nums; }
.stats span { color:var(--dim); font-size:12px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.card { margin:0; display:flex; flex-direction:column; gap:6px; border-radius:10px; }
tr.off td { opacity:.55; }
.perms { display:inline-flex; flex-wrap:wrap; gap:4px 10px; align-items:center; }
.perms .check { gap:4px; color:var(--dim); }
.perms input:disabled + * , .perms .check input:disabled { opacity:.5; }
table.sources input { width:100%; padding:5px 7px; font-size:13px; }
table.sources td { padding:4px 6px; }
@media (max-width: 1100px) {
  header.bar { gap:8px 16px; padding:10px 16px; }
  .me { margin-left:auto; }
  nav.top { order:3; flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto; }
  nav.top a { white-space:nowrap; }
  main { padding:16px 16px 48px; }
  table { display:block; overflow-x:auto; }
}
.linkbtn { background:none; border:none; color:var(--accent); padding:0; font:inherit; cursor:pointer; }
.linkbtn:hover { text-decoration:underline; }
.secret { font-family:ui-monospace,monospace; font-size:18px; padding:12px 16px;
          background:var(--panel); border:1px solid var(--accent); user-select:all; }
.login { max-width:380px; margin:12vh auto; border-radius:12px; padding:28px; }
.login input { width:100%; margin-bottom:12px; }
.row-actions { display:flex; gap:8px; }
.row-actions form { margin:0; }
.small { font-size:12px; } .mb0 { margin-bottom:0; } .mt0 { margin-top:0; } .full { width:100%; }

/* Manifest review, the browse pages and the inline edit rows. */
.box.accent { border-color:var(--accent); }
.inline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 8px; }
.inline input[type=search], .inline input[type=text] { min-width:240px; }
form.inline { display:inline-flex; margin-right:8px; }
.pager { display:flex; gap:16px; align-items:center; margin:12px 0; }
.check { display:flex; gap:8px; align-items:flex-start; color:var(--fg); font-size:inherit; }
.check input { margin-top:3px; }
table.mapping select { width:100%; }
tr.editrow td { padding-top:0; border-bottom:1px solid var(--line); }
tr.editrow input { font-size:12px; padding:4px 6px; }

/* Tuning forms: many small labelled inputs that should wrap, not stack. */
details > summary { cursor:pointer; color:var(--accent); padding:4px 0; }
form.tune { display:flex; flex-wrap:wrap; gap:10px; align-items:center;
            padding:10px 0; border-top:1px solid var(--line); }
form.tune b { min-width:130px; }
form.tune label { display:inline-flex; gap:5px; align-items:center; margin:0;
                  font-size:12px; color:var(--dim); }
form.tune label.full { flex:1 1 100%; }
form.tune input[type=text], form.tune input:not([type]) { padding:4px 6px; font-size:12px; }
form.tune select { padding:4px 6px; font-size:12px; }

/* Live job progress. */
[data-jobs] { margin-bottom:20px; }
.job { border:1px solid var(--line); background:var(--panel);
       padding:10px 14px; margin-bottom:8px; }
.job-head { display:flex; justify-content:space-between; gap:12px;
            font-size:13px; margin-bottom:6px; }
.job .bar { height:4px; background:var(--line); overflow:hidden; }
.job .bar i { display:block; height:100%; background:var(--accent);
              transition:width .4s ease; }
.job.failed .bar i { background:#ef4444; }
.job.failed { border-color:#ef4444; }

/* Waveforms in the portal, drawn on demand. */
[data-wave] { margin-top:8px; }
[data-wave] > div { margin-top:8px; }
[data-wave-note]:not(:empty)::before { content:" · "; }

/* Transport under a portal waveform. Deliberately the same shapes and
   spacing as the workbench on the public site, so the two players are the
   same instrument in two places. */
.wctl { display:flex; flex-wrap:wrap; gap:16px; align-items:center;
        padding:10px 0 2px; }
.wgroup { display:flex; gap:4px; align-items:center; }
.wbtn { display:inline-flex; align-items:center; justify-content:center;
        width:36px; height:36px; padding:0; background:transparent;
        border:1px solid var(--line); border-radius:6px; color:var(--fg); }
.wbtn:hover { border-color:var(--accent); }
.wbtn.wide { width:auto; padding:0 9px; height:36px; font-size:13px;
             font-variant-numeric:tabular-nums; border-radius:6px; }
.wbtn.on { border-color:var(--accent); color:var(--accent);
           background:color-mix(in srgb, var(--accent) 10%, transparent); }
.wplay { display:inline-flex; align-items:center; justify-content:center;
         width:44px; height:44px; padding:0; border:none; border-radius:50%;
         background:var(--accent); color:#fff; }
.wplay:hover { opacity:.9; }
.wtime { font-family:ui-monospace,monospace; font-size:13px; color:var(--dim);
         font-variant-numeric:tabular-nums; }
.wvol { width:90px; accent-color:var(--accent); }
.wzoom { width:110px; accent-color:var(--accent); }

/* A stage with no measurable progress: a moving bar, not a stalled zero. */
.job .bar.unknown { position:relative; }
.job .bar.unknown i {
  width:35% !important;
  animation:bar-sweep 1.4s ease-in-out infinite;
}
@keyframes bar-sweep {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(285%); }
}
@media (prefers-reduced-motion: reduce) {
  .job .bar.unknown i { animation:none; width:100% !important; opacity:.5; }
}

/* The section editor: a table to read, a waveform to edit it on. Wider than
   the page column, because placing a section is fine work on a long song. */
#sections { --editor:min(1800px, calc(100vw - 48px));
            width:var(--editor); margin-left:calc(50% - var(--editor) / 2); }
[data-sections-wave] > div { margin-top:8px; }
.section-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center;
                 padding:10px 0; margin-top:8px; border-top:1px solid var(--line); }
.section-tools button:disabled { opacity:.4; cursor:default; border-color:var(--line); }
.section-tools .keys { flex:1 1 100%; }
table.sections input { padding:4px 6px; font-size:13px; }
table.sections tr.picked td { background:color-mix(in srgb, var(--warn) 10%, transparent); }