.tone-tool {
      width: 100%;
      max-width: 800px;
      min-height: 600px;
      margin: 40px auto !important;
      padding: 22px;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 18px;
      box-shadow: 0 8px 30px rgba(15, 23, 42, 0.10);
    }

    .tool-header {
      text-align: center;
      margin-bottom: 20px;
    }

    .tool-header h1 {
      font-size: 32px;
      font-weight: 750;
      margin-bottom: 7px !important;
      color: #171923;
    }

    .tool-header p {
      color: #737987;
      font-size: 14px;
      margin-top:10px !important;
    }

    .tone-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .tone-card {
      background: #fff;
      border: 1px solid #e8eaf0;
      border-radius: 14px;
      padding: 17px;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.045);
      min-width: 0;
    }

    .section-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 16px;
      color: #202431;
    }

    .frequency-display {
      padding: 17px 8px;
      border-radius: 12px;
      background: #f5f6f8;
      border: 1px solid #e8eaf0;
      text-align: center;
      margin-bottom: 19px;
    }

    .frequency-display .number {
      font-size: 35px;
      font-weight: 750;
      line-height: 1.2;
      color: #16181d;
      overflow-wrap: anywhere;
    }

    .frequency-display .unit {
      font-size: 13px;
      color: #777d89;
      margin-top: 5px;
    }

    .form-label {
      font-size: 13px;
      font-weight: 650;
      margin-bottom: 8px;
    }

    .form-control,
    .form-select {
      min-height: 40px;
      border-color: #dfe3e9;
      border-radius: 8px;
      font-size: 14px;
      box-shadow: none !important;
    }

    .form-control:focus,
    .form-select:focus {
      border-color: #737373;
    }

    .form-range {
      cursor: pointer;
      accent-color: #252525;
    }

    .range-labels {
      display: flex;
      justify-content: space-between;
      color: #858b98;
      font-size: 11px;
      margin-top: -5px;
    }

    .btn-black {
      color: #fff;
      background: linear-gradient(135deg, #353535, #050505);
      border: 1px solid #222;
      border-radius: 9px;
      font-weight: 650;
      padding: 10px 12px;
      box-shadow: 0 4px 9px rgba(0, 0, 0, 0.13);
      transition: transform 0.15s, box-shadow 0.15s;
    }

    .btn-black:hover:not(:disabled),
    .btn-black:focus-visible {
      color: #fff;
      background: linear-gradient(135deg, #202020, #000);
      transform: translateY(-1px);
      box-shadow: 0 6px 13px rgba(0, 0, 0, 0.18);
    }

    .btn-black:disabled {
      color: #fff;
      opacity: 0.5;
      cursor: not-allowed;
    }

    .btn-outline-dark {
      border-radius: 8px;
      font-size: 12px;
      padding: 7px 8px;
    }

    .btn-outline-dark.active {
      background: #242424;
      color: #fff;
    }

    .play-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 18px;
    }

    .play-row button {
      font-size: 13px;
    }

    .status-box {
      display: flex;
      align-items: center;
      gap: 9px;
      background: #f7f8fa;
      border: 1px solid #e8eaf0;
      border-radius: 9px;
      padding: 11px;
      margin-top: 14px;
      font-size: 12px;
      color: #666d7a;
    }

    .status-dot {
      width: 9px;
      height: 9px;
      background: #9298a3;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .status-dot.playing {
      background: #16a34a;
      box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
    }

    .wave-preview {
      height: 92px;
      background: #11151d;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 17px;
    }

    #waveCanvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    .volume-value {
      font-size: 12px;
      color: #717785;
      font-weight: 600;
    }

    .preset-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .preset-btn {
      width: 100%;
      min-height: 42px;
      white-space: normal;
    }

    .preset-btn small {
      font-size: 11px;
    }

    .preset-note {
      font-size: 12px;
      line-height: 1.5;
      color: #858b98;
      margin-top: 12px;
      margin-bottom: 0;
    }

    .footer-note {
      text-align: center;
      color: #858b98;
      font-size: 12px;
      margin-top: 19px;
      margin-bottom: 0;
    }

    @media (max-width: 600px) {
      body {
        padding: 12px 8px;
      }

      .tone-tool {
        padding: 15px;
        border-radius: 13px;
      }

      .tone-grid {
        grid-template-columns: 1fr;
        gap: 13px;
      }

      .tool-header h2 {
        font-size: 23px;
      }

      .frequency-display .number {
        font-size: 32px;
      }

      .tone-card {
        padding: 15px;
      }
    }