:root{--abyss:#04263f;--deep:#0a4d72;--tide:#1b8fc4;--foam:#dff3fb;--paper:#fff;--ink:#04263f;--green:#1a8a4a}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{background:var(--abyss);height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}#root{height:100%}#app{flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.config-banner{z-index:200;color:#856404;text-align:center;background:#fff3cd;padding:8px 14px;font-size:12px;font-weight:600;position:fixed;top:0;left:0;right:0}.config-banner code{background:#0000000f;border-radius:4px;padding:1px 5px;font-size:11px}#stage{background:#000;flex:none;width:min(100vw,80vh - 104px);height:min(125vw,100vh - 130px);position:relative;overflow:hidden}#video,#frame,#shot{width:100%;height:100%;position:absolute;inset:0}#video{object-fit:cover;z-index:1}#video.mirror{transform:scaleX(-1)}#frame{object-fit:cover;z-index:3;pointer-events:none}#shot{object-fit:cover;z-index:5}#credit{z-index:4;pointer-events:none;transform-origin:50%;letter-spacing:.05em;color:#000;white-space:nowrap;text-shadow:0 0 4px #fffc;font-size:11px;font-weight:700;position:absolute;top:calc(50% + 45px);left:6px;transform:translateY(-50%)rotate(-90deg)}#saveBadge{z-index:6;color:#fff;letter-spacing:.02em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1a8a4aeb;border-radius:20px;align-items:center;gap:5px;padding:5px 10px;font-size:11px;font-weight:700;display:none;position:absolute;top:10px;left:10px}#saveBadge.show{display:flex}#saveBadge.error{background:#b42828e6}#saveBadge svg{width:13px;height:13px}#flip{z-index:6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);width:42px;height:42px;color:var(--foam);cursor:pointer;background:#04263f99;border:none;border-radius:50%;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;top:10px;right:10px}#flip:active{opacity:.6}#flip svg{width:22px;height:22px}#gate{z-index:20;background:linear-gradient(150deg,var(--abyss) 0%,var(--deep) 100%);color:var(--foam);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex;position:absolute;inset:0}#gate.hidden{display:none}.gate-logo{width:110px;max-width:50%;height:auto;margin-bottom:2px}#gate h1{letter-spacing:-.01em;font-size:20px;font-weight:800;line-height:1.2}#gate p{opacity:.8;max-width:260px;font-size:13px;line-height:1.5}.gate-consent{text-align:left;max-width:270px;color:var(--foam);opacity:.9;align-items:flex-start;gap:10px;font-size:12px;line-height:1.45;display:flex}.gate-consent input{width:18px;height:18px;accent-color:var(--tide);flex:none;margin-top:1px}#startBtn{background:var(--foam);color:var(--abyss);cursor:pointer;border:none;border-radius:30px;margin-top:4px;padding:13px 28px;font-size:15px;font-weight:700}#startBtn:disabled{opacity:.38;cursor:not-allowed}#startBtn:not(:disabled):active{transform:scale(.95)}#bar{width:100%;padding:16px 20px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(0deg,var(--abyss),var(--deep));flex:none;justify-content:center;align-items:center;gap:24px;display:flex}.btn{color:var(--foam);cursor:pointer;background:#ffffff1a;border:none;border-radius:14px;flex-direction:column;align-items:center;gap:5px;width:60px;padding:8px 4px;font-size:12px;font-weight:600;transition:transform .1s;display:flex}.btn:active{transform:scale(.9)}.btn svg{width:24px;height:24px}.btn:disabled{opacity:.3;pointer-events:none}#shutter{border:4px solid var(--foam);background:radial-gradient(circle at 50% 38%,#3ec3f0,var(--tide));cursor:pointer;border-radius:50%;flex:none;width:74px;height:74px;transition:transform .1s;box-shadow:0 0 0 6px #1b8fc440,0 6px 20px #0006}#shutter:active{transform:scale(.88)}#toast{background:var(--paper);color:var(--ink);opacity:0;pointer-events:none;z-index:60;text-align:center;border-radius:24px;max-width:82%;padding:11px 18px;font-size:13px;font-weight:600;transition:opacity .2s,transform .2s;position:fixed;bottom:110px;left:50%;transform:translate(-50%)translateY(16px);box-shadow:0 8px 24px #00000040}#toast.show{opacity:1;transform:translate(-50%)translateY(0)}#sheet{z-index:50;background:#020e1a99;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet-card{background:var(--paper);width:100%;max-width:520px;color:var(--ink);padding:22px 20px calc(22px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;box-shadow:0 -8px 32px #0000004d}.sheet-card h2{margin-bottom:4px;font-size:17px;font-weight:800}.sheet-card p{color:#567;margin-bottom:4px;font-size:12.5px;line-height:1.5}.server-status{border-radius:10px;align-items:center;gap:6px;margin-bottom:14px;padding:8px 12px;font-size:12px;font-weight:700;display:flex}.server-status.saved{color:var(--green);background:#eafaf1}.server-status.saving{color:var(--deep);background:#e8f4fb}.server-status.failed{color:#b42828;background:#fdecea}.server-status svg{flex:none;width:14px;height:14px}.sheet-actions{flex-direction:column;gap:10px;margin-bottom:6px;display:flex}.action{width:100%;color:var(--ink);cursor:pointer;text-align:left;background:#f4fbfe;border:1.5px solid #ddeef7;border-radius:14px;align-items:center;gap:12px;padding:13px 14px;font-size:14px;font-weight:700;transition:transform .1s;display:flex}.action:active{transform:scale(.97)}.action.primary{background:var(--tide);border-color:var(--tide);color:#fff}.action svg{flex:none;width:20px;height:20px}.action small{opacity:.78;margin-top:1px;font-size:11px;font-weight:500;display:block}.sheet-cancel{color:#89a;cursor:pointer;background:0 0;border:none;width:100%;padding:12px;font-size:14px;font-weight:600}.header{color:#fff;z-index:10;background:#04263f;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;display:flex;position:sticky;top:0;box-shadow:0 2px 12px #0000004d}.header h1{font-size:17px;font-weight:800}.header small{opacity:.65;margin-top:1px;font-size:11px;display:block}.header-right{align-items:center;gap:10px;display:flex}.badge-count{color:#fff;background:#ffffff26;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700}.logout-btn{color:#fff;cursor:pointer;background:#ffffff1f;border:1px solid #fff3;border-radius:8px;padding:7px 16px;font-size:13px;font-weight:600}.logout-btn:hover{background:#fff3}.stats{flex-wrap:wrap;gap:14px;padding:18px 24px 0;display:flex}.stat{background:#fff;border-radius:12px;flex:1;min-width:120px;padding:14px 18px;box-shadow:0 1px 4px #00000012}.stat .num{color:#04263f;font-size:26px;font-weight:800}.stat .lbl{color:#789;margin-top:2px;font-size:11px}.toolbar{flex-wrap:wrap;align-items:center;gap:10px;padding:14px 24px;display:flex}.toolbar input{background:#fff;border:1.5px solid #d0dde8;border-radius:10px;outline:none;flex:1;min-width:200px;max-width:380px;padding:10px 14px;font-size:14px}.toolbar input:focus{border-color:#1b8fc4}.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;padding:0 24px 24px;display:grid}.card{cursor:pointer;background:#fff;border-radius:14px;transition:transform .15s,box-shadow .15s;overflow:hidden;box-shadow:0 1px 6px #00000014}.card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000021}.card img{aspect-ratio:4/5;object-fit:cover;background:#e8f2f8;width:100%;display:block}.card-info{padding:8px 10px 10px}.card-date{color:#789;font-size:10px;font-weight:600}.card-size{color:#aab;margin-top:1px;font-size:10px}.card-dl{color:#04263f;cursor:pointer;text-align:center;background:#eaf4fb;border:none;border-radius:7px;width:100%;margin-top:6px;padding:6px;font-size:11px;font-weight:700;text-decoration:none;display:block}.card-dl:hover{color:#fff;background:#1b8fc4}#lightbox{z-index:100;background:#020e1aeb;flex-direction:column;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#lightbox.show{display:flex}#lightbox img{object-fit:contain;border-radius:12px;max-width:92vw;max-height:80vh}#lightbox .lb-bar{align-items:center;gap:12px;margin-top:14px;display:flex}#lightbox .lb-bar a{color:#fff;cursor:pointer;background:#1b8fc4;border:none;border-radius:10px;padding:10px 20px;font-size:13px;font-weight:700;text-decoration:none}#lightbox .lb-close{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:22px;display:flex;position:absolute;top:16px;right:16px}#lb-date{color:#aac;margin-top:6px;font-size:12px}.pages{flex-wrap:wrap;justify-content:center;gap:8px;padding:0 24px 28px;display:flex}.pages a,.pages span{border-radius:9px;padding:8px 14px;font-size:13px;font-weight:700;text-decoration:none}.pages a{color:#04263f;background:#fff;box-shadow:0 1px 4px #00000014}.pages a:hover,.pages span{color:#fff;background:#04263f}.empty{text-align:center;color:#789;padding:60px 24px}.empty svg{opacity:.3;margin-bottom:12px}.search{padding:0 24px 16px}.search input{border:1.5px solid #d0dde8;border-radius:10px;outline:none;width:100%;max-width:400px;padding:10px 14px;font-size:14px}.search input:focus{border-color:#1b8fc4}.table-wrap{padding:0 24px 32px;overflow-x:auto}table{border-collapse:collapse;background:#fff;border-radius:14px;width:100%;overflow:hidden;box-shadow:0 1px 4px #00000014}th{color:#dff3fb;text-align:left;letter-spacing:.04em;white-space:nowrap;background:#04263f;padding:12px 14px;font-size:12px;font-weight:700}td{vertical-align:top;border-bottom:1px solid #edf2f7;padding:11px 14px;font-size:13px}tr:last-child td{border-bottom:none}tr:hover td{background:#f4f9fc}.badge{border-radius:20px;padding:3px 9px;font-size:11px;font-weight:700;display:inline-block}.badge.yes{color:#1a8a4a;background:#eafaf1}.ip{color:#567;font-family:monospace;font-size:12px}.file{color:#789;font-family:monospace;font-size:11px}.login-wrap{justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.login-card{background:#fff;border-radius:18px;width:100%;max-width:360px;padding:36px 30px;box-shadow:0 8px 32px #0000001a}.login-logo{width:90px;height:auto;margin-bottom:16px}.login-card h2{color:#04263f;margin-bottom:4px;font-size:20px;font-weight:800}.login-card p{color:#789;margin-bottom:20px;font-size:13px;line-height:1.5}.login-card input{border:1.5px solid #d0dde8;border-radius:10px;outline:none;width:100%;margin-bottom:12px;padding:12px 14px;font-size:15px}.login-card input:focus{border-color:#1b8fc4}.login-card button[type=submit],.login-btn{color:#fff;cursor:pointer;background:#04263f;border:none;border-radius:10px;width:100%;padding:13px;font-size:15px;font-weight:700}.login-card button[type=submit]:hover{background:#0a4d72}.login-card button[type=submit]:disabled{opacity:.5;cursor:not-allowed}.link-back{color:#789;cursor:pointer;background:0 0;border:none;font-size:13px;font-weight:600}.link-back:hover{color:#04263f}.err{color:#b42828;background:#fdecea;border-radius:8px;margin-bottom:12px;padding:10px 12px;font-size:13px;font-weight:600}@media (width<=480px){.grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;padding:0 14px 24px}.stats,.toolbar{padding-left:14px;padding-right:14px}.header{padding:14px 16px}}