:root{--bg-top: #041f2d;--bg-bottom: #0e3f58;--card: rgba(255, 255, 255, .09);--card-border: rgba(255, 255, 255, .26);--text: #f3fbff;--muted: #c5e0eb;--accent: #ffce49;--ok: #3fe1a5;--danger: #ff7385;--shadow: 0 18px 34px rgba(2, 15, 22, .36)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;font-family:Avenir Next,SF Pro Text,Segoe UI,sans-serif;background:radial-gradient(120% 60% at 50% 0%,#1c6f8f 0%,transparent 58%),linear-gradient(180deg,var(--bg-top),var(--bg-bottom));color:var(--text)}.app-shell{min-height:100dvh;display:flex;flex-direction:column;padding:16px;gap:14px}.top-bar{display:flex;justify-content:space-between;align-items:center;gap:12px}.brand-block{display:flex;align-items:center;gap:10px}.brand-logo{width:52px;height:52px;object-fit:contain;border-radius:12px;background:#fff;padding:6px;border:1px solid rgba(188,22,51,.28);box-shadow:0 8px 18px #7a182e24}.brand-text{display:grid;gap:2px}.kicker{margin:0;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:.72rem}h1{margin:4px 0 0;font-size:clamp(1.4rem,4.2vw,2rem)}.tabs{display:inline-grid;grid-auto-flow:column;gap:6px;padding:4px;border-radius:999px;background:#ffffff24}.tabs button{border:0;border-radius:999px;padding:8px 14px;background:transparent;color:var(--text);font-weight:600}.tabs button.active{background:#fff;color:#003246}.record-page,.library-page{display:flex;flex-direction:column;gap:14px;flex:1}.install-banner,.tips-card,.preview-card,.video-card,.frame-btn,.status-bar,.tool-card,.filter-panel{background:var(--card);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.install-banner{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.install-banner p{margin:0;color:var(--muted);font-size:.88rem}.install-banner button,.share,.subtle-btn,.danger-light{border:0;border-radius:10px;padding:8px 12px;font-weight:700}.install-banner button,.share{background:var(--accent);color:#032536}.subtle-btn{background:#fff3;color:var(--text)}.danger-light{background:#ff738538;color:#ffdbe1}.tips-card{padding:12px}.tips-card h2{margin:0 0 6px;font-size:1rem}.tips-card p{margin:0;line-height:1.4;color:var(--muted)}.tips-card .tiny,.tiny{margin-top:8px;font-size:.8rem;color:var(--muted)}.frame-strip{display:grid;grid-template-columns:repeat(5,minmax(90px,1fr));gap:8px;overflow-x:auto;padding-bottom:3px}.frame-btn{border:1px solid transparent;display:flex;flex-direction:column;gap:6px;align-items:center;padding:8px;min-width:90px;color:var(--text)}.frame-btn img{width:100%;border-radius:10px}.frame-btn span{font-size:.74rem;color:var(--muted)}.frame-btn.selected{border-color:var(--accent);transform:translateY(-1px)}.preview-card{position:relative;overflow:hidden;aspect-ratio:9 / 16;width:min(100%,420px);margin-inline:auto}.hidden-source{display:none}.preview-canvas{width:100%;height:100%;object-fit:cover;display:block;background:#05121bbf}.overlay-hint{position:absolute;inset:auto 18px 18px;margin:0;text-align:center;background:#00000073;border-radius:10px;padding:10px;font-size:.85rem}.torch-btn{border:0;border-radius:12px;padding:12px;font-size:.8rem;font-weight:700;background:#0000008c;color:#fff5bc}.torch-btn.active{background:#ffd450;color:#2a1f00}.cam-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.cam-info{margin:0;text-align:center;color:var(--muted);font-size:.82rem}.cam-controls button{border:0;border-radius:12px;padding:12px 10px;font-weight:700;color:#032536}.start{background:var(--ok)}.stop{background:var(--danger)}.ghost{background:#ebf7ff}.cam-controls button:disabled{opacity:.5}.filter-panel{display:grid;gap:10px;padding:12px}.filter-head{display:flex;align-items:center;justify-content:space-between}.filter-head h3,.tool-card h3{margin:0;font-size:.98rem}.reset-filter{border:0;background:#fff3;color:var(--text);border-radius:999px;padding:6px 12px;font-size:.82rem}.preset-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}.preset-chip{border:1px solid rgba(255,255,255,.32);background:#ffffff24;color:var(--text);border-radius:999px;padding:7px 12px;font-size:.8rem;white-space:nowrap}.preset-chip.active{background:var(--accent);border-color:var(--accent);color:#032536;font-weight:700}.filter-panel label,.tool-card label{display:grid;gap:6px;font-size:.84rem;color:var(--muted)}.filter-panel input[type=range],.tool-card input[type=range]{width:100%}.tools-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.tool-card{padding:12px;display:grid;gap:10px}.tool-card input[type=text],.filter-panel select{border:1px solid rgba(255,255,255,.25);border-radius:10px;background:#ffffff1f;color:var(--text);padding:10px}.filter-panel option{color:#083248}.check-line{display:flex;align-items:center;gap:8px;color:var(--text)}.file-picker{position:relative;border-radius:10px;border:1px dashed rgba(255,255,255,.35);padding:10px;color:var(--text)}.file-picker input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0}.empty{color:var(--muted)}.video-list{display:grid;gap:12px}.video-card{padding:10px;display:grid;gap:10px;position:relative;isolation:isolate}.video-meta h3{margin:0}.video-meta p{margin:4px 0 0;font-size:.86rem;color:var(--muted)}.video-card video{width:100%;border-radius:12px;object-fit:contain;background:#000;display:block}.library-video{aspect-ratio:9 / 16;width:min(100%,420px);margin-inline:auto}.video-actions{display:flex;gap:8px;flex-wrap:wrap}.status-bar{margin-top:auto;padding:10px 12px;font-size:.9rem}.error{color:#ffd4db}.tour-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#020a109e;display:grid;place-items:center;z-index:20;padding:16px}.tour-card{width:min(100%,420px);background:#f8fcff;color:#083248;border-radius:16px;padding:14px;box-shadow:0 24px 40px #0000004d}.tour-card h3{margin:6px 0}.tour-card p{margin:0;line-height:1.45}.tour-actions{margin-top:12px;display:flex;justify-content:space-between}@media (max-width: 760px){.tools-grid{grid-template-columns:1fr}}@media (max-width: 560px){.top-bar{flex-direction:column;align-items:stretch}.brand-block{width:100%}.install-banner{flex-direction:column;align-items:flex-start}.tabs{width:fit-content}.cam-controls{grid-template-columns:1fr}}