:root {
  --ink: #171614;
  --ivory: #f6f1e7;
  --paper: #fffdf8;
  --line: #d8d0c4;
  --muted: #726b61;
  --taupe: #9d907d;
  --soft: #ece6dc;
  --danger: #8a302d;
  --success: #365f48;
  --warning: #9b6a21;
  --show-primary: #25221d;
  --show-secondary: #f3eee5;
  --show-accent: #8d7d65;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ivory); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)),
    radial-gradient(circle at 15% 10%, rgba(157,144,125,.10), transparent 32%),
    var(--ivory);
  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-size: 18px;
}
button, input, select, textarea { font: inherit; }
button, .button { text-transform: uppercase; letter-spacing: .07em; }
a { color: inherit; }

.studio-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px clamp(14px, 3vw, 36px);
  border-bottom: 1px solid rgba(23,22,20,.15);
  background: rgba(246,241,231,.96);
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 56px; height: 60px; object-fit: contain; filter: grayscale(1); }
.brand-name { font-size: 30px; line-height: .95; font-weight: 700; letter-spacing: .08em; }
.brand-sub { font-size: 11px; letter-spacing: .28em; margin-top: 7px; color: var(--muted); }
.header-actions { display: flex; gap: 8px; align-items: center; }

.app-shell { width: min(1180px, calc(100% - 28px)); margin: 26px auto 70px; }
.loading-card, .panel, .card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 11px 30px rgba(34,28,21,.06);
}
.loading-card { padding: 40px; text-align: center; letter-spacing: .12em; }
.panel { padding: clamp(18px, 3vw, 34px); margin-bottom: 18px; }
.card { padding: 20px; }

.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
h1,h2,h3,h4 { margin: 0; text-transform: uppercase; letter-spacing: .055em; line-height: 1.04; }
h1 { font-size: clamp(34px, 6vw, 62px); font-weight: 600; }
h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 600; }
h3 { font-size: 21px; font-weight: 600; }
p { line-height: 1.45; }
.muted { color: var(--muted); }
.small { font-size: 14px; color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84em; letter-spacing: .02em; }

.hero {
  padding: clamp(24px, 5vw, 52px);
  color: var(--show-secondary);
  background: var(--show-primary);
  border-color: var(--show-primary);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto -100px -120px auto;
  width: 330px;
  height: 330px;
  border: 1px solid color-mix(in srgb, var(--show-accent) 60%, transparent);
  transform: rotate(20deg);
  opacity: .42;
}
.hero .eyebrow { color: color-mix(in srgb, var(--show-secondary) 70%, transparent); }
.hero-meta { margin-top: 14px; text-transform: uppercase; letter-spacing: .11em; font-size: 15px; }

.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #4d473f;
}
input, select, textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #c9c0b3;
  border-radius: 2px;
  background: #fffefb;
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--show-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--show-accent) 28%, transparent); }
input[type="color"] { padding: 4px; min-height: 48px; }

.button, button {
  appearance: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ivory);
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
button:hover, .button:hover { filter: brightness(1.08); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondary, .button.secondary { background: transparent; color: var(--ink); }
button.show-button { background: var(--show-primary); border-color: var(--show-primary); color: var(--show-secondary); }
button.danger { background: var(--danger); border-color: var(--danger); }
button.success { background: var(--success); border-color: var(--success); }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 16px; }

