:root{
  --bg:#08090c;
  --panel:#101216;
  --panel-2:#151922;
  --panel-3:#1b202a;
  --line:#2a303a;
  --line-soft:#20252d;
  --text:#f2f4f7;
  --muted:#a7adb7;
  --muted-2:#747c88;
  --accent:#7ea7df;
  --accent-strong:#2f6fd6;
  --ok:#3aa574;
  --danger:#c85f65;
  --logo-bg:#f3f5f8;
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --shadow:0 18px 55px rgba(0,0,0,.34);
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"SFMono-Regular",Menlo,Consolas,ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--font);letter-spacing:-.012em}
button,input,textarea,select{font:inherit}
button{border:1px solid #365a8c;border-radius:var(--radius-sm);padding:10px 14px;font-weight:650;color:#fff;background:#244f86;cursor:pointer;box-shadow:none;transition:background .14s ease,border-color .14s ease,transform .14s ease}
button:hover{background:#2b5f9d;border-color:#4a75aa}
button:active{transform:translateY(1px)}
button:disabled{opacity:.55;cursor:not-allowed}
button.secondary{background:#171b22;color:var(--text);border-color:var(--line)}
button.secondary:hover{background:#202631;border-color:#3a4350}
button.ghost{background:transparent;color:var(--accent);border-color:#354156}
button.ghost:hover{background:#121722;border-color:#4b5d79}
button.danger{background:#6e3035;border-color:#8e4249}
button.ok{background:#246948;border-color:#347d5a}
input,textarea,select{width:100%;background:#0b0d11;color:var(--text);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 12px;outline:none}
input:focus,textarea:focus,select:focus{border-color:#5579a7;box-shadow:0 0 0 3px rgba(126,167,223,.14)}
textarea{min-height:320px;font-family:var(--mono);line-height:1.5}
.app{max-width:1220px;margin:auto;padding:24px}
.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:14px 0 18px;background:rgba(8,9,12,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(42,48,58,.75)}
.brand{display:flex;align-items:center;gap:14px;cursor:pointer}
.brandLogoBox{height:58px;width:226px;display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:14px;background:var(--logo-bg);border:1px solid #dbe2ea;box-shadow:0 12px 35px rgba(0,0,0,.26)}
.brandLogoBox img{max-height:40px;max-width:100%;width:auto;display:block}
.brandText{font-size:12px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hero{border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:30px;background:#101216;box-shadow:var(--shadow)}
.hero h1{font-size:clamp(32px,5vw,58px);line-height:1.03;margin:0 0 14px;font-weight:760;letter-spacing:-.055em;max-width:850px}
.hero p{max-width:680px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);padding:18px;box-shadow:none}
.card h2,.card h3{margin-top:0;letter-spacing:-.025em}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stack{display:grid;gap:12px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.fieldgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.list{display:grid;gap:8px}
.item{padding:14px;border-radius:12px;background:#11151b;border:1px solid var(--line-soft);cursor:pointer;transition:background .14s ease,border-color .14s ease}
.item:hover{border-color:#3d4654;background:#151a22}
.muted{color:var(--muted)}
.tiny{font-size:12px;color:var(--muted-2)}
.pill{background:#111722;border:1px solid #303c50;border-radius:999px;padding:5px 10px;color:#c6d9f6;font-size:13px}
.stat{font-size:44px;font-weight:760;letter-spacing:-.05em;margin:4px 0;color:#fff}
.viewer{font-family:var(--mono);white-space:pre-wrap;line-height:1.58;font-size:20px;color:#f8fafc}
.viewer .section{display:block;color:var(--accent);font-weight:800;margin-top:1.2em}
.viewer .chord{color:#a9caff;font-weight:800}
.drop{border:1px dashed #435064;border-radius:14px;padding:24px;text-align:center;background:#0d1118}
.toast{position:fixed;right:20px;bottom:20px;z-index:99;background:#12171f;border:1px solid #313946;border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.loginPage{min-height:100vh;background:#08090c;color:var(--text);display:grid;place-items:center;padding:24px}
.loginShell{width:min(430px,94vw)}
.loginCard{background:#101216;border:1px solid #242a34;border-radius:22px;padding:28px;box-shadow:var(--shadow);display:grid;gap:22px;text-align:center}
.loginLogoBox{width:min(310px,100%);margin:0 auto;padding:18px 22px;border-radius:18px;background:var(--logo-bg);border:1px solid #dbe2ea;box-shadow:0 12px 34px rgba(0,0,0,.28)}
.loginLogoBox img{display:block;width:100%;height:auto}
.loginCopy h1{font-size:24px;margin:0 0 6px;letter-spacing:-.04em}
.loginCopy p{margin:0;color:var(--muted)}
.loginForm{display:grid;gap:10px;text-align:left}
.loginForm label{font-size:13px;color:var(--muted);font-weight:650}
.loginForm button{margin-top:4px;width:100%;padding:12px 14px}
.loginError{min-height:20px;margin:0;color:#ff9ba0;text-align:center;font-size:14px}
.perform{height:100vh;max-width:none;padding:0;display:grid;grid-template-rows:auto 1fr auto;background:#06070a}
.performHead,.performFoot{background:#0d0f13;border-color:var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 18px}
.performHead{border-bottom:1px solid var(--line)}
.performFoot{border-top:1px solid var(--line)}
.stage{overflow:auto;padding:32px 8vw;scroll-behavior:smooth;background:#08090c}
.stage .viewer{font-size:clamp(25px,3.2vw,42px);line-height:1.64}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hidden{display:none!important}
@media(max-width:850px){.app{padding:14px}.top{display:grid}.nav{justify-content:stretch}.nav button{flex:1}.split{grid-template-columns:1fr}.brandLogoBox{width:190px;height:52px}.brandText{display:none}.hero{padding:22px}.performFoot button{font-size:18px;padding:14px 18px}.stage{padding:22px}.viewer{font-size:18px}}