.audio-trimmer-page {
  --accent-d: var(--accent-strong);
  --accent-dim: var(--accent-soft);
  --accent-glow: color-mix(in srgb, var(--accent) 25%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 30%, var(--header-border));
  --bg: var(--page-bg);
  --surface: var(--panel);
  --surface2: var(--panel-soft);
  --surface3: var(--panel-hover);
  --border: var(--header-border);
  --border2: color-mix(in srgb, var(--text-muted) 35%, var(--header-border));
  --text-bright: var(--text-strong);
  --text-mid: var(--text-soft);
  --text-sub: var(--text-muted);
  --red: #f87171;
  --blue: #60a5fa;
  --yellow: #fbbf24;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: .75rem;
  --wave-fill: color-mix(in srgb, var(--accent) 55%, transparent);
  --wave-fill2: color-mix(in srgb, var(--accent) 25%, transparent);
  --wave-trim: color-mix(in srgb, var(--accent) 18%, transparent);
  --wave-handle: var(--accent);
  --wave-play: var(--yellow);
  --wave-outside: rgba(0,0,0,0.45);
}

.audio-trimmer-page,.audio-trimmer-page *{box-sizing:border-box;}

.at-wrap{
  background:var(--bg);
  min-height:90vh;
  padding:3rem 0 5rem;
  font-family:var(--font-body);
  color:var(--text-bright);
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 2.5%, transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb, var(--accent) 2.5%, transparent) 1px,transparent 1px);
  background-size:40px 40px;
}
.at-inner{max-width:960px;margin:0 auto;padding:0 1.25rem;}

/* ── Header ── */
.at-heading{text-align:center;margin-bottom:2.5rem;}
.at-heading h1{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;letter-spacing:0;line-height:1.1;}
.at-heading h1 span{color:var(--accent);}
.at-heading p{color:var(--text-mid);margin-top:.5rem;font-size:1rem;}

/* ── Card ── */
.at-card{background:var(--surface);border:1px solid var(--border);border-radius:1.25rem;overflow:hidden;box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent),0 24px 60px rgba(0,0,0,.55);}

/* ── Drop Zone ── */
.drop-zone{
  border:3px dashed var(--border2);border-radius:1rem;padding:4rem 2rem;text-align:center;
  cursor:pointer;background:var(--accent-dim);transition:all .3s var(--ease);margin:2rem;
}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 18%, transparent);}
.drop-zone .dz-icon{font-size:3.5rem;margin-bottom:1rem;display:block;}
.drop-zone h3{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:.4rem;}
.drop-zone p{color:var(--text-mid);font-size:.9rem;}
.drop-zone .dz-formats{display:flex;gap:8px;justify-content:center;margin-top:1rem;flex-wrap:wrap;}
.dz-fmt{background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:3px 10px;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--text-sub);font-family:var(--font-mono);}

/* ── Editor ── */
.editor{padding:1.5rem;display:none;}

/* File info bar */
.file-bar{display:flex;gap:16px;flex-wrap:wrap;background:var(--surface2);border:1px solid var(--border);border-radius:.6rem;padding:.75rem 1.1rem;font-size:.82rem;color:var(--text-mid);margin-bottom:1.5rem;align-items:center;}
.file-bar strong{color:var(--text-bright);}
.file-bar .fb-name{font-weight:700;color:var(--accent);font-family:var(--font-mono);font-size:.78rem;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-bar-right{margin-left:auto;}

/* ── Waveform Canvas ── */
.waveform-wrap{position:relative;border-radius:.75rem;overflow:hidden;border:1px solid var(--border);background:#0a0c10;cursor:col-resize;user-select:none;}
.waveform-canvas{display:block;width:100%;height:130px;}
.waveform-overlay{position:absolute;inset:0;pointer-events:none;}

/* playhead */
.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--wave-play);pointer-events:none;z-index:10;box-shadow:0 0 8px rgba(251,191,36,.6);transition:none;}
.playhead::before{content:'▼';position:absolute;top:-2px;left:50%;transform:translateX(-50%);font-size:.6rem;color:var(--wave-play);}

/* Trim handles */
.trim-handle{
  position:absolute;top:0;bottom:0;width:4px;cursor:ew-resize;z-index:20;
  background:var(--wave-handle);
  box-shadow:0 0 12px var(--accent-glow);
  transition:box-shadow .15s;
}
.trim-handle:hover,.trim-handle.dragging{box-shadow:0 0 20px var(--accent-glow),0 0 6px var(--accent);}
.trim-handle::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:14px;height:28px;background:var(--wave-handle);border-radius:3px;
  border:2px solid rgba(0,0,0,.4);
}
.trim-handle::after{
  content:'⋮';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:.7rem;color:rgba(0,0,0,.6);letter-spacing:0;pointer-events:none;
}
#handleStart{border-radius:3px 0 0 3px;}
#handleEnd{border-radius:0 3px 3px 0;}

