:root {
  --fnt-display: "Albert Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fnt-ui:      "Albert Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fnt-mono:    "Albert Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --amber: #ff2b2b;
  --tx2:   rgba(246,247,251,.75);
  --tx3:   rgba(246,247,251,.54);
  --surf:  rgba(8,10,15,.56);
  --surf2: rgba(8,10,15,.68);
  --brd:   rgba(255,255,255,.12);
  --brd2:  rgba(255,255,255,.18);
  --red:   #ff2b2b;
  --accent2: #7c2bff;
  --max: 1100px;
  --gutter: 18px;
}

* { margin:0; padding:0; box-sizing:border-box; user-select:none; }

body {
  font-family: var(--fnt-ui);
  background:
    radial-gradient(1200px 600px at 60% 40%, rgba(124,43,255,.18), transparent 60%),
    radial-gradient(1000px 500px at 30% 70%, rgba(255,43,43,.14), transparent 60%),
    #07080b;
  display:flex; justify-content:center; min-height:100vh;
  color: #f6f7fb;
  overflow-x:hidden;
}

.app-container {
  width: calc(100% - 36px);
  max-width: calc(var(--max) - 36px);
  margin: 0 auto;
  overflow: visible;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.app-container.is-empty {
  min-height: 100dvh;
}

/* ---- TOOLBAR ---- */
.main-toolbar {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:0.8rem; padding:14px 18px;
  margin:12px 0 0 0;
  border-radius:24px;
  background: linear-gradient(180deg, rgba(7,8,11,.9), rgba(7,8,11,.74));
  border:none;
  box-shadow: 0 14px 36px rgba(0,0,0,.34);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.toolbar-right {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
  gap:0.55rem;
}

.control-dock {
  width:100%;
  display:flex;
  justify-content:center;
  margin-top:12px;
}
.control-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:12px;
  width:100%;
  padding:10px 12px;
  border-radius:0;
  background: linear-gradient(180deg, rgba(7,8,11,.9), rgba(7,8,11,.74));
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.avatar {
  width:34px;
  height:34px;
  border-radius:10px;
  background: linear-gradient(135deg, rgba(255,43,43,.9), rgba(124,43,255,.9));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  overflow:hidden;
}

.avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.95;
}

.brand-copy {
  display:flex;
  flex-direction:column;
  min-width: 0;
}

.brand-logo {
  width:auto;
  height:20px;
  display:block;
  padding:4px 6px;
  object-fit: contain;
  flex: 0 0 auto;
  align-self: flex-start;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.4));
}

.sub {
  margin-top:2px;
  padding-left:4px;
  font-size:12px;
  color: rgba(246,247,251,.55);
  letter-spacing:.02em;
  line-height: 1.1;
}
.transport {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:12px;
  background: transparent;
  border:none;
  padding:0;
  border-radius:0;
}
.transport .ctrl-btn {
  width:48px;
  height:48px;
  padding:0;
  border-radius:14px;
  border:none;
  background: rgba(12,14,21,.68);
  justify-content:center;
}
.transport .ctrl-btn i {
  font-size:1rem;
}
.transport .ctrl-btn span { display:none; }
.transport .time-display {
  min-width:156px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border-radius:999px;
  border:none;
  background: rgba(255,255,255,.05);
  font-size:0.94rem;
}
.actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.actions .ctrl-btn {
  width:48px;
  height:48px;
  padding:0;
  border-radius:14px;
  border:none;
  background: rgba(12,14,21,.68);
  justify-content:center;
}
.actions .ctrl-btn i { font-size:1rem; }
.control-hidden { display:none !important; }

#downloadBtn {
  width:auto;
  min-width:132px;
  height:48px;
  padding:0 18px;
  border-radius:14px;
  border:none;
  background: rgba(12,14,21,.68);
  font-size:0.92rem;
  font-weight:700;
  letter-spacing:.02em;
}
#downloadBtn i { font-size:0.92rem; }

#clearBtn span { display:none; }
#clearBtn {
  color:#9b97bb;
  background: rgba(12,14,21,.68);
}

.bypass-btn {
  position:relative;
  border-radius:999px !important;
  width:48px !important;
  height:48px !important;
  background: rgba(255,255,255,.06) !important;
  color:rgba(246,247,251,.55);
}
.bypass-btn.active {
  background:linear-gradient(135deg, rgba(124,43,255,.65), rgba(255,43,43,.45)) !important;
  color:#fff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
}
.bypass-btn.active::after {
  content:none;
}

.pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:none;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lang button{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(246,247,251,.55);
  font-weight:700;
  letter-spacing:.12em;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  transition:all .18s ease;
}
.lang button.active{
  color:#fff;
  background:linear-gradient(135deg, rgba(124,43,255,.65), rgba(255,43,43,.45));
}
.lang button:hover:not(.active){
  color:#e9e6ff;
  background:rgba(255,255,255,.08);
}

/* ---- BUTTONS ---- */
.ctrl-btn {
  background: rgba(255,255,255,.06);
  border:none;
  color:#f6f7fb; font-size:0.85rem; font-weight:600;
  padding:0.45rem 1rem; border-radius:2rem; cursor:pointer;
  transition:background 0.18s ease, transform 0.16s ease, box-shadow 0.18s ease, color 0.18s ease;
  display:inline-flex; align-items:center; gap:0.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ctrl-btn i { font-size:0.9rem; }
.ctrl-btn:hover:not(:disabled) {
  background: rgba(255,255,255,.11);
  color:#fff;
  transform:translateY(-1px);
  box-shadow: 0 12px 34px rgba(0,0,0,.26);
}
.ctrl-btn:disabled { opacity:0.38; cursor:not-allowed; transform:none; }

#loopBtn.active {
  background:#2a1a4a; color:#c084fc;
  box-shadow:0 0 10px rgba(108,78,255,0.5),inset 0 0 6px rgba(108,78,255,0.2);
}
.bypass-btn {
  background:#1a1a1a; color:#444; padding:0.45rem;
  width:40px; height:40px; border-radius:999px; justify-content:center;
}
.bypass-btn.active {
  background:#1a2a1a; color:#4eff88;
  box-shadow:0 0 10px rgba(78,255,136,0.4),inset 0 0 6px rgba(78,255,136,0.15);
}
.preset-btn { background: rgba(255,255,255,.05); color:#b8b4d9; padding:6px 10px; }
.preset-btn:hover:not(:disabled) { background:rgba(255,255,255,.10); color:#f6f7fb; }
.clear-btn   { background: rgba(255,43,43,.13); color:#ff9aa8; }
.clear-btn:hover { background: rgba(255,43,43,.2); color:#ffd0d7; }
.download-btn {
  background: linear-gradient(135deg, rgba(255,43,43,.82), rgba(124,43,255,.72));
  color:#fff;
  box-shadow: 0 12px 30px rgba(72, 34, 140, .36);
}
.download-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(255,43,43,.9), rgba(124,43,255,.82));
  color:#fff;
  box-shadow: 0 14px 34px rgba(72, 34, 140, .42);
}

.time-display {
  font-family:'JetBrains Mono',monospace; background:#010103;
  padding:0.3rem 0.9rem; border-radius:2rem; font-size:0.8rem;
  font-weight:500; letter-spacing:0.5px; color:#b9b9ff;
}

/* ---- WAVEFORM ---- */
.waveform-container {
  position:relative; margin:18px 0 0 0;
  background: linear-gradient(180deg, rgba(8,10,15,.66), rgba(8,10,15,.48));
  border-radius:18px; overflow:hidden; border:none; min-height:150px;
  box-shadow: 0 10px 35px rgba(0,0,0,.28);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition:box-shadow 0.15s,border-color 0.15s; cursor:pointer;
}
.app-container.is-empty .waveform-container {
  flex: 1 1 auto;
  min-height: clamp(340px, calc(100dvh - 210px), 820px);
}
@supports not (height: 100dvh) {
  .app-container.is-empty .waveform-container {
    min-height: clamp(340px, calc(100vh - 210px), 820px);
  }
}
.waveform-container.drag-over {
  box-shadow:0 0 0 2px rgba(124,43,255,.48), 0 0 28px 6px rgba(108,78,255,0.35), inset 0 0 40px rgba(108,78,255,0.08);
}
.drop-placeholder {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0.35rem; z-index:10;
  pointer-events:none; transition:opacity 0.3s;
}
.drop-placeholder.hidden { opacity:0; pointer-events:none; }
.drop-icon {
  font-size:2.4rem; color:#3a3a55; margin-bottom:0.4rem;
  animation:drop-pulse 3s ease-in-out infinite; transition:color 0.2s,transform 0.2s;
}
@keyframes drop-pulse { 0%,100%{opacity:0.6;transform:scale(1);}50%{opacity:1;transform:scale(1.08);} }
.drag-over .drop-icon   { color:#8b5cff; transform:scale(1.15); animation:none; }
.drop-title             { font-size:1rem; font-weight:600; color:#6a6a88; }
.drag-over .drop-title  { color:#a78bfa; }
.drop-sub               { font-size:0.78rem; color:#3e3e58; }
.drag-over .drop-sub    { color:#7c6fc2; }
.drop-formats           { font-size:0.7rem; color:#2e2e45; letter-spacing:0.5px; margin-top:0.2rem; }
.drag-over .drop-formats{ color:#5a4f9a; }
.waveform { width:100%; height:150px; cursor:pointer; }

.loop-overlay { position:absolute; top:0; left:0; width:100%; height:150px; pointer-events:none; }
.loop-region-rect {
  position:absolute; height:100%; background:rgba(255,165,0,0.25);
  border-left:2px solid #ffaa44; border-right:2px solid #ffaa44; pointer-events:none;
}
.loop-handle {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:36px; height:36px; border-radius:50%; text-align:center; line-height:36px;
  font-size:11px; font-weight:bold; cursor:ew-resize; z-index:20; color:#fff;
  box-shadow:0 0 6px rgba(0,0,0,0.5); pointer-events:auto;
}
.start-handle { background:#2e7d32; }
.end-handle   { background:#c62828; }


/* ---- WORKZONE: left mode rail + right content ---- */
.workzone {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:12px;
}
.mode-bar {
  display:none;
  flex-direction:column;
  justify-content:stretch;
  align-items:stretch;
  gap:8px;
  padding:10px;
  width:196px;
  flex:0 0 196px;
  background: rgba(8,10,15,.54);
  border:none;
  border-radius:14px;
  box-shadow: 0 10px 35px rgba(0,0,0,.28);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow:hidden;
  overflow-y:auto;
}
.mode-btn {
  flex:0 0 88px;
  min-width:0;
  min-height:88px;
  max-height:88px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.16rem; padding:0.48rem 0.42rem; background:rgba(255,255,255,.04);
  border:none; border-radius:12px; cursor:pointer;
  transition:background 0.2s,border-color 0.2s,box-shadow 0.2s,transform 0.15s,color 0.2s;
  color:#5a5a78;
}
.mode-step {
  font-size:0.5rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:#4d4d6e;
  margin-bottom:0.1rem;
}
.mode-btn:hover {
  background:rgba(255,255,255,.08); color:#9090c0; transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
}
.mode-btn-icon { font-size:1.1rem; }
.mode-btn-label { font-size:0.7rem; font-weight:700; letter-spacing:0.12px; line-height:1.05; }
.mode-btn-sub {
  font-size:0.56rem;
  color:#3a3a55;
  margin-top:0;
  line-height:1.1;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:92%;
}
.mode-btn-active {
  background:rgba(124,43,255,.14); color:#c084fc;
  box-shadow:0 0 24px rgba(108,78,255,0.28),inset 0 0 16px rgba(108,78,255,0.07);
}
.mode-btn-active .mode-btn-icon { color:#c084fc; }
.mode-btn-active .mode-btn-sub  { color:#8060c0; }
.mode-btn-locked {
  opacity:0.75;
}
.mode-btn-locked .mode-step {
  color:#786a9a;
}

/* ---- WORKSPACE ---- */
.workspace {
  display:flex;
  flex:1;
  min-height:400px;
  margin-top:0;
  border-radius:18px;
  overflow:hidden;
  background: rgba(8,10,15,.54);
  box-shadow: 0 10px 35px rgba(0,0,0,.28);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.workspace.meta-layout { display:block; }
.workspace.meta-layout .ws-left,
.workspace.meta-layout .ws-divider { display:none; }
.workspace.meta-layout .ws-right { width:100%; min-height:0; }

.ws-left {
  width:46%; overflow-y:auto; background:transparent; min-height:0;
}
.ws-divider { width:1px; background:rgba(255,255,255,.08); flex-shrink:0; }
.ws-right { flex:1; overflow-y:auto; background:transparent; min-height:0; }

/* idle placeholders */
.ws-idle-msg, .ws-right-idle {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:200px; gap:0.9rem; padding:2rem; text-align:center;
}
.ws-idle-msg i, .ws-right-idle i { font-size:2rem; color:#252540; }
.ws-idle-msg p, .ws-right-idle p { font-size:0.82rem; color:#3a3a58; line-height:1.55; }

.ws-analyzing {
  display:flex; align-items:center; gap:0.8rem;
  padding:1.5rem; color:#a78bfa; font-size:0.92rem;
}
.ws-analyzing i { color:#6c4eff; }

/* ---- STATS BAR (analysis mode, top of ws-left) ---- */
.analysis-stats-bar {
  display:flex; flex-wrap:wrap; gap:0.5rem; padding:0.75rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0;
}
.astat {
  background:rgba(255,255,255,.06); border:none; border-radius:0.5rem;
  padding:0.22rem 0.7rem; font-size:0.74rem; color:#6a6a88;
}
.astat b { color:#c0c0d8; }

.analysis-tune-bar {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.6rem;
  padding:0.65rem 0.9rem 0.35rem 0.9rem;
}
.atune-card {
  background:rgba(255,255,255,.05);
  border-radius:12px;
  padding:0.55rem 0.65rem;
}
.atune-title {
  font-size:0.72rem;
  color:#8e88b7;
  margin-bottom:0.45rem;
}
.atune-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.4rem;
}
.atune-btn {
  width:28px;
  height:28px;
  border:none;
  border-radius:999px;
  background:rgba(124,43,255,.24);
  color:#f6f7fb;
  font-weight:700;
  cursor:pointer;
}
.atune-btn:hover {
  background:rgba(124,43,255,.4);
}
.atune-value {
  font-size:0.78rem;
  font-weight:700;
  color:#ddd8ff;
  text-align:center;
  flex:1;
}

/* ---- FINDING ROWS (ws-left, analysis mode) ---- */
.findings-list { display:flex; flex-direction:column; padding:0.6rem 0.75rem; }
.analysis-step-actions {
  padding:0.5rem 0.75rem 0.8rem 0.75rem;
  display:flex;
  justify-content:flex-end;
}
.analysis-step-actions .ctrl-btn {
  min-width:190px;
  justify-content:center;
}

.finding-row {
  display:flex; align-items:center; gap:0.65rem;
  padding:0.55rem 0.8rem; border-radius:0.8rem;
  border:1px solid transparent; cursor:pointer; margin-bottom:0.3rem;
  transition:background 0.14s,border-color 0.14s;
}
.finding-row:last-child { margin-bottom:0; }

.fr-fix  { background:rgba(220,38,38,0.05);  border-color:rgba(220,38,38,0.14); }
.fr-warn { background:rgba(245,158,11,0.04); border-color:rgba(245,158,11,0.12); }
.fr-ok   { background:rgba(34,197,94,0.04);  border-color:rgba(34,197,94,0.1); }

.fr-fix:hover   { background:rgba(220,38,38,0.11);  border-color:rgba(220,38,38,0.3); }
.fr-warn:hover  { background:rgba(245,158,11,0.09); border-color:rgba(245,158,11,0.28); }
.fr-ok:hover    { background:rgba(34,197,94,0.08);  border-color:rgba(34,197,94,0.22); }

.fr-selected.fr-fix  { background:rgba(220,38,38,0.16) !important; border-color:rgba(220,38,38,0.45) !important; }
.fr-selected.fr-warn { background:rgba(245,158,11,0.13) !important; border-color:rgba(245,158,11,0.42) !important; }
.fr-selected.fr-ok   { background:rgba(34,197,94,0.12) !important;  border-color:rgba(34,197,94,0.38) !important; }

.fr-badge { font-size:1rem; flex-shrink:0; }
.fr-fix  .fr-badge { color:#f87171; }
.fr-warn .fr-badge { color:#fbbf24; }
.fr-ok   .fr-badge { color:#4ade80; }

.fr-label { flex:1; font-size:0.82rem; font-weight:600; color:#c0c0d8; }
.fr-label-off { color:#4a4a60; text-decoration:line-through; }
.fr-na { color:#2a2a48; font-size:0.9rem; flex-shrink:0; padding:0 0.2rem; }

/* ---- TOGGLE SWITCH ---- */
.toggle-sw {
  flex-shrink:0; position:relative; display:inline-block;
  width:36px; height:20px; cursor:pointer;
}
.toggle-inp { opacity:0; width:0; height:0; position:absolute; }
.toggle-track {
  position:absolute; inset:0; background:#2a2a40;
  border-radius:20px; border:1px solid #5a5a80;
  transition:background 0.2s,border-color 0.2s;
}
.toggle-thumb {
  position:absolute; top:3px; left:3px; width:12px; height:12px;
  border-radius:50%; background:#8888aa; transition:transform 0.2s,background 0.2s;
}
.toggle-inp:checked + .toggle-track { background:#1a2e1a; border-color:#4eff88; }
.toggle-inp:checked + .toggle-track .toggle-thumb { background:#4eff88; transform:translateX(16px); }

/* ---- PRESET CARDS (ws-left, presets mode) ---- */
.presets-inner { padding:0.75rem 1rem; }
.presets-group { margin-bottom:1rem; }
.presets-cat-label {
  font-size:0.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:#3a3a58; margin-bottom:0.45rem;
}
.presets-grid { display:flex; flex-wrap:wrap; gap:0.45rem; }

.preset-card {
  background:rgba(255,255,255,.05); border:none; border-radius:0.75rem;
  padding:0.55rem 0.7rem 0.45rem 0.7rem; cursor:pointer;
  transition:background 0.14s,border-color 0.14s,transform 0.12s,box-shadow 0.14s;
  display:flex; flex-direction:column; gap:0.3rem; min-width:86px; user-select:none;
}
.preset-card:hover { background:rgba(255,255,255,.09); transform:translateY(-1px); }
.preset-card.preset-active {
  background:rgba(124,43,255,.14);
  box-shadow:0 0 14px rgba(108,78,255,0.45),inset 0 0 12px rgba(108,78,255,0.12);
  outline: 1px solid rgba(124,43,255,.65);
}
.preset-card-top { display:flex; align-items:center; justify-content:space-between; gap:0.4rem; }
.preset-name { font-size:0.75rem; font-weight:600; color:#c0c0d8; white-space:nowrap; }
.preset-active .preset-name { color:#c084fc; }

.comp-dots { display:flex; gap:3px; align-items:center; }
.comp-dot { width:5px; height:5px; border-radius:50%; background:#2a2a3a; border:1px solid #3a3a55; }
.comp-dot-on { background:#6c4eff; border-color:#9a7aff; }
.preset-active .comp-dot-on { background:#c084fc; }

.preset-eq { display:flex; gap:3px; align-items:flex-end; height:18px; }
.eq-bar-wrap { flex:1; height:100%; display:flex; align-items:center; justify-content:center; }
.eq-bar { width:100%; border-radius:2px; min-height:2px; }
.bar-up   { background:#6c4eff; }
.bar-zero { background:#3a3a55; height:40% !important; }
.bar-flat { background:#4a3a88; }
.bar-down { background:#ff6b6b; }
.preset-active .bar-up   { background:#c084fc; }
.preset-active .bar-flat { background:#9a7aff; }
.preset-active .bar-down { background:#ff9999; }

/* ---- EDITOR PANEL (ws-right) ---- */
.editor-panel { display:flex; flex-direction:column; height:100%; }

.editor-hdr {
  display:flex; align-items:flex-start; gap:0.8rem;
  padding:1rem 1.25rem; border-bottom:1px solid #1e1e2e; flex-shrink:0;
}
.ehdr-fix    { background:rgba(220,38,38,0.08);  border-bottom-color:rgba(220,38,38,0.2); }
.ehdr-warn   { background:rgba(245,158,11,0.07); border-bottom-color:rgba(245,158,11,0.18); }
.ehdr-ok     { background:rgba(34,197,94,0.06);  border-bottom-color:rgba(34,197,94,0.15); }
.ehdr-preset { background:rgba(108,78,255,0.07); border-bottom-color:rgba(108,78,255,0.2); }

.ehdr-icon { font-size:1.2rem; margin-top:0.1rem; flex-shrink:0; }
.ehdr-fix    .ehdr-icon { color:#f87171; }
.ehdr-warn   .ehdr-icon { color:#fbbf24; }
.ehdr-ok     .ehdr-icon { color:#4ade80; }
.ehdr-preset .ehdr-icon { color:#a78bfa; }
.ehdr-text { flex:1; }
.ehdr-text b { display:block; font-size:0.9rem; font-weight:700; color:#e0e0f0; margin-bottom:0.2rem; }
.ehdr-text p { font-size:0.78rem; color:#7a7a9a; line-height:1.45; }

.editor-no-params {
  padding:1.25rem; color:#4a4a66; font-size:0.82rem;
  display:flex; align-items:center; gap:0.6rem;
}
.editor-no-params i { font-size:1rem; color:#3a6a3a; }

/* ---- PARAM SLIDERS ---- */
.editor-sliders {
  flex:1; overflow-y:auto; padding:0.8rem 1.25rem;
  display:flex; flex-direction:column; gap:1.1rem;
}

.param-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; color:#6c4eff; font-size:0.7rem; flex-shrink:0; margin-right:2px;
}
.param-row { display:flex; flex-direction:column; gap:0.45rem; }

.param-row-top {
  display:flex; align-items:center; justify-content:space-between;
}
.param-label { font-size:0.78rem; font-weight:600; color:#8080b0; letter-spacing:0.2px; }
.param-val {
  font-size:0.82rem; font-weight:700; color:#c084fc;
  font-family:'JetBrains Mono',monospace; letter-spacing:0.5px; min-width:64px; text-align:right;
}

.param-range {
  width:100%; height:4px; cursor:pointer; outline:none; border:none;
  -webkit-appearance:none; appearance:none;
  background:#252540; border-radius:4px;
}
.param-range::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:#252540; }
.param-range::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:#6c4eff; cursor:pointer; margin-top:-7px;
  box-shadow:0 0 8px rgba(108,78,255,0.6);
  transition:background 0.15s,transform 0.15s;
}
.param-range::-webkit-slider-thumb:hover { background:#9a7aff; transform:scale(1.2); }
.param-range::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#6c4eff; cursor:pointer; border:none;
  box-shadow:0 0 8px rgba(108,78,255,0.6);
}
.param-range::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:#252540; }
.param-range::-moz-range-track { height:4px; border-radius:4px; background:#252540; }

.param-restore-row {
  display:flex; justify-content:flex-end; padding-top:0.25rem;
}
.param-restore {
  background:transparent; border:1px solid #2e2e50; color:#5a5a88;
  font-size:0.72rem; padding:0.18rem 0.6rem; border-radius:2rem; cursor:pointer;
  transition:border-color 0.15s,color 0.15s;
}
.param-restore:hover { border-color:#6c4eff; color:#a078ee; }

/* ---- META EDITOR PANEL ---- */
.meta-single-panel {
  padding:1rem 1.1rem 1.2rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:0.9rem;
}
.meta-main-row {
  display:grid;
  grid-template-columns:200px minmax(0, 1fr);
  gap:1rem;
}
.meta-side {
  display:flex;
  flex-direction:column;
  gap:0.55rem;
}
.meta-cover-preview {
  width:100%;
  max-width:190px;
  min-height:190px;
  aspect-ratio:1/1;
  border:1px solid #2a2a3e;
  border-radius:0.7rem;
  background:#0a0a14;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#5f5b80;
  overflow:hidden;
  align-self:flex-start;
}
.meta-cover-preview img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.meta-cover-actions {
  display:flex;
  flex-direction:column;
  gap:0.45rem;
}
.meta-side-hint {
  font-size:0.72rem;
  color:#8e88b7;
}

.meta-fields-col {
  display:flex;
  flex-direction:column;
  gap:0.7rem;
}
.meta-panel-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0.8rem;
  border-bottom:1px solid #222238;
  padding-bottom:0.8rem;
}
.meta-panel-head h3 {
  font-size:2rem;
  font-weight:700;
  color:#ece9ff;
  margin-bottom:0.2rem;
}
.meta-panel-head p {
  font-size:0.8rem;
  color:#8e88b7;
  word-break:break-word;
}
.meta-form-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:0.45rem;
}
.meta-field {
  display:flex;
  flex-direction:column;
  gap:0.15rem;
}
.meta-field label,
.meta-form-full label {
  font-size:0.82rem;
  color:#7f7aa0;
}
.meta-field input,
.meta-form-full textarea {
  width:100%;
  border-radius:0;
  border:none;
  border-bottom:1px solid #3a2a72;
  background:transparent;
  color:#f2eeff;
  font-size:1rem;
  padding:0.25rem 0 0.35rem 0;
  outline:none;
  transition:border-color 0.2s, box-shadow 0.2s;
  user-select:text;
}
.meta-field input:focus,
.meta-form-full textarea:focus {
  border-bottom-color:#8a6cff;
  box-shadow:none;
}
.meta-form-full {
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  margin-top:0.45rem;
}
.meta-form-full textarea {
  resize:vertical;
  min-height:95px;
}
.meta-actions-row {
  display:flex;
  justify-content:flex-end;
  gap:0.7rem;
  margin-top:0.2rem;
  align-items:flex-end;
  flex-wrap:wrap;
}
.meta-actions-row .ctrl-btn {
  min-width:140px;
  justify-content:center;
}
.meta-export-picker {
  margin-right:auto;
  display:flex;
  flex-direction:column;
  gap:0.3rem;
}
.meta-export-label {
  font-size:0.72rem;
  color:#8e88b7;
}
.meta-export-pill {
  padding:5px;
  gap:6px;
}
.meta-export-pill button {
  appearance:none;
  border:none;
  background:transparent;
  color:rgba(246,247,251,.65);
  border-radius:999px;
  padding:6px 12px;
  font-weight:700;
  font-size:0.78rem;
  cursor:pointer;
}
.meta-export-pill button.active {
  color:#fff;
  background:linear-gradient(135deg, rgba(124,43,255,.65), rgba(255,43,43,.45));
}
.meta-note {
  min-height:18px;
  font-size:0.73rem;
  color:#9b92ca;
}


/* ---- RESPONSIVE ---- */
@media (max-width:850px) {
  .app-container.is-empty .waveform-container { min-height: clamp(240px, calc(100dvh - 190px), 560px); }
  .waveform-container { margin:12px 0 0 0; }
  .main-toolbar       { padding:12px 14px; margin:8px 0 0 0; border-radius:18px; }
  .toolbar-right      { width:auto; justify-content:flex-end; }
  .control-dock       { margin-top:10px; }
  .control-inner      { width:100%; justify-content:space-between; padding:8px 10px; gap:8px; }
  .transport          { gap:8px; }
  .transport .ctrl-btn{ width:36px; height:36px; border-radius:11px; }
  .transport .ctrl-btn i { font-size:0.9rem; }
  .transport .time-display { min-width:112px; height:34px; font-size:0.84rem; padding:0 9px; }
  .actions            { gap:8px; }
  .actions .ctrl-btn  { width:36px; height:36px; border-radius:11px; }
  .actions .ctrl-btn i{ font-size:0.9rem; }
  #downloadBtn        { min-width:98px; height:36px; padding:0 10px; border-radius:11px; font-size:0.84rem; }
  .bypass-btn, .bypass-btn.active { width:36px !important; height:36px !important; }
  .pill               { gap:6px; padding:6px 8px; }
  .lang button        { font-size:10px; padding:5px 8px; letter-spacing:.08em; }
  .brand-logo         { height:18px; padding:2px 4px; }
  .workzone           { flex-direction:column; gap:10px; margin-top:10px; }
  .mode-bar           { width:100%; flex:0 0 auto; flex-direction:row; padding:8px; gap:8px; overflow-x:auto; overflow-y:hidden; }
  .mode-btn           { flex:0 0 132px; min-width:132px; min-height:68px; max-height:68px; padding:0.44rem 0.44rem; gap:0.28rem; }
  .mode-btn-icon      { font-size:1rem; }
  .workspace          { flex-direction:column; min-height:0; }
  .ws-left            { width:100%; max-height:260px; border-right:none; border-bottom:none; }
  .ws-divider         { width:100%; height:1px; }
  .ws-right           { min-height:220px; }
  .analysis-tune-bar  { grid-template-columns:1fr; }
  .meta-main-row      { grid-template-columns:1fr; }
  .meta-cover-preview { max-width:160px; min-height:160px; }
  .meta-panel-head h3 { font-size:1.4rem; }
  .meta-actions-row   { flex-direction:column; }
  .meta-actions-row .ctrl-btn { width:100%; }
}

@media (max-width:980px) {
  .sub { display:none; }
}