/* studio.audio dashboard mockups. Tokens from frontend/src/styles.css (staging) */
:root{
  --ink:#0b0a09;--panel:#161412;--surface:#1c1915;--border:#2c2822;
  --ivory:#f3eee4;--taupe:#9a9082;--brass:#c9a36a;--brass-deep:#a8844f;
  --signal:#6bb3a5;--danger:#d4786e;--lift:rgba(201,163,106,.08);--lift-strong:rgba(201,163,106,.14);
  --radius:6px;
  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.55;color:var(--ivory);
  background:radial-gradient(900px 480px at 18% -8%,rgba(201,163,106,.09),transparent 60%),var(--ink);
  -webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3{font-family:var(--font-display);font-weight:550;letter-spacing:-.02em;line-height:1.15;margin:0;color:var(--ivory)}
p{margin:0}
a{color:var(--brass);text-decoration:none}
.mono{font-family:var(--font-mono)}
.muted{color:var(--taupe)}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);font-weight:500}
.num{font-variant-numeric:tabular-nums}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid rgba(44,40,34,.85)}
.topbar img{height:44px;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:var(--taupe);font-size:14px;font-weight:500}
.nav a.active{color:var(--ivory)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--surface);border:1px solid var(--border);
  display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--ivory);letter-spacing:.04em}

/* surfaces */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.card h2{font-size:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--radius);
  font:500 14px/1 var(--font-body);border:1px solid var(--border);background:transparent;color:var(--ivory);white-space:nowrap}
.btn svg{width:15px;height:15px}
.btn-primary{background:var(--brass);border-color:var(--brass);color:var(--ink);font-weight:600}
.btn-lg{height:48px;padding:0 22px;font-size:15px}
.btn-sm{height:32px;padding:0 11px;font-size:12.5px;gap:6px}
.btn-sm svg{width:13px;height:13px}
.led{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px rgba(107,179,165,.14),0 0 10px rgba(107,179,165,.6);display:inline-block}

/* A/B toggle */
.ab{display:inline-grid;grid-template-columns:1fr 1fr;background:var(--ink);border:1px solid var(--border);border-radius:var(--radius);padding:3px;gap:3px}
.ab span{font-size:12.5px;font-weight:500;color:var(--taupe);padding:5px 12px;border-radius:4px;text-align:center;white-space:nowrap}
.ab span.on{color:var(--ivory);background:#1f1c18;box-shadow:inset 0 0 0 1px var(--signal)}
.ab span.on.orig{box-shadow:inset 0 0 0 1px var(--brass)}

/* play button */
.play{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);background:var(--surface);color:var(--ivory)}
.play svg{width:12px;height:12px;margin-left:2px}
.play.pause svg{margin-left:0}
.play.hot{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.wave{display:block;width:100%;height:100%}

/* humanizer badge */
.hz{display:inline-flex;align-items:center;gap:10px;padding:5px 12px 5px 6px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);white-space:nowrap}
.hz .ring{width:30px;height:30px;position:relative;flex:0 0 auto}
.hz .ring svg{width:30px;height:30px;transform:rotate(-90deg)}
.hz .ring b{position:absolute;inset:0;display:grid;place-items:center;font:600 11px/1 var(--font-body);font-variant-numeric:tabular-nums}
.hz .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe);line-height:1.2}
.hz .lbl em{display:block;font-style:normal;text-transform:none;letter-spacing:0;color:var(--ivory);font-size:13px;font-weight:500}

.bar{height:6px;border-radius:3px;background:var(--surface);border:1px solid var(--border);overflow:hidden}
.bar i{display:block;height:100%;background:var(--brass);border-radius:3px}

.footer{display:flex;justify-content:space-between;align-items:center;color:var(--taupe);font-size:13px;padding:28px 0 40px;border-top:1px solid rgba(44,40,34,.85)}
.footer nav{display:flex;gap:22px}
.footer nav a{color:var(--taupe)}