/* dB Scope Design System */
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('../fonts/Inter-Regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('../fonts/Inter-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('../fonts/Inter-Bold.woff2') format('woff2')}
@font-face{font-family:'Orbitron';font-weight:400;font-display:swap;src:url('../fonts/Orbitron-Regular.ttf') format('truetype')}
@font-face{font-family:'Orbitron';font-weight:700;font-display:swap;src:url('../fonts/Orbitron-Bold.ttf') format('truetype')}

:root{
  --bg:#050508;--bg2:#0a0a0f;--card:rgba(15,15,25,0.7);--card-border:rgba(255,255,255,0.04);
  --text:#f0f0f5;--text-dim:#8a8a9e;--text-muted:#50506a;
  --accent:#00e5ff;--accent2:#b300ff;--accent3:#ff9100;--danger:#ff2a4b;--success:#00ff88;
  --glow:0 0 30px rgba(0,229,255,0.15);--card-blur:24px;
  --min-color:#0ea5e9;--max-color:#f97316;--peak-color:#ef4444;--freq-color:#a855f7;
}
html.light{
  --bg:#f8f8fa;--bg2:#eeeef5;--card:rgba(255,255,255,0.8);--card-border:rgba(0,0,0,0.06);
  --text:#11111a;--text-dim:#666;--text-muted:#888;
  --accent:#00b0ff;--accent2:#8e24aa;--accent3:#f57c00;--danger:#d50000;--success:#00c853;
  --glow:0 0 20px rgba(0,176,255,0.1);
  --min-color:#0284c7;--max-color:#ea580c;--peak-color:#dc2626;--freq-color:#9333ea;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);
  min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-bottom:80px}
.digital{font-family:'Orbitron',monospace}

/* Layout */
.app{width:100%;max-width:1400px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}
.landscape-only { display: none; }
.landscape-flex-container { display: flex; flex-direction: column; gap: 16px; }

@media (min-width: 600px) and (orientation: landscape) {
    .landscape-only { display: flex; }
    .card.landscape-only { display: flex; flex-direction: column; }
    .metrics.landscape-only { display: grid; }
    
    #meter-ui { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: stretch; }
    .landscape-flex-container { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 16px; height: calc(100vh - 120px); }
    
    .landscape-flex-container > .card-compact { grid-column: 1 / -1; grid-row: 1; }
    .landscape-flex-container > .card:nth-of-type(2) { grid-column: 1; grid-row: 2; height: 100%; }
    .landscape-flex-container > .card:nth-of-type(3) { grid-column: 2; grid-row: 2; height: 100%; }
    
    .rta-container, .chart-wrap { flex: 1; height: 100%; min-height: 150px; }
    #db-value { font-size: 3.5rem !important; }
}
.header{display:flex;align-items:center;justify-content:space-between;padding:4px}
.header h1{font-family:'Orbitron',sans-serif;font-size:1.4rem;background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:right;}
.header small{font-size:0.7rem;color:var(--text-dim);display:block;font-family:'Inter',sans-serif;
  -webkit-text-fill-color:var(--text-muted);letter-spacing:0.1em;text-transform:uppercase;}

/* Start Overlay */
.start-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; transition: opacity 0.5s ease-out; }
.start-overlay.fade-out { opacity: 0; pointer-events: none; }
.start-overlay-content { text-align: center; animation: float 6s ease-in-out infinite; }
.start-logo { font-family: 'Orbitron', sans-serif; font-size: 5rem; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 20px rgba(0,229,255,0.4)); }
.start-text { margin-top: 24px; font-size: 1.1rem; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; animation: pulse 2s infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Cards */
.card{background:var(--card);border:1px solid var(--card-border);border-radius:24px;
  padding:20px;backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));
  box-shadow:var(--glow); position: relative; overflow: hidden;}
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); }
.card-compact{padding:16px}

