:root {
  --void: #05080b;
  --void-soft: #090d11;
  --panel: rgba(12, 17, 21, 0.91);
  --panel-strong: #0c1115;
  --panel-soft: #11181d;
  --line: rgba(170, 211, 207, 0.14);
  --line-bright: rgba(88, 226, 214, 0.42);
  --text: #f4f7f6;
  --muted: #82908f;
  --jade: #4ee0d2;
  --jade-deep: #123c3a;
  --gold: #d8b36a;
  --gold-soft: #6f5b37;
  --cinnabar: #ec6659;
  --magenta: #cc6fa4;
  --success: #4ed39d;
  --danger: #ff6f75;
  --rail: 92px;
  --signal: 36px;
  --radius: 6px;
  --ease: cubic-bezier(.2, .82, .2, 1);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--void); scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  min-height: 100vh;
  min-width: 320px;
  color: var(--text);
  background: var(--void);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button, label[for] { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
}
textarea { resize: none; }
svg { width: 18px; height: 18px; stroke-width: 1.8; }
::selection { color: #06100f; background: var(--jade); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #080c0f; }
::-webkit-scrollbar-thumb { background: #263237; border: 2px solid #080c0f; }
::-webkit-scrollbar-thumb:hover { background: #395158; }

#particle-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.noise-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: .14;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
.light-scan {
  position: fixed;
  top: -25vh;
  left: 18vw;
  width: 1px;
  height: 150vh;
  z-index: 2;
  opacity: .22;
  pointer-events: none;
  background: var(--jade);
  box-shadow: 42vw 0 0 rgba(216,179,106,.45), 67vw 0 0 rgba(236,102,89,.2);
  transform: rotate(18deg);
  animation: scanMove 14s ease-in-out infinite alternate;
}
body.effects-off #particle-canvas,
body.effects-off .light-scan,
body.effects-off .noise-layer { display: none; }

.app-shell { position: relative; z-index: 3; min-height: 100vh; }
.signal-bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--signal);
  z-index: 90;
  display: grid;
  grid-template-columns: 190px 1fr 42px;
  align-items: center;
  background: #0d171a;
  border-bottom: 1px solid rgba(78,224,210,.2);
  color: #a8b8b7;
  font-size: 12px;
}
.signal-live { padding-left: 18px; color: var(--jade); font-family: Consolas, monospace; }
.signal-live span, .room-live i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  background: var(--jade);
  box-shadow: 0 0 16px rgba(78,224,210,.9);
  animation: livePulse 1.35s ease-in-out infinite;
}
.signal-message {
  justify-self: center;
  border: 0;
  background: transparent;
  color: #aebcbb;
  cursor: pointer;
}
.signal-message b { margin-left: 8px; color: var(--gold); font-weight: 700; }
.signal-close { justify-self: end; margin-right: 7px; }
.mobile-account-button { display: none; }
body.signal-hidden { --signal: 0px; }
body.signal-hidden .signal-bar { display: none; }

.rail {
  position: fixed;
  top: var(--signal);
  bottom: 0;
  left: 0;
  z-index: 80;
  width: var(--rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(5, 9, 12, .94);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { width: 0; height: 0; }
.brand-mark {
  position: relative;
  width: 54px;
  height: 54px;
  margin: 18px 0 24px;
  border: 1px solid rgba(78,224,210,.52);
  background: #0c1619;
  cursor: pointer;
}
.brand-glyph {
  position: relative;
  z-index: 2;
  color: var(--jade);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 23px;
  font-weight: 900;
}
.brand-pulse {
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(216,179,106,.25);
  animation: sealPulse 2.8s ease-in-out infinite;
}
.rail-nav { width: 100%; flex: 0 0 auto; display: grid; gap: 8px; padding: 0 10px; }
.rail-item {
  position: relative;
  height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: #758381;
  cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.rail-item span { font-size: 12px; }
.rail-item:hover { color: #e8eeee; background: #0d1418; transform: translateY(-2px); }
.rail-item.is-active {
  color: var(--jade);
  border-color: rgba(78,224,210,.25);
  background: #0f1d20;
}
.rail-item.is-active::before {
  content: "";
  position: absolute;
  left: -11px;
  width: 3px;
  height: 28px;
  background: var(--jade);
  box-shadow: 0 0 18px rgba(78,224,210,.75);
}
.task-dot {
  display: none;
  position: absolute;
  top: 10px;
  right: 13px;
  width: 6px;
  height: 6px;
  background: var(--cinnabar);
  box-shadow: 0 0 12px rgba(236,102,89,.85);
}
.task-dot.is-visible { display: block; animation: livePulse 1s infinite; }
.rail-bottom { margin-top: auto; width: 100%; flex: 0 0 auto; display: grid; justify-items: center; gap: 10px; padding-bottom: 16px; }
.credit-button {
  width: 62px;
  min-height: 58px;
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  border: 1px solid rgba(216,179,106,.24);
  background: #12130f;
  cursor: pointer;
}
.credit-button svg { color: var(--gold); }
.credit-button strong { color: var(--gold); }
.credit-button span { grid-column: 1 / -1; color: #746f61; font-size: 10px; }
.avatar-button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(204,111,164,.45);
  border-radius: 50%;
  background: #231520;
  color: #e7a9cd;
  font-weight: 800;
  cursor: pointer;
}
.icon-button {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(13,18,22,.82);
  color: #9aa7a6;
  cursor: pointer;
  transition: .2s var(--ease);
}
.icon-button:hover { color: var(--text); border-color: rgba(78,224,210,.38); transform: translateY(-1px); }

.stage { margin-left: var(--rail); padding-top: var(--signal); min-height: 100vh; }
.view { display: none; min-height: calc(100vh - var(--signal)); animation: viewEnter .5s var(--ease) both; }
.view.is-active { display: block; }

.dream-hero {
  position: relative;
  width: 100%;
  height: calc(100vh - 150px);
  min-height: 650px;
  max-height: 790px;
  overflow: hidden;
  border-bottom: 1px solid rgba(78,224,210,.16);
  isolation: isolate;
}
.hero-image {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: #071013 url('/assets/zaomeng-dreamgate-hero-v2.png') center 48% / cover no-repeat;
  transform: scale(1.04);
  transition: transform .2s linear;
}
.hero-shade { position: absolute; inset: 0; z-index: -2; background: rgba(3, 7, 10, .44); }
.dream-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(216,179,106,.08);
  pointer-events: none;
}
.hero-coordinate {
  position: absolute;
  color: rgba(195,219,216,.45);
  font: 10px/1 Consolas, monospace;
}
.hero-coordinate-a { top: 28px; left: 34px; }
.hero-coordinate-b { right: 28px; top: 28px; writing-mode: vertical-rl; }
.hero-heading { position: absolute; top: 10.5%; left: 7%; max-width: 760px; }
.hero-heading p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: #b7c7c4;
  font-size: 13px;
  font-weight: 700;
}
.hero-heading p span { width: 38px; height: 2px; background: var(--cinnabar); box-shadow: 48px 0 0 var(--gold), 64px 0 0 var(--jade); }
.hero-heading h1 {
  margin: 0;
  color: #fff;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif;
  font-size: clamp(64px, 7vw, 104px);
  line-height: .9;
  font-weight: 900;
  text-shadow: 0 12px 50px rgba(0,0,0,.5);
}
.hero-heading h2 { margin: 18px 0 0; font-size: clamp(18px, 1.7vw, 27px); line-height: 1.4; font-weight: 600; color: #dce8e5; }

.dream-composer {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 120px));
  min-height: 196px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 116px;
  gap: 18px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid rgba(193,226,222,.28);
  border-radius: 8px;
  background: rgba(8, 13, 16, .82);
  box-shadow: 0 28px 80px rgba(0,0,0,.48), 0 0 60px rgba(78,224,210,.05);
  backdrop-filter: blur(22px) saturate(120%);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.dream-composer:focus-within {
  border-color: rgba(78,224,210,.64);
  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 52px rgba(78,224,210,.12);
}
.reference-trigger {
  min-height: 114px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed rgba(193,226,222,.25);
  background: #11191d;
  color: #71807f;
  cursor: pointer;
  transition: .22s var(--ease);
}
.reference-trigger:hover { color: var(--jade); border-color: var(--jade); transform: translateY(-2px); }
.reference-trigger svg { width: 25px; height: 25px; }
.reference-trigger span { font-size: 11px; }
.composer-main { min-width: 0; display: flex; flex-direction: column; }
.composer-main textarea {
  width: 100%;
  min-height: 104px;
  padding: 7px 4px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f7f9f8;
  font-size: 17px;
  line-height: 1.75;
}
.composer-main textarea::placeholder { color: #758180; }
.composer-toolbar { margin-top: auto; display: flex; align-items: center; gap: 10px; min-height: 38px; }
.mode-switch { display: flex; border: 1px solid var(--line); border-radius: var(--radius); background: #0b1013; }
.mode-switch button {
  min-width: 86px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: #7d8a89;
  cursor: pointer;
}
.mode-switch button:last-child { border-right: 0; }
.mode-switch button.is-active { color: var(--jade); background: #102326; }
.mode-switch.compact button { min-width: 74px; height: 32px; font-size: 12px; }
.tool-button, .text-button, .primary-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(13,18,22,.88);
  color: #aeb9b7;
  text-decoration: none;
  cursor: pointer;
  transition: .2s var(--ease);
}
.tool-button:hover, .text-button:hover { color: var(--text); border-color: rgba(78,224,210,.38); }
.text-button { padding: 0; border: 0; background: transparent; color: var(--gold); }
.composer-hint { margin-left: auto; color: #667270; font-size: 11px; }
kbd { padding: 2px 6px; border: 1px solid #334044; background: #12191d; color: #95a4a1; font-family: Consolas, monospace; }
.send-button {
  position: relative;
  align-self: end;
  width: auto;
  min-width: 116px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  overflow: hidden;
  border: 1px solid rgba(238,244,242,.72);
  border-radius: 6px;
  background: #eff5f3;
  color: #09100f;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), opacity .25s;
}
.send-button > svg { position: relative; z-index: 2; width: 18px; height: 18px; flex: 0 0 auto; }
.send-action-label { position: relative; z-index: 2; white-space: nowrap; font-size: 14px; font-weight: 800; }
.send-button:not(:disabled):hover { transform: translateY(-3px) scale(1.04); background: var(--jade); border-color: var(--jade); }
.send-button:disabled { opacity: .25; cursor: default; }
.send-ripple { position: absolute; inset: -2px; border: 1px solid var(--jade); border-radius: 6px; opacity: 0; pointer-events: none; }
.send-button:not(:disabled) .send-ripple { animation: sendPulse 2s ease-out infinite; }
.reference-strip { display: flex; gap: 7px; overflow-x: auto; }
.reference-thumb { position: relative; width: 48px; height: 48px; flex: 0 0 48px; border: 1px solid #38464a; }
.reference-thumb img, .reference-thumb video { width: 100%; height: 100%; display: block; object-fit: cover; }
.local-media-placeholder { width: 100%; height: 100%; display: grid; place-content: center; place-items: center; gap: 4px; background: #10191d; color: var(--jade); }
.local-media-placeholder svg { width: 38%; height: 38%; }
.local-media-placeholder small { color: #879894; font-size: 7px; line-height: 1; }
.reference-thumb,.dock-reference-thumb { cursor: zoom-in; }
.reference-thumb button { position: absolute; top: -6px; right: -6px; width: 17px; height: 17px; border: 0; border-radius: 50%; background: var(--cinnabar); color: #fff; font-size: 10px; cursor: pointer; }
.preference-panel {
  position: absolute;
  left: 116px;
  bottom: 64px;
  z-index: 20;
  width: 520px;
  padding: 18px;
  border: 1px solid rgba(173,210,207,.2);
  border-radius: var(--radius);
  background: #0d1317;
  box-shadow: 0 26px 68px rgba(0,0,0,.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .25s var(--ease);
}
.preference-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.preference-head { display: flex; justify-content: space-between; margin-bottom: 16px; }
.preference-head span { color: #64706f; font-size: 11px; }
.preference-row { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 12px; margin-top: 12px; }
.preference-row > label { color: #899592; font-size: 12px; }
.ratio-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.ratio-grid button {
  height: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #222d31;
  background: #10171b;
  color: #6f7d7b;
  font-size: 10px;
  cursor: pointer;
}
.ratio-grid button.is-active { color: var(--jade); border-color: rgba(78,224,210,.48); background: #102124; }
.ratio-box { display: block; border: 1px solid currentColor; }
.ratio-box.square { width: 13px; height: 13px; }.ratio-box.portrait { width: 11px; height: 15px; }.ratio-box.tall { width: 9px; height: 16px; }
.ratio-box.wide { width: 18px; height: 10px; }.ratio-box.cinema { width: 20px; height: 8px; }
.preference-selects { grid-template-columns: 52px 1fr 52px 1fr; }
select { height: 36px; border: 1px solid #29363a; border-radius: var(--radius); background: #11191d; color: #c8d2d0; padding: 0 10px; }
.hero-scroll {
  position: absolute;
  right: 28px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: rgba(208,225,222,.55);
  cursor: pointer;
  font-size: 11px;
}
.hero-scroll svg { animation: arrowFloat 1.4s ease-in-out infinite; }

.engine-section, .inspiration-section { padding: 48px clamp(28px, 4vw, 72px); background: rgba(6,10,13,.96); }
.inspiration-section { padding-top: 26px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.section-heading p, .page-head p { margin: 0 0 7px; color: var(--jade); font: 10px/1 Consolas, monospace; }
.section-heading h3 { margin: 0; font-size: 23px; }
.section-heading > span { color: #65716f; font-size: 12px; }
.engine-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.engine-card {
  position: relative;
  min-height: 112px;
  display: grid;
  grid-template-columns: 42px 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0d1317;
  color: #d7dfdd;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}
.engine-card::after { content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--jade); transition:width .35s var(--ease); }
.engine-card:hover { transform: translateY(-5px); border-color: rgba(78,224,210,.35); background:#10191d; }
.engine-card:hover::after { width:100%; }
.engine-card-featured::after { width: 28%; background: var(--gold); }
.engine-card > svg { width: 30px; height: 30px; color: var(--jade); }
.engine-card-featured > svg { color: var(--gold); }
.engine-index { color: #465451; font: 11px Consolas, monospace; }
.engine-card strong { display:block; margin-bottom:6px; font-size:16px; }.engine-card small { color:#71807d; }
.engine-card em { color: #667471; font-style: normal; font-size: 11px; }
.dream-wall { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; grid-auto-rows: 230px; gap: 8px; }
.dream-tile { position: relative; overflow: hidden; border: 1px solid var(--line); background:#0b1013; cursor:pointer; }
.dream-tile:first-child { grid-row: span 2; }
.dream-tile img, .dream-tile video { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .4s; }
.dream-tile:hover img, .dream-tile:hover video { transform:scale(1.045); filter:brightness(1.08); }
.dream-tile-overlay { position:absolute; inset:auto 0 0; padding:40px 14px 13px; background:rgba(4,7,9,.72); transform:translateY(38px); transition:.35s var(--ease); }
.dream-tile:hover .dream-tile-overlay { transform:translateY(0); }
.dream-tile-overlay strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.dream-tile-overlay span { color:#84918f; font-size:11px; }

/* Inspiration studio */
.inspire-studio {
  position: relative;
  min-height: calc(100vh - var(--signal));
  overflow: hidden;
  isolation: isolate;
  background: #07090d;
}
.inspire-visual {
  position: absolute;
  inset: -80px -20px auto;
  z-index: -4;
  height: 620px;
  opacity: .38;
  background: #080b10 url('/assets/zaomeng_brand_banner.png') center 46% / cover no-repeat;
  filter: saturate(.78) contrast(1.08) brightness(.82);
  transform: scale(1.02);
  transition: transform .22s linear;
  animation: visualDrift 14s ease-in-out infinite alternate;
}
.inspire-shade {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(5,7,10,.45) 0, rgba(5,7,10,.86) 46%, #07090d 72%),
    linear-gradient(90deg, rgba(5,8,11,.72), transparent 36%, rgba(5,8,11,.62));
}
.inspire-studio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(78,224,210,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,179,106,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}
.inspire-line {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 1px;
  opacity: .35;
  background: linear-gradient(transparent, var(--jade) 22%, transparent 58%);
  animation: inspireLine 5.8s var(--ease) infinite;
}
.inspire-line-left { left: 7%; }
.inspire-line-right { right: 6%; animation-delay: -2.7s; background: linear-gradient(transparent, var(--gold) 30%, transparent 66%); }
.inspire-status {
  position: absolute;
  top: 18px;
  left: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(196,213,210,.48);
  font: 9px Consolas, monospace;
  pointer-events: none;
}
.inspire-status span { display: flex; align-items: center; gap: 8px; color: rgba(156,231,222,.7); }
.inspire-status i { width: 5px; height: 5px; background: var(--jade); box-shadow: 0 0 14px rgba(78,224,210,.82); animation: livePulse 1.35s ease-in-out infinite; }
.inspire-status em { font-style: normal; }
.inspire-core {
  width: min(1460px, calc(100% - 58px));
  margin: 0 auto;
  padding: 66px 0 34px;
}
.inspire-heading { text-align: center; }
.inspire-heading > p { margin: 0 0 12px; color: #82908d; font-size: 12px; }
.inspire-heading h1 { margin: 0; font-size: 31px; line-height: 1.35; font-weight: 700; color: #f3f6f5; }
.inspire-mode-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 5px 3px;
  border: 0;
  border-bottom: 1px solid rgba(78,224,210,.45);
  background: transparent;
  color: var(--jade);
  font: inherit;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), text-shadow .2s var(--ease);
}
.inspire-mode-title:hover,
.inspire-mode-title.is-open { color: #a8fff6; border-color: #a8fff6; text-shadow: 0 0 24px rgba(78,224,210,.35); }
.inspire-mode-title svg { width: 17px; height: 17px; }

.inspire-studio .dream-composer {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: min(1110px, calc(100% - 50px));
  min-height: 184px;
  margin: 24px auto 0;
  grid-template-columns: 96px minmax(0,1fr) 116px;
  gap: 14px;
  padding: 18px;
  overflow: visible;
  border-color: rgba(190,218,214,.25);
  background: rgba(13,17,22,.9);
  box-shadow: 0 30px 88px rgba(0,0,0,.55), 0 0 48px rgba(78,224,210,.045), inset 0 1px 0 rgba(255,255,255,.035);
}
.inspire-studio .dream-composer::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--jade), var(--gold), var(--cinnabar), transparent);
  opacity: .74;
  animation: composerSignal 4.5s var(--ease) infinite alternate;
}
.inspire-studio .dream-composer:focus-within {
  transform: translateY(-2px);
  border-color: rgba(78,224,210,.52);
  box-shadow: 0 34px 100px rgba(0,0,0,.6), 0 0 50px rgba(78,224,210,.085), inset 0 1px 0 rgba(255,255,255,.045);
}
.inspire-studio .dream-composer:has(.home-popover.is-open) { z-index: 75; }
.home-reference-zone {
  position: relative;
  z-index: 25;
  min-height: 120px;
  align-self: stretch;
}
.inspire-studio .reference-trigger {
  position: absolute;
  left: 6px;
  top: 12px;
  z-index: 1;
  width: 58px;
  min-height: 76px;
  transform: rotate(-5deg);
  border-style: solid;
  border-color: rgba(181,211,207,.2);
  background: #171c22;
  box-shadow: 0 12px 24px rgba(0,0,0,.28);
}
.inspire-studio .reference-trigger:hover { transform: translateY(-3px) rotate(0); }
.home-reference-deck {
  position: absolute;
  top: 8px;
  left: 33px;
  z-index: 3;
  width: 54px;
  height: 84px;
  pointer-events: none;
}
.home-reference-deck.has-files { pointer-events: auto; }
.home-reference-deck .reference-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 72px;
  overflow: visible;
  border: 0;
  background: #11171c;
  box-shadow: 0 12px 28px rgba(0,0,0,.48);
  transform: translateX(calc(var(--i) * 5px)) rotate(var(--tilt));
  transition: transform .3s var(--ease), filter .2s var(--ease), opacity .2s;
  cursor: grab;
}
.home-reference-deck .reference-thumb img, .home-reference-deck .reference-thumb video, .home-reference-deck .reference-thumb .local-media-placeholder {
  border: 1px solid rgba(230,241,238,.42);
  object-fit: cover;
  pointer-events: none;
}
.home-reference-deck .reference-thumb button {
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  opacity: 0;
  font-size: 13px;
  background: #541a22;
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.home-reference-zone:hover .home-reference-deck { width: 520px; }
.home-reference-zone:hover .reference-thumb { z-index: calc(30 - var(--i)); transform: translateX(calc(var(--i) * 58px)) rotate(0); }
.home-reference-zone:hover .reference-thumb button { opacity: 1; }
.home-reference-deck .reference-thumb:hover { z-index: 40; filter: brightness(1.12); transform: translateX(calc(var(--i) * 58px)) translateY(-6px) rotate(0); }
.home-reference-deck .reference-thumb.is-dragging { opacity: .4; cursor: grabbing; }
.inspire-studio .composer-main { position: relative; z-index: 2; min-height: 144px; }
.inspire-studio .composer-main textarea {
  min-height: 98px;
  max-height: 148px;
  padding: 8px 4px 4px;
  font-size: 15px;
  line-height: 1.7;
}
.home-reference-mentions { display: none; align-items: center; gap: 6px; min-height: 27px; padding: 0 3px 5px; overflow-x: auto; }
.home-reference-mentions:not(:empty) { display: flex; }
.home-reference-mentions button {
  max-width: 180px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(78,224,210,.2);
  border-radius: 4px;
  background: #112125;
  color: var(--jade);
  cursor: pointer;
}
.home-reference-mentions button span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; }
.home-reference-mentions svg { width: 12px; height: 12px; }
.home-control-group { min-width: 0; display: flex; align-items: center; gap: 6px; }
.inspire-studio .composer-chip { height: 34px; }
.inspire-studio #home-model-trigger { max-width: 230px; }
.inspire-studio #home-model-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.composer-icon-tool {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #11171c;
  color: #8d9997;
  cursor: pointer;
  transition: .2s var(--ease);
}
.composer-icon-tool:hover,
.composer-icon-tool.is-active,
.composer-icon-tool.is-open { color: var(--jade); border-color: rgba(78,224,210,.4); background: #142327; }
.composer-icon-tool span { font-size: 18px; line-height: 1; }
.home-reference-count { margin-left: auto; flex: 0 0 auto; color: #65716f; font-size: 9px; }
.inspire-studio .send-button { align-self: end; width: 116px; height: 50px; margin-bottom: 1px; }

.home-popover {
  position: absolute;
  top: calc(100% + 10px);
  z-index: 70;
  display: none;
  padding: 12px;
  border: 1px solid rgba(170,211,207,.2);
  border-radius: 8px;
  background: rgba(14,19,24,.99);
  box-shadow: 0 28px 78px rgba(0,0,0,.72);
  backdrop-filter: blur(24px);
  animation: popoverEnter .22s var(--ease) both;
}
.home-popover.is-open { display: block; }
.home-popover.opens-upward { top: auto; bottom: calc(100% + 10px); }
.home-popover > p { margin: 2px 8px 9px; color: #65726f; font-size: 10px; }
.home-mode-popover { left: 116px; width: 320px; }
.home-model-popover { left: 248px; width: 430px; max-height: 360px; overflow-y: auto; }
.inspire-studio .preference-panel {
  left: 332px;
  bottom: auto;
  width: 650px;
  padding: 18px;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}
.inspire-studio .home-popover.opens-upward { top:auto; bottom:calc(100% + 10px); }
.home-reference-popover { right: 76px; width: 350px; max-height: 340px; overflow-y: auto; }
.home-popover-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 7px 10px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.home-popover-head strong { font-size: 13px; }
.home-popover-head span { color: #64716e; font-size: 9px; }
.home-mode-divider { height: 1px; margin: 6px 8px; background: var(--line); }
.popover-option.is-secondary { color: #b7a47b; }
.popover-option.is-disabled,
.popover-option:disabled { opacity: .48; cursor: not-allowed; }
.popover-option:disabled:hover { background: transparent; color: #91a09d; }
.home-setting-block { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px 12px; margin-top: 15px; }
.home-setting-block > label { color: #85918f; font-size: 10px; }
.inspire-studio .ratio-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 5px; }
.inspire-studio .ratio-grid button,
.dock-ratio-grid button {
  height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #10161a;
  color: #72807d;
  cursor: pointer;
}
.inspire-studio .ratio-grid button:hover,
.inspire-studio .ratio-grid button.is-active,
.dock-ratio-grid button:hover,
.dock-ratio-grid button.is-active { border-color: rgba(78,224,210,.46); color: var(--jade); background: #132124; }
.inspire-studio .ratio-grid button small,
.dock-ratio-grid button small { color: #5f6b69; font-size: 8px; }
.ratio-box.landscape { width: 16px; height: 12px; }
.ratio-box.adaptive { width: 17px; height: 13px; border-style: dashed; }
.quality-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
.quality-choice-grid button {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #10161a;
  color: #81908d;
  text-align: left;
  cursor: pointer;
}
.quality-choice-grid button:hover,
.quality-choice-grid button.is-active { border-color: rgba(78,224,210,.42); background: #142327; color: var(--jade); }
.quality-choice-grid button strong { font-size: 12px; }
.quality-choice-grid button span { color: #65726f; font-size: 8px; }
.quality-explain {
  grid-column: 2;
  min-height: 50px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-left: 2px solid var(--gold);
  background: #151711;
  color: var(--gold);
}
.quality-explain svg { width: 19px; height: 19px; }
.quality-explain strong,
.quality-explain small { display: block; }
.quality-explain strong { font-size: 10px; }
.quality-explain small { margin-top: 4px; color: #807a68; font-size: 8px; line-height: 1.45; }
.duration-control { display: grid; grid-template-columns: 1fr 58px; align-items: center; gap: 12px; }
.duration-control input { accent-color: var(--jade); }
.duration-control output { height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: #10161a; color: var(--jade); font-size: 10px; }
.quality-footnote { margin: 13px 0 0 96px; color: #596562; font-size: 8px; }
.reference-option {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 46px 1fr 24px;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: #9eaaa7;
  text-align: left;
  cursor: pointer;
}
.reference-option:hover { border-color: rgba(78,224,210,.2); background: #142025; color: #edf5f2; }
.reference-option img, .reference-option video, .reference-option > .local-media-placeholder { width: 46px; height: 42px; display: block; object-fit: cover; border: 1px solid var(--line); }
.reference-option strong,
.reference-option small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reference-option strong { font-size: 10px; }
.reference-option small { max-width: 220px; margin-top: 4px; color: #667370; font-size: 8px; }
.reference-option em { color: var(--jade); font-size: 16px; font-style: normal; }
.reference-popover-empty { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #64716e; text-align: center; }
.reference-popover-empty svg { width: 30px; height: 30px; color: #81908d; }
.reference-popover-empty strong { margin-top: 13px; color: #d6dfdc; font-size: 12px; }
.reference-popover-empty span { margin-top: 5px; font-size: 9px; }
.reference-popover-empty label { margin-top: 16px; padding: 8px 12px; border: 1px solid rgba(78,224,210,.3); color: var(--jade); cursor: pointer; }

.engine-strip {
  width: min(1260px, calc(100% - 20px));
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}
.engine-mini {
  min-width: 0;
  height: 78px;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid rgba(170,211,207,.11);
  border-radius: var(--radius);
  background: rgba(13,17,22,.84);
  color: #b6c0be;
  text-align: left;
  cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.engine-mini:hover { transform: translateY(-3px); border-color: rgba(78,224,210,.3); background: #121a1f; }
.engine-mini > span:nth-child(2) { min-width: 0; }
.engine-mini strong,
.engine-mini small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.engine-mini strong { font-size: 12px; }
.engine-mini small { margin-top: 5px; color: #687573; font-size: 9px; }
.engine-mini em { color: #5e6b68; font-size: 8px; font-style: normal; }
.engine-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(78,224,210,.2); background: #102126; color: var(--jade); }
.engine-icon.video { border-color: rgba(216,179,106,.22); background: #211c13; color: var(--gold); }
.engine-icon.chat { border-color: rgba(204,111,164,.22); background: #21151e; color: #da85ba; }
.engine-icon.reference { border-color: rgba(236,102,89,.2); background: #231613; color: #ef8379; }

.inspire-studio .inspiration-section { margin-top: 24px; padding: 0; background: transparent; }
.inspiration-toolbar { min-height: 44px; display: flex; align-items: center; gap: 16px; margin-bottom: 12px; border-bottom: 1px solid rgba(170,211,207,.1); }
.dream-tabs { display: flex; align-self: stretch; gap: 4px; }
.dream-tabs button {
  min-width: 76px;
  padding: 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #6d7977;
  cursor: pointer;
}
.dream-tabs button:hover,
.dream-tabs button.is-active { color: #eef4f2; border-bottom-color: var(--jade); }
.dream-search { width: 250px; height: 34px; margin-left: auto; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(13,18,22,.76); color: #64716e; }
.dream-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #dce4e2; }
.dream-search input::placeholder { color: #596461; }
.inspire-studio .dream-wall { grid-template-columns: repeat(5, minmax(0,1fr)); grid-auto-rows: 188px; gap: 7px; }
.inspire-studio .dream-tile { border-color: rgba(177,207,203,.12); border-radius: 3px; }
.inspire-studio .dream-tile:first-child { grid-row: auto; grid-column: span 2; }
.inspire-studio .dream-tile:nth-child(6) { grid-column: span 2; }
.inspire-studio .dream-tile:nth-child(2) img { object-position: 35% center; }
.inspire-studio .dream-tile:nth-child(5) img { object-position: 70% center; }
.inspire-studio .dream-tile-overlay {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 5px 12px;
  padding: 52px 12px 11px;
  background: linear-gradient(to bottom, transparent, rgba(4,7,9,.93));
  transform: translateY(31px);
}
.inspire-studio .dream-tile-overlay span { grid-column: 1/-1; color: var(--jade); font-size: 8px; }
.inspire-studio .dream-tile-overlay strong { min-width: 0; font-size: 10px; }
.inspire-studio .dream-tile-overlay button { height: 26px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid rgba(78,224,210,.22); border-radius: 3px; background: rgba(11,18,21,.9); color: var(--jade); font-size: 8px; cursor: pointer; white-space: nowrap; }
.inspire-studio .dream-tile-overlay button svg { width: 11px; height: 11px; }
.dream-wall-empty { grid-column: 1/-1; min-height: 188px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); color: #65716f; }
.dream-wall-empty svg { width: 28px; height: 28px; }
.dream-wall-empty strong { margin-top: 12px; color: #cbd4d2; }
.dream-wall-empty span { margin-top: 5px; font-size: 10px; }

/* Clear quality information in the generation composer */
.dock-settings-popover { left: 330px; width: 590px; }
.dock-setting-block .quality-explain { grid-column: 2; }
.dock-setting-block .quality-choice-grid { min-width: 0; }
.dock-ratio-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
.dock-settings-popover .quality-footnote { margin-left: 86px; }

@keyframes visualDrift { from { background-position: 49% 46%; } to { background-position: 52% 49%; } }
@keyframes inspireLine { 0%,100% { opacity: .12; transform: translateY(-18%); } 45% { opacity: .42; } 60% { transform: translateY(28%); } }

.workspace-layout, .chat-layout { height: calc(100vh - var(--signal)); min-width:0; min-height:0; display: grid; grid-template-columns: 270px 1fr; overflow: hidden; }
.task-sidebar, .chat-sidebar { min-width:0; min-height:0; padding: 24px 16px; background: rgba(7,11,14,.95); border-right:1px solid var(--line); overflow-y:auto; overscroll-behavior-y:auto; scrollbar-gutter:stable; }
.task-sidebar { position:relative; padding:28px 14px 22px; background:#0a0e12; }
.task-sidebar::after { content:""; position:absolute; inset:0 0 auto; height:1px; background:var(--jade); opacity:.28; }
.workspace-brand { padding:0 8px; }.workspace-brand span { display:block; color:var(--jade); font:9px Consolas,monospace; }.workspace-brand b { display:block; margin-top:8px; font-size:20px; }
.new-task-button {
  width:100%; height:46px; margin:24px 0 28px; display:flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid rgba(78,224,210,.28); border-radius:var(--radius); background:#101c20; color:#dffcf8; cursor:pointer;
}
.new-task-button:hover { background:#173033; border-color:var(--jade); box-shadow:0 0 24px rgba(78,224,210,.08); }
.chat-sidebar-mobile-head, .chat-sidebar-scrim, .mobile-chat-sessions { display: none; }
.task-section-label { display:flex; align-items:center; gap:10px; margin:0 8px 12px; color:#667370; font-size:10px; }
.task-section-label i { height:1px; flex:1; background:var(--line); }
.task-list, .conversation-list { display:grid; gap:6px; }
.history-load-more { width:100%; min-height:38px; display:flex; align-items:center; justify-content:center; gap:7px; margin-top:10px; border:1px solid var(--line); border-radius:4px; background:#0e1519; color:#788783; font-size:10px; cursor:pointer; }
.history-load-more:hover,.history-load-more:focus-visible { border-color:rgba(78,224,210,.42); color:var(--jade); }
.history-load-more:disabled { opacity:.55; cursor:wait; }
.history-load-more svg { width:14px; }
.history-load-more[hidden],.story-history-load-more[hidden] { display:none !important; }
.task-list-item, .conversation-item {
  width:100%; min-height:60px; display:grid; grid-template-columns:42px 1fr; gap:10px; align-items:center; padding:8px;
  border:1px solid transparent; border-radius:var(--radius); background:transparent; color:#99a5a3; text-align:left; cursor:pointer;
}
.task-list-item:hover, .conversation-item:hover { background:#0f161a; }.task-list-item.is-active, .conversation-item.is-active { background:#151d22; border-color:rgba(78,224,210,.16); color:#f2f7f5; box-shadow:inset 2px 0 0 var(--jade); }
.task-thumb { width:42px; height:42px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.05); background:#141c20; color:var(--jade); }
.task-thumb img { width:100%; height:100%; object-fit:cover; }.task-list-item strong,.conversation-item strong { display:block; max-width:176px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }.task-list-item small,.conversation-item small { display:block; margin-top:5px; color:#64706e; font-size:10px; }
.task-conversation-row { position:relative; min-width:0; }
.task-conversation-row .task-list-item { padding-right:38px; }
.creation-conversation-delete { position:absolute; top:50%; right:7px; width:28px; height:28px; display:grid; place-items:center; transform:translateY(-50%); border:0; border-radius:3px; background:transparent; color:#53605e; opacity:0; cursor:pointer; transition:.18s var(--ease); }
.task-conversation-row:hover .creation-conversation-delete,
.task-conversation-row.is-active .creation-conversation-delete,
.task-conversation-row:focus-within .creation-conversation-delete { opacity:1; }
.creation-conversation-delete:hover,.creation-conversation-delete:focus-visible { color:var(--danger); background:rgba(255,111,117,.08); outline:none; }
.creation-conversation-delete svg { width:14px; }
.creation-room, .chat-room { min-width:0; min-height:0; position:relative; display:flex; flex-direction:column; background:rgba(5,8,11,.72); }
.creation-room { overflow:hidden; background:#070a0d; }
.creation-room::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(78,224,210,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(216,179,106,.04) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,black,transparent 68%); }
.room-toolbar { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 28px; border-bottom:1px solid var(--line); background:rgba(7,11,14,.82); backdrop-filter:blur(16px); }
.room-live { color:#72807e; font:9px Consolas,monospace; }.room-live i { width:5px; height:5px; margin-right:6px; }
.room-toolbar h2 { margin:7px 0 0; font-size:18px; }.room-actions { display:flex; gap:8px; }
.creation-toolbar { position:absolute; top:0; left:0; right:0; z-index:8; min-height:68px; padding:13px 28px; border-bottom-color:rgba(170,211,207,.08); background:linear-gradient(to bottom,rgba(7,10,13,.96),rgba(7,10,13,.7),transparent); }
.creation-heading { min-width:0; }.creation-toolbar h2 { max-width:540px; margin-top:5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:15px; font-weight:600; color:#dce4e1; }
.creation-toolbar .room-actions .icon-button { background:rgba(14,20,24,.82); }
.creation-toolbar .room-actions .icon-button.is-active { border-color:rgba(78,224,210,.5); color:var(--jade); box-shadow:inset 0 0 0 1px rgba(78,224,210,.08); }
.generation-feed { position:relative; z-index:1; min-height:0; flex:1; overflow-y:auto; overscroll-behavior-y:auto; scrollbar-gutter:stable; padding:96px clamp(34px,5vw,82px) var(--generation-composer-clearance,220px); scroll-behavior:smooth; scroll-padding-block:96px var(--generation-composer-clearance,220px); }
.feed-empty { min-height:62vh; display:grid; place-items:center; align-content:center; text-align:center; color:#687573; }
.feed-empty h3 { margin:20px 0 8px; color:#e2e9e7; font-size:25px; }.feed-empty p { max-width:480px; margin:0; line-height:1.7; }
.empty-orbit { position:relative; width:76px; height:76px; display:grid; place-items:center; color:var(--jade); border:1px solid rgba(78,224,210,.35); border-radius:50%; box-shadow:0 0 55px rgba(78,224,210,.08); }
.empty-orbit span { position:absolute; inset:-11px; border:1px solid rgba(216,179,106,.22); border-radius:50%; animation:orbitSpin 6s linear infinite; }.empty-orbit span::after { content:""; position:absolute; top:-3px; left:50%; width:6px; height:6px; background:var(--gold); box-shadow:0 0 14px rgba(216,179,106,.7); }
.result-block { width:min(1240px,100%); margin:0 auto 58px; scroll-margin-top:96px; animation:resultEnter .5s var(--ease) both; }
.result-prompt { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; margin-bottom:14px; }
.result-prompt-copy { min-width:0; max-width:900px; display:grid; justify-items:start; gap:7px; }
.result-prompt p { margin:0; font-size:14px; line-height:1.75; color:#d3dcda; word-break:break-word; }
.result-prompt.is-collapsible:not(.is-expanded) p { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.result-prompt-toggle { min-height:25px; display:inline-flex; align-items:center; gap:5px; padding:0; border:0; background:transparent; color:#6f9c97; font-size:10px; cursor:pointer; }
.result-prompt-toggle:hover { color:var(--jade); }
.result-prompt-toggle svg { width:12px; height:12px; }
.result-meta { flex:0 0 auto; padding-top:4px; color:#61706d; font:10px Consolas,monospace; white-space:nowrap; }
.result-status { margin:10px 0 15px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; }
.result-status.is-complete { display:none; }.status-track { height:4px; overflow:hidden; background:#172125; }.status-fill { position:relative; height:100%; width:0; background:linear-gradient(90deg,var(--jade),var(--gold)); box-shadow:0 0 16px rgba(78,224,210,.5); transition:width .6s var(--ease); }.status-fill::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); transform:translateX(-100%); animation:progressSweep 1.5s linear infinite; }.result-status span { color:#81908d; font-size:10px; }
.result-media-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; background:#070a0c; }
.result-media-grid.is-single { grid-template-columns:minmax(0,1fr); justify-items:center; background:transparent; }
.result-media { position:relative; min-height:320px; overflow:hidden; border:1px solid #1c2529; background:#11181c; cursor:pointer; }
.result-media.single { grid-column:1/-1; width:100%; min-height:0; aspect-ratio:16/9; }
.result-media.single[data-ratio="21:9"] { aspect-ratio:21/9; }
.result-media.single[data-ratio="4:3"] { aspect-ratio:4/3; }
.result-media.single[data-ratio="3:4"] { width:min(680px,100%); aspect-ratio:3/4; }
.result-media.single[data-ratio="1:1"] { width:min(820px,100%); aspect-ratio:1/1; }
.result-media.single[data-ratio="9:16"] { width:min(540px,100%); aspect-ratio:9/16; }
.result-media img,.result-media video { width:100%; height:100%; min-height:0; display:block; object-fit:contain; background:#070a0c; transition:filter .3s var(--ease),transform .5s var(--ease); }
.result-media:hover img { transform:scale(1.012); filter:brightness(.9); }
.result-hover-actions { position:absolute; top:12px; right:12px; display:flex; gap:5px; opacity:0; transform:translateY(-5px); transition:.25s var(--ease); }.result-media:hover .result-hover-actions { opacity:1; transform:none; }.result-hover-actions button,.result-hover-actions a { width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); background:rgba(7,10,13,.86); color:#edf5f2; cursor:pointer; backdrop-filter:blur(12px); }.result-hover-actions a:hover,.result-hover-actions button:hover { color:var(--jade); border-color:rgba(78,224,210,.45); }
.loading-surface { position:relative; width:100%; height:100%; min-height:320px; overflow:hidden; background:#11171b; animation:surfacePulse 1.25s ease-in-out infinite alternate; }.result-media.single .loading-surface { min-height:0; }
.loading-surface::before { content:""; position:absolute; inset:0; background:linear-gradient(112deg,transparent 22%,rgba(78,224,210,.08) 44%,rgba(216,179,106,.09) 50%,transparent 72%); transform:translateX(-100%); animation:skeletonSweep 2s var(--ease) infinite; }
.loading-surface::after { content:attr(data-loading-label); position:absolute; inset:0; display:grid; place-items:center; color:#53625f; font:10px Consolas,monospace; }
.result-actions { display:flex; gap:8px; margin-top:12px; }.result-actions button,.result-actions a { min-height:38px; }
.result-actions .result-more { width:38px; padding:0; }.download-button { border-color:rgba(216,179,106,.32); color:var(--gold); }
.three-view-button { border-color:rgba(78,224,210,.34); background:#102125; color:#aef6ed; }
.three-view-button:hover { border-color:var(--jade); background:#173237; color:#effffc; box-shadow:0 0 24px rgba(78,224,210,.09); }
.delete-record-button { margin-left:4px; border-color:rgba(233,102,108,.22); color:#aa7b7e; }
.delete-record-button:hover { border-color:rgba(255,111,117,.58); background:#241216; color:#ffc4c7; }
.result-error { padding:18px; border-left:3px solid var(--danger); background:#211317; color:#f3adb0; }
.result-review-required { min-height: 150px; padding: 24px; display: grid; place-items: center; align-content: center; gap: 9px; border-left: 3px solid var(--gold); background: rgba(35,28,16,.82); color: #d9c38b; text-align: center; }
.result-review-required svg { width: 24px; height: 24px; }
.result-review-required strong { color: #f1d998; }
.result-review-required span { max-width: 560px; color: #b6a77f; line-height: 1.7; }
.result-day { width:min(1240px,100%); margin:20px auto 22px; display:flex; align-items:center; gap:12px; color:#93a09e; font-size:12px; }.result-day::after { content:""; flex:1; height:1px; background:var(--line); }
.jump-to-composer { position:absolute; right:26px; bottom:122px; z-index:11; width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:rgba(14,20,24,.9); color:#8a9895; cursor:pointer; opacity:0; transform:translateY(8px); pointer-events:none; transition:.25s var(--ease); }.jump-to-composer.is-visible { opacity:1; transform:none; pointer-events:auto; }.jump-to-composer:hover { color:var(--jade); border-color:var(--jade); }
.dock-composer {
  position:absolute; left:50%; bottom:22px; z-index:12; transform:translateX(-50%); width:min(1050px,calc(100% - 76px)); min-height:148px;
  display:grid; grid-template-columns:54px minmax(0,1fr) 116px; gap:13px; align-items:end; padding:15px;
  border:1px solid rgba(180,211,207,.27); border-radius:8px; background:rgba(16,21,26,.95); box-shadow:0 26px 80px rgba(0,0,0,.68),0 0 0 1px rgba(255,255,255,.025) inset; backdrop-filter:blur(24px); transition:min-height .32s var(--ease),width .32s var(--ease),background .32s var(--ease),transform .32s var(--ease);
}
.dock-composer:focus-within { border-color:rgba(78,224,210,.45); box-shadow:0 28px 90px rgba(0,0,0,.72),0 0 36px rgba(78,224,210,.07); }
.dock-composer:has(.dock-popover.is-open) { transition:none; }
.composer-aura { position:absolute; inset:-1px; z-index:-1; overflow:hidden; border-radius:8px; pointer-events:none; }.composer-aura::before { content:""; position:absolute; left:10%; right:10%; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,var(--jade),var(--gold),transparent); opacity:.65; animation:composerSignal 4.5s var(--ease) infinite alternate; }
.dock-upload { align-self:start; width:50px; height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid var(--line); border-radius:var(--radius); background:#151b21; color:#7f8d8a; cursor:pointer; transition:.25s var(--ease); }.dock-upload span { font-size:9px; }.dock-upload:hover { color:var(--jade); border-color:rgba(78,224,210,.5); background:#152326; }
.dock-main { min-width:0; }.dock-main textarea { width:100%; min-height:64px; max-height:148px; padding:4px 2px 8px; border:0; outline:0; background:transparent; color:#f1f5f4; font-size:14px; line-height:1.65; }.dock-main textarea::placeholder{color:#667270;}
.dock-reference-tray { display:none; align-items:center; min-height:0; padding:0 2px 9px; }.dock-reference-tray.has-files { display:flex; }.dock-reference-thumb { position:relative; width:40px; height:48px; margin-right:-10px; overflow:visible; transform:rotate(-3deg); transition:.25s var(--ease); }.dock-reference-thumb:nth-child(even) { transform:rotate(3deg); }.dock-reference-thumb:hover { z-index:3; transform:translateY(-4px) rotate(0); }.dock-reference-thumb img, .dock-reference-thumb video, .dock-reference-thumb .local-media-placeholder { width:100%; height:100%; display:block; object-fit:cover; pointer-events:none; border:1px solid rgba(255,255,255,.38); background:#13191e; box-shadow:0 8px 20px rgba(0,0,0,.45); }.dock-reference-thumb button { position:absolute; top:-6px; right:-6px; width:18px; height:18px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:#281317; color:#ff9ea2; cursor:pointer; opacity:.82; }.dock-reference-thumb button:hover { opacity:1; background:#48191f; }
.dock-control-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:36px; }.dock-control-group { min-width:0; display:flex; align-items:center; gap:6px; }.composer-chip { height:34px; min-width:0; display:flex; align-items:center; gap:7px; padding:0 11px; border:1px solid var(--line); border-radius:var(--radius); background:#11171c; color:#a7b2b0; cursor:pointer; white-space:nowrap; transition:.22s var(--ease); }.composer-chip svg { width:15px; height:15px; }.composer-chip svg:last-child:not(:first-child) { width:13px; }.composer-chip:hover,.composer-chip.is-open { border-color:rgba(78,224,210,.34); color:#edf7f4; background:#152024; }.composer-chip.is-accent { color:var(--jade); border-color:rgba(78,224,210,.22); background:#112125; }.dock-reference-count { flex:0 0 auto; color:#65716f; font-size:9px; }
.dock-composer>.send-button { position:relative; width:116px; height:48px; margin-bottom:1px; overflow:hidden; }.dock-composer>.send-button .send-ripple { inset:6px; border-radius:4px; animation:sendHalo 2.2s ease-in-out infinite; }
.dock-composer.is-compact { width:min(850px,calc(100% - 120px)); min-height:70px; grid-template-columns:42px minmax(0,1fr) 104px; gap:10px; padding:10px 11px; background:rgba(21,26,31,.9); }.dock-composer.is-compact .dock-upload { width:40px; height:42px; }.dock-composer.is-compact .dock-upload span,.dock-composer.is-compact .dock-reference-tray,.dock-composer.is-compact .dock-control-row { display:none; }.dock-composer.is-compact .dock-main textarea { min-height:42px; max-height:42px; padding:10px 2px 4px; overflow:hidden; white-space:nowrap; }.dock-composer.is-compact>.send-button { width:104px; min-width:104px; height:42px; padding:0 12px; }
.dock-popover { position:absolute; z-index:20; bottom:calc(100% + 12px); display:none; padding:12px; border:1px solid rgba(170,211,207,.2); border-radius:8px; background:rgba(15,20,25,.99); box-shadow:0 24px 70px rgba(0,0,0,.65); backdrop-filter:blur(22px); animation:popoverEnter .22s var(--ease) both; }.dock-popover.is-open { display:block; }.dock-popover>p { margin:2px 8px 9px; color:#65726f; font-size:10px; }
.dock-mode-popover { left:72px; width:300px; }.dock-model-popover { left:190px; width:340px; }.dock-settings-popover { left:auto; right:0; width:min(590px,calc(100vw - var(--rail) - 64px)); padding:18px; }
.popover-option { width:100%; min-height:58px; display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:10px; padding:8px 10px; border:1px solid transparent; border-radius:var(--radius); background:transparent; color:#91a09d; text-align:left; cursor:pointer; }.popover-option:hover { background:#151d22; color:#f1f6f4; }.popover-option.is-active { border-color:rgba(78,224,210,.18); background:#142125; color:var(--jade); }.popover-option>svg:first-child { width:20px; height:20px; }.popover-option>svg:last-child { opacity:0; }.popover-option.is-active>svg:last-child { opacity:1; }.popover-option strong,.popover-option small { display:block; }.popover-option strong { font-size:12px; }.popover-option small { margin-top:4px; color:#64716e; font-size:9px; }
.popover-option em { justify-self:end; padding:3px 5px; border:1px solid rgba(216,179,106,.2); border-radius:3px; color:var(--gold); font-style:normal; font-size:8px; }
.settings-popover-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line); }.settings-popover-head strong { font-size:14px; }.settings-popover-head span { color:#65726f; font-size:9px; }.dock-setting-block { display:grid; grid-template-columns:74px 1fr; align-items:center; gap:12px; margin-top:14px; }.dock-setting-block>label { color:#82908d; font-size:10px; }.dock-ratio-grid,.segmented-setting { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }.dock-ratio-grid button { height:66px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); border-radius:var(--radius); background:#10161a; color:#72807d; cursor:pointer; }.dock-ratio-grid button:hover,.dock-ratio-grid button.is-active { border-color:rgba(78,224,210,.46); color:var(--jade); background:#132124; }.dock-ratio-grid .ratio-box { margin:0; }.segmented-setting { grid-template-columns:repeat(4,minmax(0,1fr)); }.segmented-setting button { height:34px; border:1px solid var(--line); border-radius:var(--radius); background:#10161a; color:#71807d; cursor:pointer; }.segmented-setting button:hover,.segmented-setting button.is-active { border-color:rgba(78,224,210,.42); background:#152326; color:var(--jade); }

.page-shell { min-height:calc(100vh - var(--signal)); padding:42px clamp(26px,4vw,70px); background:rgba(6,9,12,.91); }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }.page-head h2 { margin:0; font-size:31px; }.head-actions{display:flex;gap:8px}
.asset-tabs { display:flex; border-bottom:1px solid var(--line); }.asset-tabs button { min-width:130px; height:46px; border:0; border-bottom:2px solid transparent; background:transparent; color:#73807e; cursor:pointer; }.asset-tabs button.is-active{color:#f2f5f4;border-bottom-color:var(--jade)}
.asset-filter-row { display:flex; align-items:center; gap:18px; padding:18px 0 24px; }.filter-group{display:flex;gap:5px}.filter-group button{height:34px;padding:0 14px;border:1px solid transparent;background:transparent;color:#72807d;cursor:pointer}.filter-group button:hover,.filter-group button.is-active{border-color:var(--line);background:#11181c;color:var(--jade)}
.asset-search { margin-left:auto; width:240px; height:36px; display:flex; align-items:center; gap:8px; padding:0 11px; border:1px solid var(--line); background:#0e1418; color:#657370; }.asset-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#dce4e2}.asset-search input::placeholder{color:#596663}
.asset-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.asset-date{grid-column:1/-1;margin:18px 0 2px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:19px;font-weight:700}
.asset-card { position:relative; min-width:0; border:1px solid var(--line); background:#0c1216; overflow:hidden; }.asset-card-media { position:relative; aspect-ratio:4/3; overflow:hidden; background:#11181c; cursor:pointer; }.asset-card-media img,.asset-card-media video{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}.asset-card:hover .asset-card-media img,.asset-card:hover .asset-card-media video{transform:scale(1.04)}
.asset-card-body{padding:12px}.asset-card-body strong{display:block;min-height:40px;overflow:hidden;font-size:13px;line-height:1.5}.asset-card-body>span{display:block;margin-top:8px;color:#667370;font-size:10px}.asset-card-actions{display:flex;gap:6px;margin-top:11px}.asset-card-actions>*{flex:1;min-width:0}
.asset-card-prompt{display:grid;justify-items:start;gap:5px}.asset-card-prompt.is-collapsible:not(.is-expanded)>strong{display:-webkit-box;max-height:58.5px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}.asset-card-prompt.is-expanded>strong{max-height:none;overflow:visible}
.prompt-fold-toggle{min-height:24px;display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:transparent;color:#6f9c97;font-size:9px;cursor:pointer}.prompt-fold-toggle:hover{color:var(--jade)}.prompt-fold-toggle svg{width:11px;height:11px}
.asset-empty{grid-column:1/-1;min-height:50vh;display:grid;place-items:center;text-align:center;color:#687573}.asset-empty b{display:block;margin-bottom:8px;color:#d7e0de;font-size:18px}.asset-empty span{display:block}.asset-empty-action{min-width:132px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;padding:0 16px;border:1px solid rgba(78,224,210,.34);border-radius:5px;background:#112125;color:var(--jade);font-weight:700;text-decoration:none;cursor:pointer}.asset-empty-action:hover{border-color:var(--jade);background:#163034}.asset-empty-action svg{width:17px;height:17px}

.skills-page {
  position: relative;
  min-height: calc(100vh - var(--signal));
  padding: 38px clamp(30px, 4.6vw, 82px) 72px;
  overflow: visible;
  background: rgba(5, 8, 11, .94);
}
.skills-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(rgba(91, 145, 141, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 145, 141, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
.skills-page > * { position: relative; z-index: 1; }
.skills-header {
  min-height: 132px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.skills-header p { margin: 0 0 13px; color: var(--jade); font: 10px Consolas, monospace; }
.skills-header h2 { margin: 0; font-size: 38px; line-height: 1.15; }
.skills-header > div > span { display: block; margin-top: 13px; color: #798784; font-size: 12px; }
.skills-header-actions { display: flex; align-items: flex-start; gap: 12px; }
.skill-admin-button { margin-top: 1px; border-color: rgba(216, 179, 106, .26); color: var(--gold); background: #151510; }
.skill-admin-button:hover { border-color: var(--gold); background: #211e13; color: #ffe0a3; }
.skills-live {
  min-width: 150px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  color: #7e8b89;
  font-size: 11px;
}
.skills-live i { width: 7px; height: 7px; background: var(--success); box-shadow: 0 0 16px rgba(78, 211, 157, .7); animation: livePulse 1.4s ease-in-out infinite; }
.skills-live strong { color: #dce7e4; }
.skills-toolbar { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.skill-tabs { display: flex; gap: 5px; }
.skill-tabs button {
  height: 36px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: #71807d;
  cursor: pointer;
}
.skill-tabs button:hover, .skill-tabs button.is-active { border-color: var(--line); background: #10171b; color: var(--jade); }
.skill-search {
  width: 245px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0d1317;
  color: #657370;
}
.skill-search svg { width: 16px; }
.skill-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #e5ecea; }
.skill-search input::placeholder { color: #55625f; }
.skill-collection { padding-top: 12px; }
.skill-collection-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.skill-collection-head > div { display: flex; align-items: center; gap: 11px; }
.skill-collection-head span { color: var(--gold); font: 9px Consolas, monospace; }
.skill-collection-head h3 { margin: 0; font-size: 15px; }
.skill-collection-head p { margin: 0; color: #586562; font-size: 10px; }
.skill-grid { min-height: 390px; display: grid; grid-template-columns: repeat(3, minmax(280px, 360px)); align-items: start; gap: 16px; }
.skill-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(170, 211, 207, .17);
  border-radius: 8px;
  background: #0b1115;
  cursor: pointer;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.skill-card:hover, .skill-card:focus-visible { transform: translateY(-5px); border-color: rgba(78, 224, 210, .48); box-shadow: 0 24px 64px rgba(0, 0, 0, .45), 0 0 30px rgba(78, 224, 210, .06); }
.skill-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #10171a; }
.skill-card-media::after { content: ""; position: absolute; inset: auto 0 0; height: 48%; pointer-events: none; background: linear-gradient(to top, rgba(5, 8, 11, .9), transparent); }
.skill-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; transition: transform .7s var(--ease), filter .35s var(--ease); }
.skill-card:hover .skill-card-media img { transform: scale(1.035); filter: brightness(1.08); }
.skill-card-scan { position: absolute; top: -25%; bottom: -25%; left: -28%; z-index: 2; width: 14%; pointer-events: none; opacity: 0; background: rgba(207, 255, 248, .13); filter: blur(10px); transform: rotate(13deg); }
.skill-card:hover .skill-card-scan { opacity: 1; animation: skillScan 1.2s var(--ease) both; }
.skill-exclusive, .skill-kind { position: absolute; z-index: 3; top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 4px; background: rgba(7, 10, 13, .72); backdrop-filter: blur(14px); font-size: 9px; }
.skill-exclusive { left: 12px; color: #e7c887; }
.skill-exclusive svg { width: 13px; height: 13px; }
.skill-kind { right: 12px; color: #b8c8c5; }
.skill-card-body { padding: 17px 17px 16px; }
.skill-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.skill-card-title h3 { margin: 0; font-size: 17px; }
.skill-card-title > svg { width: 17px; color: #667471; transition: color .25s var(--ease), transform .25s var(--ease); }
.skill-card:hover .skill-card-title > svg { color: var(--jade); transform: translate(2px, -2px); }
.skill-card-body > p { min-height: 42px; margin: 10px 0 15px; color: #74827f; font-size: 11px; line-height: 1.75; }
.skill-card-foot { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; border-top: 1px solid var(--line); }
.skill-card-foot > span { display: flex; align-items: center; gap: 7px; min-width: 0; color: #667471; font-size: 9px; }
.skill-card-foot > span svg { width: 14px; }
.skill-card-foot button { flex: 0 0 auto; height: 32px; padding: 0 13px; border: 1px solid rgba(78, 224, 210, .34); border-radius: var(--radius); background: #112125; color: var(--jade); font-size: 10px; cursor: pointer; }
.skill-card-foot button:hover { border-color: var(--jade); background: var(--jade); color: #06100f; }
.skill-empty { grid-column: 1 / -1; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-top: 1px solid var(--line); color: #65736f; text-align: center; }
.skill-empty svg { width: 28px; height: 28px; margin-bottom: 14px; color: #53615e; }
.skill-empty strong { color: #cbd5d2; font-size: 15px; }
.skill-empty span { margin-top: 7px; font-size: 10px; }

.modal-backdrop.skill-modal-backdrop { padding: 0; background: rgba(2, 4, 6, .96); }
.skill-modal-content {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(420px, 36vw) minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #070b0e;
  box-shadow: none;
}
.skill-modal-visual { position: relative; min-width: 0; overflow: hidden; background: #080c0f; }
.skill-modal-visual > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% center; }
.skill-visual-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 7, 9, .88) 0, transparent 48%), linear-gradient(90deg, transparent 65%, rgba(5, 8, 11, .76)); }
.skill-visual-copy { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 72px; }
.skill-visual-copy > span { color: var(--jade); font: 9px Consolas, monospace; }
.skill-visual-copy > strong { display: block; margin-top: 13px; font-size: 29px; line-height: 1.38; text-shadow: 0 6px 24px #000; }
.skill-visual-copy > div { display: flex; align-items: center; gap: 11px; margin-top: 19px; color: #9eb0ad; }
.skill-visual-copy em { font: 9px Consolas, monospace; font-style: normal; }
.skill-visual-copy svg { width: 17px; color: var(--gold); }
.skill-modal-panel { min-width: 0; min-height: 0; height: 100vh; max-height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding: 34px clamp(30px,3.2vw,58px) 28px; border-left: 1px solid var(--line); background: #0d1216; }
.skill-modal-panel > header { flex: 0 0 auto; padding-right: 36px; }
.skill-panel-badge { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 9px; border: 1px solid rgba(78, 224, 210, .22); border-radius: 4px; background: #112023; color: var(--jade); font-size: 9px; }
.skill-panel-badge svg { width: 13px; }
.skill-modal-panel h2 { margin: 14px 0 0; font-size: 30px; }
.skill-modal-panel header p { margin: 11px 0 0; color: #7f8c89; font-size: 11px; line-height: 1.75; }
.bjd-workflow-switch { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 18px; padding: 5px; border: 1px solid var(--line); border-radius: 6px; background: #090e11; }
.bjd-workflow-switch button { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #65726f; text-align: left; cursor: pointer; }
.bjd-workflow-switch button:hover { color: #b9c5c2; background: #10171b; }
.bjd-workflow-switch button.is-active { border-color: rgba(78, 224, 210, .32); background: #122225; color: #ecf5f2; box-shadow: inset 2px 0 0 var(--jade); }
.bjd-workflow-switch button b { color: #687673; font: 10px Consolas, monospace; }
.bjd-workflow-switch button.is-active b { color: var(--jade); }
.bjd-workflow-switch button span { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; }
.bjd-workflow-switch button small { color: #64716e; font-size: 8px; font-weight: 400; }
.bjd-workflow-panel { min-height: 0; max-height: 100%; flex: 1 1 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(78, 224, 210, .38) transparent; scroll-padding-block: 16px; padding-right: 8px; }
.bjd-workflow-panel::-webkit-scrollbar { width: 8px; }
.bjd-workflow-panel::-webkit-scrollbar-track { background: transparent; }
.bjd-workflow-panel::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: rgba(78, 224, 210, .34); background-clip: padding-box; }
.bjd-workflow-panel::-webkit-scrollbar-thumb:hover { background: rgba(78, 224, 210, .58); background-clip: padding-box; }
.bjd-workflow-panel[hidden], .bjd-source-empty[hidden], .bjd-inline-task[hidden] { display: none !important; }
.skill-step-line { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 10px; margin: 25px 0 17px; color: #5e6a68; }
.skill-step-line span { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 9px; }
.skill-step-line span b { color: #778582; font: 9px Consolas, monospace; }
.skill-step-line span.is-active { color: #d6e1de; }
.skill-step-line span.is-active b { color: var(--jade); }
.skill-step-line > i { height: 1px; background: #253034; }
.skill-upload-stage { position: relative; min-height: 250px; flex: 1; overflow: hidden; border: 1px dashed rgba(150, 189, 184, .25); border-radius: 6px; background: #0a0f12; transition: border-color .25s var(--ease), background .25s var(--ease); }
.skill-upload-stage:hover, .skill-upload-stage.is-dragover { border-color: rgba(78, 224, 210, .65); background: #0e191b; }
.skill-upload-stage.has-file { border-style: solid; border-color: rgba(78, 224, 210, .3); }
.skill-upload-drop { width: 100%; height: 100%; min-height: 250px; display: grid; place-items: center; cursor: pointer; }
.skill-upload-empty { display: flex; flex-direction: column; align-items: center; text-align: center; color: #64716e; }
.skill-upload-empty[hidden], .skill-upload-stage img[hidden], .skill-remove-file[hidden], .skill-file-row[hidden] { display: none !important; }
.skill-upload-empty > svg { width: 31px; height: 31px; margin-bottom: 13px; color: var(--jade); stroke-width: 1.35; }
.skill-upload-empty strong { color: #cbd6d3; font-size: 13px; }
.skill-upload-empty small { margin-top: 7px; color: #6b7875; font-size: 10px; }
.skill-upload-empty em { margin-top: 15px; padding: 4px 7px; border: 1px solid var(--line); color: #53605e; font: 8px Consolas, monospace; font-style: normal; }
.skill-upload-stage img { width: 100%; height: 100%; min-height: 250px; max-height: 330px; object-fit: contain; background: #070a0d; }
.skill-remove-file { position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 111, 117, .34); border-radius: var(--radius); background: rgba(38, 14, 18, .9); color: #ff9ca1; cursor: pointer; backdrop-filter: blur(12px); }
.skill-remove-file:hover { border-color: var(--danger); background: #45151b; color: #fff; }
.skill-file-row { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; color: #71807d; font-size: 9px; }
.skill-file-row > span { min-width: 0; display: flex; align-items: center; gap: 7px; }
.skill-file-row svg { width: 14px; color: var(--jade); }
.skill-file-row strong { max-width: 280px; overflow: hidden; color: #9ba9a6; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.skill-file-row small { flex: 0 0 auto; }
.skill-generate-button { width: 100%; min-height: 48px; display: grid; grid-template-columns: 20px 1fr 20px; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid var(--jade); border-radius: var(--radius); background: var(--jade); color: #06100f; font-weight: 800; cursor: pointer; transition: .25s var(--ease); }
.skill-generate-button:hover:not(:disabled) { background: #76eee3; border-color: #76eee3; color: #04100e; box-shadow: 0 0 34px rgba(78, 224, 210, .2); }
.skill-generate-button:disabled { border-color: var(--line); background: #12181c; color: #4f5b59; cursor: not-allowed; }
.skill-generate-button.is-busy { grid-template-columns: 20px 1fr; }
.skill-generate-button > svg:last-child { justify-self: end; }
.skill-api-status { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 18px; margin: 9px 0 0; color: #596663; font-size: 9px; }
.skill-api-status > i { width: 5px; height: 5px; background: var(--gold); box-shadow: 0 0 10px rgba(216, 179, 106, .5); }
.skill-api-status.is-ready { color: #6e817c; }
.skill-api-status.is-ready > i { background: var(--success); box-shadow: 0 0 10px rgba(78, 211, 157, .55); }
.bjd-script-workflow { padding-top: 16px; }
.bjd-script-editor { overflow: hidden; border: 1px solid rgba(158, 196, 191, .18); border-radius: 5px; background: #080d10; }
.bjd-script-editor:focus-within { border-color: rgba(78, 224, 210, .45); box-shadow: 0 0 0 3px rgba(78, 224, 210, .04); }
.bjd-script-editor-head { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 9px 0 12px; border-bottom: 1px solid var(--line); color: #9aa7a4; font-size: 9px; }
.bjd-script-editor-head > div { display: flex; align-items: center; gap: 7px; }
.bjd-script-editor-head small { color: #586562; font: 8px Consolas, monospace; }
.bjd-script-editor-head label { height: 27px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid var(--line); border-radius: 3px; background: #10171b; color: #8f9c99; cursor: pointer; }
.bjd-script-editor-head label:hover { border-color: rgba(78, 224, 210, .35); color: var(--jade); }
.bjd-script-editor-head button { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 3px; background: #10171b; color: #687572; cursor: pointer; }
.bjd-script-editor-head button:hover { border-color: rgba(255, 111, 117, .35); color: var(--danger); }
.bjd-script-editor-head svg { width: 12px; }
.bjd-script-editor textarea { width: 100%; min-height: 170px; max-height: 260px; resize: vertical; padding: 13px; border: 0; outline: 0; background: transparent; color: #dce5e2; font: 11px/1.8 Consolas, "Microsoft YaHei", sans-serif; }
.bjd-script-editor textarea::placeholder { color: #4d5956; }
.bjd-script-workflow > .skill-generate-button { margin-top: 10px; }
.bjd-character-image-workflow, .bjd-convert-workflow { padding-top: 16px; }
.skill-next-step { width: 100%; min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 12px; margin-top: 12px; padding: 0 17px; border: 1px solid rgba(78, 224, 210, .4); border-radius: 4px; background: #122326; color: #e7f6f3; text-align: left; cursor: pointer; }
.skill-next-step:hover:not(:disabled) { border-color: var(--jade); background: #173034; box-shadow: 0 0 32px rgba(78, 224, 210, .08); }
.skill-next-step:disabled { border-color: var(--line); background: #10161a; color: #4f5b59; cursor: not-allowed; }
.skill-next-step > span { min-width: 0; display: grid; gap: 3px; }
.skill-next-step small { color: var(--jade); font: 8px Consolas, monospace; }
.skill-next-step:disabled small { color: #4f5b59; }
.skill-next-step strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.skill-next-step > svg { justify-self: end; width: 18px; }
.bjd-stage-empty { min-height: 280px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--line); background: #090e11; color: #5d6a67; text-align: center; }
.bjd-stage-empty[hidden], .bjd-stage-results[hidden] { display: none !important; }
.bjd-stage-empty > svg { width: 26px; height: 26px; margin-bottom: 12px; color: var(--jade); }
.bjd-stage-empty strong { color: #bac6c3; font-size: 12px; }
.bjd-stage-empty span { margin-top: 6px; font-size: 9px; }
.bjd-stage-empty button { margin-top: 13px; min-height: 31px; padding: 0 12px; border: 1px solid rgba(78, 224, 210, .28); border-radius: 3px; background: #102023; color: var(--jade); font-size: 9px; cursor: pointer; }
.bjd-stage-results { display: flex; flex-direction: column; min-height: 0; }
.bjd-stage-results > header { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bjd-stage-results > header span { display: flex; align-items: baseline; gap: 9px; }
.bjd-stage-results > header strong { color: #d7e1de; font-size: 11px; }
.bjd-stage-results > header small { color: #5e6b68; font-size: 8px; }
.bjd-stage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.bjd-stage-card { min-width: 0; overflow: hidden; border: 1px solid rgba(158, 196, 191, .16); border-radius: 4px; background: #090e11; }
.bjd-stage-card:only-child { grid-column: 1 / -1; }
.bjd-stage-card > header { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 11px; border-bottom: 1px solid var(--line); }
.bjd-stage-card > header span { min-width: 0; display: flex; align-items: center; gap: 8px; }
.bjd-stage-card > header b { color: var(--jade); font: 8px Consolas, monospace; }
.bjd-stage-card > header strong { overflow: hidden; color: #d9e3e0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.bjd-stage-card > header em { flex: 0 0 auto; color: #65736f; font: 7px Consolas, monospace; font-style: normal; }
.bjd-stage-ready { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border-bottom: 1px solid var(--line); background: rgba(78, 224, 210, .035); }
.bjd-stage-ready > svg { width: 15px; color: var(--success); }
.bjd-stage-ready > span { min-width: 0; display: grid; gap: 2px; }
.bjd-stage-ready strong { color: #aebbb8; font-size: 8px; }
.bjd-stage-ready small { color: #596663; font-size: 7px; }
.bjd-character-results { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.bjd-character-results[hidden] { display: none !important; }
.bjd-character-results > header { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.bjd-character-results > header > span { display: flex; align-items: baseline; gap: 8px; }
.bjd-character-results > header strong { color: #d8e2df; font-size: 11px; }
.bjd-character-results > header small { color: #5e6b68; font-size: 8px; }
.bjd-character-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bjd-character-card { overflow: hidden; border: 1px solid rgba(158, 196, 191, .16); border-left: 2px solid #5b6a66; border-radius: 4px; background: #090e11; transition: .22s var(--ease); }
.bjd-character-card:hover { border-color: rgba(78, 224, 210, .3); border-left-color: var(--jade); background: #0b1215; }
.bjd-character-card.is-active { border-color: rgba(78, 224, 210, .55); border-left-color: var(--jade); box-shadow: inset 0 0 0 1px rgba(78, 224, 210, .05), 0 10px 28px rgba(0, 0, 0, .16); }
.bjd-character-card.is-finalized { border-left-color: var(--success); }
.bjd-character-card > header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; }
.bjd-character-identity { min-width: 0; display: flex; align-items: center; gap: 9px; }
.bjd-character-identity > b { flex: 0 0 auto; color: var(--jade); font: 8px Consolas, monospace; }
.bjd-character-identity > span { min-width: 0; display: grid; gap: 4px; }
.bjd-character-identity strong { overflow: hidden; color: #d9e3e0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.bjd-character-identity small { overflow: hidden; color: #596663; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.bjd-character-card-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.bjd-character-card-actions > em { min-height: 25px; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border: 1px solid rgba(216, 179, 106, .2); border-radius: 3px; background: rgba(216, 179, 106, .05); color: #ad9463; font-size: 7px; font-style: normal; white-space: nowrap; }
.bjd-character-card-actions > em.is-finalized { border-color: rgba(78, 211, 157, .22); background: rgba(78, 211, 157, .06); color: var(--success); }
.bjd-character-card-actions > em svg { width: 10px; }
.bjd-character-card-actions > button { min-height: 29px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid rgba(78, 224, 210, .25); border-radius: 3px; background: #102023; color: var(--jade); font-size: 8px; cursor: pointer; }
.bjd-character-card-actions > button:hover:not(:disabled) { border-color: var(--jade); background: #173034; }
.bjd-character-card-actions > button:disabled { border-color: var(--line); background: #11171a; color: #4f5b58; cursor: not-allowed; }
.bjd-character-card-actions > button svg { width: 12px; }
.bjd-character-chat { overflow: hidden; margin-top: 10px; border: 1px solid rgba(78, 224, 210, .3); border-radius: 5px; background: #080d10; box-shadow: 0 18px 44px rgba(0, 0, 0, .2); }
.bjd-character-chat[hidden] { display: none !important; }
.bjd-character-chat > header { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(78, 224, 210, .07), transparent 54%); }
.bjd-character-chat > header > span { min-width: 0; display: grid; gap: 3px; }
.bjd-character-chat > header small { color: var(--jade); font: 7px Consolas, "Microsoft YaHei", sans-serif; }
.bjd-character-chat > header strong { overflow: hidden; color: #e0e9e6; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.bjd-character-chat > header button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 3px; background: #10171b; color: #6b7875; cursor: pointer; }
.bjd-character-chat > header button:hover { border-color: rgba(78, 224, 210, .35); color: var(--jade); }
.bjd-character-chat > header svg { width: 13px; }
.bjd-character-current-prompt { border-bottom: 1px solid var(--line); background: #0a1013; }
.bjd-character-prompt-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px 7px 14px; }
.bjd-character-prompt-head > span { min-width: 0; display: grid; gap: 3px; }
.bjd-character-prompt-head > span strong { color: #d5dfdc; font-size: 10px; }
.bjd-character-prompt-head > span small { color: #987f4e; font-size: 7px; }
.bjd-character-prompt-head > span small.is-finalized { color: var(--success); }
.bjd-character-prompt-head > div { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.bjd-character-prompt-head button { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid var(--line); border-radius: 3px; background: #10171b; color: #788683; font-size: 8px; cursor: pointer; }
.bjd-character-prompt-head button:hover:not(:disabled) { border-color: rgba(78, 224, 210, .35); color: var(--jade); }
.bjd-character-prompt-head button:disabled { opacity: .45; cursor: not-allowed; }
.bjd-character-prompt-head button svg { width: 11px; transition: transform .22s var(--ease); }
.bjd-character-prompt-content { min-height: 76px; max-height: none; overflow: visible; padding: 0 14px 14px; color: #aebbb7; font: 10px/1.82 "Microsoft YaHei", sans-serif; white-space: pre-wrap; word-break: break-word; }
.bjd-character-prompt-content.is-collapsible:not(.is-expanded) { position: relative; max-height: 132px; overflow: hidden; }
.bjd-character-prompt-content.is-collapsible:not(.is-expanded)::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 52px; pointer-events: none; background: linear-gradient(transparent, #0a1013); }
.bjd-character-chat-messages { min-height: 190px; max-height: 310px; display: flex; flex-direction: column; gap: 10px; overflow: auto; overscroll-behavior-y:auto; padding: 16px 14px; scrollbar-width: thin; scrollbar-gutter:stable; }
.bjd-character-chat-messages article { max-width: 78%; display: grid; gap: 4px; }
.bjd-character-chat-messages article.is-user { align-self: flex-end; justify-items: end; }
.bjd-character-chat-messages article.is-assistant { align-self: flex-start; justify-items: start; }
.bjd-character-chat-messages article > span { color: #586562; font-size: 7px; }
.bjd-character-chat-messages article > p { margin: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 4px; background: #10171b; color: #aebbb8; font-size: 9px; line-height: 1.65; word-break: break-word; }
.bjd-character-chat-messages article.is-user > p { border-color: rgba(78, 224, 210, .24); background: #122326; color: #d6e7e3; }
.bjd-character-chat-messages article.is-error > p { border-color: rgba(255, 111, 117, .25); background: #211216; color: #e8999d; }
.bjd-character-chat-messages article.is-thinking > p { display: flex; align-items: center; gap: 4px; min-height: 34px; }
.bjd-character-chat-messages article.is-thinking i { width: 4px; height: 4px; border-radius: 50%; background: var(--jade); animation: bjd-chat-pulse 1s ease-in-out infinite; }
.bjd-character-chat-messages article.is-thinking i:nth-child(2) { animation-delay: .15s; }
.bjd-character-chat-messages article.is-thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes bjd-chat-pulse { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.bjd-character-chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: #0b1114; }
.bjd-character-chat-compose textarea { width: 100%; min-height: 46px; max-height: 110px; resize: vertical; padding: 9px 10px; border: 1px solid var(--line); border-radius: 3px; outline: 0; background: #070b0d; color: #dce5e2; font: 9px/1.6 "Microsoft YaHei", sans-serif; }
.bjd-character-chat-compose textarea:focus { border-color: rgba(78, 224, 210, .45); }
.bjd-character-chat-compose textarea::placeholder { color: #4f5b58; }
.bjd-character-chat-compose textarea:disabled { opacity: .55; cursor: not-allowed; }
.bjd-character-chat-compose button { width: 40px; min-height: 40px; align-self: end; display: grid; place-items: center; padding: 0; border: 1px solid var(--jade); border-radius: 3px; background: var(--jade); color: #06100f; cursor: pointer; }
.bjd-character-chat-compose button:hover:not(:disabled) { background: #76eee3; }
.bjd-character-chat-compose button:disabled { border-color: var(--line); background: #161d20; color: #4f5b58; cursor: not-allowed; }
.bjd-character-chat-compose button svg { width: 15px; }
.bjd-character-chat > footer { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 12px; border-top: 1px solid var(--line); }
.bjd-character-chat > footer > span { min-width: 0; display: inline-flex; align-items: center; gap: 6px; color: #5e6b68; font-size: 8px; }
.bjd-character-chat > footer > span svg { flex: 0 0 auto; width: 13px; color: var(--success); }
.bjd-character-chat > footer > button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border: 1px solid rgba(78, 224, 210, .42); border-radius: 3px; background: #122326; color: var(--jade); font-size: 8px; font-weight: 700; cursor: pointer; }
.bjd-character-chat > footer > button:hover:not(:disabled) { border-color: var(--jade); background: #173034; }
.bjd-character-chat > footer > button:disabled { border-color: rgba(78, 211, 157, .18); background: rgba(78, 211, 157, .04); color: #659982; cursor: default; }
.bjd-character-chat > footer > button svg { width: 13px; }
.bjd-character-stage { display: grid; grid-template-columns: 1fr 18px 1fr; align-items: stretch; gap: 7px; padding: 9px; }
.bjd-character-stage.is-single-stage { grid-template-columns: minmax(0, 1fr); }
.bjd-character-stage > svg { align-self: center; width: 14px; color: #40504d; }
.bjd-character-stage-box { min-width: 0; min-height: 196px; display: grid; grid-template-columns: minmax(108px, 132px) minmax(0, 1fr); align-items: stretch; gap: 11px; padding: 9px; border: 1px solid var(--line); background: #0b1114; }
.bjd-character-stage.is-single-stage .bjd-character-stage-box { min-height: 286px; grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); }
.bjd-character-stage-preview { position:relative; min-width:0; width:100%; min-height:176px; overflow:hidden; padding:0; border:1px solid rgba(158,196,191,.14); border-radius:3px; background:#070b0d; cursor:zoom-in; }
.bjd-character-stage.is-single-stage .bjd-character-stage-preview { min-height:266px; }
.bjd-character-stage-preview img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; transition:transform .35s var(--ease),filter .35s var(--ease); }
.bjd-character-stage-preview > span { position:absolute; left:50%; bottom:10px; display:flex; align-items:center; gap:5px; min-height:25px; padding:0 8px; border:1px solid rgba(255,255,255,.12); border-radius:3px; background:rgba(5,9,11,.82); color:#dce9e6; font-size:8px; opacity:0; transform:translate(-50%,6px); transition:.25s var(--ease); backdrop-filter:blur(10px); white-space:nowrap; }
.bjd-character-stage-preview > span svg { width:11px; }
.bjd-character-stage-preview:hover img { transform:scale(1.018); filter:brightness(.75); }
.bjd-character-stage-preview:hover > span { opacity:1; transform:translate(-50%,0); }
.bjd-character-stage-icon { width:100%; min-height:176px; display:grid; place-items:center; background:#070b0d; color:var(--jade); }
.bjd-character-stage.is-single-stage .bjd-character-stage-icon { min-height:266px; }
.bjd-character-stage-icon svg { width: 17px; }
.bjd-character-stage-copy { min-width:0; display:grid; align-content:center; gap:7px; }
.bjd-character-stage-copy strong { overflow: hidden; color: #bcc8c5; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.bjd-character-stage-copy small { overflow: hidden; color: #5f6c69; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.bjd-character-stage-copy button { min-height: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 7px; border: 1px solid rgba(78, 224, 210, .25); border-radius: 3px; background: #102023; color: var(--jade); font-size: 7px; cursor: pointer; }
.bjd-character-stage-copy button:disabled { border-color: var(--line); background: #11171a; color: #4f5b58; cursor: not-allowed; }
.bjd-character-stage-copy button.is-danger { border-color: rgba(255, 111, 117, .25); background: #211216; color: #e8999d; }
.bjd-character-stage-copy svg { width: 10px; }
.bjd-character-mini-progress { height: 2px; overflow: hidden; background: #202a2d; }
.bjd-character-mini-progress i { height: 100%; display: block; background: var(--jade); }
.bjd-direct-convert { margin-top: 14px; border: 1px solid var(--line); border-radius: 4px; background: #090e11; }
.bjd-direct-convert summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px; color: #84918e; cursor: pointer; list-style: none; }
.bjd-direct-convert summary::-webkit-details-marker { display: none; }
.bjd-direct-convert summary > span { display: flex; align-items: center; gap: 8px; }
.bjd-direct-convert summary svg { width: 15px; color: var(--jade); }
.bjd-direct-convert summary strong { color: #bac6c3; font-size: 10px; }
.bjd-direct-convert summary small { color: #5d6966; font-size: 8px; }
.bjd-direct-convert summary::after { content: "+"; color: var(--jade); font: 15px Consolas, monospace; }
.bjd-direct-convert[open] summary::after { content: "−"; }
.bjd-direct-convert summary > small { margin-left: auto; }
.bjd-direct-convert-body { display: grid; gap: 9px; padding: 0 12px 12px; border-top: 1px solid var(--line); }
.bjd-direct-convert .skill-upload-stage, .bjd-direct-convert .skill-upload-drop { min-height: 220px; }
.bjd-direct-convert .skill-upload-stage img { min-height: 220px; max-height: 300px; }
.bjd-three-view-workflow { padding-top: 16px; }
.bjd-three-view-lead { display: grid; gap: 5px; padding: 0 1px 13px; }
.bjd-three-view-lead > span { color: var(--gold); font: 8px Consolas, monospace; }
.bjd-three-view-lead > strong { color: #e1e9e7; font-size: 13px; }
.bjd-three-view-lead > small { color: #697673; font-size: 9px; line-height: 1.6; }
.bjd-source-picker-head { min-height: 28px; display: flex; align-items: center; justify-content: space-between; color: #9aa7a4; font-size: 9px; }
.bjd-source-picker-head small { color: #566360; font-size: 8px; }
.bjd-source-grid { min-height: 236px; max-height: 252px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(176px, 206px); gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 5px; }
.bjd-source-grid::-webkit-scrollbar { height: 3px; }
.bjd-source-grid::-webkit-scrollbar-thumb { background: #2d3b3d; }
.bjd-source-card { position:relative; min-width:0; overflow:hidden; display:grid; grid-template-rows:minmax(0,1fr) 34px; border:1px solid var(--line); border-radius:5px; background:#090e11; color:#83908d; }
.bjd-source-card:hover { border-color: rgba(78, 224, 210, .35); }
.bjd-source-card.is-active { border-color: var(--jade); box-shadow: 0 0 0 1px rgba(78, 224, 210, .18), 0 0 24px rgba(78, 224, 210, .06); }
.bjd-source-preview { position:relative; min-width:0; overflow:hidden; padding:0; border:0; border-bottom:1px solid var(--line); background:#06090b; cursor:zoom-in; }
.bjd-source-preview img { width:100%; height:100%; min-height:198px; display:block; object-fit:contain; object-position:center; transition:transform .35s var(--ease),filter .35s var(--ease); }
.bjd-source-preview-hint { position:absolute; left:50%; bottom:10px; min-height:25px; display:flex; align-items:center; gap:5px; padding:0 8px; border:1px solid rgba(255,255,255,.12); border-radius:3px; background:rgba(5,9,11,.84); color:#e6f0ed; font-size:8px; opacity:0; transform:translate(-50%,6px); transition:.25s var(--ease); backdrop-filter:blur(10px); white-space:nowrap; }
.bjd-source-preview-hint svg { width:11px; }
.bjd-source-preview:hover img { transform:scale(1.02); filter:brightness(.72); }
.bjd-source-preview:hover .bjd-source-preview-hint { opacity:1; transform:translate(-50%,0); }
.bjd-source-select { min-width:0; height:34px; display:flex; align-items:center; justify-content:space-between; gap:5px; padding:0 7px; border:0; background:#090e11; color:#83908d; text-align:left; cursor:pointer; }
.bjd-source-select:hover,.bjd-source-select.is-active { background:#102023; }
.bjd-source-card strong { overflow: hidden; color: #aebbb8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.bjd-source-card small { flex: 0 0 auto; color: #53615e; font-size: 7px; }
.bjd-source-card.is-active::after { content:"已选择"; position:absolute; top:6px; right:6px; height:20px; z-index:2; display:grid; place-items:center; padding:0 6px; background:var(--jade); color:#06100f; font-size:7px; font-weight:800; pointer-events:none; }
.bjd-source-empty { min-height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--line); color: #596663; text-align: center; }
.bjd-source-empty svg { width: 20px; color: var(--jade); }
.bjd-source-empty strong { margin-top: 8px; color: #aab7b4; font-size: 10px; }
.bjd-source-empty span { margin-top: 4px; font-size: 8px; }
.bjd-source-empty button { margin-top: 8px; padding: 5px 9px; border: 1px solid rgba(78, 224, 210, .28); background: #102023; color: var(--jade); font-size: 8px; cursor: pointer; }
.bjd-three-view-fixed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.bjd-three-view-fixed > span { min-width: 0; min-height: 46px; display: grid; grid-template-columns: 20px 1fr; grid-template-rows: 16px 16px; align-content: center; column-gap: 7px; padding: 0 9px; border: 1px solid var(--line); background: #0a0f12; }
.bjd-three-view-fixed svg { grid-row: 1 / 3; width: 15px; color: var(--gold); }
.bjd-three-view-fixed small { color: #56635f; font-size: 7px; }
.bjd-three-view-fixed strong { overflow: hidden; color: #c6d1ce; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.bjd-skill-resolution { margin: 12px 0; }
.bjd-skill-resolution > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: #9aa7a4; font-size: 9px; }
.bjd-skill-resolution > div:first-child span { color: var(--jade); font: 8px Consolas, monospace; }
.bjd-skill-resolution > div:last-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.bjd-skill-resolution button { min-height: 46px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: #0a0f12; color: #798683; text-align: left; cursor: pointer; }
.bjd-skill-resolution button:hover { border-color: rgba(78, 224, 210, .35); }
.bjd-skill-resolution button.is-active { border-color: var(--jade); background: #162625; color: #ecf5f2; }
.bjd-skill-resolution button strong { font-size: 10px; }
.bjd-skill-resolution button small { color: #566360; font-size: 7px; }
.bjd-inline-task { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 70px; margin-top: 10px; padding: 8px; border: 1px solid rgba(158, 196, 191, .16); border-left: 2px solid var(--jade); background: #090e11; }
.bjd-inline-preview,.bjd-inline-task > .bjd-task-icon { position:relative; width:54px; height:54px; display:grid; place-items:center; overflow:hidden; padding:0; border:0; background:#10171b; color:var(--jade); }
.bjd-inline-preview { cursor:zoom-in; }
.bjd-inline-preview img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .3s var(--ease),filter .3s var(--ease); }
.bjd-inline-preview span { position:absolute; inset:0; display:grid; place-items:center; background:rgba(5,9,11,.62); color:#fff; opacity:0; transition:.25s var(--ease); }
.bjd-inline-preview span svg { width:15px; }
.bjd-inline-preview:hover img { transform:scale(1.05); filter:brightness(.72); }
.bjd-inline-preview:hover span { opacity:1; }
.bjd-task-icon svg { width: 19px; }
.bjd-task-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bjd-task-copy strong { overflow: hidden; color: #d3ddda; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.bjd-task-copy small { color: #61706c; font-size: 8px; }
.bjd-task-track { height: 2px; overflow: hidden; background: #202a2d; }
.bjd-task-track i { height: 100%; display: block; background: var(--jade); transition: width .35s var(--ease); }
.bjd-task-actions { display: flex; align-items: center; gap: 5px; }
.bjd-task-actions button, .bjd-task-actions a { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: #11191d; color: #9aa8a5; font-size: 8px; text-decoration: none; cursor: pointer; }
.bjd-task-actions button:hover, .bjd-task-actions a:hover { border-color: rgba(78, 224, 210, .4); color: var(--jade); }
.bjd-task-actions svg { width: 12px; }

.skill-admin-modal {
  position: relative;
  width: min(560px, 94vw);
  max-height: calc(100dvh - 52px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 38px;
  border: 1px solid rgba(179, 216, 211, .22);
  border-radius: 8px;
  background: #0d1216;
  box-shadow: 0 46px 130px rgba(0, 0, 0, .82);
}
.skill-admin-modal > p:not(.skill-secret-note) { margin: 21px 0 0; color: var(--gold); font: 9px Consolas, monospace; }
.skill-admin-modal h2 { margin: 9px 0 24px; font-size: 25px; }
.skill-admin-status { min-height: 64px; display: flex; align-items: center; gap: 13px; padding: 0 15px; border: 1px solid var(--line); background: #0a0f12; }
.skill-admin-status > i { width: 8px; height: 8px; flex: 0 0 auto; background: var(--gold); box-shadow: 0 0 14px rgba(216, 179, 106, .5); }
.skill-admin-status span { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.skill-admin-status strong { color: #dce6e3; font-size: 12px; }
.skill-admin-status small { color: #657370; font-size: 9px; }
.skill-admin-status.is-ready { border-color: rgba(78, 211, 157, .25); }
.skill-admin-status.is-ready > i { background: var(--success); box-shadow: 0 0 14px rgba(78, 211, 157, .55); }
.skill-admin-status.is-error { border-color: rgba(255, 111, 117, .3); }
.skill-admin-status.is-error > i { background: var(--danger); box-shadow: 0 0 14px rgba(255, 111, 117, .55); }
.skill-secret-field { display: block; margin-top: 22px; }
.skill-secret-field > span { display: block; margin-bottom: 9px; color: #85928f; font-size: 10px; }
.skill-secret-field > div { height: 46px; display: grid; grid-template-columns: 1fr 44px; border: 1px solid rgba(179, 216, 211, .2); border-radius: var(--radius); background: #080d10; }
.skill-secret-field input { min-width: 0; padding: 0 14px; border: 0; outline: 0; background: transparent; color: #e6eeec; font: 12px Consolas, monospace; }
.skill-secret-field input:focus { box-shadow: inset 3px 0 0 var(--jade); }
.skill-secret-field button { display: grid; place-items: center; padding: 0; border: 0; border-left: 1px solid var(--line); background: transparent; color: #687673; cursor: pointer; }
.skill-secret-field button:hover { color: var(--jade); background: #10191d; }
.skill-secret-field button svg { width: 16px; height: 16px; }
.skill-secret-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; color: #65716f; font-size: 9px; line-height: 1.65; }
.skill-secret-note svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--jade); }
.skill-secret-save { height: 46px; }

.chat-layout { grid-template-columns:285px 1fr; }.chat-room{background:rgba(5,8,11,.86)}.chat-engine{display:flex;align-items:center;gap:8px;color:#72807e;font-size:11px}.message-stream{min-height:0;flex:1;overflow-y:auto;overscroll-behavior-y:auto;scrollbar-gutter:stable;padding:32px max(34px,7vw) var(--chat-composer-clearance,150px);scroll-padding-block:24px var(--chat-composer-clearance,150px)}.chat-welcome-panel{min-height:58vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.welcome-mark{width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(78,224,210,.42);color:var(--jade);font:25px "STKaiti","KaiTi",serif;box-shadow:0 0 38px rgba(78,224,210,.08)}.chat-welcome-panel p{margin:24px 0 8px;color:var(--gold);font-size:12px}.chat-welcome-panel h3{max-width:620px;margin:0;font-size:27px;line-height:1.45}.starter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(640px,100%);margin-top:28px}.starter-grid button{min-height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border:1px solid var(--line);background:#0d1418;color:#9ba8a5;text-align:left;cursor:pointer}.starter-grid button:hover{color:#fff;border-color:rgba(78,224,210,.35);background:#111c20}
.chat-message{max-width:820px;margin:0 auto 16px;display:grid;grid-template-columns:36px 1fr;gap:12px;animation:messageEnter .35s var(--ease) both}.chat-avatar{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);background:#11191d;color:var(--jade);font:15px "STKaiti","KaiTi",serif}.chat-message.user .chat-avatar{color:#f5c0b9;border-color:rgba(236,102,89,.32);background:#261613}.chat-bubble{padding:14px 16px;border:1px solid var(--line);background:#0e1519;color:#cbd5d2;line-height:1.75}.chat-message.user .chat-bubble{border-color:rgba(236,102,89,.2);background:#171315}.typing-dots{display:flex;gap:4px;align-items:center;height:20px}.typing-dots i{width:5px;height:5px;background:var(--jade);animation:typing 1s ease-in-out infinite}.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}
.chat-composer{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:min(900px,calc(100% - 64px));min-height:82px;display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:10px;align-items:end;padding:13px;border:1px solid rgba(182,213,209,.25);border-radius:8px;background:rgba(12,17,21,.96);box-shadow:0 24px 70px rgba(0,0,0,.55);backdrop-filter:blur(20px)}.chat-composer textarea{min-height:48px;padding:10px 4px;border:0;outline:0;background:transparent;color:#eef3f1;line-height:1.6}.chat-composer textarea::placeholder{color:#64716f}.chat-composer .send-button{width:96px;min-width:96px;height:44px;padding:0 12px}

/* Language model settings */
.settings-page {
  position: relative;
  min-height: calc(100vh - var(--signal));
  overflow-y: auto;
  padding: 54px clamp(38px, 5vw, 92px) 70px;
  background:
    linear-gradient(rgba(78, 224, 210, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 179, 106, .028) 1px, transparent 1px),
    #080c0f;
  background-size: 72px 72px;
}
.settings-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(78, 224, 210, .045), transparent 32%, transparent 70%, rgba(216, 179, 106, .035));
}
.settings-header,
.settings-workspace { position: relative; z-index: 1; width: min(1180px, 100%); margin-inline: auto; }
.settings-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.settings-header p { margin: 0; color: var(--jade); font: 9px Consolas, monospace; }
.settings-header h2 { margin: 10px 0 7px; font-size: 34px; font-weight: 640; }
.settings-header > div > span { color: #778380; font-size: 12px; }
.llm-status-badge { min-width: 190px; min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid rgba(216, 179, 106, .22); background: rgba(12, 17, 20, .86); }
.llm-status-badge > i { width: 7px; height: 7px; flex: 0 0 auto; background: var(--gold); box-shadow: 0 0 16px rgba(216, 179, 106, .55); }
.llm-status-badge span { display: grid; gap: 4px; }
.llm-status-badge strong { color: #dce5e2; font-size: 11px; }
.llm-status-badge small { max-width: 170px; overflow: hidden; color: #64716e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.llm-status-badge.is-ready { border-color: rgba(78, 211, 157, .28); }
.llm-status-badge.is-ready > i { background: var(--success); box-shadow: 0 0 17px rgba(78, 211, 157, .58); }
.settings-workspace { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 38px; padding-top: 34px; }
.settings-index { min-height: 560px; padding-right: 22px; border-right: 1px solid var(--line); }
.settings-index > button { width: 100%; min-height: 66px; display: grid; grid-template-columns: 24px 1fr 16px; gap: 11px; align-items: center; padding: 0 13px; border: 1px solid rgba(78, 224, 210, .22); background: #10191d; color: var(--jade); text-align: left; }
.settings-index > button svg { width: 17px; }
.settings-index > button span { display: grid; gap: 5px; }
.settings-index > button strong { color: #e0e8e5; font-size: 12px; }
.settings-index > button small { color: #65726f; font-size: 9px; }
.settings-seal { position: relative; width: 112px; height: 112px; display: grid; place-items: center; margin: 210px auto 0; border: 1px solid rgba(78, 224, 210, .16); border-radius: 50%; color: rgba(78, 224, 210, .34); font: 42px "STKaiti", "KaiTi", serif; }
.settings-seal::before,
.settings-seal::after,
.settings-seal span { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(216, 179, 106, .13); border-radius: 50%; }
.settings-seal::after { inset: 25px; transform: rotate(45deg); border-radius: 2px; }
.settings-seal span { inset: -8px; border-style: dashed; animation: sealSpin 24s linear infinite; }
@keyframes sealSpin { to { transform: rotate(360deg); } }
.llm-settings-panel { min-width: 0; padding: 4px 0 0; }
.llm-settings-title > span { display: flex; align-items: center; gap: 7px; color: var(--gold); font: 9px Consolas, monospace; }
.llm-settings-title > span svg { width: 13px; }
.llm-settings-title h3 { margin: 12px 0 7px; font-size: 24px; }
.llm-settings-title p { margin: 0; color: #73807d; font-size: 11px; }
.llm-provider-block { margin-top: 30px; }
.llm-provider-block > span,
.llm-field > span { display: block; margin-bottom: 9px; color: #8a9693; font-size: 10px; }
.llm-provider-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.llm-provider-options button { min-width: 0; min-height: 82px; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: 1fr 1fr; column-gap: 9px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: #0c1216; color: #6e7a77; text-align: left; cursor: pointer; transition: .2s var(--ease); }
.llm-provider-options button svg { grid-row: 1 / 3; width: 19px; }
.llm-provider-options button strong { align-self: end; overflow: hidden; color: #c9d3d0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.llm-provider-options button small { align-self: start; color: #606d6a; font-size: 9px; }
.llm-provider-options button:hover { border-color: rgba(78, 224, 210, .3); background: #101a1e; }
.llm-provider-options button.is-active { border-color: rgba(78, 224, 210, .5); background: #112024; color: var(--jade); box-shadow: inset 0 -2px 0 rgba(78, 224, 210, .55), 0 12px 34px rgba(0, 0, 0, .2); }
.llm-provider-options button.is-active strong { color: #eff7f4; }
.zaomeng-model-block { margin-top: 25px; }
.zaomeng-model-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 9px; }
.zaomeng-model-heading > span { color: #8a9693; font-size: 10px; }
.zaomeng-model-heading > small { color: #596562; font-size: 9px; }
.zaomeng-model-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zaomeng-model-options button { position: relative; min-width: 0; min-height: 92px; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 10px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 6px; background: #090f12; color: #65716f; text-align: left; cursor: pointer; transition: .2s var(--ease); }
.zaomeng-model-options button > svg { grid-row: 1 / 3; width: 21px; color: #71817d; }
.zaomeng-model-options button > span { min-width: 0; display: grid; gap: 5px; }
.zaomeng-model-options button strong { color: #d5dfdc; font-size: 13px; }
.zaomeng-model-options button small { overflow: hidden; color: #596562; font: 9px Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.zaomeng-model-options button b { justify-self: start; padding: 3px 6px; border: 1px solid rgba(179, 216, 211, .12); border-radius: 3px; color: #71807d; font-size: 8px; font-weight: 500; }
.zaomeng-model-options button:hover { border-color: rgba(78, 224, 210, .3); background: #0e171a; }
.zaomeng-model-options button.is-active { border-color: rgba(78, 224, 210, .56); background: #102025; box-shadow: inset 0 -2px 0 rgba(78, 224, 210, .62), 0 14px 34px rgba(0, 0, 0, .2); }
.zaomeng-model-options button.is-active > svg,
.zaomeng-model-options button.is-active b { color: var(--jade); }
.zaomeng-model-options button.is-active b { border-color: rgba(78, 224, 210, .25); background: rgba(78, 224, 210, .06); }
.zaomeng-model-options button.is-active strong { color: #f2f8f6; }
.llm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; margin-top: 25px; }
.llm-form-grid.is-zaomeng #llm-api-key-field { grid-column: 1 / -1; }
.llm-field-wide { grid-column: 1 / -1; }
.llm-field input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid rgba(179, 216, 211, .18); border-radius: 4px; outline: 0; background: #080d10; color: #e9f0ee; font-size: 12px; }
.llm-field input:focus { border-color: rgba(78, 224, 210, .58); box-shadow: 0 0 0 3px rgba(78, 224, 210, .05); }
.llm-field input::placeholder { color: #4d5957; }
.llm-secret-input { display: grid; grid-template-columns: 1fr 46px; }
.llm-secret-input input { border-radius: 4px 0 0 4px; }
.llm-secret-input button { border: 1px solid rgba(179, 216, 211, .18); border-left: 0; border-radius: 0 4px 4px 0; background: #0c1317; color: #6f7c79; cursor: pointer; }
.llm-secret-input button:hover { color: var(--jade); }
.llm-secret-input svg { width: 16px; }
.llm-config-actions { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 15px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.llm-config-actions > span { display: flex; align-items: center; gap: 7px; color: #63706d; font-size: 9px; }
.llm-config-actions > span svg { width: 14px; color: var(--success); }
.llm-settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; }
.llm-settings-footer > div:last-child { display: flex; gap: 8px; }
.llm-settings-footer button { min-height: 44px; }
.llm-call-rule { min-width: 0; display: grid; grid-template-columns: 32px 1fr; gap: 11px; align-items: center; }
.llm-call-rule > svg { width: 22px; color: var(--gold); }
.llm-call-rule span { min-width: 0; display: grid; gap: 5px; }
.llm-call-rule strong { color: #bfc9c6; font-size: 10px; }
.llm-call-rule small { color: #63706d; font-size: 9px; line-height: 1.5; }

/* Live language-model chat */
.chat-toolbar .chat-engine { min-width: 150px; height: 38px; justify-content: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: #0d1418; cursor: pointer; }
.chat-toolbar .chat-engine:hover { border-color: rgba(78, 224, 210, .34); color: #c7d3d0; }
.chat-toolbar .chat-engine.is-ready { color: var(--jade); border-color: rgba(78, 224, 210, .22); }
.chat-toolbar .chat-engine svg { width: 14px; }
.conversation-row { position: relative; min-width: 0; }
.conversation-row .conversation-item { padding-right: 38px; }
.conversation-delete { position: absolute; top: 50%; right: 7px; width: 28px; height: 28px; display: grid; place-items: center; transform: translateY(-50%); border: 0; background: transparent; color: #53605e; opacity: 0; cursor: pointer; transition: .18s var(--ease); }
.conversation-row:hover .conversation-delete,
.conversation-row.is-active .conversation-delete { opacity: 1; }
.conversation-delete:hover { color: var(--danger); background: rgba(255, 111, 117, .08); }
.conversation-delete svg { width: 14px; }
.chat-connection-notice { width: min(820px, 100%); min-height: 64px; display: grid; grid-template-columns: 32px 1fr 18px; gap: 12px; align-items: center; margin: 0 auto 20px; padding: 0 15px; border: 1px solid rgba(216, 179, 106, .24); border-radius: 5px; background: rgba(24, 20, 13, .82); color: var(--gold); text-align: left; cursor: pointer; }
.chat-connection-notice > svg { width: 19px; }
.chat-connection-notice span { display: grid; gap: 5px; }
.chat-connection-notice strong { color: #e2d4b9; font-size: 11px; }
.chat-connection-notice small { color: #80745e; font-size: 9px; }
.chat-bubble { position: relative; min-width: 0; }
.chat-bubble pre { overflow-x: auto; margin: 12px 0 0; padding: 14px; border: 1px solid rgba(78, 224, 210, .15); border-radius: 4px; background: #080d10; color: #e2ece9; white-space: pre-wrap; word-break: break-word; }
.chat-bubble code { font: 11px/1.75 Consolas, monospace; }
.chat-copy { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 3px; background: rgba(7, 11, 14, .72); color: #667370; opacity: 0; cursor: pointer; transition: .18s var(--ease); }
.chat-message:hover .chat-copy { opacity: 1; }
.chat-copy:hover { color: var(--jade); border-color: rgba(78, 224, 210, .22); }
.chat-copy svg { width: 13px; }
.chat-message.error .chat-avatar { color: var(--danger); border-color: rgba(255, 111, 117, .32); }
.chat-message.error .chat-bubble { color: #efb4b7; border-color: rgba(255, 111, 117, .25); background: rgba(42, 17, 20, .74); }
.chat-message.is-thinking .chat-bubble { display: flex; align-items: center; gap: 12px; color: #70807c; }
.chat-message.is-thinking .chat-bubble small { font-size: 9px; }
.chat-composer { grid-template-columns: minmax(0, 1fr) 96px; }
.chat-composer textarea { min-width: 0; max-height:180px; overflow-y:auto; scrollbar-gutter:stable; }
.chat-composer .send-button { grid-column: 2; }
.chat-composer .send-button:disabled { cursor: default; opacity: .35; }

.modal-backdrop{position:fixed;inset:0;z-index:200;display:grid;place-items:safe center;padding:26px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;background:rgba(2,4,6,.9);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:.3s var(--ease)}
.modal-backdrop.is-open{opacity:1;visibility:visible}
#preview-modal{z-index:320}
#preview-modal.is-reference-preview{z-index:400}
.preview-modal-content{position:relative;width:min(1540px,96vw);height:min(920px,92vh);display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,27vw,460px);border:1px solid rgba(184,219,215,.2);background:#070a0d;box-shadow:0 45px 120px rgba(0,0,0,.78)}
.modal-close{position:absolute;top:14px;right:14px;z-index:3}
.preview-media{position:relative;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;background:#030506}
.preview-media.is-image{padding:0}
.preview-media video{width:100%;height:100%;display:block;object-fit:contain}
.preview-audio-stage{width:min(720px,78%);display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:28px;padding:38px;border:1px solid rgba(78,224,210,.22);border-radius:8px;background:radial-gradient(circle at 15% 20%,rgba(78,224,210,.12),transparent 36%),#0b1216;box-shadow:0 30px 90px rgba(0,0,0,.42)}
.preview-audio-symbol{width:112px;height:112px;position:relative;display:grid;place-items:center;border:1px solid rgba(78,224,210,.34);border-radius:50%;background:#102427;color:var(--jade);box-shadow:0 0 48px rgba(78,224,210,.12)}
.preview-audio-symbol>svg{width:42px;height:42px}
.preview-audio-symbol>i{position:absolute;inset:-10px;border:1px solid rgba(78,224,210,.18);border-radius:50%;animation:referenceAudioPulse 2.4s ease-out infinite}
.preview-audio-symbol>i:nth-of-type(2){inset:-22px;animation-delay:.6s}.preview-audio-symbol>i:nth-of-type(3){inset:-34px;animation-delay:1.2s}
.preview-audio-stage>div{min-width:0}.preview-audio-stage small{color:var(--jade);font:9px Consolas,monospace}.preview-audio-stage strong{display:block;overflow:hidden;margin-top:10px;color:#dce6e3;font-size:20px;text-overflow:ellipsis;white-space:nowrap}.preview-audio-stage p{margin:8px 0 0;color:#6b7975;font-size:11px}.preview-audio-stage audio{width:100%;grid-column:1/-1;margin-top:18px;accent-color:var(--jade)}
@keyframes referenceAudioPulse{0%{opacity:.7;transform:scale(.86)}75%,100%{opacity:0;transform:scale(1.1)}}
.preview-image-trigger{position:absolute;inset:clamp(10px,1.1vw,18px);min-width:0;min-height:0;display:block;overflow:hidden;padding:0;border:0;background:#030506;cursor:zoom-in}
.preview-image-trigger img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;object-position:center;filter:drop-shadow(0 18px 28px rgba(0,0,0,.28))}
.preview-image-trigger>span{position:absolute;right:16px;bottom:16px;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);background:rgba(5,9,11,.82);color:#dce9e6;opacity:0;transform:translateY(5px);transition:.24s var(--ease);backdrop-filter:blur(12px);pointer-events:none}
.preview-image-trigger>span svg{width:17px;height:17px}
.preview-image-trigger:hover>span,.preview-image-trigger:focus-visible>span{opacity:1;transform:none}
.preview-image-trigger:focus-visible{outline:1px solid rgba(78,224,210,.58);outline-offset:2px}
.preview-inspector{min-width:0;min-height:0;display:flex;flex-direction:column;padding:74px 26px 24px;border-left:1px solid var(--line);background:#0d1216;overflow:hidden}
.preview-caption{min-height:0;flex:1;overflow:hidden;padding-bottom:20px;border-bottom:1px solid var(--line)}
.preview-caption span{color:var(--jade);font:10px Consolas,monospace}
.preview-caption h3{max-height:min(48vh,430px);overflow:auto;margin:14px 0 0;padding-right:8px;font-size:13px;line-height:1.75;color:#e1e8e6;word-break:break-word;scrollbar-width:thin;scrollbar-color:#31413f transparent}
.preview-caption p{margin:14px 0 0;color:#65716f;font-size:10px}
.preview-cloud-note{flex:0 0 auto;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;margin-top:18px;padding:14px;border:1px solid var(--line);background:#11191d;color:var(--jade)}
.preview-cloud-note svg{width:24px;height:24px}.preview-cloud-note strong,.preview-cloud-note small{display:block}.preview-cloud-note strong{font-size:11px}.preview-cloud-note small{margin-top:5px;color:#687573;font-size:9px}
.preview-download{width:100%;height:46px;flex:0 0 auto;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.image-lightbox{position:fixed;inset:0;z-index:420;display:grid;grid-template-rows:64px minmax(0,1fr) 38px;background:#020304;color:#dce7e4;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s var(--ease),visibility .24s var(--ease)}
.image-lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto}
.image-lightbox-bar{position:relative;z-index:2;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 18px 0 24px;border-bottom:1px solid rgba(157,190,186,.16);background:rgba(6,9,11,.94);backdrop-filter:blur(16px)}
.image-lightbox-title{min-width:0;display:grid;gap:4px}
.image-lightbox-title small{color:var(--jade);font:8px Consolas,monospace}
.image-lightbox-title strong{max-width:min(52vw,760px);overflow:hidden;color:#cdd8d5;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.image-lightbox-controls{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.image-lightbox-controls .icon-button{width:38px;height:38px;text-decoration:none;background:#0d1316}
.image-lightbox-controls .icon-button:last-child{margin-left:6px;border-color:rgba(255,255,255,.2);color:#e8efed}
.image-lightbox-stage{position:relative;min-width:0;min-height:0;overflow:hidden;touch-action:none;user-select:none;cursor:zoom-in;background:#020304}
.image-lightbox-stage.can-pan{cursor:grab}
.image-lightbox-stage.is-dragging{cursor:grabbing}
.image-lightbox-stage img{position:absolute;max-width:none;max-height:none;opacity:0;transform-origin:center center;will-change:left,top,transform;transition:opacity .2s var(--ease);pointer-events:none}
.image-lightbox-stage img.is-ready{opacity:1}
.image-lightbox-status{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 24px;border-top:1px solid rgba(157,190,186,.12);background:#06090b;color:#667470;font:9px Consolas,monospace}
.image-lightbox-status strong{color:#a6b5b1;font:9px Consolas,monospace}
.image-lightbox-open{overflow:hidden}
.primary-button{border:1px solid rgba(78,224,210,.5);border-radius:var(--radius);background:#18302f;color:var(--jade);font-weight:700;cursor:pointer}.primary-button:hover{background:var(--jade);color:#07100f}.primary-button.full{width:100%;margin-top:18px}.primary-button:disabled{opacity:.35;cursor:not-allowed}
.recharge-modal-content{position:relative;width:min(520px,94vw);max-height:calc(100dvh - 52px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:32px;border:1px solid rgba(216,179,106,.28);background:#0d1216;box-shadow:0 38px 100px rgba(0,0,0,.7)}.recharge-modal-content>p{color:var(--gold);font:10px Consolas,monospace}.recharge-modal-content h2{margin:10px 0 24px;font-size:24px}.credit-display{padding:20px;border-left:3px solid var(--gold);background:#15150f}.credit-display span{color:#777368;font-size:11px}.credit-display strong{display:block;margin-top:6px;color:var(--gold);font-size:36px}.recharge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:18px}.recharge-grid button{height:54px;border:1px solid var(--line);background:#11181c;color:#a8b3b1;cursor:pointer}.recharge-grid button:hover{border-color:var(--gold);color:var(--gold)}
.delete-modal-content{position:relative;width:min(520px,94vw);max-height:calc(100dvh - 52px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:34px;border:1px solid rgba(233,102,108,.3);background:#0d1216;box-shadow:0 38px 100px rgba(0,0,0,.72)}
.delete-warning-mark{width:46px;height:46px;display:grid;place-items:center;margin-bottom:24px;border:1px solid rgba(233,102,108,.38);background:#241216;color:#ff858b}.delete-warning-mark svg{width:21px;height:21px}.delete-modal-content>p:not(.delete-explanation){margin:0;color:#c06f74;font:10px Consolas,monospace}.delete-modal-content h2{margin:10px 0 20px;font-size:25px}.delete-task-summary{padding:15px 16px;border-left:3px solid #c54d56;background:#151316}.delete-task-summary span,.delete-task-summary strong,.delete-task-summary small{display:block}.delete-task-summary span{color:#b16f73;font-size:10px}.delete-task-summary strong{margin-top:7px;overflow:hidden;color:#e4e9e7;font-size:13px;line-height:1.6;text-overflow:ellipsis;white-space:nowrap}.delete-task-summary small{margin-top:5px;color:#65716f;font-size:10px}.delete-explanation{margin:18px 0 0;color:#7e8a88;font-size:11px;line-height:1.75}.delete-modal-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:8px;margin-top:26px}.delete-modal-actions>button{height:44px}.danger-button{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,111,117,.5);border-radius:var(--radius);background:#321319;color:#ffc1c4;font-weight:700;cursor:pointer}.danger-button:hover{border-color:#ff777e;background:#521920;color:#fff}.danger-button:disabled{opacity:.55;cursor:wait}.button-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:orbitSpin .75s linear infinite}
.high-memory-retry{border-color:rgba(216,179,106,.42)!important;color:#e7c887!important;background:#19170f!important}.high-memory-retry:hover{border-color:var(--gold)!important;background:#282213!important;color:#ffe2a6!important}
.plus-retry-modal-content{position:relative;width:min(560px,94vw);max-height:calc(100dvh - 52px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:34px;border:1px solid rgba(216,179,106,.34);border-radius:8px;background:#0d1216;box-shadow:0 38px 100px rgba(0,0,0,.76)}
.plus-retry-mark{width:46px;height:46px;display:grid;place-items:center;margin-bottom:24px;border:1px solid rgba(216,179,106,.4);background:#201c11;color:var(--gold);box-shadow:0 0 28px rgba(216,179,106,.08)}
.plus-retry-mark svg{width:21px;height:21px}.plus-retry-modal-content>p:not(.plus-retry-explanation){margin:0;color:var(--gold);font:10px Consolas,monospace}.plus-retry-modal-content h2{margin:10px 0 20px;font-size:25px}
.plus-retry-summary{padding:16px;border-left:3px solid var(--gold);background:#15150f}.plus-retry-summary span,.plus-retry-summary strong,.plus-retry-summary small{display:block}.plus-retry-summary span{color:#a89772;font-size:10px}.plus-retry-summary strong{margin-top:7px;color:#e8e4d9;font-size:14px}.plus-retry-summary small{margin-top:8px;color:#827c6e;font-size:10px;line-height:1.65}
.plus-retry-explanation{margin:18px 0 0;color:#7e8a88;font-size:11px;line-height:1.75}.plus-retry-actions{display:grid;grid-template-columns:1fr 1.45fr;gap:8px;margin-top:26px}.plus-retry-actions>button{height:44px}.plus-confirm-button{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(216,179,106,.55);border-radius:var(--radius);background:#2b2413;color:#f5d99c;font-weight:700;cursor:pointer}.plus-confirm-button:hover{border-color:var(--gold);background:var(--gold);color:#111008}.plus-confirm-button:disabled{opacity:.55;cursor:wait}
.three-view-modal-content {
  position:relative; width:min(900px,94vw); height:min(760px,calc(100dvh - 52px)); min-height:min(570px,calc(100dvh - 52px)); max-height:calc(100dvh - 52px); display:grid; grid-template-columns:360px minmax(0,1fr); grid-template-rows:minmax(0,1fr);
  overflow:hidden; border:1px solid rgba(78,224,210,.3); border-radius:8px; background:#090d10;
  box-shadow:0 44px 120px rgba(0,0,0,.8),0 0 55px rgba(78,224,210,.05);
}
.three-view-source-panel { min-width:0; min-height:0; display:flex; flex-direction:column; padding:28px; overflow-y:auto; overscroll-behavior-y:auto; scrollbar-gutter:stable; border-right:1px solid var(--line); background:#070a0d; }
.three-view-source-head { min-height:28px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#71817e; font:9px Consolas,monospace; }
.three-view-source-head svg { width:17px; color:var(--jade); }
.three-view-source-frame { flex:1; min-height:380px; display:grid; place-items:center; margin-top:18px; overflow:hidden; border:1px solid #202b2f; background:#11171b; }
.three-view-source-frame img { width:100%; height:100%; max-height:420px; object-fit:contain; }
.three-view-source-meta { min-width:0; height:42px; display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:8px; margin-top:12px; color:#82908d; }
.three-view-source-meta svg { width:15px; color:var(--jade); }.three-view-source-meta strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:10px; }.three-view-source-meta span { color:#657370; font-size:9px; }
.three-view-setting-panel { min-width:0; min-height:0; display:flex; flex-direction:column; padding:48px 38px 32px; overflow-y:auto; overscroll-behavior-y:auto; scrollbar-gutter:stable; }
.three-view-setting-panel>p:not(.three-view-note) { margin:25px 0 0; color:var(--gold); font:9px Consolas,monospace; }
.three-view-setting-panel h2 { margin:10px 0 0; font-size:28px; letter-spacing:0; }
.three-view-flow { display:flex; align-items:center; gap:9px; margin-top:24px; color:#73817e; font-size:9px; }
.three-view-flow span { min-width:0; white-space:nowrap; }.three-view-flow b { margin-right:5px; color:var(--jade); font:9px Consolas,monospace; }.three-view-flow>svg { width:13px; flex:0 0 auto; color:#3f4d4a; }
.three-view-fixed-info { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:26px; }
.three-view-fixed-info>span { min-height:72px; display:grid; grid-template-columns:20px 1fr; grid-template-rows:auto auto; column-gap:8px; align-content:center; padding:10px 12px; border:1px solid var(--line); background:#10161a; }
.three-view-fixed-info svg { grid-row:1/3; width:18px; align-self:center; color:var(--gold); }.three-view-fixed-info small { color:#63706e; font-size:8px; }.three-view-fixed-info strong { margin-top:3px; color:#dce5e2; font-size:11px; }
.three-view-resolution-block { margin-top:26px; }.three-view-resolution-block>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; }.three-view-resolution-block>div:first-child strong { font-size:12px; }.three-view-resolution-block>div:first-child span { color:var(--jade); font:9px Consolas,monospace; }
.three-view-resolution-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:10px; }
.three-view-resolution-options button { min-height:62px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; padding:0 13px; border:1px solid var(--line); border-radius:var(--radius); background:#11171b; color:#a3afac; cursor:pointer; }
.three-view-resolution-options button strong { font-size:15px; }.three-view-resolution-options button small { color:#65716f; font-size:8px; }.three-view-resolution-options button:hover { border-color:rgba(78,224,210,.4); }.three-view-resolution-options button.is-active { border-color:var(--jade); background:#142629; color:#eafffc; box-shadow:inset 0 -2px 0 var(--jade); }.three-view-resolution-options button.is-active small { color:#8ccdc5; }
.three-view-note { display:flex; align-items:flex-start; gap:8px; margin:21px 0 0; color:#768481; font-size:10px; line-height:1.7; }.three-view-note svg { width:15px; height:15px; flex:0 0 auto; color:var(--jade); }
.three-view-actions { display:grid; grid-template-columns:1fr 1.65fr; gap:8px; margin-top:auto; padding-top:24px; }.three-view-actions>button { min-height:44px; }
.three-view-confirm { display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--jade); border-radius:var(--radius); background:var(--jade); color:#06110f; font-weight:800; cursor:pointer; }.three-view-confirm:hover { background:#8af2e8; box-shadow:0 0 28px rgba(78,224,210,.16); }.three-view-confirm:disabled { opacity:.55; cursor:wait; }
.delivery-overlay{position:fixed;inset:0;z-index:260;display:grid;place-items:center;background:#071013 url('/assets/dream-stream-gold-v1.png') center/cover no-repeat;opacity:0;visibility:hidden;pointer-events:none}.delivery-overlay::before{content:"";position:absolute;inset:0;z-index:0;background:rgba(3,8,10,.38);backdrop-filter:saturate(80%)}.delivery-overlay.is-active{opacity:1;visibility:visible}.delivery-gate{position:absolute;inset:0;z-index:1;display:flex;overflow:hidden}.delivery-gate span{width:50%;height:100%;background:rgba(10,35,38,.98);border-right:1px solid var(--gold);box-shadow:inset -34px 0 70px rgba(0,0,0,.28);transform:translateX(0)}.delivery-gate span:last-child{border-right:0;border-left:1px solid var(--gold);box-shadow:inset 34px 0 70px rgba(0,0,0,.28)}.delivery-overlay.is-active .delivery-gate span:first-child{animation:gateLeft 1.35s .35s var(--ease) forwards}.delivery-overlay.is-active .delivery-gate span:last-child{animation:gateRight 1.35s .35s var(--ease) forwards}.delivery-copy{position:relative;z-index:2;text-align:center;opacity:0;text-shadow:0 4px 30px #000}.delivery-overlay.is-active .delivery-copy{animation:deliveryCopy 1s 1.05s var(--ease) forwards}.delivery-copy b{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 16px;background:var(--cinnabar);border:1px solid var(--gold);box-shadow:0 0 60px rgba(216,179,106,.35);font:24px "STKaiti","KaiTi",serif}.delivery-copy h2{margin:0;font-size:34px}.delivery-copy p{color:#b8cbc7}
.toast-stack{position:fixed;right:20px;bottom:20px;z-index:300;display:grid;gap:8px}.toast{min-width:250px;max-width:420px;padding:13px 15px;border:1px solid var(--line-bright);background:#10191d;color:#cde0dc;box-shadow:0 18px 50px rgba(0,0,0,.45);animation:toastIn .3s var(--ease) both}.toast.error{border-color:rgba(255,111,117,.5);color:#ffc1c4}
.is-hidden { display: none !important; }

@keyframes scanMove{to{transform:translateX(8vw) rotate(18deg)}}
@keyframes livePulse{50%{opacity:.3;transform:scale(.75)}}
@keyframes sealPulse{50%{inset:-9px;opacity:.12}}
@keyframes viewEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sendPulse{from{opacity:.55;transform:scale(.85)}to{opacity:0;transform:scale(1.5)}}
@keyframes arrowFloat{50%{transform:translateY(4px)}}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes surfacePulse{from{background:#11171b}to{background:#182126}}
@keyframes progressSweep{to{transform:translateX(100%)}}
@keyframes skeletonSweep{to{transform:translateX(100%)}}
@keyframes composerSignal{from{transform:scaleX(.42);opacity:.28}to{transform:scaleX(1);opacity:.82}}
@keyframes sendHalo{50%{transform:scale(.82);opacity:.2}}
@keyframes popoverEnter{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes resultEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes messageEnter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes typing{50%{opacity:.25;transform:translateY(-3px)}}
@keyframes gateLeft{to{transform:translateX(-105%)}}
@keyframes gateRight{to{transform:translateX(105%)}}
@keyframes deliveryCopy{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes skillScan{from{left:-28%}to{left:116%}}

@media (max-width: 1420px) {
  .bjd-stage-list { grid-template-columns:1fr; }
  .bjd-character-stage-box { grid-template-columns:minmax(118px,150px) minmax(0,1fr); }
  .bjd-character-stage.is-single-stage .bjd-character-stage-box { grid-template-columns:minmax(190px,240px) minmax(0,1fr); }
}

@media (max-width: 1080px) {
  :root { --rail: 78px; }
  .dream-composer { width: calc(100% - 70px); }
  .engine-grid { grid-template-columns:1fr; }
  .dream-wall { grid-template-columns:repeat(2,1fr); }
  .asset-gallery { grid-template-columns:repeat(3,1fr); }
  .skill-grid { grid-template-columns:repeat(2,minmax(280px,360px)); }
  .skill-modal-content { grid-template-columns:minmax(360px,38vw) minmax(0,1fr); }
  .bjd-stage-list { grid-template-columns:1fr; }
  .workspace-layout,.chat-layout{grid-template-columns:240px 1fr}.task-sidebar,.chat-sidebar{padding:20px 12px}
}

@media (max-width: 760px) {
  :root { --rail: 0px; --signal: 32px; }
  .signal-bar{grid-template-columns:1fr 34px}.signal-live{display:none}.signal-message{padding-left:12px;justify-self:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 48px);font-size:10px}
  .rail{top:auto;left:0;right:0;bottom:0;width:100%;height:68px;flex-direction:row;border-right:0;border-top:1px solid var(--line);padding:0 8px}.brand-mark,.rail-bottom{display:none}.rail-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:0;width:100%}.rail-item{height:58px;gap:4px}.rail-item.is-active::before{left:25%;top:-6px;width:50%;height:2px}.rail-item span{font-size:10px}.stage{margin-left:0;padding-bottom:68px}
  .dream-hero{height:720px;min-height:720px}.hero-image{background-position:62% center}.hero-heading{top:8%;left:22px;right:22px}.hero-heading h1{font-size:58px}.hero-heading h2{font-size:17px;max-width:18em}.hero-coordinate{display:none}
  .dream-composer{bottom:8%;width:calc(100% - 28px);min-height:330px;grid-template-columns:1fr 50px;gap:10px;padding:13px}.reference-trigger{grid-column:1/-1;min-height:58px;flex-direction:row}.composer-main{grid-column:1/-1}.composer-main textarea{min-height:106px;font-size:15px}.composer-toolbar{flex-wrap:wrap}.composer-hint{display:none}.send-button{grid-column:2;grid-row:3}.preference-panel{left:0;bottom:-238px;width:100%}.ratio-grid{grid-template-columns:repeat(5,1fr)}.preference-row{grid-template-columns:1fr}.preference-row>label{display:none}.preference-selects{grid-template-columns:1fr 1fr}.hero-scroll{display:none}
  .engine-section,.inspiration-section{padding:34px 14px}.section-heading{align-items:flex-start}.section-heading>span{display:none}.engine-card{grid-template-columns:32px 36px 1fr auto;padding:13px}.dream-wall{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.dream-tile:first-child{grid-row:span 1;grid-column:span 2}.dream-tile-overlay{transform:none;padding:28px 10px 9px}
  .workspace-layout,.chat-layout{height:calc(100vh - var(--signal) - 68px);grid-template-columns:1fr}.task-sidebar,.chat-sidebar{display:none}.room-toolbar{min-height:70px;padding:12px 14px}.room-actions .tool-button{display:none}.generation-feed{padding:20px 12px 150px}.result-prompt{flex-direction:column;gap:7px}.result-media-grid{grid-template-columns:repeat(2,1fr)}.result-media{min-height:220px}.result-media.single{min-height:42vh}.dock-composer,.chat-composer{bottom:12px;width:calc(100% - 20px);grid-template-columns:40px 1fr 44px;padding:10px}.dock-bottom>span{display:none}.mode-switch.compact button{min-width:60px;padding:0 8px}
  .page-shell{padding:26px 14px}.page-head{align-items:flex-start;flex-direction:column}.page-head h2{font-size:25px}.asset-filter-row{align-items:flex-start;flex-direction:column;gap:10px}.asset-search{width:100%;margin-left:0}.asset-gallery{grid-template-columns:repeat(2,1fr);gap:6px}.asset-card-body strong{font-size:11px}.asset-card-actions{flex-direction:column}
  .skills-page{padding:26px 14px}.skills-header{min-height:0}.skills-header h2{font-size:28px}.skills-live{display:none}.skills-toolbar{height:auto;align-items:stretch;flex-direction:column;padding:18px 0}.skill-search{width:100%}.skill-grid{grid-template-columns:1fr}.skill-modal-content{width:100%;height:100vh;grid-template-columns:1fr}.skill-modal-visual{display:none}.skill-modal-panel{padding:48px 18px 20px;border-left:0}.bjd-workflow-switch{grid-template-columns:1fr 1fr}.skill-step-line{gap:5px}.skill-step-line span{font-size:8px}
  .message-stream{padding:20px 12px 130px}.chat-welcome-panel h3{font-size:21px}.starter-grid{grid-template-columns:1fr}.chat-message{grid-template-columns:30px 1fr}.chat-avatar{width:30px;height:30px}.chat-bubble{padding:12px}.chat-engine{display:none}
  .preview-modal-content{width:100%;height:88vh}.preview-caption{align-items:flex-start;flex-direction:column}.preview-caption .primary-button{width:100%}.modal-backdrop{padding:10px}
}

/* Account consent, privacy tools and public complaint entry. */
.legal-login-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.legal-login-consent input { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--jade); }
.legal-login-consent a,
.data-export-status a { color: var(--jade); text-decoration: underline; text-underline-offset: 3px; }
.legal-required-modal {
  width: min(540px, calc(100vw - 32px));
  padding: 30px;
  display: grid;
  gap: 16px;
  border: 1px solid rgba(78,224,210,.34);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
}
.legal-required-modal > p,
.legal-required-modal > h2 { margin: 0; }
.legal-required-modal > p { color: var(--jade); font: 10px/1.2 Consolas, monospace; letter-spacing: .12em; }
.legal-required-modal > span,
.legal-required-modal > small { color: var(--muted); line-height: 1.7; }
.legal-required-modal > button { min-height: 46px; border-color: rgba(78,224,210,.38); background: var(--jade); color: #061311; font-weight: 700; }
.account-privacy-panel { display: grid; gap: 14px; }
.account-privacy-panel[hidden] { display: none; }
.privacy-action-card { padding: 18px; display: grid; gap: 14px; border: 1px solid var(--line); background: var(--panel-soft); }
.privacy-action-card > div:first-child { display: grid; gap: 6px; }
.privacy-action-card > div:first-child strong { font-size: 16px; }
.privacy-action-card > div:first-child span,
.privacy-action-card > small { color: var(--muted); line-height: 1.7; }
.privacy-action-card > label { display: grid; gap: 7px; }
.privacy-action-card > label > span { color: var(--muted); font-size: 11px; }
.privacy-action-card input,
.public-report-modal input,
.public-report-modal textarea,
.public-report-modal select {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: 0;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}
.privacy-action-card input { height: 44px; }
.privacy-action-card input:focus,
.public-report-modal input:focus,
.public-report-modal textarea:focus,
.public-report-modal select:focus { border-color: var(--line-bright); }
.privacy-action-card > button,
.cancellation-code-row > button { min-height: 44px; border-color: rgba(78,224,210,.32); color: var(--jade); }
.privacy-action-card.is-danger { border-color: rgba(255,111,117,.3); background: rgba(255,111,117,.035); }
.privacy-action-card.is-danger > button { border-color: rgba(255,111,117,.42); color: var(--danger); }
.data-export-status,
.report-query-result { padding: 12px 14px; border-left: 3px solid var(--jade); background: var(--panel); color: var(--muted); line-height: 1.65; overflow-wrap: anywhere; }
.cancellation-code-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; }
.cancellation-code-row label { display: grid; gap: 7px; }
.cancellation-code-row label span { color: var(--muted); font-size: 11px; }

.public-site-footer {
  position: fixed;
  z-index: 19;
  left: 50%;
  bottom: 10px;
  width: max-content;
  max-width: calc(100vw - 36px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
  font-size: 10px;
}
.public-site-footer nav { display: flex; align-items: center; gap: 10px; }
.public-site-footer a,
.public-site-footer button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.public-site-footer a:hover,
.public-site-footer button:hover { color: var(--jade); }
.public-report-modal {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 30px;
  display: grid;
  gap: 15px;
  overflow-y: auto;
  border: 1px solid rgba(78,224,210,.3);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(0,0,0,.5);
}
.public-report-modal > p,
.public-report-modal > h2 { margin: 0; }
.public-report-modal > p { color: var(--jade); font: 10px/1.2 Consolas, monospace; letter-spacing: .12em; }
.public-report-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--line); }
.public-report-tabs:has(#report-admin-tab:not([hidden])) { grid-template-columns: repeat(3,minmax(0,1fr)); }
.public-report-tabs button { min-height: 42px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.public-report-tabs button.is-active { background: rgba(78,224,210,.09); color: var(--jade); }
.public-report-modal form { display: grid; gap: 13px; }
.public-report-modal form[hidden] { display: none; }
.report-admin-panel[hidden] { display: none; }
.report-admin-panel { display: grid; gap: 12px; }
.report-admin-list { display: grid; gap: 10px; }
.report-admin-item { padding: 13px; display: grid; gap: 9px; border: 1px solid var(--line); background: var(--panel-soft); }
.report-admin-item header { display: flex; justify-content: space-between; gap: 12px; }
.report-admin-item header span,
.report-admin-item small { color: var(--muted); }
.report-admin-item p { margin: 0; color: var(--text); line-height: 1.65; white-space: pre-wrap; }
.report-admin-item textarea,
.report-admin-item select { width: 100%; }
.report-admin-item > button { min-height: 40px; color: var(--jade); }
.public-report-modal form > label { display: grid; gap: 7px; }
.public-report-modal label > span { color: var(--muted); font-size: 11px; }
.public-report-modal textarea { min-height: 120px; resize: vertical; }
.report-captcha-row { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 10px; align-items: end; }
.report-captcha-row label { display: grid; gap: 7px; }
.report-captcha-row > button { height: 44px; padding: 3px 8px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; }
.report-captcha-row img { width: 100%; height: 36px; object-fit: contain; }
.report-primary-button { min-height: 46px; border-color: rgba(78,224,210,.38); background: var(--jade); color: #061311; font-weight: 700; }
.public-report-modal form > small { color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .public-site-footer { right: 8px; bottom: 72px; left: 8px; width: auto; max-width: none; transform: none; justify-content: center; flex-wrap: wrap; gap: 5px 12px; }
  .public-report-modal { width: 100%; max-height: 100dvh; min-height: 100dvh; padding: 24px 16px 92px; border-radius: 0; }
  .report-captcha-row,
  .cancellation-code-row { grid-template-columns: minmax(0,1fr); }
  .report-captcha-row > button,
  .cancellation-code-row > button { width: 100%; }
  .points-tabs { overflow-x: auto; }
  .points-tabs button { min-width: 96px; }
}

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

/* Day and night appearance */
.theme-toggle {
  position: relative;
  overflow: hidden;
  color: #f0c978;
  border-color: rgba(216,179,106,.3);
  background: #17170f;
}
.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .18;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.theme-toggle:hover::before { opacity: .4; transform: scale(1.18); }
.theme-toggle svg { position: relative; z-index: 1; width: 17px; height: 17px; transition: transform .35s var(--ease); }
.theme-toggle:active svg { transform: rotate(24deg) scale(.86); }

html[data-theme="day"] {
  color-scheme: light;
  --void: #f4f7f5;
  --void-soft: #edf2ef;
  --panel: rgba(255,255,255,.92);
  --panel-strong: #ffffff;
  --panel-soft: #edf3f0;
  --line: rgba(35,85,79,.15);
  --line-bright: rgba(14,143,134,.42);
  --text: #172522;
  --muted: #6b7975;
  --jade: #0e8f86;
  --jade-deep: #dcefeb;
  --gold: #9b6d1f;
  --gold-soft: #ead9b4;
  --cinnabar: #c8493e;
  --magenta: #9a4777;
  --success: #18845e;
  --danger: #c53e4d;
}
html[data-theme="day"],
html[data-theme="day"] body {
  background: #f4f7f5;
}
html[data-theme="day"] body {
  color: var(--text);
  background-image:
    linear-gradient(116deg, rgba(14,143,134,.035), transparent 30%, transparent 72%, rgba(200,73,62,.025)),
    linear-gradient(#f4f7f5, #f7f9f8);
}
html[data-theme="day"] ::selection { color: #fff; background: var(--jade); }
html[data-theme="day"] ::-webkit-scrollbar-track { background: #e8eeeb; }
html[data-theme="day"] ::-webkit-scrollbar-thumb { background: #aebdb8; border-color: #e8eeeb; }
html[data-theme="day"] ::-webkit-scrollbar-thumb:hover { background: #8da49e; }
html[data-theme="day"] #particle-canvas { opacity: .42; mix-blend-mode: multiply; }
html[data-theme="day"] .noise-layer { opacity: .045; mix-blend-mode: multiply; }
html[data-theme="day"] .light-scan { opacity: .12; box-shadow: 42vw 0 0 rgba(155,109,31,.28), 67vw 0 0 rgba(200,73,62,.13); }

html[data-theme="day"] .signal-bar {
  background: rgba(249,251,250,.94);
  border-bottom-color: rgba(14,143,134,.18);
  color: #5d6d68;
  box-shadow: 0 5px 22px rgba(31,69,64,.05);
}
html[data-theme="day"] .signal-message { color: #53635f; }
html[data-theme="day"] .rail {
  background: rgba(248,250,249,.95);
  box-shadow: 8px 0 32px rgba(35,73,68,.06);
}
html[data-theme="day"] .brand-mark { background: #ffffff; box-shadow: 0 10px 26px rgba(22,104,96,.1); }
html[data-theme="day"] .rail-item { color: #70807b; }
html[data-theme="day"] .rail-item:hover { color: #20302c; background: #edf3f0; }
html[data-theme="day"] .rail-item.is-active {
  color: var(--jade);
  border-color: rgba(14,143,134,.22);
  background: #e4f1ee;
}
html[data-theme="day"] .icon-button {
  background: rgba(255,255,255,.88);
  color: #62716d;
  box-shadow: 0 5px 16px rgba(32,69,64,.04);
}
html[data-theme="day"] .icon-button:hover { color: #172522; border-color: rgba(14,143,134,.34); }
html[data-theme="day"] .theme-toggle {
  color: #46556f;
  border-color: rgba(70,85,111,.22);
  background: #eef1f7;
}
html[data-theme="day"] .credit-button { background: #fffaf0; border-color: rgba(155,109,31,.22); }
html[data-theme="day"] .credit-button span { color: #82755c; }
html[data-theme="day"] .avatar-button { background: #f8edf4; color: #8b3f6c; }

html[data-theme="day"] .inspire-studio { background: #f4f7f5; }
html[data-theme="day"] .inspire-visual {
  opacity: .2;
  background-color: #e6efeb;
  filter: saturate(.58) contrast(.82) brightness(1.3);
}
html[data-theme="day"] .inspire-shade {
  background:
    linear-gradient(180deg, rgba(249,251,250,.25) 0, rgba(246,249,247,.82) 47%, #f4f7f5 74%),
    linear-gradient(90deg, rgba(245,249,247,.78), transparent 38%, rgba(245,249,247,.72));
}
html[data-theme="day"] .inspire-studio::before {
  opacity: .5;
  background-image:
    linear-gradient(rgba(14,143,134,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,109,31,.04) 1px, transparent 1px);
}
html[data-theme="day"] .inspire-status { color: rgba(48,76,71,.58); }
html[data-theme="day"] .inspire-status span { color: rgba(14,113,105,.78); }
html[data-theme="day"] .inspire-heading > p { color: #677873; }
html[data-theme="day"] .inspire-heading h1 { color: #152521; }
html[data-theme="day"] .inspire-mode-title:hover,
html[data-theme="day"] .inspire-mode-title.is-open { color: #08746d; border-color: #08746d; text-shadow: none; }
html[data-theme="day"] .inspire-studio .dream-composer {
  border-color: rgba(39,86,80,.2);
  background: rgba(255,255,255,.93);
  box-shadow: 0 28px 70px rgba(38,75,69,.13), 0 0 0 1px rgba(255,255,255,.72) inset;
}
html[data-theme="day"] .inspire-studio .dream-composer:focus-within {
  border-color: rgba(14,143,134,.48);
  box-shadow: 0 32px 82px rgba(38,75,69,.16), 0 0 0 3px rgba(14,143,134,.04);
}
html[data-theme="day"] .inspire-studio .reference-trigger,
html[data-theme="day"] .home-reference-deck .reference-thumb { background: #f2f5f4; box-shadow: 0 12px 28px rgba(36,68,63,.15); }
html[data-theme="day"] .inspire-studio .composer-main textarea,
html[data-theme="day"] .dock-main textarea,
html[data-theme="day"] .chat-composer textarea { color: #172522; }
html[data-theme="day"] .inspire-studio .composer-main textarea::placeholder,
html[data-theme="day"] .dock-main textarea::placeholder,
html[data-theme="day"] .chat-composer textarea::placeholder { color: #82908c; }
html[data-theme="day"] .composer-icon-tool,
html[data-theme="day"] .composer-chip,
html[data-theme="day"] .duration-control output {
  background: #f3f6f4;
  color: #5f6e69;
}
html[data-theme="day"] .composer-icon-tool:hover,
html[data-theme="day"] .composer-icon-tool.is-active,
html[data-theme="day"] .composer-icon-tool.is-open,
html[data-theme="day"] .composer-chip:hover,
html[data-theme="day"] .composer-chip.is-open,
html[data-theme="day"] .composer-chip.is-accent { background: #e4f1ee; color: var(--jade); }
html[data-theme="day"] .home-reference-mentions button { background: #e7f3f0; }
html[data-theme="day"] .home-popover,
html[data-theme="day"] .dock-popover {
  border-color: rgba(42,83,77,.18);
  background: rgba(255,255,255,.985);
  box-shadow: 0 28px 72px rgba(35,71,66,.18);
}
html[data-theme="day"] .popover-option { color: #5f6f6a; }
html[data-theme="day"] .popover-option:hover { background: #edf3f1; color: #192824; }
html[data-theme="day"] .popover-option.is-active { background: #e2f0ed; color: var(--jade); }
html[data-theme="day"] .inspire-studio .ratio-grid button,
html[data-theme="day"] .dock-ratio-grid button,
html[data-theme="day"] .quality-choice-grid button,
html[data-theme="day"] .segmented-setting button { background: #f5f7f6; color: #63726e; }
html[data-theme="day"] .inspire-studio .ratio-grid button:hover,
html[data-theme="day"] .inspire-studio .ratio-grid button.is-active,
html[data-theme="day"] .dock-ratio-grid button:hover,
html[data-theme="day"] .dock-ratio-grid button.is-active,
html[data-theme="day"] .quality-choice-grid button:hover,
html[data-theme="day"] .quality-choice-grid button.is-active,
html[data-theme="day"] .segmented-setting button:hover,
html[data-theme="day"] .segmented-setting button.is-active { background: #e3f1ee; color: var(--jade); }
html[data-theme="day"] .quality-explain { background: #fff9eb; }
html[data-theme="day"] .reference-option { color: #52625d; }
html[data-theme="day"] .reference-option:hover { background: #eaf2ef; color: #172522; }
html[data-theme="day"] .reference-popover-empty strong,
html[data-theme="day"] .dream-wall-empty strong { color: #33433f; }
html[data-theme="day"] .engine-mini {
  border-color: rgba(43,82,76,.14);
  background: rgba(255,255,255,.84);
  color: #283834;
  box-shadow: 0 10px 26px rgba(35,72,66,.05);
}
html[data-theme="day"] .engine-mini:hover { background: #fff; border-color: rgba(14,143,134,.28); }
html[data-theme="day"] .engine-icon { background: #e2f1ee; }
html[data-theme="day"] .engine-icon.video { background: #fff5df; }
html[data-theme="day"] .engine-icon.chat { background: #f8eaf3; }
html[data-theme="day"] .engine-icon.reference { background: #faebe8; }
html[data-theme="day"] .dream-tabs button { color: #65746f; }
html[data-theme="day"] .dream-tabs button:hover,
html[data-theme="day"] .dream-tabs button.is-active { color: #172522; }
html[data-theme="day"] .dream-search,
html[data-theme="day"] .asset-search,
html[data-theme="day"] .skill-search { background: rgba(255,255,255,.88); color: #667570; }
html[data-theme="day"] .dream-search input,
html[data-theme="day"] .asset-search input,
html[data-theme="day"] .skill-search input { color: #1d2d29; }

html[data-theme="day"] .task-sidebar,
html[data-theme="day"] .chat-sidebar { background: #eff3f1; }
html[data-theme="day"] .task-sidebar { background: #f1f4f2; }
html[data-theme="day"] .workspace-brand b { color: #172522; }
html[data-theme="day"] .new-task-button { background: #e2f0ed; color: #125f59; }
html[data-theme="day"] .new-task-button:hover { background: #d5ebe7; }
html[data-theme="day"] .task-list-item,
html[data-theme="day"] .conversation-item { color: #5a6965; }
html[data-theme="day"] .task-list-item:hover,
html[data-theme="day"] .conversation-item:hover { background: #e5ebe8; }
html[data-theme="day"] .task-list-item.is-active,
html[data-theme="day"] .conversation-item.is-active { background: #fff; color: #172522; box-shadow: inset 2px 0 0 var(--jade), 0 8px 22px rgba(33,69,64,.06); }
html[data-theme="day"] .task-thumb,
html[data-theme="day"] .chat-avatar { background: #e6edeb; }
html[data-theme="day"] .creation-room,
html[data-theme="day"] .chat-room { background: #f7f9f8; }
html[data-theme="day"] .creation-room::before {
  opacity: .55;
  background-image:
    linear-gradient(rgba(14,143,134,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(155,109,31,.035) 1px,transparent 1px);
}
html[data-theme="day"] .room-toolbar { background: rgba(252,253,252,.88); }
html[data-theme="day"] .creation-toolbar { background: linear-gradient(to bottom,rgba(249,251,250,.98),rgba(249,251,250,.78),transparent); }
html[data-theme="day"] .creation-toolbar h2,
html[data-theme="day"] .result-prompt p,
html[data-theme="day"] .feed-empty h3 { color: #21312d; }
html[data-theme="day"] .creation-toolbar .room-actions .icon-button { background: rgba(255,255,255,.9); }
html[data-theme="day"] .status-track,
html[data-theme="day"] .bjd-task-track,
html[data-theme="day"] .bjd-character-mini-progress { background: #d9e3df; }
html[data-theme="day"] .result-media-grid { background: #e3e8e6; }
html[data-theme="day"] .result-media-grid.is-single { background: transparent; }
html[data-theme="day"] .result-media { border-color: #cfd9d5; background: #e9eeec; }
html[data-theme="day"] .result-media img,
html[data-theme="day"] .result-media video,
html[data-theme="day"] .loading-surface { background: #e8edeb; }
html[data-theme="day"] .result-hover-actions button,
html[data-theme="day"] .result-hover-actions a { background: rgba(255,255,255,.9); color: #24332f; }
html[data-theme="day"] .jump-to-composer { background: rgba(255,255,255,.94); }
html[data-theme="day"] .dock-composer,
html[data-theme="day"] .dock-composer.is-compact {
  border-color: rgba(45,88,82,.2);
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 60px rgba(31,67,62,.16), 0 0 0 1px rgba(255,255,255,.7) inset;
}
html[data-theme="day"] .dock-composer:focus-within { box-shadow: 0 28px 72px rgba(31,67,62,.18), 0 0 0 3px rgba(14,143,134,.04); }
html[data-theme="day"] .dock-upload { background: #f0f4f2; }
html[data-theme="day"] .dock-upload:hover { background: #e3f0ed; }

html[data-theme="day"] .page-shell,
html[data-theme="day"] .skills-page,
html[data-theme="day"] .settings-page { background: rgba(247,249,248,.94); }
html[data-theme="day"] .skills-page::before,
html[data-theme="day"] .settings-page::before {
  background: linear-gradient(115deg, rgba(14,143,134,.045), transparent 32%, transparent 70%, rgba(155,109,31,.035));
}
html[data-theme="day"] .asset-tabs button,
html[data-theme="day"] .filter-group button,
html[data-theme="day"] .skill-tabs button { color: #64736f; }
html[data-theme="day"] .asset-tabs button.is-active { color: #172522; }
html[data-theme="day"] .filter-group button:hover,
html[data-theme="day"] .filter-group button.is-active,
html[data-theme="day"] .skill-tabs button:hover,
html[data-theme="day"] .skill-tabs button.is-active { background: #e5eeeb; color: var(--jade); }
html[data-theme="day"] .asset-card,
html[data-theme="day"] .skill-card {
  background: #fff;
  box-shadow: 0 13px 34px rgba(36,72,67,.07);
}
html[data-theme="day"] .asset-card-media,
html[data-theme="day"] .skill-card-media { background: #e8edeb; }
html[data-theme="day"] .asset-empty b,
html[data-theme="day"] .skill-empty strong,
html[data-theme="day"] .skills-live strong { color: #273733; }
html[data-theme="day"] .asset-empty-action { border-color: #bcd9d3; background: #e8f3f0; color: #0f756e; }
html[data-theme="day"] .asset-empty-action:hover { border-color: #148f86; background: #dcece8; }
html[data-theme="day"] .skill-admin-button { background: #fff8e8; }
html[data-theme="day"] .skill-card:hover,
html[data-theme="day"] .skill-card:focus-visible { box-shadow: 0 22px 54px rgba(31,74,68,.14); }
html[data-theme="day"] .skill-card-body > p { color: #697873; }
html[data-theme="day"] .skill-card-title > svg,
html[data-theme="day"] .skill-card-foot > span { color: #65746f; }
html[data-theme="day"] .skill-card-foot button { background: #e5f1ee; }

html[data-theme="day"] .skill-modal-content { border-color: rgba(43,83,77,.2); background: #f8faf9; box-shadow: 0 36px 100px rgba(30,60,56,.25); }
html[data-theme="day"] .skill-modal-panel { background: #f8faf9; }
html[data-theme="day"] .skill-visual-copy > strong { color: #f4f8f7; text-shadow: 0 6px 24px #000; }
html[data-theme="day"] .skill-visual-copy > div { color: #b9cac6; }
html[data-theme="day"] .skill-panel-badge { background: #e3f1ee; }
html[data-theme="day"] .skill-modal-panel header p { color: #677671; }
html[data-theme="day"] .bjd-workflow-switch,
html[data-theme="day"] .bjd-stage-card,
html[data-theme="day"] .bjd-character-card,
html[data-theme="day"] .bjd-direct-convert,
html[data-theme="day"] .bjd-source-card,
html[data-theme="day"] .bjd-inline-task { background: #fff; }
html[data-theme="day"] .bjd-workflow-switch button { color: #687772; }
html[data-theme="day"] .bjd-workflow-switch button:hover { background: #edf3f1; color: #263632; }
html[data-theme="day"] .bjd-workflow-switch button.is-active { background: #e1f0ed; color: #172522; }
html[data-theme="day"] .skill-step-line span.is-active,
html[data-theme="day"] .bjd-stage-card > header strong,
html[data-theme="day"] .bjd-character-card > header strong,
html[data-theme="day"] .bjd-stage-results > header strong,
html[data-theme="day"] .bjd-character-results > header strong,
html[data-theme="day"] .bjd-three-view-lead > strong,
html[data-theme="day"] .bjd-task-copy strong { color: #283833; }
html[data-theme="day"] .skill-step-line > i { background: #cdd9d5; }

html[data-theme="day"] .bjd-script-editor { background: #fff; }
html[data-theme="day"] .bjd-script-editor-head { color: #40504b; }
html[data-theme="day"] .bjd-script-editor-head label,
html[data-theme="day"] .bjd-script-editor-head button { background: #edf3f1; color: #596964; }
html[data-theme="day"] .bjd-script-editor textarea { color: #24342f; }
html[data-theme="day"] .bjd-script-editor textarea::placeholder { color: #899691; }
html[data-theme="day"] .skill-upload-stage,
html[data-theme="day"] .bjd-character-stage-box,
html[data-theme="day"] .bjd-three-view-fixed > span,
html[data-theme="day"] .bjd-skill-resolution button { background: #f2f5f4; }
html[data-theme="day"] .skill-upload-stage:hover,
html[data-theme="day"] .skill-upload-stage.is-dragover { background: #e8f2ef; }
html[data-theme="day"] .skill-upload-empty strong,
html[data-theme="day"] .bjd-source-empty strong,
html[data-theme="day"] .bjd-three-view-fixed strong,
html[data-theme="day"] .bjd-character-stage-copy strong { color: #33433f; }
html[data-theme="day"] .skill-upload-stage img,
html[data-theme="day"] .bjd-character-stage-preview,
html[data-theme="day"] .bjd-character-stage-icon,
html[data-theme="day"] .bjd-source-preview { background: #e9eeec; }
html[data-theme="day"] .skill-generate-button:disabled { background: #e2e7e5; color: #929d99; }
html[data-theme="day"] .bjd-stage-ready { background: #f2f7f5; }
html[data-theme="day"] .bjd-stage-ready strong { color: #40504b; }
html[data-theme="day"] .bjd-character-card:hover { background: #f7faf9; }
html[data-theme="day"] .bjd-character-identity strong,
html[data-theme="day"] .bjd-character-chat > header strong { color: #263632; }
html[data-theme="day"] .bjd-character-card-actions > button,
html[data-theme="day"] .bjd-character-chat > footer > button { background: #e3f1ee; color: #207d74; }
html[data-theme="day"] .bjd-character-chat { background: #fff; box-shadow: 0 18px 44px rgba(35, 54, 48, .09); }
html[data-theme="day"] .bjd-character-chat > header { background: linear-gradient(90deg, rgba(45, 191, 178, .09), transparent 54%); }
html[data-theme="day"] .bjd-character-chat > header button { background: #eef3f1; color: #596964; }
html[data-theme="day"] .bjd-character-current-prompt { background: #f7faf9; }
html[data-theme="day"] .bjd-character-prompt-head > span strong { color: #2c3c37; }
html[data-theme="day"] .bjd-character-prompt-head button { background: #eef3f1; color: #596964; }
html[data-theme="day"] .bjd-character-prompt-content { color: #4e5e59; }
html[data-theme="day"] .bjd-character-prompt-content.is-collapsible:not(.is-expanded)::after { background: linear-gradient(transparent, #f7faf9); }
html[data-theme="day"] .bjd-character-chat-messages article > p { background: #f1f5f3; color: #40504b; }
html[data-theme="day"] .bjd-character-chat-messages article.is-user > p { background: #e3f1ee; color: #23413b; }
html[data-theme="day"] .bjd-character-chat-compose { background: #f7faf9; }
html[data-theme="day"] .bjd-character-chat-compose textarea { background: #fff; color: #24342f; }
html[data-theme="day"] .bjd-character-chat-compose textarea::placeholder { color: #899691; }
html[data-theme="day"] .bjd-character-card > header button,
html[data-theme="day"] .bjd-character-results > header button,
html[data-theme="day"] .bjd-task-actions button,
html[data-theme="day"] .bjd-task-actions a { background: #eef3f1; color: #596964; }
html[data-theme="day"] .bjd-character-stage-copy button { background: #e3f1ee; }
html[data-theme="day"] .bjd-character-stage-copy button:disabled { background: #e5e9e7; }
html[data-theme="day"] .bjd-direct-convert summary strong,
html[data-theme="day"] .bjd-source-card strong { color: #374742; }
html[data-theme="day"] .bjd-source-select { background: #fff; }
html[data-theme="day"] .bjd-source-select:hover,
html[data-theme="day"] .bjd-source-select.is-active,
html[data-theme="day"] .bjd-skill-resolution button.is-active { background: #e3f1ee; color: #17302c; }

html[data-theme="day"] .settings-header > div > span,
html[data-theme="day"] .llm-settings-title p { color: #64736f; }
html[data-theme="day"] .llm-status-badge,
html[data-theme="day"] .llm-provider-options button,
html[data-theme="day"] .zaomeng-model-options button,
html[data-theme="day"] .settings-index > button { background: #fff; }
html[data-theme="day"] .llm-status-badge strong,
html[data-theme="day"] .settings-index > button strong,
html[data-theme="day"] .llm-provider-options button strong,
html[data-theme="day"] .zaomeng-model-options button strong { color: #283833; }
html[data-theme="day"] .llm-provider-options button:hover,
html[data-theme="day"] .zaomeng-model-options button:hover { background: #edf3f1; }
html[data-theme="day"] .llm-provider-options button.is-active,
html[data-theme="day"] .zaomeng-model-options button.is-active { background: #e2f0ed; box-shadow: inset 0 -2px 0 rgba(14,143,134,.55), 0 12px 28px rgba(31,67,62,.08); }
html[data-theme="day"] .llm-provider-options button.is-active strong,
html[data-theme="day"] .zaomeng-model-options button.is-active strong { color: #172522; }
html[data-theme="day"] .llm-field input,
html[data-theme="day"] .llm-secret-input button { background: #fff; color: #1c2c28; }
html[data-theme="day"] .llm-secret-input button:hover { background: #e9f2ef; }
html[data-theme="day"] .llm-call-rule strong { color: #42524d; }

html[data-theme="day"] .chat-toolbar .chat-engine,
html[data-theme="day"] .starter-grid button { background: #fff; color: #5c6c67; }
html[data-theme="day"] .starter-grid button:hover { background: #e8f1ee; color: #172522; }
html[data-theme="day"] .chat-welcome-panel h3 { color: #172522; }
html[data-theme="day"] .chat-message .chat-bubble { background: #fff; color: #33433e; box-shadow: 0 8px 24px rgba(34,69,64,.05); }
html[data-theme="day"] .chat-message.user .chat-avatar { background: #f8e9e6; }
html[data-theme="day"] .chat-message.user .chat-bubble { background: #fff7f5; }
html[data-theme="day"] .chat-bubble pre { background: #edf2f0; color: #263632; }
html[data-theme="day"] .chat-copy { background: rgba(246,249,247,.9); }
html[data-theme="day"] .chat-connection-notice { background: #fff7e8; }
html[data-theme="day"] .chat-connection-notice strong { color: #6c4b15; }
html[data-theme="day"] .chat-composer { background: rgba(255,255,255,.96); box-shadow: 0 22px 58px rgba(31,67,62,.14); }

html[data-theme="day"] .modal-backdrop { background: rgba(224,231,228,.78); }
html[data-theme="day"] .preview-modal-content,
html[data-theme="day"] .recharge-modal-content,
html[data-theme="day"] .delete-modal-content,
html[data-theme="day"] .plus-retry-modal-content,
html[data-theme="day"] .skill-admin-modal,
html[data-theme="day"] .three-view-modal-content { background: #f8faf9; box-shadow: 0 36px 100px rgba(28,58,54,.28); }
html[data-theme="day"] .preview-media,
html[data-theme="day"] .preview-image-trigger { background: #e2e7e5; }
html[data-theme="day"] .preview-inspector { background: #f8faf9; }
html[data-theme="day"] .preview-caption h3 { color: #263632; scrollbar-color: #a5b7b1 transparent; }
html[data-theme="day"] .preview-cloud-note { background: #e9f2ef; }
html[data-theme="day"] .image-lightbox { background: #dce2df; color: #24342f; }
html[data-theme="day"] .image-lightbox-bar,
html[data-theme="day"] .image-lightbox-status { background: rgba(250,252,251,.96); }
html[data-theme="day"] .image-lightbox-title strong,
html[data-theme="day"] .image-lightbox-status strong { color: #34443f; }
html[data-theme="day"] .image-lightbox-controls .icon-button { background: #eef2f0; }
html[data-theme="day"] .image-lightbox-controls .icon-button:last-child { border-color: rgba(42,73,68,.2); color: #263632; }
html[data-theme="day"] .image-lightbox-stage { background: #dce2df; }
html[data-theme="day"] .credit-display,
html[data-theme="day"] .plus-retry-summary { background: #fff8e8; }
html[data-theme="day"] .recharge-grid button { background: #fff; color: #55645f; }
html[data-theme="day"] .delete-task-summary { background: #fff1f1; }
html[data-theme="day"] .delete-task-summary strong,
html[data-theme="day"] .plus-retry-summary strong { color: #34433f; }
html[data-theme="day"] .three-view-source-panel { background: #eef3f1; }
html[data-theme="day"] .three-view-source-frame { background: #e1e7e4; border-color: #cad5d1; }
html[data-theme="day"] .three-view-fixed-info > span,
html[data-theme="day"] .three-view-resolution-options button { background: #f0f4f2; }
html[data-theme="day"] .three-view-fixed-info strong { color: #34443f; }
html[data-theme="day"] .three-view-resolution-options button.is-active { background: #dff0ec; color: #17302c; }
html[data-theme="day"] .delivery-overlay::before { background: rgba(243,248,246,.32); }
html[data-theme="day"] .delivery-gate span { background: rgba(225,240,236,.98); box-shadow: inset -34px 0 70px rgba(41,78,72,.08); }
html[data-theme="day"] .delivery-gate span:last-child { box-shadow: inset 34px 0 70px rgba(41,78,72,.08); }
html[data-theme="day"] .delivery-copy { color: #fff; }
html[data-theme="day"] .toast { background: #fff; color: #263632; box-shadow: 0 18px 46px rgba(32,67,62,.16); }

@media (prefers-reduced-motion: no-preference) {
  html[data-theme] body,
  html[data-theme] .signal-bar,
  html[data-theme] .rail,
  html[data-theme] .view,
  html[data-theme] .inspire-studio,
  html[data-theme] .dream-composer,
  html[data-theme] .creation-room,
  html[data-theme] .chat-room,
  html[data-theme] .page-shell,
  html[data-theme] .skills-page,
  html[data-theme] .settings-page,
  html[data-theme] .modal-backdrop,
  html[data-theme] .image-lightbox { transition: background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease); }
}

/* Story-to-video skill workspace */
.story-skill-card .skill-card-media img { object-position: 58% 56%; }
.story-skill-path {
  position: absolute;
  z-index: 3;
  left: 14px;
  right: 14px;
  bottom: 13px;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 8px;
  color: #d9e6e3;
  font: 9px Consolas, monospace;
}
.story-skill-path i { height: 1px; background: rgba(224, 242, 238, .38); }
.story-studio-backdrop {
  z-index: 280;
  padding: 18px;
  background: rgba(2, 5, 7, .94);
  backdrop-filter: blur(22px);
}
.story-studio-shell {
  position: relative;
  width: min(1880px, 100%);
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: 68px 82px 3px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(125, 177, 171, .22);
  border-radius: 6px;
  background: #080d11;
  box-shadow: 0 38px 120px rgba(0, 0, 0, .62);
}
.story-studio-header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: #0b1115;
}
.story-studio-brand { min-width: 0; display: flex; align-items: center; gap: 12px; }
.story-studio-mark { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(78, 224, 210, .3); background: #102023; color: var(--jade); }
.story-studio-mark svg { width: 18px; }
.story-studio-brand p { margin: 0 0 3px; color: var(--jade); font: 8px Consolas, monospace; }
.story-studio-brand h2 { margin: 0; font-size: 18px; }
.story-studio-head-status { display: flex; align-items: center; gap: 18px; color: #71807d; font-size: 9px; }
.story-studio-head-status > span { display: flex; align-items: center; gap: 7px; }
.story-studio-head-status i { width: 5px; height: 5px; background: var(--success); box-shadow: 0 0 11px rgba(78, 211, 157, .65); }
.story-studio-head-status strong { color: #95a4a0; font-weight: 500; }
.story-studio-head-status em { padding-left: 18px; border-left: 1px solid var(--line); color: var(--gold); font: 9px Consolas, monospace; font-style: normal; }
.story-studio-head-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.story-head-button { height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 4px; background: #10171b; color: #7e8d89; font-size: 10px; cursor: pointer; }
.story-head-button:hover { border-color: rgba(216, 179, 106, .38); color: var(--gold); }
.story-head-button svg { width: 14px; }

.story-history-layer { position: absolute; inset: 0; z-index: 25; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 31vw); }
.story-history-layer[hidden] { display: none !important; }
.story-history-scrim { width: 100%; height: 100%; border: 0; background: rgba(2, 5, 7, .7); backdrop-filter: blur(5px); cursor: default; }
.story-history-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: 68px auto minmax(0, 1fr) 42px; overflow: hidden; border-left: 1px solid rgba(78, 224, 210, .2); background: #0a1014; box-shadow: -28px 0 75px rgba(0, 0, 0, .38); animation: storyHistoryIn .24s var(--ease) both; }
.story-history-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--line); background: #0d1418; }
.story-history-panel > header > span { min-width: 0; display: flex; align-items: center; gap: 11px; }
.story-history-panel > header > span > svg { width: 18px; color: var(--jade); }
.story-history-panel > header > span > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.story-history-panel > header small { color: var(--jade); font: 7px Consolas, monospace; }
.story-history-panel > header strong { color: #e4eeeb; font-size: 14px; }
.story-history-lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #090f13; }
.story-history-lead p { margin: 0; color: #6d7a77; font-size: 9px; line-height: 1.6; }
.story-history-lead button { height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(78, 224, 210, .38); border-radius: 4px; background: #102326; color: var(--jade); font-size: 9px; cursor: pointer; }
.story-history-lead button:hover { border-color: var(--jade); color: #edfffc; }
.story-history-lead button svg { width: 14px; }
.story-history-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 9px; }
.story-history-empty { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; color: #5e6b68; text-align: center; }
.story-history-empty svg { width: 25px; height: 25px; margin-bottom: 12px; color: #71807c; }
.story-history-empty strong { color: #a3b0ac; font-size: 10px; }
.story-history-empty span { margin-top: 6px; font-size: 8px; }
.story-history-item { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 6px; margin-bottom: 7px; border: 1px solid var(--line); background: #0d1519; }
.story-history-item.is-active { border-color: rgba(78, 224, 210, .42); box-shadow: inset 2px 0 0 var(--jade); }
.story-history-open { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px 10px 11px 13px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.story-history-open:hover { background: rgba(78, 224, 210, .035); }
.story-history-index { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(216, 179, 106, .24); color: var(--gold); font: 8px Consolas, monospace; }
.story-history-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.story-history-copy > span { min-width: 0; display: flex; align-items: center; gap: 7px; }
.story-history-copy strong { min-width: 0; overflow: hidden; color: #cbd7d3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.story-history-copy em { flex: 0 0 auto; padding: 2px 5px; border: 1px solid rgba(78, 224, 210, .2); color: var(--jade); font-size: 7px; font-style: normal; }
.story-history-copy p { display: -webkit-box; overflow: hidden; min-height: 26px; margin: 0; color: #64716e; font-size: 8px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.story-history-copy small { color: #576460; font-size: 7px; }
.story-history-delete { align-self: start; width: 30px; height: 30px; display: grid; place-items: center; margin-top: 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #596663; cursor: pointer; }
.story-history-delete:hover { border-color: rgba(255, 111, 117, .28); background: rgba(255, 111, 117, .06); color: #ff9197; }
.story-history-delete svg { width: 14px; }
.story-history-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding:0 12px; border-top: 1px solid var(--line); color: #5f6c69; font-size: 8px; }
.story-history-panel > footer > span { display:flex; align-items:center; gap:6px; }
.story-history-panel > footer svg { width: 13px; color: var(--success); }
.story-history-load-more { min-height:28px; display:inline-flex; align-items:center; gap:6px; padding:0 9px; border:1px solid var(--line); border-radius:4px; background:#10191d; color:#899692; font-size:8px; cursor:pointer; }
.story-history-load-more:hover,.story-history-load-more:focus-visible { border-color:rgba(78,224,210,.42); color:var(--jade); }
.story-history-load-more:disabled { opacity:.55; cursor:wait; }

.story-stepper {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: #090e12;
}
.story-stepper button {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid rgba(170, 211, 207, .08);
  background: transparent;
  color: #5d6967;
  text-align: left;
  cursor: pointer;
}
.story-stepper button:last-child { border-right: 0; }
.story-stepper button::after { content: ""; position: absolute; inset: auto 12px -1px; height: 2px; background: transparent; }
.story-stepper button:hover { background: #0e171a; color: #a5b2af; }
.story-stepper button.is-active { background: #102024; color: #edf6f3; }
.story-stepper button.is-active::after { background: var(--jade); box-shadow: 0 0 14px rgba(78, 224, 210, .48); }
.story-stepper button.is-passed b { color: var(--success); }
.story-stepper b { color: #63706e; font: 9px Consolas, monospace; font-weight: 400; }
.story-stepper button.is-active b { color: var(--jade); }
.story-stepper span { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 10px; font-weight: 700; }
.story-stepper small { overflow: hidden; color: #566260; font-size: 8px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.story-progress-track { overflow: hidden; background: #10171a; }
.story-progress-track span { display: block; width: 16.666%; height: 100%; background: var(--jade); box-shadow: 0 0 18px rgba(78, 224, 210, .55); transition: width .45s var(--ease); }

.story-studio-main { min-width: 0; min-height: 0; overflow: hidden; }
.story-stage {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 18px;
  padding: 24px clamp(24px, 2.8vw, 52px) 20px;
  background: #0a0f13;
}
.story-stage[hidden] { display: none !important; }
.story-stage.is-active { animation: storyStageIn .36s var(--ease) both; }
.story-stage-head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.story-stage-head > div:first-child > span { color: var(--gold); font: 8px Consolas, monospace; }
.story-stage-head h3 { margin: 8px 0 0; font-size: 23px; line-height: 1.25; }
.story-stage-head p { margin: 7px 0 0; color: #74817e; font-size: 10px; }
.story-stage-state { flex: 0 0 auto; min-height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); background: #0e1519; color: #687572; font-size: 9px; }
.story-stage-state i { width: 5px; height: 5px; background: var(--gold); box-shadow: 0 0 10px rgba(216, 179, 106, .45); }
.story-stage-state.is-ready i { background: var(--success); box-shadow: 0 0 10px rgba(78, 211, 157, .55); }

.story-source-workspace { min-height: 300px; flex: 1; display: grid; grid-template-columns: minmax(240px, 29%) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); background: #0b1115; }
.story-source-guide { min-width: 0; min-height:0; display: grid; grid-template-rows: minmax(110px, 1fr) auto auto; overflow-y:auto; overscroll-behavior-y:auto; scrollbar-gutter:stable; border-right: 1px solid var(--line); background: #080d10; }
.story-source-guide-image { min-height: 0; overflow: hidden; border-bottom: 1px solid var(--line); }
.story-source-guide-image img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 52%; filter: saturate(.76) brightness(.72); }
.story-source-guide-copy { padding: 16px 18px 14px; }
.story-source-guide-copy > span { color: var(--jade); font: 7px Consolas, monospace; }
.story-source-guide-copy strong { display: block; margin-top: 8px; color: #dbe5e2; font-size: 13px; }
.story-source-guide-copy p { margin: 7px 0 0; color: #65716f; font-size: 9px; line-height: 1.65; }
.story-source-guide ol { margin: 0; padding: 0 18px 16px; display: grid; gap: 7px; list-style: none; }
.story-source-guide li { display: flex; align-items: center; gap: 10px; color: #778582; font-size: 9px; }
.story-source-guide li b { color: var(--gold); font: 8px Consolas, monospace; }
.story-source-editor { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px; overflow-y:auto; overscroll-behavior-y:auto; scrollbar-gutter:stable; }
.story-source-types { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.story-source-types button { min-width: 0; min-height: 55px; display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 4px; background: #0d1418; color: #6c7976; text-align: left; cursor: pointer; }
.story-source-types button:hover { border-color: rgba(78, 224, 210, .28); color: #a5b3af; }
.story-source-types button.is-active { border-color: rgba(78, 224, 210, .42); background: #112326; color: #edf6f3; box-shadow: inset 2px 0 0 var(--jade); }
.story-source-types button > svg { width: 17px; color: #60706d; }
.story-source-types button.is-active > svg { color: var(--jade); }
.story-source-types button span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.story-source-types button strong { font-size: 10px; }
.story-source-types button small { overflow: hidden; color: #65726f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.story-title-field { flex: 0 0 auto; height: 42px; display: grid; grid-template-columns: 72px 1fr; align-items: center; border: 1px solid var(--line); background: #0a1014; }
.story-title-field span { padding-left: 12px; color: #71807c; font-size: 9px; }
.story-title-field input { min-width: 0; height: 100%; border: 0; border-left: 1px solid var(--line); outline: 0; padding: 0 13px; background: transparent; color: #e6efec; font-size: 11px; }
.story-title-field input::placeholder { color: #4f5b59; }
.story-source-input-wrap { min-height: 155px; flex: 1; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); background: #080e12; }
.story-source-input-wrap:focus-within { border-color: rgba(78, 224, 210, .42); }
.story-source-input-head { flex: 0 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 9px 0 13px; border-bottom: 1px solid var(--line); }
.story-source-input-head > span { display: flex; align-items: center; gap: 10px; }
.story-source-input-head strong { color: #b8c5c2; font-size: 9px; }
.story-source-input-head small { color: #596663; font-size: 8px; }
.story-source-input-head > div { display: flex; gap: 6px; }
.story-source-input-head label, .story-source-input-head button { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--line); border-radius: 4px; background: #10171b; color: #788682; font-size: 8px; cursor: pointer; }
.story-source-input-head button { width: 30px; justify-content: center; padding: 0; }
.story-source-input-head label:hover { border-color: rgba(78, 224, 210, .36); color: var(--jade); }
.story-source-input-head button:hover { border-color: rgba(255, 111, 117, .34); color: #ff9ca1; }
.story-source-input-head svg { width: 13px; }
.story-source-input-wrap textarea { min-height: 100px; flex: 1; overflow:auto; scrollbar-gutter:stable; border: 0; outline: 0; padding: 14px; background: transparent; color: #dce5e2; font-size: 11px; line-height: 1.8; }
.story-source-input-wrap textarea::placeholder { color: #4f5b59; }
.story-source-file { flex: 0 0 28px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-top: 1px solid var(--line); color: #73817e; font-size: 8px; }
.story-source-file[hidden] { display: none; }
.story-source-file svg { width: 12px; color: var(--jade); }

.story-stage-actions { flex: 0 0 48px; display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr); align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.story-stage-actions > span { justify-self: center; display: flex; align-items: center; gap: 7px; color: #5e6b68; font-size: 8px; text-align: center; }
.story-stage-actions > span svg { width: 13px; color: var(--success); }
.story-stage-actions-end { grid-template-columns: minmax(180px, 1fr) auto; }
.story-stage-actions-end > span { justify-self: start; }
.story-source-actions { justify-self: end; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.story-optional-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid var(--line); border-radius: 4px; background: #10171b; color: #83918d; font-size: 9px; cursor: pointer; }
.story-optional-button:hover:not(:disabled) { border-color: rgba(216, 179, 106, .38); color: var(--gold); }
.story-optional-button:disabled { color: #4e5a58; cursor: not-allowed; }
.story-optional-button svg { width: 14px; }
.story-back-button, .story-next-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 4px; cursor: pointer; }
.story-back-button { justify-self: start; padding: 0 15px; border: 1px solid var(--line); background: #10171b; color: #899793; font-size: 9px; }
.story-back-button:hover { border-color: rgba(170, 211, 207, .3); color: #d3ddda; }
.story-next-button { justify-self: end; min-width: 210px; padding: 0 18px; border: 1px solid var(--jade); background: var(--jade); color: #06100f; font-size: 10px; font-weight: 800; }
.story-next-button:hover:not(:disabled) { background: #77eee3; border-color: #77eee3; box-shadow: 0 0 28px rgba(78, 224, 210, .16); }
.story-next-button:disabled { border-color: var(--line); background: #12191d; color: #4e5a58; cursor: not-allowed; box-shadow: none; }
.story-next-button svg, .story-back-button svg { width: 15px; }

.story-split-workspace, .story-character-workspace, .story-scene-workspace, .story-prompt-workspace, .story-generation-workspace { min-height: 280px; flex: 1; display: grid; overflow: hidden; border: 1px solid var(--line); background: #0b1115; }
.story-split-workspace { grid-template-columns: minmax(230px, 27%) minmax(0, 1fr); }
.story-source-snapshot { min-width: 0; min-height:0; padding: 22px; overflow-y:auto; overscroll-behavior-y:auto; scrollbar-gutter:stable; border-right: 1px solid var(--line); background: #090e12; }
.story-source-snapshot > span { color: var(--jade); font: 8px Consolas, monospace; }
.story-source-snapshot h4 { margin: 13px 0 10px; color: #d7e1de; font-size: 16px; }
.story-source-snapshot > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-source-snapshot b { color: var(--gold); font-size: 9px; }
.story-source-snapshot small { color: #5f6c69; font-size: 8px; }
.story-source-snapshot p { max-height: 160px; overflow-y: auto; scrollbar-gutter:stable; margin: 13px 0 0; padding-right:5px; color: #71807c; font-size: 9px; line-height: 1.8; white-space: pre-wrap; }
.story-output-workspace, .story-character-canvas, .story-scene-canvas, .story-prompt-editor, .story-generation-queue { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.story-output-toolbar { flex: 0 0 42px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 14px; border-bottom: 1px solid var(--line); color: #899692; font-size: 9px; }
.story-output-toolbar > span { display: flex; align-items: center; gap: 8px; color: #b6c3bf; }
.story-output-toolbar svg { width: 14px; color: var(--jade); }
.story-output-toolbar em { color: #596663; font-size: 8px; font-style: normal; }
.story-output-toolbar > div { display: flex; align-items: center; gap: 10px; }
.story-toolbar-run { height: 29px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid rgba(78, 224, 210, .34); border-radius: 4px; background: #112326; color: var(--jade); font-size: 8px; cursor: pointer; }
.story-toolbar-run:hover:not(:disabled) { border-color: var(--jade); background: var(--jade); color: #06100f; }
.story-toolbar-run:disabled { border-color: var(--line); background: #11181c; color: #4f5b59; cursor: not-allowed; }
.story-toolbar-run svg { width: 12px; }
.story-empty-output { min-height: 210px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; text-align: center; }
.story-empty-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(78, 224, 210, .22); background: #102024; color: var(--jade); }
.story-empty-icon svg { width: 21px; height: 21px; }
.story-empty-output strong { margin-top: 16px; color: #c9d4d1; font-size: 13px; }
.story-empty-output p { max-width: 510px; margin: 8px 0 0; color: #677471; font-size: 9px; line-height: 1.75; }
.story-empty-output button { height: 32px; display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 0 11px; border: 1px solid var(--line); border-radius: 4px; background: #11181c; color: #596663; font-size: 8px; }
.story-empty-output button svg { width: 13px; }
.story-model-progress, .story-model-error, .story-result-editor { min-width: 0; min-height: 0; flex: 1; }
.story-model-progress { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; text-align: center; }
.story-model-progress > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(78, 224, 210, .3); background: #102024; color: var(--jade); }
.story-model-progress > span svg { width: 22px; height: 22px; animation: storySpin 1.1s linear infinite; }
.story-model-progress strong { margin-top: 15px; color: #cbd6d3; font-size: 13px; }
.story-model-progress p { margin: 7px 0 0; color: #64716e; font-size: 9px; }
.story-result-editor { display: flex; flex-direction: column; background: #080e12; }
.story-result-editor textarea { min-height: 210px; flex: 1; overflow:auto; scrollbar-gutter:stable; border: 0; outline: 0; padding: 18px 20px; background: transparent; color: #d8e2df; font-size: 10px; line-height: 1.85; white-space: pre-wrap; }
.story-result-editor footer { flex: 0 0 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 10px 0 15px; border-top: 1px solid var(--line); color: #65726f; font-size: 8px; }
.story-result-editor footer > div { display: flex; gap: 6px; }
.story-result-editor footer button, .story-model-error button { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--line); border-radius: 4px; background: #10171b; color: #7b8985; font-size: 8px; cursor: pointer; }
.story-result-editor footer button:hover:not(:disabled) { border-color: rgba(78, 224, 210, .32); color: var(--jade); }
.story-result-editor footer button:disabled, .story-model-error button:disabled { opacity: .45; cursor: not-allowed; }
.story-result-editor footer svg { width: 12px; }
.story-model-error { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; border-top: 1px solid rgba(255, 111, 117, .28); background: #1a1014; color: #ff9ca1; }
.story-model-error > svg { width: 20px; }
.story-model-error > span { display: flex; flex-direction: column; gap: 4px; }
.story-model-error strong { font-size: 10px; }
.story-model-error small { max-width: 560px; color: #c47d82; font-size: 8px; }
.story-model-error button { margin-left: 10px; border-color: rgba(255, 111, 117, .32); color: #ff9ca1; }
.story-model-progress[hidden], .story-model-error[hidden], .story-result-editor[hidden], .story-empty-output[hidden], .story-character-empty[hidden] { display: none !important; }
.story-stage-state.is-running i { background: var(--jade); animation: livePulse .9s ease-in-out infinite; }

.story-script-studio {
  min-height: 360px;
  flex: 1;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b1115;
}
.story-script-brief { min-height:0; display: flex; flex-direction: column; padding: 18px; overflow-y:auto; overscroll-behavior-y:auto; scrollbar-gutter:stable; }
.story-brief-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.story-brief-label > span { color: var(--jade); font: 8px Consolas, monospace; }
.story-brief-label button { height: 27px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid var(--line); border-radius: 4px; background: #10171b; color: #73817d; font-size: 8px; cursor: pointer; }
.story-brief-label button:hover { border-color: rgba(78, 224, 210, .32); color: var(--jade); }
.story-brief-label button svg { width: 11px; }
.story-script-brief > p { max-height: 116px; flex: 0 0 auto; }
.story-collab-steps { margin: 18px 0 0; padding: 0; display: grid; gap: 2px; list-style: none; border-top: 1px solid var(--line); }
.story-collab-steps li { min-height: 52px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 8px; padding: 0 8px; border-bottom: 1px solid rgba(170, 211, 207, .07); color: #52605d; }
.story-collab-steps li.is-current { background: #102023; color: #c8d4d0; box-shadow: inset 2px 0 0 var(--jade); }
.story-collab-steps li.is-done b { color: var(--success); }
.story-collab-steps b { color: #6d7976; font: 8px Consolas, monospace; font-weight: 400; }
.story-collab-steps span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.story-collab-steps strong { font-size: 9px; }
.story-collab-steps small { overflow: hidden; color: #596663; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.story-director-engine { margin-top: auto; min-height: 52px; display: grid; grid-template-columns: 26px 1fr; align-items: center; column-gap: 9px; padding-top: 13px; border-top: 1px solid var(--line); }
.story-director-engine > svg { grid-row: 1 / 3; width: 18px; color: var(--gold); }
.story-director-engine > span { display: flex; flex-direction: column; gap: 3px; }
.story-director-engine small { color: #5e6b68; font-size: 7px; }
.story-director-engine strong { color: #b8c5c1; font-size: 9px; }
.story-director-engine em { grid-column: 2; color: #58716c; font-size: 7px; font-style: normal; }

.story-director-room { min-width: 0; min-height: 0; display: grid; grid-template-rows: 48px minmax(0, 1fr); background: #080e12; }
.story-director-toolbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--line); background: #0c1317; }
.story-director-identity { display: flex; align-items: center; gap: 9px; }
.story-director-identity > svg { width: 16px; color: var(--jade); }
.story-director-identity > span { display: flex; flex-direction: column; gap: 3px; }
.story-director-identity strong { color: #c7d3cf; font-size: 9px; }
.story-director-identity small { color: #5e6c68; font-size: 7px; }
.story-director-toolbar > div { display: flex; align-items: center; gap: 7px; }
.story-director-toolbar button { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--line); border-radius: 4px; background: #10171b; color: #788682; font-size: 8px; cursor: pointer; }
.story-director-toolbar button:hover:not(:disabled) { border-color: rgba(78, 224, 210, .34); color: var(--jade); }
.story-director-toolbar button svg { width: 12px; }
.story-director-toolbar .story-finalize-button { border-color: rgba(78, 224, 210, .36); background: #112326; color: var(--jade); }
.story-director-toolbar .story-finalize-button:hover:not(:disabled) { background: var(--jade); color: #06100f; }
.story-director-toolbar button:disabled { border-color: var(--line); background: #11181c; color: #485451; cursor: not-allowed; }

.story-director-body { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.story-director-body.has-final { grid-template-columns: minmax(380px, 1fr) minmax(390px, 44%); }
.story-director-chat-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; overflow: hidden; }
.story-script-chat-log { min-width: 0; min-height: 0; overflow-y: auto; padding: 18px clamp(18px, 3vw, 44px); scrollbar-color: #28403d transparent; }
.story-script-welcome { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px; text-align: center; }
.story-script-welcome[hidden] { display: none; }
.story-script-welcome > span { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(78, 224, 210, .28); background: #102023; color: var(--jade); box-shadow: 0 0 30px rgba(78, 224, 210, .08); }
.story-script-welcome > span svg { width: 22px; }
.story-script-welcome > strong { margin-top: 16px; color: #d6e0dd; font-size: 15px; }
.story-script-welcome > p { max-width: 480px; margin: 8px 0 0; color: #687572; font-size: 9px; line-height: 1.75; }
.story-script-welcome > button { min-width: 230px; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; border: 1px solid var(--jade); border-radius: 4px; background: var(--jade); color: #06100f; font-size: 9px; font-weight: 800; cursor: pointer; }
.story-script-welcome > button:hover:not(:disabled) { background: #77eee3; border-color: #77eee3; box-shadow: 0 0 26px rgba(78, 224, 210, .16); }
.story-script-welcome > button:disabled { border-color: var(--line); background: #12191d; color: #4d5956; cursor: not-allowed; }
.story-script-welcome > button svg { width: 14px; }
.story-script-messages { display: flex; flex-direction: column; gap: 17px; }
.story-script-message { width: min(86%, 760px); display: flex; flex-direction: column; align-items: flex-start; }
.story-script-message.is-user { align-self: flex-end; align-items: flex-end; }
.story-script-message > header { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: #71807c; font-size: 8px; }
.story-script-message > header > span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(78, 224, 210, .22); background: #102023; color: var(--jade); }
.story-script-message.is-user > header > span { border-color: rgba(216, 179, 106, .24); background: #1a1712; color: var(--gold); }
.story-script-message > header svg { width: 11px; }
.story-script-message-text { width: 100%; padding: 13px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #0d1519; color: #c5d0cd; font-size: 10px; line-height: 1.82; white-space: pre-wrap; overflow-wrap: anywhere; }
.story-script-message.is-user .story-script-message-text { border-color: rgba(216, 179, 106, .2); background: #151410; color: #d6cfbe; }
.story-script-message.is-collapsible:not(.is-expanded) .story-script-message-text { max-height: 260px; }
.story-message-toggle { align-self: stretch; height: 29px; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: -1px; border: 1px solid var(--line); border-radius: 0 0 5px 5px; background: #10171b; color: #71807c; font-size: 8px; cursor: pointer; }
.story-message-toggle:hover { color: var(--jade); }
.story-message-toggle svg { width: 12px; transition: transform .2s var(--ease); }
.story-script-message.is-expanded .story-message-toggle svg { transform: rotate(180deg); }
.story-script-message > footer { display: flex; gap: 6px; margin-top: 6px; }
.story-script-message > footer button { height: 26px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; border: 0; background: transparent; color: #63716d; font-size: 7px; cursor: pointer; }
.story-script-message > footer button:hover:not(:disabled) { color: var(--jade); }
.story-script-message > footer button:disabled { opacity: .45; cursor: not-allowed; }
.story-script-message > footer svg { width: 11px; }
.story-thinking-dots { min-height: 46px; display: flex; align-items: center; gap: 5px; padding: 0 13px; border: 1px solid var(--line); border-radius: 5px; background: #0d1519; color: #64716e; font-size: 8px; }
.story-thinking-dots i { width: 5px; height: 5px; background: var(--jade); animation: storyThinking 1s ease-in-out infinite; }
.story-thinking-dots i:nth-child(2) { animation-delay: .15s; }
.story-thinking-dots i:nth-child(3) { animation-delay: .3s; }
.story-thinking-dots span { margin-left: 5px; }

.story-script-chat-error { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 7px 11px; border-top: 1px solid rgba(255, 111, 117, .28); background: #1a1014; color: #ff9ca1; }
.story-script-chat-error[hidden] { display: none; }
.story-script-chat-error > svg { width: 16px; }
.story-script-chat-error > span { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; }
.story-script-chat-error strong { font-size: 8px; }
.story-script-chat-error small { overflow: hidden; color: #c47d82; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.story-script-chat-error button { height: 27px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid rgba(255, 111, 117, .3); border-radius: 4px; background: #181216; color: #ff9ca1; font-size: 8px; cursor: pointer; }
.story-script-chat-error button svg { width: 11px; }

.story-director-composer { margin: 0 12px 12px; overflow: hidden; border: 1px solid rgba(78, 224, 210, .22); border-radius: 5px; background: #0e161a; box-shadow: 0 15px 36px rgba(0, 0, 0, .2); }
.story-director-composer:focus-within { border-color: rgba(78, 224, 210, .5); }
.story-director-composer textarea { width: 100%; min-height: 58px; max-height: 150px; resize: vertical; border: 0; outline: 0; padding: 12px 13px 6px; background: transparent; color: #d5dfdc; font-size: 10px; line-height: 1.65; }
.story-director-composer textarea::placeholder { color: #53605d; }
.story-director-composer textarea:disabled { opacity: .65; cursor: wait; }
.story-director-composer footer { height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 7px 0 12px; }
.story-director-composer footer > span { min-width: 0; display: flex; align-items: center; gap: 7px; color: #5d6a67; }
.story-director-composer footer > span > i { width: 5px; height: 5px; background: var(--success); }
.story-director-composer footer b { overflow: hidden; max-width: 320px; font-size: 7px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.story-director-composer footer small { font-size: 7px; }
.story-director-composer footer button { min-width: 74px; height: 29px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--jade); border-radius: 4px; background: var(--jade); color: #06100f; font-size: 8px; font-weight: 800; cursor: pointer; }
.story-director-composer footer button:hover:not(:disabled) { background: #77eee3; }
.story-director-composer footer button:disabled { border-color: var(--line); background: #151c20; color: #4d5956; cursor: not-allowed; }
.story-director-composer footer button svg { width: 13px; }

.story-final-script { min-width: 0; min-height: 0; display: grid; grid-template-rows: 47px minmax(0, 1fr) 34px; overflow: hidden; border-left: 1px solid var(--line); background: #090f13; }
.story-final-script[hidden] { display: none; }
.story-final-script > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 9px 0 13px; border-bottom: 1px solid var(--line); }
.story-final-script > header > span { display: flex; align-items: center; gap: 8px; }
.story-final-script > header > span > svg { width: 16px; color: var(--success); }
.story-final-script > header > span > span { display: flex; flex-direction: column; gap: 3px; }
.story-final-script > header strong { color: #c9d4d1; font-size: 9px; }
.story-final-script > header small { color: #5d6a67; font-size: 7px; }
.story-final-script > header button { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: #10171b; color: #74827e; cursor: pointer; }
.story-final-script > header button:hover { color: var(--jade); }
.story-final-script > header button svg { width: 12px; }
.story-final-script textarea { min-width: 0; min-height: 0; overflow:auto; scrollbar-gutter:stable; resize: none; border: 0; outline: 0; padding: 16px; background: transparent; color: #d4dedb; font-size: 9px; line-height: 1.8; }
.story-final-script > footer { display: flex; align-items: center; justify-content: center; gap: 7px; border-top: 1px solid var(--line); color: #60706b; font-size: 7px; }
.story-final-script > footer i { width: 5px; height: 5px; background: var(--success); }
.story-final-script.is-stale > header > span > svg { color: var(--gold); }
.story-final-script.is-stale > footer i { background: var(--gold); }
.story-final-script.is-stale > header small { color: #9a8150; }

@keyframes storyThinking { 0%, 100% { opacity: .28; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

.story-character-workspace { grid-template-columns: 210px minmax(0, 1fr); }
.story-character-media-bar { min-height: 50px; display: grid; grid-template-columns: auto minmax(440px, auto) minmax(220px, 1fr); align-items: center; gap: 13px; padding: 8px 12px; border: 1px solid var(--line); background: #0b1115; }
.story-character-media-bar > span { display: inline-flex; align-items: center; gap: 7px; color: #9daba7; font-size: 8px; white-space: nowrap; }
.story-character-media-bar > span svg { width: 14px; color: var(--gold); }
.story-character-media-bar > div { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(98px, 1fr)); gap: 5px; }
.story-character-media-bar button { height: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #10171b; color: #687572; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.story-character-media-bar button:hover { border-color: rgba(78, 224, 210, .3); color: #b5c2be; }
.story-character-media-bar button.is-active { border-color: rgba(78, 224, 210, .45); background: #112326; color: var(--jade); box-shadow: inset 2px 0 0 var(--jade); }
.story-character-media-bar > p { min-width: 0; margin: 0; overflow: hidden; color: #66736f; font-size: 8px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.story-asset-kind-bar { grid-template-columns: auto minmax(220px, 310px) minmax(220px, 1fr) auto; }
.story-asset-kind-bar > div { grid-template-columns: repeat(2, minmax(96px, 1fr)); }
.story-asset-kind-bar .story-asset-kind-run { min-width: 170px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-color: rgba(78, 224, 210, .4); background: #112326; color: var(--jade); }
.story-asset-kind-bar .story-asset-kind-run:hover:not(:disabled) { border-color: var(--jade); background: var(--jade); color: #06100f; }
.story-asset-kind-bar .story-asset-kind-run:disabled { border-color: var(--line); background: #11181c; color: #4f5b59; cursor: not-allowed; }
.story-asset-kind-bar .story-asset-kind-run svg { width: 13px; }
.story-asset-section { min-height: 360px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.story-asset-section[hidden] { display: none !important; }
.story-asset-subhead { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 6px 10px 6px 13px; border: 1px solid var(--line); background: #0b1115; }
.story-asset-subhead > span { min-width: 0; display: grid; grid-template-columns: 18px auto; align-items: center; column-gap: 8px; }
.story-asset-subhead > span > svg { grid-row: 1 / 3; width: 15px; color: var(--jade); }
.story-asset-subhead strong { color: #b8c5c1; font-size: 9px; }
.story-asset-subhead small { color: #64716e; font-size: 7px; }
.story-asset-section .story-scene-workspace { flex: 1; }
.story-section-rail { min-height:0; padding: 12px; overflow-y:auto; overscroll-behavior-y:auto; scrollbar-gutter:stable; border-right: 1px solid var(--line); background: #090e12; }
.story-section-rail > div { min-height: 56px; display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid rgba(170, 211, 207, .08); color: #586562; }
.story-section-rail > div.is-active { border: 1px solid rgba(78, 224, 210, .24); background: #102023; color: #c5d0cd; }
.story-section-rail b { color: var(--gold); font: 8px Consolas, monospace; }
.story-section-rail span { display: flex; flex-direction: column; gap: 4px; }
.story-section-rail strong { font-size: 9px; }
.story-section-rail small { color: #5c6966; font-size: 8px; }
.story-character-empty { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.story-character-placeholders { min-height:0; flex: 1; display: grid; grid-template-columns: repeat(3, minmax(130px, 190px)); align-content: center; justify-content: center; gap: 14px; padding: 25px; overflow:auto; scrollbar-gutter:stable; }
.story-character-placeholders > span { aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px dashed rgba(170, 211, 207, .18); color: #53605e; }
.story-character-placeholders svg { width: 28px; height: 28px; }
.story-character-placeholders b { font-size: 9px; font-weight: 500; }
.story-canvas-note { flex: 0 0 58px; display: flex; align-items: center; justify-content: center; gap: 12px; border-top: 1px solid var(--line); color: #65726f; font-size: 8px; }
.story-canvas-note strong { color: #aab7b3; font-size: 9px; }

.story-scene-workspace, .story-prompt-workspace { grid-template-columns: 230px minmax(0, 1fr); }
.story-prompt-workspace { grid-template-columns: minmax(360px, 42%) minmax(0, 1fr); }
.story-final-script-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); background: #090e12; }
.story-final-script-pane > header { flex: 0 0 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 9px 0 13px; border-bottom: 1px solid var(--line); color: #b6c3bf; font-size: 9px; }
.story-final-script-pane > header > span, .story-final-script-pane > header > div { display: flex; align-items: center; gap: 8px; }
.story-final-script-pane > header svg { width: 14px; color: var(--jade); }
.story-final-script-pane > header b { color: var(--gold); font: 8px Consolas, monospace; font-weight: 400; }
.story-final-script-pane > header button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: #10171b; color: #71807c; cursor: pointer; }
.story-final-script-pane > header button:hover { border-color: rgba(78, 224, 210, .34); color: var(--jade); }
.story-pane-empty { min-height: 210px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; color: #596663; text-align: center; }
.story-pane-empty[hidden] { display: none !important; }
.story-pane-empty svg { width: 26px; height: 26px; margin-bottom: 14px; color: #65736f; }
.story-pane-empty strong { color: #87948f; font-size: 10px; }
.story-pane-empty span { max-width: 280px; margin-top: 7px; font-size: 8px; line-height: 1.65; }
.story-production-script { min-width: 0; min-height: 0; flex: 1; display: grid; grid-template-rows: minmax(0, 1fr) 36px; overflow: hidden; background: #080e12; }
.story-production-script[hidden] { display: none !important; }
.story-production-script textarea { width: 100%; min-width: 0; min-height: 240px; overflow: auto; scrollbar-gutter: stable; resize: none; border: 0; outline: 0; padding: 18px 20px; background: transparent; color: #d8e2df; font-size: 10px; line-height: 1.85; white-space: pre-wrap; }
.story-production-script footer { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border-top: 1px solid var(--line); color: #65726f; font-size: 8px; text-align: center; }
.story-production-script footer i { width: 5px; height: 5px; background: var(--success); }
.story-segment-list { min-width: 0; min-height:0; overflow:auto; overscroll-behavior:auto; scrollbar-gutter:stable; border-right: 1px solid var(--line); background: #090e12; }
.story-segment-list > header { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid var(--line); color: #97a5a1; font-size: 9px; }
.story-segment-list > header b { color: var(--gold); font: 8px Consolas, monospace; }
.story-segment-items { min-height: calc(100% - 42px); display: flex; flex-direction: column; gap: 4px; padding: 8px; overflow: visible; }
.story-segment-items > .story-segment-empty { height: auto; flex: 1; }
.story-segment-card { min-width: 0; min-height: 55px; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid transparent; background: #0d1418; color: #71807c; }
.story-segment-card.is-active { border-color: rgba(78, 224, 210, .25); background: #102023; box-shadow: inset 2px 0 0 var(--jade); }
.story-segment-card > b { color: var(--gold); font: 8px Consolas, monospace; font-weight: 400; }
.story-segment-card > span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.story-segment-card strong, .story-segment-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-segment-card strong { color: #aebbb7; font-size: 9px; }
.story-segment-card small { color: #596663; font-size: 7px; }
.story-segment-empty { height: calc(100% - 42px); min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; color: #566360; text-align: center; }
.story-segment-empty svg { width: 24px; height: 24px; margin-bottom: 12px; color: #65736f; }
.story-segment-empty strong { color: #87948f; font-size: 9px; }
.story-segment-empty span { margin-top: 6px; font-size: 8px; }
.story-prompt-toolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 13px; border: 1px solid var(--line); background: #0b1115; }
.story-prompt-toolbar > div { display: flex; align-items: center; gap: 6px; }
.story-prompt-toolbar > p { display: flex; align-items: center; gap: 7px; margin: 0; color: #687572; font-size: 8px; }
.story-prompt-toolbar > p svg { width: 13px; color: var(--gold); }
.story-prompt-toolbar span, .story-setting-block > span { margin-right: 5px; color: #71807c; font-size: 8px; }
.story-prompt-toolbar button, .story-setting-block button { height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 4px; background: #10171b; color: #697673; font-size: 8px; cursor: pointer; }
.story-prompt-toolbar button:hover, .story-setting-block button:hover { color: #b5c2be; }
.story-prompt-toolbar button.is-active, .story-setting-block button.is-active { border-color: rgba(78, 224, 210, .4); background: #112326; color: var(--jade); }

.story-assembly-table { flex: 1; min-height: 220px; overflow: auto; overscroll-behavior:auto; scrollbar-gutter:stable; border: 1px solid var(--line); background: #0b1115; }
.story-assembly-table > header, .story-assembly-empty { display: grid; grid-template-columns: 90px 1fr 1fr minmax(220px, 1.7fr) 90px; align-items: center; gap: 1px; }
.story-assembly-table > header { height: 42px; border-bottom: 1px solid var(--line); background: #0d1418; color: #6f7c79; font-size: 8px; }
.story-assembly-table > header span, .story-assembly-empty > * { padding: 0 13px; }
.story-assembly-empty { height: calc(100% - 42px); min-height: 176px; color: #5d6a67; font-size: 9px; }
.story-assembly-empty b { color: var(--gold); font-weight: 500; }
.story-assembly-empty b.is-ready { color: var(--success); }
.story-assembly-guide { flex: 0 0 78px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; padding: 0 clamp(18px, 4vw, 70px); border: 1px solid var(--line); background: #0b1115; }
.story-assembly-guide > span { display: grid; grid-template-columns: 28px 1fr; align-items: center; column-gap: 10px; }
.story-assembly-guide > span svg { grid-row: 1 / 3; width: 19px; color: var(--jade); }
.story-assembly-guide strong { color: #acbab6; font-size: 9px; }
.story-assembly-guide small { color: #5b6865; font-size: 8px; }
.story-assembly-guide > svg { width: 14px; color: var(--gold); }

.story-item-tabs { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); background: #090e12; }
.story-item-tabs > header { flex: 0 0 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid var(--line); color: #9aa7a3; font-size: 9px; }
.story-item-tabs > header b { color: var(--gold); font: 8px Consolas, monospace; font-weight: 400; }
.story-item-tabs > div:not(.story-item-tabs-empty) { min-height: 0; display: flex; flex: 1; flex-direction: column; gap: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 8px; }
.story-item-tab { width: 100%; min-height: 60px; display: grid; grid-template-columns: 26px minmax(0, 1fr) 14px; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid transparent; border-radius: 4px; background: #0d1418; color: #687572; text-align: left; cursor: pointer; }
.story-item-tab:hover { border-color: rgba(78, 224, 210, .2); color: #b3c0bc; }
.story-item-tab.is-active { border-color: rgba(78, 224, 210, .36); background: #102326; box-shadow: inset 3px 0 0 var(--jade); }
.story-item-tab > b { color: var(--gold); font: 8px Consolas, monospace; font-weight: 400; }
.story-item-tab > span { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.story-item-tab strong, .story-item-tab small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-item-tab strong { color: #bdc9c5; font-size: 9px; }
.story-item-tab small { color: #5f6c69; font-size: 7px; }
.story-item-tab > svg { width: 12px; color: #4e5b58; }
.story-item-tab.is-active > svg { color: var(--jade); }
.story-prop-tab-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 5px; align-items: stretch; }
.story-prop-tab-row .story-item-tab { min-height: 62px; }
.story-prop-checkbox { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: #0d1418; cursor: pointer; }
.story-prop-checkbox input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.story-prop-checkbox span { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid #33413e; border-radius: 3px; color: transparent; }
.story-prop-checkbox svg { width: 11px; }
.story-prop-checkbox:has(input:checked) { border-color: rgba(78, 224, 210, .34); background: #102326; }
.story-prop-checkbox input:checked + span { border-color: var(--jade); background: var(--jade); color: #06100f; }
.story-item-tabs-empty { min-height: 210px; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 20px; color: #566360; text-align: center; }
.story-item-tabs-empty svg { width: 25px; height: 25px; margin-bottom: 12px; }
.story-item-tabs-empty strong { color: #899691; font-size: 9px; }
.story-item-tabs-empty span { margin-top: 6px; font-size: 7px; line-height: 1.6; }

.story-character-canvas, .story-scene-canvas { overflow: hidden; }
.story-image-studio { min-width: 0; min-height: 0; display: grid; flex: 1; grid-template-rows: 48px auto minmax(0, 1fr); overflow: hidden; background: #080e12; }
.story-image-studio[hidden] { display: none !important; }
.story-image-studio-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 11px 0 15px; border-bottom: 1px solid var(--line); }
.story-image-studio-head > span, .story-image-studio-head > div { display: flex; align-items: center; gap: 9px; }
.story-image-studio-head > span > svg { width: 16px; color: var(--jade); }
.story-image-studio-head > span > span { display: flex; flex-direction: column; gap: 3px; }
.story-image-studio-head strong { color: #c5d0cd; font-size: 9px; }
.story-image-studio-head small { color: #5e6b68; font-size: 7px; }
.story-image-studio-head b { color: var(--gold); font: 8px Consolas, monospace; font-weight: 400; }
.story-image-studio-head button { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid rgba(78, 224, 210, .34); border-radius: 4px; background: #112326; color: var(--jade); font-size: 8px; cursor: pointer; }
.story-image-studio-head button:hover:not(:disabled) { border-color: var(--jade); background: var(--jade); color: #06100f; }
.story-image-studio-head button:disabled { border-color: var(--line); background: #11181c; color: #4f5b59; cursor: not-allowed; }
.story-image-studio-head button svg { width: 12px; }
.story-image-batch { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--line); background: #0c1418; }
.story-image-batch[hidden] { display: none !important; }
.story-image-batch > div { height: 3px; flex: 1; overflow: hidden; background: #172125; }
.story-image-batch > div i { display: block; height: 100%; background: linear-gradient(90deg, var(--jade), var(--gold)); transition: width .25s ease; }
.story-image-batch > span { min-width: 126px; color: #76837f; font-size: 7px; text-align: right; }
.story-image-grid { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 12px; }
.story-image-card { min-height: 100%; display: grid; grid-template-columns: minmax(270px, 42%) minmax(320px, 1fr); overflow: hidden; border: 1px solid var(--line); background: #0b1216; }
.story-image-card-media { min-width: 0; min-height: 330px; position: relative; display: grid; place-items: center; overflow: hidden; border-right: 1px solid var(--line); background: #060b0e; }
.story-image-preview { width: 100%; height: 100%; min-height: 330px; position: relative; display: grid; place-items: center; border: 0; background: #05090c; cursor: zoom-in; }
.story-image-preview img { width: 100%; height: 100%; max-height: 570px; object-fit: contain; }
.story-image-preview > span { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(4,10,13,.78); color: #dce6e3; font-size: 7px; }
.story-image-preview > span svg { width: 11px; }
.story-image-preview > em { position: absolute; left: 10px; top: 10px; padding: 5px 7px; background: rgba(216,179,106,.9); color: #10100d; font-size: 7px; font-style: normal; }
.story-image-placeholder { display: flex; flex-direction: column; align-items: center; gap: 9px; color: #53605d; text-align: center; }
.story-image-placeholder svg { width: 31px; height: 31px; color: #61706c; }
.story-image-placeholder strong { color: #8a9793; font-size: 9px; }
.story-image-placeholder span { color: var(--gold); font: 8px Consolas, monospace; }
.story-image-card-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: #151f23; }
.story-image-card-progress i { display: block; height: 100%; background: var(--jade); transition: width .25s ease; }
.story-image-card-body { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; padding: 18px; overflow: hidden; }
.story-image-card-body > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.story-image-card-body > header > span { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.story-image-card-body > header small { color: var(--gold); font: 7px Consolas, monospace; }
.story-image-card-body > header strong { overflow: hidden; color: #d2dcd9; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.story-image-card-body > header > b { flex: 0 0 auto; color: #788682; font-size: 8px; font-weight: 500; }
.story-image-card.is-completed .story-image-card-body > header > b { color: var(--success); }
.story-image-card.is-failed .story-image-card-body > header > b { color: #ff8d93; }
.story-image-card.is-unselected { border-color: rgba(216, 179, 106, .22); }
.story-image-card-body > header { grid-row: 1; }
.story-prop-context { grid-row: 2; padding: 10px 0; border-bottom: 1px solid var(--line); color: #7d8a86; font-size: 8px; line-height: 1.65; }
.story-image-prompt { grid-row: 3; }
.story-image-error { grid-row: 4; }
.story-image-card-body > footer { grid-row: 5; }
.story-image-prompt { min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; padding-top: 14px; }
.story-image-prompt::before { content: '最终提示词'; flex: 0 0 auto; margin-bottom: 8px; color: #687572; font-size: 7px; }
.story-image-prompt p { min-height: 0; max-height: 180px; margin: 0; overflow: hidden; color: #b9c5c1; font-size: 9px; line-height: 1.82; white-space: pre-wrap; overflow-wrap: anywhere; }
.story-image-prompt.is-expanded p { max-height: none; overflow-y: auto; scrollbar-gutter: stable; }
.story-image-prompt button { flex: 0 0 30px; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 8px; border: 1px solid var(--line); border-radius: 4px; background: #10171b; color: #697673; font-size: 7px; cursor: pointer; }
.story-image-prompt button:hover { color: var(--jade); }
.story-image-prompt button svg { width: 11px; }
.story-image-error { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 10px; border-left: 2px solid #ff7077; background: #1a1014; color: #ff9ca1; font-size: 8px; }
.story-image-error svg { width: 14px; }
.story-image-card-body > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.story-image-card-body > footer > span { color: #65726f; font-size: 7px; }
.story-image-card-body > footer > div { display: flex; align-items: center; gap: 6px; }
.story-image-card-body > footer button, .story-image-card-body > footer a { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 9px; border: 1px solid var(--line); border-radius: 4px; background: #10171b; color: #788682; font-size: 8px; text-decoration: none; cursor: pointer; }
.story-image-card-body > footer button:last-child { border-color: rgba(78,224,210,.35); background: #112326; color: var(--jade); }
.story-image-card-body > footer button:hover:not(:disabled), .story-image-card-body > footer a:hover { border-color: rgba(78,224,210,.45); color: var(--jade); }
.story-image-card-body > footer button:disabled { opacity: .45; cursor: wait; }
.story-image-card-body > footer svg { width: 12px; }

.story-generation-toolbar { flex: 0 0 auto; display: grid; grid-template-columns: minmax(250px, 1fr) minmax(300px, auto) minmax(200px, 1fr); align-items: center; gap: 18px; padding: 10px 13px; border: 1px solid var(--line); background: #0b1115; }
.story-generation-toolbar > label, .story-generation-toolbar > span { display: flex; align-items: center; gap: 8px; color: #798682; font-size: 8px; }
.story-generation-toolbar > span { justify-content: flex-end; }
.story-generation-toolbar svg { width: 14px; color: var(--gold); }
.story-generation-toolbar b { color: #aab7b3; font-size: 8px; }
.story-generation-toolbar strong { color: var(--jade); font: 9px Consolas, monospace; }
.story-generation-toolbar select { min-width: 150px; height: 30px; border: 1px solid var(--line); border-radius: 4px; outline: 0; padding: 0 28px 0 9px; background: #10171b; color: #b5c1bd; font-size: 8px; }
.story-generation-toolbar .story-setting-block { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0; border: 0; }
.story-generation-toolbar .story-setting-block > div { display: flex; gap: 5px; margin: 0; }
.story-generation-toolbar .story-setting-block button { min-width: 62px; }

.story-generation-workspace { min-height: 360px; grid-template-columns: 230px minmax(400px, 1fr) minmax(300px, 34%); }
.story-generation-assets, .story-generation-segments, .story-generation-queue { min-width: 0; min-height: 0; display: grid; grid-template-rows: 44px minmax(0, 1fr); overflow: hidden; }
.story-generation-assets, .story-generation-segments { border-right: 1px solid var(--line); }
.story-generation-assets > header, .story-generation-segments > header, .story-generation-queue > header { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--line); background: #0d1418; }
.story-generation-assets > header > span, .story-generation-segments > header > span, .story-generation-queue > header > span { display: flex; align-items: center; gap: 7px; color: #aab7b3; font-size: 8px; }
.story-generation-assets > header svg, .story-generation-segments > header svg, .story-generation-queue > header svg { width: 13px; color: var(--jade); }
.story-generation-assets > header > b, .story-generation-segments > header b, .story-generation-queue > header > b { color: #687572; font: 7px Consolas, monospace; font-weight: 400; }
.story-generation-segments > header > div { display: flex; align-items: center; gap: 7px; }
.story-generation-segments > header button { height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid rgba(78,224,210,.3); border-radius: 4px; background: #112326; color: var(--jade); font-size: 7px; cursor: pointer; }
.story-generation-segments > header button:disabled { border-color: var(--line); background: #11181c; color: #4f5b59; cursor: not-allowed; }
.story-generation-segments > header button svg { width: 11px; }

.story-generation-assets { grid-template-rows: 44px 36px minmax(0, 1fr); background: #090e12; }
.story-asset-filters { display: flex; align-items: center; gap: 3px; overflow-x: auto; padding: 5px 7px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.story-asset-filters::-webkit-scrollbar { display: none; }
.story-asset-filters button { min-width: 39px; height: 25px; flex: 0 0 auto; padding: 0 7px; }
.story-asset-filters button, .story-generation-view button { border: 0; border-radius: 3px; background: transparent; color: #60706b; font-size: 7px; cursor: pointer; }
.story-asset-filters button.is-active, .story-generation-view button.is-active { background: #132326; color: var(--jade); }
.story-asset-library { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 7px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 8px; }
.story-generation-asset { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #0d1519; padding: 0 0 8px; color: #697673; text-align: left; cursor: pointer; }
.story-generation-asset:hover { border-color: rgba(78,224,210,.28); }
.story-generation-asset.is-selected { border-color: rgba(78,224,210,.5); background: #102225; box-shadow: inset 0 -2px 0 var(--jade); }
.story-generation-asset > span { aspect-ratio: 1 / 1; position: relative; display: block; overflow: hidden; background: #05090c; }
.story-generation-asset img, .story-generation-asset video, .story-generation-asset .local-media-placeholder { width: 100%; height: 100%; display: block; object-fit: cover; }
.story-generation-asset > span i { width: 19px; height: 19px; position: absolute; right: 5px; top: 5px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(5,11,14,.84); color: #dbe5e2; }
.story-generation-asset.is-selected > span i { background: var(--jade); color: #06100f; }
.story-generation-asset > span i svg { width: 10px; }
.story-generation-asset > strong, .story-generation-asset > small { display: block; overflow: hidden; margin: 7px 7px 0; text-overflow: ellipsis; white-space: nowrap; }
.story-generation-asset > strong { color: #b6c2be; font-size: 8px; }
.story-generation-asset > small { margin-top: 3px; color: #586562; font-size: 7px; }

.story-video-segment-list, .story-video-task-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 8px; }
.story-video-segment-list { display: flex; flex-direction: column; gap: 8px; }
.story-video-segment { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #0d1418; cursor: zoom-in; }
.story-video-segment.is-active { border-color: rgba(78,224,210,.4); box-shadow: inset 3px 0 0 var(--jade); }
.story-video-segment > header { display: flex; align-items: center; padding: 7px 9px 7px 10px; border-bottom: 1px solid rgba(170,211,207,.08); }
.story-video-segment > header > button { min-width: 0; display: grid; flex: 1; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; border: 0; background: transparent; color: #788682; text-align: left; cursor: pointer; }
.story-video-segment > header > .story-video-prompt-preview { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; margin-left: 8px; border: 1px solid rgba(78,224,210,.22); border-radius: 4px; background: rgba(78,224,210,.08); color: #75d9cf; cursor: pointer; }
.story-video-segment > header > .story-video-prompt-preview:hover { border-color: rgba(78,224,210,.5); background: rgba(78,224,210,.15); color: var(--jade); }
.story-video-segment > header > .story-video-prompt-preview svg { width: 16px; height: 16px; }
.story-video-segment > header > button > b { color: var(--gold); font: 8px Consolas, monospace; font-weight: 400; }
.story-video-segment > header > button > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.story-video-segment > header strong, .story-video-segment > header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-video-segment > header strong { color: #b9c5c1; font-size: 9px; }
.story-video-segment > header small { color: #5b6865; font-size: 7px; }
.story-video-segment > header > i { width: 6px; height: 6px; flex: 0 0 auto; background: #5b6663; }
.story-video-segment > header > i.is-ready { background: var(--success); box-shadow: 0 0 8px rgba(75,211,151,.35); }
.story-video-selected-assets { min-height: 36px; display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 6px 9px; }
.story-video-selected-assets > span { max-width: 150px; display: inline-grid; flex: 0 0 auto; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 6px; padding-right: 7px; border: 1px solid var(--line); background: #10181c; }
.story-video-selected-assets img, .story-video-selected-assets video, .story-video-selected-assets .local-media-placeholder { width: 24px; height: 24px; display: block; object-fit: cover; }
.story-video-selected-assets b { overflow: hidden; color: #84928d; font-size: 7px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.story-video-selected-assets em { color: #566360; font-size: 7px; font-style: normal; }
.story-video-prompt { padding: 0 9px 7px; }
.story-video-prompt p { max-height: 54px; margin: 0; overflow: hidden; color: #7b8985; font-size: 7px; line-height: 1.75; white-space: pre-wrap; }
.story-video-prompt.is-expanded p { max-height: 220px; overflow-y: auto; scrollbar-gutter: stable; }
.story-video-prompt button { height: 24px; display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; border: 0; background: transparent; color: #5c6a66; font-size: 7px; cursor: pointer; }
.story-video-prompt button:hover { color: var(--jade); }
.story-video-prompt button svg { width: 10px; }
.story-prompt-preview-backdrop { z-index: 340; padding: 22px; background: rgba(2,5,7,.9); backdrop-filter: blur(24px); }
.story-prompt-preview-shell { width: min(1180px,94vw); height: min(850px,92vh); min-width: 0; min-height: 0; display: grid; grid-template-rows: 72px minmax(0,1fr) 106px; overflow: hidden; border: 1px solid rgba(126,190,183,.3); border-radius: 6px; background: #080d11; box-shadow: 0 42px 130px rgba(0,0,0,.72); }
.story-prompt-preview-header { min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr) 38px; align-items: center; gap: 13px; padding: 0 18px; border-bottom: 1px solid var(--line); background: #0b1216; }
.story-prompt-preview-mark { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(78,224,210,.34); background: #102326; color: var(--jade); }
.story-prompt-preview-mark svg { width: 19px; }
.story-prompt-preview-header > div { min-width: 0; }
.story-prompt-preview-header small { display: block; color: var(--gold); font: 8px Consolas,monospace; }
.story-prompt-preview-header h2 { overflow: hidden; margin: 4px 0 0; color: #dbe5e2; font-size: 17px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.story-prompt-preview-header p { overflow: hidden; margin: 3px 0 0; color: #64716e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.story-prompt-preview-body { min-width: 0; min-height: 0; display: grid; grid-template-rows: 136px minmax(0,1fr); overflow: hidden; }
.story-prompt-preview-assets { min-width: 0; min-height: 0; display: grid; grid-template-rows: 38px minmax(0,1fr); border-bottom: 1px solid var(--line); background: #0a1014; }
.story-prompt-preview-assets > header,.story-prompt-preview-text > header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid rgba(160,203,198,.08); }
.story-prompt-preview-assets > header > span,.story-prompt-preview-text > header > span { display: inline-flex; align-items: center; gap: 7px; color: #95a39f; font-size: 9px; }
.story-prompt-preview-assets > header svg,.story-prompt-preview-text > header svg { width: 14px; color: var(--jade); }
.story-prompt-preview-assets > header > div,.story-prompt-preview-text > header > div { display: flex; align-items: center; gap: 9px; }
.story-prompt-preview-assets > header b { color: var(--gold); font: 8px Consolas,monospace; font-weight: 400; }
#story-prompt-preview-add-asset,.story-prompt-preview-text > header button { height: 26px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: #11191d; color: #7e8b87; font-size: 8px; cursor: pointer; }
#story-prompt-preview-add-asset:hover,.story-prompt-preview-text > header button:hover { border-color: rgba(78,224,210,.4); color: var(--jade); }
#story-prompt-preview-add-asset svg,.story-prompt-preview-text > header button svg { width: 11px; }
#story-prompt-preview-asset-list { min-width: 0; display: flex; align-items: stretch; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 9px 16px 11px; scrollbar-gutter: stable; }
.story-prompt-preview-asset { width: 156px; min-width: 156px; height: 76px; position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: 8px; margin: 0; overflow: hidden; padding: 7px 27px 7px 7px; border: 1px solid var(--line); border-radius: 4px; background: #10171b; }
.story-prompt-preview-media { width: 58px; height: 60px; position: relative; display: block; overflow: hidden; padding: 0; border: 0; background: #030608; color: #dce8e5; cursor: zoom-in; }
.story-prompt-preview-asset img, .story-prompt-preview-asset video, .story-prompt-preview-asset .local-media-placeholder { width: 100%; height: 100%; display: block; object-fit: cover; }
.story-prompt-preview-media em { position: absolute; right: 4px; top: 4px; min-width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(5,10,13,.84); color: #e5ecea; font: 8px Consolas,monospace; font-style: normal; }
.story-prompt-preview-media > svg { width: 15px; height: 15px; position: absolute; left: 50%; top: 50%; padding: 5px; box-sizing: content-box; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(3,8,10,.72); opacity: 0; transform: translate(-50%,-42%); transition: .2s ease; }
.story-prompt-preview-media:hover > svg,.story-prompt-preview-media:focus-visible > svg { opacity: 1; transform: translate(-50%,-50%); }
.story-prompt-preview-asset > div { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.story-prompt-preview-asset strong { overflow: hidden; color: #aebbb7; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.story-prompt-preview-asset small { color: #5e6c68; font-size: 7px; white-space: nowrap; }
.story-prompt-preview-asset > .story-prompt-preview-remove { width: 22px; height: 22px; position: absolute; right: 3px; top: 3px; display: grid; place-items: center; border: 0; background: transparent; color: #5f6b68; cursor: pointer; }
.story-prompt-preview-asset > .story-prompt-preview-remove:hover { color: #ff8d94; }
.story-prompt-preview-asset > .story-prompt-preview-remove svg { width: 11px; }
.story-prompt-preview-add-card { width: 88px; min-width: 88px; height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed rgba(126,190,183,.25); border-radius: 4px; background: rgba(16,25,29,.6); color: #64716e; font-size: 8px; cursor: pointer; }
.story-prompt-preview-add-card:hover { border-color: rgba(78,224,210,.46); color: var(--jade); }
.story-prompt-preview-add-card svg { width: 15px; }
.story-prompt-preview-no-assets { min-width: 220px; height: 76px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--line); color: #596663; font-size: 8px; }
.story-prompt-preview-no-assets svg { width: 15px; }
.story-prompt-preview-text { min-width: 0; min-height: 0; position: relative; display: grid; grid-template-rows: 42px minmax(0,1fr); background: #070b0e; }
.story-prompt-preview-text > header em { color: #56635f; font-size: 8px; font-style: normal; }
.story-prompt-preview-editor-shell { min-width: 0; min-height: 0; position: relative; overflow: hidden; }
.story-prompt-preview-editor { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: auto; padding: 20px 24px 34px; outline: 0; color: #d7dfdd; caret-color: var(--jade); font: 14px/1.9 "Microsoft YaHei UI","Microsoft YaHei",sans-serif; letter-spacing: 0; white-space: pre-wrap; word-break: break-word; scrollbar-gutter: stable; }
.story-prompt-preview-editor:focus { box-shadow: inset 0 0 0 1px rgba(78,224,210,.16); }
.story-prompt-preview-editor:empty::before { color: #4f5b58; content: attr(data-placeholder); pointer-events: none; }
.story-prompt-mention { min-width: 82px; max-width: 190px; height: 28px; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; margin: 0 3px; padding: 3px 8px 3px 3px; border: 1px solid rgba(78,224,210,.28); border-radius: 4px; background: #132427; color: #bfe4df; vertical-align: middle; user-select: all; }
.story-prompt-mention img,.story-prompt-mention-media { width: 20px; height: 20px; flex: 0 0 auto; object-fit: cover; }
.story-prompt-mention-media { display: grid; place-items: center; background: #0b171a; color: var(--jade); }
.story-prompt-mention-media svg { width: 11px; height: 11px; }
.story-prompt-mention b { overflow: hidden; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.story-prompt-asset-picker { width: 300px; max-height: 318px; position: absolute; z-index: 5; display: grid; grid-template-rows: 38px 42px minmax(0,1fr); overflow: hidden; border: 1px solid rgba(126,190,183,.28); border-radius: 6px; background: #10171b; box-shadow: 0 20px 58px rgba(0,0,0,.58); }
.story-prompt-asset-picker[hidden] { display: none; }
.story-prompt-asset-picker > header { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 12px; border-bottom: 1px solid var(--line); }
.story-prompt-asset-picker > header > span { display: inline-flex; align-items: center; gap: 6px; color: #a7b5b1; font-size: 9px; }
.story-prompt-asset-picker > header svg { width: 12px; color: var(--jade); }
.story-prompt-asset-picker > header > div { display: inline-flex; align-items: center; gap: 2px; }
.story-prompt-asset-picker > header button { width: 25px; height: 25px; display: grid; place-items: center; border: 0; background: transparent; color: #687470; cursor: pointer; }
.story-prompt-asset-picker > header button:hover { color: var(--jade); }
.story-prompt-asset-picker > label { min-width: 0; display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; margin: 7px 9px; padding: 0 7px; border: 1px solid var(--line); background: #0a1014; }
.story-prompt-asset-picker > label svg { width: 12px; color: #5d6966; }
.story-prompt-asset-picker > label input { width: 100%; height: 28px; border: 0; outline: 0; background: transparent; color: #c1cbc8; font-size: 9px; }
#story-prompt-preview-picker-list { min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding: 5px 8px 9px; scrollbar-gutter: stable; }
.story-prompt-picker-item { min-width: 0; min-height: 50px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: stretch; gap: 5px; padding: 4px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #788581; }
.story-prompt-picker-item:hover,.story-prompt-picker-item.is-selected { border-color: rgba(78,224,210,.22); background: #152125; }
.story-prompt-picker-preview { width: 42px; min-width: 42px; height: 42px; position: relative; align-self: center; overflow: hidden; padding: 0; border: 0; background: #060b0e; cursor: zoom-in; }
.story-prompt-picker-preview img,.story-prompt-picker-preview video,.story-prompt-picker-preview .local-media-placeholder { width: 100%; height: 100%; display: block; object-fit: cover; }
.story-prompt-picker-preview > svg { width: 12px; height: 12px; position: absolute; right: 3px; bottom: 3px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: rgba(3,8,10,.8); color: #e2ece9; }
.story-prompt-picker-select { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 22px; align-items: center; gap: 7px; padding: 0 3px 0 5px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.story-prompt-picker-select > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.story-prompt-picker-item strong { overflow: hidden; color: #b6c2be; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.story-prompt-picker-item small { overflow: hidden; color: #5f6b68; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.story-prompt-picker-select > svg { width: 12px; color: var(--jade); }
.story-prompt-picker-empty { min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #5b6865; font-size: 8px; }
.story-prompt-picker-empty svg { width: 18px; }
.story-prompt-preview-footer { min-width: 0; display: grid; grid-template-rows: 40px 40px; align-content: center; gap: 6px; padding: 7px 16px; border-top: 1px solid var(--line); background: #0b1115; }
.story-prompt-preview-settings,.story-prompt-preview-actions { min-width: 0; display: flex; align-items: center; gap: 8px; }
.story-prompt-preview-settings { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.story-prompt-preview-actions { width: 100%; justify-content: flex-end; }
.story-prompt-preview-settings label { height: 38px; display: grid; grid-template-columns: auto minmax(190px,1fr); align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--line); border-radius: 4px; background: #10171b; }
.story-prompt-preview-settings label span,.story-prompt-preview-quality > span { color: #596663; font-size: 7px; }
.story-prompt-preview-settings select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #b2bfbb; font-size: 9px; }
.story-prompt-preview-quality { height: 38px; display: flex; align-items: center; gap: 3px; padding: 0 5px 0 9px; border: 1px solid var(--line); border-radius: 4px; background: #10171b; }
.story-prompt-preview-quality > span { margin-right: 3px; }
.story-prompt-preview-quality button { height: 27px; padding: 0 7px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #697672; font-size: 8px; cursor: pointer; }
.story-prompt-preview-quality button.is-active { border-color: rgba(78,224,210,.28); background: #173034; color: var(--jade); }
.story-prompt-preview-ratio { height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; color: #687571; }
.story-prompt-preview-ratio svg { width: 13px; color: var(--gold); }
.story-prompt-preview-ratio b { color: #aab6b2; font: 9px Consolas,monospace; font-weight: 500; }
.story-prompt-preview-actions > span { min-width: 0; max-width: none; flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; color: #62706c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.story-prompt-preview-actions > span i { width: 6px; height: 6px; flex: 0 0 auto; background: #71807b; }
.story-prompt-preview-actions > span.is-dirty i { background: var(--gold); box-shadow: 0 0 8px rgba(205,158,76,.35); }
.story-prompt-preview-actions > span.is-saved i { background: var(--success); }
.story-prompt-preview-actions > span.is-warning { color: #e6aa6f; }
.story-prompt-preview-actions > span.is-warning i { background: #e67e86; }
.story-prompt-preview-actions button { height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid rgba(78,224,210,.28); border-radius: 4px; background: #112326; color: var(--jade); font-size: 9px; cursor: pointer; white-space: nowrap; }
.story-prompt-preview-actions button:hover { border-color: rgba(78,224,210,.6); background: #153033; }
.story-prompt-preview-actions button.is-quiet { width: 38px; justify-content: center; padding: 0; border-color: var(--line); background: #10171b; color: #778480; }
.story-prompt-preview-actions button.is-quiet span { display: none; }
.story-prompt-preview-actions button.is-primary { min-width: 112px; justify-content: center; border-color: var(--jade); background: var(--jade); color: #06100f; font-weight: 700; }
.story-prompt-preview-actions button:disabled { border-color: var(--line); background: #12191d; color: #4f5b58; cursor: not-allowed; }
.story-prompt-preview-actions button svg { width: 13px; }
.story-video-segment > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border-top: 1px solid rgba(170,211,207,.08); }
.story-video-segment > footer > span { overflow: hidden; color: #8c6f44; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.story-video-segment > footer > span.is-ready { color: var(--success); }
.story-video-segment > footer > button { height: 27px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid rgba(78,224,210,.32); border-radius: 4px; background: #112326; color: var(--jade); font-size: 7px; cursor: pointer; white-space: nowrap; }
.story-video-segment > footer > button:disabled { border-color: var(--line); background: #11181c; color: #4f5b59; cursor: not-allowed; }
.story-video-segment > footer > button svg { width: 10px; }
.story-video-progress { height: 2px; background: #172125; }
.story-video-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--jade), var(--gold)); transition: width .25s ease; }

.story-generation-queue { background: #090f13; }
.story-generation-queue > header { flex-wrap: wrap; height: auto; min-height: 44px; }
.story-generation-view { display: flex; align-self: stretch; gap: 3px; padding: 6px 0; }
.story-generation-view button { padding: 0 7px; }
.story-video-task-list { display: flex; flex-direction: column; gap: 7px; }
.story-video-task { min-width: 0; min-height: 68px; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #0d1519; }
.story-video-task > button, .story-video-task-icon { width: 76px; height: 68px; position: relative; display: grid; place-items: center; overflow: hidden; border: 0; border-right: 1px solid var(--line); background: #050a0d; color: #677470; cursor: pointer; }
.story-video-task > button video { width: 100%; height: 100%; object-fit: cover; }
.story-video-task > button > span { width: 24px; height: 24px; position: absolute; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(5,10,13,.72); color: #fff; }
.story-video-task > button svg, .story-video-task-icon svg { width: 12px; }
.story-video-task.is-running .story-video-task-icon svg { animation: storySpin 1.1s linear infinite; }
.story-video-task.is-failed .story-video-task-icon { color: #ff858c; }
.story-video-task.is-review-required .story-video-task-icon { color: var(--gold); }
.story-video-progress.is-review-required { border-color: rgba(216,179,106,.28); color: var(--gold); }
.story-video-task > span { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.story-video-task > span strong, .story-video-task > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-video-task > span strong { color: #adbab6; font-size: 8px; }
.story-video-task > span small { color: #5d6a67; font-size: 7px; }
.story-video-task-progress { height: 2px; overflow: hidden; background: #172125; }
.story-video-task-progress i { display: block; height: 100%; background: var(--jade); }
.story-video-task > div:last-child { display: flex; gap: 5px; padding-right: 7px; }
.story-video-task > div:last-child button, .story-video-task > div:last-child a { min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 7px; border: 1px solid var(--line); border-radius: 4px; background: #10171b; color: #788682; font-size: 7px; text-decoration: none; cursor: pointer; }
.story-video-task > div:last-child button:hover, .story-video-task > div:last-child a:hover { color: var(--jade); }
.story-video-task > div:last-child svg { width: 11px; }
.story-small-empty { min-height: 170px; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 18px; color: #596663; text-align: center; }
.story-small-empty svg { width: 24px; height: 24px; margin-bottom: 10px; }
.story-small-empty strong { color: #899691; font-size: 9px; }
.story-small-empty span { margin-top: 6px; font-size: 7px; line-height: 1.6; }
.story-generation-settings { min-height:0; padding: 20px; overflow-y:auto; overscroll-behavior-y:auto; scrollbar-gutter:stable; border-right: 1px solid var(--line); background: #090e12; }
.story-generation-settings h4 { margin: 0 0 16px; color: #c5d0cd; font-size: 12px; }
.story-setting-row { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); }
.story-setting-row > span { display: flex; align-items: center; gap: 8px; color: #7a8784; }
.story-setting-row svg { width: 14px; color: var(--gold); }
.story-setting-row b { font-size: 8px; font-weight: 500; }
.story-setting-row strong { color: #aab7b3; font-size: 9px; }
.story-setting-block { padding: 13px 0; border-top: 1px solid var(--line); }
.story-setting-block > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 9px; }
.story-setting-block button { padding: 0 5px; }
.story-stage-actions-final { grid-template-columns: minmax(180px, 1fr) auto minmax(240px, 1fr); }
.story-generate-locked { min-width: 240px; }

@keyframes storyStageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes storySpin { to { transform: rotate(360deg); } }
@keyframes storyHistoryIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 1420px) {
  .story-studio-backdrop { padding: 10px; }
  .story-studio-shell { grid-template-rows: 62px 70px 3px minmax(0, 1fr); }
  .story-studio-header { padding: 0 16px; }
  .story-stepper { padding: 0 6px; }
  .story-stepper button { grid-template-columns: 21px 1fr; gap: 5px; padding: 0 8px; }
  .story-stepper small { display: none; }
  .story-stage { gap: 14px; padding: 18px 24px 15px; }
  .story-stage-head h3 { font-size: 20px; }
  .story-source-workspace { grid-template-columns: minmax(220px, 25%) minmax(0, 1fr); }
  .story-source-guide-copy { padding: 12px 15px 10px; }
  .story-source-guide ol { padding: 0 15px 12px; }
  .story-script-studio { grid-template-columns: 225px minmax(0, 1fr); }
  .story-script-brief { padding: 14px; }
  .story-director-body.has-final { grid-template-columns: minmax(340px, 1fr) 360px; }
  .story-script-chat-log { padding: 15px 18px; }
  .story-director-composer footer b { max-width: 220px; }
  .story-character-media-bar { grid-template-columns: auto minmax(420px, 1fr); }
  .story-character-media-bar > p { display: none; }
  .story-asset-kind-bar { grid-template-columns: auto minmax(260px, 1fr) auto; }
}

@media (max-height: 820px) {
  .story-studio-shell { grid-template-rows: 58px 64px 3px minmax(0, 1fr); }
  .story-studio-mark { width: 32px; height: 32px; }
  .story-stage { gap: 12px; padding-top: 15px; padding-bottom: 12px; }
  .story-stage-head h3 { margin-top: 5px; font-size: 18px; }
  .story-stage-head p { margin-top: 4px; }
  .story-source-editor { gap: 8px; padding: 12px; }
  .story-source-types button { min-height: 47px; }
  .story-source-guide-copy p { display: none; }
  .story-source-guide ol { gap: 5px; }
  .story-collab-steps { margin-top: 10px; }
  .story-collab-steps li { min-height: 44px; }
  .story-script-chat-log { padding-top: 12px; padding-bottom: 12px; }
  .story-script-message { width: min(90%, 760px); }
  .story-script-message.is-collapsible:not(.is-expanded) .story-script-message-text { max-height: 210px; }
  .story-director-composer textarea { min-height: 48px; }
  .story-stage-actions { flex-basis: 42px; padding-top: 9px; }
  .story-back-button, .story-next-button { min-height: 36px; }
  .story-assembly-guide { flex-basis: 66px; }
}

html[data-theme="day"] .story-studio-backdrop { background: rgba(224, 231, 228, .9); }
html[data-theme="day"] .story-studio-shell { border-color: rgba(44, 86, 79, .22); background: #f8faf9; box-shadow: 0 38px 110px rgba(35, 67, 62, .28); }
html[data-theme="day"] .story-history-scrim { background: rgba(45, 59, 55, .34); }
html[data-theme="day"] .story-history-panel,
html[data-theme="day"] .story-history-panel > header,
html[data-theme="day"] .story-history-lead { background: #f7faf8; }
html[data-theme="day"] .story-history-panel { border-left-color: rgba(20, 143, 133, .28); box-shadow: -28px 0 70px rgba(36, 67, 61, .2); }
html[data-theme="day"] .story-history-panel > header strong,
html[data-theme="day"] .story-history-copy strong { color: #253632; }
html[data-theme="day"] .story-history-lead button { background: #e3f2ef; color: #0c7b72; }
html[data-theme="day"] .story-history-item { background: #fff; }
html[data-theme="day"] .story-history-open:hover { background: #f1f7f5; }
html[data-theme="day"] .story-studio-header,
html[data-theme="day"] .story-stepper,
html[data-theme="day"] .story-stage { background: #f7f9f8; }
html[data-theme="day"] .story-studio-mark,
html[data-theme="day"] .story-stage-state,
html[data-theme="day"] .story-head-button,
html[data-theme="day"] .story-source-workspace,
html[data-theme="day"] .story-script-studio,
html[data-theme="day"] .story-source-editor,
html[data-theme="day"] .story-title-field,
html[data-theme="day"] .story-source-input-wrap,
html[data-theme="day"] .story-split-workspace,
html[data-theme="day"] .story-output-workspace,
html[data-theme="day"] .story-character-workspace,
html[data-theme="day"] .story-character-canvas,
html[data-theme="day"] .story-character-media-bar,
html[data-theme="day"] .story-asset-subhead,
html[data-theme="day"] .story-scene-workspace,
html[data-theme="day"] .story-scene-canvas,
html[data-theme="day"] .story-prompt-toolbar,
html[data-theme="day"] .story-prompt-workspace,
html[data-theme="day"] .story-prompt-editor,
html[data-theme="day"] .story-assembly-table,
html[data-theme="day"] .story-assembly-guide,
html[data-theme="day"] .story-generation-workspace,
html[data-theme="day"] .story-generation-queue,
html[data-theme="day"] .story-director-room,
html[data-theme="day"] .story-final-script { background: #fff; }
html[data-theme="day"] .story-source-guide,
html[data-theme="day"] .story-source-snapshot,
html[data-theme="day"] .story-section-rail,
html[data-theme="day"] .story-segment-list,
html[data-theme="day"] .story-generation-settings { background: #f1f5f3; }
html[data-theme="day"] .story-director-toolbar,
html[data-theme="day"] .story-director-composer,
html[data-theme="day"] .story-script-message-text,
html[data-theme="day"] .story-thinking-dots { background: #f3f7f5; }
html[data-theme="day"] .story-script-message.is-user .story-script-message-text { background: #fff8ec; color: #4b4436; }
html[data-theme="day"] .story-script-message-text,
html[data-theme="day"] .story-director-composer textarea,
html[data-theme="day"] .story-final-script textarea { color: #2a3935; }
html[data-theme="day"] .story-script-welcome > strong,
html[data-theme="day"] .story-director-identity strong,
html[data-theme="day"] .story-final-script > header strong { color: #263632; }
html[data-theme="day"] .story-script-welcome > span,
html[data-theme="day"] .story-script-message > header > span { background: #e5f1ee; }
html[data-theme="day"] .story-collab-steps li.is-current { background: #e3f1ee; color: #263632; }
html[data-theme="day"] .story-director-toolbar button,
html[data-theme="day"] .story-brief-label button,
html[data-theme="day"] .story-message-toggle,
html[data-theme="day"] .story-final-script > header button { background: #f0f4f2; }
html[data-theme="day"] .story-director-toolbar .story-finalize-button { background: #e1f0ed; color: #0e756e; }
html[data-theme="day"] .story-director-toolbar button:disabled,
html[data-theme="day"] .story-director-composer footer button:disabled { background: #e8edeb; color: #9aa49f; }
html[data-theme="day"] .story-stepper button:hover { background: #edf3f1; color: #34443f; }
html[data-theme="day"] .story-stepper button.is-active { background: #e2f0ed; color: #172522; }
html[data-theme="day"] .story-source-types button,
html[data-theme="day"] .story-source-input-head label,
html[data-theme="day"] .story-source-input-head button,
html[data-theme="day"] .story-optional-button,
html[data-theme="day"] .story-prompt-toolbar button,
html[data-theme="day"] .story-setting-block button,
html[data-theme="day"] .story-back-button { background: #f0f4f2; color: #65746f; }
html[data-theme="day"] .story-character-media-bar button { background: #f0f4f2; color: #65746f; }
html[data-theme="day"] .story-prop-checkbox { background: #f0f4f2; }
html[data-theme="day"] .story-source-types button.is-active,
html[data-theme="day"] .story-prompt-toolbar button.is-active,
html[data-theme="day"] .story-setting-block button.is-active { background: #e1f0ed; color: #0e756e; }
html[data-theme="day"] .story-character-media-bar button.is-active { background: #e1f0ed; color: #0e756e; }
html[data-theme="day"] .story-studio-brand h2,
html[data-theme="day"] .story-stage-head h3,
html[data-theme="day"] .story-source-guide-copy strong,
html[data-theme="day"] .story-source-snapshot h4,
html[data-theme="day"] .story-empty-output strong,
html[data-theme="day"] .story-canvas-note strong,
html[data-theme="day"] .story-generation-settings h4 { color: #24342f; }
html[data-theme="day"] .story-title-field input,
html[data-theme="day"] .story-source-input-wrap textarea { color: #24342f; }
html[data-theme="day"] .story-source-input-wrap textarea::placeholder,
html[data-theme="day"] .story-title-field input::placeholder { color: #8a9793; }
html[data-theme="day"] .story-empty-icon { background: #e5f1ee; }
html[data-theme="day"] .story-character-placeholders > span { background: #f7f9f8; }
html[data-theme="day"] .story-segment-card { background: #f7f9f8; color: #65746f; }
html[data-theme="day"] .story-segment-card.is-active { background: #e2f0ed; }
html[data-theme="day"] .story-segment-card strong { color: #2d3d38; }
html[data-theme="day"] .story-assembly-table > header { background: #f0f4f2; }
html[data-theme="day"] .story-next-button:disabled { background: #e4e9e7; color: #949f9b; }
html[data-theme="day"] .story-toolbar-run,
html[data-theme="day"] .story-result-editor footer button { background: #e5f1ee; color: #0e756e; }
html[data-theme="day"] .story-toolbar-run:disabled { background: #edf1ef; color: #9aa49f; }
html[data-theme="day"] .story-result-editor { background: #fff; }
html[data-theme="day"] .story-result-editor textarea { color: #24342f; }
html[data-theme="day"] .story-final-script-pane,
html[data-theme="day"] .story-production-script { background: #fff; }
html[data-theme="day"] .story-production-script textarea { color: #24342f; }
html[data-theme="day"] .story-final-script-pane > header button { background: #f0f4f2; }
html[data-theme="day"] .story-model-progress > span { background: #e5f1ee; }
html[data-theme="day"] .story-model-progress strong { color: #2c3c37; }
html[data-theme="day"] .story-model-error { background: #fff2f2; }
html[data-theme="day"] .story-item-tabs,
html[data-theme="day"] .story-generation-assets,
html[data-theme="day"] .story-generation-queue { background: #f1f5f3; }
html[data-theme="day"] .story-item-tab,
html[data-theme="day"] .story-image-card,
html[data-theme="day"] .story-generation-asset,
html[data-theme="day"] .story-video-segment,
html[data-theme="day"] .story-video-task { background: #f7f9f8; }
html[data-theme="day"] .story-item-tab.is-active,
html[data-theme="day"] .story-generation-asset.is-selected,
html[data-theme="day"] .story-video-segment.is-active { background: #e4f1ee; }
html[data-theme="day"] .story-image-studio,
html[data-theme="day"] .story-image-card-body { background: #fff; }
html[data-theme="day"] .story-image-card-media,
html[data-theme="day"] .story-image-preview,
html[data-theme="day"] .story-video-task > button,
html[data-theme="day"] .story-video-task-icon { background: #eef3f1; }
html[data-theme="day"] .story-item-tab strong,
html[data-theme="day"] .story-image-card-body > header strong,
html[data-theme="day"] .story-image-prompt p,
html[data-theme="day"] .story-video-segment > header strong,
html[data-theme="day"] .story-video-task > span strong { color: #293a35; }
html[data-theme="day"] .story-generation-toolbar,
html[data-theme="day"] .story-generation-assets > header,
html[data-theme="day"] .story-generation-segments > header,
html[data-theme="day"] .story-generation-queue > header { background: #f3f7f5; }
html[data-theme="day"] .story-generation-toolbar select,
html[data-theme="day"] .story-asset-filters button.is-active,
html[data-theme="day"] .story-generation-view button.is-active { background: #e3f0ed; color: #0e756e; }
html[data-theme="day"] .story-prompt-preview-backdrop { background: rgba(224,231,228,.9); }
html[data-theme="day"] .story-prompt-preview-shell,
html[data-theme="day"] .story-prompt-preview-header,
html[data-theme="day"] .story-prompt-preview-assets,
html[data-theme="day"] .story-prompt-preview-text,
html[data-theme="day"] .story-prompt-preview-footer { background: #f8faf9; }
html[data-theme="day"] .story-prompt-preview-header h2,
html[data-theme="day"] .story-prompt-preview-editor { color: #263632; }
html[data-theme="day"] .story-prompt-preview-editor:empty::before { color: #8c9a96; }
html[data-theme="day"] .story-prompt-preview-editor:focus { box-shadow: inset 0 0 0 1px rgba(14,117,110,.22); }
html[data-theme="day"] .story-prompt-preview-asset,
html[data-theme="day"] .story-prompt-preview-add-card,
html[data-theme="day"] .story-prompt-preview-settings label,
html[data-theme="day"] .story-prompt-preview-quality,
html[data-theme="day"] .story-prompt-preview-ratio { background: #f1f5f3; }
html[data-theme="day"] .story-prompt-preview-media { background: #e8eeeb; color: #31433e; }
html[data-theme="day"] .story-prompt-preview-asset strong { color: #30413c; }
html[data-theme="day"] #story-prompt-preview-add-asset,
html[data-theme="day"] .story-prompt-preview-text > header button { border-color: #d4e2de; background: #e3f0ed; color: #0e756e; }
html[data-theme="day"] .story-prompt-preview-settings select,
html[data-theme="day"] .story-prompt-preview-ratio b { color: #30413c; }
html[data-theme="day"] .story-prompt-mention { border-color: rgba(14,117,110,.24); background: #dff0ec; color: #135f5a; }
html[data-theme="day"] .story-prompt-asset-picker { border-color: rgba(14,117,110,.26); background: #fff; box-shadow: 0 20px 58px rgba(43,65,60,.2); }
html[data-theme="day"] .story-prompt-asset-picker > label { background: #f3f7f5; }
html[data-theme="day"] .story-prompt-asset-picker > label input { color: #30413c; }
html[data-theme="day"] .story-prompt-picker-item:hover,
html[data-theme="day"] .story-prompt-picker-item.is-selected { background: #e5f1ee; }
html[data-theme="day"] .story-prompt-picker-item strong { color: #30413c; }
html[data-theme="day"] .story-prompt-preview-quality button.is-active { border-color: rgba(14,117,110,.28); background: #dcefeb; color: #0e756e; }
html[data-theme="day"] .story-prompt-preview-actions button { background: #e3f0ed; color: #0e756e; }
html[data-theme="day"] .story-prompt-preview-actions button.is-primary { border-color: #148f86; background: #148f86; color: #fff; }
html[data-theme="day"] .story-prompt-preview-actions button:disabled { border-color: #d8e0dd; background: #edf1ef; color: #9aa6a2; }

/* Desktop scroll reliability: every bounded workspace owns a reachable scroll surface. */
body.modal-open { overflow: hidden; }
.page-shell,
.settings-page { overflow: visible; }
.home-popover,
.dock-popover { max-height: calc(100dvh - var(--signal) - 52px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.preview-caption h3,
.bjd-script-editor textarea,
.bjd-character-prompt-content,
.bjd-character-chat-compose textarea,
.story-script-chat-log { scrollbar-gutter: stable; }
.story-assembly-table > header,
.story-assembly-empty { min-width: 760px; }

@media (max-height: 820px) and (min-width: 901px) {
  .brand-mark { width: 46px; height: 46px; margin: 10px 0 12px; }
  .rail-nav { gap: 4px; }
  .rail-item { height: 54px; gap: 5px; }
  .rail-bottom { gap: 6px; padding-bottom: 8px; }
  .credit-button { min-height: 50px; }
}

@media (max-width: 1420px) and (min-width: 901px) {
  .story-character-workspace, .story-scene-workspace { grid-template-columns: 190px minmax(0, 1fr); }
  .story-image-card { grid-template-columns: minmax(230px, 38%) minmax(300px, 1fr); }
  .story-generation-workspace { grid-template-columns: 190px minmax(360px, 1fr) minmax(270px, 32%); }
  .story-asset-library { grid-template-columns: 1fr; }
  .story-generation-toolbar { grid-template-columns: minmax(220px, 1fr) auto minmax(150px, 1fr); }
  .story-prompt-preview-backdrop { padding: 12px; }
  .story-prompt-preview-shell { width: min(1180px, 98vw); height: min(850px, 96vh); }
  .story-prompt-preview-footer { gap: 8px; padding: 0 10px; }
  .story-prompt-preview-settings,
  .story-prompt-preview-actions { gap: 5px; }
  .story-prompt-preview-settings label { grid-template-columns: auto minmax(170px,1fr); padding: 0 7px; }
  .story-prompt-preview-quality { padding-left: 7px; }
  .story-prompt-preview-quality button { padding: 0 5px; }
  .story-prompt-preview-ratio { padding: 0 7px; }
  .story-prompt-preview-actions > span { display: inline-flex; }
  .story-prompt-preview-actions button { padding: 0 9px; }
  .story-prompt-preview-actions button.is-primary { min-width: 100px; }
}

/* Buming Seedance video provider and material limits */
.popover-option .model-option-facts {
  margin-top: 4px;
  color: var(--gold);
  font: 8px/1.45 Consolas, monospace;
  white-space: normal;
}
.video-model-family { display: grid; gap: 6px; }
.video-model-family + .video-model-family { margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--line); }
.video-model-family-title { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px; }
.video-model-family-title > span { display: flex; align-items: baseline; gap: 9px; }
.video-model-family-title strong { color: var(--jade); font: 600 12px/1 Consolas, monospace; }
.video-model-family-title small { color: #65726f; font-size: 8px; }
.video-model-family-title em { color: #66736f; font: normal 8px Consolas, monospace; }
.video-model-family-options { display: grid; gap: 4px; }
.video-model-brief {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(78,224,210,.2);
  border-radius: 5px;
  background: rgba(78,224,210,.045);
}
.video-model-brief header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.video-model-brief header > span { min-width: 0; display: grid; gap: 4px; }
.video-model-brief header strong { color: var(--jade); font-size: 11px; }
.video-model-brief header small { overflow: hidden; color: #788784; font: 8px Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.video-model-brief header svg { width: 17px; color: var(--success); }
.video-model-brief p,
.video-model-brief > small { margin: 0; color: #899592; font-size: 9px; line-height: 1.55; }
.video-model-brief > small { color: #667370; }
.video-model-brief.is-warning { border-color: rgba(255,111,117,.3); background: rgba(255,111,117,.05); }
.video-model-brief.is-warning header strong,
.video-model-brief.is-warning header svg { color: var(--danger); }
.dock-duration-control { width: 100%; }
.dock-duration-control input { min-width: 0; width: 100%; }

.settings-index > button { margin-bottom: 8px; border-color: transparent; background: transparent; color: #687572; cursor: pointer; transition: .2s var(--ease); }
.settings-index > button:hover { border-color: rgba(78,224,210,.18); background: #0d1519; color: #b6c4c0; }
.settings-index > button.is-active { border-color: rgba(78,224,210,.34); background: #10191d; color: var(--jade); box-shadow: inset 3px 0 0 var(--jade); }
.video-provider-panel { min-height: 620px; }
.video-provider-connection { display: grid; grid-template-columns: minmax(210px,.65fr) minmax(360px,1.35fr); gap: 14px 18px; align-items: end; margin-top: 28px; }
.video-provider-status { min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid rgba(216,179,106,.24); border-radius: 5px; background: #0c1317; }
.video-provider-status > i { width: 7px; height: 7px; flex: 0 0 auto; background: var(--gold); box-shadow: 0 0 14px rgba(216,179,106,.5); }
.video-provider-status > span { min-width: 0; display: grid; gap: 5px; }
.video-provider-status strong { color: #dce6e3; font-size: 11px; }
.video-provider-status small { overflow: hidden; color: #667370; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.video-provider-status.is-ready { border-color: rgba(78,211,157,.3); }
.video-provider-status.is-ready > i { background: var(--success); box-shadow: 0 0 16px rgba(78,211,157,.55); }
.video-provider-status.is-error { border-color: rgba(255,111,117,.3); }
.video-provider-status.is-error > i { background: var(--danger); }
.video-provider-shared-key { min-height: 72px; display: flex; align-items: center; gap: 13px; padding: 0 16px; border: 1px solid rgba(78,224,210,.18); border-radius: 5px; background: #0a1013; }
.video-provider-shared-key > svg { width: 20px; height: 20px; color: var(--jade); }
.video-provider-shared-key > span { display: grid; gap: 5px; }
.video-provider-shared-key strong { color: #dce6e3; font-size: 14px; }
.video-provider-shared-key small { color: #667370; font-size: 11px; line-height: 1.5; }
.video-provider-connection > p { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; margin: -2px 0 0; color: #64716e; font-size: 9px; }
.video-provider-connection > p svg { width: 14px; color: var(--success); }
.video-provider-catalog { margin-top: 24px; border-top: 1px solid var(--line); }
.video-provider-catalog > header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.video-provider-catalog > header span { display: grid; gap: 4px; }
.video-provider-catalog > header strong { color: #dbe5e2; font-size: 12px; }
.video-provider-catalog > header small { color: #65726f; font-size: 9px; }
.video-provider-catalog > header em { color: var(--gold); font: normal 9px Consolas, monospace; }
#video-provider-model-list { max-height: 470px; display: grid; gap: 7px; overflow-y: auto; overscroll-behavior: contain; padding-right: 5px; scrollbar-gutter: stable; }
.video-provider-family { display: grid; gap: 7px; }
.video-provider-family + .video-provider-family { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.video-provider-family > header { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 4px; }
.video-provider-family > header span { display: flex; align-items: baseline; gap: 10px; }
.video-provider-family > header strong { color: var(--jade); font: 600 14px/1 Consolas, monospace; }
.video-provider-family > header small { color: #65726f; font-size: 9px; }
.video-provider-family > header em { color: var(--gold); font: normal 9px Consolas, monospace; }
.video-provider-family > div { display: grid; gap: 7px; }
.video-provider-model-row { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(260px,1.2fr); gap: 5px 20px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 5px; background: #0a1013; }
.video-provider-model-row > header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.video-provider-model-row > header span { min-width: 0; display: grid; gap: 4px; }
.video-provider-model-row > header strong { overflow: hidden; color: #e4ece9; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.video-provider-model-row > header small { color: #596562; font: 8px Consolas, monospace; }
.video-provider-model-row > header b { flex: 0 0 auto; padding: 3px 6px; border: 1px solid rgba(78,224,210,.18); border-radius: 3px; color: var(--jade); font-size: 8px; font-weight: 500; }
.video-provider-model-row > p { min-width: 0; margin: 0; align-self: center; color: #76827f; font-size: 9px; line-height: 1.5; }
.video-provider-model-row > div { display: flex; flex-wrap: wrap; gap: 5px; }
.video-provider-model-row > div span { padding: 3px 6px; border: 1px solid rgba(185,215,211,.1); border-radius: 3px; color: #667370; font: 8px Consolas, monospace; }
.video-provider-model-row > footer { min-width: 0; display: grid; grid-template-columns: auto auto; gap: 4px 12px; align-items: center; }
.video-provider-model-row > footer strong { color: var(--gold); font-size: 9px; }
.video-provider-model-row > footer small { color: var(--jade); font: 8px Consolas, monospace; }
.video-provider-model-row > footer em { grid-column: 1 / -1; overflow: hidden; color: #667370; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.video-provider-footer { padding-top: 18px; border-top: 1px solid var(--line); }

.story-generation-toolbar .story-video-cost { min-width: 210px; }
.story-generation-toolbar .story-video-cost strong { color: var(--gold); }
#story-quality-options,
#story-prompt-quality-options { display: flex; align-items: center; gap: 5px; }
.story-prompt-preview-quality > div { display: flex; align-items: center; gap: 4px; }

html[data-theme="day"] .video-model-brief { border-color: #c9ded9; background: #edf6f3; }
html[data-theme="day"] .video-model-brief header small,
html[data-theme="day"] .video-model-brief p { color: #61746e; }
html[data-theme="day"] .settings-index > button:hover { background: #edf3f0; color: #31443f; }
html[data-theme="day"] .settings-index > button.is-active { border-color: #bddbd5; background: #e8f2ef; color: #0e756e; box-shadow: inset 3px 0 0 #148f86; }
html[data-theme="day"] .video-provider-status,
html[data-theme="day"] .video-provider-model-row,
html[data-theme="day"] .video-provider-shared-key { border-color: #d7e2df; background: #fff; }
html[data-theme="day"] .video-provider-status strong,
html[data-theme="day"] .video-provider-model-row > header strong,
html[data-theme="day"] .video-provider-catalog > header strong { color: #293a35; }
html[data-theme="day"] .video-provider-shared-key strong { color: #293a35; }
html[data-theme="day"] .video-provider-model-row > p,
html[data-theme="day"] .video-provider-model-row > footer em { color: #667872; }
html[data-theme="day"] .video-provider-model-row > div span { border-color: #d9e4e1; color: #5f716b; background: #f5f8f7; }
html[data-theme="day"] .video-model-family-title strong,
html[data-theme="day"] .video-provider-family > header strong { color: #0e756e; }

/* Desktop readability for an adult audience: clearer type without changing the visual hierarchy. */
body {
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}
button,
input,
textarea,
select {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
}
small { min-width: 0; font-size: 12px; line-height: 1.5; }
.signal-bar { font-size: 13px; font-weight: 500; }
.rail-item span { font-size: 13px; font-weight: 700; }
.credit-button span,
.task-section-label,
.result-prompt-toggle,
.result-status span,
.prompt-fold-toggle { font-size: 12px; font-weight: 600; }
.task-list-item strong,
.conversation-item strong,
.asset-card-body strong { font-size: 14px; font-weight: 700; }
.task-list-item small,
.conversation-item small,
.asset-card-body > span { font-size: 12px; }
.popover-option strong,
.reference-option strong,
.engine-card strong,
.skill-card-body strong { font-size: 14px; font-weight: 700; }
.popover-option small,
.reference-option small,
.video-model-brief p,
.video-model-brief > small { font-size: 12px; line-height: 1.55; }
.popover-option em,
.engine-mini em,
.video-model-family-title em { font-size: 11px; }
.skill-card-body > p,
.skill-modal-panel header p,
.settings-index > button small,
.llm-settings-title p { font-size: 13px; line-height: 1.6; }

/* Full-screen creative workspaces use a 12px metadata floor and 13-14px working text. */
.story-studio-shell :is(p, span, label, button, input, select),
.story-prompt-preview-shell :is(p, span, label, button, input, select),
.skill-modal-panel :is(p, span, label, button, input, select) {
  font-size: 13px;
}
.story-studio-shell :is(strong, b),
.story-prompt-preview-shell :is(strong, b),
.skill-modal-panel :is(strong, b) {
  font-size: 14px;
  font-weight: 700;
}
.story-studio-shell :is(small, em),
.story-prompt-preview-shell :is(small, em),
.skill-modal-panel :is(small, em) {
  font-size: 12px;
  line-height: 1.5;
}
.story-studio-shell textarea,
.story-prompt-preview-shell textarea,
.skill-modal-panel textarea,
.story-prompt-preview-editor {
  font-size: 14px;
  line-height: 1.75;
}
.story-studio-brand p,
.story-stage-head > div:first-child > span,
.skill-panel-badge { font-size: 11px; }
.story-studio-brand h2 { font-size: 20px; font-weight: 800; }
.story-stage-head h3 { font-size: 25px; font-weight: 800; }
.story-stepper span { font-size: 13px; font-weight: 700; }
.story-stepper small { font-size: 11px; font-weight: 500; }
.story-video-segment > header strong,
.story-video-task > span strong,
.story-item-tab strong,
.story-image-studio-head strong { font-size: 14px; }
.story-video-segment > header small,
.story-video-task > span small,
.story-video-segment > footer > span,
.story-video-prompt p,
.story-video-selected-assets b { font-size: 12px; }
.story-video-segment > footer > button,
.story-video-task > div:last-child button,
.story-video-task > div:last-child a { min-height: 32px; font-size: 12px; font-weight: 700; }

.video-provider-status strong,
.video-model-brief header strong,
.video-provider-model-row > header strong { font-size: 14px; font-weight: 700; }
.video-provider-status small,
.video-provider-connection > p,
.video-provider-catalog > header small,
.video-provider-family > header small,
.video-provider-model-row > p,
.video-provider-model-row > footer strong { font-size: 12px; }
.video-provider-model-row > header small,
.video-provider-model-row > header b,
.video-provider-model-row > div span,
.video-provider-model-row > footer small,
.video-provider-model-row > footer em { font-size: 11px; line-height: 1.5; }

/* Unified live progress and failure feedback for every creation surface. */
.live-task-progress {
  width: 100%;
  display: grid;
  gap: 5px;
  margin: 8px 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
}
.live-task-progress-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #a8b7b3;
  font-size: 12px;
  line-height: 1.4;
}
.live-task-progress-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-task-progress-copy strong {
  flex: 0 0 auto;
  color: #74e0d6;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.live-task-progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: 2px;
  background: #19272a;
}
.live-task-progress-track i {
  position: relative;
  display: block;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(90deg, #25a99e, #65ded3 64%, #d5bd72);
  transition: width .35s ease;
}
.live-task-progress.is-running .live-task-progress-track i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(-120%);
  animation: liveProgressSweep 1.35s linear infinite;
}
.live-task-progress.is-complete { border-color: transparent; }
.live-task-progress.is-complete .live-task-progress-track i { background: #58cf9a; }
.live-task-progress.is-complete .live-task-progress-copy strong { color: #71dfa9; }
.live-task-progress.is-failed { padding: 9px 11px; border: 1px solid rgba(255, 112, 122, .3); border-radius: 4px; background: rgba(39, 16, 20, .72); }
.live-task-progress.is-failed .live-task-progress-track i { background: #e86570; }
.live-task-progress.is-failed .live-task-progress-copy strong { color: #ff9da4; }
.live-task-progress.is-review { padding: 9px 11px; border: 1px solid rgba(216,179,106,.34); border-radius: 4px; background: rgba(35,28,16,.72); }
.live-task-progress.is-review .live-task-progress-copy strong { color: var(--gold); }
.live-task-progress.is-review > p { color: #d8c28a; }
.live-task-progress > p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding-top: 2px;
  color: #f1b2b7;
  font-size: 13px;
  line-height: 1.65;
}
.live-task-progress > p svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; }
.result-live-progress { max-width: 100%; }
.live-task-progress.result-status.is-complete { display: grid; }
@keyframes liveProgressSweep { to { transform: translateX(250%); } }

/* Video must remain fully visible in cards, history, skills and previews. */
.asset-card-media video,
.dream-tile video,
.story-video-task > button video,
.result-media video {
  object-fit: contain !important;
  object-position: center;
  background: #030608;
}
.asset-video-status,
.dream-video-status {
  position: absolute;
  left: 9px;
  bottom: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid rgba(103, 224, 211, .22);
  border-radius: 3px;
  background: rgba(4, 10, 12, .84);
  color: #b9cbc7;
  font-size: 11px;
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.asset-video-status i,
.dream-video-status i,
.preview-video-status i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: #58d9c9;
  box-shadow: 0 0 10px rgba(88, 217, 201, .6);
}
.asset-video-status strong { color: #67e0d2; font-variant-numeric: tabular-nums; }
.dream-video-status { top: 10px; bottom: auto; }

.preview-video-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(12px, 1.5vw, 24px);
  background: #020405;
}
.preview-video-stage video {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #020405;
}
.preview-video-status {
  position: absolute;
  left: clamp(18px, 2vw, 32px);
  bottom: clamp(22px, 2vw, 34px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(109, 226, 214, .25);
  border-radius: 4px;
  background: rgba(3, 9, 11, .82);
  color: #c2cfcc;
  font-size: 12px;
  backdrop-filter: blur(14px);
  pointer-events: none;
}
.preview-video-status strong { color: #6be0d4; font-size: 13px; font-variant-numeric: tabular-nums; }
.preview-video-fullscreen {
  position: absolute;
  top: clamp(18px, 2vw, 30px);
  left: clamp(18px, 2vw, 30px);
  z-index: 4;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px;
  background: rgba(3, 8, 10, .82);
  color: #dce9e6;
  cursor: pointer;
  backdrop-filter: blur(12px);
}
.preview-video-fullscreen:hover { border-color: rgba(95, 220, 207, .5); color: #66ded1; }
.preview-video-fullscreen svg { width: 18px; height: 18px; }
.preview-video-stage:fullscreen { padding: 0; background: #000; }
.preview-video-stage:fullscreen video,
.preview-video-stage video:fullscreen { width: 100vw; height: 100vh; object-fit: contain; background: #000; }

/* Story pipeline and BJD use the same readable progress treatment. */
.story-video-progress {
  position: relative;
  height: auto;
  min-height: 45px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 11px 15px;
  border-top: 1px solid var(--line);
  background: #0a1216;
  color: #84928e;
  font-size: 12px;
}
.story-video-progress > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-video-progress > span,
.story-video-progress > strong { position: relative; z-index: 2; }
.story-video-progress > strong { color: #63d9cd; font-size: 13px; font-variant-numeric: tabular-nums; }
.story-video-progress > i {
  position: absolute;
  left: 11px;
  bottom: 7px;
  z-index: 1;
  display: block;
  max-width: calc(100% - 22px);
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #25a99e, #64dbd0, #d2b768);
  transition: width .3s ease;
}
.story-video-progress::after {
  content: "";
  position: absolute;
  right: 11px;
  bottom: 7px;
  left: 11px;
  height: 5px;
  z-index: 0;
  border-radius: 2px;
  background: #182427;
}
.story-video-progress.is-failed { color: #ecadb2; background: rgba(43, 17, 21, .7); }
.story-video-progress.is-failed > strong { color: #ff9ca4; }
.story-video-progress.is-failed > i { background: #e76470; }
.story-video-task-progress-copy { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.story-video-task-progress-copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-video-task-progress-copy b { color: #62d9cd; font-size: 12px; font-variant-numeric: tabular-nums; }
.story-video-task.is-failed .story-video-task-progress-copy b { color: #ff929b; }
.story-video-task-progress { height: 5px; border-radius: 2px; background: #182427; }
.story-video-task-progress i { border-radius: inherit; background: linear-gradient(90deg, #26a99e, #63dbcf); transition: width .3s ease; }
.story-video-task.is-failed .story-video-task-progress i { background: #e76470; }

.bjd-task-copy { min-width: 0; }
.bjd-task-copy > b {
  align-self: flex-end;
  color: #65dace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.bjd-task-track,
.bjd-character-mini-progress {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 2px;
  background: #182427;
}
.bjd-task-track i,
.bjd-character-mini-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #26aa9f, #63dbcf, #d1b96d);
  transition: width .3s ease;
}
.bjd-character-mini-progress { display: grid; grid-template-columns: minmax(0,1fr) auto; height: auto; overflow: visible; background: transparent; gap: 8px; color: #63d9cd; font-size: 12px; }
.bjd-character-mini-progress > span { height: 6px; overflow: hidden; border-radius: 2px; background: #182427; }
.bjd-character-mini-progress > b { font-variant-numeric: tabular-nums; }

html[data-theme="day"] .live-task-progress,
html[data-theme="day"] .story-video-progress { border-color: #c7dad5; background: #f3f8f6; }
html[data-theme="day"] .live-task-progress:not(.is-failed) { border-color: transparent; background: transparent; }
html[data-theme="day"] .live-task-progress-copy,
html[data-theme="day"] .story-video-progress { color: #526760; }
html[data-theme="day"] .live-task-progress-track,
html[data-theme="day"] .story-video-task-progress,
html[data-theme="day"] .bjd-task-track,
html[data-theme="day"] .bjd-character-mini-progress > span { background: #dce8e4; }
html[data-theme="day"] .live-task-progress.is-failed,
html[data-theme="day"] .story-video-progress.is-failed { border-color: #e7bdc0; background: #fff3f3; }
html[data-theme="day"] .live-task-progress.is-review,
html[data-theme="day"] .story-video-progress.is-review-required { border-color: #dec98f; background: #fff9e8; }
html[data-theme="day"] .live-task-progress.is-review > p { color: #7f6727; }
html[data-theme="day"] .live-task-progress > p { color: #a64c55; }
html[data-theme="day"] .preview-video-stage,
html[data-theme="day"] .preview-video-stage video,
html[data-theme="day"] .asset-card-media video,
html[data-theme="day"] .dream-tile video,
html[data-theme="day"] .story-video-task > button video { background: #111617; }

@media (max-width: 1180px) {
  .preview-modal-content { grid-template-columns: minmax(0, 1fr) 340px; }
  .preview-video-status { max-width: calc(100% - 110px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .live-task-progress.is-running .live-task-progress-track i::after { animation: none; }
}

.story-asset-head-actions { min-width: 0; display: flex; align-items: center; gap: 6px; }
.story-asset-head-actions > b { color: #788580; font: 11px Consolas, monospace; font-weight: 400; }
.story-asset-head-actions > button {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(78,224,210,.28);
  border-radius: 4px;
  background: #112326;
  color: var(--jade);
  font-size: 11px;
  cursor: pointer;
}
.story-asset-head-actions > button:disabled { border-color: var(--line); color: #586461; cursor: wait; }
.story-asset-head-actions > button svg { width: 12px; height: 12px; }
.story-library-asset-card { position: relative; min-width: 0; }
.story-library-asset-card > .story-generation-asset { width: 100%; }
.story-library-preview {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 3px;
  background: rgba(7,12,14,.88);
  color: #d8e4e0;
  cursor: zoom-in;
  opacity: .88;
  transition: .18s var(--ease);
}
.story-library-preview:hover,
.story-library-preview:focus-visible { border-color: rgba(78,224,210,.56); color: var(--jade); opacity: 1; }
.story-library-preview svg { width: 12px; height: 12px; }
.story-local-asset-card > [data-story-local-asset-remove] {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 3;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px;
  background: rgba(7,12,14,.86);
  color: #a8b4b0;
  cursor: pointer;
}
.story-local-asset-card > [data-story-local-asset-remove]:hover { border-color: rgba(255,117,126,.48); color: #ff939b; }
.story-local-asset-card > [data-story-local-asset-remove] svg { width: 12px; height: 12px; }
html[data-theme="day"] .story-asset-head-actions > button { background: #e6f1ee; color: #147d75; }
html[data-theme="day"] .story-local-asset-card > [data-story-local-asset-remove] { background: rgba(250,252,251,.92); color: #65736e; }
html[data-theme="day"] .story-library-preview { border-color: #cadbd6; background: rgba(250,252,251,.94); color: #547069; }
html[data-theme="day"] .preview-audio-stage { border-color: rgba(14,117,110,.22); background: radial-gradient(circle at 15% 20%,rgba(14,117,110,.1),transparent 36%),#f4f8f6; box-shadow: 0 30px 90px rgba(38,73,66,.16); }
html[data-theme="day"] .preview-audio-symbol { border-color: rgba(14,117,110,.3); background: #e4f1ee; color: #0e756e; }
html[data-theme="day"] .preview-audio-stage strong { color: #263a35; }
html[data-theme="day"] .preview-audio-stage p { color: #6f817b; }

/* Story assembly: a clear, optional-reference checkpoint before generation. */
.story-stage-choice-group {
  min-width: 0;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.story-choice-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(78, 224, 210, .28);
  border-radius: 4px;
  background: #102023;
  color: #9dc8c3;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.story-choice-button:hover:not(:disabled) {
  border-color: rgba(78, 224, 210, .58);
  background: #142a2d;
  color: var(--jade);
}
.story-choice-button:disabled {
  border-color: var(--line);
  background: #11181c;
  color: #4e5a58;
  cursor: not-allowed;
}
.story-choice-button svg { width: 15px; height: 15px; }

.story-assembly-toolbar {
  min-width: 0;
  flex: 0 0 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: #0b1115;
}
.story-assembly-toolbar > span,
.story-assembly-toolbar > span > span,
.story-assembly-toolbar > div {
  min-width: 0;
  display: flex;
  align-items: center;
}
.story-assembly-toolbar > span { gap: 10px; }
.story-assembly-toolbar > span > svg { width: 18px; flex: 0 0 auto; color: var(--jade); }
.story-assembly-toolbar > span > span { flex-direction: column; align-items: flex-start; gap: 3px; }
.story-assembly-toolbar strong { color: #b8c5c1; font-size: 11px; }
.story-assembly-toolbar small { overflow: hidden; color: #667470; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.story-assembly-toolbar > div { flex: 0 0 auto; gap: 10px; }
.story-assembly-toolbar > div > b { color: var(--gold); font: 10px Consolas, monospace; font-weight: 500; white-space: nowrap; }
.story-assembly-toolbar button {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid rgba(78, 224, 210, .3);
  border-radius: 4px;
  background: #112326;
  color: var(--jade);
  font-size: 9px;
  cursor: pointer;
}
.story-assembly-toolbar button:hover:not(:disabled) { border-color: var(--jade); background: #173033; }
.story-assembly-toolbar button:disabled { border-color: var(--line); color: #53605d; cursor: wait; }
.story-assembly-toolbar button svg { width: 13px; }

.story-assembly-list {
  min-width: 0;
  min-height: 250px;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 9px;
  border: 1px solid var(--line);
  background: #080e12;
}
.story-assembly-list-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px;
  color: #5c6966;
  text-align: center;
}
.story-assembly-list-empty svg { width: 28px; height: 28px; margin-bottom: 4px; }
.story-assembly-list-empty strong { color: #8c9995; font-size: 12px; }
.story-assembly-list-empty span { font-size: 9px; }

.story-assembly-row {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 3px solid #66736f;
  background: #0d1418;
}
.story-assembly-row + .story-assembly-row { margin-top: 8px; }
.story-assembly-row.is-ready { border-left-color: var(--success); }
.story-assembly-row.is-warning { border-left-color: var(--gold); }
.story-assembly-row.is-blocked { border-left-color: #ed747b; }
.story-assembly-row > header {
  min-width: 0;
  min-height: 49px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 13px 7px 10px;
  border-bottom: 1px solid var(--line);
  background: #10181c;
}
.story-assembly-row-number { color: var(--gold); font: 10px Consolas, monospace; text-align: center; }
.story-assembly-row > header > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.story-assembly-row > header strong,
.story-assembly-row > header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-assembly-row > header strong { color: #c6d1ce; font-size: 12px; }
.story-assembly-row > header small { color: #63706d; font-size: 9px; }
.story-assembly-row-status {
  max-width: 320px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: #7b8985;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-assembly-row-status i { width: 7px; height: 7px; flex: 0 0 auto; background: #687572; }
.story-assembly-row.is-ready .story-assembly-row-status { color: #77cfa6; }
.story-assembly-row.is-ready .story-assembly-row-status i { background: var(--success); box-shadow: 0 0 8px rgba(75,211,151,.35); }
.story-assembly-row.is-warning .story-assembly-row-status { color: #c8aa6f; }
.story-assembly-row.is-warning .story-assembly-row-status i { background: var(--gold); }
.story-assembly-row.is-blocked .story-assembly-row-status { color: #ed9298; }
.story-assembly-row.is-blocked .story-assembly-row-status i { background: #ed747b; }

.story-assembly-row-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(210px, .92fr) minmax(210px, .92fr) minmax(300px, 1.35fr);
}
.story-assembly-role-column,
.story-assembly-prompt-column { min-width: 0; min-height: 122px; padding: 10px 12px; }
.story-assembly-role-column { border-right: 1px solid var(--line); }
.story-assembly-role-column > header,
.story-assembly-prompt-column > header {
  min-width: 0;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.story-assembly-role-column > header > span,
.story-assembly-prompt-column > header > span { min-width: 0; display: inline-flex; align-items: center; gap: 7px; }
.story-assembly-role-column > header svg,
.story-assembly-prompt-column > header svg { width: 13px; flex: 0 0 auto; color: var(--jade); }
.story-assembly-role-column > header strong,
.story-assembly-prompt-column > header strong { color: #94a29e; font-size: 9px; }
.story-assembly-role-column > header button,
.story-assembly-prompt-column > header button {
  height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(78,224,210,.22);
  border-radius: 4px;
  background: #112024;
  color: #8bcac3;
  font-size: 8px;
  white-space: nowrap;
  cursor: pointer;
}
.story-assembly-role-column > header button:hover,
.story-assembly-prompt-column > header button:hover { border-color: rgba(78,224,210,.55); color: var(--jade); }
.story-assembly-role-column > div { min-width: 0; max-height: 130px; overflow-y: auto; scrollbar-gutter: stable; }
.story-assembly-role-asset {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px 24px;
  align-items: center;
  gap: 8px;
  padding: 3px 2px;
  border-top: 1px solid rgba(170,211,207,.08);
}
.story-assembly-role-asset:first-child { border-top: 0; }
.story-assembly-role-preview {
  width: 48px;
  height: 46px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #050a0d;
  cursor: zoom-in;
}
.story-assembly-role-preview img,
.story-assembly-role-preview video,
.story-assembly-role-preview .local-media-placeholder { width: 100%; height: 100%; display: block; object-fit: cover; }
.story-assembly-role-preview > svg { width: 13px; height: 13px; position: absolute; right: 3px; bottom: 3px; padding: 3px; box-sizing: content-box; background: rgba(4,9,11,.76); color: #e2ece9; opacity: 0; transition: opacity .18s ease; }
.story-assembly-role-preview:hover > svg { opacity: 1; }
.story-assembly-role-asset > span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.story-assembly-role-asset strong,
.story-assembly-role-asset small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-assembly-role-asset strong { color: #b6c3bf; font-size: 9px; }
.story-assembly-role-asset small { color: #596663; font-size: 7px; }
.story-assembly-role-replace,
.story-assembly-role-remove {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #5e6b67;
  cursor: pointer;
}
.story-assembly-role-replace:hover { color: var(--jade); background: rgba(78,224,210,.08); }
.story-assembly-role-remove:hover { color: #ff8d94; }
.story-assembly-role-replace svg,
.story-assembly-role-remove svg { width: 12px; }
.story-assembly-role-empty {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border: 1px dashed rgba(126,190,183,.16);
  color: #586561;
}
.story-assembly-role-empty > svg { width: 17px; flex: 0 0 auto; }
.story-assembly-role-empty > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.story-assembly-role-empty strong { color: #75827e; font-size: 9px; }
.story-assembly-role-empty small { color: #53605d; font-size: 7px; }
.story-assembly-prompt-column p {
  min-height: 31px;
  max-height: 48px;
  margin: 0;
  overflow: hidden;
  color: #84918d;
  font-size: 9px;
  line-height: 1.72;
  overflow-wrap: anywhere;
}
.story-assembly-direct-references { min-width: 0; display: flex; gap: 5px; overflow-x: auto; overflow-y: hidden; margin-top: 6px; padding-bottom: 2px; scrollbar-width: thin; }
.story-assembly-direct-references > button { width: 116px; min-width: 116px; height: 38px; display: grid; grid-template-columns: 34px minmax(0,1fr) 15px; align-items: center; gap: 5px; overflow: hidden; padding: 2px 4px 2px 2px; border: 1px solid rgba(78,224,210,.16); border-radius: 3px; background: #0c1519; color: #71807b; text-align: left; cursor: pointer; }
.story-assembly-direct-references > button:hover { border-color: rgba(78,224,210,.45); color: var(--jade); }
.story-assembly-direct-references img,.story-assembly-direct-references video,.story-assembly-direct-references .local-media-placeholder { width: 34px; height: 32px; display: block; object-fit: cover; }
.story-assembly-direct-references > button > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.story-assembly-direct-references strong,.story-assembly-direct-references small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-assembly-direct-references strong { color: #a7b4b0; font-size: 8px; }
.story-assembly-direct-references small { color: #5c6965; font-size: 7px; }
.story-assembly-direct-references > button > svg { width: 11px; }
.story-assembly-direct-empty { height: 30px; display: flex; align-items: center; gap: 6px; margin-top: 5px; color: #56635f; font-size: 7px; }
.story-assembly-direct-empty svg { width: 12px; }
.story-assembly-prompt-column > small { display: block; margin-top: 7px; color: #5b6865; font-size: 7px; }

.story-assembly-picker-backdrop { z-index: 350; padding: 24px; background: rgba(2,5,7,.88); backdrop-filter: blur(22px); }
.story-assembly-picker-shell {
  width: min(980px, 92vw);
  height: min(760px, 88vh);
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 76px 52px minmax(0, 1fr) 58px;
  overflow: hidden;
  border: 1px solid rgba(126,190,183,.3);
  border-radius: 6px;
  background: #080d11;
  box-shadow: 0 38px 120px rgba(0,0,0,.7);
}
.story-assembly-picker-shell > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 13px;
  padding: 0 17px;
  border-bottom: 1px solid var(--line);
  background: #0b1216;
}
.story-assembly-picker-mark { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(78,224,210,.32); background: #102326; color: var(--jade); }
.story-assembly-picker-mark svg { width: 18px; }
.story-assembly-picker-shell > header > div { min-width: 0; }
.story-assembly-picker-shell > header small { display: block; color: var(--gold); font: 8px Consolas, monospace; }
.story-assembly-picker-shell > header h2 { overflow: hidden; margin: 3px 0 0; color: #d9e3e0; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.story-assembly-picker-shell > header p { overflow: hidden; margin: 3px 0 0; color: #65726f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.story-assembly-picker-tools { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: #0a1014; }
.story-assembly-picker-tools label { min-width: 0; display: grid; flex: 1; grid-template-columns: 23px minmax(0,1fr); align-items: center; border: 1px solid var(--line); background: #070c0f; }
.story-assembly-picker-tools label svg { width: 13px; justify-self: center; color: #64716e; }
.story-assembly-picker-tools input { min-width: 0; height: 34px; border: 0; outline: 0; background: transparent; color: #c5d0cd; font-size: 10px; }
.story-assembly-picker-tools > button { height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(78,224,210,.3); border-radius: 4px; background: #112326; color: var(--jade); font-size: 9px; cursor: pointer; }
.story-assembly-picker-tools > button svg { width: 13px; }
.story-assembly-picker-list {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 13px;
}
.story-assembly-picker-card {
  min-width: 0;
  min-height: 178px;
  display: grid;
  grid-template-rows: 112px auto 34px;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #0d1519;
}
.story-assembly-picker-card.is-selected { border-color: rgba(78,224,210,.52); box-shadow: inset 0 0 0 1px rgba(78,224,210,.1); }
.story-assembly-picker-preview { width: 100%; height: 112px; position: relative; display: grid; place-items: center; overflow: hidden; padding: 0; border: 0; background: #05090c; cursor: zoom-in; }
.story-assembly-picker-preview img,
.story-assembly-picker-preview video,
.story-assembly-picker-preview .local-media-placeholder { width: 100%; height: 100%; display: block; object-fit: contain; }
.story-assembly-picker-preview > svg { width: 16px; position: absolute; right: 7px; bottom: 7px; padding: 5px; box-sizing: content-box; background: rgba(4,9,11,.76); color: #e6efed; }
.story-assembly-picker-card > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.story-assembly-picker-card > span strong,
.story-assembly-picker-card > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-assembly-picker-card > span strong { color: #bac6c2; font-size: 10px; }
.story-assembly-picker-card > span small { color: #5e6b67; font-size: 8px; }
.story-assembly-picker-choose { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 4px; background: #11191d; color: #879590; font-size: 8px; cursor: pointer; }
.story-assembly-picker-choose:hover,
.story-assembly-picker-choose.is-selected { border-color: rgba(78,224,210,.42); background: #153034; color: var(--jade); }
.story-assembly-picker-choose svg { width: 12px; }
.story-assembly-picker-empty { grid-column: 1 / -1; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #5e6b67; text-align: center; }
.story-assembly-picker-empty svg { width: 28px; }
.story-assembly-picker-empty strong { color: #899691; font-size: 11px; }
.story-assembly-picker-empty span { font-size: 8px; }
.story-assembly-picker-shell > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-top: 1px solid var(--line); background: #0b1115; }
.story-assembly-picker-shell > footer button { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border-radius: 4px; font-size: 9px; cursor: pointer; }
.story-assembly-picker-shell > footer button svg { width: 13px; }
.story-assembly-picker-clear { border: 1px solid var(--line); background: #10171b; color: #7c8985; }
.story-assembly-picker-clear:hover { border-color: rgba(216,179,106,.36); color: var(--gold); }
.story-assembly-picker-done { min-width: 130px; border: 1px solid var(--jade); background: var(--jade); color: #06100f; font-weight: 750; }

html[data-theme="day"] .story-choice-button,
html[data-theme="day"] .story-assembly-toolbar,
html[data-theme="day"] .story-assembly-list,
html[data-theme="day"] .story-assembly-row,
html[data-theme="day"] .story-assembly-picker-shell,
html[data-theme="day"] .story-assembly-picker-shell > header,
html[data-theme="day"] .story-assembly-picker-tools,
html[data-theme="day"] .story-assembly-picker-shell > footer { background: #fff; }
html[data-theme="day"] .story-choice-button { background: #e7f2ef; color: #147d75; }
html[data-theme="day"] .story-assembly-row > header,
html[data-theme="day"] .story-assembly-picker-card { background: #f3f7f5; }
html[data-theme="day"] .story-assembly-row > header strong,
html[data-theme="day"] .story-assembly-picker-shell > header h2,
html[data-theme="day"] .story-assembly-picker-card > span strong { color: #293a35; }
html[data-theme="day"] .story-assembly-role-column > header button,
html[data-theme="day"] .story-assembly-prompt-column > header button,
html[data-theme="day"] .story-assembly-toolbar button,
html[data-theme="day"] .story-assembly-picker-tools > button,
html[data-theme="day"] .story-assembly-picker-choose { background: #e5f1ee; color: #0e756e; }
html[data-theme="day"] .story-assembly-role-empty { border-color: #d8e4e0; background: #f7f9f8; }
html[data-theme="day"] .story-assembly-prompt-column p,
html[data-theme="day"] .story-assembly-role-asset strong { color: #40514c; }
html[data-theme="day"] .story-assembly-direct-references > button { border-color: #d7e5e1; background: #f5f8f7; }
html[data-theme="day"] .story-assembly-direct-references strong { color: #354741; }
html[data-theme="day"] .story-assembly-picker-backdrop { background: rgba(224,231,228,.9); }
html[data-theme="day"] .story-assembly-picker-tools label { background: #f3f7f5; }
html[data-theme="day"] .story-assembly-picker-tools input { color: #30413c; }
html[data-theme="day"] .story-assembly-picker-preview,
html[data-theme="day"] .story-assembly-role-preview { background: #e9efed; }
html[data-theme="day"] .story-assembly-picker-clear { background: #f0f4f2; color: #65746f; }
html[data-theme="day"] .story-assembly-picker-done { background: #148f86; color: #fff; }

@media (max-width: 1480px) {
  .story-stage-actions:has(.story-stage-choice-group) { grid-template-columns: minmax(170px, .7fr) auto minmax(350px, 1.3fr); }
  .story-assembly-row-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .story-assembly-prompt-column { grid-column: 1 / -1; min-height: 98px; border-top: 1px solid var(--line); }
  .story-assembly-role-column:nth-child(2) { border-right: 0; }
}

@media (max-width: 1180px) {
  .story-stage-choice-group .story-choice-button,
  .story-stage-choice-group .story-next-button { min-width: 0; padding-right: 11px; padding-left: 11px; }
  .story-assembly-toolbar small { display: none; }
  .story-assembly-picker-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-height: 820px) {
  .story-assembly-toolbar { flex-basis: 48px; }
  .story-assembly-list { min-height: 210px; padding: 7px; }
  .story-assembly-row > header { min-height: 44px; }
  .story-assembly-role-column,
  .story-assembly-prompt-column { min-height: 104px; padding-top: 7px; padding-bottom: 7px; }
  .story-assembly-picker-shell { height: min(690px, 92vh); }
}

/* Final creation workspace: conversation history, continuous work stream and persistent composer. */
.workspace-layout {
  grid-template-columns: 288px minmax(0, 1fr);
}
.task-sidebar {
  padding: 30px 16px 24px;
  scrollbar-width: thin;
  scrollbar-color: #2a3a3d transparent;
}
.task-list { gap: 8px; }
.task-list-item {
  min-height: 66px;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 11px;
  padding: 9px;
}
.task-thumb { width: 46px; height: 46px; }
.task-list-item strong { max-width: 182px; font-size: 12px; line-height: 1.35; }
.task-list-item small {
  max-width: 184px;
  overflow: hidden;
  color: #71807d;
  font-size: 9px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.creation-room { --generation-composer-clearance: 238px; }
.generation-feed {
  padding-top: 102px;
  padding-right: clamp(30px, 5vw, 88px);
  padding-left: clamp(30px, 5vw, 88px);
}
.result-block,
.result-day { width: min(1120px, 100%); }
.result-block {
  margin-bottom: 72px;
  padding-bottom: 8px;
  scroll-margin-bottom: calc(var(--generation-composer-clearance, 238px) + 36px);
}
.result-prompt { margin-bottom: 16px; }
.result-prompt p { font-size: 14px; line-height: 1.8; }
.result-media-grid.is-single {
  width: 100%;
  justify-items: center;
}
.result-media.single {
  width: min(1080px, 100%);
  max-width: 100%;
  min-height: 0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
.result-media.single[data-ratio="21:9"] { width: min(1120px, 100%); }
.result-media.single[data-ratio="16:9"],
.result-media.single[data-ratio="4:3"] { width: min(1040px, 100%); }
.result-media.single[data-ratio="3:4"] {
  width: min(520px, calc((100dvh - 250px) * .75), 100%);
  max-height: calc(100dvh - 250px);
}
.result-media.single[data-ratio="1:1"] {
  width: min(680px, calc(100dvh - 250px), 100%);
  max-height: calc(100dvh - 250px);
}
.result-media.single[data-ratio="9:16"] {
  width: min(380px, calc((100dvh - 250px) * .5625), 100%);
  max-height: calc(100dvh - 250px);
}
.result-media img,
.result-media video {
  object-fit: contain !important;
  object-position: center;
}
.result-actions { flex-wrap: wrap; }
.dock-composer {
  width: min(1060px, calc(100% - 86px));
  box-shadow: 0 28px 84px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .025) inset;
}
.dock-composer.is-compact {
  bottom: 10px;
  min-height: 60px;
  grid-template-columns: 38px minmax(0, 1fr) 100px;
  padding: 7px 9px;
}
.dock-composer.is-compact .dock-upload,
.dock-composer.is-compact > .send-button { width: 38px; height: 38px; }
.dock-composer.is-compact > .send-button { width: 100px; min-width: 100px; }
.dock-composer.is-compact .dock-main textarea { min-height: 38px; max-height: 38px; padding-top: 8px; }

/* Ratio-aware video preview: always show the full frame at a comfortable desktop size. */
.preview-modal-content {
  width: min(1500px, 95vw);
  height: min(900px, 91vh);
  grid-template-columns: minmax(0, 1fr) clamp(330px, 24vw, 410px);
}
.preview-media.is-video { padding: 0; }
.preview-video-stage { padding: clamp(14px, 1.6vw, 26px); }
.preview-video-stage video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.preview-video-stage[data-ratio="9:16"] video {
  width: auto;
  height: min(78vh, 760px);
  max-height: 100%;
  aspect-ratio: 9 / 16;
}
.preview-video-stage[data-ratio="3:4"] video {
  width: auto;
  height: min(76vh, 720px);
  max-height: 100%;
  aspect-ratio: 3 / 4;
}
.preview-video-stage[data-ratio="1:1"] video {
  width: min(72vh, 720px);
  height: auto;
  aspect-ratio: 1;
}
.preview-video-stage[data-ratio="16:9"] video,
.preview-video-stage[data-ratio="21:9"] video,
.preview-video-stage[data-ratio="4:3"] video {
  width: 100%;
  height: auto;
}

/* One in-app original-image viewer for generated work, assets, BJD and story references. */
.image-lightbox {
  grid-template-rows: 68px minmax(0, 1fr) 40px;
  background: #010203;
}
.image-lightbox-bar { padding-right: 22px; padding-left: 26px; }
.image-lightbox-stage {
  background-color: #020304;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.012) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.012) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.012) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.012) 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}
.image-lightbox-stage img {
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 22px 54px rgba(0, 0, 0, .5));
}
.asset-card-media[data-preview-asset],
.asset-card-media[data-preview-task],
.dream-tile[data-preview-task],
.dream-tile[data-preview-curated],
.story-assembly-role-preview,
.story-assembly-picker-preview { cursor: zoom-in; }
.story-assembly-role-preview img,
.story-assembly-role-preview video,
.story-assembly-direct-references img,
.story-assembly-direct-references video { object-fit: contain; background: #05090c; }

html[data-theme="day"] .task-list-item small { color: #75817e; }
html[data-theme="day"] .result-media.single { box-shadow: 0 22px 58px rgba(35, 54, 50, .13); }

@media (max-height: 760px) {
  .creation-room { --generation-composer-clearance: 194px; }
  .generation-feed { padding-top: 88px; }
  .result-media.single[data-ratio="9:16"] { width: min(320px, calc((100dvh - 210px) * .5625), 100%); max-height: calc(100dvh - 210px); }
  .dock-composer { bottom: 14px; min-height: 132px; }
}

/* 商用积分明细：保持信息清楚，并让长记录始终可以滚动查看。 */
.login-modal {
  position: relative;
  width: min(460px, calc(100vw - 40px));
  padding: 34px;
  display: grid;
  gap: 18px;
  border: 1px solid rgba(170, 211, 207, .2);
  border-radius: 6px;
  background: var(--panel-strong);
  box-shadow: 0 34px 100px rgba(0, 0, 0, .55);
}
.login-modal > p,
.login-modal > h2 { margin: 0; }
.login-modal > p { color: var(--jade); font-size: 11px; }
.login-modal > h2 { font-size: 25px; }
.login-lead,
.account-status { color: var(--muted); line-height: 1.65; }
.login-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-soft);
}
.login-mode-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.login-mode-tabs button.is-active {
  background: rgba(78, 224, 210, .14);
  color: var(--jade);
  font-weight: 700;
}
.login-panel { display: grid; gap: 18px; }
.login-panel[hidden] { display: none !important; }
.captcha-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: end;
  gap: 10px;
}
.captcha-refresh-button {
  height: 46px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  background: #f4f0fa;
  color: #382550;
  cursor: pointer;
}
.captcha-refresh-button:disabled { cursor: wait; opacity: .7; }
.captcha-refresh-button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.captcha-refresh-button span { font: inherit; font-size: 12px; }
.sms-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}
.sms-send-button {
  min-width: 116px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  background: var(--panel-soft);
  color: var(--jade);
  font: inherit;
  cursor: pointer;
}
.sms-send-button:disabled { cursor: wait; opacity: .55; }
.account-field { min-width: 0; display: grid; gap: 8px; }
.account-field > span { color: var(--muted); font-size: 11px; }
.account-field input,
.recharge-custom input {
  width: 100%;
  height: 46px;
  min-width: 0;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: 0;
  background: var(--panel-soft);
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.account-field input:focus,
.recharge-custom input:focus { border-color: var(--line-bright); box-shadow: 0 0 0 3px rgba(78, 224, 210, .08); }
.account-submit,
.points-account button,
.points-tabs button,
.recharge-submit,
.recharge-order button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-soft);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.account-submit {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-color: rgba(78, 224, 210, .42);
  background: var(--jade);
  color: #061311;
  font-weight: 700;
}
.account-submit svg { width: 17px; }
.account-submit:disabled,
.account-submit[aria-busy="true"] { cursor: wait; opacity: .55; }
.points-modal {
  position: relative;
  width: min(980px, calc(100vw - 80px));
  max-height: calc(100vh - 80px);
  padding: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}
.points-modal > p,
.points-modal > h2 { margin: 0; }
.points-modal > p { color: var(--jade); font-size: 12px; }
.points-account {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-block: 1px solid var(--line);
}
.points-account > svg { width: 25px; color: var(--jade); }
.points-account > span { min-width: 0; display: grid; gap: 4px; }
.points-account > span strong,
.points-account > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.points-account > span small { color: var(--muted); font-size: 10px; }
.points-account button { min-height: 36px; padding: 0 13px; }
.points-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.points-summary article {
  min-height: 88px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}
.points-summary span,
.points-entry small,
.points-note { color: var(--muted); }
.points-summary strong { font-size: 25px; }
.points-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.points-tabs button {
  min-width: 112px;
  min-height: 40px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}
.points-tabs button.is-active { border-bottom-color: var(--jade); color: var(--jade); }
.points-body { min-height: 0; overflow: auto; scrollbar-gutter: stable; }
.recharge-panel,
.points-ledger-panel { min-height: 0; display: grid; gap: 16px; }
.recharge-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.recharge-heading > span { display: grid; gap: 5px; }
.recharge-heading small { color: var(--muted); }
.recharge-heading > b { color: var(--gold); font-variant-numeric: tabular-nums; }
.recharge-packages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.recharge-packages button,
.recharge-channels button {
  min-width: 0;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-soft);
  color: var(--text);
  cursor: pointer;
}
.recharge-packages button { display: grid; place-items: center; gap: 5px; }
.recharge-packages button span { color: var(--muted); font-size: 10px; }
.recharge-packages button.is-active,
.recharge-channels button.is-active { border-color: var(--line-bright); background: rgba(78, 224, 210, .08); color: var(--jade); }
.recharge-custom { display: grid; grid-template-columns: 105px minmax(0, 220px) 22px; align-items: center; gap: 10px; }
.recharge-custom > span { color: var(--muted); }
.recharge-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 10px; }
.recharge-channels button { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.recharge-channels svg { width: 17px; }
.commerce-notice {
  min-height: 58px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--gold);
  background: rgba(216, 179, 106, .07);
}
.commerce-notice > svg { width: 20px; color: var(--gold); }
.commerce-notice > span { min-width: 0; display: grid; gap: 4px; }
.commerce-notice small { color: var(--muted); }
.recharge-submit { min-height: 48px; border-color: rgba(78, 224, 210, .4); background: var(--jade); color: #061311; font-weight: 700; }
.recharge-submit:disabled { border-color: var(--line); background: var(--panel-soft); color: var(--muted); cursor: not-allowed; }
.recharge-order {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-block: 1px solid var(--line);
}
.recharge-order > span { min-width: 0; display: grid; gap: 4px; }
.recharge-order > span small { color: var(--muted); }
.recharge-order button { padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; }
.recharge-order button svg { width: 15px; }
.points-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.points-filters button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.points-filters button.is-active {
  border-color: var(--jade);
  background: rgba(78, 224, 210, .08);
  color: var(--jade);
}
.points-list {
  min-height: 260px;
  max-height: 48vh;
  overflow: auto;
  border-block: 1px solid var(--line);
}
.points-entry {
  min-height: 74px;
  padding: 13px 10px;
  display: grid;
  grid-template-columns: 105px minmax(180px, 1.2fr) minmax(180px, 1fr) 118px;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.points-entry:last-child { border-bottom: 0; }
.points-entry time { color: var(--muted); font-variant-numeric: tabular-nums; }
.points-entry > span { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.points-entry > span strong,
.points-entry > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.points-entry > b { text-align: right; color: var(--jade); font-variant-numeric: tabular-nums; }
.points-entry > b small { display: block; margin-top: 4px; font-weight: 400; }
.points-entry.is-failed .points-entry-status strong { color: var(--danger); }
.points-entry.is-refunded .points-entry-status strong { color: var(--warning); }
.points-empty {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted);
  text-align: center;
}
.points-empty svg { width: 28px; height: 28px; }
.points-note { line-height: 1.6; }

html[data-theme="day"] .login-modal,
html[data-theme="day"] .points-modal { box-shadow: 0 30px 80px rgba(38, 61, 56, .2); }
html[data-theme="day"] .account-submit,
html[data-theme="day"] .recharge-submit:not(:disabled) { color: #073a35; }

@media (max-width: 820px) {
  .points-modal { width: min(100%, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 22px; gap: 14px; }
  .points-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recharge-packages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .points-entry { grid-template-columns: 88px minmax(140px, 1fr) 90px; }
  .points-entry-status { display: none !important; }
}

@media (max-width: 560px) {
  .login-modal { padding: 24px 20px; }
  .captcha-row { grid-template-columns: minmax(0, 1fr) 108px; }
  .sms-code-row { grid-template-columns: minmax(0, 1fr) 108px; }
  .sms-send-button { min-width: 0; padding: 0 8px; }
  .points-account { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .points-account button { grid-column: 2 / -1; justify-self: start; }
  .points-summary article { min-height: 72px; padding: 12px; }
  .recharge-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .recharge-custom { grid-template-columns: 1fr 22px; }
  .recharge-custom > span { grid-column: 1 / -1; }
  .recharge-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .points-entry { grid-template-columns: minmax(0, 1fr) 76px; gap: 10px; }
  .points-entry time { grid-column: 1 / -1; }
}

/* Live creation stream: immediate records, grouped results and quiet progress updates. */
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}
.creation-live-summary {
  position: absolute;
  top: 76px;
  right: clamp(30px, 5vw, 88px);
  z-index: 9;
  width: min(430px, calc(100% - 76px));
  min-height: 42px;
  display: grid;
  grid-template-columns: 8px minmax(120px, auto) minmax(100px, 1fr) 44px;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid rgba(130, 166, 163, .2);
  border-radius: 6px;
  background: rgba(10, 15, 19, .9);
  color: #a7b4b1;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
  pointer-events: none;
}
.creation-live-summary > span {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.creation-live-summary > div {
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: #1a272a;
}
.creation-live-summary > div > i {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #24a99e, #66dfd4 70%, #cfb56e);
  transition: width .35s ease;
}
.creation-live-summary > strong {
  color: #75e4da;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.creation-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 12px rgba(78, 224, 210, .68);
  animation: livePulse 1.25s ease-in-out infinite;
}
.creation-live-summary.is-completed .creation-live-dot { background: var(--success); animation: none; }
.creation-live-summary.is-completed > strong { color: #73dda9; }
.creation-live-summary.is-failed { border-color: rgba(255, 112, 122, .3); background: rgba(32, 14, 18, .94); }
.creation-live-summary.is-failed .creation-live-dot { background: var(--danger); animation: none; }
.creation-live-summary.is-failed > strong { color: #ff9aa2; }
.creation-live-summary.is-review-required { border-color: rgba(216,179,106,.34); background: rgba(31,25,15,.94); }
.creation-live-summary.is-review-required .creation-live-dot { background: var(--gold); animation: none; }
.creation-live-summary.is-review-required > strong { color: var(--gold); }

.generation-update-notice {
  position: absolute;
  left: 50%;
  bottom: calc(var(--generation-composer-clearance, 238px) - 18px);
  z-index: 14;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid rgba(78, 224, 210, .32);
  border-radius: 19px;
  background: rgba(11, 20, 23, .95);
  color: #b9c8c4;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .42), 0 0 22px rgba(78, 224, 210, .07);
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  cursor: pointer;
  backdrop-filter: blur(16px);
}
.generation-update-notice.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.generation-update-notice svg { width: 15px; color: var(--jade); }
.generation-update-notice span { font-size: 11px; font-weight: 650; }
.generation-update-notice strong { color: var(--jade); font-size: 10px; }

.task-list-item strong { display: flex; align-items: center; gap: 7px; }
.task-list-item strong em {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 2px;
  background: rgba(78, 224, 210, .12);
  color: var(--jade);
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}
.task-list-item.has-unseen { border-color: rgba(78, 224, 210, .2); background: rgba(14, 29, 31, .62); }
.task-list-item.has-unseen .task-thumb { border-color: rgba(78, 224, 210, .3); }

.result-block.is-optimistic {
  padding-left: 13px;
  border-left: 2px solid rgba(78, 224, 210, .42);
}
.result-reference-row {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 13px;
}
.result-reference-row > span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #70807c;
  font-size: 10px;
}
.result-reference-row > span svg { width: 13px; }
.result-reference-stack {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 4px 10px 4px 4px;
}
.result-reference-item {
  position: relative;
  width: 54px;
  height: 58px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  overflow: visible;
  margin-left: -9px;
  padding: 0;
  border: 2px solid #10161a;
  border-radius: 5px;
  background: #11191d;
  color: #8b9995;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .25);
  transform: rotate(-2deg);
  transition: transform .18s ease, border-color .18s ease, z-index .18s ease;
  cursor: zoom-in;
}
.result-reference-item:first-child { margin-left: 0; }
.result-reference-item:nth-child(even) { transform: rotate(2deg); }
.result-reference-item:hover { z-index: 4; border-color: var(--jade); transform: translateY(-5px) rotate(0); }
.result-reference-item img,
.result-reference-item video,
.result-reference-audio { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 3px; object-fit: cover; background: #0b1115; }
.result-reference-audio svg { width: 20px; color: var(--jade); }
.result-reference-item em {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #273034;
  color: #e6eeeb;
  font-size: 8px;
  font-style: normal;
}
.result-reference-item small {
  position: absolute;
  left: 50%;
  bottom: -25px;
  z-index: 6;
  max-width: 150px;
  padding: 4px 6px;
  border-radius: 3px;
  background: #131b1f;
  color: #c7d1ce;
  font-size: 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -3px);
  pointer-events: none;
  transition: .16s ease;
}
.result-reference-item:hover small { opacity: 1; transform: translate(-50%, 0); }

.result-media-grid {
  width: 100%;
  gap: 4px;
  align-items: stretch;
  background: transparent;
}
.result-media-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.result-media-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.result-media-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.result-media-grid[data-count="4"][data-ratio="9:16"],
.result-media-grid[data-count="4"][data-ratio="3:4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.result-media {
  min-width: 0;
  min-height: 0;
  border-color: rgba(152, 184, 180, .16);
  border-radius: 3px;
  background: #090d10;
}
.result-media:not(.single) { aspect-ratio: 16 / 9; }
.result-media:not(.single)[data-ratio="21:9"] { aspect-ratio: 21 / 9; }
.result-media:not(.single)[data-ratio="9:16"] { aspect-ratio: 9 / 16; }
.result-media:not(.single)[data-ratio="3:4"] { aspect-ratio: 3 / 4; }
.result-media:not(.single)[data-ratio="4:3"] { aspect-ratio: 4 / 3; }
.result-media:not(.single)[data-ratio="1:1"] { aspect-ratio: 1; }
.result-media:not(.single) img,
.result-media:not(.single) video { object-fit: cover !important; }
.result-media > img,
.result-media > video { width: 100%; height: 100%; display: block; }
.result-media .loading-surface { min-height: 0; }
.result-media:not(.single) .loading-surface { height: 100%; }
.result-hover-actions { z-index: 3; }
.result-hover-actions button,
.result-hover-actions a { border-radius: 5px; }
.result-error { border-radius: 3px; line-height: 1.7; }

html[data-theme="day"] .creation-live-summary {
  border-color: #cddbd7;
  background: rgba(255, 255, 255, .94);
  color: #53645f;
  box-shadow: 0 10px 30px rgba(43, 66, 59, .12);
}
html[data-theme="day"] .creation-live-summary > div { background: #dfe9e5; }
html[data-theme="day"] .creation-live-summary.is-review-required { border-color: #dec98f; background: rgba(255,249,232,.96); }
html[data-theme="day"] .result-review-required { border-left-color: #aa7c22; background: #fff9e8; color: #7f6727; }
html[data-theme="day"] .result-review-required strong { color: #73570f; }
html[data-theme="day"] .result-review-required span { color: #786b48; }
html[data-theme="day"] .generation-update-notice { border-color: #9fd8d2; background: rgba(248, 252, 250, .97); color: #3f5550; }
html[data-theme="day"] .task-list-item.has-unseen { background: #e7f2ef; }
html[data-theme="day"] .result-reference-item { border-color: #fff; background: #e9efed; box-shadow: 0 5px 14px rgba(49, 66, 61, .14); }
html[data-theme="day"] .result-reference-item small { background: #fff; color: #354640; box-shadow: 0 6px 20px rgba(42, 58, 53, .12); }
html[data-theme="day"] .result-reference-item em { background: #dce7e3; color: #344640; }
html[data-theme="day"] .result-media { border-color: #cad7d3; background: #e9efed; }

@media (max-height: 760px) {
  .creation-live-summary { top: 70px; }
  .generation-update-notice { bottom: calc(var(--generation-composer-clearance, 194px) - 10px); }
  .result-reference-row { min-height: 56px; }
  .result-reference-item { width: 46px; height: 50px; flex-basis: 46px; }
}

/* Closed-account management: headquarters writes, region administrators read their server-scoped view. */
.management-page {
  width: min(1540px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 58px);
  display: grid;
  gap: 22px;
}
.management-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.management-header > div { min-width: 0; display: grid; gap: 8px; }
.management-header p,
.management-table-card header p,
.management-form-card > div p { margin: 0; color: var(--jade); font: 10px/1.2 Consolas, monospace; letter-spacing: .14em; }
.management-header h2 { margin: 0; font-size: clamp(26px, 3vw, 42px); }
.management-header > div > span { color: var(--muted); line-height: 1.7; }
.management-header > button,
.management-form-card button,
.management-account-actions button,
.management-account-actions select,
.management-table-card td > button,
.temporary-password-modal > button:not(.modal-close),
.management-points-modal form > button {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-soft);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.management-header > button { flex: 0 0 auto; border-color: rgba(78,224,210,.28); }
.management-header button svg,
.management-form-card button svg { width: 16px; }
.management-header button:disabled,
.management-form-card button:disabled,
.management-account-actions button:disabled,
.management-table-card td > button:disabled,
.management-points-modal form > button:disabled { opacity: .5; cursor: wait; }
.management-scope-banner {
  min-height: 58px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-left: 3px solid var(--jade);
  background: rgba(78,224,210,.06);
}
.management-scope-banner > span { min-width: 0; display: flex; align-items: center; gap: 10px; }
.management-scope-banner svg { width: 18px; color: var(--jade); }
.management-scope-banner small { color: var(--muted); text-align: right; }
.management-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.management-summary article {
  min-height: 120px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}
.management-summary article > span,
.management-summary article > small { color: var(--muted); }
.management-summary article > strong { color: var(--jade); font-size: clamp(22px, 2.2vw, 32px); font-variant-numeric: tabular-nums; }
.management-summary article > small { line-height: 1.5; }
.management-admin-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.management-form-card {
  min-width: 0;
  padding: 20px;
  display: grid;
  gap: 18px;
  border: 1px solid rgba(216,179,106,.22);
  background: rgba(216,179,106,.04);
}
.management-form-card > div { display: grid; gap: 7px; }
.management-form-card h3,
.management-table-card h3 { margin: 0; font-size: 18px; }
.management-form-card > div > span { color: var(--muted); line-height: 1.6; }
.management-form-card form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.management-form-card:first-child form { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.management-form-card label { min-width: 0; display: grid; gap: 7px; }
.management-form-card label > span { color: var(--muted); font-size: 10px; }
.management-form-card input,
.management-form-card select,
.management-account-actions select {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: 0;
  background: var(--panel-soft);
  color: var(--text);
  font: inherit;
}
.management-form-card input:focus,
.management-form-card select:focus,
.management-account-actions select:focus { border-color: var(--line-bright); box-shadow: 0 0 0 3px rgba(78,224,210,.07); }
.management-form-card button { min-height: 42px; border-color: rgba(78,224,210,.38); background: var(--jade); color: #061311; font-weight: 700; }
.management-table-card { min-width: 0; border: 1px solid var(--line); background: var(--panel); }
.management-table-card > header {
  min-height: 76px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}
.management-table-card > header > div { display: grid; gap: 6px; }
.management-table-card > header > small { max-width: 520px; color: var(--muted); line-height: 1.6; text-align: right; }
.management-table-scroll { min-width: 0; overflow-x: auto; scrollbar-gutter: stable; }
.management-table-card table { width: 100%; min-width: 1120px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.management-table-card th,
.management-table-card td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.management-table-card th { color: var(--muted); background: var(--panel-soft); font-size: 10px; font-weight: 600; white-space: nowrap; }
.management-table-card tbody tr:last-child td { border-bottom: 0; }
.management-table-card td { color: var(--text); }
.management-table-card td > strong,
.management-table-card td > small { display: block; }
.management-table-card td > small { margin-top: 5px; color: var(--muted); }
.management-state,
.management-readonly { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.management-state.is-active { border-color: rgba(78,211,157,.3); color: var(--success); background: rgba(78,211,157,.07); }
.management-state.is-disabled { border-color: rgba(255,111,117,.25); color: var(--danger); background: rgba(255,111,117,.05); }
.management-account-actions { width: min(680px, 54vw); display: grid; grid-template-columns: minmax(118px, .8fr) minmax(128px, 1fr) repeat(4, auto); gap: 7px; align-items: center; }
.management-account-actions.is-points-only { width: auto; display: inline-flex; }
.management-account-actions select { height: 38px; min-height: 38px; padding-inline: 8px; }
.management-account-actions button,
.management-table-card td > button { min-height: 38px; padding-inline: 10px; white-space: nowrap; }
.management-account-actions button:hover,
.management-table-card td > button:hover { border-color: var(--line-bright); color: var(--jade); }
.management-account-actions .management-danger-button:hover { border-color: rgba(255,111,117,.45); color: var(--danger); }
.management-account-actions .management-points-button { border-color: rgba(216,179,106,.38); color: var(--gold); }
.management-account-actions .management-points-button:hover { border-color: var(--gold); color: #ffe0a3; }
.management-review-card { border-color: rgba(216,179,106,.28); }
.management-review-card table { min-width: 1180px; }
.management-review-reason { min-width: 260px; max-width: 420px; color: var(--muted) !important; line-height: 1.65; }
.management-review-actions { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.management-review-actions button { min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-soft); color: var(--text); cursor: pointer; }
.management-review-actions .management-review-refund { border-color: rgba(78,211,157,.36); color: var(--success); }
.management-review-actions .management-review-settle { border-color: rgba(216,179,106,.38); color: var(--gold); }
.management-review-actions button:hover { border-color: currentColor; }
.management-empty { height: 110px; color: var(--muted) !important; text-align: center !important; }
.management-operations {
  min-width: 0;
  padding: 20px;
  display: grid;
  gap: 16px;
  border: 1px solid rgba(78,224,210,.24);
  background: var(--panel);
}
.management-operations[hidden] { display: none; }
.management-operations > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.management-operations > header > div { min-width: 0; display: grid; gap: 6px; }
.management-operations > header p { margin: 0; color: var(--jade); font: 10px/1.2 Consolas, monospace; letter-spacing: .14em; }
.management-operations > header h3,
.management-operations-details h4 { margin: 0; }
.management-operations > header span { color: var(--muted); line-height: 1.6; }
.management-operations-state { flex: 0 0 auto; min-height: 32px; padding: 0 11px; display: inline-flex; align-items: center; border: 1px solid var(--line); color: var(--muted); }
.management-operations-state.is-healthy { border-color: rgba(78,211,157,.36); background: rgba(78,211,157,.07); color: var(--success); }
.management-operations-state.is-degraded { border-color: rgba(216,179,106,.4); background: rgba(216,179,106,.07); color: var(--gold); }
.management-operations-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.management-operations-summary article { min-width: 0; min-height: 104px; padding: 13px; display: grid; align-content: space-between; gap: 7px; border: 1px solid var(--line); background: var(--panel-soft); }
.management-operations-summary span,
.management-operations-summary small { color: var(--muted); }
.management-operations-summary strong { color: var(--jade); font-size: clamp(20px, 2vw, 28px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.management-operations-summary small { line-height: 1.5; }
.management-operations-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.management-operations-service { min-width: 0; min-height: 42px; padding: 9px 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); color: var(--muted); }
.management-operations-service::before { content: ''; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--danger); }
.management-operations-service.is-ready { color: var(--text); }
.management-operations-service.is-ready::before { background: var(--success); }
.management-operations-issues { padding: 13px 15px; border-left: 3px solid var(--gold); background: rgba(216,179,106,.06); }
.management-operations-issues.is-healthy { border-left-color: var(--success); background: rgba(78,211,157,.06); }
.management-operations-issues p { margin: 0; color: var(--muted); line-height: 1.65; }
.management-operations-issues ul { margin: 0; padding-left: 20px; color: var(--text); line-height: 1.8; }
.management-operations-details { min-width: 0; border-top: 1px solid var(--line); }
.management-operations-details > summary { padding: 14px 0 0; color: var(--muted); cursor: pointer; }
.management-operations-detail-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.management-operations-detail-grid > section { min-width: 0; border: 1px solid var(--line); }
.management-operations-detail-grid h4 { padding: 13px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.management-operations-detail-grid table { width: 100%; min-width: 520px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.management-operations-detail-grid th,
.management-operations-detail-grid td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.management-operations-detail-grid th { color: var(--muted); background: var(--panel-soft); font-size: 10px; font-weight: 600; white-space: nowrap; }
.management-operations-detail-grid tbody tr:last-child td { border-bottom: 0; }
.temporary-password-modal {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  padding: 32px;
  display: grid;
  gap: 16px;
  border: 1px solid rgba(216,179,106,.34);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(0,0,0,.5);
}
.temporary-password-modal > p,
.temporary-password-modal > h2 { margin: 0; }
.temporary-password-modal > p { color: var(--gold); font: 10px/1.2 Consolas, monospace; letter-spacing: .1em; }
.temporary-password-modal > span,
.temporary-password-modal > small { color: var(--muted); line-height: 1.7; }
.temporary-password-modal label { display: grid; gap: 7px; }
.temporary-password-modal label > span { color: var(--muted); font-size: 10px; }
.temporary-password-modal input {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-soft);
  color: var(--text);
  font: 600 14px/1.2 Consolas, monospace;
}
.temporary-password-modal > button:not(.modal-close) { min-height: 46px; border-color: rgba(216,179,106,.38); background: var(--gold); color: #171005; font-weight: 700; }
.management-points-modal {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 32px;
  display: grid;
  gap: 16px;
  overflow-y: auto;
  border: 1px solid rgba(216,179,106,.34);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(0,0,0,.5);
}
.management-points-modal > p,
.management-points-modal > h2 { margin: 0; }
.management-points-modal > p { color: var(--gold); font: 10px/1.2 Consolas, monospace; letter-spacing: .1em; }
.management-points-account { padding: 15px 16px; display: grid; gap: 6px; border-left: 3px solid var(--gold); background: var(--panel-soft); }
.management-points-account > span,
.management-points-account > small { color: var(--muted); }
.management-points-account > strong { overflow-wrap: anywhere; }
.management-points-account b { color: var(--gold); }
.management-points-modal form { display: grid; gap: 14px; }
.management-points-modal label { display: grid; gap: 7px; }
.management-points-modal label > span,
.management-points-modal form > small { color: var(--muted); font-size: 10px; line-height: 1.7; }
.management-points-modal input,
.management-points-modal textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: 0;
  resize: vertical;
  background: var(--panel-soft);
  color: var(--text);
  font: inherit;
}
.management-points-modal input { height: 46px; }
.management-points-modal textarea { min-height: 96px; }
.management-points-modal input:focus,
.management-points-modal textarea:focus { border-color: var(--line-bright); box-shadow: 0 0 0 3px rgba(78,224,210,.07); }
.management-points-modal form > button { min-height: 46px; border-color: rgba(216,179,106,.38); background: var(--gold); color: #171005; font-weight: 700; }
.management-task-review-modal { overflow-y: auto; }
.management-task-review-consequence { padding: 14px 15px; border: 1px solid var(--line); border-left-width: 3px; background: var(--panel-soft); color: var(--text); line-height: 1.7; }
.management-task-review-consequence.is-refund { border-left-color: var(--success); }
.management-task-review-consequence.is-settle { border-left-color: var(--gold); }
.management-task-review-modal form > button.is-settle { background: #b88d43; }
html[data-theme="day"] .management-table-card,
html[data-theme="day"] .temporary-password-modal,
html[data-theme="day"] .management-points-modal { box-shadow: 0 20px 60px rgba(38,61,56,.1); }
body.region-admin-shell .rail { top: 0; }
body.region-admin-shell .stage { padding-top: 0; }
body.region-admin-shell .view { min-height: 100vh; }

@media (max-width: 1180px) {
  .management-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .management-operations-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .management-operations-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .management-operations-detail-grid { grid-template-columns: 1fr; }
  .management-admin-tools { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .rail-nav { grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); }
  body.region-admin-shell .rail { top: auto; }
  .management-page { padding: 24px 14px 92px; gap: 16px; }
  .management-header { align-items: flex-start; flex-direction: column; }
  .management-header > button { width: 100%; }
  .management-scope-banner { align-items: flex-start; flex-direction: column; }
  .management-scope-banner small { text-align: left; }
  .management-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .management-summary article { min-height: 104px; padding: 13px; }
  .management-operations { padding: 15px; }
  .management-operations > header { flex-direction: column; }
  .management-operations-summary { grid-template-columns: 1fr; }
  .management-operations-services { grid-template-columns: 1fr; }
  .management-form-card form,
  .management-form-card:first-child form { grid-template-columns: 1fr; }
  .management-form-card button { width: 100%; }
  .management-table-card > header { align-items: flex-start; flex-direction: column; }
  .management-table-card > header > small { text-align: left; }
  .management-review-actions { flex-direction: column; align-items: stretch; }
}
@media (max-width: 480px) {
  .management-summary { grid-template-columns: 1fr; }
  .temporary-password-modal,
  .management-points-modal { padding: 26px 20px; }
}

/* Keep the complete creation flow reachable on phones. */
@media (max-width: 760px) {
  .mobile-account-button {
    min-width: 0;
    height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: #6f7b78;
    cursor: pointer;
  }
  .mobile-account-button:hover { color: var(--jade); background: rgba(78,224,210,.05); }
  .mobile-account-button svg { width: 17px; height: 17px; }
  .mobile-account-button span { max-width: 100%; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  html[data-theme="day"] .mobile-account-button { color: #65736e; }
  .rail-nav { grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); }

  .chat-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: initial;
    gap: 10px;
  }
  .chat-toolbar > div { min-width: 0; }
  .chat-toolbar h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-chat-sessions {
    min-width: 64px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid rgba(78,224,210,.26);
    border-radius: 4px;
    background: #102023;
    color: var(--jade);
    font-size: 10px;
    cursor: pointer;
  }
  .mobile-chat-sessions svg { width: 14px; }
  .chat-layout .chat-sidebar {
    position: fixed;
    z-index: 111;
    top: var(--signal);
    bottom: 68px;
    left: 0;
    width: min(86vw, 340px);
    display: flex;
    flex-direction: column;
    padding: 14px 12px 20px;
    border-right: 1px solid rgba(78,224,210,.25);
    box-shadow: 24px 0 60px rgba(0,0,0,.52);
    visibility: hidden;
    transform: translateX(-102%);
    transition: transform .24s var(--ease), visibility .24s var(--ease);
  }
  .chat-layout .chat-sidebar.is-mobile-open { visibility: visible; transform: none; }
  .chat-sidebar-mobile-head {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding: 0 4px 10px 8px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
  }
  .chat-sidebar-mobile-head .icon-button { width: 34px; height: 34px; }
  .chat-sidebar .workspace-brand { display: none; }
  .chat-sidebar .new-task-button { margin: 4px 0 18px; }
  .chat-sidebar .conversation-list { min-height: 0; overflow-y: auto; }
  .chat-sidebar .conversation-delete { opacity: 1; }
  .chat-sidebar-scrim {
    position: fixed;
    z-index: 110;
    inset: var(--signal) 0 68px;
    display: block;
    border: 0;
    background: rgba(2,5,7,.68);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .24s var(--ease), visibility .24s var(--ease);
  }
  .chat-sidebar-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  body.chat-sidebar-open { overflow: hidden; }

  .story-studio-backdrop { padding: 0; }
  .story-studio-shell {
    width: 100%;
    height: 100dvh;
    grid-template-rows: 58px 64px 3px minmax(0, 1fr);
    border-radius: 0;
  }
  .story-studio-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 0 10px; }
  .story-studio-mark { width: 32px; height: 32px; }
  .story-studio-brand { gap: 8px; }
  .story-studio-brand p, .story-studio-head-status { display: none; }
  .story-studio-brand h2 { font-size: 16px; }
  .story-studio-head-actions { gap: 5px; }
  .story-head-button { width: 34px; height: 34px; justify-content: center; padding: 0; }
  .story-head-button span { display: none; }
  .story-studio-head-actions .icon-button { width: 34px; height: 34px; }
  .story-history-layer { grid-template-columns: minmax(0, 1fr); }
  .story-history-scrim { display: none; }
  .story-history-panel { width: 100%; border-left: 0; }

  .story-stepper {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .story-stepper button {
    min-width: 112px;
    flex: 0 0 112px;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 5px;
    padding: 0 7px;
    scroll-snap-align: start;
  }
  .story-stepper small { display: none; }
  .story-stage { gap: 12px; padding: 14px 12px 18px; }
  .story-stage-head { flex-direction: column; gap: 9px; }
  .story-stage-head h3 { font-size: 18px; }
  .story-stage-head p { font-size: 9px; line-height: 1.7; }
  .story-stage-state { width: 100%; min-height: 34px; }

  .story-source-workspace,
  .story-split-workspace,
  .story-script-studio,
  .story-character-workspace,
  .story-scene-workspace,
  .story-prompt-workspace,
  .story-generation-workspace,
  .story-director-body.has-final,
  .story-assembly-row-grid {
    min-height: 0;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }
  .story-source-guide {
    min-height: 0;
    grid-template-rows: 150px auto auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .story-source-editor,
  .story-source-snapshot,
  .story-script-brief,
  .story-section-rail,
  .story-generation-settings { overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .story-source-types { grid-template-columns: minmax(0, 1fr); }
  .story-source-input-wrap { min-height: 270px; }
  .story-script-studio { min-height: 0; }
  .story-director-room { min-height: 420px; grid-template-rows: auto auto; }
  .story-director-body { overflow: visible; }
  .story-director-chat-column { min-height: 360px; overflow: visible; }
  .story-script-chat-log { min-height: 260px; max-height: 60vh; }
  .story-final-script { min-height: 360px; border-left: 0; border-top: 1px solid var(--line); }

  .story-character-media-bar,
  .story-asset-kind-bar,
  .story-generation-toolbar { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .story-character-media-bar > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-character-media-bar > p { display: block; text-align: left; white-space: normal; }
  .story-asset-kind-bar .story-asset-kind-run { width: 100%; min-width: 0; }
  .story-output-toolbar {
    min-height: 54px;
    height: auto;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 7px;
    padding: 8px 10px;
  }
  .story-output-toolbar > div { flex: 1 1 100%; justify-content: space-between; }
  .story-output-toolbar em { overflow-wrap: anywhere; }
  .story-item-tabs { min-height: 0; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .story-item-tabs > div:not(.story-item-tabs-empty) { max-height: none; overflow: visible; }
  .story-item-tabs-empty { min-height: 150px; }
  .story-character-placeholders { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 16px 8px; }
  .story-character-placeholders > span { min-width: 0; }
  .story-image-studio { overflow: visible; grid-template-rows: auto auto auto; }
  .story-image-studio-head { min-height: 60px; flex-wrap: wrap; padding: 8px 10px; }
  .story-image-grid { overflow: visible; padding: 8px; }
  .story-image-card { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .story-image-card-media { min-height: 280px; border-right: 0; border-bottom: 1px solid var(--line); }
  .story-image-card-body { overflow: visible; padding: 13px; }

  .story-prompt-toolbar { align-items: stretch; flex-direction: column; gap: 9px; }
  .story-prompt-toolbar > div { flex-wrap: wrap; }
  .story-final-script-pane { min-height: 320px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .story-prompt-editor { min-height: 320px; }
  .story-assembly-toolbar { min-height: 0; flex: 0 0 auto; align-items: stretch; flex-direction: column; padding: 10px; }
  .story-assembly-toolbar > div { justify-content: space-between; }
  .story-assembly-list { overflow: visible; }
  .story-assembly-row-grid > section { border-right: 0; border-bottom: 1px solid var(--line); }
  .story-assembly-row > header { grid-template-columns: 30px minmax(0, 1fr); }
  .story-assembly-row-status { grid-column: 1 / -1; max-width: none; }

  .story-generation-toolbar > label,
  .story-generation-toolbar > span { justify-content: flex-start; }
  .story-generation-toolbar select { min-width: 0; flex: 1; }
  .story-generation-toolbar .story-setting-block { justify-content: flex-start; flex-wrap: wrap; }
  .story-generation-assets,
  .story-generation-segments,
  .story-generation-queue { min-height: 260px; grid-template-rows: auto auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .story-asset-library { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .story-video-segment-list, .story-video-task-list { overflow: visible; }

  .story-stage-actions,
  .story-stage-actions-end,
  .story-stage-actions-final {
    min-height: 0;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .story-stage-actions > span { justify-self: stretch; justify-content: center; order: -1; }
  .story-source-actions, .story-stage-choice-group { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .story-back-button, .story-next-button, .story-choice-button, .story-optional-button { width: 100%; min-width: 0; justify-self: stretch; }
}