:root { --primary: #dc3545; --dark: #121212; --light: #f8f9fa; --bg: #1e1e1e; }
body { margin:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:var(--dark); color:var(--light); }
* { box-sizing:border-box; }

/* AUTH & DASHBOARD LAYOUT */
.screen { display:none; height:100vh; flex-direction:column; }
.screen.active { display:flex; }
header { padding:15px; background:var(--bg); display:flex; justify-content:space-between; align-items:center; }
.header-tools { display:flex; gap:15px; align-items:center; }
.back-link { color:white; text-decoration:none; font-weight:bold; }

/* BUTTONS */
.btn { border:none; border-radius:8px; font-weight:bold; cursor:pointer; color:white; padding:15px; }
.btn-primary { background:#007bff; width:100%; margin-top:10px; }
.btn-danger { background:var(--primary); }
.btn-warning { background:#ffc107; color:black; }
.btn-success { background:#28a745; width:100%; margin-top:10px; }
.btn-stop { background:#333; color:#aaa; width:100%; padding:25px; font-size:18px; border:1px solid #444; }
.btn-sm, .btn-dl { background:#444; color:white; padding:5px 10px; border-radius:4px; text-decoration:none; font-size:12px; border:none; cursor:pointer; }
.btn-icon { text-decoration:none; font-size:20px; cursor:pointer; }
.btn-icon-del { background:none; border:none; font-size:18px; cursor:pointer; padding:10px; }

/* AUTH */
#auth-screen { justify-content:center; padding:20px; }
input { width:100%; padding:12px; margin-bottom:10px; background:#333; border:1px solid #555; color:white; border-radius:4px; }
.tabs { display:flex; margin-bottom:20px; }
.tab-btn { flex:1; background:none; border:none; border-bottom:2px solid #555; color:#aaa; padding:10px; cursor:pointer; }
.tab-btn.active { border-color:var(--primary); color:white; font-weight:bold; }

/* DASHBOARD LISTS */
.main-actions { padding:15px; display:flex; flex-direction:column; gap:10px; }
.btn-xl { font-size:20px; padding:30px; text-transform:uppercase; letter-spacing:1px; }
.dashboard-lists { flex:1; overflow-y:auto; padding:10px; }
h3 { font-size:14px; color:#888; text-transform:uppercase; border-bottom:1px solid #333; padding-bottom:5px; margin-top:20px; }
ul { padding:0; list-style:none; }
.session-card { background:#222; border-radius:6px; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
.active-card { border-left:4px solid red; }
.card-link { flex:1; padding:15px; text-decoration:none; color:white; display:block; }
.s-name { font-weight:bold; }
.s-time { font-size:12px; color:#888; margin-top:4px; }
.badge { background:red; font-size:10px; padding:2px 6px; border-radius:3px; margin-left:10px; }

/* ACCOUNT PAGE */
.container { padding-top:20px; }
.alert-box { background:#2d4028; border:1px solid #46703b; padding:15px; border-radius:6px; margin-bottom:20px; color:#d4edda; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; margin-bottom:5px; font-weight:bold; }
.form-group small { color:#888; font-size:12px; }

/* MODALS */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:2000; align-items:center; justify-content:center; }
.modal.active { display:flex; }
.modal-content { background:#222; padding:25px; border-radius:8px; width:90%; max-width:350px; }
.modal-actions { display:flex; gap:10px; margin-top:20px; }
.modal-actions button { width:100%; padding:10px; }

/* RECORDER */
.camera-preview { flex:1; position:relative; background:black; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#preview-video { width:100%; height:100%; object-fit:cover; }
.recording-indicator { position:absolute; top:20px; left:20px; background:rgba(0,0,0,0.6); padding:5px 10px; border-radius:4px; display:flex; align-items:center; gap:8px; font-weight:bold; }
.red-dot { width:10px; height:10px; background:red; border-radius:50%; animation:pulse 1s infinite; }

/* VIEWER (New App-Like Style) */
.viewer-body { background:black; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.player-container { width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center; }
#remote-video { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; }
#video-status { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    color:white; 
    background:rgba(0,0,0,0.7); 
    padding:15px 25px; 
    border-radius:8px; 
    font-size:16px; 
    font-weight:500;
    pointer-events:none; 
    display:none; 
    z-index:100; 
}

/* Overlays */
.player-header { position:absolute; top:0; left:0; width:100%; padding:15px; display:flex; justify-content:space-between; background:linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); z-index:10; }
.back-btn-pill { background:rgba(255,255,255,0.2); color:white; text-decoration:none; padding:8px 15px; border-radius:20px; font-size:14px; backdrop-filter:blur(4px); }
.status-pill { background:#444; padding:5px 10px; border-radius:4px; font-size:10px; font-weight:bold; }
.status-pill.active { background:red; }

/* CUSTOM VIDEO CONTROLS */
.custom-controls {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:15px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(to top, rgba(0,0,0,0.95), transparent);
    z-index:10;
}

/* Extra bottom padding on mobile to prevent cutoff */
@media (max-width: 768px) {
    .custom-controls {
        padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    }
}

/* Progress Bar Container */
.progress-container { width:100%; height:30px; position:relative; margin-bottom:10px; cursor:pointer; }
.progress-bar { width:100%; height:4px; background:rgba(255,255,255,0.2); border-radius:2px; position:absolute; top:13px; }
.progress-buffered { height:100%; background:rgba(255,255,255,0.3); border-radius:2px; width:0%; position:absolute; transition:width 0.3s; }
.progress-played { height:100%; background:var(--primary); border-radius:2px; width:0%; position:absolute; z-index:2; transition:width 0.1s linear; }
.progress-handle { width:12px; height:12px; background:white; border-radius:50%; position:absolute; top:-4px; right:-6px; opacity:0; transition:opacity 0.2s; box-shadow:0 2px 4px rgba(0,0,0,0.5); }
.progress-container:hover .progress-handle { opacity:1; }
.progress-container:hover .progress-bar { height:6px; top:12px; }
.time-tooltip { position:absolute; background:rgba(0,0,0,0.8); color:white; padding:3px 8px; border-radius:3px; font-size:11px; pointer-events:none; opacity:0; transform:translateX(-50%); top:-25px; white-space:nowrap; }
.progress-container:hover .time-tooltip { opacity:1; }

/* Control Buttons Row */
.controls-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:10px; }
.controls-left, .controls-center, .controls-right { display:flex; align-items:center; gap:8px; }
.controls-left { flex:1; justify-content:flex-start; }
.controls-center { flex:0; justify-content:center; }
.controls-right { flex:1; justify-content:flex-end; }

/* Control Buttons */
.control-btn { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:white; padding:6px 12px; border-radius:4px; cursor:pointer; font-size:13px; backdrop-filter:blur(4px); transition:all 0.2s; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.control-btn:hover { background:rgba(255,255,255,0.25); transform:scale(1.05); }
.btn-secondary { background:rgba(255,255,255,0.05); font-size:12px; padding:5px 10px; }
.btn-live { background:rgba(220,53,69,0.3); border-color:rgba(220,53,69,0.6); animation:pulse-live 2s infinite; }
.btn-live:hover { background:rgba(220,53,69,0.5); }
@keyframes pulse-live { 0%, 100% { opacity:1; } 50% { opacity:0.7; } }

/* Volume Control */
.volume-control { display:flex; align-items:center; gap:5px; }
.volume-slider { width:0; opacity:0; transition:width 0.3s, opacity 0.3s; }
.volume-control:hover .volume-slider { width:60px; opacity:1; }
.volume-slider { -webkit-appearance:none; height:3px; background:rgba(255,255,255,0.3); border-radius:2px; outline:none; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance:none; width:10px; height:10px; background:white; border-radius:50%; cursor:pointer; }
.volume-slider::-moz-range-thumb { width:10px; height:10px; background:white; border:none; border-radius:50%; cursor:pointer; }

/* Speed Selector */
#speed-selector { appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:5px 8px; min-width:50px; }

/* Time Display */
.time-display { color:#ccc; font-size:13px; font-weight:500; white-space:nowrap; }

/* Status Row */
.status-row { text-align:center; color:#999; font-size:11px; }

/* MAP MODAL */
.map-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:1000; flex-direction:column; }
.btn-close-map { position:absolute; top:20px; right:20px; background:white; color:black; border:none; width:40px; height:40px; border-radius:50%; font-weight:bold; font-size:18px; cursor:pointer; z-index:1001; }
#map { width:100%; height:100%; }

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }