*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji";color:#0f172a;background:#0b1220}:root{--bg: #0b1220;--card: #0e1526;--muted: #94a3b8;--border: #1f2a44;--primary: #60a5fa;--success: #22c55e;--warning: #f59e0b;--destructive: #ef4444;--accent: #f472b6;--foreground: #e2e8f0}body{color:var(--foreground);background:linear-gradient(180deg,#0b1220,#0b1220 200px,#0b1220)}.container{max-width:1200px;margin:0 auto;padding:0 16px}header{background:linear-gradient(135deg,#1e293b,#0f172a);padding:32px 0;box-shadow:0 8px 24px #0000004d;border-bottom:1px solid var(--border)}header h1{margin:0 0 8px;font-size:28px}header p{margin:0;color:#e2e8f0cc}main{padding:24px 0 48px}.grid{display:grid;gap:24px}@media (min-width: 1024px){.grid-3{grid-template-columns:1fr 2fr}}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px #00000040}.card .card-body{padding:20px}.card .card-header{padding:16px 20px 0}.card .card-title{margin:0 0 8px;color:var(--primary);font-weight:700}.card .muted{color:var(--muted)}.controls .row{margin-bottom:16px}label{display:block;font-size:14px;color:var(--muted);margin-bottom:8px}input[type=text],select{width:100%;padding:10px 12px;background:#0a1221;border:1px solid var(--border);border-radius:8px;color:var(--foreground)}input[type=range]{width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border:1px solid transparent;border-radius:8px;background:#1e293b;color:var(--foreground);cursor:pointer}.btn.primary{background:var(--primary);color:#081018;font-weight:700}.btn.outline{background:transparent;border-color:var(--border)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-group{display:flex;gap:8px;justify-content:center}.progress{height:8px;background:#0a1221;border:1px solid var(--border);border-radius:999px;overflow:hidden}.progress>div{height:100%;background:var(--primary);width:0%;transition:width .2s ease}.frames{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.frame{position:relative;width:96px;height:96px;border-radius:12px;border:2px solid #233055;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a1221;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 6px 20px #00000040}.frame .label{position:absolute;top:6px;left:6px;font-size:10px;color:var(--muted)}.frame .value{font-size:24px;font-weight:800}.frame.hit{border-color:var(--success);background:#22c55e1a;transform:scale(1.03)}.frame.new{border-color:var(--warning);background:#f59e0b1a;transform:scale(1.03)}.frame.empty{border-style:dashed;color:var(--muted)}.clock-pointer{position:absolute;top:-18px;left:50%;transform:translate(-50%);color:var(--accent);font-weight:800;animation:bop 1s infinite alternate}@keyframes bop{0%{transform:translate(-50%) translateY(0)}to{transform:translate(-50%) translateY(-4px)}}.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.stat{background:#0a1221;border:1px solid var(--border);border-radius:10px;padding:12px 14px}.stat .name{font-size:12px;color:var(--muted);margin-bottom:6px}.stat .num{font-size:20px;font-weight:800}.stat .num.success{color:var(--success)}.stat .num.danger{color:var(--destructive)}.stat .num.primary{color:var(--primary)}.stat .num.warn{color:var(--warning)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}td.right,th.right{text-align:right}tr:hover{background:#94a3b80f}.flex{display:flex}.between{justify-content:space-between;align-items:center}.center{text-align:center}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.hidden{display:none}.tag{padding:6px 10px;border-radius:999px;font-weight:700}.tag.hit{background:#22c55e33;color:var(--success)}.tag.fault{background:#f59e0b33;color:var(--warning)}canvas{width:100%;height:300px;background:#0a1221;border:1px solid var(--border);border-radius:8px}
