*{box-sizing:border-box}.app-container{height:100dvh;width:100vw;display:flex;flex-direction:column;background-color:#f8fafc;overflow:hidden;position:relative}.content-slider{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;width:100%}.content-slider::-webkit-scrollbar{display:none}.page{flex:0 0 100vw;width:100vw;height:100%;scroll-snap-align:center;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;position:relative}.scroll-wheel-container{height:110px;background:#111;display:flex;align-items:center;position:relative;z-index:50;padding-bottom:env(safe-area-inset-bottom);width:100%}.scroll-wheel{width:100%;height:90px;display:flex;align-items:center;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:0;-ms-overflow-style:none;scrollbar-width:none}.scroll-wheel::-webkit-scrollbar{display:none}.scroll-wheel:before,.scroll-wheel:after{content:"";flex:0 0 calc(50vw - 42px)}.wheel-btn-wrapper{flex:0 0 84px;width:84px;height:100%;display:flex;justify-content:center;align-items:center;scroll-snap-align:center;margin:0 calc((100vw / 3 - 84px) / 2)}.wheel-btn{width:68px;height:68px;border-radius:50%;background-color:#2a2a2a;color:#888;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all .4s cubic-bezier(.175,.885,.32,1.2);cursor:pointer;border:none;position:relative}.wheel-btn span{display:block;font-size:11px;margin-top:4px}.wheel-btn.active{background:#007bff;color:#fff;transform:scale(1.1);box-shadow:0 0 25px #007bff80;z-index:10}.wheel-btn.recording{background:#ef4444!important;color:#fff!important;animation:recording-pulse 1.5s infinite}.wheel-btn svg{width:24px;height:24px;transition:all .3s}@keyframes recording-pulse{0%{box-shadow:0 0 #ef4444b3}70%{box-shadow:0 0 0 15px #ef444400}to{box-shadow:0 0 #ef444400}}.page main.scaling-frames{display:flex;flex-direction:column;flex:1;width:100%;max-width:100vw;height:100%;padding:.75rem 1.25rem 1.25rem;gap:1.25rem;overflow:hidden}.page main.scaling-frames>div{flex:1;min-height:0;width:100%;transition:all .3s ease;border:2px solid rgba(0,0,0,.08)!important;box-shadow:0 4px 6px -1px #0000000d}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.content-slider,.scroll-wheel{-webkit-overflow-scrolling:touch}.camera-page-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative;background:#000}.camera-wrapper{position:relative;flex:1;width:100%;background:#000;overflow:hidden}.camera-wrapper video{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;z-index:5}.camera-wrapper canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999}.camera-mask{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.1)}.mask-corner{position:absolute;width:40px;height:40px;border-color:#f00c;border-style:solid;pointer-events:none}.mask-corner.t-l{top:10px;left:10px;border-width:4px 0 0 4px}.mask-corner.t-r{top:10px;right:10px;border-width:4px 4px 0 0}.mask-corner.b-l{bottom:10px;left:10px;border-width:0 0 4px 4px}.mask-corner.b-r{bottom:10px;right:10px;border-width:0 4px 4px 0}.scan-box{position:absolute;display:flex;flex-direction:column;z-index:1000;pointer-events:auto;touch-action:none;cursor:move;background:transparent;border:none!important}.scan-box:after,.scan-box:before,.scan-box.dragging:after,.scan-box.dragging:before{display:none!important;content:none!important}.scan-label-area{height:40px;background:transparent;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#ffffff4d;border:none;pointer-events:none;box-sizing:border-box;z-index:1}.scan-label-area.top{border-radius:12px 12px 0 0}.scan-label-area.bottom{border-radius:0 0 12px 12px}.scan-main-area{flex:1;border:2px solid rgba(0,255,255,.8);background:#00ffff0d;position:relative;box-sizing:border-box;box-shadow:0 0 30px #00ffff1a}.resize-handle{position:absolute;width:24px;height:24px;background:#fff;border:3px solid cyan;border-radius:50%;z-index:10}.resize-handle.top-left{top:-12px;left:-12px;cursor:nwse-resize}.resize-handle.top-right{top:-12px;right:-12px;cursor:nesw-resize}.resize-handle.bottom-left{bottom:-12px;left:-12px;cursor:nesw-resize}.resize-handle.bottom-right{bottom:-12px;right:-12px;cursor:nwse-resize}.standby-text{color:#fff9;font-weight:900;letter-spacing:.5em;text-transform:uppercase;font-size:.85rem;background:#0000004d;padding:.5rem 1.5rem;border-radius:4px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.camera-status-badge{position:absolute;top:2rem;left:50%;transform:translate(-50%);z-index:50;background:#0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.6rem 1.2rem;border-radius:99px;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.4rem;border:1px solid rgba(255,255,255,.1);pointer-events:none;max-width:90vw}.camera-status-row{display:flex;align-items:center;gap:.4rem;width:100%;justify-content:center}.camera-status-dot{width:8px;height:8px;border-radius:50%;background:#fff3}.camera-status-dot.active{background:#ef4444;animation:recording-pulse 1.5s infinite}.camera-status-title{letter-spacing:.1em;text-transform:uppercase}.camera-status-text{color:#fffc;font-size:11px}.camera-status-divider{color:#ffffff4d}.camera-online{color:#4ade80}.camera-offline{color:#f87171}.camera-btn-area{display:flex;align-items:center;justify-content:center;padding:1rem 0;background:transparent;z-index:200}.camera-toggle-btn{width:80px;height:80px;border-radius:50%;background-color:#2a2a2a;color:#888;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all .4s cubic-bezier(.175,.885,.32,1.27);cursor:pointer;border:none}.camera-toggle-btn.active{background:#6366f1;color:#fff;box-shadow:0 0 30px #6366f199}.camera-toggle-btn.recording{background:#ef4444!important;color:#fff!important;animation:recording-pulse 1.5s infinite}.camera-toggle-btn span{font-size:10px;margin-top:4px;font-weight:700}