.notice { border-left: 4px solid var(--taupe); background: var(--soft); padding: 14px 16px; margin: 14px 0; }
.notice.warning { border-color: var(--warning); background: #fbf2df; }
.notice.danger { border-color: var(--danger); background: #f7e9e6; }
.notice.success { border-color: var(--success); background: #eaf2ec; }

.show-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.show-card {
  --card-primary: var(--show-primary);
  --card-secondary: var(--show-secondary);
  --card-accent: var(--show-accent);
  min-height: 275px;
  display: flex;
  flex-direction: column;
  border-top: 8px solid var(--card-primary);
  position: relative;
  overflow: hidden;
}
.show-card::after { content:""; position:absolute; width:140px; height:140px; right:-45px; top:-45px; border:1px solid var(--card-accent); transform:rotate(25deg); opacity:.45; pointer-events:none; }
.show-card h3 { font-size: 27px; max-width: 90%; }
.show-code { color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 13px; margin: 8px 0 16px; }
.show-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: auto 0 16px; }
.stat { background: var(--soft); padding: 9px; text-align: center; }
.stat b { display:block; font-size: 23px; }
.stat span { font-size: 10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

.roster-layout { display: grid; grid-template-columns: minmax(250px, 330px) 1fr; gap: 18px; }
.queue { align-self: start; position: sticky; top: 102px; max-height: calc(100vh - 128px); overflow:auto; }
.queue-item {
  display:block; width:100%; text-align:left; background:#fffefb; color:var(--ink); border:1px solid var(--line);
  padding:12px; margin:8px 0; min-height:0; text-transform:none; letter-spacing:0;
}
.queue-item strong { display:block; text-transform:uppercase; letter-spacing:.04em; font-size:18px; }
.queue-item span { display:block; color:var(--muted); font-size:13px; margin-top:3px; }
.queue-item.progress { border-left:5px solid var(--show-primary); }
.queue-item.complete { border-left:5px solid var(--success); opacity:.8; }

.roster-table { width: 100%; border-collapse: collapse; }
.roster-table th, .roster-table td { border-bottom:1px solid var(--line); padding:10px 8px; text-align:left; vertical-align:top; }
.roster-table th { font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.status { display:inline-block; padding:4px 7px; border:1px solid var(--line); font-size:11px; letter-spacing:.07em; text-transform:uppercase; }
.status.waiting { background:#fbf2df; }
.status.in-progress { background:var(--soft); }
.status.complete { background:#eaf2ec; }

.measurement-top { display:grid; grid-template-columns: 1fr auto; gap:16px; align-items:start; }
.measurement-id { font-family: ui-monospace, SFMono-Regular, monospace; font-size:14px; color:var(--muted); }
.alert-strip { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 0; }
.alert-chip { border:1px solid #c9b48a; background:#fff4dc; padding:5px 8px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }

.measure-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top:12px; }
.measure-field { position:relative; }
.measure-field input { font-size:27px; text-align:center; font-variant-numeric:tabular-nums; }
.measure-field.filled input { background:#eef4ef; border-color:#8caf97; }
.measure-field.voice-hit input { animation: hit .75s ease; }
@keyframes hit { 0%{box-shadow:0 0 0 0 rgba(54,95,72,.45)} 100%{box-shadow:0 0 0 12px rgba(54,95,72,0)} }

.voice-console { background:#1e1c19; color:#f8f3e8; border:1px solid #1e1c19; padding:18px; margin-top:16px; }
.voice-status { display:flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:.09em; font-size:13px; }
.mic-dot { width:11px; height:11px; border-radius:50%; background:#777; }
.mic-dot.live { background:#d75d56; box-shadow:0 0 0 7px rgba(215,93,86,.15); animation:pulse 1.35s infinite; }
@keyframes pulse { 50%{transform:scale(.82); opacity:.75} }
.transcript { margin-top:12px; min-height:78px; max-height:180px; overflow:auto; padding:10px; border:1px solid rgba(255,255,255,.18); white-space:pre-wrap; font-size:17px; }
.interim { color:#bcb3a7; font-style:italic; }

.progress-line { height:3px; background:var(--soft); overflow:hidden; margin:10px 0; }
.progress-line > div { height:100%; background:var(--show-primary); transition:width .2s ease; }

.qr-wrap { display:flex; flex-wrap:wrap; gap:22px; align-items:center; }
.qr-box { background:white; padding:14px; border:1px solid var(--line); width:max-content; }
.link-box { word-break:break-all; background:var(--soft); padding:10px; font-family:ui-monospace,monospace; font-size:13px; }

.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(12,11,10,.58); display:flex; align-items:center; justify-content:center; padding:18px; }
.modal { width:min(760px,100%); max-height:92vh; overflow:auto; background:var(--paper); border:1px solid #5c554c; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.hidden { display:none !important; }

.toast { position:fixed; right:18px; bottom:18px; z-index:200; max-width:360px; padding:12px 15px; background:var(--ink); color:var(--ivory); opacity:0; transform:translateY(14px); pointer-events:none; transition:.2s ease; }
.toast.show { opacity:1; transform:translateY(0); }

.intake-section { border-top:1px solid var(--line); padding-top:18px; margin-top:20px; }
.intake-section h3 { margin-bottom:12px; }
.checkbox-line { display:flex; gap:10px; align-items:flex-start; }
.checkbox-line input { width:auto; min-height:0; margin-top:5px; }

@media (max-width: 820px) {
  .grid.two,.grid.three,.grid.four,.measure-grid { grid-template-columns:1fr 1fr; }
  .roster-layout { grid-template-columns:1fr; }
  .queue { position:static; max-height:none; }
}
@media (max-width: 560px) {
  body { font-size:17px; }
  .studio-header { min-height:68px; padding:7px 12px; }
  .brand img { width:42px; height:48px; }
  .brand-name { font-size:24px; }
  .brand-sub { display:none; }
  .app-shell { width:calc(100% - 18px); margin-top:12px; }
  .panel { padding:16px; }
  .grid.two,.grid.three,.grid.four,.measure-grid { grid-template-columns:1fr; }
  .measurement-top { grid-template-columns:1fr; }
  .show-grid { grid-template-columns:1fr; }
  .header-actions button { padding:8px 10px; min-height:38px; font-size:12px; }
}

@media print {
  .studio-header,.no-print,.button-row,button { display:none!important; }
  body { background:white; }
  .app-shell { width:100%; margin:0; }
  .panel,.card { box-shadow:none; }
}