/* Score Reader. Copyright (C) 2026 Jonathan Lehman. SPDX-License-Identifier: AGPL-3.0-or-later */
:root{
  --bg:#0a0b0d; --panel:#14161a; --panel-2:#1a1d22; --border:#24282e; --border-2:#2f353e;
  --text:#e8ecf1; --muted:#8b919b; --accent:#1de9b6; --amber:#ffb020;
  --sans:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --mono:ui-monospace, SFMono-Regular, Menlo, monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; line-height:1.5}
body.dragging .drop{outline:2px dashed var(--accent); outline-offset:-6px}
a{color:var(--accent)}
.app{max-width:760px; margin:0 auto; padding:24px 16px 48px; display:flex; flex-direction:column; gap:14px}
h1{margin:0; font-size:28px; letter-spacing:-.01em}
h2{margin:0; font-size:19px}
.lead{margin:6px 0 0; color:var(--muted)}
.panel{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:12px}
.panel p{margin:0}
.drop{align-items:flex-start}
.big{font-size:18px; font-weight:600}
.tips{margin:0; padding-left:20px; color:var(--muted); font-size:14px}
.tips li + li{margin-top:4px}
.muted{color:var(--muted)} .small{font-size:13px} .mono{font-family:var(--mono); font-size:13px}
.row{display:flex; align-items:center; gap:10px}
.spacer{flex:1}
.actions{display:flex; flex-wrap:wrap; gap:10px}
button,.button{display:inline-flex; align-items:center; justify-content:center; background:var(--panel-2); border:1px solid var(--border-2); border-radius:8px; padding:8px 16px; min-height:42px; font:inherit; font-size:15px; color:inherit; cursor:pointer; text-decoration:none}
.button.primary{background:var(--accent); border-color:var(--accent); color:#04130e; font-weight:700}
.button input{display:none}
.bar{height:10px; background:var(--panel-2); border:1px solid var(--border-2); border-radius:999px; overflow:hidden}
#bar-fill{height:100%; width:0; background:var(--accent); transition:width .5s linear}
#status{font-size:16px}
.log summary{cursor:pointer; color:var(--muted); font-size:13px}
.log pre{margin:8px 0 0; max-height:240px; overflow:auto; font-family:var(--mono); font-size:11px; color:var(--muted); white-space:pre-wrap}
.next{display:flex; flex-direction:column; gap:6px}
footer p{margin:4px 0}
/* CheerpJ needs a display; nothing is drawn on it */
#display{position:fixed; left:-10000px; top:0; width:320px; height:200px}