:root {
  --wb-bg: #101214;
  --wb-surface: rgba(29, 33, 37, 0.64);
  --wb-surface-strong: rgba(23, 27, 30, 0.88);
  --wb-line: rgba(237, 243, 247, 0.1);
  --wb-line-strong: rgba(237, 243, 247, 0.18);
  --wb-text: #f3f5f4;
  --wb-muted: #9da8a8;
  --wb-amber: #e6ac62;
  --wb-cyan: #72d9d2;
  --wb-green: #80d8a0;
  --wb-red: #f07070;
  --wb-radius: 18px;
  --wb-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

body.workbench-shell {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  color: var(--wb-text);
  background:
    radial-gradient(900px 620px at 8% -10%, rgba(230, 172, 98, 0.09), transparent 68%),
    radial-gradient(900px 600px at 100% 20%, rgba(114, 217, 210, 0.08), transparent 70%),
    linear-gradient(145deg, #111315, #181c1f 48%, #101315);
}

.workbench-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: radial-gradient(rgba(255, 255, 255, 0.24) 0.5px, transparent 0.7px);
  background-size: 7px 7px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}

.hero {
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
  min-height: 58px;
  padding: 16px 0 8px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  text-align: left;
}

.hero .tag,
.panel-eyebrow {
  display: inline-block;
  color: var(--wb-amber);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.advanced-toggle,
.guide-fab {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--wb-line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--wb-text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: 240ms ease;
}

.advanced-toggle span { display: inline-block; margin-left: 7px; color: var(--wb-amber); transition: transform 240ms ease; }
body.advanced-open .advanced-toggle { border-color: rgba(230, 172, 98, 0.55); background: rgba(230, 172, 98, 0.1); }
body.advanced-open .advanced-toggle span { transform: rotate(180deg); }

.guide-fab { top: 35px; right: 44px; z-index: 5; }

.workflow-header {
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  border: 1px solid var(--wb-line);
  border-radius: 14px;
  background: rgba(22, 26, 29, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
}

.workflow-header i { flex: 1; height: 1px; margin: 0 10px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.15), rgba(255,255,255,.04)); }
.workflow-step { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--wb-muted); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; transition: 240ms ease; }
.workflow-step span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--wb-line-strong); border-radius: 50%; font-size: 9px; }
.workflow-step.active { color: var(--wb-text); }
.workflow-step.active span { border-color: var(--wb-amber); background: var(--wb-amber); color: #20180e; box-shadow: 0 0 18px rgba(230, 172, 98, .25); }

.grid {
  width: min(1480px, calc(100% - 48px));
  height: calc(100vh - 142px);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(520px, 1.55fr) minmax(270px, 0.8fr);
  gap: 16px;
  align-items: stretch;
}

.card {
  height: 100%;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius);
  background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 38%), var(--wb-surface);
  box-shadow: var(--wb-shadow), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(22px) saturate(1.04);
}

.card h2 { margin: 0; font-size: 18px; letter-spacing: -0.025em; }
.card h3 { color: var(--wb-muted); font-size: 12px; letter-spacing: .03em; }
.hint { color: var(--wb-muted); font-size: 12px; line-height: 1.5; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.ready-state { padding: 5px 8px; border-radius: 999px; color: var(--wb-green); background: rgba(128,216,160,.1); font-size: 10px; font-weight: 700; }
.qc-orb { width: 9px; height: 9px; border-radius: 50%; background: var(--wb-cyan); box-shadow: 0 0 16px rgba(114,217,210,.55); }

.upload-area { padding: 14px; border: 1px dashed rgba(230,172,98,.35); border-radius: 13px; background: rgba(0,0,0,.14); }
.upload-area.is-dragover,
.reference-tools.is-dragover { border-color: var(--wb-cyan); background: rgba(114,217,210,.09); box-shadow: 0 0 0 3px rgba(114,217,210,.09); }
.upload-area::before { content: "DROP SOURCE WAV"; color: var(--wb-amber); font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.meta { gap: 8px; padding-top: 4px; font-size: 12px; }
.source-preview-player { display:grid; gap:8px; margin-top:12px; padding:9px; border:1px solid rgba(230,172,98,.24); border-radius:11px; background:rgba(6,10,11,.34); }
.source-preview-player audio { display:none; }
.source-preview-main { display:flex; align-items:center; gap:7px; }
.source-player-button { display:grid; place-items:center; width:30px; min-width:30px; height:30px; padding:0; border:1px solid var(--wb-line); border-radius:9px; color:var(--wb-muted); background:rgba(255,255,255,.035); }
.source-player-button svg { width:14px; height:14px; }
.source-player-play { border-color:rgba(230,172,98,.45); color:#231a10; background:var(--wb-amber); }
.source-player-button:disabled { opacity:.34; cursor:not-allowed; }
.source-preview-time { display:flex; gap:4px; color:var(--wb-text); font-size:10px; font-variant-numeric:tabular-nums; }
.source-preview-badge { margin-left:auto; padding:4px 7px; border:1px solid rgba(230,172,98,.3); border-radius:999px; color:var(--wb-amber); background:rgba(230,172,98,.07); font-size:8px; font-weight:800; letter-spacing:.08em; }
.source-preview-seek { width:100%; height:5px; margin:0; accent-color:var(--wb-amber); }
.source-preview-player.ready { border-color:rgba(230,172,98,.42); box-shadow:inset 0 0 0 1px rgba(230,172,98,.035); }
.mastering-card { min-width: 0; }
.visualizer-stage { position: relative; display: grid; grid-template-rows: auto 155px auto 66px; gap: 7px; margin-bottom: 12px; padding: 10px; overflow: hidden; border: 1px solid var(--wb-line); border-radius: 14px; background: linear-gradient(145deg, rgba(6,11,12,.68), rgba(20,29,30,.34)); }
.visualizer-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.035) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, rgba(255,255,255,.035) 50%, transparent 50.2%); background-size: 25% 100%, 100% 50%; }
.visualizer-head, .waveform-head { display:flex; justify-content:space-between; color:var(--wb-muted); font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
#visualizerStatus { color:var(--wb-cyan); }
.visualizer-stage canvas { position:relative; z-index:1; width:100%; height:100%; border-radius:8px; background: rgba(4,9,10,.32); }
.analysis-progress { position:absolute; z-index:3; inset:auto 12px 12px; padding:10px 12px; border:1px solid rgba(114,217,210,.3); border-radius:9px; background:rgba(12,19,20,.88); color:var(--wb-text); font-size:12px; box-shadow:0 12px 32px rgba(0,0,0,.28); }

.quick-controls { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:8px; }
.premium-knob { display:grid; justify-items:center; gap:7px; min-width:0; color:var(--wb-muted); font-size:10px; font-weight:650; text-align:center; }
.premium-knob strong { color:var(--wb-text); font-size:11px; }
.premium-knob output { color:var(--wb-cyan); font-size:10px; }
.knob-ring { --knob-progress:50%; position:relative; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:conic-gradient(var(--wb-amber) var(--knob-progress), rgba(255,255,255,.08) 0); box-shadow:0 7px 18px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.12); }
.knob-ring::before { content:""; position:absolute; width:43px; height:43px; border-radius:50%; background:radial-gradient(circle at 35% 28%, #3b4243, #1a1f21 64%); }
.knob-ring input { position:relative; z-index:1; width:39px; height:39px; margin:0; appearance:none; border-radius:50%; opacity:0; cursor:ns-resize; }
.preview-tone-btn { width:100%; min-height:36px; margin-top:13px; border:1px solid rgba(230,172,98,.36); border-radius:10px; background:rgba(230,172,98,.08); color:var(--wb-amber); font:inherit; font-size:11px; font-weight:800; letter-spacing:.12em; cursor:pointer; transition:background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease; }
.preview-tone-btn:hover:not(:disabled) { transform:translateY(-1px); border-color:rgba(230,172,98,.7); background:rgba(230,172,98,.15); }
.preview-tone-btn.is-applied { border-color:rgba(114,217,210,.54); background:rgba(114,217,210,.1); color:var(--wb-cyan); }
.preview-tone-btn:disabled { opacity:.42; cursor:not-allowed; }
.preview-tone-btn[hidden],
.live-commit-btn[hidden],
#liveBtn[hidden] { display:none!important; }
.live-commit-btn { border-color:rgba(128,216,160,.54); color:#b9f8ce; background:linear-gradient(135deg,rgba(68,177,112,.16),rgba(114,217,210,.08)); }
.live-commit-btn:hover:not(:disabled) { border-color:rgba(128,216,160,.82); background:linear-gradient(135deg,rgba(68,177,112,.26),rgba(114,217,210,.13)); }

.smart-suggestion { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,220px); align-items:center; gap:10px 12px; margin-top:12px; padding:10px 12px; border:1px solid rgba(114,217,210,.18); border-radius:12px; background:linear-gradient(100deg, rgba(114,217,210,.08), rgba(230,172,98,.04)); }
.smart-suggestion h3 { margin:4px 0; color:var(--wb-text); font-size:13px; }
.smart-suggestion p { max-width:470px; margin:0; color:var(--wb-muted); font-size:11px; line-height:1.45; }
.smart-actions { display:grid; grid-column:1 / -1; grid-template-columns:1.08fr 1fr; gap:9px; width:100%; }
.smart-action { position:relative; min-height:43px; overflow:hidden; border-radius:11px; font:inherit; font-size:11px; font-weight:900; letter-spacing:.075em; white-space:nowrap; cursor:pointer; transition:transform 120ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease; }
.smart-action::before { display:inline-block; margin-right:8px; font-size:13px; line-height:1; vertical-align:-1px; }
.smart-analyze-action { border:1px solid rgba(114,217,210,.58); color:#aef6ee; background:linear-gradient(135deg, rgba(114,217,210,.16), rgba(57,112,120,.08)); box-shadow:0 7px 18px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.035); }
.smart-analyze-action::before { content:"✦"; }
.smart-apply-action { border:1px solid rgba(230,172,98,.74); color:#261a0d; background:linear-gradient(135deg, #f0a84f, #f5ce76); box-shadow:0 8px 20px rgba(230,172,98,.2), inset 0 1px 0 rgba(255,255,255,.34); }
.smart-apply-action::before { content:"◆"; }
.smart-action:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.07); }
.smart-action:active:not(:disabled), .smart-action.is-pressed { transform:translateY(2px) scale(.985); box-shadow:inset 0 3px 9px rgba(0,0,0,.3); }
.smart-action:focus-visible { outline:2px solid #fff3c4; outline-offset:3px; }
.smart-action.is-loading { color:#f4f7f6; background:linear-gradient(135deg, rgba(78,107,108,.92), rgba(43,62,64,.96)); border-color:rgba(255,255,255,.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.smart-action.is-loading::before { content:""; width:12px; height:12px; border:2px solid rgba(255,255,255,.34); border-top-color:#fff; border-radius:50%; animation:smart-action-spin .72s linear infinite; }
.smart-analyze-action.is-ready { border-color:rgba(114,217,210,.9); color:#d8fff9; background:linear-gradient(135deg, rgba(50,164,151,.38), rgba(57,112,120,.14)); box-shadow:0 0 0 1px rgba(114,217,210,.12), 0 8px 22px rgba(33,156,144,.16); }
.smart-apply-action.is-success { border-color:rgba(128,216,160,.8); color:#e9fff0; background:linear-gradient(135deg, #319f70, #4fbd82); box-shadow:0 8px 22px rgba(61,181,121,.22); }
.smart-action.is-error { border-color:rgba(255,104,91,.7); color:#ffd2cd; background:rgba(150,48,42,.38); }
.smart-action:disabled { opacity:.42; cursor:not-allowed; filter:saturate(.65); }
@keyframes smart-action-spin { to { transform:rotate(360deg); } }

.device-profile-control { display:grid; min-width:0; gap:4px; }
.device-profile-control label { display:grid; min-width:0; gap:4px; color:var(--wb-muted); font-size:10px; }
.device-profile-control select { width:100%; min-height:34px; border-color:rgba(230,172,98,.28); color:var(--wb-text); background:rgba(10,16,17,.72); font-weight:700; }
.device-profile-control .device-profile-hint { max-width:205px; margin:0; overflow:hidden; color:var(--wb-muted); font-size:9px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.device-profile-control .device-profile-hint.active { color:#ffe4a0; }

.reference-tools { margin-top:12px; padding:10px 12px; border:1px solid var(--wb-line); border-radius:12px; background:rgba(255,255,255,.025); }
.advanced-only { display:none; }
.mastering-card .advanced-only,
.output-card .advanced-only { display:none; }
body.advanced-open .advanced-only { display:block; animation:workbench-reveal 260ms ease-out both; }
body.advanced-open .mastering-top-controls.advanced-only { display:grid; }
body.advanced-open .mastering-card .advanced-only,
body.advanced-open .output-card .advanced-only { display:block; }
body.advanced-open .mastering-card .mastering-top-controls.advanced-only { display:grid; }
body.advanced-open .mastering-card .quick-controls.advanced-only { display:grid; }
body.advanced-open .tab-bar.advanced-only { display:flex; }
body.advanced-open .tab-panel.advanced-only { display:block; }
body.advanced-open .tab-panel.advanced-only[hidden] { display:none; }

.output-card .buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.output-card button { min-height:37px; border-radius:10px; font-size:12px; }
.output-card .secondary { background:linear-gradient(135deg, var(--wb-amber), #f2c980); color:#231a10; }
.output-card .ab-compare { border-color:rgba(114,217,210,.42); color:var(--wb-cyan); background:rgba(114,217,210,.08); }
.output-card .ab-compare.is-live-master { border-color:rgba(128,216,160,.62); color:#b9f8ce; background:rgba(128,216,160,.12); box-shadow:inset 0 0 0 1px rgba(128,216,160,.08),0 0 20px rgba(80,190,125,.08); }
.output-card .ab-compare.is-unmastered { border-color:rgba(230,172,98,.44); color:var(--wb-amber); background:rgba(230,172,98,.09); }
.output-card .ab-compare.is-reference { border-color:rgba(166,153,255,.42); color:#bbb0ff; background:rgba(166,153,255,.08); }
.status { margin-top:15px; padding:12px; border:1px solid var(--wb-line); border-radius:12px; background:rgba(0,0,0,.12); }
.meter { margin-top:11px; font-size:11px; }
.meter-bar { height:6px; border-radius:999px; background:rgba(255,255,255,.08); }
.meter-fill { background:linear-gradient(90deg,var(--wb-cyan),var(--wb-amber)); }
.player-shell { margin-top:14px; padding:11px; border:1px solid var(--wb-line); border-radius:12px; background:rgba(255,255,255,.025); }

@keyframes workbench-reveal { from { opacity:0; transform:translateY(-7px) scale(.99); } to { opacity:1; transform:none; } }

@media (max-width: 1120px) { .grid { grid-template-columns: minmax(220px,.75fr) minmax(480px,1.4fr); } .output-card { grid-column:1 / -1; } .output-card .buttons { grid-template-columns:repeat(5,1fr); } }
@media (max-width: 1120px) { body.workbench-shell { height:auto; overflow:auto; } .grid { height:auto; } .card { height:auto; overflow:visible; } }
@media (max-width: 780px) { .hero,.workflow-header,.grid { width:min(100% - 26px, 1480px); } .hero { padding-top:24px; } .workflow-header { overflow:auto; } .workflow-header i { min-width:15px; } .workflow-step { white-space:nowrap; } .grid { grid-template-columns:1fr; } .output-card { grid-column:auto; } .output-card .buttons { grid-template-columns:1fr 1fr; } .quick-controls { grid-template-columns:repeat(3,1fr); } .smart-suggestion { grid-template-columns:1fr; align-items:flex-start; } .device-profile-control { width:100%; } .device-profile-control .device-profile-hint { max-width:none; } .guide-fab { right:18px; top:24px; } }

/* 2026 AI studio visual system */
:root {
  --wb-bg:#080b10;
  --wb-surface:rgba(17,23,30,.82);
  --wb-surface-strong:rgba(12,17,23,.96);
  --wb-line:rgba(207,226,238,.09);
  --wb-line-strong:rgba(207,226,238,.17);
  --wb-text:#f4f7f8;
  --wb-muted:#8f9da6;
  --wb-amber:#f0b56d;
  --wb-cyan:#77eadc;
  --wb-green:#83e1aa;
  --wb-violet:#a899ff;
  --wb-radius:22px;
  --wb-shadow:0 24px 80px rgba(0,0,0,.36);
}

body.workbench-shell {
  height:auto;
  min-height:100vh;
  overflow-x:hidden;
  overflow-y:auto;
  background:
    radial-gradient(900px 560px at 18% -8%, rgba(88,112,255,.14), transparent 70%),
    radial-gradient(820px 540px at 92% 6%, rgba(71,224,205,.105), transparent 72%),
    radial-gradient(760px 520px at 54% 110%, rgba(240,181,109,.065), transparent 76%),
    linear-gradient(145deg,#080b10 0%,#0d1218 46%,#080c11 100%);
}

.workbench-shell::before {
  opacity:.25;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    radial-gradient(rgba(255,255,255,.22) .45px,transparent .65px);
  background-size:48px 48px,48px 48px,8px 8px;
  mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.72) 48%,transparent 100%);
}

.hero {
  width:min(1480px,calc(100% - 56px));
  min-height:92px;
  padding:20px 0 13px;
  align-items:center;
}

.brand-lockup { display:grid; gap:3px; }
.brand-lockup .tag { color:var(--wb-cyan); font-size:9px; }
.brand-lockup h1 {
  margin:0;
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:clamp(21px,2vw,30px);
  font-weight:650;
  line-height:1.05;
  letter-spacing:-.045em;
  background:linear-gradient(105deg,#fff 15%,#bfd0d7 68%,#8ff0e3);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brand-lockup p { margin:2px 0 0; color:var(--wb-muted); font-size:11px; }
.hero-actions { display:flex; align-items:center; gap:9px; padding-right:94px; }
.system-pill {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:0 12px;
  border:1px solid rgba(119,234,220,.14);
  border-radius:999px;
  color:#a9bbb9;
  background:rgba(119,234,220,.045);
  font-size:10px;
  font-weight:650;
}
.system-pill i { width:6px; height:6px; border-radius:50%; background:var(--wb-green); box-shadow:0 0 13px rgba(131,225,170,.7); }
.advanced-toggle,.guide-fab {
  min-height:40px;
  border-color:rgba(207,226,238,.13);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.advanced-toggle:hover,.guide-fab:hover { border-color:rgba(119,234,220,.34); background:rgba(119,234,220,.075); transform:translateY(-1px); }
.guide-fab { top:27px; right:28px; }

.hero-actions { padding-right:52px; }
.advanced-toggle.icon-control,
.guide-fab.icon-control {
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
  padding:0;
  display:grid;
  place-items:center;
  line-height:1;
}
.advanced-toggle.icon-control { border-radius:12px; }
.advanced-toggle.icon-control svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform 260ms ease,color 260ms ease;
}
body.advanced-open .advanced-toggle.icon-control svg { transform:rotate(45deg); color:var(--wb-cyan); }
.guide-fab.icon-control { border-radius:50%; }
.guide-fab.icon-control > span {
  margin:0;
  color:var(--wb-cyan);
  font-size:16px;
  font-weight:800;
  transform:none;
}
.icon-control:focus-visible {
  outline:2px solid rgba(119,234,220,.82);
  outline-offset:3px;
}

.workflow-header {
  width:min(1480px,calc(100% - 56px));
  margin-bottom:16px;
  padding:7px 10px;
  border-radius:16px;
  background:rgba(11,16,22,.72);
  box-shadow:0 14px 40px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04);
}
.workflow-step { min-height:32px; padding:0 6px; border-radius:10px; font-size:10px; letter-spacing:.02em; }
.workflow-step span { width:20px; height:20px; font-size:8px; }
.workflow-step.active { color:#ddfffa; background:rgba(119,234,220,.075); }
.workflow-step.active span { border-color:rgba(119,234,220,.65); background:rgba(119,234,220,.16); color:var(--wb-cyan); box-shadow:0 0 18px rgba(119,234,220,.14); }
.workflow-header i { margin:0 5px; background:linear-gradient(90deg,transparent,rgba(119,234,220,.16),transparent); }

.grid {
  width:min(1480px,calc(100% - 56px));
  height:auto;
  min-height:520px;
  padding:0 0 32px;
  grid-template-columns:minmax(260px,.72fr) minmax(560px,1.72fr) minmax(300px,.84fr);
  gap:16px;
  align-items:start;
}

.card {
  position:relative;
  height:auto;
  min-height:520px;
  max-height:none;
  padding:20px;
  overflow:visible;
  border-radius:var(--wb-radius);
  border-color:rgba(207,226,238,.09);
  background:
    linear-gradient(145deg,rgba(255,255,255,.052),transparent 28%),
    linear-gradient(180deg,rgba(18,24,31,.94),rgba(12,17,23,.91));
  box-shadow:var(--wb-shadow),inset 0 1px 0 rgba(255,255,255,.065);
  backdrop-filter:blur(28px) saturate(1.08);
}
.card::before {
  content:"";
  position:absolute;
  inset:0 20px auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(119,234,220,.22),transparent);
}
.mastering-card::before { background:linear-gradient(90deg,transparent,rgba(168,153,255,.34),rgba(119,234,220,.26),transparent); }
.output-card::before { background:linear-gradient(90deg,transparent,rgba(131,225,170,.28),transparent); }
.panel-heading { margin-bottom:16px; }
.panel-heading > div { display:grid; gap:3px; }
.card h2 { font-size:19px; font-weight:630; letter-spacing:-.035em; }
.panel-eyebrow { color:#84949e; font-size:8px; letter-spacing:.18em; }
.source-heading { margin-bottom:9px; }
.step-chip {
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border:1px solid rgba(119,234,220,.18);
  border-radius:10px;
  color:var(--wb-cyan);
  background:rgba(119,234,220,.055);
  font-size:9px;
  font-weight:800;
}
.ready-state { padding:6px 10px; border:1px solid rgba(131,225,170,.15); color:var(--wb-green); background:rgba(131,225,170,.07); letter-spacing:.035em; }

.upload-area {
  position:relative;
  padding:17px;
  border-color:rgba(119,234,220,.19);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(119,234,220,.035),rgba(255,255,255,.012));
}
.upload-area::before { color:#8b9aa3; font-size:8px; letter-spacing:.17em; }
.upload-area:hover { border-color:rgba(119,234,220,.38); background:linear-gradient(145deg,rgba(119,234,220,.065),rgba(255,255,255,.016)); }
.source-preview-player {
  margin-top:14px;
  padding:11px;
  border-color:rgba(119,234,220,.13);
  border-radius:13px;
  background:rgba(4,9,14,.5);
}
.source-player-play { border-color:rgba(119,234,220,.35); color:#071410; background:linear-gradient(145deg,#83efe1,#5fcbbb); }
.source-preview-badge { border-color:rgba(119,234,220,.2); color:var(--wb-cyan); background:rgba(119,234,220,.055); }

.smart-suggestion {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:70px minmax(0,1fr) minmax(190px,220px);
  align-items:center;
  gap:14px;
  margin-top:4px;
  padding:20px;
  overflow:hidden;
  border:1px solid rgba(119,234,220,.18);
  border-radius:19px;
  background:
    radial-gradient(420px 180px at 3% 10%,rgba(119,234,220,.105),transparent 70%),
    radial-gradient(360px 180px at 96% 110%,rgba(168,153,255,.1),transparent 70%),
    linear-gradient(135deg,rgba(16,29,35,.92),rgba(17,21,31,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 18px 45px rgba(0,0,0,.18);
}
.smart-suggestion::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:260px;
  height:260px;
  right:-150px;
  top:-165px;
  border:1px solid rgba(119,234,220,.09);
  border-radius:50%;
  box-shadow:0 0 0 28px rgba(119,234,220,.018),0 0 0 58px rgba(168,153,255,.014);
}
.ai-presence {
  position:relative;
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border:1px solid rgba(119,234,220,.24);
  border-radius:18px;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.16),transparent 24%),linear-gradient(145deg,rgba(119,234,220,.18),rgba(168,153,255,.13));
  box-shadow:0 12px 34px rgba(24,120,117,.16),inset 0 1px 0 rgba(255,255,255,.08);
}
.ai-presence span { width:22px; height:22px; border:1px solid rgba(220,255,250,.75); border-radius:8px 13px 8px 13px; transform:rotate(45deg); box-shadow:0 0 20px rgba(119,234,220,.34); }
.ai-presence i { position:absolute; width:6px; height:6px; right:8px; top:8px; border-radius:50%; background:var(--wb-green); box-shadow:0 0 11px rgba(131,225,170,.75); }
.smart-copy { min-width:0; }
.smart-suggestion .smart-copy h3 { margin:5px 0 6px; font-size:16px; font-weight:620; letter-spacing:-.025em; }
.smart-suggestion .smart-copy p { max-width:590px; font-size:11px; }
.ai-capabilities { display:flex; flex-wrap:wrap; gap:5px; margin-top:11px; }
.ai-capabilities span { padding:4px 7px; border:1px solid rgba(207,226,238,.09); border-radius:999px; color:#8fa2aa; background:rgba(255,255,255,.025); font-size:8px; font-weight:700; letter-spacing:.035em; }
.device-profile-control { padding:12px; border:1px solid rgba(207,226,238,.08); border-radius:13px; background:rgba(5,10,15,.32); }
.device-profile-control select { min-height:38px; border-color:rgba(119,234,220,.16); border-radius:10px; }
.device-profile-control .device-profile-hint { max-width:none; margin-top:3px; }
.smart-actions { grid-column:2 / -1; grid-template-columns:minmax(150px,.9fr) minmax(180px,1.1fr); gap:10px; }
.smart-action { min-height:49px; border-radius:13px; font-size:11px; }
.smart-analyze-action { border-color:rgba(119,234,220,.36); color:#bdfbf3; background:linear-gradient(135deg,rgba(119,234,220,.13),rgba(75,104,134,.09)); }
.smart-apply-action { border-color:rgba(139,240,220,.42); color:#071410; background:linear-gradient(135deg,#8df1e3,#79d6c8 55%,#a8e0b8); box-shadow:0 12px 30px rgba(72,211,190,.17),inset 0 1px 0 rgba(255,255,255,.38); }
body:not(.advanced-open) .mastering-card .smart-suggestion { min-height:420px; grid-template-rows:1fr auto; }
body:not(.advanced-open) .mastering-card .smart-actions { align-self:end; }

.quick-controls { padding:14px; border:1px solid rgba(207,226,238,.07); border-radius:16px; background:rgba(4,9,14,.28); }
.knob-ring { width:56px; height:56px; background:conic-gradient(var(--wb-cyan) var(--knob-progress),rgba(255,255,255,.06) 0); }
.knob-ring::before { width:47px; height:47px; background:radial-gradient(circle at 35% 28%,#303b42,#111820 68%); }
.premium-knob output { color:var(--wb-cyan); }

.mastering-top-controls,.reference-tools,.tab-bar,.tab-panel[data-panel="auto"] {
  border:1px solid rgba(207,226,238,.08);
  border-radius:16px;
  background:rgba(5,10,15,.32);
}
.mastering-top-controls { padding:12px; }
.reference-tools { padding:13px; }
.mastering-card .tab-bar { margin-top:12px; padding:5px; }
.mastering-card .tab-button { min-height:36px; border-radius:10px; }
.mastering-card .tab-button.active { color:#d8fffa; background:rgba(119,234,220,.11); box-shadow:inset 0 0 0 1px rgba(119,234,220,.12); }

.mastering-card .tab-panel[data-panel="manual"] { max-height:none; overflow:visible; padding:10px 0 0; }
.mastering-card .tab-panel[data-panel="manual"] > .controls {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
#toggleHintMini { grid-column:1 / -1; }
.control-group,.valve-culture-panel,.tape-finishing-panel {
  display:grid;
  align-content:start;
  gap:7px;
  margin:0;
  padding:13px;
  border:1px solid rgba(207,226,238,.075);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(255,255,255,.026),rgba(4,9,14,.28));
}
.control-group-heading { display:flex; align-items:center; gap:9px; padding-bottom:8px; margin-bottom:2px; border-bottom:1px solid rgba(207,226,238,.065); }
.control-group-heading > span { display:grid; place-items:center; width:26px; height:26px; border:1px solid rgba(119,234,220,.17); border-radius:8px; color:var(--wb-cyan); background:rgba(119,234,220,.045); font-size:8px; font-weight:800; }
.control-group-heading > div { display:grid; gap:2px; }
.control-group-heading strong { color:#dfe7ea; font-size:11px; }
.control-group-heading small { color:#74848d; font-size:8px; line-height:1.25; }
.tone-shaping-group { grid-column:1; }
.eq-control-bank { display:grid; gap:7px; margin:2px 0 4px; padding:10px; border:1px solid rgba(119,234,220,.1); border-radius:12px; background:rgba(119,234,220,.025); }
.eq-control-bank-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-bottom:6px; border-bottom:1px solid rgba(119,234,220,.075); }
.eq-control-bank-heading strong { color:#bdfbf3; font-size:10px; }
.eq-control-bank-heading small { color:#6f858a; font-size:8px; text-align:right; }
.valve-culture-panel { grid-column:2; border-color:rgba(240,181,109,.13); background:radial-gradient(circle at 0 0,rgba(240,181,109,.07),transparent 42%),rgba(4,9,14,.3); }
.valve-culture-panel::before { content:"02  ANALOG CHARACTER"; color:#917452; font-size:8px; font-weight:800; letter-spacing:.15em; }
.tape-finishing-panel {
  grid-column:1 / -1;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-color:rgba(168,153,255,.15);
  background:radial-gradient(circle at 100% 0,rgba(168,153,255,.075),transparent 42%),rgba(4,9,14,.3);
}
.tape-finishing-panel::before {
  content:"03  MASTER TAPE FINISHING";
  grid-column:1 / -1;
  color:#8e86bd;
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
}
.tape-finishing-heading {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:8px;
  margin-bottom:2px;
  border-bottom:1px solid rgba(207,226,238,.065);
}
.tape-finishing-heading > div { display:grid; gap:2px; }
.tape-finishing-heading strong { color:#dfe7ea; font-size:11px; }
.tape-finishing-panel.is-disabled { opacity:.55; }
.delivery-group { grid-column:1 / -1; }
.mastering-card label.inline-toggle-control { grid-template-columns:minmax(110px,145px) minmax(90px,1fr) 18px; min-height:29px; }
.mastering-card label.inline-toggle-control .inline-label { font-size:10px; }
.mastering-card label.inline-toggle-control select { min-width:0; }

.output-card { display:flex; flex-direction:column; min-height:520px; }
.output-card > .hint { margin-top:-7px; }
.output-card .buttons { gap:9px; }
.output-card button { min-height:42px; }
body:not(.advanced-open) .output-card #analyzeBtn,
body:not(.advanced-open) .output-card #processBtn { display:none; }
body:not(.advanced-open) .output-card .buttons { grid-template-columns:1fr 1fr; }
.output-card #processBtn { color:#071410; border-color:rgba(119,234,220,.4); background:linear-gradient(135deg,#8cecdf,#76d2c6); box-shadow:0 10px 24px rgba(65,207,188,.13); }
.output-card .secondary { color:#20170e; background:linear-gradient(135deg,#f0b56d,#f3cf8e); }
.output-card .ab-compare { min-height:45px; }
.status { padding:14px; border-radius:15px; background:rgba(4,9,14,.42); }
.status > #statusText { display:block; min-height:33px; color:#a8b4ba; font-size:11px; line-height:1.45; }
.meter { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:8px; }
.meter.phase { grid-template-columns:38px 1fr auto auto; }
.meter.gr { grid-template-columns:38px 1fr auto; }
.meter-bar { height:5px; }
.player-shell {
  margin-top:auto;
  padding:14px;
  border-color:rgba(119,234,220,.16);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(119,234,220,.045),rgba(4,9,14,.46));
}
.player-cta { background:linear-gradient(145deg,#8cecdf,#69cabd)!important; color:#071410!important; }
.player-mode { border-color:rgba(119,234,220,.2); color:var(--wb-cyan); background:rgba(119,234,220,.07); }

body.advanced-open .grid { grid-template-columns:minmax(245px,.66fr) minmax(650px,1.9fr) minmax(285px,.76fr); }
body.advanced-open .card { min-height:640px; }

@keyframes ai-breathe { 0%,100% { transform:scale(.96); opacity:.72; } 50% { transform:scale(1.04); opacity:1; } }
.ai-presence span { animation:ai-breathe 3.2s ease-in-out infinite; }

@media (max-width:1280px) {
  .grid,body.advanced-open .grid { grid-template-columns:minmax(240px,.72fr) minmax(540px,1.6fr); }
  .output-card { grid-column:1 / -1; min-height:0; }
  .output-card .buttons { grid-template-columns:repeat(5,minmax(0,1fr)); }
  body:not(.advanced-open) .output-card .buttons { grid-template-columns:1fr 1fr; }
  .output-card .player-shell { margin-top:14px; }
}

@media (max-width:900px) {
  .hero,.workflow-header,.grid { width:min(100% - 28px,1480px); }
  .hero { align-items:flex-start; }
  .hero-actions { padding-right:0; }
  .system-pill { display:none; }
  .guide-fab { top:70px; right:14px; }
  .workflow-header {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    overflow:hidden;
    scrollbar-width:none;
  }
  .workflow-header::-webkit-scrollbar { display:none; }
  .workflow-header i { display:none; }
  .workflow-step { justify-content:center; width:100%; min-width:0; padding:0 4px; }
  .grid,body.advanced-open .grid { grid-template-columns:1fr; }
  .output-card { grid-column:auto; }
  .grid,.card,.source-card,.mastering-card,.output-card { min-width:0; max-width:100%; }
  .card,body.advanced-open .card { min-height:0; }
  body:not(.advanced-open) .mastering-card .smart-suggestion { min-height:0; }
  .smart-suggestion { grid-template-columns:58px minmax(0,1fr); }
  .device-profile-control { grid-column:1 / -1; }
  .smart-actions { grid-column:1 / -1; }
}

@media (max-width:640px) {
  .hero { min-height:108px; padding-top:17px; }
  .brand-lockup p { max-width:230px; }
  .advanced-toggle { padding:0; }
  .guide-fab { top:65px; }
  .workflow-header { padding:7px; gap:4px; }
  .workflow-step { min-height:30px; font-size:0; }
  .workflow-step span { font-size:8px; }
  .card { padding:16px; border-radius:18px; }
  .smart-suggestion { grid-template-columns:1fr; padding:16px; }
  .ai-presence { width:48px; height:48px; }
  .device-profile-control,.smart-actions { grid-column:1; }
  .smart-actions { grid-template-columns:1fr; }
  .output-card .buttons { grid-template-columns:1fr 1fr; }
  .mastering-card .tab-panel[data-panel="manual"] > .controls { grid-template-columns:1fr; }
  .tone-shaping-group,.valve-culture-panel,.tape-finishing-panel,.delivery-group { grid-column:1; }
  .tape-finishing-panel { grid-template-columns:1fr; }
  .tape-finishing-panel::before,.tape-finishing-heading { grid-column:1; }
  .mastering-card label.inline-toggle-control { grid-template-columns:minmax(96px,130px) minmax(80px,1fr) 18px; }
}

@media (prefers-reduced-motion:reduce) {
  .ai-presence span,.card,.advanced-only { animation:none!important; transition:none!important; }
}

/* Focused three-step card flow */
body.workbench-shell {
  height:auto;
  overflow-x:hidden;
  overflow-y:auto;
}

.grid.flow-grid,
body.advanced-open .grid.flow-grid {
  width:min(940px,calc(100% - 56px));
  height:auto;
  min-height:calc(100vh - 142px);
  grid-template-columns:minmax(0,1fr);
  grid-auto-rows:auto;
  align-content:start;
  gap:12px;
  padding-bottom:28px;
}

.flow-grid .flow-card,
body.advanced-open .flow-grid .flow-card {
  width:100%;
  height:auto;
  min-height:0;
  overflow:visible;
  transition:border-color 220ms ease,background 220ms ease,box-shadow 220ms ease,opacity 220ms ease;
}

.flow-grid .flow-card.is-active {
  border-color:rgba(119,234,220,.22);
  box-shadow:0 24px 70px rgba(0,0,0,.3),0 0 0 1px rgba(119,234,220,.035),inset 0 1px 0 rgba(255,255,255,.08);
}

.flow-grid .flow-card.is-collapsed,
body.advanced-open .flow-grid .flow-card.is-collapsed {
  min-height:70px!important;
  padding-top:13px;
  padding-bottom:13px;
  overflow:hidden;
  background:linear-gradient(110deg,rgba(255,255,255,.045),rgba(14,20,27,.72));
}

.flow-grid .flow-card.is-collapsed > :not(.panel-heading) { display:none!important; }
.flow-grid .flow-card.is-collapsed .panel-heading { margin-bottom:0; }
.flow-grid .flow-card.is-locked { opacity:.48; filter:saturate(.58); }
.flow-grid .flow-card.is-complete { border-color:rgba(131,225,170,.17); }
.flow-grid .flow-card.is-complete .card-stage-summary { color:var(--wb-green); }

.panel-heading > .card-title-block {
  display:flex;
  align-items:center;
  min-width:0;
  gap:10px;
  white-space:nowrap;
}
.panel-heading > .card-title-block > .panel-eyebrow,
.panel-heading > .card-title-block > h2,
.panel-heading > .card-title-block > .card-stage-summary {
  font-family:inherit;
  font-size:11px;
  font-weight:650;
  line-height:1.25;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#c3cdd0;
}
.card-title-block .panel-eyebrow,
.card-title-block h2 { flex:0 0 auto; white-space:nowrap; }
.card-title-block h2::before {
  content:"-";
  display:inline-block;
  margin:0 10px 0 0;
  color:rgba(207,226,238,.46);
  font:inherit;
}
.card-stage-summary::before {
  content:"-";
  display:inline-block;
  margin-right:10px;
  color:rgba(207,226,238,.46);
  font:inherit;
}
.card-stage-summary {
  display:block;
  min-width:0;
  max-width:none;
  flex:1 1 auto;
  overflow:hidden;
  color:var(--wb-muted);
  font-size:10px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.flow-card.is-active .card-stage-summary { color:#b8c5c8; }
.panel-heading > .card-heading-actions { display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.card-collapse-toggle {
  display:grid;
  place-items:center;
  width:34px;
  min-width:34px;
  height:34px;
  min-height:34px!important;
  padding:0;
  border:1px solid rgba(207,226,238,.13);
  border-radius:10px!important;
  color:var(--wb-muted);
  background:rgba(255,255,255,.035)!important;
  cursor:pointer;
  transition:color 180ms ease,border-color 180ms ease,background 180ms ease;
}
.card-collapse-toggle svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform 220ms ease; }
.flow-card.is-active .card-collapse-toggle svg { transform:rotate(180deg); }
.card-collapse-toggle:hover:not(:disabled) { color:var(--wb-cyan); border-color:rgba(119,234,220,.34); background:rgba(119,234,220,.07)!important; }
.card-collapse-toggle:focus-visible { outline:2px solid rgba(119,234,220,.82); outline-offset:2px; }
.card-collapse-toggle:disabled { opacity:.38; cursor:not-allowed; }

@media (max-width:900px) {
  .grid.flow-grid,
  body.advanced-open .grid.flow-grid { width:min(100% - 28px,940px); min-height:0; }
  .flow-grid .flow-card.is-collapsed,
  body.advanced-open .flow-grid .flow-card.is-collapsed { min-height:66px!important; }
}

@media (max-width:520px) {
  .panel-heading > .card-title-block { gap:6px; }
  .panel-heading > .card-title-block > .panel-eyebrow,
  .panel-heading > .card-title-block > h2,
  .panel-heading > .card-title-block > .card-stage-summary { font-size:9px; }
  .card-title-block h2::before,
  .card-stage-summary::before { margin-right:6px; }
  .panel-heading > .card-heading-actions { gap:6px; }
  .ready-state { max-width:82px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* Premium mastering console refinement */
:root {
  --wb-bg:#05080d;
  --wb-surface:rgba(12,18,24,.92);
  --wb-surface-strong:rgba(8,13,18,.98);
  --wb-line:rgba(188,215,225,.095);
  --wb-line-strong:rgba(188,215,225,.18);
  --wb-text:#f5f8f8;
  --wb-muted:#829198;
  --wb-cyan:#74e7d8;
  --wb-green:#8be2af;
  --wb-amber:#e7b979;
  --wb-radius:24px;
}

body.workbench-shell {
  background:
    radial-gradient(880px 540px at 12% -8%,rgba(80,98,205,.13),transparent 72%),
    radial-gradient(820px 520px at 96% 0%,rgba(36,187,170,.11),transparent 74%),
    radial-gradient(680px 440px at 50% 102%,rgba(231,185,121,.055),transparent 76%),
    linear-gradient(150deg,#05080d 0%,#091016 48%,#05090d 100%);
}

body.workbench-shell::after {
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.018),transparent 24%,transparent 76%,rgba(116,231,216,.014));
}

.hero,
.workflow-header,
.grid.flow-grid,
body.advanced-open .grid.flow-grid {
  width:min(1120px,calc(100% - 64px));
}

.hero {
  min-height:104px;
  padding:25px 2px 16px;
}

.brand-lockup { gap:6px; }
.brand-lockup h1 {
  font-size:clamp(27px,2.6vw,36px);
  font-weight:600;
  letter-spacing:-.052em;
  background:linear-gradient(108deg,#ffffff 8%,#d8e2e4 54%,#91eee2 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.brand-lockup p { color:#84939a; font-size:11px; letter-spacing:.012em; }
.hero-actions { gap:10px; padding-right:54px; }
.system-pill {
  min-height:39px;
  padding:0 15px;
  border-color:rgba(116,231,216,.19);
  color:#a6b8b8;
  background:linear-gradient(180deg,rgba(116,231,216,.075),rgba(116,231,216,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.16);
}
.system-pill i { animation:premium-status-pulse 2.8s ease-in-out infinite; }

.workflow-header {
  position:relative;
  margin-bottom:18px;
  padding:8px 10px;
  border-color:rgba(188,215,225,.105);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(15,22,29,.88),rgba(8,14,19,.84));
  box-shadow:0 18px 50px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.055);
}
.workflow-header::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(116,231,216,.035),transparent);
}
.workflow-step {
  position:relative;
  z-index:1;
  min-height:35px;
  padding:0 8px;
  color:#6f7d84;
  font-size:9px;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.workflow-step span {
  width:21px;
  height:21px;
  border-color:rgba(188,215,225,.14);
  background:rgba(255,255,255,.015);
}
.workflow-step.active {
  color:#eafffc;
  background:linear-gradient(180deg,rgba(116,231,216,.12),rgba(116,231,216,.055));
  box-shadow:inset 0 0 0 1px rgba(116,231,216,.08),0 8px 22px rgba(20,148,136,.08);
}

.grid.flow-grid,
body.advanced-open .grid.flow-grid {
  min-height:calc(100vh - 160px);
  gap:15px;
  padding-bottom:42px;
}

.flow-grid .flow-card,
body.advanced-open .flow-grid .flow-card {
  padding:25px;
  border:1px solid rgba(188,215,225,.095);
  border-radius:var(--wb-radius);
  background:
    linear-gradient(145deg,rgba(255,255,255,.047),transparent 24%),
    radial-gradient(560px 220px at 100% 0,rgba(116,231,216,.025),transparent 72%),
    linear-gradient(180deg,rgba(15,22,29,.965),rgba(8,14,19,.94));
  box-shadow:0 30px 90px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.065);
}
.flow-grid .flow-card::before {
  inset:0 26px auto;
  background:linear-gradient(90deg,transparent,rgba(116,231,216,.3),rgba(231,185,121,.13),transparent);
}
.flow-grid .flow-card::after {
  content:"";
  position:absolute;
  pointer-events:none;
  inset:1px;
  border-radius:calc(var(--wb-radius) - 1px);
  box-shadow:inset 0 0 70px rgba(116,231,216,.012);
}
.flow-grid .flow-card.is-active {
  border-color:rgba(116,231,216,.25);
  box-shadow:0 34px 100px rgba(0,0,0,.39),0 0 0 1px rgba(116,231,216,.035),inset 0 1px 0 rgba(255,255,255,.075);
}
.flow-grid .flow-card.is-complete { border-color:rgba(139,226,175,.2); }
.flow-grid .flow-card.is-complete::before { background:linear-gradient(90deg,transparent,rgba(139,226,175,.36),transparent); }
.flow-grid .flow-card.is-locked { opacity:.44; }

.flow-grid .flow-card.is-collapsed,
body.advanced-open .flow-grid .flow-card.is-collapsed {
  min-height:82px!important;
  padding:17px 24px;
  background:
    linear-gradient(100deg,rgba(255,255,255,.038),transparent 30%),
    linear-gradient(180deg,rgba(14,21,27,.91),rgba(8,14,19,.88));
  box-shadow:0 18px 55px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05);
}

.panel-heading { position:relative; z-index:1; min-height:42px; margin-bottom:19px; }
.panel-heading > .card-title-block {
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  grid-template-areas:
    "eyebrow summary"
    "title summary";
  align-items:center;
  column-gap:16px;
  row-gap:3px;
  white-space:normal;
}
.panel-heading > .card-title-block > .panel-eyebrow {
  grid-area:eyebrow;
  color:#708188;
  font-size:8px;
  font-weight:750;
  letter-spacing:.2em;
}
.panel-heading > .card-title-block > h2 {
  grid-area:title;
  color:#eef4f4;
  font-size:16px;
  font-weight:590;
  line-height:1.08;
  letter-spacing:-.025em;
  text-transform:none;
}
.panel-heading > .card-title-block > .card-stage-summary {
  grid-area:summary;
  align-self:center;
  min-height:34px;
  padding:9px 0 9px 17px;
  border-left:1px solid rgba(188,215,225,.095);
  color:#8d9da3;
  font-size:10px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:.018em;
  text-transform:uppercase;
}
.card-title-block h2::before,
.card-stage-summary::before { display:none; }
.flow-card.is-complete .card-stage-summary { color:#91dcb0; }

.card-heading-actions { position:relative; z-index:2; }
.step-chip,
.card-collapse-toggle {
  width:36px;
  min-width:36px;
  height:36px;
  min-height:36px!important;
  border-radius:12px!important;
}
.step-chip {
  border-color:rgba(116,231,216,.22);
  background:linear-gradient(145deg,rgba(116,231,216,.1),rgba(116,231,216,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
.card-collapse-toggle {
  border-color:rgba(188,215,225,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 20px rgba(0,0,0,.16);
}

.output-card > .hint {
  margin:-3px 0 14px;
  color:#7f8f96;
  font-size:11px;
}
.output-card .buttons { gap:11px; }
body:not(.advanced-open) .output-card .buttons { grid-template-columns:1fr 1.08fr; }
.output-card button {
  min-height:51px;
  border-radius:14px;
  font-size:11px;
  font-weight:750;
  letter-spacing:.035em;
  transition:transform 160ms ease,border-color 180ms ease,box-shadow 180ms ease,filter 180ms ease;
}
.output-card button:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.05); }
.output-card button:active:not(:disabled) { transform:translateY(1px) scale(.992); }
.output-card .ab-compare {
  border:1px solid rgba(116,231,216,.29);
  color:#a8f4eb;
  background:linear-gradient(135deg,rgba(116,231,216,.11),rgba(116,231,216,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.output-card .secondary {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,230,188,.32);
  color:#17130d;
  background:linear-gradient(110deg,#dba965 0%,#f0ce97 52%,#d9ab6c 100%);
  box-shadow:0 14px 34px rgba(201,148,76,.17),inset 0 1px 0 rgba(255,255,255,.46);
}
.output-card .secondary::before { content:"↓"; display:inline-grid; place-items:center; width:20px; height:20px; margin-right:8px; border:1px solid rgba(34,26,16,.18); border-radius:7px; font-size:12px; }
.output-card .secondary::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  transform:translateX(-115%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
}
.output-card .secondary.is-exported { color:#06150d; background:linear-gradient(110deg,#78d7a2,#a7e7bd); box-shadow:0 14px 38px rgba(76,190,126,.2); }
.output-card .secondary.is-exported::before { content:"✓"; }
.output-card .secondary.is-exported::after { animation:premium-export-sheen .7s ease-out; }

.output-card .status {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px 12px;
  margin-top:17px;
  padding:16px;
  border:1px solid rgba(188,215,225,.09);
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.027),transparent 36%),
    rgba(4,9,13,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.status > #statusText {
  grid-column:1;
  min-height:0;
  padding:2px 0;
  color:#9caaaf;
  font-size:10px;
}
.status > #qcBadge { grid-column:2; align-self:center; }
.status > .meter {
  grid-column:1 / -1;
  min-height:37px;
  margin:0;
  padding:9px 11px;
  border:1px solid rgba(188,215,225,.065);
  border-radius:12px;
  background:rgba(255,255,255,.018);
}
.status > .meter > span:first-child { color:#79898f; font-size:9px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.status .meter-bar {
  height:4px;
  overflow:hidden;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55);
}
.status .meter-fill { background:linear-gradient(90deg,#72dfd2,#94dfb0 70%,#e5bb7e); box-shadow:0 0 12px rgba(116,231,216,.16); }
.status > .meter.gr { min-height:50px; }
.status .gr-row { grid-template-columns:38px 1fr 54px; gap:9px; }
.status .gr-label { color:#73838a; font-size:9px; }
.status .qc-badge,
.status .phase-status,
.status .gr-chip {
  padding:5px 9px;
  border-radius:999px;
  font-size:8px;
  font-weight:750;
  letter-spacing:.08em;
}

.output-card .player-shell {
  position:relative;
  margin-top:14px;
  padding:17px;
  border:1px solid rgba(116,231,216,.18);
  border-radius:19px;
  background:
    radial-gradient(420px 160px at 0 0,rgba(116,231,216,.075),transparent 70%),
    linear-gradient(145deg,rgba(13,25,29,.9),rgba(4,10,15,.9));
  box-shadow:0 18px 45px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
}
.player-main { gap:9px; }
.player-cta,
.player-mini {
  width:38px;
  height:38px;
  border-radius:12px;
  border-color:rgba(188,215,225,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 7px 18px rgba(0,0,0,.18);
}
.player-cta {
  color:#06130f!important;
  background:linear-gradient(145deg,#8cebdd,#65cdbf)!important;
  box-shadow:0 10px 24px rgba(73,201,184,.18),inset 0 1px 0 rgba(255,255,255,.4);
}
.player-time { margin-left:3px; color:#dce5e6; font-size:11px; }
.player-mode {
  padding:6px 10px;
  border-color:rgba(116,231,216,.22);
  color:#99e9df;
  background:rgba(116,231,216,.055);
  font-size:8px;
  font-weight:750;
}
.player-seek::-webkit-slider-runnable-track,
.player-volume::-webkit-slider-runnable-track {
  height:5px;
  background:linear-gradient(90deg,#d6aa70,#9ed9b2 52%,#69d9cb);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.player-seek::-moz-range-track,
.player-volume::-moz-range-track {
  height:5px;
  background:linear-gradient(90deg,#d6aa70,#9ed9b2 52%,#69d9cb);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.player-seek::-webkit-slider-thumb,
.player-volume::-webkit-slider-thumb {
  width:14px;
  height:14px;
  margin-top:-4.5px;
  border:2px solid #0a1115;
  background:#f1cf9c;
  box-shadow:0 0 0 2px rgba(231,185,121,.24),0 5px 12px rgba(0,0,0,.35);
}
.player-seek::-moz-range-thumb,
.player-volume::-moz-range-thumb {
  width:14px;
  height:14px;
  border:2px solid #0a1115;
  background:#f1cf9c;
  box-shadow:0 0 0 2px rgba(231,185,121,.24),0 5px 12px rgba(0,0,0,.35);
}

@keyframes premium-status-pulse {
  0%,100% { opacity:.72; box-shadow:0 0 8px rgba(139,226,175,.44); }
  50% { opacity:1; box-shadow:0 0 17px rgba(139,226,175,.78); }
}
@keyframes premium-export-sheen { to { transform:translateX(115%); } }

@media (min-width:760px) {
  .output-card .status { grid-template-columns:minmax(0,1fr) auto; }
  .status > .meter:not(.gr) { grid-column:auto; }
  .status > .meter.gr { grid-column:1 / -1; }
}

@media (max-width:900px) {
  .hero,
  .workflow-header,
  .grid.flow-grid,
  body.advanced-open .grid.flow-grid { width:min(100% - 28px,1120px); }
  .hero { min-height:96px; }
  .flow-grid .flow-card,body.advanced-open .flow-grid .flow-card { padding:20px; }
}

@media (max-width:600px) {
  .panel-heading > .card-title-block {
    grid-template-columns:1fr;
    grid-template-areas:"eyebrow" "title" "summary";
    row-gap:3px;
  }
  .panel-heading > .card-title-block > .card-stage-summary {
    min-height:0;
    margin-top:4px;
    padding:6px 0 0;
    border-top:1px solid rgba(188,215,225,.075);
    border-left:0;
    font-size:8px;
  }
  .flow-grid .flow-card.is-collapsed,
  body.advanced-open .flow-grid .flow-card.is-collapsed { min-height:96px!important; }
  body:not(.advanced-open) .output-card .buttons { grid-template-columns:1fr; }
  .output-card .status { grid-template-columns:1fr; }
  .status > #statusText,.status > #qcBadge,.status > .meter { grid-column:1; }
  .status > #qcBadge { justify-self:start; }
}

/* Premium source upload card — intentionally scoped to the open source card */
.source-card.is-active {
  border-color:rgba(83,205,190,.28);
  background:
    linear-gradient(145deg,rgba(255,255,255,.043),transparent 24%),
    radial-gradient(620px 300px at 50% 12%,rgba(54,169,158,.055),transparent 74%),
    linear-gradient(180deg,rgba(11,22,28,.98),rgba(6,14,19,.965));
  box-shadow:0 34px 100px rgba(0,0,0,.42),0 0 0 1px rgba(83,205,190,.035),inset 0 1px 0 rgba(255,255,255,.065);
}
.source-card.is-active::before {
  background:linear-gradient(90deg,transparent,rgba(101,224,209,.38),transparent);
}
.source-card .source-upload-area {
  position:relative;
  display:grid;
  gap:16px;
  padding:34px 18px 18px;
  overflow:hidden;
  border:1px dashed rgba(76,192,180,.31);
  border-radius:18px;
  background:
    radial-gradient(520px 270px at 50% 24%,rgba(59,186,172,.085),transparent 72%),
    linear-gradient(150deg,rgba(11,27,32,.72),rgba(5,14,19,.84));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.027),inset 0 0 72px rgba(43,161,150,.018);
  transition:border-color 200ms ease,background 200ms ease,box-shadow 200ms ease;
}
.source-card .source-upload-area::before { content:none; }
.source-card .source-upload-area:hover {
  border-color:rgba(93,217,203,.47);
  background:
    radial-gradient(540px 280px at 50% 24%,rgba(59,186,172,.115),transparent 72%),
    linear-gradient(150deg,rgba(12,30,35,.76),rgba(5,14,19,.86));
}
.source-card .source-upload-area.is-dragover {
  border-color:rgba(111,235,220,.78);
  background:
    radial-gradient(560px 290px at 50% 24%,rgba(68,210,194,.17),transparent 70%),
    linear-gradient(150deg,rgba(13,39,42,.84),rgba(5,18,22,.9));
  box-shadow:inset 0 0 0 1px rgba(111,235,220,.08),inset 0 0 80px rgba(48,190,176,.045),0 0 0 3px rgba(62,202,187,.045);
}
.source-card .source-file-input {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.source-card .source-drop-surface {
  position:relative;
  display:grid;
  min-height:300px;
  place-items:center;
  border-radius:14px;
  outline:none;
  cursor:pointer;
}
.source-card .source-drop-surface:focus-visible {
  box-shadow:0 0 0 2px #071216,0 0 0 4px rgba(111,235,220,.78);
}
.source-card .source-drop-prompt {
  display:grid;
  justify-items:center;
  gap:0;
  max-width:560px;
  padding:4px 24px 2px;
  text-align:center;
  animation:source-panel-in 220ms ease both;
}
.source-card .source-upload-mark {
  position:relative;
  display:grid;
  place-items:center;
  width:88px;
  height:88px;
  margin-bottom:21px;
  border:1px solid rgba(101,224,209,.28);
  border-radius:50%;
  color:#9aeee4;
  background:
    radial-gradient(circle at 38% 30%,rgba(255,255,255,.075),transparent 30%),
    linear-gradient(145deg,rgba(78,206,192,.11),rgba(22,92,90,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 18px 45px rgba(13,104,100,.11);
}
.source-card .source-wave-icon {
  width:46px;
  height:46px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.source-card .source-upload-arrow {
  position:absolute;
  right:-2px;
  bottom:-2px;
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border:1px solid rgba(169,250,239,.45);
  border-radius:50%;
  color:#e7fffb;
  background:linear-gradient(145deg,#3cae9f,#26786f);
  box-shadow:0 8px 20px rgba(14,91,85,.25),inset 0 1px 0 rgba(255,255,255,.24);
}
.source-card .source-upload-arrow svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.source-card .source-upload-copy h3 {
  margin:0;
  color:#edf7f6;
  font-size:18px;
  font-weight:590;
  letter-spacing:-.025em;
}
.source-card .source-upload-copy p {
  margin:6px 0 0;
  color:#8c9ea3;
  font-size:12px;
}
.source-card .source-choose-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:132px;
  min-height:44px;
  margin-top:21px;
  padding:0 18px;
  border:1px solid rgba(191,255,246,.28);
  border-radius:12px;
  color:#061512;
  background:linear-gradient(145deg,#79dfd1,#58bdb0);
  box-shadow:0 13px 30px rgba(45,168,155,.18),inset 0 1px 0 rgba(255,255,255,.39);
  font:inherit;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
  transition:transform 180ms ease,filter 180ms ease,box-shadow 180ms ease;
}
.source-card .source-choose-button svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linejoin:round;
}
.source-card .source-choose-button:hover:not(:disabled) {
  transform:translateY(-1px);
  filter:brightness(1.055);
  box-shadow:0 16px 34px rgba(45,168,155,.23),inset 0 1px 0 rgba(255,255,255,.42);
}
.source-card .source-choose-button:active:not(:disabled) { transform:translateY(1px) scale(.99); }
.source-card .source-choose-button:focus-visible,
.source-card .source-file-actions button:focus-visible,
.source-card .source-player-button:focus-visible {
  outline:2px solid rgba(142,244,232,.92);
  outline-offset:3px;
}
.source-card .source-format-chips {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:20px;
}
.source-card .source-format-chips span {
  padding:6px 10px;
  border:1px solid rgba(106,204,194,.16);
  border-radius:999px;
  color:#a4b7ba;
  background:rgba(80,183,173,.045);
  font-size:9px;
  font-weight:650;
  letter-spacing:.025em;
}
.source-card .source-privacy-note {
  display:flex;
  align-items:center;
  gap:7px;
  margin:18px 0 0;
  color:#92a5a8;
  font-size:10px;
  font-weight:560;
}
.source-card .source-privacy-note svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:#64d7c8;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.source-card .source-file-details {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  width:min(100%,720px);
  gap:15px;
  padding:20px;
  border:1px solid rgba(91,205,192,.19);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(72,185,173,.07),rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  animation:source-panel-in 220ms ease both;
}
.source-card .source-file-details[hidden],
.source-card .source-upload-status[hidden],
.source-card .source-upload-error[hidden] { display:none!important; }
.source-card .source-file-icon {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid rgba(102,222,207,.23);
  border-radius:13px;
  color:#89e8dc;
  background:rgba(75,190,178,.065);
}
.source-card .source-file-icon svg {
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.source-card .source-file-meta {
  display:grid;
  min-width:0;
  gap:4px;
  padding:0;
  color:#7f9297;
  font-size:9px;
}
.source-card .source-file-meta strong {
  overflow:hidden;
  color:#e7f1f1;
  font-size:12px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.source-card .source-file-meta span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.source-card .source-file-actions { display:flex; align-items:center; gap:7px; }
.source-card .source-file-actions button {
  min-height:34px;
  padding:0 11px;
  border:1px solid rgba(112,210,200,.17);
  border-radius:9px;
  color:#acd7d2;
  background:rgba(82,181,172,.055);
  font:inherit;
  font-size:9px;
  font-weight:700;
  cursor:pointer;
  transition:border-color 180ms ease,background 180ms ease,color 180ms ease;
}
.source-card .source-file-actions button:hover { border-color:rgba(116,231,216,.38); background:rgba(82,181,172,.1); }
.source-card .source-file-actions button.is-danger { border-color:rgba(227,104,112,.17); color:#dca4a8; background:rgba(189,68,76,.045); }
.source-card .source-file-actions button.is-danger:hover { border-color:rgba(239,116,124,.38); color:#ffc0c4; background:rgba(189,68,76,.1); }

.source-card .source-upload-status {
  display:grid;
  justify-items:center;
  gap:8px;
  color:#dcebea;
  text-align:center;
  animation:source-panel-in 180ms ease both;
}
.source-card .source-upload-status small { color:#82969a; font-size:10px; }
.source-card .source-upload-spinner {
  width:38px;
  height:38px;
  margin-bottom:6px;
  border:2px solid rgba(108,225,211,.13);
  border-top-color:#6fded0;
  border-radius:50%;
  animation:source-upload-spin .85s linear infinite;
}
.source-card .source-upload-error {
  position:absolute;
  left:50%;
  bottom:4px;
  display:flex;
  align-items:center;
  width:min(100% - 32px,650px);
  gap:9px;
  padding:10px 12px;
  border:1px solid rgba(235,102,112,.34);
  border-radius:11px;
  color:#ffc4c8;
  background:rgba(112,30,38,.29);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  font-size:10px;
  line-height:1.4;
  transform:translateX(-50%);
}
.source-card .source-upload-error svg {
  width:17px;
  min-width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.source-card .source-upload-area[data-upload-state="loading"] .source-drop-prompt,
.source-card .source-upload-area[data-upload-state="success"] .source-drop-prompt { display:none; }
.source-card .source-upload-area[data-upload-state="loading"] .source-drop-surface { cursor:progress; }
.source-card .source-upload-area[data-upload-state="success"] {
  border-style:solid;
  border-color:rgba(92,207,171,.28);
  background:
    radial-gradient(520px 250px at 50% 20%,rgba(57,176,143,.075),transparent 74%),
    linear-gradient(150deg,rgba(10,28,31,.72),rgba(5,14,19,.84));
}
.source-card .source-upload-area[data-upload-state="error"] { border-color:rgba(224,92,102,.4); }
.source-card .source-upload-area[data-upload-state="error"] .source-drop-surface { padding-bottom:46px; }
.source-card .source-upload-area[data-upload-state="error"] .source-file-details:not([hidden]) + .source-upload-status + .source-upload-error { bottom:-2px; }

.source-card .source-preview-player {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:auto auto minmax(140px,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:62px;
  margin:0;
  padding:10px 12px;
  border:1px solid rgba(104,194,185,.13);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(5,13,17,.83),rgba(8,18,22,.69));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.source-card .source-preview-player.ready { border-color:rgba(102,218,204,.25); }
.source-card .source-player-button {
  display:grid;
  place-items:center;
  width:38px;
  min-width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(157,242,231,.23);
  border-radius:11px;
  color:#071713;
  background:linear-gradient(145deg,#69d5c7,#42aa9e);
  box-shadow:0 8px 20px rgba(27,142,132,.16),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform 180ms ease,filter 180ms ease;
}
.source-card .source-player-button:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.06); }
.source-card .source-player-button:disabled { color:#617176; border-color:rgba(149,178,181,.09); background:rgba(122,152,155,.055); box-shadow:none; }
.source-card .source-player-button svg { width:15px; height:15px; }
.source-card .source-preview-time {
  display:flex;
  align-items:center;
  gap:4px;
  min-width:66px;
  color:#a6b6b9;
  font-size:9px;
  font-variant-numeric:tabular-nums;
}
.source-card .source-waveform-track {
  position:relative;
  height:42px;
  min-width:0;
  overflow:hidden;
  border-radius:8px;
}
.source-card .source-waveform-track:focus-within { box-shadow:0 0 0 2px rgba(111,235,220,.55); }
.source-card #sourceWaveform { display:block; width:100%; height:100%; }
.source-card .source-preview-seek {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.source-card .source-preview-seek:disabled { cursor:not-allowed; }
.source-card .source-preview-badge {
  margin:0;
  padding:6px 9px;
  border:1px solid rgba(102,218,204,.22);
  border-radius:999px;
  color:#82dfd4;
  background:rgba(71,183,172,.055);
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  white-space:nowrap;
}

@keyframes source-upload-spin { to { transform:rotate(360deg); } }
@keyframes source-panel-in {
  from { opacity:0; transform:translateY(5px); }
  to { opacity:1; transform:none; }
}

@media (max-width:700px) {
  .source-card .source-upload-area { padding:26px 12px 12px; }
  .source-card .source-drop-surface { min-height:320px; }
  .source-card .source-drop-prompt { padding-inline:12px; }
  .source-card .source-upload-mark { width:76px; height:76px; }
  .source-card .source-file-details { grid-template-columns:auto minmax(0,1fr); }
  .source-card .source-file-actions { grid-column:1 / -1; justify-content:flex-end; }
  .source-card .source-preview-player {
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:9px;
  }
  .source-card .source-preview-time { grid-column:2; grid-row:1; }
  .source-card .source-waveform-track { grid-column:1 / -1; grid-row:2; height:38px; }
  .source-card .source-preview-badge { grid-column:3; grid-row:1; }
}

@media (max-width:430px) {
  .source-card .source-upload-area { padding-top:22px; }
  .source-card .source-upload-copy h3 { font-size:16px; }
  .source-card .source-format-chips { gap:6px; }
  .source-card .source-format-chips span { padding:5px 8px; font-size:8px; }
  .source-card .source-file-details { padding:14px; }
  .source-card .source-file-icon { display:none; }
  .source-card .source-file-details { grid-template-columns:1fr; }
  .source-card .source-file-actions { grid-column:1; justify-content:flex-start; }
}

@media (prefers-reduced-motion:reduce) {
  .source-card .source-upload-spinner { animation-duration:1.6s; }
  .source-card .source-drop-prompt,
  .source-card .source-file-details,
  .source-card .source-upload-status { animation:none!important; }
}

/* Premium AI Mastering console */
.mastering-card .ready-state[hidden] { display:none; }
.mastering-card .ready-state {
  border-color:rgba(104,221,189,.24);
  color:#92e4c2;
  background:rgba(68,174,139,.08);
  letter-spacing:.07em;
}
.mastering-card .mastering-console {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(250px,.95fr) minmax(300px,1.08fr) minmax(225px,.78fr);
  grid-template-areas:
    "spectrum analysis controls"
    "error error error"
    "actions actions actions";
  align-items:stretch;
  gap:20px;
  min-height:0;
  margin-top:4px;
  padding:24px;
  overflow:hidden;
  border:1px solid rgba(101,215,198,.28);
  border-radius:19px;
  background:
    radial-gradient(620px 320px at 18% 42%,rgba(54,174,151,.075),transparent 72%),
    linear-gradient(145deg,rgba(14,27,33,.96),rgba(8,16,22,.96) 58%,rgba(10,20,25,.97));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 42px rgba(63,194,169,.025),
    0 22px 58px rgba(0,0,0,.3);
}
.mastering-card .mastering-console::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(115deg,rgba(157,245,229,.045),transparent 24%,transparent 74%,rgba(80,184,170,.025));
  pointer-events:none;
}
.mastering-card .mastering-console::after { display:none; }

.master-spectrum-panel {
  grid-area:spectrum;
  position:relative;
  place-self:center;
  width:min(100%,330px);
  aspect-ratio:1;
  min-width:0;
}
#masterSpectrumCanvas {
  display:block;
  width:100%;
  height:100%;
  filter:drop-shadow(0 0 18px rgba(64,207,181,.075));
}
.spectrum-marker {
  position:absolute;
  color:#71878d;
  font-size:8px;
  font-weight:650;
  line-height:1;
  letter-spacing:.025em;
  pointer-events:none;
}
.spectrum-marker-100 { left:1%; top:49%; transform:translateY(-50%); }
.spectrum-marker-1k { left:50%; top:1%; transform:translateX(-50%); }
.spectrum-marker-10k { right:0; top:49%; transform:translateY(-50%); }
.spectrum-marker-20k { right:8%; bottom:14%; }
.master-spectrum-caption {
  position:absolute;
  left:50%;
  bottom:4%;
  transform:translateX(-50%);
  color:#668087;
  font-size:7px;
  font-weight:800;
  letter-spacing:.18em;
  white-space:nowrap;
}

.master-analysis-panel {
  grid-area:analysis;
  align-self:center;
  min-width:0;
}
.master-analysis-panel > .panel-eyebrow { color:#6b858d; }
.mastering-card .master-analysis-panel h3 {
  margin:7px 0 6px;
  color:#eff8f7;
  font-size:20px;
  font-weight:670;
  letter-spacing:-.035em;
}
.mastering-card .master-analysis-panel > p {
  max-width:500px;
  margin:0;
  color:#8fa1a6;
  font-size:11px;
  line-height:1.55;
}
.master-metrics {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:19px;
}
.master-metric {
  min-width:0;
  min-height:76px;
  padding:13px 14px;
  border:1px solid rgba(190,220,220,.085);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(2,8,12,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
  transition:border-color 200ms ease,background 200ms ease,transform 200ms ease;
}
.master-metric > span {
  display:block;
  color:#7c9097;
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
}
.master-metric > strong {
  display:block;
  min-height:24px;
  margin-top:11px;
  color:#e8f4f2;
  font-size:16px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.025em;
}
.mastering-console[data-master-state="analyzed"] .master-metric,
.mastering-console[data-master-state="complete"] .master-metric {
  border-color:rgba(100,218,192,.16);
  background:linear-gradient(145deg,rgba(86,202,177,.045),rgba(2,8,12,.2));
}
.mastering-console[data-master-state="analyzed"] .master-metric > strong,
.mastering-console[data-master-state="complete"] .master-metric > strong { color:#a8f0df; }
.master-analysis-panel .ai-capabilities { gap:7px; margin-top:14px; }
.master-analysis-panel .ai-capabilities span {
  padding:5px 8px;
  border-color:rgba(173,211,213,.1);
  color:#8fa2a8;
  background:rgba(255,255,255,.018);
  font-size:8px;
  letter-spacing:.02em;
}

.master-control-panel {
  grid-area:controls;
  align-self:center;
  overflow:hidden;
  border:1px solid rgba(183,218,218,.095);
  border-radius:14px;
  background:linear-gradient(155deg,rgba(255,255,255,.024),rgba(1,7,11,.2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.mastering-card .master-control-panel .device-profile-control {
  padding:18px;
  border:0;
  border-radius:0;
  background:transparent;
}
.mastering-card .master-control-panel .device-profile-control label { gap:9px; }
.mastering-card .master-control-panel .device-profile-control select {
  min-height:45px;
  padding-inline:13px 34px;
  border:1px solid rgba(105,213,197,.2);
  border-radius:11px;
  color:#e9f4f2;
  background-color:rgba(4,12,16,.68);
  font-size:12px;
  font-weight:650;
  transition:border-color 200ms ease,box-shadow 200ms ease,background 200ms ease;
}
.mastering-card .master-control-panel .device-profile-control select:hover { border-color:rgba(105,213,197,.38); }
.mastering-card .master-control-panel .device-profile-control select:focus-visible {
  outline:0;
  border-color:#71ddca;
  box-shadow:0 0 0 3px rgba(105,213,197,.14);
}
.mastering-card .master-control-panel .device-profile-hint {
  margin-top:8px;
  color:#7f9298;
  font-size:9px;
  line-height:1.45;
  white-space:normal;
}
.mastering-card .master-control-panel .device-profile-hint.active { color:#91c9bf; }
.master-intensity-control {
  padding:18px;
  border-top:1px solid rgba(183,218,218,.075);
}
.master-intensity-segments {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-top:12px;
  padding-top:16px;
}
.master-intensity-segments::before {
  content:"";
  position:absolute;
  left:16.66%;
  right:16.66%;
  top:5px;
  height:1px;
  background:rgba(98,213,194,.21);
}
.master-intensity-option {
  position:relative;
  min-height:30px;
  padding:5px 3px;
  border:0;
  border-radius:8px;
  color:#76898f;
  background:transparent;
  font:inherit;
  font-size:9px;
  cursor:pointer;
  transition:color 180ms ease,background 180ms ease,transform 180ms ease;
}
.master-intensity-option::before {
  content:"";
  position:absolute;
  left:50%;
  top:-15px;
  width:8px;
  height:8px;
  transform:translateX(-50%);
  border:1px solid rgba(143,185,183,.22);
  border-radius:50%;
  background:#111d22;
  transition:border-color 180ms ease,box-shadow 180ms ease,background 180ms ease;
}
.master-intensity-option:hover { color:#bdcfce; background:rgba(106,214,196,.035); }
.master-intensity-option.is-selected { color:#e8f5f2; font-weight:750; }
.master-intensity-option.is-selected::before {
  border-color:#83e4d3;
  background:#65cdbb;
  box-shadow:0 0 0 3px rgba(101,205,187,.16),0 0 10px rgba(101,205,187,.22);
}
.master-intensity-option:focus-visible {
  outline:2px solid #78dfcd;
  outline-offset:2px;
}

.mastering-inline-error {
  grid-area:error;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:9px 12px;
  border:1px solid rgba(222,96,108,.34);
  border-radius:12px;
  color:#ffc8ce;
  background:rgba(122,35,47,.14);
}
.mastering-inline-error[hidden] { display:none; }
.mastering-inline-error > span {
  display:grid;
  place-items:center;
  width:20px;
  min-width:20px;
  height:20px;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:11px;
  font-weight:850;
}
.mastering-inline-error p { margin:0; color:inherit; font-size:10px; }

.mastering-card .mastering-console .smart-actions {
  grid-area:actions;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  width:100%;
}
.mastering-card .mastering-console .smart-action {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:67px;
  padding:11px 18px;
  border-radius:12px;
  white-space:normal;
  transition:transform 180ms ease,box-shadow 200ms ease,border-color 200ms ease,background 200ms ease,color 200ms ease;
}
.mastering-card .mastering-console .smart-action::before { position:absolute; left:calc(50% - 112px); margin:0; }
.mastering-card .mastering-console .smart-action-title { font-size:12px; font-weight:900; letter-spacing:.065em; }
.mastering-card .mastering-console .smart-action small {
  color:inherit;
  font-size:9px;
  font-weight:550;
  letter-spacing:0;
  opacity:.63;
}
.mastering-card .mastering-console .smart-analyze-action {
  border:1px solid rgba(146,244,225,.46);
  color:#08211c;
  background:linear-gradient(135deg,#8de8d5,#59c9b5);
  box-shadow:0 12px 28px rgba(55,188,164,.17),inset 0 1px 0 rgba(255,255,255,.35);
}
.mastering-card .mastering-console .smart-analyze-action::before { content:"✦"; color:#174a41; font-size:14px; }
.mastering-card .mastering-console .smart-apply-action {
  border:1px solid rgba(159,190,193,.2);
  color:#d5e3e2;
  background:rgba(255,255,255,.018);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.mastering-card .mastering-console .smart-apply-action::before { content:"◇"; color:#75cdbc; }
.mastering-card .mastering-console .smart-action:hover:not(:disabled) { transform:translateY(-1px); filter:none; }
.mastering-card .mastering-console .smart-analyze-action:hover:not(:disabled) {
  background:linear-gradient(135deg,#9cf0df,#64d2be);
  box-shadow:0 15px 32px rgba(55,188,164,.22),inset 0 1px 0 rgba(255,255,255,.4);
}
.mastering-card .mastering-console .smart-apply-action:hover:not(:disabled) {
  border-color:rgba(115,222,202,.42);
  color:#eafffa;
  background:rgba(98,211,190,.075);
}
.mastering-card .mastering-console .smart-action:focus-visible {
  outline:2px solid #8cebd9;
  outline-offset:3px;
}
.mastering-card .mastering-console .smart-action:disabled {
  color:#65757a;
  border-color:rgba(149,174,177,.12);
  background:rgba(255,255,255,.012);
  box-shadow:none;
  opacity:1;
}
.mastering-card .mastering-console .smart-action:disabled::before { color:#59686c; }
.mastering-card .mastering-console .smart-analyze-action:disabled { opacity:.46; }
.mastering-card .mastering-console .smart-action.is-loading {
  color:#dffaf5;
  border-color:rgba(108,221,200,.32);
  background:linear-gradient(135deg,rgba(49,143,127,.4),rgba(31,73,70,.42));
}
.mastering-card .mastering-console .smart-action.is-loading::before {
  content:"";
  width:14px;
  height:14px;
  border:2px solid rgba(222,255,249,.26);
  border-top-color:#dffbf5;
  border-radius:50%;
  animation:smart-action-spin .75s linear infinite;
}
.mastering-card .mastering-console .smart-analyze-action.is-ready {
  color:#d9fff7;
  border-color:rgba(111,225,203,.42);
  background:rgba(74,177,158,.16);
  box-shadow:none;
}
.mastering-card .mastering-console .smart-apply-action.is-success {
  color:#09231d;
  border-color:rgba(146,244,225,.46);
  background:linear-gradient(135deg,#91e7d4,#64cbb8);
}
.mastering-card .mastering-console .smart-action.is-error {
  color:#ffd2d7;
  border-color:rgba(223,96,108,.4);
  background:rgba(126,37,48,.18);
}
.mastering-card .mastering-console .analysis-progress {
  position:absolute;
  z-index:4;
  left:24px;
  right:24px;
  bottom:102px;
  padding:11px 13px;
  border-color:rgba(101,215,198,.25);
  background:rgba(5,14,18,.94);
}
.mastering-console[data-master-state="analyzing"] .master-spectrum-panel { filter:saturate(1.12); }
.mastering-console[data-master-state="error"] { border-color:rgba(218,94,105,.3); }
.mastering-console[data-master-state="complete"] { border-color:rgba(107,221,190,.38); }

body:not(.advanced-open) .mastering-card .mastering-console {
  min-height:0;
  grid-template-rows:auto auto;
}
body:not(.advanced-open) .mastering-card .mastering-console .smart-actions { align-self:stretch; }

@media (max-width:1080px) {
  .mastering-card .mastering-console {
    grid-template-columns:minmax(240px,.85fr) minmax(300px,1.15fr);
    grid-template-areas:
      "spectrum analysis"
      "controls controls"
      "error error"
      "actions actions";
  }
  .master-control-panel { display:grid; grid-template-columns:1fr 1fr; }
  .master-intensity-control { border-top:0; border-left:1px solid rgba(183,218,218,.075); }
}

@media (max-width:720px) {
  .mastering-card .mastering-console {
    grid-template-columns:1fr;
    grid-template-areas:"spectrum" "analysis" "controls" "error" "actions";
    gap:18px;
    padding:18px;
  }
  .master-spectrum-panel { width:min(88vw,300px); }
  .mastering-card .master-analysis-panel h3 { font-size:18px; }
  .master-control-panel { grid-template-columns:1fr; }
  .master-intensity-control { border-top:1px solid rgba(183,218,218,.075); border-left:0; }
  .mastering-card .mastering-console .smart-actions { grid-template-columns:1fr; }
  .mastering-card .mastering-console .analysis-progress { left:18px; right:18px; bottom:170px; }
}

@media (max-width:430px) {
  .mastering-card .mastering-console { padding:15px; border-radius:16px; }
  .master-metrics { gap:8px; }
  .master-metric { min-height:70px; padding:11px; }
  .master-metric > strong { font-size:14px; }
  .mastering-card .mastering-console .smart-action::before { left:22px; }
}

@media (prefers-reduced-motion:reduce) {
  .mastering-card .mastering-console *,
  .mastering-card .mastering-console *::before,
  .mastering-card .mastering-console *::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* Premium Quality & Delivery console */
.output-card .output-ready-text {
  color:#91daba;
  font-size:9px;
  font-weight:700;
  white-space:nowrap;
}
.output-card .output-ready-text[hidden],
.output-card .qc-badge[hidden] { display:none; }
.output-card .qc-badge {
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 10px;
  border:1px solid rgba(105,219,184,.22);
  border-radius:999px;
  color:#92e4c2;
  background:rgba(72,181,142,.075);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em;
}
.output-card .qc-badge.warn { border-color:rgba(224,190,104,.28); color:#f0d995; background:rgba(176,136,43,.08); }
.output-card .qc-badge.fail { border-color:rgba(222,98,110,.32); color:#ffc3ca; background:rgba(138,38,50,.11); }
.output-card .output-ready-text.is-warning { color:#ebd58f; }
.output-card .output-ready-text.is-error { color:#ffc0c8; }

.output-delivery-console {
  position:relative;
  isolation:isolate;
  display:grid;
  gap:14px;
  min-width:0;
  padding:2px 0 0;
}
.output-delivery-console::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-12px;
  border:1px solid rgba(99,207,190,.13);
  border-radius:19px;
  background:
    radial-gradient(680px 260px at 2% 0,rgba(62,179,156,.052),transparent 70%),
    linear-gradient(145deg,rgba(12,23,29,.55),rgba(5,12,17,.38));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 20px 56px rgba(0,0,0,.18);
  pointer-events:none;
}

.output-card .output-comparison-player {
  display:grid;
  gap:14px;
  min-height:0;
  margin:0;
  padding:16px 18px;
  border:1px solid rgba(171,211,211,.105);
  border-radius:14px;
  background:linear-gradient(155deg,rgba(5,14,19,.86),rgba(8,17,22,.76));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.output-player-toolbar {
  display:grid;
  grid-template-columns:auto auto auto 1fr auto;
  align-items:center;
  gap:12px;
}
.output-card .output-comparison-player .player-cta {
  display:grid;
  place-items:center;
  width:42px;
  min-width:42px;
  height:42px;
  min-height:42px;
  padding:0;
  border:1px solid rgba(150,241,224,.35);
  border-radius:11px;
  color:#07211c;
  background:linear-gradient(145deg,#8ce9d6,#55c5b2);
  box-shadow:0 9px 24px rgba(53,185,162,.15),inset 0 1px 0 rgba(255,255,255,.35);
}
.output-card .output-comparison-player .player-cta:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.04); }
.output-card .output-comparison-player .player-cta:disabled { color:#647478; background:rgba(255,255,255,.03); border-color:rgba(166,194,195,.1); box-shadow:none; }
.output-card .output-comparison-player .player-time {
  display:flex;
  align-items:center;
  gap:4px;
  min-width:74px;
  color:#b4c4c5;
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
.output-card .output-comparison-player .player-mode {
  justify-self:start;
  padding:5px 8px;
  border:1px solid rgba(104,213,195,.15);
  border-radius:999px;
  color:#82d7ca;
  background:rgba(84,190,173,.045);
  font-size:8px;
  font-weight:800;
  letter-spacing:.06em;
}
.output-volume-control {
  justify-self:end;
  display:flex;
  align-items:center;
  gap:9px;
  min-width:190px;
}
.output-card .output-volume-control .player-mini {
  display:grid;
  place-items:center;
  width:30px;
  min-width:30px;
  height:30px;
  min-height:30px;
  padding:0;
  border:0;
  color:#a6b8ba;
  background:transparent;
}
.output-card .output-volume-control .player-volume {
  width:150px;
  accent-color:#67d2be;
}
.output-loudness-toggle {
  display:flex;
  align-items:center;
  gap:9px;
  color:#a5b7b8;
  font-size:10px;
  cursor:pointer;
  white-space:nowrap;
}
.output-loudness-toggle input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.output-loudness-toggle i {
  position:relative;
  width:38px;
  height:21px;
  border:1px solid rgba(158,191,193,.18);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  transition:border-color 180ms ease,background 180ms ease;
}
.output-loudness-toggle i::after {
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#809094;
  transition:transform 180ms ease,background 180ms ease,box-shadow 180ms ease;
}
.output-loudness-toggle input:checked + i { border-color:rgba(108,220,198,.42); background:rgba(72,181,157,.28); }
.output-loudness-toggle input:checked + i::after { transform:translateX(17px); background:#d9fff7; box-shadow:0 0 9px rgba(113,224,203,.24); }
.output-loudness-toggle input:focus-visible + i { outline:2px solid #86e5d3; outline-offset:3px; }

.output-waveform-stage {
  position:relative;
  display:grid;
  gap:7px;
  min-height:94px;
  padding:4px 0;
}
.output-wave-row {
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:center;
  gap:10px;
  height:40px;
  opacity:.55;
  transition:opacity 200ms ease,filter 200ms ease;
}
.output-wave-row.is-active { opacity:1; }
.output-wave-row > span {
  color:#76898e;
  font-size:8px;
  font-weight:850;
  letter-spacing:.06em;
}
.output-wave-row.is-active > span { color:#7fe0ce; }
.output-wave-row canvas { display:block; width:100%; height:40px; }
.output-waveform-seek {
  position:absolute;
  z-index:3;
  left:64px;
  right:0;
  top:0;
  width:calc(100% - 64px);
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.output-waveform-seek:disabled { cursor:not-allowed; }
.output-waveform-stage:focus-within { border-radius:9px; box-shadow:0 0 0 2px rgba(111,225,205,.45); }
.output-playhead {
  position:absolute;
  z-index:2;
  top:2px;
  bottom:2px;
  left:64px;
  width:1px;
  background:rgba(222,255,249,.78);
  box-shadow:0 0 0 1px rgba(6,18,21,.5);
  pointer-events:none;
}
.output-playhead::before {
  content:"";
  position:absolute;
  left:50%;
  top:-2px;
  width:7px;
  height:7px;
  transform:translateX(-50%);
  border:1px solid rgba(213,255,248,.7);
  border-radius:50%;
  background:#4d9d91;
}
.output-ab-segments {
  justify-self:end;
  display:grid;
  grid-template-columns:1fr 1fr;
  width:min(100%,250px);
  padding:3px;
  border:1px solid rgba(160,196,198,.15);
  border-radius:11px;
  background:rgba(1,7,11,.3);
}
.output-card .output-ab-segments button {
  min-height:34px;
  padding:7px 13px;
  border:0;
  border-radius:8px;
  color:#87989c;
  background:transparent;
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  transition:color 180ms ease,background 180ms ease,box-shadow 180ms ease;
}
.output-card .output-ab-segments button.is-selected {
  color:#08201b;
  background:linear-gradient(145deg,#8ce6d4,#61cbbb);
  box-shadow:0 6px 16px rgba(53,185,162,.12),inset 0 1px 0 rgba(255,255,255,.28);
}
.output-card .output-ab-segments button:focus-visible { outline:2px solid #8ce8d7; outline-offset:3px; }
.output-card .output-ab-segments button:disabled { opacity:.42; cursor:not-allowed; }
.output-legacy-compare[hidden] { display:none!important; }

.output-lower-grid {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.9fr);
  gap:14px;
}
.output-qc-panel,
.output-delivery-panel {
  min-width:0;
  padding:18px;
  border:1px solid rgba(102,207,190,.19);
  border-radius:14px;
  background:linear-gradient(155deg,rgba(10,23,27,.7),rgba(5,12,17,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.028);
}
.output-qc-panel > .panel-eyebrow,
.output-delivery-panel > .panel-eyebrow { color:#74d9c5; }
.output-qc-metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}
.output-qc-metric {
  position:relative;
  min-width:0;
  min-height:126px;
  padding:13px 12px 11px;
  border:1px solid rgba(171,207,207,.1);
  border-radius:12px;
  background:rgba(3,10,14,.3);
  text-align:center;
  transition:border-color 200ms ease,background 200ms ease;
}
.output-qc-metric > span {
  display:block;
  min-height:18px;
  color:#819398;
  font-size:7px;
  font-weight:850;
  letter-spacing:.12em;
}
.output-qc-metric > strong {
  display:inline-block;
  margin-top:8px;
  color:#edf7f5;
  font-size:19px;
  font-weight:680;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.035em;
}
.output-qc-metric > small { margin-left:3px; color:#a1b0b2; font-size:8px; font-weight:700; }
.output-qc-scale {
  position:relative;
  height:4px;
  margin-top:18px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(212,105,113,.25),rgba(100,209,188,.36) 35% 75%,rgba(212,105,113,.22));
}
.output-qc-scale::before,
.output-qc-scale::after { content:""; position:absolute; top:-3px; width:1px; height:10px; background:rgba(173,199,200,.24); }
.output-qc-scale::before { left:0; }
.output-qc-scale::after { right:0; }
.output-qc-scale i {
  position:absolute;
  left:var(--qc-position,50%);
  top:50%;
  width:8px;
  height:8px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(225,255,249,.5);
  border-radius:50%;
  background:#58b7a5;
  box-shadow:0 0 0 3px rgba(63,158,142,.13);
}
.output-qc-metric > em {
  display:block;
  margin-top:10px;
  color:#75878c;
  font-size:7px;
  font-style:normal;
  font-weight:750;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.output-qc-metric[data-qc-state="pass"] { border-color:rgba(96,214,184,.2); background:rgba(62,164,137,.035); }
.output-qc-metric[data-qc-state="pass"] > em { color:#79d6b4; }
.output-qc-metric[data-qc-state="warn"] { border-color:rgba(224,188,96,.3); background:rgba(143,106,27,.055); }
.output-qc-metric[data-qc-state="warn"] > em { color:#ebd28a; }
.output-qc-metric[data-qc-state="warn"] .output-qc-scale i { background:#d5b759; }
.output-qc-metric[data-qc-state="fail"] { border-color:rgba(222,92,105,.34); background:rgba(126,34,46,.07); }
.output-qc-metric[data-qc-state="fail"] > em { color:#ffb9c1; }
.output-qc-metric[data-qc-state="fail"] .output-qc-scale i { background:#db6671; }
.output-qc-result {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(175,211,211,.075);
}
.output-qc-result p { margin:0; color:#a4b5b6; font-size:9px; line-height:1.4; }
.output-qc-result p span { display:inline-grid; place-items:center; width:17px; height:17px; margin-right:6px; border:1px solid currentColor; border-radius:50%; }
.output-delivery-console[data-delivery-state="ready"] .output-qc-result p,
.output-delivery-console[data-delivery-state="downloaded"] .output-qc-result p { color:#84dcb9; }
.output-delivery-console[data-delivery-state="downloaded"][data-qc-state="warn"] .output-qc-result p { color:#ead38f; }
.output-delivery-console[data-delivery-state="downloaded"][data-qc-state="fail"] .output-qc-result p { color:#ffbec6; }
.output-delivery-console[data-delivery-state="warning"] .output-qc-result p { color:#ead38f; }
.output-delivery-console[data-delivery-state="failed"] .output-qc-result p,
.output-delivery-console[data-delivery-state="error"] .output-qc-result p { color:#ffbec6; }
.output-qc-assurances { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.output-qc-assurances span {
  padding:5px 7px;
  border:1px solid rgba(97,208,177,.15);
  border-radius:999px;
  color:#79cfac;
  background:rgba(62,159,130,.055);
  font-size:7px;
  font-weight:850;
  letter-spacing:.08em;
  white-space:nowrap;
}
.output-qc-assurances span[hidden] { display:none; }

.output-delivery-panel { display:grid; align-content:start; gap:12px; }
.output-format-summary {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:3px;
  overflow:hidden;
  border:1px solid rgba(161,197,198,.12);
  border-radius:11px;
  background:rgba(3,10,14,.25);
}
.output-format-summary strong {
  display:grid;
  place-items:center;
  min-height:46px;
  padding:6px;
  border-right:1px solid rgba(161,197,198,.1);
  color:#89dccb;
  font-size:10px;
  font-weight:750;
  white-space:nowrap;
}
.output-format-summary strong:last-child { border-right:0; }
.output-card .output-delivery-settings-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  border:1px solid rgba(104,211,192,.28);
  border-radius:11px;
  color:#83daca;
  background:rgba(81,183,164,.035);
  font-size:9px;
  font-weight:750;
}
.output-card .output-delivery-settings-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.35; }
.output-card .output-delivery-settings-btn:hover { border-color:rgba(104,211,192,.46); background:rgba(81,183,164,.07); }
.output-card .output-delivery-settings-btn:focus-visible { outline:2px solid #88e4d2; outline-offset:3px; }
.output-delivery-settings {
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid rgba(163,198,199,.1);
  border-radius:11px;
  background:rgba(2,8,12,.27);
}
.output-delivery-settings[hidden] { display:none; }
.output-delivery-settings > label:first-child { display:grid; grid-template-columns:1fr minmax(130px,.9fr); align-items:center; gap:10px; color:#9bacaf; font-size:9px; }
.output-delivery-settings select { min-height:34px; border-color:rgba(104,211,192,.2); border-radius:9px; color:#e4f1ef; background:rgba(3,10,14,.6); }
.output-delivery-settings .toggle-inline { min-height:28px; }
.output-card .output-download-btn {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  overflow:hidden;
  border:1px solid rgba(150,243,225,.42);
  border-radius:11px;
  color:#08211c;
  background:linear-gradient(135deg,#8de8d5,#5ac9b6);
  box-shadow:0 12px 28px rgba(54,186,162,.16),inset 0 1px 0 rgba(255,255,255,.34);
  font-size:10px;
  font-weight:900;
  letter-spacing:.07em;
  transition:transform 180ms ease,background 200ms ease,box-shadow 200ms ease;
}
.output-card .output-download-btn::before,
.output-card .output-download-btn::after { display:none; content:none; }
.output-card .output-download-btn.is-exported::before,
.output-card .output-download-btn.is-exported::after { display:none!important; content:none!important; }
.output-card .output-download-btn svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.output-card .output-download-btn:hover:not(:disabled) { transform:translateY(-1px); filter:none; background:linear-gradient(135deg,#9aefde,#66d0bd); box-shadow:0 15px 32px rgba(54,186,162,.21),inset 0 1px 0 rgba(255,255,255,.38); }
.output-card .output-download-btn:focus-visible { outline:2px solid #9af0df; outline-offset:3px; }
.output-card .output-download-btn:disabled { color:#627277; border-color:rgba(159,187,188,.12); background:rgba(255,255,255,.02); box-shadow:none; opacity:1; cursor:not-allowed; }
.output-card .output-download-btn.is-loading { color:#dffbf5; border-color:rgba(105,218,197,.28); background:rgba(54,142,127,.24); cursor:progress; }
.output-card .output-download-btn.is-loading svg { animation:output-download-pulse .8s ease-in-out infinite alternate; }
.output-card .output-download-btn.is-exported { color:#08211c; background:linear-gradient(135deg,#95e7d1,#68c9b4); }
.output-delivery-meta { margin:0; color:#87999e; font-size:9px; text-align:center; }
.output-delivery-warning {
  margin:0;
  padding:9px 10px;
  border:1px solid rgba(222,103,113,.26);
  border-radius:9px;
  color:#ffc2c9;
  background:rgba(124,34,45,.08);
  font-size:8px;
  line-height:1.45;
}
.output-delivery-warning[hidden] { display:none; }
.output-engine-actions { gap:8px; }
body.advanced-open .output-card .output-engine-actions.advanced-only { display:grid; grid-template-columns:repeat(3,1fr); }
.output-card .output-legacy-status { margin-top:0; }

@keyframes output-download-pulse { to { transform:translateY(2px); opacity:.65; } }

@media (max-width:1040px) {
  .output-player-toolbar { grid-template-columns:auto auto 1fr auto; }
  .output-player-toolbar .player-mode { display:none; }
  .output-loudness-toggle { grid-column:4; }
  .output-volume-control { grid-column:3; }
  .output-lower-grid { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  .output-card .output-ready-text { display:none; }
  .output-card .output-comparison-player { padding:14px; }
  .output-player-toolbar { grid-template-columns:auto 1fr auto; gap:9px; }
  .output-volume-control { grid-column:1 / -1; grid-row:2; justify-self:stretch; min-width:0; }
  .output-card .output-volume-control .player-volume { width:100%; }
  .output-loudness-toggle { grid-column:3; grid-row:1; }
  .output-loudness-toggle > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .output-wave-row { grid-template-columns:48px minmax(0,1fr); gap:7px; }
  .output-waveform-seek { left:55px; width:calc(100% - 55px); }
  .output-playhead { left:55px; }
  .output-qc-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .output-qc-result { align-items:flex-start; flex-direction:column; }
  .output-qc-assurances { justify-content:flex-start; }
}

@media (max-width:430px) {
  .output-qc-panel,.output-delivery-panel { padding:14px; }
  .output-format-summary { grid-template-columns:repeat(2,1fr); }
  .output-format-summary strong:nth-child(2) { border-right:0; }
  .output-format-summary strong:nth-child(-n+2) { border-bottom:1px solid rgba(161,197,198,.1); }
  .output-ab-segments { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  .output-delivery-console *,
  .output-delivery-console *::before,
  .output-delivery-console *::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}