:root {
  color-scheme: dark;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #141517;
  --side: #202124;
  --control: #2a2c30;
  --canvas-surround: #141518;
  --paper: #fff;
  --line: #414348;
  --text: #f7f5ef;
  --muted: #bfbdb6;
  --cream: #f3e5c7;
  --primary: #af2d36;
  --primary-hover: #c63742;
  --on-primary: #fff;
  --active: #6ed1c8;
  --active-bg: #193a38;
  --canvas-selection: #087b73;
  --radius-control: 5px;
  --nav-height: 60px;
  font: 14px var(--font-ui);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;color:var(--text);background:var(--bg)}
button,input,textarea,select{font:inherit}
button,input,textarea,select{border:1px solid var(--line);border-radius:var(--radius-control);background:var(--control);color:var(--text);padding:.45rem .62rem}
button{cursor:pointer;transition:background-color 150ms,border-color 150ms,color 150ms}
button:hover:not(:disabled){border-color:#77777e;background-color:#35373c}
button[aria-pressed=true],button[aria-current=true],
button[aria-pressed=true]:hover,button[aria-current=true]:hover{border-color:var(--active);color:var(--active);background:var(--active-bg)}
:focus-visible{outline:2px solid var(--active);outline-offset:3px}
input[type=range],input[type=checkbox]{accent-color:var(--active)}
button:disabled{opacity:.45;cursor:default}
button.accent{background:var(--primary);color:var(--on-primary);border-color:#df6a7355;box-shadow:inset 0 1px #ffffff19,0 2px 6px #0004;font-weight:700}
button.accent:hover:not(:disabled){background:var(--primary-hover)}
label{display:grid;gap:.33rem;margin:.55rem 0}
label.check{display:flex;align-items:center;gap:.4rem}
textarea{resize:vertical;min-height:64px;width:100%}
small,.muted{color:var(--muted)}
input[type=file]{width:100%;font-size:.85rem}
.eyebrow{letter-spacing:.2em;font-size:.71rem;font-weight:750;color:var(--cream)}
.studio-mark {
  flex: 0 0 auto;
  display: inline-block;
  width: 4px;
  height: 16px;
  margin-right: 6px;
  transform: skewX(-18deg);
  background: #e65a62;
  box-shadow: 6px 0 #95313a;
}
#entry {
  --entry-edge: clamp(1rem, 5vw, 5rem);
  --entry-rule: #f3e5c729;
  --entry-detail: #d3c5ae;
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  padding: 0 var(--entry-edge);
  background:
    radial-gradient(ellipse at 13% 25%, #4b2029 0%, transparent 54%),
    radial-gradient(ellipse at 90% 89%, #123c39 0%, transparent 49%),
    #0b0c0f;
}
.entry-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 36%, #f0b6a8 0 1px, transparent 2px),
    radial-gradient(circle at 19% 79%, #ddaaa0 0 1px, transparent 2px),
    radial-gradient(circle at 30% 15%, #dfaaa3 0 1px, transparent 2px),
    radial-gradient(circle at 65% 87%, #d8ddc7 0 1px, transparent 2px),
    radial-gradient(circle at 92% 32%, #a4d9cf 0 1px, transparent 2px),
    radial-gradient(circle at 95% 74%, #96ccc1 0 1px, transparent 2px);
  opacity: .38;
  animation: projection-dust 1.2s ease-out both;
}
.entry-masthead, .entry-stage, .entry-features {
  width: min(100%, 1232px);
  margin-inline: auto;
}
.entry-masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 3.2vh, 2rem) 0;
  border-bottom: 1px solid var(--entry-rule);
}
.entry-wordmark {
  display: flex;
  gap: .85rem;
  align-items: center;
  color: var(--cream);
  font-weight: 780;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.entry-access, .reel-meta, .entry-features {
  font: 600 .7rem/1.4 ui-monospace, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--entry-detail);
}
.entry-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  align-self: center;
  gap: clamp(2.25rem, 6.5vw, 7rem);
  padding: clamp(1.75rem, 5vh, 3.5rem) 0;
}
.entry-brand {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(1.25rem, 3.6vw, 3.5rem);
  border: 1px solid #f3e5c735;
  border-radius: 4px;
  background:
    linear-gradient(141deg, #a33242a8, transparent 48%, #4b9b9066),
    radial-gradient(ellipse at 35% 28%, #43252b, #0b0e13 74%);
  box-shadow: inset 0 0 55px #06060870, 0 24px 65px #0007;
}
.entry-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(130deg, transparent 18%, #ffe1bd32 46%, transparent 67%);
  opacity: 0;
  animation: projection-light 940ms ease-out both;
}
.filmstrip {
  position: absolute;
  z-index: -1;
  left: -28%;
  bottom: 11%;
  width: 156%;
  height: clamp(65px, 11vw, 132px);
  border-block: 1px solid #f3e5c76b;
  background:
    repeating-linear-gradient(90deg, #f3e5c790 0 11px, transparent 11px 23px) left 4px / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, #f3e5c790 0 11px, transparent 11px 23px) left calc(100% - 4px) / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 88px, #f3e5c74f 88px 91px) left center / 100% 72% no-repeat,
    #08090c80;
  transform: rotate(-22deg);
  opacity: .42;
  animation: film-advance 940ms ease-out both;
}
.entry-reel {
  width: min(100%, 412px, 51vh);
  padding: clamp(7px, 1vw, 12px);
  border: 1px solid #f3e5c74f;
  background: #151418;
  box-shadow: 0 21px 55px #000b, inset 0 1px #ffffff17, 0 0 36px #b2505726;
  animation: logo-intro 720ms cubic-bezier(.18,.65,.27,1) both;
}
.reel-meta {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: 0 0 .55rem;
  font-size: .61rem;
}
.entry-logo-frame {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  background: #1b1b1f;
}
.entry-logo-frame img { display: block; width: 100%; height: auto; }
#entry-logo-fallback {
  margin: .5rem;
  color: var(--cream);
  font-size: clamp(1.25rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
}
#entry-logo-fallback span { display: block; color: var(--active); }
.entry-content { min-width: 0; width: min(100%, 386px); }
.entry-label { display: flex; align-items: center; gap: .75rem; margin: 0; color: var(--active); }
.entry-label::before { content: ""; width: 27px; height: 1px; background: currentColor; }
.entry-content h1 {
  margin: .75rem 0 1rem;
  color: var(--cream);
  font-size: clamp(3.8rem, 7.3vw, 7rem);
  font-weight: 820;
  line-height: .85;
  letter-spacing: -.078em;
}
.entry-description {
  max-width: 34ch;
  margin: 0 0 clamp(1.25rem, 3vh, 2.15rem);
  color: var(--muted);
  line-height: 1.5;
}
#auth { display: grid; gap: .75rem; }
#auth label { margin: 0; color: var(--cream); font-size: .85rem; font-weight: 650; }
#auth input {
  width: 100%;
  min-height: 44px;
  padding-inline: .85rem;
  background: #111317;
  box-shadow: inset 0 1px 5px #0004;
}
#auth input:focus { border-color: var(--active); }
#auth button { min-height: 44px; }
#auth .accent {
  position: relative;
  margin-top: .3rem;
  min-height: 50px;
  padding-inline: 2.5rem;
  letter-spacing: .035em;
  background-image: linear-gradient(#ffffff0f, transparent);
  box-shadow: inset 0 1px #ffffff24, 0 9px 20px #07030860;
}
#auth .accent::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.15rem;
  width: .5rem;
  height: .5rem;
  border-block-start: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
#auth-switch { justify-self: start; padding-inline: .55rem; margin-left: -.55rem; border-color: transparent; background: transparent; color: var(--cream); }
#auth-switch:hover:not(:disabled) { border-color: var(--entry-rule); }
#auth-status { margin: 0; color: var(--cream); line-height: 1.4; }
#auth-status:empty { display: none; }
.entry-features {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.55rem;
  margin-block: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--entry-rule);
  list-style: none;
}
.entry-features li { display: flex; align-items: center; gap: .55rem; }
.entry-features li::before { content: ""; width: 4px; height: 4px; background: var(--active); }
@keyframes logo-intro {
  from { opacity: .65; transform: translateY(9px) scale(.975); }
  to { opacity: 1; transform: none; }
}
@keyframes film-advance {
  from { transform: translateX(-30px) rotate(-22deg); opacity: .12; }
  to { opacity: .42; }
}
@keyframes projection-light {
  0% { transform: translateX(-45%); opacity: 0; }
  42% { opacity: .8; }
  100% { transform: translateX(40%); opacity: 0; }
}
@keyframes projection-dust {
  from { opacity: .06; transform: translateY(4px); }
  to { opacity: .38; }
}
@media (max-width: 720px) {
  .entry-stage { grid-template-columns: 1fr; max-width: 460px; gap: 1.3rem; padding-block: 1rem; }
  .entry-brand { padding: .75rem; }
  .entry-reel { width: min(100%, 186px, 24vh); }
  .entry-content { width: 100%; }
  .entry-content h1 { margin: .45rem 0 .6rem; font-size: clamp(2.7rem, 10vw, 4.2rem); }
  .entry-content h1 br { display: none; }
  .entry-description { margin-bottom: .85rem; }
  .entry-features { gap: .55rem 1rem; }
}
@media (max-width: 370px) {
  .entry-wordmark { font-size: .75rem; }
  .entry-access { display: none; }
}
h2 {
  margin: 1.3rem 0 .65rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
  color: var(--cream);
  font-size: .73rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
aside h2:first-child { margin-top: 1.15rem; padding-top: 0; border: 0; }
.row { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
#studio { min-height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.studio-header {
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem 1.1rem;
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(#28292d, #1b1c20);
  animation: workspace-intro 180ms ease-out both;
}
@keyframes workspace-intro { from { opacity: .55; } to { opacity: 1; } }
.studio-identity { display: flex; flex: 0 0 auto; align-items: center; gap: .8rem; }
.studio-identity .eyebrow { display: block; font-size: .61rem; text-transform: uppercase; }
.studio-identity strong { display: block; margin-top: .1rem; font-size: 1.03rem; letter-spacing: -.015em; }
#location { flex: 1 1 auto; min-width: 0; color: var(--muted); overflow-wrap: anywhere; font-size: .85rem; }
.studio-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .85rem; }
.studio-actions .row + .row { padding-left: .85rem; border-left: 1px solid var(--line); }
.studio-header { flex-wrap: wrap; }
.gpu-toolbar { display:flex; flex:1 0 100%; align-items:center; gap:.4rem .7rem; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:.5rem; min-width:0; }
.gpu-toolbar strong { color:var(--cream); font-size:.8rem; }
.gpu-state { border:1px solid var(--line); border-radius:var(--radius-control); padding:.3rem .6rem; min-width:5rem; text-align:center; }
.gpu-state[data-state="Running"],.gpu-state[data-state="Idle"],.gpu-state[data-state="Starting"] { color:var(--active); border-color:var(--active); background:var(--active-bg); }
.gpu-state[data-state="Error"] { color:#ffb3b8; }
.gpu-warning { flex:1 1 260px; min-width:0; color:var(--cream); font-size:.78rem; overflow-wrap:anywhere; }
.gpu-toolbar button { white-space:nowrap; }
.workbench {
  display: grid;
  grid-template-columns: minmax(180px, 232px) minmax(0, 1fr) minmax(240px, 310px);
  min-height: 0;
}
aside { min-width: 0; overflow: auto; padding: 0 13px 32px; background: linear-gradient(#232428, var(--side) 18rem); }
.left { border-right: 1px solid var(--line); }
.right { border-left: 1px solid var(--line); }
.left > .row button { padding-inline: .48rem; }
details { margin: .45rem 0; }
.branch { margin-left: .4rem; padding-left: .45rem; border-left: 1px solid var(--line); overflow-wrap: anywhere; }
summary { cursor: pointer; padding: .3rem 0; }
summary::marker { color: var(--active); }
#tree button {
  display: block;
  width: 100%;
  margin-block: .25rem;
  text-align: left;
}
.toolgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.toolgrid button { overflow-wrap: anywhere; }
.center { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.canvasbar {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  align-items: center;
  min-height: 42px;
  padding: .35rem .75rem;
  border-bottom: 1px solid var(--line);
  background: #212226;
  color: var(--muted);
  font-size: .82rem;
}
.canvasbar .eyebrow { text-transform: uppercase; }
.canvasbar label { margin: 0 0 0 auto; }
.canvasbar input { width: clamp(58px, 8vw, 104px); padding: 0; }
.canvasbar output { min-width: 3.1em; font-variant-numeric: tabular-nums; }
#viewport {
  grid-row:3;
  overflow: auto;
  background:
    radial-gradient(ellipse at top, #27292caa, transparent 65%),
    radial-gradient(circle, #34373e 0 .75px, transparent 1px) 0 0 / 18px 18px,
    var(--canvas-surround);
  overscroll-behavior: contain;
}
#viewport.panning{cursor:grab}
#paper-area{position:relative;margin:24px auto;overflow:clip;overflow-clip-margin:12px}
#paper{transform-origin:top left;position:relative;background:var(--paper);color:#111;overflow:hidden;box-shadow:0 3px 22px #0008;touch-action:none}
.panel,.letter{position:absolute;cursor:move;user-select:none;touch-action:none}
.panel{pointer-events:none}
.panel.selected,.letter.selected{outline:3px solid var(--canvas-selection);outline-offset:3px}
.mask{position:absolute;inset:0;background:#141419;overflow:hidden;pointer-events:auto}
.window{position:absolute;inset:4px;background:#eee;overflow:hidden}
.window img{position:absolute;max-width:none;pointer-events:none}
.image-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;padding:.65rem 1rem;border-bottom:1px solid var(--active);background:var(--surface,#202027)}
.image-tools[hidden]{display:none}
.image-tools span{font-size:.8rem;color:var(--muted)}
.image-tools label{display:flex;align-items:center;gap:.4rem;margin:0;font-size:.8rem}
.image-tools input{width:110px;padding:0}
.panel.image-editing{outline:2px dashed var(--active);cursor:grab}
.panel.image-editing:active{cursor:grabbing}
.image-scale-handle{position:absolute;right:-12px;bottom:-12px;width:28px;height:28px;z-index:5;background:var(--active);color:#101719;border:2px solid var(--cream);border-radius:5px;cursor:nwse-resize;padding:0;font-size:18px;touch-action:none;pointer-events:auto}
.grip{position:absolute;right:-5px;bottom:-5px;width:14px;height:14px;border:2px solid #25242d;background:var(--active);cursor:nwse-resize;z-index:4;pointer-events:auto}
.guide{position:absolute;z-index:5;pointer-events:none;border-color:var(--canvas-selection);border-style:dashed;border-width:0}
.guide-x{inset-block:0;border-left-width:1px}
.guide-y{inset-inline:0;border-top-width:1px}
.lettering-canvas canvas{position:absolute;left:-18px;top:-18px;width:calc(100% + 36px);height:calc(100% + 36px);pointer-events:none}
.letter-source{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;pointer-events:none}
.asset,.job{border:1px solid var(--line);border-radius:var(--radius-control);padding:.45rem;margin:.45rem 0;overflow-wrap:anywhere}
.asset img{width:45px;height:45px;object-fit:cover;vertical-align:middle;margin-right:.45rem}
.asset .row{margin-top:.35rem}.asset button,.job button{font-size:.77rem}
.variants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem}.variants img{width:100%;display:block;margin:.4rem 0}
#status{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);background:var(--control);border:1px solid var(--cream);border-radius:6px;padding:.6rem .9rem;z-index:9;pointer-events:none}
#status:empty{display:none}
@media (min-width: 701px) {
  #studio { height: 100dvh; }
}
@media (max-width: 1000px) {
  .workbench { grid-template-columns: 180px minmax(0, 1fr) 240px; }
  .studio-header { flex-wrap: wrap; }
  .studio-actions { margin-left: auto; }
  .canvasbar { gap: .3rem; }
}
@media (max-width: 700px) {
  .studio-header { padding: .65rem .75rem; }
  .studio-actions { width: 100%; margin: 0; }
  .studio-actions .row + .row { padding-left: 0; border: 0; }
  .workbench { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .center { grid-row: 1; grid-column: 1 / -1; height: 62dvh; }
  aside { max-height: 65dvh; }
  .right { border-left: 0; }
}
@media (max-width: 420px) {
  .workbench { grid-template-columns: minmax(0, 1fr); }
  aside { max-height: none; }
  .left, .right { border: 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .entry-reel, .filmstrip, .entry-atmosphere, .entry-brand::after, .studio-header { animation: none; }
  button { transition: none; }
}

a{color:var(--cream)}

.template-spacing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
.template-spacing input,#template{width:100%;min-width:0}
#templates button{width:100%}
.panel.drop-target{outline:3px dashed var(--canvas-selection);outline-offset:3px}
.asset[draggable=true]{cursor:grab}
#save-layout,#update-spacing{margin-top:.4rem}
.panel-geometry{grid-template-columns:repeat(2,minmax(0,1fr))}

.production-tools{margin-top:.6rem}
#save-state{font-size:.75rem;color:var(--muted)}
#page-guides{position:absolute;inset:0;pointer-events:none}
.page-guide{position:absolute;border:1px dashed #087b73;color:#115f59;font-size:10px;padding:1px 4px}
.page-guide.safe{border-color:#99643a;color:#704b26;text-align:right}
.page-guide.bleed{border-color:#e36c76;color:#f9e1d0}
.asset-filters{display:flex;align-items:end;flex-wrap:wrap;gap:0 .7rem}
#upload-drop{border:1px dashed var(--line);border-radius:var(--radius-control);padding:.7rem;color:var(--muted)}
dialog{width:min(900px,calc(100vw - 2rem));max-height:90dvh;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--side);color:var(--text);padding:1.15rem}
dialog::backdrop{background:#0b0c0de0}
.dialog-body:fullscreen{overflow:auto;background:var(--side);padding:1rem}
#page-dialog{width:min(560px,calc(100vw - 2rem))}
.dialog-header,.production-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.dialog-header{justify-content:space-between;margin-bottom:.6rem}
.dialog-header h2{margin:0;border:0;padding:0}
.dialog-body > h3,.production-form h3{margin:1rem 0 .4rem;color:var(--cream);font-size:.88rem}
.production-form{display:grid;gap:.35rem}
.production-form label,.dialog-body label{max-width:36rem}
.production-form button{justify-self:start}
.production-row{padding:.35rem 0;border-bottom:1px solid var(--line)}
.production-row span{margin-right:auto}
.reader-pages{display:flex;align-items:start;gap:4px;overflow:auto;padding:.5rem 0;background:var(--canvas-surround)}
.reader-pages img{flex:none;max-width:none;height:auto;margin-inline:auto}
.reader-pages img+img,.reader-pages img:has(+img){margin-inline:0}
.scene-preview canvas,.asset-preview{display:block;max-width:100%;max-height:65dvh;object-fit:contain}


/* Oversight is a modal surface; the creator editor remains mounted underneath. */
#creator-identity { display:block; font-size:.65rem; }
#director-dialog { box-sizing:border-box; position:fixed; inset:0; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none; padding:24px; border:2px solid var(--teal,#59bab8); background:#15191d; color:#f1e7d3; overflow:auto; }
.director-header { display:flex; align-items:center; gap:20px; flex-wrap:wrap; border-bottom:1px solid #3e5055; padding-bottom:16px; }
.director-header h1 { margin:0; font-size:1.5rem; }
.director-header button { margin-left:auto; border-color:#59bab8; }
.director-badge { color:#8fd3d0; font-size:.8rem; }
.director-navigation { display:flex; gap:16px; flex-wrap:wrap; padding:12px 0; }
.director-navigation label { min-width:200px; }
.director-preview { min-height:60vh; }
.comic-reader { background:#15171b; color:#f1e7d3; padding:12px; overflow:auto; }
.comic-reader:fullscreen { width:100%; height:100%; }
.reader-controls { position:sticky; top:0; z-index:2; background:#20252b; padding:10px; }
.reader-pages canvas { flex-shrink:0; background:white; box-shadow:0 8px 30px #0007; }
#director-dialog .reader-pages { align-items:flex-start; }

.cover-overlay .mask,.cover-overlay .window{background:transparent!important}.reader-pages.is-spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px}.reader-pages.is-spread.cover-only>:first-child{grid-column:2}.reader-pages.is-spread>*{max-width:100%}

#style-dialog{width:min(1100px,95vw);max-height:94vh;padding:20px}#style-dialog .dialog-body{display:grid;gap:18px}.style-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.style-card{padding:12px;background:var(--panel,#22252a);border:1px solid #45484d;border-radius:8px}.style-card.selected{border-color:#45bbb4}.style-card img{width:100%;height:220px;object-fit:contain;background:#141619}.style-preview img,.style-admin-preview{max-width:100%;height:auto;max-height:460px;object-fit:contain}#style-dialog label{display:grid;gap:6px}#style-dialog textarea{min-height:100px;width:100%}#style-dialog .production-row input{width:100px}#series-style-label{max-width:190px;font-size:11px}

/* Reference management extends the workspace without remounting the canvas. */
#reference-library-dialog,#reference-review-dialog{width:min(1100px,95vw);max-height:94dvh;padding:20px}
.reference-library-body,.reference-editor{display:grid;gap:14px}.reference-editor{border-top:1px solid #45484d;padding-top:16px;margin-top:16px}
.reference-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;align-items:start}
.reference-card{min-width:0;display:grid;gap:9px;padding:14px;background:var(--panel,#22252a);border:1px solid #45484d;border-radius:8px;overflow-wrap:anywhere}
.reference-card.selected{border-color:var(--teal,#59bab8)}.reference-card img{width:100%;height:210px;object-fit:contain;background:#121518}
#reference-library-dialog label,#reference-review-dialog label,.reference-editor label{display:grid;gap:6px} .reference-card textarea{min-height:80px;resize:vertical}
.reference-editor textarea,#reference-review-dialog textarea{width:100%;min-height:100px;box-sizing:border-box}.reference-state{color:var(--teal,#59bab8)}.reference-warning{color:#f5c878}
.reference-choice{padding:10px 0;border-bottom:1px solid #45484d;display:grid;gap:8px}.reference-choice img{width:100%;height:120px;object-fit:contain}.reference-choice label,#reference-selection>label{display:flex;gap:8px;align-items:center}.reference-choice input[type=checkbox]{width:auto}
#reference-selection button{margin-top:10px}#reference-review-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}#reference-library-dialog input,#reference-library-dialog select{max-width:100%;box-sizing:border-box}