@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500,600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{
  --bg:#10161a; --surface:#182028; --surface-raised:#202a34; --border:#2e3a44;
  --text:#edefef; --text-muted:#9ba8af; --accent-amber:#e8a33d; --accent-cyan:#57c4c0;
  --danger:#e2645a; --radius:6px;
  --font-display:'Fraunces',Georgia,serif; --font-body:'IBM Plex Sans',-apple-system,sans-serif; --font-mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.55;}
.wrap{max-width:1500px; margin:0 auto; padding:24px 32px 64px;}
h1{font-family:var(--font-display); font-weight:600; font-size:1.9rem;}
h2{font-family:var(--font-display); font-weight:500; font-size:1.2rem;}
p{color:var(--text-muted); max-width:68ch;}
.badge{display:inline-block; background:var(--accent-amber); color:var(--bg); font-family:var(--font-mono); font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:4px; margin-bottom:14px;}
.tool-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; margin:24px 0;}
.controls-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:14px 0;}
label{font-size:.88rem; color:var(--text-muted); display:block; margin-bottom:4px;}
input[type="number"], input[type="text"], select{font-family:var(--font-body); background:var(--surface-raised); border:1px solid var(--border); color:var(--text); border-radius:var(--radius); padding:8px 10px; font-size:.92rem;}
.btn{font-family:var(--font-body); font-size:.92rem; font-weight:500; color:var(--bg); background:var(--accent-cyan); border:none; border-radius:var(--radius); padding:10px 18px; cursor:pointer;}
.btn:hover{background:#7fd6d2;}
.btn:disabled{background:var(--border); color:var(--text-muted); cursor:not-allowed;}
.text-muted{color:var(--text-muted);}
.mono{font-family:var(--font-mono);}
.status-line{font-family:var(--font-mono); font-size:.82rem; color:var(--text-muted); min-height:1.4em;}
.status-line[data-state="ok"]{color:var(--accent-cyan);}
.status-line[data-state="error"]{color:var(--danger);}
.progress-bar-wrap{display:none; height:8px; background:var(--surface-raised); border-radius:999px; overflow:hidden; margin:14px 0;}
.progress-bar-fill{height:100%; background:var(--accent-cyan); width:0%;}

.score-sheet{background:#fff; width:100%; max-width:1400px; margin:20px auto; padding:32px 24px; box-shadow:0 2px 16px rgba(0,0,0,.25); border-radius:3px; overflow-x:auto;}
.score-sheet svg{display:block; margin:0 auto;}
.score-title-preview{text-align:center; margin-bottom:10px; min-height:1.6em; color:#222;}
.score-title-preview .title-line{font-family:var(--font-display); font-size:1.3rem;}
.score-title-preview .authors-line{font-size:.8rem; color:#555; margin-top:4px;}
.score-toolbar{align-items:center; background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius); flex-wrap:wrap; gap:10px; margin-top:16px; padding:10px 14px; position:sticky; bottom:12px; box-shadow:0 4px 18px rgba(0,0,0,.35);}
.score-toolbar button, .score-toolbar select{background:none; border:1px solid var(--border); border-radius:6px; color:var(--text); cursor:pointer; font-size:.82rem; padding:5px 10px;}
.score-toolbar button:hover{background:var(--surface);}
.score-toolbar button:disabled, .score-toolbar select:disabled{opacity:.4; cursor:default;}
.score-toolbar .danger-btn{color:var(--danger); border-color:var(--danger);}

#score-mobile-block{display:none; text-align:center; padding:60px 20px;}
#score-mobile-block .icon{font-size:2.4rem; margin-bottom:10px;}