:root {
      --bg: #020617;
      --bg-card: #020617;
      --accent: #38bdf8;
      --accent-soft: rgba(56,189,248,.12);
      --border: rgba(148,163,184,.45);
      --text: #e5e7eb;
      --muted: #9ca3af;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at top left, rgba(56,189,248,.16) 0, transparent 55%),
        radial-gradient(circle at bottom right, rgba(79,70,229,.25) 0, transparent 60%),
        #020617;
      color: var(--text);
      min-height: 100vh;
    }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }

    .page {
      max-width: 1100px;
      margin: 0 auto;
      padding: 20px 16px 40px;
    }

    header {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin-bottom:12px;
      flex-wrap:wrap;
    }
    .logo {
      font-size:.9rem;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--muted);
    }
    .badge {
      padding:4px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      font-size:.75rem;
      color:var(--muted);
      background:rgba(15,23,42,.9);
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:wrap;
    }
    .badge-dot {
      width:9px;
      height:9px;
      border-radius:999px;
      background:linear-gradient(135deg,#22c55e,#a3e635);
      box-shadow:0 0 0 1px rgba(21,128,61,.7),0 0 10px rgba(34,197,94,.9);
    }

    .license-label,
    .lang-label {
      white-space: nowrap;
    }

    .license-label::after,
    .lang-label::after {
      content: ":";
      margin-left: 4px;
    }


    .lang-select-wrap {
      display:inline-flex;
      align-items:center;
      gap:6px;
      font-size:12px;
      color:var(--muted);
    }
    .lang-select-wrap select {
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.8);
      background:linear-gradient(135deg, rgba(15,23,42,.96), rgba(15,23,42,.98));
      color:#e5e7eb;
      font-size:12px;
      padding:4px 28px 4px 10px;
      cursor:pointer;
      box-shadow:0 6px 16px rgba(15,23,42,.7);
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23e5e7eb' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 8px center;
      background-size:10px 6px;
    }
    .lang-select-wrap select:focus {
      outline:none;
      border-color:rgba(56,189,248,.95);
      box-shadow:0 0 0 1px rgba(56,189,248,.9),0 0 0 4px rgba(56,189,248,.35);
    }
    .lang-select-wrap select option {
      background-color:#020617;
      color:#e5e7eb;
    }
    .lang-select-wrap select option:checked,
    .lang-select-wrap select option:focus {
      background-color:#0ea5e9;
      color:#020617;
    }

    .version-row {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      margin-bottom:4px;
      font-size:.8rem;
      color:var(--muted);
      flex-wrap:wrap;
    }
    .pill {
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:3px 9px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.5);
      font-size:.75rem;
    }

    .grid {
      display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr);
      gap:20px;
    }
    @media (max-width: 900px){
      .grid { grid-template-columns:minmax(0,1fr); }
    }

    .card {
      background: rgba(15,23,42,.96);
      border-radius:18px;
      padding:16px 18px 18px;
      border:1px solid var(--border);
      box-shadow:0 18px 40px rgba(15,23,42,.9);
    }
    h1 {
      margin:0 0 8px;
      font-size: clamp(1.8rem, 3vw + 0.5rem, 2.4rem);
    }
    .subtitle {
      margin:0 0 12px;
      font-size:.95rem;
      color:var(--muted);
    }
    .small {
      font-size:.8rem;
      color:var(--muted);
    }

    .dropzone {
      margin-top:12px;
      border-radius:14px;
      border:1px dashed rgba(148,163,184,.7);
      background:rgba(15,23,42,.85);
      padding:16px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      cursor:pointer;
      transition: border-color .15s, background .15s, transform .1s;
    }
    .dropzone.hover {
      border-color:var(--accent);
      background:rgba(15,23,42,.98);
      transform: translateY(-1px);
    }
    .dropzone-icon {
      width:38px;
      height:38px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.7);
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom:6px;
      font-size:1.2rem;
    }
    .dropzone-title {
      font-size:.95rem;
      margin-bottom:2px;
    }

    .controls {
      margin-top:14px;
      display:grid;
      grid-template-columns: minmax(0,1.1fr) minmax(0,1.1fr);
      gap:10px;
      align-items:flex-end;
    }
    @media (max-width: 700px){
      .controls { grid-template-columns:minmax(0,1fr); }
    }

    label {
      display:block;
      font-size:.8rem;
      color:var(--muted);
      margin-bottom:4px;
    }
    select, input[type="number"] {
      width:100%;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.7);
      background:#020617;
      color:#e5e7eb;
      font-size:.9rem;
    }

    .trim-row {
      margin-top:10px;
      font-size:.8rem;
      color:var(--muted);
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .trim-row label {
      display:flex;
      align-items:center;
      gap:6px;
      margin:0;
    }
    .trim-row input[type="checkbox"] {
      margin:0;
    }

    .btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      padding:9px 18px;
      border-radius:999px;
      border:none;
      font-size:.9rem;
      font-weight:600;
      cursor:pointer;
      background:linear-gradient(135deg,#38bdf8,#4f46e5);
      color:#020617;
      box-shadow:0 10px 25px rgba(56,189,248,.35);
      white-space:nowrap;
    }
    .btn:disabled {
      opacity:.55;
      cursor:not-allowed;
      box-shadow:none;
    }
    .btn-ghost {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      padding:8px 14px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.5);
      background:rgba(15,23,42,.9);
      color:var(--muted);
      font-size:.8rem;
      cursor:pointer;
      white-space:nowrap;
    }

    .controls-buttons {
      display:flex;
      justify-content:flex-end;
      gap:8px;
      flex-wrap:wrap;
    }
    @media (max-width: 700px){
      .controls-buttons {
        justify-content:stretch;
        flex-direction:column;
        align-items:stretch;
      }
      .controls-buttons .btn,
      .controls-buttons .btn-ghost {
        width:100%;
        justify-content:center;
      }
    }

    .status {
      margin-top:10px;
      font-size:.85rem;
      color:var(--muted);
      min-height:1.4em;
    }

    .stats {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
      gap:8px;
      margin-top:12px;
      font-size:.8rem;
    }
    .stat-pill {
      padding:6px 8px;
      border-radius:999px;
      background:rgba(15,23,42,.95);
      border:1px solid rgba(148,163,184,.4);
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .audio-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:14px;
      margin-top:6px;
    }
    .audio-card {
      background:rgba(15,23,42,.96);
      border-radius:14px;
      padding:10px 12px 12px;
      border:1px solid rgba(30,64,175,.7);
      font-size:.8rem;
    }
    .audio-card h2 {
      margin:0 0 4px;
      font-size:.95rem;
    }
    audio {
      width:100%;
      margin-top:4px;
    }
    .gain-info {
      margin-top:4px;
      font-size:.8rem;
      color:var(--muted);
    }
    .download-link a {
      color:var(--accent);
      font-weight:600;
      font-size:.85rem;
    }

    .spectrum {
      margin-top:14px;
    }
    .spectrum h3 {
      margin:0 0 4px;
      font-size:.9rem;
      color:var(--muted);
    }
    #spectrumCanvas {
      width:100%;
      height:140px;
      border-radius:10px;
      border:1px solid rgba(30,64,175,.8);
      background:#020617;
      display:block;
    }

    .footer {
      margin-top:20px;
      font-size:.75rem;
      color:var(--muted);
      display:flex;
      flex-wrap:wrap;
      gap:8px 16px;
      justify-content:space-between;
      border-top:1px solid rgba(15,23,42,.9);
      padding-top:10px;
    }

    .paypal-card {
      margin-top:10px;
      padding:16px;
      border-radius:18px;
      border:1px solid rgba(15,23,42,.2);
      background:#f8fafc;
      color:#111827;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
    }
    .paypal-card-title {
      font-size:.85rem;
      color:#0f172a;
      margin-bottom:8px;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .paypal-card p {
      margin:0 0 10px;
      font-size:.82rem;
      line-height:1.45;
    }
    .paypal-card strong {
      color:#0b1120;
    }
    .paypal-button-shell {
      padding:12px;
      border-radius:14px;
      background:#fff;
      border:1px solid #e2e8f0;
      margin-bottom:10px;
    }
    #paypal-button-container {
      max-width:420px;
      margin:0 auto;
    }
    .paypal-hint,
    .paypal-cookie {
      font-size:.78rem;
      color:#1f2937;
      margin-bottom:6px;
    }
    .paypal-legal {
      font-size:.78rem;
      color:#4b5563;
    }
    @media (max-width: 640px) {
      .paypal-card {
        padding:14px;
      }
      .paypal-button-shell {
        padding:10px;
      }
    }
    .demo-hint {
      font-size:.75rem;
      color:#fbbf24;
      margin-top:4px;
    }