:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090909;
  color: #f5f5f5;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #202020 0, #0b0b0b 42%, #050505 100%); }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(880px, 100%); margin: 0 auto; padding: 20px 14px 50px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:8px 4px 20px; }
.brand { font-weight:900; letter-spacing:.08em; font-size:1.25rem; }
.subtitle { color:#a9a9a9; margin-top:3px; font-size:.9rem; }
.badge { border:1px solid #3b3b3b; border-radius:999px; padding:6px 10px; color:#cfcfcf; font-size:.78rem; white-space:nowrap; }
.card { background:rgba(24,24,24,.92); border:1px solid #303030; border-radius:20px; padding:18px; margin-bottom:14px; box-shadow:0 10px 35px rgba(0,0,0,.22); }
h1,h2,p { margin-top:0; }
h1 { font-size:1.45rem; margin-bottom:16px; }
h2 { font-size:1.25rem; margin-bottom:5px; }
.panel-title { display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }
.panel-title p { color:#aaa; margin:0; }
.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
button { border:0; border-radius:14px; padding:12px 15px; font-weight:800; }
button.big { min-height:68px; font-size:1.05rem; }
.primary { background:#f2f2f2; color:#111; }
.secondary { background:#2a2a2a; color:#f5f5f5; border:1px solid #444; }
.back { width:40px; height:40px; padding:0; background:#292929; color:#fff; flex:0 0 auto; }
.hint { color:#999; font-size:.9rem; margin:12px 0 0; line-height:1.45; }
.warning { color:#ffcc80; font-size:.9rem; margin:14px 0 0; }
.hidden { display:none !important; }
.file-drop { display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:150px; border:2px dashed #505050; border-radius:18px; background:#111; gap:7px; text-align:center; padding:20px; }
.file-drop strong { font-size:1.1rem; }
.file-drop span { color:#aaa; max-width:100%; overflow-wrap:anywhere; }
#fileInput { position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none; }
.status { margin:14px 0; border-radius:12px; padding:11px 13px; background:#101010; color:#c9c9c9; border:1px solid #292929; }
.copy-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
input { width:100%; min-width:0; background:#0d0d0d; color:#f5f5f5; border:1px solid #3b3b3b; border-radius:12px; padding:12px; outline:none; }
input:focus { border-color:#777; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.stats-grid > div { background:#101010; border:1px solid #292929; border-radius:12px; padding:10px; }
.stats-grid span { display:block; color:#888; font-size:.75rem; margin-bottom:4px; }
.stats-grid strong { font-size:.95rem; overflow-wrap:anywhere; }
.player { width:100%; max-height:70vh; background:#000; border-radius:14px; margin-top:12px; }
.full { width:100%; margin-top:12px; }
.diagnostics { padding:13px 18px; }
summary { color:#aaa; cursor:pointer; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; color:#aaa; font-size:.76rem; }
label[for="shareLink"] { display:block; color:#aaa; font-size:.83rem; margin-bottom:7px; }
@media (max-width: 560px) {
  .shell { padding-inline:10px; }
  .mode-grid { grid-template-columns:1fr; }
  .copy-row { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr 1fr; }
  .card { border-radius:16px; padding:14px; }
}