:root {
  color-scheme: dark;
  --bg: #050812;
  --panel: rgba(12,18,33,.84);
  --panel-2: rgba(18,27,45,.9);
  --ink: #f8fbff;
  --muted: #aab7ca;
  --line: rgba(255,255,255,.13);
  --blue: #4f8cff;
  --cyan: #22d3ee;
  --green: #34d399;
  --rose: #fb7185;
  --gold: #f6c56f;
  --radius: 8px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 16% 0%, rgba(79,140,255,.24), transparent 28%),
    radial-gradient(circle at 82% 6%, rgba(34,211,238,.18), transparent 26%),
    linear-gradient(180deg, #050812 0%, #090e1b 52%, #050812 100%);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}
a { color: inherit; }
button, input, select { font: inherit; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 18px;
  padding: 14px clamp(18px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  background: rgba(5,8,18,.86);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius); background: #050812; border: 1px solid rgba(255,255,255,.14); color: #07111d; font-weight: 900; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.24); }
.mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand strong, .brand small { display: block; }
.brand small, .status-pill, p, .meter span { color: var(--muted); }
.top-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.top-actions a, .status-pill { border: 1px solid var(--line); border-radius: 999px; padding: 9px 12px; background: rgba(255,255,255,.05); font-size: 13px; text-decoration: none; }
.status-pill { color: #b8fff5; }

.lab { padding: clamp(22px, 4vw, 56px); display: grid; gap: 18px; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 24px;
  align-items: stretch;
}
.hero-copy, .upload-card, .main-deck, .meter-panel, .preset-panel, .control-bank, .export-panel, .admin-panel, .report-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  box-shadow: 0 24px 70px rgba(0,0,0,.26);
}
.hero-copy { padding: clamp(22px, 4vw, 40px); }
.eyebrow { display: inline-flex; width: max-content; max-width: 100%; color: #aaf7ff; border: 1px solid rgba(34,211,238,.32); border-radius: 999px; padding: 7px 10px; background: rgba(34,211,238,.08); font-size: 12px; font-weight: 850; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(40px, 6vw, 74px); line-height: .98; max-width: 950px; margin-bottom: 16px; }
h2 { font-size: 22px; margin-bottom: 0; }
.hero p { font-size: 18px; line-height: 1.55; max-width: 860px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.hero-stats span { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.055); padding: 12px; color: var(--muted); font-size: 12px; }
.hero-stats strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; font-variant-numeric: tabular-nums; }

.upload-stack { display: grid; gap: 14px; }
.upload-card { cursor: pointer; display: grid; align-content: center; gap: 12px; padding: 26px; min-height: 210px; }
.upload-card.compact { min-height: 148px; }
.upload-card.dragging { border-color: rgba(34,211,238,.65); background: rgba(34,211,238,.1); }
.upload-card input { display: none; }
.upload-card strong { display: inline-flex; width: max-content; min-height: 46px; align-items: center; padding: 0 16px; border-radius: var(--radius); background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #07111d; }
.upload-card small { color: var(--muted); word-break: break-word; }

.workstation { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.main-deck { padding: 18px; min-width: 0; }
.deck-head, .panel-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.time { color: var(--muted); font-variant-numeric: tabular-nums; }
.wave-wrap { position: relative; display: grid; gap: 8px; }
canvas { display: block; width: 100%; height: 300px; background: #040814; border: 1px solid var(--line); border-radius: var(--radius); cursor: ew-resize; touch-action: none; user-select: none; }
.zoom-strip { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.zoom-strip span { position: absolute; inset-block: 0; left: 0; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.signal-map { display:grid; grid-template-columns:minmax(190px,260px) minmax(0,1fr); gap:14px; align-items:center; margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.035); }
.signal-map strong,.signal-map span { display:block; }
.signal-map strong { font-size:13px; }
.signal-map span { margin-top:5px; color:var(--muted); font-size:11px; line-height:1.4; }
.signal-map canvas { height:118px; min-height:118px; border-radius:6px; }

.transport-row, .timeline-tools, .export-actions, .history-actions, .session-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.command, .marker-row button { min-height: 42px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.06); color: var(--ink); padding: 0 14px; font-weight: 820; text-decoration: none; cursor: pointer; }
.command:disabled { opacity: .5; cursor: not-allowed; }
.command.primary { background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #06111d; border: 0; }
.icon-command { min-width: 58px; padding: 0 10px; }
.ab-switch { display: inline-grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.055); min-width: 330px; }
.ab-switch button { min-height: 34px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; padding: 0 10px; cursor: pointer; font-weight: 850; }
.ab-switch button.active { background: linear-gradient(135deg, rgba(79,140,255,.95), rgba(34,211,238,.95)); color: #06111d; }
.loop-toggle { display: flex; align-items: center; gap: 8px; color: var(--muted); min-height: 42px; }
.timeline-tools label { flex: 1 1 220px; display: grid; gap: 7px; color: #dbe6f5; font-size: 13px; font-weight: 760; }
.timeline-tools input, .knob input { width: 100%; accent-color: var(--cyan); }
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  height: 26px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79,140,255,.96), rgba(34,211,238,.96));
  border: 1px solid rgba(255,255,255,.22);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: #f8fbff;
  border: 3px solid var(--cyan);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79,140,255,.96), rgba(34,211,238,.96));
  border: 1px solid rgba(255,255,255,.22);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f8fbff;
  border: 3px solid var(--cyan);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
input[type="range"]:focus-visible {
  outline: 2px solid rgba(34,211,238,.55);
  outline-offset: 4px;
}
.timeline-tools span, .knob span { color: var(--muted); font-weight: 700; }
.marker-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.marker-row button { min-height: 36px; color: #d8e3f5; }

.meter-panel { padding: 16px; display: grid; gap: 10px; align-content: start; }
.meter { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.meter:last-child { border-bottom: 0; padding-bottom: 0; }
.meter strong { font-variant-numeric: tabular-nums; text-align: right; }

.controls { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; }
.preset-panel, .control-bank, .export-panel, .admin-panel, .report-panel { padding: 18px; }
.preset-grid { display: grid; gap: 10px; }
.preset-grid button { position:relative; min-height: 58px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--ink); text-align: left; padding: 10px 12px; cursor: pointer; transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease; }
.preset-grid button strong, .preset-grid button span { display: block; }
.preset-grid button span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.preset-grid button:hover { border-color: color-mix(in srgb,var(--cyan) 62%,var(--line)); transform:translateY(-1px); }
.preset-grid button.active { border-color:#58e9ff; background:linear-gradient(135deg,rgba(34,211,238,.28),rgba(79,140,255,.26)); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 12px 26px rgba(34,211,238,.18); }
.preset-grid button.active::after { content:'Active'; position:absolute; top:10px; right:10px; border:1px solid rgba(255,255,255,.62); border-radius:999px; padding:2px 7px; color:#fff; background:rgba(4,8,20,.36); font-size:10px; font-weight:850; letter-spacing:.03em; }
.preset-grid button.active span { color:#e9fbff; }
.preset-grid button:focus-visible,.reference-match-panel .command:focus-visible { outline:3px solid #9af4ff; outline-offset:3px; }
.reference-match-panel { margin-top:16px; padding:13px; border:1px solid color-mix(in srgb,var(--cyan) 28%,var(--line)); border-radius:var(--radius); background:rgba(34,211,238,.055); }
.reference-match-panel.applied { border-color:rgba(88,233,255,.85); background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(79,140,255,.11)); box-shadow:inset 0 0 0 1px rgba(88,233,255,.14); }
.reference-match-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.reference-match-panel strong { display:block; font-size:13px; }
.reference-match-head span { border:1px solid var(--line); border-radius:999px; padding:3px 8px; color:var(--muted); font-size:11px; font-weight:800; }
.reference-match-panel.applied .reference-match-head span { border-color:rgba(88,233,255,.7); color:#e9fbff; background:rgba(34,211,238,.16); }
.reference-match-panel p { color:var(--muted); font-size:12px; line-height:1.45; margin:7px 0 11px; }
.reference-strength { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center; color:var(--muted); font-size:12px; font-weight:800; }
.reference-strength input { min-width:0; }
.reference-strength > span { color:var(--ink); font-variant-numeric:tabular-nums; }
.reference-profile { display:grid; gap:5px; margin:11px 0; padding:10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.reference-match-panel .command { width:100%; }
.control-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.knob { position: relative; display: grid; gap: 8px; color: #dbe6f5; font-size: 13px; font-weight: 760; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.045); padding: 12px; min-width: 0; }
.has-help { position: relative; }
.help { display: none; position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px); z-index: 8; color: #06111d; background: #e7faff; border: 1px solid rgba(34,211,238,.45); border-radius: var(--radius); box-shadow: 0 14px 38px rgba(0,0,0,.28); padding: 9px 10px; font-size: 12px; line-height: 1.35; font-weight: 700; }
.has-help:hover .help, .has-help:focus-within .help { display: block; }

.report-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; }
.report-list { display: grid; gap: 10px; }
.report-list div { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.045); padding: 12px; }
.report-list strong, .report-list span { display: block; }
.report-list span { color: var(--muted); margin-top: 4px; line-height: 1.4; }
.session-actions { margin-top: 0; margin-bottom: 12px; }

.export-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.export-panel p { margin-bottom: 0; max-width: 820px; line-height: 1.5; }
.format-select { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.format-select select { min-height: 42px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.08); color: var(--ink); padding: 0 10px; }
.server-result { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); }
.server-result strong { color: var(--green); }
.admin-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-panel strong, .admin-panel span { display: block; }
.admin-panel span { color: var(--muted); margin-top: 4px; }
.hidden { display: none !important; }

@media (max-width: 1180px) {
  .workstation, .controls, .report-grid, .export-panel { grid-template-columns: 1fr; }
  .control-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .topbar, .admin-panel { align-items: flex-start; flex-direction: column; }
  .hero { grid-template-columns: 1fr; }
  .hero-stats, .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-switch { min-width: 100%; }
}

@media (max-width: 640px) {
  .top-actions, .transport-row, .timeline-tools, .export-actions, .session-actions, .history-actions { width: 100%; }
  .top-actions a, .status-pill, .command, .ab-switch, .loop-toggle, .format-select { width: 100%; }
  .ab-switch { grid-template-columns: 1fr; }
  .hero-stats, .control-grid { grid-template-columns: 1fr; }
  .deck-head, .panel-head { align-items: flex-start; flex-direction: column; }
  canvas { height: 240px; }
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  .topbar {
    min-height: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
    gap: 10px;
  }
  .brand {
    min-width: 0;
  }
  .brand strong {
    font-size: 15px;
  }
  .brand small {
    font-size: 11px;
  }
  .mark {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
  }
  .top-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .top-actions a,
  .status-pill {
    min-height: 40px;
    justify-content: center;
    text-align: center;
  }
  .status-pill {
    grid-column: 1 / -1;
  }
  .lab {
    padding: 14px 14px calc(env(safe-area-inset-bottom, 0px) + 28px);
    gap: 14px;
  }
  h1 {
    font-size: clamp(34px, 11vw, 52px);
    line-height: 1;
  }
  .hero-copy,
  .main-deck,
  .meter-panel,
  .preset-panel,
  .control-bank,
  .export-panel,
  .admin-panel,
  .report-panel {
    padding: 16px;
  }
  .upload-card {
    min-height: 144px;
    padding: 18px;
  }
  .upload-card.compact {
    min-height: 118px;
  }
  .transport-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .transport-row .command {
    min-width: 0;
    padding: 0 8px;
  }
  .ab-switch,
  .loop-toggle {
    grid-column: 1 / -1;
  }
  .ab-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }
  .ab-switch button {
    padding: 0 6px;
    font-size: 12px;
  }
  canvas {
    height: 220px;
  }
  .timeline-tools label,
  .format-select {
    flex: 1 1 100%;
  }
  .preset-grid {
    grid-template-columns: 1fr;
  }
  .signal-map { grid-template-columns:1fr; }
  .control-grid {
    grid-template-columns: 1fr;
  }
  .help {
    position: static;
    display: block;
    margin-top: 3px;
    color: var(--muted);
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    font-weight: 650;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .transport-row {
    align-items: stretch;
  }
  .command,
  .loop-toggle {
    min-height: 44px;
  }
}

/* 20260830 readable workstation system */
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif; font-size: 17px; line-height: 1.5; }
h1, h2, h3, strong, button, label, select, input { font-family: inherit; }
h1 { max-width: 880px; font-size: clamp(42px,5vw,62px); line-height: 1.04; letter-spacing: -.035em; }
h2 { font-size: clamp(25px,2.2vw,34px); line-height: 1.14; }
p { line-height: 1.6; }
small { font-size: 15px; line-height: 1.45; }
.topbar { min-height: 88px; padding-top: 12px; padding-bottom: 12px; }
.brand strong { font-size: 18px; }
.brand small { margin-top: 3px; font-size: 15px; }
.top-actions { justify-content: flex-end; }
.top-actions a, .status-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; font-size: 15px; font-weight: 700; }
.eyebrow { padding: 8px 11px; font-size: 14px; letter-spacing: .05em; }
.hero { gap: 22px; }
.hero-copy, .upload-card, .main-deck, .meter-panel, .preset-panel, .control-bank, .export-panel, .admin-panel, .report-panel { border-radius: 16px; }
.hero p { max-width: 820px; font-size: 19px; }
.hero-stats span { min-height: 84px; padding: 14px; font-size: 15px; }
.hero-stats strong { font-size: 19px; }
.upload-card { border-width: 2px; }
.upload-card > span { font-size: 16px; }
.upload-card strong { min-height: 52px; font-size: 17px; }
.upload-card small { font-size: 16px; }
#workstation, #targets, #processing, #export { scroll-margin-top: 112px; }
.deck-head, .panel-head { margin-bottom: 18px; }
.time { font-size: 16px; }
.signal-map { grid-template-columns: minmax(220px,300px) minmax(0,1fr); padding: 18px; }
.signal-map strong { font-size: 18px; }
.signal-map span { font-size: 16px; }
.command, .marker-row button { min-height: 48px; padding: 10px 16px; font-size: 16px; }
.ab-switch { min-width: 430px; }
.ab-switch button { min-height: 44px; font-size: 15px; }
.loop-toggle { min-height: 48px; color: #e2e8f2; font-size: 16px; }
.timeline-tools label, .knob { font-size: 16px; }
.timeline-tools span, .knob span { color: #eef3fa; font-size: 16px; }
.marker-row button { min-height: 44px; }
.workstation { grid-template-columns: minmax(0,1fr) 340px; }
.meter-panel { padding: 20px; gap: 0; }
.meter { min-height: 58px; padding: 12px 0; }
.meter span { color: #c6d0df; font-size: 16px; }
.meter strong { font-size: 17px; }
.controls { grid-template-columns: 390px minmax(0,1fr); }
.preset-panel, .control-bank, .export-panel, .admin-panel, .report-panel, .main-deck { padding: 24px; }
.preset-grid button { min-height: 76px; padding: 14px 16px; }
.preset-grid button strong { font-size: 17px; }
.preset-grid button span { font-size: 15px; }
.preset-grid button.active::after { top: 13px; right: 13px; font-size: 13px; }
.reference-match-panel { padding: 18px; }
.reference-match-panel strong { font-size: 18px; }
.reference-match-head span, .reference-strength, .reference-profile, .reference-match-panel p { font-size: 15px; }
.control-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.knob { min-height: 158px; padding: 16px; }
.help { left: 10px; right: 10px; padding: 12px 14px; font-size: 15px; line-height: 1.45; }
.report-list, .report-panel > p, .export-panel p, .admin-panel span, .server-result { font-size: 16px; }
.report-list div { padding: 16px; }
.format-select { font-size: 16px; }
.format-select select { min-height: 48px; font-size: 16px; }
:focus-visible { outline: 3px solid #9af4ff; outline-offset: 3px; }

@media (max-width: 1260px) {
  .workstation, .controls, .report-grid, .export-panel { grid-template-columns: 1fr; }
  .meter-panel { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; }
  .control-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 920px) {
  .topbar { position: relative; }
  .top-actions { width: 100%; justify-content: flex-start; }
  .lab { padding: 18px; }
  .hero-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .signal-map { grid-template-columns: 1fr; }
  .ab-switch { min-width: 100%; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 20px; }
  .topbar { padding: 14px; }
  .brand strong { font-size: 17px; }
  .brand small { display: block; font-size: 14px; }
  .top-actions { display: flex; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 5px; }
  .top-actions a, .status-pill { width: auto; flex: 0 0 auto; font-size: 15px; }
  .status-pill { grid-column: auto; }
  .lab { padding: 14px; }
  h1 { font-size: clamp(38px,11vw,48px); }
  .hero-copy, .main-deck, .meter-panel, .preset-panel, .control-bank, .export-panel, .admin-panel, .report-panel { padding: 20px; }
  .hero-stats, .meter-panel, .control-grid { grid-template-columns: 1fr; }
  .transport-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .transport-row .command { min-height: 50px; }
  .ab-switch { grid-template-columns: 1fr; }
  .ab-switch button { min-height: 48px; font-size: 16px; }
  .help { position: static; display: block; margin-top: 4px; padding: 0; border: 0; background: transparent; color: var(--muted); box-shadow: none; }
}

/* 20260830 compact workstation correction */
body { font-family:"Aptos","Segoe UI Variable Text","Segoe UI",Arial,sans-serif; font-size:16px; line-height:1.5; }
h1, h2, h3 { font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI",Arial,sans-serif; font-weight:650; letter-spacing:-.025em; }
.topbar { min-height:76px; padding-top:10px; padding-bottom:10px; }
.mark { width:40px; height:40px; }
.brand strong { font-size:17px; }
.brand small { font-size:14px; }
.top-actions { gap:8px; }
.top-actions a, .status-pill { min-height:40px; padding:8px 12px; font-size:14px; }
.lab { padding:clamp(18px,2.6vw,38px); gap:16px; }
.hero { grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:16px; }
.hero-copy { padding:clamp(24px,3vw,34px); }
h1 { max-width:780px; margin:13px 0 12px; font-size:clamp(36px,3.5vw,50px); line-height:1.06; }
h2 { font-size:clamp(23px,1.9vw,30px); }
.eyebrow { padding:7px 10px; font-size:12px; }
.hero p { max-width:760px; margin-bottom:0; font-size:17px; line-height:1.55; }
.hero-stats { margin-top:18px; gap:8px; }
.hero-stats span { min-height:68px; padding:11px 12px; font-size:13px; }
.hero-stats strong { font-size:17px; }
.upload-stack { gap:10px; }
.upload-card, .upload-card.compact { min-height:0; padding:20px; gap:9px; }
.upload-card > span { font-size:14px; }
.upload-card strong { min-height:44px; padding:0 14px; font-size:15px; }
.upload-card small { font-size:14px; }
.hero-copy, .upload-card, .main-deck, .meter-panel, .preset-panel, .control-bank, .export-panel, .admin-panel, .report-panel { border-radius:10px; }
.workstation { grid-template-columns:minmax(0,1fr) 300px; gap:16px; }
.controls { grid-template-columns:340px minmax(0,1fr); gap:16px; }
.main-deck, .preset-panel, .control-bank, .export-panel, .admin-panel, .report-panel { padding:20px; }
.signal-map strong, .meter strong, .preset-grid button strong { font-size:16px; }
.signal-map span, .meter span, .preset-grid button span, small { font-size:14px; }
.command, .marker-row button { min-height:42px; padding:8px 13px; font-size:14px; }
.ab-switch { min-width:390px; }
.ab-switch button, .loop-toggle, .timeline-tools label, .knob, .timeline-tools span, .knob span { font-size:14px; }
.meter-panel { padding:16px; }
.meter { min-height:52px; padding:9px 0; }

@media (max-width: 980px) {
  .hero { grid-template-columns:1fr; }
  .upload-stack { grid-template-columns:1fr 1fr; }
  .workstation, .controls { grid-template-columns:1fr; }
}

@media (max-width: 640px) {
  .topbar { min-height:70px; }
  .lab { padding:14px; }
  h1 { font-size:clamp(34px,10vw,44px); }
  .upload-stack { grid-template-columns:1fr; }
  .hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ab-switch { min-width:0; }
}

/* 20260830 visibly distinct session launcher */
.session-start { grid-template-columns:minmax(0,1fr) minmax(520px,.9fr); align-items:stretch; gap:12px; }
.session-start .hero-copy { display:grid; align-content:center; padding:24px 28px; background:linear-gradient(135deg,rgba(79,140,255,.11),rgba(255,255,255,.025)); box-shadow:none; }
.session-start .hero-copy h1 { max-width:none; margin:10px 0 8px; font-size:clamp(30px,2.7vw,40px); line-height:1.08; }
.session-start .hero-copy p { max-width:720px; font-size:15px; line-height:1.5; }
.session-start .hero-stats { grid-template-columns:repeat(4,minmax(100px,1fr)); margin-top:14px; }
.session-start .hero-stats span { min-height:58px; padding:9px 10px; font-size:12px; }
.session-start .hero-stats strong { font-size:15px; }
.session-start .upload-stack { grid-template-columns:1fr 1fr; gap:12px; }
.session-start .upload-card,.session-start .upload-card.compact { min-height:0; padding:18px; align-content:center; }
.session-start .upload-card strong { min-height:40px; font-size:14px; }

@media(max-width:1100px){
  .session-start { grid-template-columns:1fr; }
}
@media(max-width:640px){
  .session-start .upload-stack,.session-start .hero-stats { grid-template-columns:1fr 1fr; }
  .session-start .hero-copy h1 { font-size:32px; }
}

/* 20260830 studio-v2: independent mastering product design */
:root {
  color-scheme: light;
  --bg: #e7e3da;
  --panel: #fbfaf6;
  --panel-2: #f1eee7;
  --ink: #181713;
  --muted: #68645c;
  --line: #cbc5b9;
  --blue: #b76522;
  --cyan: #d58a39;
  --green: #3f7654;
  --rose: #a7473d;
  --gold: #c27a2c;
  --radius: 5px;
}
body {
  background: #e7e3da !important;
  color: var(--ink) !important;
  font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif !important;
}
.topbar {
  position: sticky;
  background: #181815 !important;
  border-color: #35342f !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: none !important;
}
.topbar .brand strong,
.topbar .top-actions a { color: #f7f3e9 !important; }
.topbar .brand small { color: #aaa59b !important; }
.topbar .mark {
  background: #0d0d0c !important;
  border-color: #514e46 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}
.top-actions a,
.status-pill {
  border-color: #4a4841 !important;
  border-radius: 3px !important;
  background: #22221f !important;
  color: #ebe6da !important;
}
.top-actions a:hover { border-color: #d58a39 !important; background: #2b2924 !important; }
.status-pill { color: #e4ad6f !important; }
.lab { max-width: 1720px; width: 100%; margin: 0 auto; }
.hero-copy,
.upload-card,
.main-deck,
.meter-panel,
.preset-panel,
.control-bank,
.export-panel,
.admin-panel,
.report-panel {
  background: #fbfaf6 !important;
  border: 1px solid #c9c3b7 !important;
  border-radius: 5px !important;
  box-shadow: 0 8px 24px rgba(44,39,30,.07) !important;
  color: #181713 !important;
}
.session-start .hero-copy {
  position: relative;
  overflow: hidden;
  background: #1e1e1b !important;
  border-color: #1e1e1b !important;
  color: #f7f3e9 !important;
}
.session-start .hero-copy::before {
  content: "MASTERING DESK / 01";
  position: absolute;
  top: 18px;
  right: 20px;
  color: #8f8a80;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
}
.session-start .hero-copy h1,
.session-start .hero-copy .hero-stats strong { color: #f7f3e9 !important; }
.session-start .hero-copy p,
.session-start .hero-copy .hero-stats span { color: #bdb7ab !important; }
.session-start .hero-copy .hero-stats span {
  background: #292925 !important;
  border-color: #403e38 !important;
  border-radius: 3px !important;
}
.eyebrow {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #d58a39 !important;
  padding: 0 0 7px !important;
  letter-spacing: .11em !important;
}
.upload-card { align-content: start !important; }
.upload-card > span,
.meter span,
.preset-grid button span,
.format-select,
.report-list span,
.server-result,
.reference-match-panel p,
.reference-strength,
.reference-profile,
.time { color: #68645c !important; }
.upload-card strong,
.command.primary,
.ab-switch button.active {
  background: #b76522 !important;
  border-color: #b76522 !important;
  border-radius: 3px !important;
  color: #fffaf1 !important;
  box-shadow: none !important;
}
.upload-card:hover { border-color: #a85e20 !important; background: #fffdf8 !important; }
.command,
.marker-row button,
.ab-switch,
.preset-grid button,
.format-select select {
  background: #f4f1e9 !important;
  border-color: #bfb8ab !important;
  border-radius: 3px !important;
  color: #1d1c18 !important;
  box-shadow: none !important;
}
.command:hover,
.marker-row button:hover,
.preset-grid button:hover { border-color: #8b6a4b !important; background: #ebe5d9 !important; }
.preset-grid button.active {
  border-color: #b76522 !important;
  background: #f2e2cf !important;
  color: #181713 !important;
  box-shadow: inset 4px 0 0 #b76522 !important;
}
.preset-grid button.active::after {
  background: #b76522 !important;
  border: 0 !important;
  border-radius: 2px !important;
  color: #fff !important;
}
.preset-grid button.active span { color: #62594e !important; }
.main-deck { border-top: 4px solid #272621 !important; }
.meter-panel { border-top: 4px solid #b76522 !important; }
.preset-panel { border-top: 4px solid #736c60 !important; }
.control-bank { border-top: 4px solid #b76522 !important; }
.export-panel,
.admin-panel,
.report-panel { border-top: 4px solid #37352f !important; }
.main-deck h2,
.meter-panel h2,
.preset-panel h2,
.control-bank h2,
.export-panel h2,
.admin-panel h2,
.report-panel h2,
.meter strong,
.signal-map strong,
.knob,
.report-list strong { color: #181713 !important; }
canvas,
.signal-map canvas {
  background: #11120f !important;
  border-color: #373830 !important;
  border-radius: 2px !important;
}
.signal-map,
.reference-match-panel,
.report-list div,
.knob {
  background: #f2efe7 !important;
  border-color: #ccc5b9 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}
.reference-match-panel.applied { border-color: #b76522 !important; background: #f2e2cf !important; }
.meter { border-color: #d5cfc4 !important; }
.zoom-strip { background: #d0c9bd !important; }
.zoom-strip span,
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track { background: #b76522 !important; border-color: #9b581f !important; }
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb { background: #fffdf8 !important; border-color: #b76522 !important; }
.timeline-tools label,
.loop-toggle,
.marker-row button { color: #38352f !important; }
.ab-switch button { color: #68645c !important; }
.help { background: #191916 !important; color: #f5f0e5 !important; border-color: #3d3b34 !important; }
:focus-visible { outline-color: #b76522 !important; }

@media (max-width: 760px) {
  .session-start .hero-copy::before { display: none; }
  .topbar { position: relative; }
}