/* Tabs */
.tabs{display:flex;background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:3px;gap:3px}
.tab{flex:1;padding:8px;border:none;border-radius:10px;background:transparent;color:var(--text-dim);
  font-family:'Inter',sans-serif;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.2s}
.tab.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  box-shadow:0 2px 12px rgba(0,229,255,0.3)}

/* Hero dB Display */
.hero{text-align:center;position:relative;padding:24px 16px; display:flex; flex-direction:column; justify-content:center;}
.hero-value{font-size:5rem;font-weight:700;line-height:1;transition:color 0.3s;text-shadow:0 4px 20px rgba(0,0,0,0.8),0 0 30px currentColor; letter-spacing: -0.02em;}
.hero-unit{font-size:1rem;color:var(--text-dim);margin-top:4px}
.hero-flanks{display:flex;justify-content:space-between;margin-top:20px;gap:12px; align-items:flex-end;}
.hero-flank{text-align:center; flex:1;}
.hero-flank-label{font-size:0.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.1em; margin-bottom:4px;}
.hero-flank-value{font-size:1.6rem; font-variant-numeric: tabular-nums;}
.weighting-badge{position:absolute;top:16px;right:16px;font-size:0.75rem;color:var(--text-dim);
  background:rgba(255,255,255,0.05);padding:2px 8px;border-radius:6px}

/* Metrics Grid */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:0.8rem}
.metric{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--card-border)}
.metric-label{color:var(--text-dim)}
.metric-value{font-weight:700;font-size:1.1rem}

/* Segmented LED Meter */
.led-meter-wrap{position:relative;padding:4px 0}
.led-meter{display:flex;gap:2px;height:16px;background:rgba(0,0,0,0.5);padding:3px;border-radius:6px;box-shadow:inset 0 2px 6px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.05)}
.led-seg{flex:1;border-radius:3px;opacity:0.2;transition:opacity 0.1s,box-shadow 0.1s;background-image:linear-gradient(to bottom,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,0.4) 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,0.3),inset 0 -1px 1px rgba(0,0,0,0.5)}
.led-seg.on{opacity:1;box-shadow:inset 0 1px 2px rgba(255,255,255,0.6),inset 0 -1px 2px rgba(0,0,0,0.6),0 0 8px currentColor,0 0 16px currentColor}
.led-seg.glow{box-shadow:inset 0 1px 2px rgba(255,255,255,0.6),inset 0 -1px 2px rgba(0,0,0,0.6),0 0 16px currentColor,0 0 32px currentColor}
.avg-highlight{position:absolute;top:-1px;bottom:-1px;border:2px solid var(--accent3);
  box-shadow:0 0 8px var(--accent3);border-radius:3px;transition:left 0.3s;pointer-events:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;
  border:none;border-radius:10px;font-family:'Inter',sans-serif;font-size:0.85rem;font-weight:600;
  cursor:pointer;transition:all 0.15s;color:#fff;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(0.95)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.btn-danger{background:var(--danger)}
.btn-ghost{background:rgba(255,255,255,0.08);color:var(--text)}
.btn-sm{padding:6px 12px;font-size:0.75rem;border-radius:8px}
.btn-icon{width:40px;height:40px;padding:0;border-radius:10px}
.btn-toggle{background:rgba(255,255,255,0.06);color:var(--text-dim);padding:6px 12px;
  border:none;border-radius:8px;font-size:0.75rem;font-weight:600;cursor:pointer;transition:all 0.2s;
  font-family:'Inter',sans-serif}
.btn-toggle.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}

/* Floating Bottom Bar */
.bottom-bar{position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:rgba(5,5,8,0.85);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border-top:1px solid var(--card-border);padding:12px 24px;padding-bottom:max(12px,env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;}
html.light .bottom-bar{background:rgba(248,248,250,0.85)}

.pulse-indicator { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 10px var(--danger); animation: recordPulse 2s infinite; opacity: 0; transition: opacity 0.3s; }
.pulse-indicator.active { opacity: 1; }
@keyframes recordPulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 42, 75, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 42, 75, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 42, 75, 0); } }

