:root { --bg:#003cff; --panel:#f69e4d; --text:#f8fafc; --muted:#cbd5e1; --accent:#22d3ee; }
*{box-sizing:border-box}
body{margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue"; background: radial-gradient(1200px at 20% -10%, #1f2937, var(--bg)); color: var(--text)}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.h1{margin:.25rem 0; font-size:clamp(1.2rem, 2.5vw, 2rem)}
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{background:#ffff00; color:#e2e8f0; border:1px solid #334155; padding:8px 12px; border-radius:8px; cursor:pointer}
.tab.active{background:var(--accent); color:#082f49; border-color:transparent}
.panel{background:var(--panel); border:1px solid #334155; border-radius:16px; padding:16px; margin-top:16px}
.controls{display:flex; gap:8px; flex-wrap:wrap}
button{background:var(--accent); color:#082f49; border:none; padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer}
button.secondary{background:#1f2937; color:#e2e8f0; border:1px solid #334155}
button:disabled{opacity:.6; cursor:not-allowed}
.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.cell{display:grid; place-items:center; background:#0f172a; border:1px solid #334155; border-radius:12px; padding:10px; min-height:150px; position:relative}
.cell img{max-width:100%; height:auto}
.cell .label{position:absolute; bottom:6px; left:8px; right:8px; font-size:.9rem; color:var(--muted); text-align:center}
.cell.marked{outline:3px solid #22c55e}
.image-wrap{display:grid; place-items:center; min-height:260px}
.image-wrap img{max-width:100%; height:auto}
.status{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.95rem; color:var(--muted)}
.toast{opacity:0; transition:opacity .25s}
.toast.show{opacity:1}
.footer{margin-top:12px; color:#94a3b8; font-size:.85rem}