* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body, html { background: #000; height: 100vh; width: 100vw; overflow: hidden; }

#video { width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: 1; }

.grid-layer {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 2;
    background: 
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px) 0 33.33%,
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px) 0 66.66%,
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px) 33.33% 0,
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px) 66.66% 0;
}

.camera-ui { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
.top-bar { position: absolute; top: 0; left: 0; width: 100%; padding: calc(env(safe-area-inset-top) + 20px) 25px; font-size: 11px; letter-spacing: 2px; color: #eee; text-transform: uppercase; }

.bottom-ui {
    position: fixed; bottom: 0; left: 0; width: 100%; padding-bottom: calc(env(safe-area-inset-bottom) + 30px);
    display: flex; flex-direction: column; align-items: center; gap: 25px;
    background: linear-gradient(transparent, rgba(0,0,0,0.9)); pointer-events: auto;
}

.sliders-wrapper {
    width: 80%; max-width: 320px; display: flex; flex-direction: column; gap: 20px;
    opacity: 0; transform: translateY(20px); pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sliders-wrapper.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

.slider-group { text-align: center; }
.slider-label { font-size: 9px; letter-spacing: 2px; color: #888; margin-bottom: 8px; text-transform: uppercase; }

input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 1px; background: rgba(255,255,255,0.3); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 18px; width: 18px; border-radius: 50%; background: #fff; margin-top: -9px; }

.controls-row { display: flex; width: 100%; justify-content: space-around; align-items: center; max-width: 450px; }

.shutter-button {
    width: 75px; height: 75px; background: #ff0000; border-radius: 50%;
    border: 6px solid #fff; cursor: pointer; position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.6); transition: all 0.2s ease;
}
.shutter-active { border-width: 37px; }

.icon-btn { background: none; border: none; color: #fff; font-size: 10px; letter-spacing: 1.5px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 80px; cursor: pointer; text-transform: uppercase; }
.icon-btn .icon { font-size: 26px; transition: transform 0.4s ease; }
.icon-btn.active .icon { transform: rotate(90deg); color: #007AFF; }