* {
      box-sizing: border-box;
      font-family: system-ui, sans-serif;
      margin: 0;
      padding: 0;
    }

    body {
      padding: 0;

      background: #121212;
      color: #fff;
      /* padding: 2rem; */
      /* max-width: 450px; */
      margin: 0 auto;
      min-height: 100vh;
      transition: background 0.3s ease;
    }

    h2 {
      text-align: center;
      margin-bottom: 2rem;
      font-size: 1.8rem;
    }

    /* 分贝数字容器：放大震动特效 */
    .db-wrap {
      text-align: center;
      margin: 2rem 0;
      transition: transform 0.1s ease;
    }

    .db-wrap.shake {
      transform: scale(1.08);
    }

    #dbValue {
      font-size: 4rem;
      font-weight: bold;
      margin: 1rem 0;
      transition: color 0.3s ease;
      text-shadow: 0 0 10px currentColor;
    }

    #tipText {
      font-size: 1.2rem;
      margin-bottom: 1rem;
      opacity: 0.9;
    }

    /* 进度条增强渐变 */
    .bar {
      width: 100%;
      height: 36px;
      background: #222;
      border-radius: 18px;
      overflow: hidden;
      margin: 1.5rem 0;
      border: 2px solid #333;
    }

    .bar-fill {
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, #00ff44, #ffdd00, #ff2222);
      transition: width 0.18s ease;
    }

    /* 呼吸提示灯 */
    .light {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin: 0 auto 1rem;
      animation: breath 2s infinite ease-in-out;
      background: #00ff44;
      opacity: 0.6;
    }

    @keyframes breath {

      0%,
      100% {
        transform: scale(0.8);
        opacity: 0.4;
      }

      50% {
        transform: scale(1.2);
        opacity: 1;
      }
    }

    /* 超标闪烁 */
    @keyframes flash {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.3;
      }
    }

    .flash-red {
      animation: flash 0.3s infinite !important;
    }

    .note {
      margin-top: 1.5rem;
      color: #888;
      font-size: 0.9rem;
      text-align: center;
    }