/* Noise Meter Styles */
.meter-display { text-align: center; margin-bottom: var(--space-8); }
.db-circle {
  width: 200px; height: 200px; border-radius: 50%; margin: 0 auto var(--space-4);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--color-surface); border: 4px solid var(--color-border);
  transition: all 0.3s ease; position: relative;
}
.db-circle.safe { border-color: var(--color-success); box-shadow: 0 0 30px rgba(0,184,148,0.3); }
.db-circle.moderate { border-color: var(--color-warning); box-shadow: 0 0 30px rgba(253,203,110,0.3); }
.db-circle.loud { border-color: var(--color-error); box-shadow: 0 0 30px rgba(225,112,85,0.3); }
.db-circle.danger { border-color: #d63031; box-shadow: 0 0 40px rgba(214,48,49,0.4); animation: pulse 0.5s infinite; }
.db-value { font-size: var(--text-5xl); font-weight: 800; font-family: var(--font-mono); }
.db-unit { font-size: var(--text-sm); color: var(--color-text-muted); }
.db-label { font-size: var(--text-lg); color: var(--color-text-secondary); }

.meter-bar-wrap { max-width: 500px; margin: 0 auto; }
.meter-bar { height: 12px; background: var(--color-surface); border-radius: var(--radius-full); overflow: hidden; }
.meter-fill { height: 100%; border-radius: var(--radius-full); width: 0%; transition: width 0.1s; background: linear-gradient(90deg, #00b894, #fdcb6e 50%, #e17055 75%, #d63031); }
.meter-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--text-xs); color: var(--color-text-muted); }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.stat-card { text-align: center; padding: var(--space-4); }
.stat-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; margin-bottom: var(--space-2); letter-spacing: 0.1em; }
.stat-value { font-size: var(--text-xl); font-weight: 700; font-family: var(--font-mono); }

.guide-row { display: flex; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.guide-row:last-child { border: none; }
.guide-level { font-weight: 700; font-family: var(--font-mono); min-width: 80px; font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-sm); text-align: center; }
.guide-level.safe { background: rgba(0,184,148,0.2); color: var(--color-success); }
.guide-level.moderate { background: rgba(253,203,110,0.2); color: var(--color-warning); }
.guide-level.loud { background: rgba(225,112,85,0.2); color: var(--color-error); }
.guide-level.danger { background: rgba(214,48,49,0.2); color: #d63031; }

@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .db-circle { width: 160px; height: 160px; } .db-value { font-size: var(--text-4xl); } }