:root{--bg: #0b0d12;--panel: #12151d;--panel-2: #171b25;--border: #232936;--text: #e8ecf4;--muted: #8b93a7;--accent: #5ad1ff;--red: #ff4d5e}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif;overflow:hidden}.app{display:flex;height:100vh}.sidebar{width:390px;min-width:390px;height:100%;overflow-y:auto;background:var(--panel);border-right:1px solid var(--border);padding:16px 16px 40px}.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:.4px;margin:2px 0 18px}.logo{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,var(--accent),#7c5cff)}.section{margin-bottom:22px}.section h3{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:0 0 10px;display:flex;justify-content:space-between;align-items:center}.section h3 .count{font-weight:600;color:var(--muted)}.text-input,select{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 10px;font-size:13px;outline:none;min-width:0}.text-input:focus,select:focus{border-color:var(--accent)}.text-input{width:100%}.field-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.field-row>label{width:76px;font-size:13px;color:var(--muted);flex-shrink:0}.field-row select{flex:1}.field-row input[type=range]{flex:1;accent-color:var(--accent)}.field-row .val{width:34px;text-align:right;font-size:12px;color:var(--muted)}.field-row.checks{gap:18px}.field-row.checks label{width:auto;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer}.field-row.checks input{accent-color:var(--accent)}.btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,border-color .15s}.btn:hover:not(:disabled){background:#1d2330;border-color:#303848}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:linear-gradient(135deg,#1f8fc4,#5ad1ff);border-color:transparent;color:#06222f}.btn.primary:hover:not(:disabled){filter:brightness(1.08);background:linear-gradient(135deg,#1f8fc4,#5ad1ff)}.btn.small{padding:6px 10px;font-size:12px}.btn.danger{color:#ff99a4;border-color:#4a2730}.btn.danger:hover:not(:disabled){background:#2a161c}.btn.on{border-color:var(--accent);color:var(--accent)}.mini{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:6px;width:26px;height:26px;font-size:12px;cursor:pointer;flex-shrink:0}.mini:hover:not(:disabled){border-color:#38404f}.mini:disabled{opacity:.3;cursor:not-allowed}.mini.danger{color:#ff99a4}.devices .meter{height:6px;background:var(--panel-2);border-radius:3px;overflow:hidden;margin:4px 0 10px}.devices .meter-bar{height:100%;width:0%;background:linear-gradient(90deg,#37c871,#ffd166,#ff4d5e);border-radius:3px;transition:width 60ms linear}.error{font-size:12px;color:#ff99a4;background:#2a161c;border:1px solid #4a2730;border-radius:8px;padding:8px 10px;display:flex;align-items:center;gap:8px;justify-content:space-between}.tier-edit{display:flex;flex-direction:column;gap:8px}.tier-edit-row{display:flex;gap:8px;align-items:center}.tier-edit-row input[type=color]{width:34px;height:30px;padding:2px;border:1px solid var(--border);border-radius:6px;background:var(--panel-2);cursor:pointer}.tier-label{flex:1}.dropzone{display:flex;align-items:center;gap:10px;border:1px dashed var(--border);border-radius:10px;padding:12px;margin-bottom:10px}.dropzone.busy{opacity:.6}.dropzone .hint{font-size:12px;color:var(--muted)}.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;margin:10px 0}.thumb{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--panel-2);border:1px solid var(--border)}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.thumb-fallback{width:100%;height:100%}.thumb-x{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;border:none;background:#0a0c11cc;color:#ff99a4;font-size:10px;line-height:1;cursor:pointer;display:none}.thumb:hover .thumb-x{display:block}.stage{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--panel)}.status{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.3px}.status-rec{color:var(--red)}.top-actions{display:flex;align-items:center;gap:10px}.rec-btn{background:var(--red);border:none;color:#fff;font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;cursor:pointer;letter-spacing:.3px;transition:transform .1s,filter .15s}.rec-btn:hover{filter:brightness(1.1)}.rec-btn:active{transform:scale(.97)}.rec-btn.rec{background:#2a161c;color:#ff99a4;border:1px solid #4a2730}.banner.error{margin:8px 16px 0}.canvas-holder{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:10px;overflow:hidden}.canvas-wrap{position:relative;line-height:0}.canvas-wrap canvas{width:100%;height:100%;display:block;border-radius:14px;box-shadow:0 20px 60px #0000008c;touch-action:none;cursor:default}.bottombar{padding:8px 16px;font-size:12px;color:var(--muted);border-top:1px solid var(--border);background:var(--panel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.guides{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.safe{position:absolute;left:0;right:0;background:#ff4d5e29;border-color:#ff4d5e8c;border-style:dashed;border-width:0;display:flex;align-items:center;justify-content:center}.safe span{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#ffffffbf;background:#0a0c1199;padding:3px 8px;border-radius:6px}.safe-top{top:0;height:6.25%;border-bottom-width:2px}.safe-bottom{bottom:0;height:13%;border-top-width:2px}.countdown{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:160px;font-weight:900;color:#fff;background:#06080c59;border-radius:14px;text-shadow:0 10px 50px rgba(0,0,0,.7);pointer-events:none;animation:pop .8s ease-out infinite}@keyframes pop{0%{transform:scale(1.15);opacity:.6}30%{transform:scale(1);opacity:1}to{transform:scale(1);opacity:1}}.rec-badge{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:7px;background:#0a0c11bf;color:#fff;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;pointer-events:none}.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--red);animation:blink 1s steps(2,start) infinite}@keyframes blink{to{visibility:hidden}}.cam-note{position:absolute;bottom:12px;left:12px;background:#0a0c11bf;color:var(--muted);font-size:12px;padding:5px 10px;border-radius:999px;pointer-events:none}.cam-note.error{color:#ff99a4}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#04060ab8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:22px;width:380px;max-height:90vh;overflow-y:auto;box-shadow:0 30px 90px #0009}.modal h2{margin:0 0 14px;font-size:18px}.modal .preview{width:100%;max-height:420px;border-radius:12px;background:#000;display:block}.modal .hintline{font-size:12px;color:var(--muted);margin:10px 0 16px}.modal-row{display:flex;gap:10px}.modal-row .btn{flex:1}@media(max-width:900px){html,body,#root{height:auto;min-height:100%}body{overflow:auto}.app{flex-direction:column;height:auto;min-height:100vh}.stage{height:70vh;flex:none}.sidebar{width:100%;min-width:0;height:auto;overflow:visible;border-right:none;border-top:1px solid var(--border);padding-bottom:32px}.bottombar{display:none}.topbar{padding:8px 12px}}