/* Time markers */
.time-ruler{height:22px;position:relative;background:var(--surface3);border-top:1px solid var(--border);font-family:var(--font-mono);font-size:.62rem;color:var(--text-sub);}
.time-tick{position:absolute;top:4px;transform:translateX(-50%);white-space:nowrap;}

/* ── Timeline info ── */
.trim-info{display:flex;justify-content:space-between;align-items:center;margin:.8rem 0;padding:0 .2rem;}
.ti-block{text-align:center;}
.ti-label{font-size:.68rem;color:var(--text-sub);font-family:var(--font-body);letter-spacing:.06em;text-transform:uppercase;}
.ti-val{font-family:var(--font-mono);font-weight:600;font-size:1.05rem;color:var(--text-bright);}
.ti-val.accent{color:var(--accent);}
.ti-arrow{color:var(--text-sub);font-size:1.2rem;}

/* ── Controls ── */
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:1.4rem;}

.ctrl-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:.65rem 1.3rem;border:none;border-radius:.5rem;
  font-family:var(--font-body);font-size:.9rem;font-weight:700;
  cursor:pointer;transition:all .18s var(--ease);
}
.ctrl-btn:hover{transform:translateY(-2px);}
.ctrl-btn:active{transform:translateY(0) scale(.97);}
.ctrl-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;}

.btn-play{background:var(--accent);color:#0d0f14;box-shadow:0 4px 18px var(--accent-glow);}
.btn-play:hover{background:var(--accent-d);box-shadow:0 6px 24px var(--accent-glow);}
.btn-stop{background:var(--surface3);color:var(--text-bright);border:1.5px solid var(--border2);}
.btn-stop:hover{border-color:var(--text-mid);}
.btn-loop{background:var(--surface3);color:var(--text-mid);border:1.5px solid var(--border2);}
.btn-loop.on{color:var(--accent);border-color:var(--accent-border);background:var(--accent-dim);}
.btn-trim{background:rgba(251,191,36,.12);color:var(--yellow);border:1.5px solid rgba(251,191,36,.3);}
.btn-trim:hover{background:rgba(251,191,36,.2);border-color:var(--yellow);}
.btn-reset{background:rgba(248,113,113,.1);color:var(--red);border:1.5px solid rgba(248,113,113,.25);}
.btn-reset:hover{background:rgba(248,113,113,.2);}
.btn-new{background:var(--surface3);color:var(--text-mid);border:1.5px solid var(--border2);}

/* Volume */
.vol-wrap{display:flex;align-items:center;gap:8px;margin-left:auto;}
.vol-wrap span{font-size:.8rem;color:var(--text-sub);}
.vol-slider{-webkit-appearance:none;appearance:none;width:90px;height:4px;border-radius:4px;background:var(--border2);outline:none;cursor:pointer;}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 6px var(--accent-glow);}

/* ── Options ── */
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.4rem;}
@media(max-width:600px){.options-grid{grid-template-columns:1fr;}}

