.trimmer-editor { overflow: visible; }
.trimmer-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:4px 0 14px; }
.trimmer-summary>div { display:grid; gap:3px; padding:12px 14px; border:1px solid #dfe5ef; border-radius:12px; background:#f8fafc; }
.trimmer-summary span,.trimmer-timecodes label>span { color:#64748b; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.trimmer-summary strong { color:#172033; font-size:16px; font-variant-numeric:tabular-nums; }
.trimmer-timeline { position:relative; min-height:224px; margin-top:20px; overflow:visible; border:1px solid #cfd8e6; border-radius:16px; background:#f4f7fb; box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); cursor:crosshair; touch-action:none; }
.trimmer-timeline canvas { display:block; width:100%; height:224px; border-radius:15px; }
.trimmer-selection,.trimmer-outside,.trimmer-playhead { position:absolute; inset-block:0; pointer-events:none; }
.trimmer-selection { background:linear-gradient(180deg,rgba(255,70,84,.08),rgba(255,70,84,.18)); border-inline:2px solid #ff4654; }
.trimmer-outside { background:rgba(18,27,47,.52); backdrop-filter:saturate(.55); }
.trimmer-outside--left { left:0; border-radius:15px 0 0 15px; }
.trimmer-outside--right { right:0; border-radius:0 15px 15px 0; }
.trimmer-playhead { width:2px; z-index:4; background:#fff; box-shadow:0 0 0 1px rgba(18,27,47,.55),0 0 10px rgba(255,255,255,.75); transform:translateX(-1px); }
.trimmer-handle { position:absolute; top:50%; z-index:5; width:44px; height:64px; padding:0; border:2px solid #fff; border-radius:12px; background:#c52239; color:#fff; box-shadow:0 5px 18px rgba(18,27,47,.28); cursor:ew-resize; transform:translate(-50%,-50%); touch-action:none; }
.trimmer-handle::after { content:''; display:block; width:10px; height:20px; margin:3px auto 0; border-inline:2px solid rgba(255,255,255,.85); }
.trimmer-handle span { font-size:9px; font-weight:900; letter-spacing:.08em; }
.trimmer-handle:focus-visible { outline:3px solid #0f766e; outline-offset:3px; }
.trimmer-timeline-help { margin:10px 0 16px; color:#64748b; font-size:13px; }
.trimmer-timecodes { display:grid; grid-template-columns:minmax(150px,.65fr) minmax(150px,.65fr) minmax(270px,1.7fr); gap:12px; align-items:end; }
.trimmer-timecodes label { display:grid; gap:6px; }
.trimmer-timecodes input { width:100%; min-height:48px; padding:10px 12px; border:1px solid #cfd8e6; border-radius:10px; background:#fff; color:#172033; font:750 16px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; }
.trimmer-timecodes input[aria-invalid="true"] { border-color:#c43142; box-shadow:0 0 0 3px rgba(196,49,66,.12); }
.trimmer-timecodes small { color:#7c8ba1; font-size:11px; }
.trimmer-marker-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.trimmer-marker-actions button { min-height:44px; }
.trimmer-mode { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }
.trimmer-mode-card { display:grid; gap:4px; min-height:72px; padding:13px 15px; border:1px solid #cfd8e6; border-radius:12px; background:#fff; color:#172033; text-align:left; }
.trimmer-mode-card span { font-size:15px; font-weight:850; }
.trimmer-mode-card small { color:#59677a; line-height:1.4; }
.trimmer-mode-card.is-active { border-color:#ff4654; background:#fff5f6; box-shadow:0 0 0 2px rgba(255,70,84,.11); }
.trimmer-mode-card.is-active span { color:#bd2538; }
.trimmer-audition-row,.trimmer-apply-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px; }
.trimmer-audition-row button,.trimmer-apply-row button { min-height:46px; }
.trimmer-audition-row .status-note,.trimmer-apply-row .status-note { flex:1 1 260px; }
.trimmer-fades { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
#trimmer-result.is-stale { border-color:#f2b5bd; }
@media (max-width:760px) {
 .trimmer-timeline,.trimmer-timeline canvas { min-height:180px; height:180px; }
 .trimmer-timecodes { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .trimmer-marker-actions { grid-column:1/-1; }
}
@media (max-width:520px) {
 .trimmer-summary,.trimmer-mode,.trimmer-fades { grid-template-columns:1fr; }
 .trimmer-timecodes { gap:10px; }
 .trimmer-timecodes input { font-size:14px; }
 .trimmer-marker-actions button { flex:1 1 130px; }
 .trimmer-audition-row button,.trimmer-apply-row button { width:100%; }
}
@media (prefers-reduced-motion:reduce) { .trimmer-handle,.trimmer-mode-card { transition:none!important; } }