:root { color-scheme: dark; --mint: #09dec3; font-family: Arial, "Microsoft YaHei", sans-serif; }
body { font-size: 14px; color: #eee; background: #090909; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { color: inherit; }
button:disabled { opacity: .38; cursor: not-allowed; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.ui-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; }
.ui-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 0; padding: 0 18px; border-radius: 12px; background: #1b1b1b; color: #f2f2f2; white-space: nowrap; }
.ui-button:not(:disabled):hover { background: #303030; }
.ui-button.primary { background: #05bda5; color: #041d19; }
.ui-button.primary.is-submitting { background: #f0b84b; color: #17120a; cursor: wait; opacity: 1; }
.ui-button.primary[data-state="running"] { background: #79e6d2; color: #06211d; opacity: 1; }
.ui-button.primary.is-submitting .ui-icon { animation: workflow-spin .8s linear infinite; }
.ui-button.pill { background: #373737; border-radius: 24px; min-height: 36px; }
.ui-button.white-button { background: #fafafa; color: #151515; border-radius: 24px; }
.ui-button.white-button:not(:disabled):hover { background: #d0fff7; }
.ui-button.danger { color: #ff9292; }
.icon-button { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #8a8a8a; border-radius: 8px; flex-shrink: 0; }
.icon-button:hover { background: #282828; color: #fff; }
.text-button { border: 0; background: transparent; padding: 5px 10px; color: #bbb; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.text-button:hover { color: #fff; }
.mint { color: #2bdcc7; }
.muted { color: #8a8a8a; line-height: 1.7; }
.real-home { min-height: 100vh; background: #090909; }
.real-sidebar { width: 80px; height: 100vh; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; z-index: 4; background: #090909; }
.brand-mark { margin-top: 28px; border: 0; width: 44px; height: 44px; display: grid; place-items: center; padding: 4px; background: #f3f3f3; border-radius: 8px; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.side-main { display: flex; flex-direction: column; gap: 16px; margin-top: 66px; }
.side-main .icon-button { width: 48px; height: 48px; border-radius: 12px; }
.side-main .is-active { color: #fff; background: radial-gradient(at left bottom, #21413d, #161d1c 85%); box-shadow: inset 0 0 0 1px #293532; }
.side-bottom { margin-top: auto; padding-bottom: 25px; display: flex; flex-direction: column; gap: 20px; }
.home-header { position: absolute; right: 28px; top: 20px; display: flex; align-items: center; gap: 12px; }
.real-top-actions { display: flex; align-items: center; gap: 12px; }
.real-top-actions .ui-button, .home-header > .ui-button { min-height: 44px; }
.home-content { margin-left: 80px; padding: 62px 56px; }
.home-content > h1 { margin: 0; font-size: 24px; font-weight: 500; }
.home-tabs { display: flex; align-items: center; gap: 40px; margin: 43px 0 24px; min-height: 25px; }
.home-tabs .tab { color: #6b6b6b; background: none; border: 0; font-size: 18px; padding: 0; }
.home-tabs .tab.active { color: #ededed; }
.tab-info { font-size: 15px; color: #777; }
.registration-link { margin-left: auto; border: 0; background: none; color: #9d9d9d; }
.home-projects { display: grid; grid-template-columns: repeat(auto-fill, 232px); gap: 32px 16px; }
.home-project { width: 232px; min-width: 0; }
.project-cover { display: block; width: 232px; height: 174px; border: 0; border-radius: 16px; padding: 0; background: #191919; overflow: hidden; }
.project-cover img { width: 100%; height: 100%; object-fit: cover; }
.project-thumbnail { display: block; width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: inherit; background: #282828; }
.project-thumbnail > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-thumbnail-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #494949; background: #282828; }
.project-cover:hover { box-shadow: 0 0 0 1px #666; }
.project-cover.new-cover { color: #777; display: grid; place-items: center; }
.home-project > strong { display: block; font-size: 13px; font-weight: 400; margin-top: 15px; }
.project-info { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.project-name { text-align: left; overflow: hidden; text-overflow: ellipsis; border: 0; padding: 0; background: none; font-size: 13px; }
.project-info .icon-button { width: 28px; height: 28px; }
.home-project > small { display: block; font-size: 12px; color: #6b6b6b; margin-top: 3px; }
.real-canvas { position: relative; height: 100vh; overflow: hidden; background-color: #090909; background-image: radial-gradient(#303030 .65px, transparent .65px); background-size: 32px 32px; touch-action: none; user-select: none; }
.real-canvas input, .real-canvas textarea, .real-canvas select, .real-canvas [contenteditable="true"] { user-select: text; }
.floating-project-title { position: absolute; z-index: 5; top: 16px; left: 20px; width: 300px; height: 44px; border-radius: 12px; background: #1a1a1a; display: flex; align-items: center; padding: 0 10px; gap: 4px; }
.floating-project-title > span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.real-canvas > .real-top-actions { position: absolute; z-index: 5; right: 20px; top: 16px; }
.creation-surface { position: relative; width: 954px; margin: 84px auto 0; transform-origin: center top; }
.node-heading { display: flex; align-items: center; gap: 8px; height: 36px; margin: 0 0 0 -4px; font-weight: 500; }
.node-heading > span { height: 22px; width: 22px; display: grid; place-items: center; color: #07241f; font-size: 12px; font-weight: 600; background: #aef1dc; clip-path: polygon(50% 0,65% 28%,100% 36%,79% 66%,77% 100%,44% 87%,11% 100%,15% 60%,0 34%,34% 27%); }
.creation-panel { width: 954px; min-height: 686px; height: auto; background: #191919; border-radius: 27px; padding: 16px 20px 24px; }
.creation-scroll { height: auto; overflow: visible; }
.creation-label { color: #858585; margin: 8px 0 12px; }
.creation-file { height: 102px; background: #232323; border-radius: 13px; padding: 22px; display: flex; gap: 18px; align-items: center; margin-bottom: 28px; }
.file-picture { width: 38px; height: 48px; color: #8ae0d6; background: linear-gradient(#252e30,#255b59); display: grid; place-items: center; border-radius: 5px; }
.creation-file strong { display: block; font-weight: 500; }
.creation-file small { display: block; margin-top: 8px; color: #858585; font-size: 13px; }
.creation-file .ui-button { margin-left: auto; }
.creation-title-input { display: flex; align-items: center; height: 40px; background: #232323; border-radius: 8px; margin-bottom: 28px; }
.creation-title-input input { flex: 1; background: none; border: 0; color: #eee; padding: 0 13px; outline: none; }
.creation-title-input small { color: #6e6e6e; padding: 0 12px; }
.ratio-options { display: flex; gap: 3px; justify-content: space-between; margin-bottom: 28px; }
.ratio-option { width: 180px; height: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 17px; border: 0; border-radius: 12px; background: transparent; color: #737373; }
.ratio-option.chosen { background: #232323; color: #eee; }
.ratio-outline { display: block; width: 42px; max-height: 47px; border: 1px solid currentColor; border-radius: 3px; }
.ratio-option:first-child .ratio-outline { width: 27px; }
.ratio-option:nth-child(2) .ratio-outline { width: 30px; }
.ratio-option:nth-child(4) .ratio-outline { width: 61px; }
.style-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.style-label-actions { display: flex; align-items: center; gap: 14px; }
.style-label-actions .more-film-styles { color: #7de3d2; }
.selected-film-style { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px; border: 1px solid #466a62; border-radius: 8px; background: #1b2623; }
.selected-film-style-preview { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; background: none; border: 0; color: #e7eee9; text-align: left; cursor: pointer; }
.selected-film-style-preview img { width: 112px; height: 48px; object-fit: contain; background: #101413; }
.selected-film-style-preview span { min-width: 0; }
.selected-film-style-preview small, .selected-film-style-preview strong { display: block; overflow-wrap: anywhere; }
.selected-film-style-preview small { margin-bottom: 5px; color: #96b0a9; font-size: 12px; }
.selected-film-style-preview strong { font-size: 14px; font-weight: 500; }
.real-modal.film-style-modal { width: min(1480px, 100%); overflow: hidden; display: flex; flex-direction: column; border-radius: 8px; }
.film-style-modal .real-modal-header, .film-style-modal .real-modal-footer { flex-shrink: 0; }
.film-style-modal .real-modal-footer { align-items: center; }
.film-style-selection { margin-right: auto; min-width: 0; font-size: 13px; color: #b9c9c4; overflow-wrap: anywhere; }
.film-style-browser { position: relative; height: min(65vh, 660px); flex: 0 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr); gap: 26px; align-items: stretch; }
.film-style-browser.public-style-picker { height: auto; }
.film-style-detail { min-width: 0; max-height: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: #515854 transparent; padding-right: 16px; border-right: 1px solid #343b35; }
.film-style-detail.public-preview { display: flex; align-items: center; justify-content: center; padding-right: 16px; }
.film-style-detail.public-preview .film-style-picture { width: 100%; max-height: 100%; }
.film-style-detail.public-preview .film-style-picture img { width: 100%; max-height: min(62vh, 660px); aspect-ratio: 7 / 3; object-fit: contain; }
.film-style-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.film-style-detail-heading small { color: #9aaba4; font-size: 12px; }
.film-style-detail-heading h3 { font-size: 17px; line-height: 1.5; font-weight: 500; margin: 5px 0 0; overflow-wrap: anywhere; }
.film-style-category { flex-shrink: 0; font-size: 11px; color: #b4bba9; margin-top: 4px; }
.film-style-picture { display: block; width: 100%; padding: 0; border: 0; background: #111; cursor: zoom-in; }
.film-style-picture img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 3; object-fit: contain; }
.film-style-image-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0 10px; }
.film-style-image-actions small { font-size: 11px; color: #868e87; }
.film-style-image-actions a { font-size: 12px; text-decoration: none; color: #b9d4cc; }
.film-style-definition { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 0 12px; margin: 0; font-size: 13px; line-height: 1.75; }
.film-style-definition dt, .film-style-definition dd { margin: 0; padding: 11px 0; border-top: 1px solid #303630; overflow-wrap: anywhere; }
.film-style-definition dt { color: #9ca99d; }
.film-style-definition dd { color: #dddeda; }
.film-style-prefix { padding: 16px 0 8px; border-top: 1px solid #445349; }
.film-style-prefix h4 { color: #8ee0ca; margin: 0 0 10px; font-size: 13px; font-weight: 500; }
.film-style-prefix p, .film-style-original p { font-size: 13px; line-height: 1.85; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #d4dbd5; }
.film-style-original { border-top: 1px solid #303630; padding: 12px 0; font-size: 13px; }
.film-style-original summary { cursor: pointer; color: #b8c7bc; }
.film-style-original p { padding-top: 12px; }
.film-style-catalog { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.film-style-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.film-style-search { min-width: 120px; display: flex; align-items: center; gap: 8px; flex: 1; border: 1px solid #3d453f; background: #171c19; border-radius: 5px; padding: 0 10px; color: #9eafa4; }
.film-style-search input { width: 100%; min-width: 0; border: 0; background: transparent; color: #e8eee9; padding: 10px 0; outline: 0; font-size: 13px; }
.film-style-search:focus-within { border-color: #76bca8; }
.film-style-toolbar select { min-width: 0; max-width: 140px; border: 1px solid #3d453f; border-radius: 5px; background: #171c19; color: #dce4dd; font-size: 12px; padding: 9px; }
.film-style-count { color: #8c9b90; font-size: 12px; }
.film-style-grid { display: grid; grid-template-rows: repeat(var(--film-style-rows, 3), 128px); grid-auto-flow: column; grid-auto-columns: 248px; align-content: start; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 15px; scrollbar-width: thin; scrollbar-color: #647b6a #202721; overscroll-behavior-x: contain; }
.film-style-card { min-width: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; padding: 15px; border: 1px solid #3a4035; border-radius: 5px; color: #e2e1d9; background: #191b17; cursor: pointer; }
.film-style-card:hover, .film-style-card:focus-visible, .film-style-card.previewing { border-color: #c6ad71; background: #24251c; outline: 0; }
.film-style-card.applied { box-shadow: inset 3px 0 #6bd4b9; }
.film-style-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.film-style-card-title strong { font-size: 14px; line-height: 1.45; font-weight: 500; overflow-wrap: anywhere; }
.film-style-card-title .ui-icon { flex-shrink: 0; color: #b6a579; margin-top: 2px; }
.film-style-card-description { color: #a3a799; font-size: 12px; line-height: 1.65; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.film-style-empty { grid-row: 1 / -1; align-self: center; color: #9da79c; font-size: 13px; }
.film-style-zoom { position: absolute; inset: 0; z-index: 2; background: #121613; display: flex; align-items: center; justify-content: center; padding: 48px 8px 12px; }
.film-style-zoom[hidden] { display: none; }
.film-style-zoom > .icon-button { position: absolute; top: 6px; right: 6px; }
.film-style-zoom img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 850px) {
  .film-style-browser { height: min(70vh, 700px); display: flex; flex-direction: column; overflow-y: auto; gap: 18px; }
  .film-style-browser.public-style-picker { height: auto; max-height: calc(100vh - 180px); }
  .film-style-catalog { order: 0; flex: 0 0 auto; overflow: visible; }
  .film-style-detail { order: 1; flex: 0 0 auto; max-height: none; overflow: visible; padding-right: 0; border-right: 0; }
  .film-style-detail.public-preview { order: 0; padding-right: 0; }
  .public-style-picker .film-style-catalog { order: 1; }
  .film-style-detail.public-preview .film-style-picture img { max-height: 24vh; }
  .public-style-picker .film-style-grid { grid-template-rows: repeat(2, 112px); }
  .film-style-grid { grid-template-rows: repeat(var(--film-style-rows, 3), 112px); grid-auto-columns: 230px; flex-shrink: 0; }
  .film-style-toolbar { gap: 7px; }
  .film-style-toolbar select { max-width: 118px; }
  .film-style-card { padding: 12px; gap: 8px; }
  .film-style-card-title strong { font-size: 13px; }
  .film-style-card-description { -webkit-line-clamp: 2; }
  .film-style-selection { font-size: 12px; }
  .film-style-modal .real-modal-footer { gap: 8px; margin-top: 14px; flex-wrap: wrap; }
  .film-style-modal .real-modal-footer .ui-button { padding-inline: 12px; }
  .film-style-zoom { position: fixed; inset: 65px 22px 100px; }
}
.style-options { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; }
.style-option { position: relative; width: 100%; min-width: 0; background: none; border: 0; border-radius: 8px; padding: 4px; color: #777; }
.style-option.chosen { background: #272727; color: #fff; }
.style-option-select { width: 100%; min-width: 0; background: none; border: 0; border-radius: 8px; padding: 6px; color: inherit; text-align: left; cursor: pointer; }
.style-option-select:hover, .style-option-select:focus-visible { background: rgba(66,228,191,.1); outline: 1px solid rgba(66,228,191,.5); }
.style-option img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 8px; }
.style-option-select > span:last-child { display: block; margin-top: 9px; font-size: 12px; }
.style-option-config { position: absolute; right: 8px; top: 8px; width: 27px; height: 27px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff; background: rgba(15,15,15,.72); display: grid; place-items: center; opacity: .0; transition: opacity .16s ease, background .16s ease; }
.style-option:hover .style-option-config, .style-option-config:focus-visible { opacity: 1; }
.style-option-config:hover { background: #12bfa4; }
.style-profile-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.style-variant-editor { border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; }
.style-variant-editor > header, .style-variant-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.style-variant-row { margin-top: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.025); }
.creation-actions { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 19px; }
.creation-actions > small { color: #777; font-size: 11px; }
.round-button { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1d1d1d; color: #bbb; border: 0; }
.mint-button { background: #08e3c5; color: #031f19; border-radius: 25px; padding: 0 22px; min-height: 44px; }
.mint-button:not(:disabled):hover { background: #39f2d9; }
.real-zoom { position: absolute; bottom: 16px; left: 20px; z-index: 5; display: flex; align-items: center; gap: 3px; background: #191919; border-radius: 12px; padding: 4px; }
.real-zoom > span { font-size: 13px; min-width: 40px; text-align: center; }
.flow-surface { position: absolute; top: 0; left: 0; width: 0; height: 0; transform-origin: left top; }
.flow-connections { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.flow-connection-base, .flow-connection-pulse { fill: none; stroke-width: 2; }
.flow-connection-base { stroke: #344846; }
.flow-connection-pulse { stroke: url(#flow-connection-gradient); opacity: 0; }
.flow-connection.completed .flow-connection-pulse { opacity: .85; }
.flow-connection-port { fill: #65d8c7; stroke: #193e38; stroke-width: 2; }
.flow-connection-hit { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; cursor: grab; }
.flow-connection-handle { fill: #143d35; stroke: #6bd7be; stroke-width: 2; pointer-events: all; cursor: grab; opacity: .55; }
.flow-connection-handle:focus-visible { outline: none; stroke: #fff; stroke-width: 3; }
.flow-connection:is(:hover,.is-editing) .flow-connection-base { stroke: #68d9c4; }
.flow-connection:is(:hover,.is-editing) .flow-connection-handle { opacity: 1; }
.flow-connection.is-editing :is(.flow-connection-handle,.flow-connection-hit) { cursor: grabbing; }
.flow-node-real > .flow-panel { cursor: grab; }
.flow-node-real.is-dragging > .flow-panel { cursor: grabbing; }
.flow-node-real :is(input,textarea,select,button,a,label) { cursor: auto; }
.flow-node-real :is(button,a) { cursor: pointer; }
.flow-stage-nav {
  position: absolute;
  z-index: 6;
  top: 22px;
  left: 50%;
  width: min(760px, calc(100vw - 420px));
  min-width: 560px;
  transform: translateX(-50%);
  padding: 10px 18px 11px;
  border: 1px solid #2d3d41;
  border-radius: 18px;
  background: rgba(18, 25, 25, .9);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28), inset 0 0 28px rgba(27, 210, 185, .045);
  backdrop-filter: blur(14px);
}
.flow-stage-caption { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 9px; color: #a6d8cf; font-size: 11px; letter-spacing: .04em; }
.flow-stage-caption small { color: #718c88; font-size: 10px; }
.flow-stage-items { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.flow-stage-items::before, .flow-stage-progress {
  content: "";
  position: absolute;
  top: 15px;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 2px;
}
.flow-stage-items::before { background: #354344; }
.flow-stage-progress {
  z-index: 0;
  right: auto;
  width: calc(var(--stage-progress) * .8);
  background: linear-gradient(90deg, #16ad9c, #70f5d2 55%, #b5fff0);
  box-shadow: 0 0 12px rgba(48, 224, 194, .7);
  transition: width 260ms ease;
}
.flow-stage-item {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #6f7e7d;
  padding: 0;
  font-size: 11px;
}
.flow-stage-item.is-processing::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: #6ff5d7;
  box-shadow: 0 0 10px rgba(40, 213, 182, .55);
  pointer-events: none;
  animation: processing-stage-frame 1.8s ease-in-out infinite;
}
.flow-stage-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #435452;
  border-radius: 50%;
  background: #17201f;
  color: #8da5a0;
  box-shadow: 0 0 0 4px #121919;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.flow-stage-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.flow-stage-item.completed, .flow-stage-item.active { color: #c5f6eb; }
.flow-stage-item.completed .flow-stage-number { border-color: #29cbb4; background: #14544c; color: #d9fff7; }
.flow-stage-item.active .flow-stage-number {
  border-color: #9effe8;
  background: linear-gradient(145deg, #36d9bf, #12645d);
  color: #061d1a;
  box-shadow: 0 0 0 4px #121919, 0 0 20px rgba(69, 239, 209, .68);
}
.flow-node-real { position: absolute; width: 610px; }
.flow-node-real > .node-heading { cursor: grab; }
.flow-node-real.is-dragging > .node-heading { cursor: grabbing; }
.flow-node-real .flow-panel { min-height: 720px; height: auto; padding: 24px; background: #191919; border-radius: 24px; overflow: visible; }
.flow-node-real:first-child { width: 520px; }
.episodes-panel { width: 100%; min-width: 0; display: flex; flex-direction: column; }
.planner-header { width: 100%; min-width: 0; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.planner-header > strong { min-width: 0; color: #f0f0f0; font-size: 18px; font-weight: 500; }
.planner-header > .text-button { flex-shrink: 0; margin-left: auto; padding-inline: 0; color: #aaa; }
.planner-episode-list { width: 100%; min-width: 0; display: grid; gap: 2px; }
.planner-episode-row { width: 100%; min-width: 0; min-height: 80px; display: grid; grid-template-columns: 24px 48px minmax(0, 1fr) max-content; align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid #272727; background: transparent; }
.planner-episode-row:last-child { border-bottom: 0; }
.planner-episode-row > .episode-row-number { color: #777; font-size: 14px; text-align: center; }
.planner-thumbnail { width: 48px; height: 64px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: #242424; color: #444; flex-shrink: 0; }
.planner-thumbnail:hover, .planner-thumbnail:focus-visible { background: #2b2b2b; color: #777; }
.planner-episode-row .episode-row-copy { min-width: 0; display: grid; gap: 5px; }
.planner-episode-row .episode-name { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; color: #eee; font-size: 14px; font-weight: 500; text-align: left; }
.planner-episode-row .episode-row-copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #858585; font-size: 11px; }
.planner-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: max-content; }
.planner-row-actions > .pill { min-height: 36px; padding-inline: 18px; background: #2a2a2a; }
.planner-row-actions > .icon-button { opacity: .72; }
.planner-row-actions > .icon-button:hover, .planner-row-actions > .icon-button:focus-visible { opacity: 1; color: #eee; }
.episodes-panel > .episode-add { align-self: center; margin-top: 12px; padding-inline: 0; color: #aaa; }
.flow-summary { padding: 18px; }
.flow-summary > strong { font-size: 22px; }
.flow-summary p { margin: 22px 0; color: #aaa; }
.flow-summary .ui-button { margin: 10px 8px 0 0; }
.flow-connector { width: 100px; height: 1px; background: #555; flex-shrink: 0; margin-top: 36px; }
.node-tabs { display: flex; gap: 22px; margin-bottom: 25px; }
.node-tabs button { color: #717171; background: transparent; border: 0; padding: 0; }
.node-tabs button.active { color: #e8e8e8; }
.flow-episode-browser { display: grid; gap: 14px; }
.flow-episode-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 0 2px 14px; border-bottom: 1px solid #303030; }
.flow-episode-heading h3 { margin: 0; font-size: 18px; font-weight: 500; color: #f0f0f0; }
.flow-episode-heading small { display: block; margin-top: 6px; color: #777; font-size: 12px; }
.flow-episode-count { flex-shrink: 0; padding: 5px 9px; border: 1px solid #3a514b; border-radius: 5px; color: #a2ddd0; font-size: 11px; }
.flow-episode-list { display: grid; gap: 8px; }
.flow-episode-row { width: 100%; min-width: 0; display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) 24px; align-items: center; gap: 12px; padding: 12px 10px; border: 1px solid transparent; border-radius: 8px; background: #222; color: #eee; text-align: left; }
.flow-episode-row:hover, .flow-episode-row:focus-visible { background: #26302e; border-color: #38665b; }
.flow-episode-row .episode-row-number { color: #7f8c87; font-size: 12px; text-align: center; }
.episode-file-tile { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 7px; background: #2e2e2e; color: #eee; }
.episode-row-copy { min-width: 0; display: grid; gap: 5px; }
.episode-row-copy strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.episode-row-copy small { display: flex; align-items: center; gap: 8px; min-width: 0; color: #858585; font-size: 11px; }
.episode-warning { color: #f2a18c; }
.episode-row-arrow { display: grid; place-items: center; color: #888; }
.flow-episode-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.flow-episode-actions .episode-add { padding-left: 2px; }
.planning-copy small { display: block; border-left: 2px solid #11c4ac; color: #7c7c7c; padding-left: 8px; }
.planning-copy p { font-size: 13px; line-height: 1.8; margin: 9px 0 24px; color: #ddd; }
.flow-panel :is(p,strong,small) { overflow-wrap: anywhere; }
.asset-control-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 6px 0 18px; }
.asset-status-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.asset-status-tabs button { min-height: 34px; border: 0; border-radius: 6px; padding: 0 12px; background: #232323; color: #8c8c8c; font-size: 12px; }
.asset-status-tabs button:hover, .asset-status-tabs button.active { background: #19362f; color: #23d8bf; }
.asset-control-row .asset-status-tabs { margin: 0; }
.asset-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.asset-control-row .asset-toolbar { margin: 0; }
.asset-toolbar > .mint, .asset-toolbar > strong { flex: 1; }
.asset-toolbar > strong { min-width: 0; }
.asset-toolbar .icon-button { width: 36px; height: 36px; background: #242424; color: #c4c4c4; border-radius: 50%; }
.asset-toolbar .icon-button:hover { background: #3b3b3b; color: #fff; }
.asset-search-box { display: flex; align-items: center; gap: 4px; min-width: 180px; }
.asset-search-box input { width: 150px; min-width: 0; height: 34px; border: 1px solid #3c3c3c; border-radius: 18px; padding: 0 12px; background: #242424; color: #eee; outline: none; }
.asset-search-box input:focus { border-color: #26c8b0; box-shadow: 0 0 0 2px rgba(38, 200, 176, .12); }
.asset-toolbar .white-button { min-height: 36px; border-radius: 19px; padding: 0 16px; }
.asset-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.node-asset-card { display: flex; align-items: start; gap: 10px; background: transparent; border: 0; padding: 0; text-align: left; min-width: 0; }
.node-asset-card > img, .node-asset-card > .missing-image { width: 94px; height: 132px; object-fit: cover; flex-shrink: 0; border-radius: 7px; }
.node-asset-card.location > img, .node-asset-card.location > .missing-image { width: 176px; height: 100px; }
.node-asset-card > div { min-width: 0; }
.node-asset-card strong { display: block; font-size: 14px; font-weight: 500; margin-top: 4px; }
.node-asset-card small { color: #777; font-size: 11px; display: block; margin: 9px 0; }
.node-asset-card p { color: #999; font-size: 11px; line-height: 1.6; }
.missing-image { display: grid; place-items: center; background: #262626; color: #737373; font-size: 11px; }
.episode-list { display: grid; gap: 9px; }
.episode-list button { display: flex; gap: 10px; align-items: center; border: 0; padding: 15px; background: #222; border-radius: 6px; }
.episode-list button > span:last-child { margin-left: auto; }
.episode-real { padding: 18px; border-radius: 12px; background: #222; margin-bottom: 14px; }
.episode-title { display: flex; align-items: center; justify-content: space-between; }
.episode-title .text-button { color: #eee; padding-left: 0; font-size: 15px; }
.episode-real > small { color: #888; }
.episode-actions { display: flex; gap: 12px; margin-top: 25px; }
.episode-reader-page { min-height: 100vh; background: #090909; color: #eee; padding: 0 20px 20px; }
.episode-reader-top { height: 76px; display: flex; align-items: center; gap: 22px; }
.episode-reader-top > strong { font-size: 16px; font-weight: 500; }
.episode-reader-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.episode-reader-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; min-height: calc(100vh - 96px); }
.episode-reader-list { min-width: 0; padding: 14px 10px; border-radius: 15px; background: #151515; overflow: auto; }
.episode-reader-list > header { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 8px 14px; border-bottom: 1px solid #2a2a2a; }
.episode-reader-list > header small { color: #777; }
.episode-reader-item { width: 100%; display: grid; grid-template-columns: 22px 32px minmax(0, 1fr); align-items: center; gap: 9px; padding: 13px 8px; border: 0; border-radius: 10px; background: transparent; color: #aaa; text-align: left; }
.episode-reader-item:hover { background: #222; color: #eee; }
.episode-reader-item.active { background: #292929; color: #fff; box-shadow: inset 2px 0 #27d5bd; }
.episode-reader-index { color: #777; text-align: center; }
.episode-reader-file { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #eee; background: #292929; }
.episode-reader-summary { min-width: 0; display: grid; gap: 5px; }
.episode-reader-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.episode-reader-summary small { color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.episode-reader-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 26px 20px 18px; border-radius: 17px; background: #191919; }
.episode-reader-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 0 2px 18px; border-bottom: 1px solid #2a2a2a; }
.episode-reader-heading small { color: #777; }
.episode-reader-heading h1 { margin: 6px 0 0; font-size: 24px; font-weight: 500; }
.episode-reader-content { min-height: 0; margin-top: 18px; overflow: auto; padding: 20px 24px; border-radius: 12px; background: #242424; }
.episode-reader-content .episode-script-text { max-height: none; white-space: pre-wrap; }
.episode-reader-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 18px; }
.episode-reader-footer > span { color: #777; font-size: 12px; }
.batch-generate-toolbar { display: flex; align-items: center; gap: 12px; margin: 13px 0; }
.batch-generate-toolbar > span { margin-left: auto; color: #888; font-size: 12px; }
.batch-submit-progress { min-height: 34px; display: flex; align-items: center; margin: 8px 0 12px; padding: 0 10px; border-left: 2px solid #16cbb3; background: #202725; color: #b9d8d3; font-size: 12px; }
.batch-view-status.complete { color: #65d5bb; }
.batch-view-status.pending { color: #e5ba76; }
.batch-submit-button:not(:disabled):hover { background: #13d5bc; color: #071a17; box-shadow: 0 0 0 2px #13d5bc33; }
.batch-submit-button:disabled { opacity: 1; background: #343434; color: #aaa; cursor: not-allowed; }
.batch-generate-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 420px; overflow: auto; }
.batch-generate-item { display: grid; grid-template-columns: 20px 48px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; padding: 8px; border-radius: 8px; background: #242424; }
.batch-generate-item img, .batch-generate-item .missing-image { width: 48px; height: 58px; object-fit: cover; border-radius: 6px; }
.batch-generate-item > span:last-child { min-width: 0; display: grid; gap: 4px; }
.batch-generate-item strong, .batch-generate-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-generate-item small { color: #777; }
.compliance-summary { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; }
.compliance-summary span { color: #777; font-size: 12px; }
.compliance-list { display: grid; gap: 7px; max-height: 420px; overflow: auto; }
.compliance-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: #242424; }
.compliance-row img, .compliance-row .missing-image { width: 44px; height: 54px; object-fit: cover; border-radius: 5px; }
.compliance-row > div { min-width: 0; display: grid; gap: 4px; }
.compliance-row small { color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.real-storyboard { height: 100vh; min-height: 600px; background: #090909; overflow: hidden; display: flex; flex-direction: column; padding: 0 20px 18px; }
.real-storyboard-top { display: flex; align-items: center; flex-shrink: 0; height: 90px; gap: 2px; }
.episode-switcher { position: relative; z-index: 5; }
.episode-switcher-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 10px; border-radius: 8px; }
.episode-switcher-trigger:hover, .episode-switcher-trigger[aria-expanded="true"] { background: #202020; color: #fff; }
.episode-switcher-trigger[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.episode-switcher-menu { position: absolute; top: calc(100% + 8px); left: 0; width: min(280px, calc(100vw - 28px)); display: grid; gap: 4px; padding: 7px; border: 1px solid #343434; border-radius: 11px; background: #191919; box-shadow: 0 18px 44px #000b; }
.episode-switcher-option { width: 100%; min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; align-items: center; gap: 8px; border: 0; border-radius: 7px; padding: 9px 8px; background: transparent; color: #aaa; text-align: left; }
.episode-switcher-option:hover, .episode-switcher-option.active { background: #2a2a2a; color: #fff; }
.episode-switcher-option > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.episode-switcher-option strong, .episode-switcher-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.episode-switcher-option strong { font-size: 12px; font-weight: 500; }
.episode-switcher-option small { color: #777; font-size: 10px; }
.episode-switcher-index { color: #777; font-size: 11px; text-align: center; }
.storyboard-top-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.storyboard-top-right > button { min-height: 44px; }
.storyboard-real-panel { background: #191919; border-radius: 24px; padding: 0 20px 20px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.storyboard-real-title { height: 66px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.storyboard-real-title > strong { font-weight: 500; }
.storyboard-real-title > div { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.storyboard-records { display: grid; gap: 8px; }
.storyboard-record-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid #333; min-width: 0; }
.storyboard-record-row > div { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.storyboard-record-row > button { flex-shrink: 0; }
.storyboard-record-detail { display: grid; gap: 24px; min-width: 0; }
.storyboard-record-group { min-width: 0; padding-bottom: 20px; border-bottom: 1px solid #333; }
.storyboard-record-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.storyboard-record-group video { display: block; width: 100%; max-height: 320px; background: #080808; }
.storyboard-record-copy { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; font-size: 13px; max-height: 240px; overflow-y: auto; }
.storyboard-record-downloads { display: flex; flex-wrap: wrap; gap: 8px; }
.storyboard-real-title .text-button + .text-button { border-left: 1px solid #333; margin-left: 8px; }
.storyboard-real-columns { flex: 1; min-height: 0; display: grid; grid-template-columns: 270px minmax(0, 1fr) 280px; gap: 16px; }
.real-preview { border-radius: 16px; background: #232323; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.real-preview video { width: 100%; max-height: 100%; }
.real-preview-media { position: relative; width: 100%; height: 100%; display: grid; place-items: center; min-height: 0; }
.real-preview-media > video { width: 100%; height: 100%; object-fit: contain; }
.video-preview-actions { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; justify-content: center; pointer-events: none; }
.video-preview-actions > * { pointer-events: auto; min-height: 34px; padding: 0 12px; font-size: 11px; }
.video-history { position: absolute; left: 12px; right: 12px; bottom: 58px; max-width: 280px; margin: 0 auto; color: #ddd; font-size: 11px; }
.video-history summary { width: fit-content; margin: 0 auto; cursor: pointer; padding: 6px 9px; border-radius: 6px; background: #151515d9; }
.video-history-list { display: grid; gap: 4px; margin-top: 5px; padding: 7px; border-radius: 7px; background: #151515ef; }
.video-history-list a { display: inline-flex; align-items: center; gap: 5px; color: #bfeee2; text-decoration: none; }
.preview-message { display: flex; flex-direction: column; align-items: center; color: #888; gap: 15px; }
.preview-message .text-button { font-size: 11px; color: #858585; }
.storyboard-real-script { background: #232323; border-radius: 16px; min-height: 0; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.script-readonly { min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #444 transparent; padding: 20px 20px 10px; line-height: 1.95; font-size: 13px; flex: 1; }
.script-readonly > strong { white-space: pre-wrap; font-weight: 500; }
.script-readonly p { margin: 12px 0; }
.duration-pill { border-radius: 4px; border: 0; background: #444; color: #fff; font-size: 12px; padding: 3px 9px; margin-left: 5px; }
.ref-chip { display: inline-flex; align-items: center; gap: 3px; border: 0; background: #444; color: #eee; padding: 1px 4px; border-radius: 5px; font-size: 11px; max-width: 220px; }
.ref-chip img { width: 16px; height: 16px; object-fit: cover; border-radius: 3px; }
.storyboard-real-controls { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 10px 14px; }
.storyboard-real-controls .ui-button.pill { margin-left: auto; }
.parameter-button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #eee; padding: 6px 2px; font-size: 12px; white-space: nowrap; }
.parameter-button:hover { background: #373737; border-radius: 5px; }
.storyboard-side-panel { overflow: auto; min-width: 0; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.storyboard-side-panel > header { display: flex; gap: 6px; align-items: center; margin: 0 0 10px; }
.storyboard-side-panel > header strong { font-size: 13px; }
.storyboard-side-panel > header select { background: #292929; border: 0; border-radius: 4px; color: #eee; font-size: 11px; padding: 4px; }
.storyboard-side-panel > header .icon-button { margin-left: auto; }
.storyboard-side-panel > section > small { font-size: 12px; }
.storyboard-assets { display: grid; gap: 10px; margin: 10px 0 14px; }
.storyboard-assets.character { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.storyboard-assets.location { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.storyboard-asset-button { position: relative; border: 0; padding: 0; background: transparent; text-align: left; display: grid; gap: 5px; min-width: 0; }
.storyboard-asset-button > img, .storyboard-asset-button > .missing-image { width: 100%; height: 114px; object-fit: cover; border-radius: 8px; }
.storyboard-assets.location .storyboard-asset-button > img, .storyboard-assets.location .missing-image { height: 86px; }
.storyboard-asset-button > span:not(.missing-image) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.storyboard-asset-button > i { position: absolute; right: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; font-size: 11px; font-style: normal; color: #052b23; background: #42e4bf; display: grid; place-items: center; }
.original-source-text { white-space: pre-wrap; line-height: 1.8; font-size: 13px; color: #bbb; }
.real-timeline { flex: 0 0 232px; min-height: 0; }
.real-timeline > header { display: flex; justify-content: space-between; align-items: center; height: 62px; color: #777; }
.real-timeline > header .icon-button { color: #eee; }
.real-timeline > header .no-video { pointer-events: none; opacity: .25; }
.timeline-slider { display: flex; gap: 10px; align-items: center; }
.timeline-slider input { width: 130px; accent-color: #fff; }
.timeline-scroll { overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.timeline-real-track { width: max-content; display: flex; align-items: end; gap: 2px; }
.timeline-column { flex-shrink: 0; position: relative; }
.timeline-select { position: absolute; right: 8px; top: 36px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; background: #111c; border-radius: 4px; }
.timeline-select input, .timeline-batch-actions input { width: 17px; height: 17px; margin: 0; accent-color: #20dbc0; cursor: pointer; }
.timeline-batch-actions { display: flex; align-items: center; gap: 14px; color: #ddd; }
.timeline-batch-actions .ui-button { min-height: 32px; font-size: 12px; }
.generation-settings-scope { display: flex; align-items: end; gap: 12px; }
.generation-settings-scope .real-field { flex: 1; min-width: 0; }
.timeline-tick { display: block; height: 31px; color: #777; font-size: 10px; background-image: repeating-linear-gradient(to right,#242424 0,#242424 1px,transparent 1px,transparent 20px); background-size: 20px 8px; background-repeat: repeat-x; }
.real-timeline-card { display: block; height: 123px; border: 2px solid transparent; border-radius: 12px; background: #191919; padding: 12px 8px; text-align: left; color: #eee; }
.real-timeline-card.selected { border-color: #20e6c8; }
.real-timeline-card strong { display: block; font-size: 12px; }
.real-timeline-card > span { display: block; width: fit-content; margin: 24px auto 0; border-radius: 16px; padding: 5px 10px; background: #303030; font-size: 11px; color: #aaa; }
.real-timeline-card.has-video { position: relative; overflow: hidden; }
.real-timeline-card .timeline-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.real-timeline-card.has-video strong { position: absolute; top: 8px; left: 8px; padding: 2px 4px; background: #0009; border-radius: 3px; }
.real-timeline-card.has-video > span { position: absolute; bottom: 6px; left: 6px; margin: 0; background: #000a; color: #fff; }
.add-group { width: 60px; height: 123px; background: #191919; border: 0; border-radius: 12px; color: #aaa; }
.real-modal-backdrop { position: fixed; z-index: 30; inset: 0; background: #000b; backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.real-modal { width: min(520px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: #1c1c1c; border: 1px solid #343434; border-radius: 14px; padding: 20px; box-shadow: 0 20px 100px #0008; scrollbar-width: thin; scrollbar-color: #555 transparent; }
.real-modal.wide { width: min(960px, 100%); }
.real-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.real-modal-header h2 { font-size: 17px; margin: 0; font-weight: 500; }
.real-modal-footer { display: flex; gap: 10px; justify-content: end; margin-top: 22px; }
.workflow-status { flex: 1 1 100%; min-height: 20px; margin: 0; padding: 9px 12px; border: 1px solid #343434; border-radius: 7px; background: #222; }
.workflow-status[data-state="submitting"] { color: #f5d18a; border-color: #72582b; background: #2c2517; }
.workflow-status[data-state="running"] { color: #9cf3e5; border-color: #286b60; background: #162c29; }
.workflow-modal { display: flex; flex-direction: column; overflow: hidden; }
.workflow-modal > .real-modal-header, .workflow-modal > .real-modal-footer { flex-shrink: 0; }
.workflow-modal > .dialog-form { overflow-y: auto; min-height: 0; padding-right: 4px; }
.workflow-modal > .real-modal-footer { flex-wrap: wrap; align-items: center; gap: 10px; }
.workflow-submit { min-width: 150px; }
@media (max-width: 540px) {
  .workflow-modal > .real-modal-footer { gap: 8px; }
  .workflow-modal > .real-modal-footer > .ui-button { flex: 1 1 calc(50% - 8px); min-width: 0; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-button.primary.is-submitting .ui-icon { animation: none; }
}
@keyframes workflow-spin { to { transform: rotate(360deg); } }
.real-field { display: flex; flex-direction: column; gap: 9px; color: #999; font-size: 13px; min-width: 0; }
.real-field input, .real-field select, .real-field textarea, .large-textarea { width: 100%; border: 1px solid #3a3a3a; background: #282828; border-radius: 6px; color: #eee; padding: 10px; outline: none; }
.real-field input:focus, .real-field select:focus, .real-field textarea:focus, .large-textarea:focus { border-color: #18c9ad; }
.real-field textarea { line-height: 1.7; resize: vertical; min-height: 70px; }
.asset-view-picker { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 10px; padding: 12px; border: 1px solid #343434; border-radius: 8px; background: #202020; }
.asset-view-picker .real-field { gap: 7px; }
.asset-view-picker .real-field > span { font-size: 11px; color: #888; }
.asset-view-picker input, .asset-view-picker select { min-height: 38px; }
.large-textarea { min-height: 340px; resize: vertical; line-height: 1.8; }
.dialog-form { display: grid; gap: 18px; }
.real-notice { color: #a0b8b2; background: #152822; border: 1px solid #29493f; padding: 12px; border-radius: 6px; line-height: 1.7; font-size: 12px; margin: 12px 0; }
.real-notice.error { color: #efbdbd; background: #352022; border-color: #704044; }
.action-list { display: grid; gap: 10px; }
.action-list > button { min-height: 48px; justify-content: start; gap: 10px; }
.action-list > button small { color: #777; margin-left: auto; }
.action-list a { color: #7ce2d1; padding: 10px 0; }
.empty-real { padding: 40px 20px; color: #777; text-align: center; }
.history-item { border-bottom: 1px solid #333; padding: 15px 0; display: flex; flex-direction: column; gap: 10px; }
.history-item strong { font-size: 13px; }
.history-item small { color: #777; font-size: 11px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; }
.checkbox-label input { accent-color: #17d0b1; }
.shot-editor { padding: 18px; border: 1px solid #383838; border-radius: 8px; display: grid; gap: 13px; }
.shot-editor header { display: flex; align-items: center; gap: 14px; }
.shot-editor header > input { width: 75px; border: 1px solid #444; background: #292929; border-radius: 5px; padding: 6px; color: #eee; }
.shot-editor header .icon-button { margin-left: auto; }
.asset-dialog-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.5fr); gap: 20px; }
.asset-dialog-preview { background: #292929; border-radius: 9px; min-height: 400px; padding: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 25px; overflow: hidden; }
.asset-dialog-preview img, .asset-dialog-preview video { max-width: 100%; max-height: 480px; object-fit: contain; }
.asset-detail-page { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 16px; padding: 16px; background: #090909; color: #eee; }
.asset-detail-sidebar { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.asset-detail-back { display: inline-flex; align-items: center; gap: 7px; width: fit-content; border: 0; background: transparent; color: #ddd; padding: 8px 10px; font-size: 12px; }
.asset-detail-back:hover { color: #fff; }
.asset-detail-add { min-height: 48px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; border: 0; border-radius: 10px; padding: 0 14px; background: #151515; color: #eee; }
.asset-detail-add:hover { background: #242424; }
.asset-detail-list { display: grid; gap: 7px; overflow: auto; padding-right: 3px; }
.asset-detail-list-item { width: 100%; min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; align-items: center; gap: 9px; border: 0; border-radius: 9px; padding: 8px; background: transparent; color: #aaa; text-align: left; }
.asset-detail-list-item:hover, .asset-detail-list-item.active { background: #202020; color: #fff; }
.asset-detail-list-item.active { box-shadow: inset 2px 0 #26d9bf; }
.asset-detail-list-item > img, .asset-detail-list-item > .missing-image { width: 42px; height: 42px; border-radius: 7px; object-fit: cover; }
.asset-detail-list-item > span { min-width: 0; display: grid; gap: 4px; }
.asset-detail-list-item strong, .asset-detail-list-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-detail-list-item strong { font-size: 12px; font-weight: 500; }
.asset-detail-list-item small { color: #777; font-size: 10px; }
.asset-detail-main { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; }
.asset-detail-header { display: flex; align-items: center; justify-content: space-between; min-height: 58px; }
.asset-detail-header small { color: #777; font-size: 11px; }
.asset-detail-header h1 { margin: 5px 0 0; font-size: 21px; font-weight: 500; }
.asset-detail-header-actions { display: flex; align-items: center; gap: 9px; }
.asset-detail-card { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; padding: 20px; border-radius: 18px; background: #191919; }
.asset-detail-preview { min-width: 0; min-height: 360px; height: min(68vh, 720px); align-self: start; display: flex; align-items: center; justify-content: center; overflow: auto; border-radius: 11px; background: #252525; }
.asset-detail-preview-media { display: block; max-width: 100%; max-height: min(68vh, 720px); width: auto; height: auto; object-fit: contain; }
.asset-detail-preview-media:hover { cursor: zoom-in; }
.asset-detail-preview-empty { display: grid; place-items: center; gap: 10px; color: #777; font-size: 12px; }
.asset-detail-info { min-width: 0; min-height: 0; max-height: max(360px, min(68vh, 720px)); display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.asset-detail-info-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #303030; }
.asset-detail-info-heading > span { font-size: 14px; color: #aaa; }
.asset-detail-info-heading .ui-button { min-height: 34px; padding: 0 13px; font-size: 11px; }
.asset-detail-meta { display: grid; gap: 18px; margin: 6px 0 0; min-height: 0; overflow: auto; }
.asset-detail-meta > div { display: grid; gap: 7px; }
.asset-detail-meta dt { color: #777; font-size: 11px; }
.asset-detail-meta dd { margin: 0; color: #ddd; font-size: 12px; line-height: 1.75; }
.asset-detail-prompt { color: #aaa !important; white-space: pre-wrap; overflow-wrap: anywhere; }
.asset-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; }
.asset-detail-actions .ui-button { min-height: 36px; padding: 0 13px; font-size: 11px; }
.asset-detail-view-strip { grid-column: 1 / -1; min-width: 0; display: flex; align-items: stretch; gap: 10px; overflow-x: auto; padding-top: 2px; }
.asset-detail-add-view, .asset-detail-view-thumb { width: 112px; height: 82px; flex: 0 0 112px; display: grid; place-items: center; gap: 5px; border: 1px solid transparent; border-radius: 9px; overflow: hidden; background: #242424; color: #25d8bd; }
.asset-detail-add-view:hover, .asset-detail-view-thumb:hover, .asset-detail-view-thumb.active { border-color: #24d7bc; background: #29312f; }
.asset-detail-view-thumb { position: relative; color: #eee; text-align: left; }
.asset-detail-view-thumb img, .asset-detail-view-thumb .missing-image { width: 100%; height: 58px; object-fit: contain; background: #1a1a1a; }
.asset-detail-view-thumb small { width: 100%; padding: 0 7px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.batch-kind-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 10px; }
.batch-kind-tabs button { min-height: 32px; padding: 0 12px; border: 1px solid #383838; border-radius: 7px; background: #232323; color: #aaa; }
.batch-kind-tabs button.active { border-color: #1bd3b6; background: #173e39; color: #e6fffa; }
.batch-ratio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 12px; }
.batch-ratio-card { display: grid; gap: 8px; min-width: 0; padding: 11px; border: 1px solid #353535; border-radius: 8px; background: #202020; }
.batch-ratio-card strong { color: #ddd; font-size: 12px; }
.batch-ratio-card .real-field { gap: 5px; }
.batch-ratio-card .real-field > span { font-size: 10px; color: #999; }
.batch-ratio-card .checkbox-label { font-size: 11px; }
.batch-ratio-card select { min-height: 31px; padding: 5px 7px; font-size: 11px; }
.batch-generate-list { grid-template-columns: 1fr; max-height: 460px; }
.batch-generate-item { display: grid; grid-template-columns: 1fr; gap: 9px; padding: 10px; border: 1px solid #303030; border-radius: 8px; background: #222; }
.batch-generate-item-head { display: grid; grid-template-columns: 20px 48px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; }
.batch-generate-item-head img, .batch-generate-item-head .missing-image { width: 48px; height: 58px; object-fit: contain; border-radius: 6px; background: #1b1b1b; }
.batch-generate-item-head > span { min-width: 0; display: grid; gap: 4px; }
.batch-generate-item-head strong, .batch-generate-item-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-generate-item-head small { color: #777; font-size: 10px; }
.batch-generate-targets { display: grid; gap: 6px; padding-left: 29px; }
.batch-generate-toolbar { flex-wrap: wrap; }
.batch-generate-target { display: grid; grid-template-columns: 20px minmax(0, 1fr) 70px auto auto; align-items: center; gap: 7px; min-width: 0; padding: 6px 7px; border-radius: 6px; background: #292929; color: #bbb; font-size: 11px; }
.batch-generate-target > span { min-width: 0; overflow-wrap: anywhere; }
.batch-generate-target .checkbox-label { white-space: nowrap; gap: 4px; font-size: 10px; }
.batch-generate-target.primary { border-left: 2px solid #26d9bf; }
.batch-generate-target.location { grid-template-columns: 20px minmax(0, 1fr) 70px auto; }
.batch-generate-target select { min-width: 0; padding: 4px 5px; border: 1px solid #444; border-radius: 4px; background: #171717; color: #ddd; font-size: 10px; }
.batch-generate-target em { color: #777; font-size: 10px; font-style: normal; white-space: nowrap; }
.asset-full-preview { display: grid; place-items: center; min-height: min(78vh, 820px); padding: 10px; background: #0c0c0c; }
.asset-full-preview img, .asset-full-preview video { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; }
@media (max-width: 900px) {
  .asset-detail-page { grid-template-columns: 1fr; padding: 10px; }
  .asset-detail-sidebar { max-height: 190px; }
  .asset-detail-list { display: flex; overflow-x: auto; }
  .asset-detail-list-item { min-width: 190px; }
  .asset-detail-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .asset-detail-info { min-height: 260px; max-height: none; }
  .asset-detail-view-strip { grid-row: 3; }
  .asset-detail-preview { height: min(62vh, 560px); min-height: 260px; }
  .asset-detail-preview-media { max-height: min(62vh, 560px); }
  .batch-ratio-grid { grid-template-columns: 1fr; }
  .batch-generate-targets { padding-left: 0; }
}
.voice-editor { border-top: 1px solid #353535; padding-top: 18px; display: grid; gap: 14px; }
.voice-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.voice-editor strong, .voice-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.voice-tabs { display: flex; background: #242424; padding: 3px; border-radius: 6px; width: fit-content; }
.voice-tabs button { border: 0; background: transparent; color: #8f8f8f; padding: 6px 12px; border-radius: 4px; }
.voice-tabs button.active { color: #eee; background: #3b3b3b; }
.voice-reference { display: grid; gap: 12px; }
.voice-reference > p { border: 1px dashed #454545; padding: 20px 12px; margin: 0; text-align: center; font-size: 12px; line-height: 1.7; }
.voice-reference audio { width: 100%; height: 36px; margin-top: 8px; }
.voice-file-label, .voice-file-actions { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-width: 0; }
.voice-file-label span { overflow-wrap: anywhere; font-size: 12px; }
.voice-file-label small { white-space: nowrap; color: #888; }
.voice-file-actions { justify-content: flex-start; }
.voice-editor > small { font-size: 11px; line-height: 1.7; }
.node-asset-card .voice-badge { color: #4fcab0; font-size: 11px; }
.group-voices { padding: 12px 0; border-top: 1px solid #333; border-bottom: 1px solid #333; margin: 14px 0; }
.group-voices > header { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #adceca; margin-bottom: 8px; }
.group-voice-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 7px 0; }
.group-voice-row > .text-button { padding: 2px 0; color: #ccc; font-size: 12px; }
.group-voice-row audio { height: 30px; max-width: 220px; }
.group-voice-row small { font-size: 11px; }
.voice-description { display: block; flex-basis: 100%; color: #929292; font-size: 12px; line-height: 1.6; }
.voice-warning { display: block; color: #d3b685; font-size: 11px; line-height: 1.7; }
.workflow-options { display: flex; flex-wrap: wrap; gap: 20px; }
.workflow-options > label { flex: 1; min-width: 170px; }
.workflow-enhancement { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 12px 0; border-block: 1px solid #333; color: #ddd; cursor: pointer; }
.workflow-enhancement > span { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.workflow-enhancement-switch { appearance: none; flex: 0 0 40px; width: 40px; height: 22px; min-height: 22px; padding: 2px; margin: 0; border: 1px solid #626262; border-radius: 12px; background: #414141; cursor: pointer; }
.workflow-enhancement-switch::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: #eee; transition: transform .15s ease; }
.workflow-enhancement-switch:checked { background: #00b69f; border-color: #00b69f; }
.workflow-enhancement-switch:checked::before { transform: translateX(18px); background: #fff; }
.workflow-enhancement-switch:focus-visible { outline: 2px solid #90eadb; outline-offset: 3px; }
.h3-prompt-details { margin-top: 18px; padding-top: 12px; border-top: 1px solid #393939; min-width: 0; }
.h3-prompt-details summary { color: #a5d5c9; cursor: pointer; font-size: 12px; overflow-wrap: anywhere; }
.h3-prompt-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 12px; line-height: 1.7; max-width: 100%; }
.workflow-result { white-space: pre-wrap; color: #d1e9e0; font-family: inherit; width: 100%; }
.connections-list { display: grid; gap: 15px; }
.connections-list > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-bottom: 1px solid #333; padding: 12px 0; }
.connections-list span { color: #8d8d8d; font-size: 12px; }
.connections-list small { color: #d3a054; margin-left: auto; }
.real-toast { z-index: 80; position: fixed; top: 24px; left: 50%; transform: translateX(-50%); padding: 12px 22px; max-width: calc(100vw - 40px); border: 1px solid #3a544b; border-radius: 8px; background: #263a32; box-shadow: 0 8px 30px #0006; color: #e9fff5; font-size: 13px; }
.real-toast.error { color: #ffd6d6; background: #4c2727; border-color: #805050; }
.team-toolbar { margin: 30px 0; }
.real-team-row { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid #282828; padding: 22px 0; }
.real-team-row > strong { margin-right: auto; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 180px)); gap: 20px; margin-top: 40px; }
.library-asset { display: grid; gap: 9px; background: transparent; color: #eee; padding: 0; border: 0; text-align: left; }
.library-asset > img, .library-asset > .missing-image { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; }
.library-asset small { color: #777; }
.startup-error { max-width: 700px; margin: 150px auto; padding: 30px; }
.member-access { display: grid; place-items: center; min-height: 100dvh; padding: 30px 22px; background: #080b0a url("./assets/evidence/workspace-bg.webp") center / cover; }
.member-auth-form { width: min(380px,100%); display: grid; gap: 18px; padding: 28px; background: #141817f2; border: 1px solid #304039; border-radius: 8px; }
.member-brand { width: 48px; height: 48px; background: #eee; padding: 4px; border-radius: 6px; }
.member-auth-form h1 { font-size: 26px; font-weight: 500; margin: 0 0 5px; }
.member-auth-tabs { display: flex; gap: 24px; border-bottom: 1px solid #333; margin-bottom: 4px; }
.member-auth-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 0; color: #8e9692; }
.member-auth-tabs button.active { border-color: #16d9ba; color: #f3fff9; }
.member-auth-form input { width: 100%; min-width: 0; }
.member-auth-form input[type="checkbox"] { width: 16px; height: 16px; }
.member-login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.member-login-options .text-button { padding: 0; }
.verification-code-row { display: flex; gap: 10px; align-items: end; }
.verification-code-row > label { flex: 1; min-width: 0; }
.verification-code-row > button { flex: 0 0 112px; height: 38px; padding: 0 10px; }
.platform-brand { font-family: inherit; font-style: italic; font-weight: 600; letter-spacing: 0; color: #f1f1f1; overflow-wrap: anywhere; }
.platform-brand em { font-style: inherit; color: #7be6e0; }
.member-auth-form .platform-brand { font-weight: 600; }
.credential-link { color: #7be6e0; display: inline-flex; gap: 7px; align-items: center; width: fit-content; }
.preset-model-names { display: grid; gap: 12px; }
.preset-model-names > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.agent-settings-panel { min-width: 0; }
.agent-settings-panel h2 { font-size: 18px; margin: 20px 0 6px; }
.agent-settings-panel:not(.dialog-form) > .ui-button { margin-top: 18px; }
.member-auth-message { color: #ef9d9d; margin: 0; min-height: 20px; font-size: 13px; overflow-wrap: anywhere; }
.landing-home { background: #030404 url("./assets/evidence/workspace-bg.webp") center / cover no-repeat; position: relative; isolation: isolate; }
.landing-home::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: url("./assets/evidence/workspace-bg.webp") center / cover no-repeat; filter: brightness(1.85); }
.landing-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 560px 430px at var(--light-x, 29%) var(--light-y, 30%), rgba(31, 145, 119, .23), rgba(9, 53, 46, .1) 42%, transparent 76%),
    radial-gradient(ellipse 430px 320px at var(--trail-1-x, 29%) var(--trail-1-y, 30%), rgba(22, 115, 102, .13), transparent 78%),
    radial-gradient(ellipse 190px 145px at var(--trail-2-x, 50%) var(--trail-2-y, 40%), rgba(17, 91, 82, .08), transparent 80%),
    radial-gradient(ellipse 165px 125px at var(--trail-3-x, 50%) var(--trail-3-y, 40%), rgba(13, 71, 68, .06), transparent 82%),
    radial-gradient(ellipse 140px 108px at var(--trail-4-x, 50%) var(--trail-4-y, 40%), rgba(11, 59, 61, .045), transparent 84%),
    radial-gradient(ellipse 118px 92px at var(--trail-5-x, 50%) var(--trail-5-y, 40%), rgba(9, 48, 52, .035), transparent 86%);
  filter: blur(18px);
  opacity: calc(var(--light-opacity, .55) * .35);
  mix-blend-mode: screen;
  transition: opacity 520ms ease;
}
.landing-light-mosaic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--light-opacity, .08);
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse 560px 430px at var(--light-x, 29%) var(--light-y, 30%), #000 8%, #0009 40%, transparent 78%),
    radial-gradient(ellipse 400px 300px at var(--trail-1-x, 29%) var(--trail-1-y, 30%), #0006, transparent 75%);
  transition: opacity 900ms ease;
}
@media (prefers-reduced-motion: reduce) { .landing-home::before { transition: none; } }
.landing-home .real-sidebar { background: #070908b3; }
.landing-main { margin-left: 80px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 130px 30px 50px; }
.landing-title { text-align: center; margin-bottom: 39px; }
.landing-title h1 { font-size: 36px; font-weight: 600; font-style: italic; margin: 0; }
.landing-title h1 em { font-style: inherit; color: #7be6e0; }
.landing-title p { color: #757575; margin: 14px 0 0; font-size: 14px; }
.landing-upload { width: 768px; max-width: 100%; min-height: 300px; border-radius: 24px; background: #131616eb; backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #9bc9bc0a; }
.landing-upload.dragging { border-color: #17d4b9; background: #15312beb; }
.landing-import-options { display: grid; grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr); align-items: center; width: min(570px,100%); padding: 0 18px; }
.landing-import-item { --entry-accent: #08cfb0; position: relative; min-width: 0; height: 174px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 14px 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.landing-import-item.novel-entry { --entry-accent: #65e0d7; }
.landing-import-divider { width: 1px; height: 94px; background: linear-gradient(transparent,#56776c45,transparent); }
.upload-document-stack { position: relative; width: 108px; height: 98px; pointer-events: none; }
.document-page { position: absolute; object-fit: contain; transform-origin: center bottom; transition: transform 240ms cubic-bezier(.2,.65,.3,1),filter 240ms ease,opacity 240ms ease; }
.page-left, .page-right { height: 78px; width: 62px; bottom: 0; opacity: .44; filter: brightness(.7) saturate(.6); }
.page-left { left: 7px; }
.page-right { right: 7px; }
.page-front { height: 92px; width: 69px; left: 50%; bottom: 0; transform: translateX(-50%); filter: brightness(.85); }
.novel-entry .document-page { filter: hue-rotate(10deg) brightness(.85); }
.landing-upload-label { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 111px; height: 30px; margin-top: -14px; padding: 0 13px; border: 1px solid #a8fff333; border-radius: 16px; background: var(--entry-accent); color: #032b26; font-size: 13px; font-weight: 500; transition: background-color 200ms ease,box-shadow 240ms ease; }
.landing-import-item:is(:hover,:focus-visible) .page-left, .landing-upload.dragging .page-left { transform: translateX(-8px) rotate(-10deg); opacity: .8; filter: brightness(1.1); }
.landing-import-item:is(:hover,:focus-visible) .page-right, .landing-upload.dragging .page-right { transform: translateX(8px) rotate(10deg); opacity: .8; filter: brightness(1.1); }
.landing-import-item:is(:hover,:focus-visible) .page-front, .landing-upload.dragging .page-front { transform: translate(-50%,-6px); filter: brightness(1.22) drop-shadow(0 6px 14px #00bfa825); }
.landing-import-item:is(:hover,:focus-visible) .landing-upload-label { box-shadow: 0 3px 20px #00d8b829; background: #8af5e8; }
.landing-import-item:active .page-front { transform: translate(-50%,-2px); }
@media (prefers-reduced-motion: reduce) { .document-page, .landing-upload-label { transition: none; } }
.novel-file-picker { min-height: 240px; display: flex; flex-direction: column; gap: 24px; align-items: center; justify-content: center; border: 1px dashed #444; }
.novel-character-count { text-align: right; }
.creation-title-input input { min-width: 0; }
.creation-title-input small { flex-shrink: 0; font-size: 12px; }
.creation-file > div { min-width: 0; }
.creation-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creation-file .ui-button { flex-shrink: 0; }
.flow-node-real > .creation-actions { min-height: 44px; }
.flow-node-real > .creation-actions .mint-button { min-width: 144px; }
.flow-panel { position: relative; }
.flow-node-real.is-processing > .flow-panel, .creation-panel.is-processing {
  box-shadow: 0 0 26px #20e0ba29, 0 0 5px #63f4d947;
}
.flow-node-real.is-processing > .flow-panel::before, .creation-panel.is-processing::before {
  content: ""; position: absolute; inset: -2px; padding: 2px; border-radius: inherit;
  background: linear-gradient(110deg, #14b89d, #8fffe3, #50bfee, #bbf9c8, #14b89d);
  background-size: 300% 100%; animation: processing-border 3s linear infinite;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude; pointer-events: none;
}
.flow-stage-meter { position: relative; height: 3px; margin-top: 12px; border-radius: 3px; background: #283734; overflow: hidden; }
.flow-stage-meter > span { display: block; height: 100%; width: var(--stage-progress); background: #28bea4; transition: width .3s ease; }
.flow-stage-nav.is-processing .flow-stage-meter::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #a8ffe8, #39c2dc, transparent);
  transform: translateX(-100%); animation: processing-flow 1.8s ease-in-out infinite;
}
.flow-stage-item.is-processing .flow-stage-number { animation: processing-pulse 1.8s ease-in-out infinite; }
.flow-stage-live { display: block; color: #8be4ce; font-size: 10px; margin-top: 7px; overflow-wrap: anywhere; }
.flow-stage-live:empty { display: none; }
.adaptation-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #303632; padding-bottom: 14px; margin-bottom: 22px; font-size: 13px; }
.planning-copy p { white-space: pre-wrap; overflow-wrap: anywhere; }
@keyframes processing-border { to { background-position: -300% 0; } }
@keyframes processing-flow { to { transform: translateX(100%); } }
@keyframes processing-pulse { 50% { box-shadow: 0 0 0 4px #121919, 0 0 22px #77f9daaa; border-color: #a4ffe2; } }
@keyframes processing-stage-frame {
  50% { opacity: .45; box-shadow: 0 0 4px rgba(40, 213, 182, .2); }
}
@media (prefers-reduced-motion: reduce) {
  .flow-panel::before, .flow-stage-nav .flow-stage-meter::after, .flow-stage-item.is-processing::after, .flow-stage-item.is-processing .flow-stage-number { animation: none !important; }
}
.landing-upload > p { color: #757e7b; margin: 9px 24px 16px; font-size: 12px; text-align: center; line-height: 1.8; }
.landing-recent { width: 768px; max-width: 100%; margin-top: 88px; }
.landing-recent > header { display: flex; align-items: center; justify-content: space-between; color: #aaa; font-size: 13px; margin-bottom: 16px; }
.landing-recent > header .text-button { padding: 0; }
.landing-recent-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.recent-project { min-width: 0; display: flex; flex-direction: column; gap: 8px; background: transparent; border: 0; color: #eee; padding: 0; text-align: left; }
.recent-project .project-thumbnail { border-radius: 8px; }
.recent-project strong, .recent-project small { max-width: 100%; overflow-wrap: anywhere; }
.recent-project strong { font-size: 13px; font-weight: 400; }
.recent-project small { color: #6f6f6f; font-size: 12px; }
.recent-project:hover .project-thumbnail { box-shadow: 0 0 0 1px #666; }
.operator-content { margin-left: 80px; padding: 42px 54px; max-width: 1540px; }
.operator-content h1 { margin: 0; font-size: 24px; font-weight: 500; }
.operator-auth { display: grid; gap: 18px; width: min(480px,100%); margin: 80px auto; background: #191919; border: 1px solid #333; padding: 30px; border-radius: 10px; }
.operator-auth h2 { font-size: 20px; font-weight: 500; margin: 0 0 10px; }
.operator-header { display: flex; align-items: center; gap: 12px; margin-bottom: 38px; }
.operator-header > div:first-child { margin-right: auto; }
.operator-header small { display: block; margin-top: 10px; }
.operator-layout { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 38px; }
.operator-nav { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.operator-nav button { padding: 12px 16px; background: transparent; border: 0; color: #888; text-align: left; border-radius: 6px; }
.operator-nav button.active { color: #e8fef6; background: #1b3028; }
.operator-body { max-width: 920px; }
.operator-tabs, .operator-workflow-tabs { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid #2e2e2e; }
.operator-tabs button, .operator-workflow-tabs button { padding: 5px 0; background: none; border: 0; color: #888; }
.operator-tabs button.active, .operator-workflow-tabs button.active { color: #2cdec3; }
.operator-form-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.operator-model-picker { display: flex; align-items: end; gap: 12px; margin-bottom: 25px; flex-wrap: wrap; }
.operator-model-picker .real-field { flex: 1; min-width: 220px; margin: 0; }
.cloud-workflows { display: grid; gap: 12px; margin: 0 0 24px; }
.cloud-workflows > .real-field { max-width: 520px; }
.cloud-workflow-row { min-width: 0; display: grid; gap: 10px; border: 1px solid #343a37; border-radius: 7px; padding: 14px; background: #171918; }
.cloud-workflow-heading { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.cloud-workflow-heading > .real-field { flex: 1 1 240px; min-width: min(100%, 200px); margin: 0; }
.cloud-workflow-heading h2 { margin: 0 auto 4px 0; font-size: 17px; }
.cloud-endpoint { min-width: 0; display: grid; gap: 8px; border-top: 1px solid #303432; padding-top: 12px; }
.cloud-endpoint .real-field { min-width: 0; margin: 0; }
.cloud-endpoint input { max-width: 100%; }
.cloud-endpoint .cloud-workflow-heading { justify-content: space-between; }
.cloud-workflow-row > button { justify-self: start; }
.video-model-list { display: grid; gap: 8px; min-width: min(100%, 360px); }
.video-model-list > button { min-width: 0; min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; }
.video-model-list small { flex: none; }
.media-reference-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.media-reference-list { display: grid; gap: 8px; }
.media-reference-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 8px; border-bottom: 1px solid #333; font-size: 12px; }
.media-reference-row > span { min-width: 0; overflow-wrap: anywhere; }
.reference-view-choice { flex: 1; min-width: 0; }
.reference-view-actual { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.reference-view-actual img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; background: #171717; }
.reference-view-actual small { color: #aaa; overflow-wrap: anywhere; }
.reference-fallbacks { margin: 6px 0 12px; color: #aaa; font-size: 11px; overflow-wrap: anywhere; }
.reference-fallbacks summary { cursor: pointer; }
.reference-fallbacks ul { padding-left: 18px; line-height: 1.8; }
.media-quotation { display: grid; gap: 10px; }
.media-video-parameters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(100px, 1fr); gap: 18px; }
.media-video-parameters .real-field { min-width: 0; margin: 0; }
.media-video-parameters select, .media-video-parameters input { width: 100%; min-width: 0; }
.media-price-summary { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; border-block: 1px solid #383838; padding-block: 14px; }
.media-price-summary strong { color: #7be6e0; }
@media (max-width: 520px) { .media-video-parameters { grid-template-columns: minmax(0, 1fr); } }
.media-request-status { overflow-wrap: anywhere; }
.task-item { flex-wrap: wrap; }
.task-item > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.task-item > p { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
.task-item > span { line-height: 1.65; overflow-wrap: anywhere; }
.task-item > small { flex-basis: 100%; overflow-wrap: anywhere; }
.creation-actions > small { max-width: 240px; overflow-wrap: anywhere; }
.action-list strong { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.operator-skill-heading { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.operator-skill-heading h2 { font-size: 18px; font-weight: 500; margin: 0; }
.operator-skill-heading > span { margin-right: auto; }
.skill-preview-details { margin: 0 0 18px; border-block: 1px solid #333; padding: 12px 0; }
.skill-preview-details summary { color: #a5c8be; cursor: pointer; }
.skill-preview { margin-top: 12px; max-height: 420px; overflow: auto; padding: 14px; background: #141414; border: 1px solid #333; color: #d7d7d7; font-size: 12px; line-height: 1.65; }
.skill-preview h1, .skill-preview h2, .skill-preview h3 { margin: 16px 0 8px; font-weight: 500; }
.skill-preview table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.skill-preview th, .skill-preview td { border: 1px solid #454545; padding: 7px 8px; vertical-align: top; text-align: left; }
.skill-preview th { background: #263c37; color: #e8fff8; }
.skill-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.skill-source { color: #888; overflow-wrap: anywhere; line-height: 1.7; }
.template-variables { display: flex; flex-wrap: wrap; gap: 10px; }
.template-variables button { font-family: Consolas, monospace; font-size: 12px; min-height: 30px; padding: 0 9px; border: 1px solid #3d3d3d; border-radius: 4px; color: #a5c8be; }
.security-details { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 20px; font-size: 13px; }
.security-details dt { color: #888; }
.security-details dd { margin: 0; color: #ccc; }
.delegated-service, .delegate-row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; border-bottom: 1px solid #333; padding: 14px 0; }
.delegated-service > strong, .delegated-service > span:first-child { margin-right: auto; }
.delegated-service small, .delegate-row small { font-size: 12px; }
.delegate-row > .ui-button { margin-left: auto; }
.comfy-workflow { font-family: Consolas, monospace; font-size: 12px; tab-size: 2; }
.comfy-binding { display: grid; grid-template-columns: minmax(100px,1fr) minmax(120px,2fr) minmax(90px,1fr) 36px; gap: 12px; align-items: end; }
.comfy-binding .real-field { min-width: 0; }
.comfy-binding .icon-button { margin-bottom: 4px; }
.side-account-tools { display: grid; gap: 4px; }
.agent-content { margin-left: 80px; padding: 42px 54px; max-width: 1540px; min-width: 0; }
.agent-header { display: flex; align-items: start; gap: 20px; margin-bottom: 28px; }
.agent-header > div:first-child { margin-right: auto; }
.agent-header h1 { margin: 0; font-size: 24px; font-weight: 500; }
.agent-header p { margin: 8px 0 0; color: #999; font-size: 13px; }
.agent-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.agent-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; min-height: calc(100vh - 190px); }
.agent-skill-rail { border-right: 1px solid #333; padding-right: 18px; }
.agent-rail-heading, .agent-chat-head { display: flex; align-items: center; gap: 10px; }
.agent-rail-heading { padding-bottom: 12px; border-bottom: 1px solid #333; }
.agent-rail-heading h2, .agent-chat-head h2 { margin: 0; font-size: 16px; font-weight: 500; }
.agent-rail-heading small { color: #888; }
.agent-skill-item { display: flex; align-items: start; gap: 9px; width: 100%; margin-top: 7px; padding: 11px 9px; border: 0; border-radius: 6px; background: transparent; color: #bbb; text-align: left; }
.agent-skill-item:hover, .agent-skill-item.active { background: #1b3028; color: #e8fef6; }
.agent-skill-item span { display: grid; gap: 5px; min-width: 0; }
.agent-skill-item strong, .agent-skill-item small { overflow-wrap: anywhere; }
.agent-skill-item small { color: #888; font-size: 11px; }
.agent-binding { display: grid; gap: 9px; margin: 18px 0 0; padding: 13px 11px; border: 1px solid #334c45; border-radius: 7px; background: #121d1a; }
.agent-binding strong { font-size: 12px; font-weight: 500; color: #d8eee8; }
.agent-binding select { width: 100%; min-height: 34px; border: 1px solid #3a514b; border-radius: 5px; background: #202a27; color: #eee; padding: 0 8px; }
.agent-binding .ui-button { min-height: 34px; padding-inline: 10px; font-size: 12px; }
.agent-binding small { color: #80918b; font-size: 11px; line-height: 1.5; }
.agent-safety-note { color: #888; font-size: 11px; line-height: 1.6; margin-top: 18px; }
.agent-chat { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 14px; }
.agent-chat-head { min-height: 44px; border-bottom: 1px solid #333; }
.agent-chat-head > div:first-child { margin-right: auto; }
.agent-chat-head small { display: block; margin-top: 5px; }
.agent-messages { min-height: 360px; overflow: auto; padding: 4px 2px; }
.agent-message { max-width: min(900px, 94%); margin: 0 0 16px; padding: 13px 15px; border: 1px solid #333; border-radius: 8px; background: #171717; }
.agent-message.user { margin-left: auto; background: #1a3029; border-color: #285f4e; }
.agent-message.error { border-color: #6e3d42; }
.agent-message header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: #ddd; }
.agent-message header small { color: #8bd8c4; font-size: 11px; }
.agent-message-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 13px; line-height: 1.7; }
.agent-attachment-note { display: block; color: #8ba49d; margin: -2px 0 8px; }
.agent-attachments { display: flex; flex-wrap: wrap; gap: 8px; }
.agent-attachment-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #3d5e54; border-radius: 4px; color: #b9e8d9; font-size: 11px; }
.agent-attachment-chip .icon-button { width: 18px; height: 18px; padding: 0; }
.agent-composer { border: 1px solid #3c4e48; border-radius: 8px; background: #141b19; padding: 12px; }
.agent-composer textarea { width: 100%; resize: vertical; min-height: 90px; border: 0; outline: 0; background: transparent; color: #f2f2f2; line-height: 1.65; }
.agent-composer-actions { display: flex; align-items: center; gap: 10px; justify-content: end; }
.agent-composer-actions small { margin-right: auto; }
.management-content { max-width: 1400px; }
.management-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid #333; padding: 24px 0; gap: 20px; margin: 0; }
.management-summary dt { color: #999; font-size: 12px; }
.management-summary dd { margin: 10px 0 0; font-size: 22px; }
.management-section { padding: 28px 0; border-bottom: 1px solid #333; }
.management-section h2 { font-size: 17px; font-weight: 500; margin: 0 0 20px; }
.management-progress-row { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 14px; padding: 15px 0; }
.management-progress-row > span { display: flex; align-items: center; align-self: start; gap: 8px; font-size: 12px; }
.management-progress-row strong { font-size: 14px; font-weight: 500; }
.management-progress-row > div { min-width: 0; overflow-wrap: anywhere; }
.management-progress-row p { font-size: 12px; line-height: 1.7; margin: 8px 0 0; }
.management-log { max-height: 300px; min-height: 90px; overflow: auto; background: #141414; border: 1px solid #333; padding: 16px; font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.management-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; }
.management-links a, .generated-media a { color: #6ce4cc; text-decoration: none; }
.generated-media { margin: 0; min-width: 0; }
.generated-media > img, .generated-media > video { display: block; max-width: 100%; max-height: 55vh; margin: auto; object-fit: contain; }
.generated-media figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 12px; font-size: 12px; overflow-wrap: anywhere; }
.generated-media a { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1400px) {
  .flow-stage-nav { width: min(640px, calc(100vw - 370px)); min-width: 500px; }
  .storyboard-real-columns { grid-template-columns: 210px minmax(0,1fr) 220px; gap: 12px; }
  .storyboard-real-controls { gap: 3px; padding: 8px; flex-wrap: wrap; }
  .storyboard-real-controls .ui-button { font-size: 11px; padding: 0 10px; min-height: 32px; }
}
@media (max-width: 960px) {
  .storyboard-real-columns { grid-template-columns: 160px minmax(0,1fr); }
  .storyboard-side-panel { grid-column: 1 / -1; max-height: 220px; }
  .storyboard-real-columns { overflow: auto; grid-template-rows: minmax(300px,1fr) auto; }
  .storyboard-assets.character, .storyboard-assets.location { grid-template-columns: repeat(6,minmax(60px,1fr)); }
  .creation-surface { margin-left: max(20px, calc((100vw - 954px) / 2)); }
}
@media (max-width: 680px) {
  .comfy-binding { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .cloud-workflow-heading { align-items: stretch; }
  .cloud-workflow-heading > .real-field { flex-basis: 100%; }
  .cloud-endpoint .cloud-workflow-heading { align-items: center; }
  .management-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .management-progress-row { grid-template-columns: 1fr; gap: 8px; }
  .real-sidebar { width: 60px; }
  .episode-reader-page { padding: 0 10px 10px; }
  .episode-reader-top { height: 64px; gap: 10px; }
  .episode-reader-top > strong { font-size: 14px; }
  .episode-reader-layout { grid-template-columns: 1fr; min-height: 0; }
  .episode-reader-list { max-height: 190px; }
  .episode-reader-main { min-height: calc(100vh - 290px); padding: 18px 12px 12px; }
  .episode-reader-heading h1 { font-size: 20px; }
  .episode-reader-content { padding: 15px; }
  .home-content { margin-left: 60px; padding: 100px 20px 35px; }
  .home-header { right: 16px; gap: 6px; }
  .home-header .ui-button { padding: 0 10px; font-size: 11px; }
  .real-top-actions { gap: 6px; }
  .home-projects { grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 20px 12px; }
  .home-project, .project-cover { width: 100%; }
  .project-cover { height: auto; aspect-ratio: 4/3; }
  .home-tabs { gap: 22px; flex-wrap: wrap; }
  .registration-link { margin-left: 0; }
  .home-tabs .tab { font-size: 16px; }
  .floating-project-title { width: 215px; left: 10px; font-size: 12px; }
  .flow-stage-nav { top: 78px; width: calc(100vw - 28px); min-width: 0; padding-inline: 9px; }
  .flow-stage-caption { margin-inline: 1px; }
  .flow-stage-name { font-size: 10px; }
  .real-canvas > .real-top-actions { right: 10px; }
  .real-canvas > .real-top-actions .ui-button { padding: 0 10px; font-size: 11px; }
  .flow-episode-row { grid-template-columns: 24px 36px minmax(0,1fr) 20px; gap: 8px; padding: 10px 8px; }
  .episode-file-tile { width: 36px; height: 36px; }
  .flow-episode-heading h3 { font-size: 16px; }
  .flow-episode-heading small { font-size: 11px; }
  .flow-episode-actions { align-items: stretch; flex-direction: column; }
  .flow-episode-actions .ui-button, .flow-episode-actions .episode-add { justify-content: center; }
  .asset-control-row { align-items: stretch; flex-direction: column; gap: 10px; }
  .asset-control-row .asset-status-tabs { width: 100%; }
  .asset-control-row .asset-toolbar { width: 100%; justify-content: flex-end; }
  .asset-control-row .asset-toolbar .asset-search-box { flex: 1; }
  .asset-control-row .asset-toolbar .asset-search-box input { width: 100%; }
  .creation-surface { transform-origin: left top; }
  .real-storyboard { padding: 0 10px 10px; }
  .real-storyboard-top { height: auto; min-height: 70px; flex-wrap: wrap; padding: 10px 0; gap: 5px; }
  .storyboard-top-right { width: 100%; gap: 5px; }
  .storyboard-top-right button { min-height: 32px; font-size: 10px; padding: 0 9px; flex: 1; }
  .storyboard-real-panel { padding: 0 10px 10px; }
  .storyboard-real-columns { grid-template-columns: 1fr; grid-template-rows: 170px minmax(300px,1fr) auto; }
  .real-preview { grid-row: 1; }
  .storyboard-real-script { grid-row: 2; }
  .storyboard-side-panel { grid-row: 3; }
  .storyboard-real-title { height: 54px; }
  .storyboard-real-title .text-button { padding: 5px; font-size: 11px; }
  .real-timeline { flex-basis: 200px; }
  .real-timeline > header { height: 46px; }
  .real-timeline > header { flex-wrap: wrap; height: auto; min-height: 76px; gap: 5px 10px; padding: 6px 0; }
  .timeline-batch-actions { order: 4; width: 100%; justify-content: space-between; gap: 8px; }
  .timeline-slider { max-width: 120px; }
  .real-timeline-card, .add-group { height: 110px; }
  .asset-dialog-grid { grid-template-columns: 1fr; }
  .asset-view-picker { grid-template-columns: 1fr; }
  .asset-dialog-preview { min-height: 220px; }
  .real-modal-backdrop { padding: 12px; }
  .real-modal { max-height: calc(100vh - 24px); padding: 15px; }
  .real-team-row { flex-wrap: wrap; }
  .landing-main { margin-left: 60px; padding: 115px 18px 35px; }
  .landing-title h1 { font-size: 30px; }
  .landing-upload { min-height: 250px; border-radius: 22px; }
  .landing-upload > p { line-height: 1.8; }
  .landing-recent { margin-top: 48px; }
  .landing-recent-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .operator-content { margin-left: 60px; padding: 30px 18px; }
  .operator-layout { grid-template-columns: 1fr; gap: 20px; }
  .operator-nav { flex-direction: row; flex-wrap: wrap; }
  .operator-header { flex-wrap: wrap; gap: 9px; }
  .operator-header > div:first-child { width: 100%; }
  .operator-header > .ui-button { font-size: 11px; padding: 0 12px; }
  .operator-auth { padding: 20px; margin-top: 35px; }
  .security-details { grid-template-columns: 1fr; gap: 8px; }
  .agent-content { margin-left: 60px; padding: 30px 18px; }
  .agent-header { flex-wrap: wrap; }
  .agent-header > div:first-child { width: 100%; }
  .agent-layout { grid-template-columns: 1fr; min-height: 0; }
  .agent-skill-rail { border-right: 0; border-bottom: 1px solid #333; padding: 0 0 14px; }
  .agent-chat { min-height: 640px; }
}
.private-view { min-width: 0; min-height: 0; }
.membership-content { min-width: 0; }
.member-table-scroll { width: 100%; min-width: 0; overflow: auto; }
.channel-access-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-width: 0; }
.channel-access-header h2 { margin: 0; overflow-wrap: anywhere; }
.member-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.member-table th, .member-table td { padding: 13px 12px; border-bottom: 1px solid #34383e; text-align: left; vertical-align: middle; }
.member-table th { color: #aeb9c6; font-weight: 500; white-space: nowrap; }
.member-row-actions { display: flex; gap: 8px; white-space: nowrap; }
.member-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.member-media-preview { display: block; width: 100%; max-height: 180px; object-fit: cover; background: #111; border: 1px solid #2b3037; }
.member-toolbar { padding: 16px 0; max-width: 360px; }
.member-id { max-width: 240px; overflow-wrap: anywhere; }
.license-codes { width: 100%; font: 13px monospace; }
.landing-title h1 { max-width: 100%; overflow-wrap: anywhere; }
.member-media-grid small { overflow-wrap: anywhere; }
.daju-workflow-summary { font-size: 14px; font-weight: 500; }
.daju-workflow-note { line-height: 1.8; overflow-wrap: anywhere; }
.daju-parameters { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.membership-content .operator-header { flex-wrap: wrap; }