.opt-card{background:var(--surface2);border:1px solid var(--border);border-radius:.65rem;padding:1rem 1.1rem;}
.opt-title{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-sub);font-family:var(--font-body);margin-bottom:.8rem;}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.6rem;}
.opt-row:last-child{margin-bottom:0;}
.opt-label{font-size:.85rem;color:var(--text-mid);}
.opt-range{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:4px;background:var(--border2);outline:none;cursor:pointer;}
.opt-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;}
.opt-val{font-family:var(--font-mono);font-size:.78rem;color:var(--accent);min-width:30px;text-align:right;}
/* Toggle switch */
.toggle-wrap{display:flex;align-items:center;gap:8px;}
.toggle{position:relative;width:38px;height:20px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:var(--border2);border-radius:20px;cursor:pointer;transition:.2s;}
.toggle-slider::before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:var(--text-sub);border-radius:50%;transition:.2s;}
.toggle input:checked + .toggle-slider{background:var(--accent);}
.toggle input:checked + .toggle-slider::before{transform:translateX(18px);background:#0d0f14;}

/* Format selector */
.fmt-row{display:flex;gap:6px;}
.fmt-opt{flex:1;padding:.4rem .5rem;border:1.5px solid var(--border2);border-radius:6px;font-weight:700;font-size:.78rem;cursor:pointer;background:var(--surface3);color:var(--text-mid);text-align:center;transition:all .18s var(--ease);font-family:var(--font-body);}
.fmt-opt.active{border-color:var(--accent);background:var(--accent-dim);color:var(--accent);}
.fmt-opt:hover:not(.active){border-color:var(--border2);background:var(--surface3);color:var(--text-bright);}

/* ── Export ── */
.export-bar{background:var(--surface2);border:1px solid var(--border);border-radius:.65rem;padding:1.1rem 1.2rem;margin-top:1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.export-info{font-size:.82rem;color:var(--text-mid);}
.export-info strong{color:var(--text-bright);}
.btn-export{background:var(--accent);color:#0d0f14;font-size:1rem;padding:.75rem 1.8rem;border:none;border-radius:.5rem;font-family:var(--font-display);font-weight:700;cursor:pointer;transition:all .2s var(--ease);display:flex;align-items:center;gap:8px;box-shadow:0 4px 20px var(--accent-glow);}
.btn-export:hover{background:var(--accent-d);transform:translateY(-2px);box-shadow:0 6px 28px var(--accent-glow);}
.btn-export:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none;}

/* Progress bar */
.progress-wrap{display:none;width:100%;background:var(--border);border-radius:4px;height:6px;overflow:hidden;margin-top:.5rem;}
.progress-bar{height:100%;background:var(--accent);border-radius:4px;transition:width .2s;width:0%;}

/* Spinner */
.spin{display:inline-block;width:16px;height:16px;border:2.5px solid rgba(13,15,20,.3);border-top-color:#0d0f14;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Light Mode ── */
[data-theme="light"] .audio-trimmer-page{
  --wave-fill: color-mix(in srgb, var(--accent) 70%, transparent);
  --wave-fill2: color-mix(in srgb, var(--accent) 30%, transparent);
  --wave-outside: rgba(220,226,240,0.7);
}
[data-theme="light"] .audio-trimmer-page .at-wrap{background-color:var(--bg);}
[data-theme="light"] .audio-trimmer-page .at-card{box-shadow:0 0 0 1px rgba(0,180,140,0.1),0 12px 40px rgba(0,0,0,.08);}
[data-theme="light"] .audio-trimmer-page .drop-zone{background:rgba(0,180,140,0.07);}
[data-theme="light"] .audio-trimmer-page .drop-zone:hover{background:rgba(0,180,140,0.14);}
[data-theme="light"] .audio-trimmer-page .waveform-wrap{background:#e8ecf5;border-color:var(--border);}
[data-theme="light"] .audio-trimmer-page .btn-stop,[data-theme="light"] .audio-trimmer-page .btn-loop,[data-theme="light"] .audio-trimmer-page .btn-new{background:var(--surface2);color:var(--text-mid);border-color:var(--border2);}
[data-theme="light"] .audio-trimmer-page .btn-loop.on{background:rgba(0,180,140,0.1);}
[data-theme="light"] .audio-trimmer-page .opt-card{background:var(--surface2);border-color:var(--border);}
[data-theme="light"] .audio-trimmer-page .export-bar{background:var(--surface2);border-color:var(--border);}
[data-theme="light"] .audio-trimmer-page .file-bar{background:var(--surface2);border-color:var(--border);}
[data-theme="light"] .audio-trimmer-page .time-ruler{background:var(--surface3);}
[data-theme="light"] .audio-trimmer-page .toggle-slider{background:var(--border2);}

@media(max-width:640px){
  .controls{gap:7px;}
  .ctrl-btn{padding:.55rem .9rem;font-size:.82rem;}
  .vol-wrap{margin-left:0;width:100%;}
}
.audio-trimmer-page .file-input-hidden{display:none;}
.audio-trimmer-page .btn-compact{padding:.35rem .9rem;font-size:.78rem;}
.audio-trimmer-page .playhead{left:0;display:none;}
.audio-trimmer-page .handle-start{left:10%;}
.audio-trimmer-page .handle-end{left:90%;}
.audio-trimmer-page .quality-row{display:none;}
.audio-trimmer-page .normalize-note,.audio-trimmer-page .format-note{font-size:.78rem;color:var(--text-sub);}
.audio-trimmer-page .format-note{line-height:1.4;margin-left:.25rem;}
.upload-progress{margin:1.1rem auto 0;max-width:430px;text-align:left;}
.upload-progress-head{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.45rem;font-size:.78rem;color:var(--text-mid);font-family:var(--font-mono);}
.upload-progress-head strong{color:var(--accent);}
.upload-progress-track{height:7px;border-radius:99px;background:var(--surface2);border:1px solid var(--border2);overflow:hidden;}
.upload-progress-bar{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-d));transition:width .18s var(--ease);}
.fmt-opt.disabled{opacity:.55;cursor:not-allowed;filter:saturate(.7);}
.fmt-opt.disabled span{display:block;font-size:.62rem;font-weight:600;color:var(--text-sub);line-height:1.2;margin-top:1px;}