/* Orb Blaster — Dark theme UI */
:root {
  color-scheme: dark;
  --bg: #0a0f1a;
  --bg-elev: #0f1524;
  --text: #e6ebff;
  --muted: #a0aac7;
  --accent: #2d5bff;
  --accent-2: #a763ff;
  --success: #44d7b6;
  --danger: #ff4d5a;
  --card: #11182a;
  --border: #1b2540;
  --focus: #66a3ff;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }

.app-header { display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--border); background:linear-gradient(180deg, #0d1323, #0a0f1a); position: sticky; top:0; z-index:10; }
.logo { width:40px; height:40px; }
.title-group { display:flex; flex-direction:column; }
.app-title { margin:0; font-size: 1.2rem; letter-spacing: .4px; }
.subtitle { margin:0; color: var(--muted); font-size:.9rem; }
.header-actions { margin-left:auto; display:flex; gap:8px; }
.header-actions .ghost { color: var(--muted); text-decoration:none; padding:6px 10px; border-radius:8px; border:1px solid transparent; }
.header-actions .ghost:hover { border-color: var(--border); }

.container { display:grid; grid-template-columns: 360px 1fr; gap:20px; padding:20px; max-width: 1200px; margin: 0 auto; }
.controls { background: var(--bg-elev); border:1px solid var(--border); border-radius: 12px; padding:16px; }
.section-title { margin-top:0; font-size: 1rem; color: var(--muted); }
.form-row { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.form-row.inline { flex-direction:row; align-items:center; gap:10px; }
label { font-size:.9rem; color: var(--muted); }
input[type="text"], input[type="url"], select, input[type="file"] {
  background: var(--card); color: var(--text); border:1px solid var(--border); padding:10px 12px; border-radius:10px; outline:none;
}
input:focus, select:focus { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in oklab, var(--focus) 30%, transparent); }
.help { color: var(--muted); font-size:.85rem; margin-top:10px; }

.buttons { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
button, .primary, .secondary, .danger, .ghost { cursor:pointer; user-select:none; }
button, .primary, .secondary, .danger { border:none; background: var(--border); color: var(--text); padding:10px 14px; border-radius: 10px; }
.primary { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 75%, #123) , var(--accent)); }
.primary:hover { filter: brightness(1.05); }
.secondary { background: #1b2540; }
.secondary:hover { filter: brightness(1.05); }
.danger { background: var(--danger); }
.danger:hover { filter: brightness(1.05); }
.icon { background: #1b2540; color: var(--text); border:1px solid var(--border); border-radius: 8px; padding:4px 8px; font-size:.8rem; }
.icon:disabled { opacity:.6; }

.status-cards { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; margin-top:12px; }
.card { background: var(--card); border:1px solid var(--border); border-radius: 12px; padding:10px 12px; }
.card .k { color: var(--muted); font-size:.8rem; }
.card .v { font-size:1.2rem; margin-top:4px; }
.card .id-text { display:flex; align-items:center; gap:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

.export-row { display:flex; gap:8px; margin-top:10px; }

.playfield { position:relative; background: radial-gradient(800px 400px at 50% 100%, #0f1830, transparent), var(--bg-elev); border:1px solid var(--border); border-radius: 12px; padding:10px; display:flex; align-items:center; justify-content:center; }
canvas { max-width: 100%; height: auto; border-radius: 10px; background: #0b1020; box-shadow: inset 0 0 0 1px #171f35; }
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#fff; opacity:0; transition: opacity .2s ease; pointer-events:none; text-shadow: 0 2px 18px rgba(45,91,255,.5); }
.overlay.show { opacity:1; }

.lists { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.panel { background: var(--bg-elev); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.panel-header { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); }
.panel-header h3 { margin:0; font-size:1rem; }
.tabs { display:flex; gap:6px; }
.tab { background:#1b2540; color:var(--text); border:1px solid var(--border); border-radius:999px; padding:6px 10px; cursor:pointer; }
.tab.active { background: var(--accent); border-color: transparent; }
.list { list-style: none; margin:0; padding:0; }
.list li { padding:10px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.list li:last-child { border-bottom:none; }
.rank { width: 20px; color: var(--muted); }
.muted { color: var(--muted); }

.footer { padding:20px; color: var(--muted); text-align:center; border-top:1px solid var(--border); }

.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap; }
.noscript { margin:20px; padding:10px 12px; border-radius: 10px; background:#231; color:#fff; }

@media (max-width: 1024px) {
  .container { grid-template-columns: 1fr; }
  .status-cards { grid-template-columns: repeat(2, 1fr); }
  .lists { grid-template-columns: 1fr; }
}