:root { --text: #eef2f8; --dim: #9aa6b8; --glass: rgba(10,12,20,.62); --line: rgba(255,255,255,.12); --accent: #5eead4; --accent2: #818cf8; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #05070c; color: var(--text); font: 14px/1.5 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.top { position: fixed; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; gap: 12px; z-index: 5; pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--line); font-weight: 900; font-size: 16px; letter-spacing: .01em; }
.brand i { font-style: normal; color: var(--accent); text-shadow: 0 0 12px var(--accent); } .brand b { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pick { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--line); }
.pick span { color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pick select { font: inherit; font-weight: 700; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; outline: none; max-width: 52vw; }
.pick select option { background: #0b0f19; }
.shot { margin-left: auto; padding: 9px 14px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--line); font-weight: 700; color: var(--accent); white-space: nowrap; }
.shot:empty { display: none; }
.cams { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; display: flex; align-items: stretch; gap: 10px; padding: 10px; border-radius: 18px; background: var(--glass); backdrop-filter: blur(16px); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0,0,0,.45); max-width: calc(100vw - 24px); overflow-x: auto; }
.cams button { font: inherit; font-weight: 700; color: var(--text); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 11px; padding: 8px 12px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s; }
.cams button:hover { background: rgba(255,255,255,.11); }
.cams button.on { border-color: var(--accent); background: rgba(94,234,212,.14); box-shadow: 0 0 16px rgba(94,234,212,.35); color: #fff; }
.cams .big { font-size: 15px; padding: 8px 16px; }
.grp { display: flex; align-items: center; gap: 6px; padding-left: 10px; border-left: 1px solid var(--line); }
.grp > span { color: var(--dim); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-right: 2px; white-space: nowrap; }
.hint { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 4; color: rgba(238,242,248,.55); font-size: 12px; text-shadow: 0 1px 4px #000; white-space: nowrap; pointer-events: none; }
.loading { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(20,30,50,.75), rgba(3,5,10,.92)); }
.loading[hidden] { display: none; }
.lbox { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--accent); border-right-color: var(--accent2); animation: sp 1s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.lbar { width: 220px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; } .lbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .2s; }
@media (max-width: 700px) { .hint { display: none; } .shot { display: none; } .grp > span { display: none; } .cams { bottom: 10px; } }