*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    --bg:#0a0a0a;
    --surface:#111;
    --surface-alt:#1a1a1a;
    --border:#222;
    --text:#c8c8c8;
    --text-dim:#666;
    --green:#00ff88;
    --amber:#ffaa00;
    --red:#ff4444;
    --blue:#44aaff;
    --font-mono:'Courier New',Consolas,monospace;
}

html{font-size:14px}
body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-mono);
    line-height:1.6;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}

/* TOP BAR */
.top-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 24px;
    background:#0d0d0d;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:100;
}
.top-bar-left{display:flex;align-items:center;gap:16px}
.top-bar-right{display:flex;align-items:center;gap:20px}
.logo{font-size:1.2rem;font-weight:bold;color:var(--green);letter-spacing:2px}
.status-badge{
    font-size:0.7rem;
    padding:2px 8px;
    border-radius:3px;
    background:#003322;
    color:var(--green);
    border:1px solid #00ff8844;
}
.status-badge.live{animation:pulse 2s infinite}
.clock{color:var(--amber);font-size:0.9rem;letter-spacing:1px}
.admin-link{
    font-size:0.75rem;
    color:var(--text-dim);
    border:1px solid var(--border);
    padding:3px 10px;
    border-radius:3px;
}
.admin-link:hover{color:var(--text);border-color:var(--text-dim);text-decoration:none}

/* BOTTOM BAR */
.bottom-bar{
    margin-top:auto;
    padding:10px 24px;
    border-top:1px solid var(--border);
    font-size:0.65rem;
    color:var(--text-dim);
    text-align:center;
    letter-spacing:1px;
}

/* CONTAINER */
.container{
    max-width:1400px;
    margin:0 auto;
    padding:12px;
    width:100%;
}

/* SECTIONS */
.section{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:6px;
    padding:20px 24px;
    margin-bottom:24px;
}
.section-title{
    font-size:0.85rem;
    letter-spacing:3px;
    color:var(--green);
    margin-bottom:16px;
    padding-bottom:8px;
    border-bottom:1px solid var(--border);
}
.section-note{
    font-size:0.75rem;
    color:var(--text-dim);
    margin-bottom:16px;
}

/* INCIDENT BUTTONS */
.incident-buttons{display:flex;gap:16px;flex-wrap:wrap}
.report-btn{
    flex:1;
    min-width:200px;
    background:var(--surface-alt);
    border:2px solid var(--btn-color,#444);
    border-radius:8px;
    padding:20px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    transition:all 0.15s;
    color:var(--text);
    font-family:var(--font-mono);
}
.report-btn:hover{
    background:color-mix(in srgb,var(--btn-color) 15%,var(--surface-alt));
    border-color:var(--btn-color);
    transform:translateY(-2px);
    box-shadow:0 4px 20px color-mix(in srgb,var(--btn-color) 25%,transparent);
}
.report-btn:active{transform:translateY(0);opacity:0.8}
.report-btn-icon{font-size:2rem}
.report-btn-label{font-size:0.8rem;letter-spacing:2px;font-weight:bold}
.report-btn-sub{font-size:0.65rem;color:var(--text-dim)}

.incident-feedback{
    margin-top:12px;
    font-size:0.8rem;
    color:var(--green);
    min-height:1.5em;
    transition:all 0.3s;
}
.incident-feedback.error{color:var(--red)}

/* CHART */
.chart-container{
    position:relative;
    height:250px;
}

/* STATS GRID */
.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:16px;
}
.stat-card{
    background:var(--surface-alt);
    border:1px solid var(--border);
    border-radius:6px;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.stat-card.wide{grid-column:span 2}
.stat-value{font-size:1.8rem;font-weight:bold;color:var(--green)}
.smoking-section .stat-value{color:var(--red)}
.drilling-section .stat-value{color:var(--amber)}
.music-section .stat-value{color:var(--blue)}
.stat-label{font-size:0.65rem;letter-spacing:2px;color:var(--text-dim)}
.stat-detail{font-size:0.7rem;color:var(--text-dim);margin-top:4px}

/* PROGRESS BAR */
.volume-progress{margin-top:8px}
.progress-track{
    height:6px;
    background:var(--border);
    border-radius:3px;
    overflow:hidden;
}
.progress-fill{
    height:100%;
    border-radius:3px;
    transition:width 0.5s ease;
}

/* EVENTS FEED */
.events-feed{display:flex;flex-direction:column;gap:4px}
.event-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 12px;
    background:var(--surface-alt);
    border-left:3px solid var(--border);
    border-radius:0 4px 4px 0;
    font-size:0.8rem;
}
.event-icon{font-size:1.1rem}
.event-detail{flex:1;color:var(--text)}
.event-time{color:var(--text-dim);font-size:0.7rem}
.event-duration{color:var(--text-dim);font-size:0.7rem;min-width:40px;text-align:right}
.no-events{
    padding:20px;
    text-align:center;
    color:var(--text-dim);
    font-size:0.8rem;
    letter-spacing:2px;
}

/* DASHBOARD LAYOUT */
.dashboard-layout{
    display:grid;
    grid-template-columns:1fr 280px;
    gap:20px;
    align-items:start;
}
.dashboard-sidebar{
    position:sticky;
    top:20px;
}
.assumption-row{
    padding:8px 0;
    border-bottom:1px solid #1a1a1a;
    font-size:0.75rem;
}
.assumption-value{
    color:var(--text);
    font-weight:bold;
    margin-bottom:2px;
}
.assumption-desc{
    color:var(--text-dim);
    font-size:0.7rem;
    margin-bottom:2px;
}
.assumption-source{
    color:var(--green);
    font-size:0.65rem;
    text-decoration:none;
    font-style:italic;
}
.assumption-source:hover{
    text-decoration:underline;
}

/* ANIMATIONS */
@keyframes pulse{
    0%,100%{opacity:1}
    50%{opacity:0.5}
}

/* LIFETIME TOGGLE */
.lifetime-toggle-container{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.lifetime-unit-toggle{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-top:4px;
}
.unit-btn{
    padding:4px 10px;
    border:1px solid var(--border);
    border-radius:4px;
    background:var(--surface-alt);
    color:var(--text-dim);
    cursor:pointer;
    font-family:var(--font-mono);
    font-size:0.65rem;
    letter-spacing:1px;
    transition:all 0.15s;
}
.unit-btn:hover{
    border-color:var(--red);
    color:var(--red);
}
.unit-btn.active{
    border-color:var(--red);
    color:var(--red);
    background:#1a0000;
}

/* RESPONSIVE */
@media(max-width:768px){
    .container{padding:12px}
    .section{padding:14px 16px}
    .stat-card.wide{grid-column:span 1}
    .incident-buttons{flex-direction:column}
    .report-btn{min-width:100%}
    .stats-grid{grid-template-columns:1fr 1fr}
    .stat-value{font-size:1.3rem}
}
@media(max-width:480px){
    .stats-grid{grid-template-columns:1fr}
    .top-bar{padding:10px 14px}
    .logo{font-size:1rem}
}

/* SCANLINE OVERLAY */
body::after{
    content:'';
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    pointer-events:none;
    z-index:9999;
    background:repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
    );
}