/* Gauge */
.gauge-wrap{position:relative;width:100%;max-width:320px;margin:0 auto;aspect-ratio:1.2}
.gauge-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gauge-track,.gauge-value,.gauge-leq-track,.gauge-leq-value{fill:none;stroke-linecap:round}
.gauge-track,.gauge-value{stroke-width:10}
.gauge-leq-track,.gauge-leq-value{stroke-width:6}
.gauge-track{stroke:rgba(0,0,0,0.5);filter:drop-shadow(0 2px 2px rgba(255,255,255,0.05)) inset}
.gauge-value{transition:stroke-dashoffset 0.2s cubic-bezier(0.4, 0, 0.2, 1);stroke:url(#gauge-gradient);filter:drop-shadow(0 0 8px rgba(0,229,255,0.4))}
.gauge-leq-track{stroke:rgba(0,0,0,0.3);filter:drop-shadow(0 2px 2px rgba(255,255,255,0.02)) inset}
.gauge-leq-value{transition:stroke-dashoffset 0.5s ease-out;stroke:var(--accent3);filter:drop-shadow(0 0 6px rgba(255,171,0,0.6))}
.gauge-needle{transition:transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:60px 55px;stroke-linecap:round;filter:url(#needle-glow)}
.gauge-label-text{font-size:10px;font-family:'Inter',sans-serif;fill:var(--text-muted);text-anchor:middle}
.gauge-marker{transition:transform 0.3s;fill:none;stroke-width:2.5;stroke-linecap:round}
.gauge-marker-label{font-size:9px;font-family:'Inter',sans-serif;text-anchor:middle;font-weight:700;
  transition:transform 0.3s;opacity:0.8}

/* Section Headers */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-title{font-size:0.9rem;font-weight:700}
.section-actions{display:flex;gap:4px;align-items:center}

/* RTA Canvas */
.rta-container{position:relative;cursor:pointer;border-radius:10px;overflow:hidden}
.rta-canvas{width:100%;height:180px;background:rgba(0,0,0,0.3);display:block;border-radius:10px}

/* Chart */
.chart-wrap{position:relative;height:180px}
.chart-wrap canvas{width:100%!important;height:100%!important}

/* Signal Generator */
.gen-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gen-grid .btn{font-size:0.8rem}
.gen-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.gen-slider-wrap{display:flex;flex-direction:column;gap:4px}
.gen-slider-wrap label{font-size:0.8rem;color:var(--text-dim)}
.gen-slider-wrap label strong{color:var(--text)}

/* Session Controls */
.session-bar{display:flex;align-items:center;gap:8px;padding:8px 0}
.session-timer{font-size:1.1rem;color:var(--accent);min-width:60px}
.session-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:0.75rem;text-align:center}
.session-stat-label{color:var(--text-muted);font-size:0.65rem;text-transform:uppercase}
.session-stat-value{font-size:1rem;font-weight:700;color:var(--accent)}

/* Sound Level Text */
.sound-level{text-align:center;font-size:0.85rem;font-weight:600;min-height:1.4em;margin-top:4px}

/* Range Inputs */
input[type=range]{-webkit-appearance:none;width:100%;background:transparent;margin:8px 0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:rgba(255,255,255,0.1)}
html.light input[type=range]::-webkit-slider-runnable-track{background:rgba(0,0,0,0.1)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;
  border-radius:50%;background:var(--accent);margin-top:-9px;cursor:pointer;
  box-shadow:0 0 10px rgba(0,229,255,0.3)}
input[type=range]:focus{outline:none}

/* Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}
.modal-overlay.hidden{display:none!important}
.modal-box{background:var(--bg2);border:1px solid var(--card-border);border-radius:16px;
  padding:20px;width:100%;max-width:380px}
.modal-box h2{font-size:1.1rem;font-weight:700;margin-bottom:12px}
.modal-box input[type=text],.modal-box select{width:100%;padding:10px 12px;border-radius:8px;
  border:1px solid var(--card-border);background:rgba(255,255,255,0.05);color:var(--text);
  font-family:'Inter',sans-serif;font-size:0.9rem}
html.light .modal-box input[type=text],html.light .modal-box select{background:rgba(0,0,0,0.03)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* Fullscreen Modal */
.fs-modal{position:fixed;inset:0;z-index:100;background:rgba(6,6,12,0.97);
  backdrop-filter:blur(8px);display:flex;flex-direction:column;padding:12px}
.fs-modal.hidden{display:none!important}
.fs-modal-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;flex-shrink:0}
.fs-modal-body{flex:1;min-height:0;position:relative}
.fs-modal-body canvas{width:100%;height:100%}
.fs-modal-foot{flex-shrink:0;display:flex;justify-content:space-around;text-align:center;
  font-size:0.75rem;padding-top:8px}
.close-btn{width:36px;height:36px;border:none;border-radius:50%;background:rgba(255,255,255,0.1);
  color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}

/* Rotation Cue */
.rotation-cue{display:none;flex-direction:column;align-items:center;justify-content:center;
  position:absolute;inset:0;z-index:120;background:rgba(0,0,0,0.8);color:#fff;text-align:center}
.rotation-cue.visible{display:flex}
.rotation-cue svg{animation:rot 1.5s ease-in-out infinite}
@keyframes rot{0%{transform:rotate(0)}50%,100%{transform:rotate(90deg)}}

/* Settings */
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;
  border-bottom:1px solid var(--card-border)}
.setting-row:last-child{border-bottom:none}
.setting-label{font-size:0.85rem;font-weight:600}
.setting-hint{font-size:0.7rem;color:var(--text-muted);margin-top:2px}
.setting-row select{padding:8px;border-radius:8px;border:1px solid var(--card-border);
  background:rgba(255,255,255,0.05);color:var(--text);font-family:'Inter',sans-serif}
html.light .setting-row select{background:rgba(0,0,0,0.03)}

/* Markers */
.marker-item{padding:10px 0;border-bottom:1px solid var(--card-border)}
.marker-top{display:flex;justify-content:space-between;align-items:flex-start}
.marker-name{font-weight:700;font-size:0.9rem}
.marker-desc{font-size:0.75rem;color:var(--text-dim);margin-top:2px}
.marker-stats{font-size:0.7rem;color:var(--text-muted);margin-top:4px}
.marker-value{text-align:right;flex-shrink:0}
.marker-db{font-size:1.1rem;font-weight:700}
.marker-time{font-size:0.65rem;color:var(--text-muted)}
.delete-marker-btn{background:none;border:none;color:var(--danger);cursor:pointer;padding:4px;opacity:0.7}
.delete-marker-btn:hover{opacity:1}

/* Sound Reference */
.ref-item{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;
  margin:1px 0;border-radius:6px;transition:background 0.3s,color 0.3s;font-size:0.8rem}
.ref-item.highlight{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.ref-item.highlight .ref-db{color:#fff!important}
.ref-db{color:var(--text-dim);font-weight:600}
.ref-color{width:12px;height:12px;border-radius:3px;flex-shrink:0;margin-left:6px}

/* Tuner */
.tuner-display{text-align:center;padding:20px;background:rgba(0,0,0,0.2);border-radius:12px}
.tuner-note{font-size:3rem;font-weight:700;transition:color 0.2s}
.tuner-deviation{font-size:0.95rem;color:var(--text-dim);margin-top:4px}
.tuner-deviation.in-tune{color:var(--success)!important;font-weight:700}
.tuner-bar-wrap{height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden;
  position:relative;margin-top:12px}
.tuner-needle{position:absolute;top:0;height:100%;width:3px;background:var(--danger);
  transition:left 0.1s,background-color 0.2s}
.tuner-center{position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;
  height:100%;background:var(--success);opacity:0.4}
.tuner-scale{display:flex;justify-content:space-between;font-size:0.65rem;color:var(--text-muted);
  margin-top:4px;padding:0 4px}
.tuner-target-graph{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:12px}
.tuner-bar{height:8px;border-radius:4px;width:0%;transition:width 0.1s}
.tuner-bar-flat{background:var(--danger);justify-self:end}
.tuner-bar-sharp{background:var(--danger)}
.tuner-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.tuner-controls select{width:100%;padding:10px;border-radius:8px;border:1px solid var(--card-border);
  background:rgba(255,255,255,0.05);color:var(--text);font-family:'Inter',sans-serif}
html.light .tuner-controls select{background:rgba(0,0,0,0.03)}

/* Instrument Visualizer */
.instrument-vis{position:relative;aspect-ratio:9/16;width:100%;max-width:220px;margin:12px auto}
.instrument-hotspot{position:absolute;cursor:pointer;border-radius:8px;transition:all 0.2s;
  display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none}
.instrument-hotspot:hover{background:rgba(255,171,0,0.3)}
.instrument-hotspot.active{background:rgba(255,171,0,0.15);border:2px solid var(--accent3);
  box-shadow:0 0 12px var(--accent3)}

/* Status Banner */
.status-banner{text-align:center;font-size:0.8rem;padding:8px;border-radius:10px;display:none}
.status-banner.show{display:block}
.status-banner.error{background:rgba(255,61,90,0.15);color:var(--danger)}
.status-banner.info{background:rgba(0,229,255,0.1);color:var(--accent)}

/* Collapsible */
.collapsible-head{cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px}
.collapsible-head::before{content:'▸';font-size:0.7rem;transition:transform 0.2s;color:var(--text-muted)}
.collapsible-head.open::before{transform:rotate(90deg)}
.collapsible-body{display:none;padding-top:8px}
.collapsible-body.open{display:block}

/* Utility Classes */
.hidden{display:none!important}
.flex-center{display:flex;align-items:center;justify-content:center}
.text-accent{color:var(--accent)}
.text-dim{color:var(--text-dim)}
.text-muted{color:var(--text-muted)}
.text-danger{color:var(--danger)}
.text-success{color:var(--success)}
.gap-sm{gap:4px}.gap-md{gap:8px}
.mt-sm{margin-top:4px}.mt-md{margin-top:8px}

/* Color utilities for dB levels */
.db-safe{color:#00e5ff}.db-moderate{color:#2dd4bf}.db-loud{color:#34d399}
.db-very-loud{color:#f59e0b}.db-warning{color:#fb923c}.db-danger{color:#ff3d5a}

/* Animations */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
.recording .session-timer{animation:pulse 1.5s ease-in-out infinite}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card{animation:fadeIn 0.3s ease-out}

/* Side Menu */
.side-menu-overlay { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.6); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity 0.3s; }
.side-menu-overlay.open { opacity:1; pointer-events:auto; }
.side-menu { position:fixed; top:0; left:0; bottom:0; width:85%; max-width:360px; z-index:210; background:var(--bg2); border-right:1px solid var(--card-border); transform:translateX(-100%); transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); display:flex; flex-direction:column; box-shadow:8px 0 24px rgba(0,0,0,0.5); }
.side-menu.open { transform:translateX(0); }
.side-menu-head { padding:20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--card-border); flex-shrink:0; }
.side-menu-head h2 { margin:0; font-family:'Orbitron', sans-serif; font-size:1.1rem; }
.side-menu-body { padding:20px; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:20px; -ms-overflow-style: none; scrollbar-width: none; }
.side-menu-body::-webkit-scrollbar { display: none; }