:root{--bg: #0b1220;--bg-card: #131c2e;--bg-hover: #1a2540;--border: #24314d;--text: #e7ecf5;--text-dim: #93a1bb;--accent: #3b82f6;--accent-hover: #2563eb;--danger: #ef4444;--ok: #22c55e;--warn: #f59e0b;--radius: 12px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Inter,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}h1{font-size:1.5rem;margin:0 0 4px}h2{font-size:1.15rem;margin:24px 0 12px}h3{font-size:1rem;margin:16px 0 8px}.container{max-width:1200px;margin:0 auto;padding:20px 16px 64px}.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:12px 16px;background:#0b1220eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}.topbar .brand{font-weight:700;font-size:1.05rem;color:var(--text)}.topbar .spacer{flex:1}.topbar .email{color:var(--text-dim);font-size:.85rem}.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .15s,transform .15s}.card.clickable:hover{border-color:var(--accent);transform:translateY(-2px);cursor:pointer}.card .thumb{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:linear-gradient(135deg,#16203a,#0e1526)}.card .thumb-placeholder{width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:.85rem;background:linear-gradient(135deg,#16203a,#0e1526)}.card .body{padding:12px 14px 14px}.card .title{font-weight:600}.card .sub{color:var(--text-dim);font-size:.85rem;margin-top:2px}.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}button,.btn{font:inherit;border:none;cursor:pointer;background:var(--accent);color:#fff;padding:9px 16px;border-radius:8px;font-weight:600;transition:background .15s;display:inline-flex;align-items:center;gap:6px}button:hover,.btn:hover{background:var(--accent-hover);text-decoration:none}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{background:var(--bg-hover);color:var(--text);border:1px solid var(--border)}button.secondary:hover{background:var(--border)}button.danger{background:var(--danger)}button.small{padding:5px 10px;font-size:.83rem}input,select,textarea{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px;width:100%}input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}label{display:block;font-size:.85rem;color:var(--text-dim);margin:12px 0 4px}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 16px;color:var(--text-dim)}.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-box{background:#ef44441f;border:1px solid var(--danger);color:#fecaca;border-radius:8px;padding:12px 14px;margin:12px 0}.success-box{background:#22c55e1f;border:1px solid var(--ok);color:#bbf7d0;border-radius:8px;padding:12px 14px;margin:12px 0}.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:600;background:var(--bg-hover);color:var(--text-dim);border:1px solid var(--border)}.badge.ok{color:var(--ok);border-color:var(--ok)}.badge.warn{color:var(--warn);border-color:var(--warn)}.badge.danger{color:var(--danger);border-color:var(--danger)}table{width:100%;border-collapse:collapse;font-size:.9rem}th{text-align:left;color:var(--text-dim);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border)}td{padding:8px 10px;border-bottom:1px solid var(--border)}tr:last-child td{border-bottom:none}.viewer-wrap{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}.viewer-canvas{width:100%;height:min(70vh,720px);display:block;background:#05080f;touch-action:none}.viewer-toolbar{position:absolute;top:10px;left:10px;z-index:10;display:flex;gap:6px;flex-wrap:wrap}.viewer-toolbar button{padding:6px 11px;font-size:.82rem}.viewer-toolbar button.active{outline:2px solid #fff}.viewer-hud{position:absolute;bottom:10px;left:10px;right:10px;z-index:10;display:flex;gap:8px;flex-wrap:wrap;align-items:center;pointer-events:none}.viewer-hud .hud-item{background:#0b1220d9;border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:.83rem;pointer-events:auto}.viewer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#05080fb3;flex-direction:column;gap:12px;color:var(--text-dim)}.gallery{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:var(--bg-hover)}.timeline{position:relative;margin:8px 0 0;padding-left:22px}.timeline:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--border)}.timeline-item{position:relative;padding:0 0 18px}.timeline-item:before{content:"";position:absolute;left:-21px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}.stat-row{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.stat{flex:1;min-width:150px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px 14px}.stat .value{font-size:1.3rem;font-weight:700}.stat .label{color:var(--text-dim);font-size:.8rem}.stat.cut .value{color:var(--danger)}.stat.fill .value{color:var(--ok)}.heatmap-img{width:100%;border-radius:10px;border:1px solid var(--border);background:#fff}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px}.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;flex-wrap:wrap}.tabs button{background:none;color:var(--text-dim);border-radius:8px 8px 0 0;font-weight:600}.tabs button.active{color:var(--text);background:var(--bg-card);border-bottom:2px solid var(--accent)}.login-page{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}.login-card{width:100%;max-width:400px;text-align:center;padding:32px 28px}.login-card h1{margin-bottom:8px}.login-card p{color:var(--text-dim)}.login-card form{margin-top:20px;display:flex;flex-direction:column;gap:12px}@media (max-width: 640px){.container{padding:14px 10px 48px}.viewer-canvas{height:60vh}h1{font-size:1.25rem}}