/* Media Hub + Video Studio — mockups. Mimics the real GoUltra app shell (light theme). Video/teal accent. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap');

:root {
  --primary: #1a73e8;
  --primary-hover: #0c5ec7;
  --acc: #0d9488;                 /* --gua-cat-video (teal) — Media Hub / Video accent */
  --acc-light: rgba(13, 148, 136, 0.10);
  --acc-hover: #0b7a70;
  --purple: #7c3aed;
  --warning: #f59e0b;
  --danger: #ef4444;
  --coral: #f77062;

  --g50: #f8fafc; --g100: #f1f5f9; --g200: #e2e8f0; --g300: #cbd5e1;
  --g400: #94a3b8; --g500: #64748b; --g600: #475569; --g700: #334155;
  --g800: #1e293b; --g900: #0f172a;

  --display: 'Plus Jakarta Sans', sans-serif;
  --body: 'DM Sans', sans-serif;

  --rail: 76px; --topbar: 56px; --pillar: 224px;
  --radius: 0.75rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  color: var(--g900);
  background: var(--g50);
  font-size: 14px;
  line-height: 1.5;
}
.font-display { font-family: var(--display); }

/* === Layout === */
.app { display: flex; min-height: 100vh; }

/* Icon rail */
.rail {
  width: var(--rail); flex-shrink: 0;
  background: #fff; border-right: 1px solid var(--g200);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; gap: 4px; position: sticky; top: 0; height: 100vh;
}
.rail .logo {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px;
  background: linear-gradient(135deg, var(--coral), #fe5196, #bc4cf4);
  display: grid; place-items: center; color: #fff; font-weight: 800;
  font-family: var(--display); font-size: 18px;
}
.rail .ritem {
  width: 56px; padding: 8px 0; border-radius: 12px; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--g500); font-size: 10px; font-family: var(--display); font-weight: 600;
}
.rail .ritem .ic { font-size: 18px; }
.rail .ritem:hover { background: var(--g100); color: var(--g800); }
.rail .ritem.active { background: var(--acc-light); color: var(--acc); }

/* Pillar sidebar (module nav) */
.pillar {
  width: var(--pillar); flex-shrink: 0; background: #fff;
  border-right: 1px solid var(--g200); padding: 16px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.pillar .ptitle {
  font-family: var(--display); font-weight: 800; font-size: 15px;
  padding: 6px 10px 14px; display: flex; align-items: center; gap: 8px;
}
.pillar .ptitle .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); }
.pillar .nav { display: flex; flex-direction: column; gap: 2px; }
.pillar .nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 9px; text-decoration: none; color: var(--g600);
  font-family: var(--display); font-weight: 600; font-size: 13px;
}
.pillar .nav a .ic { width: 18px; text-align: center; opacity: .8; }
.pillar .nav a:hover { background: var(--g100); color: var(--g900); }
.pillar .nav a.active { background: var(--acc-light); color: var(--acc); }
.pillar .nav .sep { height: 1px; background: var(--g200); margin: 10px 6px; }
.pillar .nav .label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--g400); padding: 12px 10px 4px; font-weight: 700; }

/* Main column */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar); border-bottom: 1px solid var(--g200); background: #fff;
  display: flex; align-items: center; gap: 14px; padding: 0 20px; position: sticky; top: 0; z-index: 5;
}
.topbar .crumbs { font-family: var(--display); font-weight: 600; color: var(--g500); font-size: 13px; }
.topbar .crumbs b { color: var(--g900); font-weight: 700; }
.topbar .spacer { flex: 1; }
.topbar .pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: var(--g100); font-family: var(--display); font-weight: 600; font-size: 12px; color: var(--g700);
}
.topbar .avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--acc)); }

.content { padding: 28px 32px; max-width: 1200px; width: 100%; margin: 0 auto; }

/* === Common bits === */
.h1 { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; margin: 0; }
.sub { color: var(--g500); margin: 4px 0 0; }
.row { display: flex; gap: 16px; }
.col { display: flex; flex-direction: column; gap: 16px; }
.grid { display: grid; gap: 16px; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { align-items: center; }

.card {
  background: #fff; border: 1px solid var(--g200); border-radius: var(--radius); padding: 18px;
}
.card h3 { font-family: var(--display); font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.card .muted { color: var(--g500); font-size: 13px; }

.btn {
  font-family: var(--display); font-weight: 600; font-size: 13px; border-radius: 9px;
  padding: 9px 14px; border: 1px solid var(--g200); background: #fff; color: var(--g800);
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.btn:hover { background: var(--g100); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); }
.btn.acc { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn.acc:hover { background: var(--acc-hover); }
.btn.ai { background: linear-gradient(135deg, var(--acc), #2dd4bf, var(--primary)); border: none; color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--g600); }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn.lg { padding: 11px 18px; font-size: 14px; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: 11px;
}
.badge.idea { background: #fef3c7; color: #92400e; }
.badge.drafting { background: #dbeafe; color: #1e40af; }
.badge.scripted { background: #e0e7ff; color: #3730a3; }
.badge.configuring { background: #ccfbf1; color: #115e59; }
.badge.generating { background: #ede9fe; color: #6d28d9; }
.badge.ready { background: #d1fae5; color: #065f46; }
.badge.selected { background: #cffafe; color: #155e75; }
.badge.type { background: var(--g100); color: var(--g600); }
.badge.warn { background: #fef3c7; color: #92400e; }
.badge.acc { background: var(--acc-light); color: var(--acc); }
.badge.video { background: var(--acc-light); color: var(--acc); }
.badge.img { background: rgba(26,115,232,.10); color: var(--primary); }
.badge.audio { background: rgba(124,58,237,.12); color: var(--purple); }
.badge.danger { background: #fee2e2; color: #b91c1c; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--g200); font-size: 12px; font-family: var(--display); font-weight: 600; color: var(--g600); background:#fff; cursor:pointer;
}
.chip.sel { border-color: var(--acc); background: var(--acc-light); color: var(--acc); }
.chip.disabled { opacity: .45; cursor: not-allowed; }

.muted { color: var(--g500); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.mono { font-family: ui-monospace, monospace; }
hr.div { border: none; border-top: 1px solid var(--g200); margin: 18px 0; }

/* form */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field label { font-family: var(--display); font-weight: 600; font-size: 12px; color: var(--g600); }
.field input, .field textarea, .field select {
  font-family: var(--body); font-size: 13px; color: var(--g900); background: #fff;
  border: 1px solid var(--g200); border-radius: 8px; padding: 8px 10px; width: 100%;
}
.field textarea { resize: vertical; min-height: 60px; }
.field .hint { font-size: 11px; color: var(--g400); font-weight: 500; }

/* search box */
.search {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--g200);
  border-radius: 9px; padding: 8px 12px; min-width: 260px; color: var(--g500); font-size: 13px;
}
.search input { border: none; outline: none; flex: 1; font-family: var(--body); font-size: 13px; color: var(--g900); }

/* notes */
.ai-note {
  border: 1px dashed var(--acc); background: var(--acc-light); border-radius: 10px; padding: 12px 14px;
  font-size: 13px; color: var(--g700);
}
.ai-note b { color: var(--acc); }
.info-note {
  border: 1px solid var(--g200); background: var(--g50); border-radius: 10px; padding: 12px 14px;
  font-size: 13px; color: var(--g600);
}
.info-note b { color: var(--g800); }

/* tab strip (Library | Requests, or stepper) */
.tabs { display: inline-flex; gap: 4px; background: var(--g100); border-radius: 999px; padding: 4px; }
.tabs a, .tabs .tab {
  padding: 7px 16px; border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 13px;
  color: var(--g500); text-decoration: none; cursor: pointer; display:inline-flex; align-items:center; gap:7px;
}
.tabs a.on, .tabs .tab.on { background: #fff; color: var(--acc); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* === Asset Library === */
.filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.catpills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.kindtabs { display: inline-flex; border: 1px solid var(--g200); border-radius: 999px; padding: 3px; gap: 2px; background: var(--g50); }
.kindtabs .opt { padding: 5px 12px; border-radius: 999px; font-family: var(--display); font-weight: 600; font-size: 12px; color: var(--g500); cursor: pointer; display:inline-flex; align-items:center; gap:5px; }
.kindtabs .opt.on { background: #fff; color: var(--acc); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.asset {
  border: 1px solid var(--g200); border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.asset:hover { border-color: var(--acc); box-shadow: 0 4px 14px rgba(13,148,136,.10); }
.asset.sel { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-light); }
.asset .preview {
  aspect-ratio: 1/1; display: grid; place-items: center; font-size: 34px; position: relative;
  background: var(--g100); color: var(--g400);
}
.asset .preview.image { background: linear-gradient(135deg, #dbeafe, #eff6ff); color: var(--primary); }
.asset .preview.video { background: linear-gradient(135deg, #ccfbf1, #f0fdfa); color: var(--acc); }
.asset .preview.audio { background: linear-gradient(135deg, #ede9fe, #f5f3ff); color: var(--purple); }
.asset .preview .kindtag { position: absolute; top: 7px; left: 7px; font-size: 10px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--g700); font-family: var(--display); font-weight: 700; }
.asset .preview .play { position:absolute; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9); display:grid; place-items:center; font-size:14px; color:var(--acc); }
.asset .preview .dur { position:absolute; bottom:7px; right:7px; font-size:10px; padding:1px 6px; border-radius:5px; background:rgba(15,23,42,.7); color:#fff; }
.asset .preview .pick { position:absolute; top:7px; right:7px; width:22px; height:22px; border-radius:50%; background:var(--acc); color:#fff; display:none; place-items:center; font-size:12px; }
.asset.sel .preview .pick { display:grid; }
.asset .ameta { padding: 9px 11px; }
.asset .ameta .nm { font-family: var(--display); font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset .ameta .tags { display:flex; gap:4px; margin-top:5px; flex-wrap:wrap; }
.asset .ameta .t { font-size: 10px; padding: 1px 6px; border-radius: 5px; background: var(--g100); color: var(--g500); }
.asset.add { border-style: dashed; display:grid; place-items:center; min-height: 220px; color: var(--g400); font-family:var(--display); font-weight:700; font-size:13px; gap:6px; }
.asset.add .big { font-size: 30px; }

/* asset detail pane (drawer) */
.detail { width: 340px; flex-shrink: 0; border-left: 1px solid var(--g200); background:#fff; padding: 18px; }
.detail .dpv { aspect-ratio: 1/1; border-radius: 12px; display:grid; place-items:center; font-size:46px; margin-bottom:14px; }

/* === Modal / dialog === */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.45); display: grid; place-items: center; z-index: 50; padding: 24px;
}
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 860px; max-height: 86vh; display:flex; flex-direction:column; overflow:hidden; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.modal .mh { display:flex; align-items:center; justify-content:space-between; padding: 16px 20px; border-bottom: 1px solid var(--g200); }
.modal .mh .t { font-family: var(--display); font-weight: 800; font-size: 16px; }
.modal .mb { padding: 18px 20px; overflow-y: auto; }
.modal .mf { display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 14px 20px; border-top: 1px solid var(--g200); background: var(--g50); }
.rolebar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; padding:10px 12px; border-radius:10px; background:var(--acc-light); border:1px solid rgba(13,148,136,.25); font-size:13px; color:var(--g700); }
.rolebar b { color: var(--acc); }

/* === Stepper (video studio) === */
.stepper { display:flex; align-items:center; gap:6px; margin: 16px 0 22px; flex-wrap:wrap; }
.step { display:flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px; border:1px solid var(--g200); background:#fff; font-family:var(--display); font-weight:700; font-size:12.5px; color:var(--g500); }
.step .n { width:18px; height:18px; border-radius:50%; background:var(--g200); color:var(--g600); display:grid; place-items:center; font-size:11px; }
.step.on { border-color: var(--acc); background: var(--acc-light); color: var(--acc); }
.step.on .n { background: var(--acc); color:#fff; }
.step.done { color: var(--acc); }
.step.done .n { background: var(--acc); color:#fff; }
.step .arr { color: var(--g300); }
.stepsep { color: var(--g300); font-size: 13px; }

/* === Inventory (HAVE vs NEED) === */
.inv { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.invcol { border:1px solid var(--g200); border-radius:12px; background:#fff; overflow:hidden; }
.invcol .ih { padding:12px 14px; border-bottom:1px solid var(--g200); display:flex; align-items:center; justify-content:space-between; font-family:var(--display); font-weight:800; font-size:14px; }
.invcol.have .ih { background: #f0fdfa; color: var(--acc); }
.invcol.need .ih { background: #fffbeb; color: #b45309; }
.invrow { display:flex; align-items:center; gap:11px; padding:11px 14px; border-bottom:1px solid var(--g100); }
.invrow:last-child { border-bottom:none; }
.invrow .th { width:42px; height:42px; border-radius:8px; flex-shrink:0; display:grid; place-items:center; font-size:18px; }
.invrow .th.image { background: linear-gradient(135deg,#dbeafe,#eff6ff); color:var(--primary); }
.invrow .th.video { background: linear-gradient(135deg,#ccfbf1,#f0fdfa); color:var(--acc); }
.invrow .th.audio { background: linear-gradient(135deg,#ede9fe,#f5f3ff); color:var(--purple); }
.invrow .th.gap { background: var(--g100); color: var(--g400); border:1px dashed var(--g300); }
.invrow .im { flex:1; min-width:0; }
.invrow .im .nm { font-family:var(--display); font-weight:700; font-size:13px; }
.invrow .im .rl { font-size:11px; color:var(--g500); }

/* === Mode toggle (Frames | Ingredients) === */
.modetoggle { display:inline-flex; border:1px solid var(--g200); border-radius:999px; padding:3px; gap:2px; background:var(--g50); }
.modetoggle .opt { padding:6px 15px; border-radius:999px; font-family:var(--display); font-weight:700; font-size:12.5px; color:var(--g500); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.modetoggle .opt.on { background:#fff; color:var(--acc); box-shadow:0 1px 2px rgba(0,0,0,.06); }

/* === Model picker (eligibility) === */
.modelpick { display:flex; flex-direction:column; gap:8px; }
.model { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--g200); border-radius:11px; background:#fff; cursor:pointer; }
.model:hover { border-color: var(--g300); }
.model.on { border-color: var(--acc); background: var(--acc-light); }
.model.off { opacity:.5; cursor:not-allowed; background:var(--g50); }
.model .mlogo { width:36px; height:36px; border-radius:9px; flex-shrink:0; display:grid; place-items:center; font-size:16px; background:var(--g100); color:var(--g600); }
.model .minfo { flex:1; min-width:0; }
.model .minfo .mn { font-family:var(--display); font-weight:800; font-size:13.5px; display:flex; align-items:center; gap:8px; }
.model .minfo .mp { font-size:11.5px; color:var(--g500); margin-top:2px; }
.model .mcheck { width:22px; height:22px; border-radius:50%; border:2px solid var(--g300); flex-shrink:0; display:grid; place-items:center; font-size:12px; color:transparent; }
.model.on .mcheck { background: var(--acc); border-color: var(--acc); color:#fff; }
.rolehints { display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.rolehint { font-size:10px; padding:2px 7px; border-radius:6px; background:var(--g100); color:var(--g600); font-family:var(--display); font-weight:600; }
.rolehint.audio { background: rgba(124,58,237,.12); color:var(--purple); }
.rolehint.video { background: var(--acc-light); color: var(--acc); }

/* === Ingredient slots (by role) === */
.ingslots { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:12px; }
.ingslot { border:1px solid var(--g200); border-radius:11px; overflow:hidden; background:#fff; }
.ingslot .ihead { padding:7px 10px; font-family:var(--display); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--g500); border-bottom:1px solid var(--g100); display:flex; align-items:center; justify-content:space-between; }
.ingslot .ihead .req { color: var(--danger); }
.ingslot .ibody { aspect-ratio: 1/1; display:grid; place-items:center; position:relative; }
.ingslot .ibody.filled.image { background:linear-gradient(135deg,#dbeafe,#eff6ff); color:var(--primary); font-size:30px; }
.ingslot .ibody.filled.video { background:linear-gradient(135deg,#ccfbf1,#f0fdfa); color:var(--acc); font-size:30px; }
.ingslot .ibody.filled.audio { background:linear-gradient(135deg,#ede9fe,#f5f3ff); color:var(--purple); font-size:30px; }
.ingslot .ibody.empty { background: var(--g50); color: var(--g400); border:2px dashed var(--g200); margin:8px; border-radius:9px; aspect-ratio:auto; min-height:96px; flex-direction:column; gap:6px; font-family:var(--display); font-weight:600; font-size:12px; cursor:pointer; }
.ingslot .ifoot { padding:7px 10px; font-size:11px; color:var(--g500); border-top:1px solid var(--g100); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* === Takes strip === */
.takes { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:14px; }
.take { border:2px solid var(--g200); border-radius:12px; overflow:hidden; background:#fff; }
.take.sel { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-light); }
.take .tpv { aspect-ratio: 9/16; max-height:260px; background:linear-gradient(135deg,#ccfbf1,#f0fdfa,#e0f2fe); display:grid; place-items:center; color:var(--acc); font-size:34px; position:relative; }
.take .tpv .play { width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92); display:grid; place-items:center; font-size:16px; }
.take .tpv .dur { position:absolute; bottom:8px; right:8px; font-size:11px; padding:2px 7px; border-radius:5px; background:rgba(15,23,42,.7); color:#fff; }
.take .tpv .gen { position:absolute; top:8px; left:8px; }
.take .tbody { padding:10px 12px; }
.take .tbody .tn { font-family:var(--display); font-weight:700; font-size:12.5px; display:flex; align-items:center; justify-content:space-between; }
.take .tbody .tp { font-size:11px; color:var(--g500); margin-top:3px; }
.take .tbody .tact { margin-top:9px; }
.take.gen-loading .tpv { background: var(--g100); color:var(--g400); }

/* spinner */
.spin { display:inline-block; width:13px; height:13px; border:2px solid var(--g300); border-top-color:var(--acc); border-radius:50%; animation: sp 0.8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

/* progress */
.prog { height: 6px; background: var(--g200); border-radius: 999px; overflow: hidden; }
.prog > span { display:block; height:100%; background: linear-gradient(90deg, var(--acc), #2dd4bf); }

/* scene list (left, video studio) */
.scenelist { background:#fff; border:1px solid var(--g200); border-radius:var(--radius); padding:12px; }
.scenelist .lh { display:flex; align-items:center; justify-content:space-between; padding:4px 6px 12px; }
.scenelist .lh .t { font-family:var(--display); font-weight:700; font-size:13px; }
.scene-item { display:flex; gap:10px; align-items:center; padding:9px 8px; border-radius:10px; border:1px solid transparent; cursor:pointer; margin-bottom:4px; }
.scene-item:hover { background:var(--g50); }
.scene-item.active { background:var(--acc-light); border-color:var(--acc); }
.scene-item .num { width:26px; height:26px; border-radius:7px; flex-shrink:0; background:var(--g100); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:12px; color:var(--g600); }
.scene-item.active .num { background:var(--acc); color:#fff; }
.scene-item .meta { min-width:0; flex:1; }
.scene-item .meta .nm { font-family:var(--display); font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scene-item .meta .st { font-size:11px; color:var(--g500); display:flex; align-items:center; gap:5px; }
.dot-st { width:7px; height:7px; border-radius:50%; display:inline-block; }
.dot-st.ok { background:var(--acc); }
.dot-st.warn { background:var(--warning); }
.dot-st.gen { background:var(--purple); }
.dot-st.idle { background:var(--g300); }

/* generic two-col studio */
.studio { display:grid; grid-template-columns: 300px 1fr; gap:18px; align-items:start; }
.editor { background:#fff; border:1px solid var(--g200); border-radius:var(--radius); padding:20px; }
.editor .eh { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
.editor .eh .t { font-family:var(--display); font-weight:800; font-size:17px; }
.section-h { font-family:var(--display); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--g500); margin:18px 0 10px; }

/* === v2: audio + model-driven settings + ingredient generator === */

/* radio cards (audio requirement type, etc.) */
.radiocards { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:10px; }
.radiocard { border:1px solid var(--g200); border-radius:11px; padding:12px 13px; cursor:pointer; background:#fff; }
.radiocard:hover { border-color:var(--g300); }
.radiocard.on { border-color:var(--acc); background:var(--acc-light); }
.radiocard .rc-t { font-family:var(--display); font-weight:800; font-size:13px; display:flex; align-items:center; gap:7px; }
.radiocard .rc-d { font-size:11.5px; color:var(--g500); margin-top:3px; }

/* numeric stepper (− n +) for fixed-list / range durations */
.numstep { display:inline-flex; align-items:center; border:1px solid var(--g200); border-radius:8px; overflow:hidden; }
.numstep button { border:none; background:#fff; width:30px; height:32px; font-size:15px; color:var(--g600); cursor:pointer; }
.numstep button:hover { background:var(--g100); }
.numstep .v { padding:0 12px; font-family:var(--display); font-weight:700; font-size:13px; min-width:54px; text-align:center; }
.rangenote { font-size:11px; color:var(--g400); margin-top:4px; }

/* faux slider (voice settings) */
.slider { height:6px; border-radius:999px; background:var(--g200); position:relative; }
.slider > .fill { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--acc); }
.slider > .knob { position:absolute; top:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--acc); }

/* mini waveform */
.wave { display:flex; align-items:center; gap:2px; height:24px; }
.wave span { width:3px; border-radius:2px; background:var(--acc); opacity:.65; }

/* embed vs assembly badge */
.embedbadge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-family:var(--display); font-weight:700; font-size:11px; }
.embedbadge.embed { background:var(--acc-light); color:var(--acc); }
.embedbadge.overlay { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; }

/* audio panel rows */
.audiorow { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--g200); border-radius:11px; background:#fff; margin-bottom:10px; }
.audiorow .anum { width:26px; height:26px; border-radius:7px; flex-shrink:0; background:var(--g100); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:12px; color:var(--g600); }
.audiorow .ainfo { flex:1; min-width:0; }
.audiorow .ainfo .at { font-family:var(--display); font-weight:700; font-size:13px; }
.audiorow .ainfo .ad { font-size:11.5px; color:var(--g500); }
.voicechip { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; border:1px solid var(--g200); background:var(--g50); font-family:var(--display); font-weight:700; font-size:12px; color:var(--g700); }
.voicechip .av { width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--acc)); }

/* assembled audio lane (takes page) */
.audiolane { display:flex; align-items:center; gap:6px; padding:8px 10px; border:1px dashed var(--g300); border-radius:9px; background:var(--g50); }
.audiolane .seg { flex:1; height:26px; border-radius:6px; display:grid; place-items:center; font-size:10px; font-family:var(--display); font-weight:700; }
.audiolane .seg.vo { background:var(--acc-light); color:var(--acc); }
.audiolane .seg.music { background:rgba(124,58,237,.12); color:var(--purple); }
.audiolane .seg.silent { background:var(--g100); color:var(--g400); }

/* ingredient generator modal */
.refchips { display:flex; gap:8px; flex-wrap:wrap; }
.refchip { display:inline-flex; align-items:center; gap:7px; padding:5px 7px 5px 5px; border-radius:9px; border:1px solid var(--g200); background:#fff; font-size:12px; font-family:var(--display); font-weight:600; color:var(--g700); }
.refchip .rt { width:26px; height:26px; border-radius:6px; display:grid; place-items:center; font-size:13px; }
.refchip .rt.image { background:linear-gradient(135deg,#dbeafe,#eff6ff); color:var(--primary); }
.refchip .x { color:var(--g400); cursor:pointer; padding:0 2px; }
.refchip.add { border-style:dashed; color:var(--acc); cursor:pointer; }

.gengrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:12px; }
.gencand { border:2px solid var(--g200); border-radius:11px; overflow:hidden; background:#fff; cursor:pointer; }
.gencand.sel { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-light); }
.gencand .gpv { aspect-ratio:1/1; background:linear-gradient(135deg,#dbeafe,#eff6ff,#f3e8ff); display:grid; place-items:center; color:var(--primary); font-size:28px; position:relative; }
.gencand .gpv .pick { position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:50%; background:var(--acc); color:#fff; display:none; place-items:center; font-size:11px; }
.gencand.sel .gpv .pick { display:grid; }
.gencand .gf { padding:7px 9px; font-size:11px; color:var(--g500); }

/* attempt history (regenerate iterations) */
.attempts { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.attempt { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; border:1px solid var(--g200); font-size:11px; font-family:var(--display); font-weight:600; color:var(--g500); cursor:pointer; }
.attempt.on { border-color:var(--acc); background:var(--acc-light); color:var(--acc); }

/* generate/regenerate bar */
.genbar { display:flex; gap:10px; align-items:flex-end; }
.genbar .field { flex:1; margin-bottom:0; }