:root {
  --navy: #111214;
  --navy-2: #18191c;
  --ink: #f2f3f5;
  --muted: #96999f;
  --line: rgba(255,255,255,.1);
  --surface: #202124;
  --surface-2: #292a2e;
  --canvas: #101113;
  --primary: #57d4eb;
  --primary-2: #78deef;
  --primary-soft: rgba(87,212,235,.12);
  --blue: #6ea8ff;
  --green: #55d6ad;
  --green-soft: rgba(85,214,173,.12);
  --amber: #eab85a;
  --amber-soft: rgba(234,184,90,.13);
  --coral: #ef718f;
  --coral-soft: rgba(239,113,143,.13);
  --shadow: 0 16px 38px rgba(0,0,0,.28);
  --radius: 16px;
  --sidebar-width: 238px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  color-scheme: dark;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--canvas); }
body { min-height: 100vh; font-size: 15px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible {
  outline: 3px solid var(--focus-ring, rgba(87,212,235,.42));
  outline-offset: 2px;
}
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--ink); }
h2 { font-size: 1.55rem; margin-bottom: 6px; }
h3 { font-size: 1.05rem; margin-bottom: 4px; }
p { color: var(--muted); }
small { color: var(--muted); }
.hidden { display: none !important; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.mobile-only { display: none !important; }

.auth-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(440px, 1.25fr) minmax(420px, .75fr);
  background: #f8faff;
}

.auth-backdrop {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(48px, 8vw, 120px);
  color: white;
  background:
    radial-gradient(circle at 64% 24%, rgba(109, 97, 255, .9), transparent 33%),
    radial-gradient(circle at 22% 64%, rgba(27, 181, 203, .32), transparent 37%),
    linear-gradient(145deg, #0d1935 0%, #1a2850 54%, #323f92 100%);
}

.auth-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  background-image:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, black);
}

.auth-backdrop::after {
  content: "";
  position: absolute;
  inset: 16% 11%;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 36px;
  transform: rotate(-7deg);
  box-shadow: 40px 50px 0 rgba(255,255,255,.035), -40px -50px 0 rgba(255,255,255,.025);
}

.auth-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.auth-orb-one { width: 280px; height: 280px; right: 8%; top: 10%; background: radial-gradient(circle at 30% 30%, #b8b3ff, #554cff 55%, transparent 71%); opacity: .65; }
.auth-orb-two { width: 170px; height: 170px; left: 12%; top: 18%; background: radial-gradient(circle at 35% 35%, #7fe8ef, #2077b8 58%, transparent 72%); opacity: .42; }
.auth-copy { position: relative; z-index: 2; max-width: 680px; }
.auth-mark { display: inline-flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 800; margin-bottom: 28px; }
.auth-mark img { display: block; width: 62px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(39, 175, 255, .24)); }
.auth-copy h1 { color: white; font-size: clamp(2.7rem, 5vw, 5.4rem); letter-spacing: -.05em; line-height: 1.04; max-width: 720px; margin-bottom: 26px; }
.auth-copy > p { color: rgba(255,255,255,.78); font-size: 1.1rem; max-width: 560px; }
.auth-feature-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.auth-feature-row span { padding: 8px 13px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); backdrop-filter: blur(10px); border-radius: 999px; color: rgba(255,255,255,.9); }
.auth-panel { display: grid; place-items: center; padding: 40px; }
.auth-card { width: min(100%, 430px); padding: 36px; background: white; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 30px 80px rgba(21, 36, 68, .12); }
.auth-card h2 { font-size: 1.9rem; margin-bottom: 6px; }
.auth-mobile-brand { display: none; font-size: 1.2rem; font-weight: 800; color: var(--primary); margin-bottom: 24px; }
.auth-mobile-brand img { display: block; width: 52px; height: 36px; object-fit: contain; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin: 24px 0; background: var(--surface-2); border-radius: 12px; }
.auth-tab { border: 0; background: transparent; color: var(--muted); padding: 10px; border-radius: 9px; }
.auth-tab.active { color: var(--primary); background: white; box-shadow: 0 3px 10px rgba(31, 47, 89, .08); font-weight: 700; }
.auth-card form { display: grid; gap: 16px; }
.auth-card label, .api-form label, .admin-settings > label, .quota-panel > label { display: grid; gap: 7px; color: var(--ink); font-weight: 600; }
.auth-card input, .api-form input, .admin-settings select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dce3f0;
  border-radius: 11px;
  background: white;
  color: var(--ink);
}
.auth-code-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: stretch; }
.auth-code-row .secondary-button { min-width: 116px; white-space: nowrap; }
.auth-code-row input { min-width: 0; }
.auth-code-row button:disabled { opacity: .65; cursor: not-allowed; }
.auth-options { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.auth-provider-note { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.auth-provider-note strong, .auth-provider-note small { display: block; }
.auth-provider-note small { margin-top: 3px; font-weight: 400; }
.checkline { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px !important; color: var(--muted) !important; font-weight: 500 !important; }
.checkline input { width: auto; accent-color: var(--primary); }
.link-button, .text-button { border: 0; background: transparent; color: var(--primary); padding: 0; }
.full-width { width: 100%; justify-content: center; }
.auth-note { font-size: .82rem; text-align: center; margin: 18px 0 0; }
.auth-message { margin: 0; padding: 9px 11px; border: 1px solid transparent; border-radius: 9px; font-size: .82rem; line-height: 1.45; }
.auth-message.error { color: #ff9ab0; border-color: rgba(239,113,143,.28); background: rgba(239,113,143,.1); }
.auth-message.success { color: #7fe0bd; border-color: rgba(80,205,160,.28); background: rgba(80,205,160,.1); }
@media (max-width: 390px) {
  .auth-code-row { grid-template-columns: 1fr; }
  .auth-code-row .secondary-button { width: 100%; }
}

.primary-button, .secondary-button, .ghost-button, .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  gap: 8px;
  border-radius: 10px;
  padding: 9px 16px;
  border: 1px solid transparent;
  font-weight: 700;
  white-space: nowrap;
}
.primary-button { color: white; background: linear-gradient(135deg, var(--primary), #655cff); box-shadow: 0 8px 18px rgba(87,79,255,.2); }
.primary-button:hover { filter: brightness(1.04); transform: translateY(-1px); }
.secondary-button { color: var(--primary); background: white; border-color: #cad2ff; }
.secondary-button:hover { background: var(--primary-soft); }
.ghost-button { color: var(--ink); background: var(--surface-2); border-color: var(--line); margin-top: 12px; }
.danger-button { color: #d73959; background: white; border-color: #f4b9c6; }
.small { min-height: 34px; padding: 6px 11px; font-size: .9rem; }
.icon-button { display: inline-grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; line-height: 1; border: 1px solid var(--line); background: white; border-radius: 10px; color: var(--ink); }
.ui-icon { display: block; flex: 0 0 auto; width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; fill: none; pointer-events: none; }
.icon-button .ui-icon { width: 19px; height: 19px; }
.button-row { display: flex; gap: 8px; align-items: center; }
.file-button { position: relative; overflow: hidden; cursor: pointer; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: white;
  background: linear-gradient(180deg, var(--navy) 0%, #101d37 100%);
}
.sidebar-brand { display: flex; gap: 12px; align-items: center; padding: 24px 18px 16px; }
.brand-icon { display: grid; place-items: center; width: 62px; height: 44px; flex: 0 0 62px; }
.brand-icon img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 11px rgba(30, 180, 255, .22)); }
.sidebar-brand strong { display: block; font-size: 1.08rem; }
.sidebar-brand small { display: block; color: #93a0ba; margin-top: 2px; }
.workspace-switcher, .account-button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  color: white;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.05);
  border-radius: 12px;
  text-align: left;
}
.workspace-switcher { width: calc(100% - 28px); margin: 0 14px 12px; padding: 10px; }
.workspace-copy { min-width: 0; }
.workspace-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-avatar {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 13px;
  background:
    radial-gradient(circle at 22% 16%, var(--theme-accent-glow, rgba(87,212,235,.18)), transparent 68%) padding-box,
    linear-gradient(155deg, #20213a, #10151e) padding-box,
    linear-gradient(135deg, var(--primary), #8a4cf0 56%, var(--primary-2)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 7px 19px var(--theme-accent-glow, rgba(87,212,235,.18));
  pointer-events: none;
}
.workspace-avatar::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,.1), transparent 58%);
}
.workspace-avatar::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 7px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--primary-2);
  box-shadow: 0 0 7px var(--primary);
}
.workspace-avatar-glyph {
  position: relative;
  z-index: 1;
  color: #f4fbff;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.08em;
  text-shadow: 0 0 9px var(--primary), 0 2px 4px rgba(0,0,0,.5);
  transform: translate(-1px, -1px);
}
.account-button small { display: block; color: #8f9db8; }
.sidebar-nav { padding: 0 10px 16px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.nav-section { margin: 6px 0; border: 1px solid transparent; border-radius: 12px; }
.nav-section[open] { background: rgba(86, 115, 146, .055); border-color: rgba(160, 190, 214, .09); }
.nav-section > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; padding: 10px 12px; color: #8999b4; font-size: .73rem; font-weight: 700; letter-spacing: .04em; border-radius: 10px; }
.nav-section > summary::-webkit-details-marker { display: none; }
.nav-section > summary:hover, .nav-section > summary:focus-visible { color: #e9faff; background: rgba(255,255,255,.05); }
.nav-section-chevron { display: inline-block; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
.nav-section[open] .nav-section-chevron { transform: rotate(225deg); }
.nav-section-items { padding: 0 5px 6px; }
.remix-workflow { display: flex; align-items: center; gap: 18px; padding: 14px 18px; margin: 10px 0 16px; }
.remix-workflow > div { min-width: 165px; display: grid; gap: 3px; }
.remix-workflow > div small { color: var(--muted, #91a0b5); line-height: 1.4; }
.remix-workflow ol { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.remix-workflow li { border: 1px solid rgba(140,165,190,.24); border-radius: 999px; padding: 6px 11px; font-size: .78rem; color: #aab8c9; }
.remix-workflow li[data-state="done"] { border-color: rgba(77,205,154,.4); background: rgba(77,205,154,.09); color: #91e7bd; }
.remix-workflow li[data-state="running"] { border-color: rgba(95,207,241,.46); background: rgba(95,207,241,.1); color: #96e9fa; }
.remix-workflow li[data-state="failed"] { border-color: rgba(232,117,123,.46); background: rgba(232,117,123,.1); color: #f5a9aa; }
@media (max-width: 900px) { .remix-workflow { align-items: flex-start; flex-direction: column; } }
.nav-label { margin: 16px 10px 6px; color: #74829e; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 11px; min-height: 43px; padding: 9px 12px; border: 0; border-radius: 10px; color: #c8d0df; background: transparent; text-align: left; margin: 2px 0; }
.nav-item > span:first-child { display: inline-grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; line-height: 1; text-align: center; font-size: 1.12rem; color: #aeb9d1; }
.nav-item > span:first-child .ui-icon { width: 19px; height: 19px; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }
.nav-item.active { color: white; background: linear-gradient(135deg, #635cff, #5048eb); box-shadow: 0 8px 20px rgba(76,68,230,.28); }
.nav-item.active > span:first-child { color: white; }
.nav-count { margin-left: auto; min-width: 22px; padding: 2px 6px; text-align: center; border-radius: 999px; color: #ffd8e2; background: rgba(240,82,123,.22); font-size: .77rem; }
.advanced-badge { margin-left: auto; padding: 2px 5px; color: #cbd0ff; background: rgba(108,101,255,.23); border-radius: 5px; font-size: .7rem; }
.sidebar-footer { margin-top: auto; padding: 12px; background: linear-gradient(180deg, transparent, rgba(7,14,29,.45)); }
.quota-mini { padding: 10px; color: #aab5ca; font-size: .8rem; }
.quota-mini > div:first-child { display: flex; justify-content: space-between; }
.quota-mini strong { color: white; }
.progress { height: 5px; margin-top: 8px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, #766fff, #61c6f4); border-radius: inherit; }
.account-button { width: 100%; padding: 9px; border: 0; background: rgba(255,255,255,.04); }
.avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #5a53ff, #8984ff); color: white; font-weight: 800; font-size: .85rem; }
.avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.avatar.blue { background: linear-gradient(135deg, #3188f5, #6ab5ff); }
.avatar.coral { background: linear-gradient(135deg, #f0527b, #ff8da9); }
.avatar.amber { background: linear-gradient(135deg, #ee9d17, #ffc45c); }

.main-column { grid-column: 2; min-width: 0; }
.topbar {
  position: sticky;
  z-index: 12;
  top: 0;
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
}
.topbar h1 { margin: 0; font-size: 1.3rem; }
.topbar p { margin: 1px 0 0; font-size: .82rem; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.notification-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--surface-2);
  font-weight: 700;
}
.notification-trigger:hover, .notification-trigger.has-unread { color: var(--primary); border-color: rgba(87,212,235,.38); background: var(--primary-soft); }
.notification-trigger .ui-icon { width: 18px; height: 18px; }
.notification-trigger b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: #091315; background: var(--primary); font-size: .72rem; }
.notification-trigger b[hidden] { display: none; }
.global-search { height: 40px; min-width: 260px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface-2); }
.global-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }
.profile-pill { display: flex; align-items: center; gap: 8px; border: 0; padding: 3px 8px 3px 3px; border-radius: 999px; color: var(--ink); background: var(--surface-2); }
.content { padding: 20px; }
.app-view { display: none; }
.app-view.active { display: block; animation: view-in .2s ease both; }

.dola-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 16px; margin-bottom: 16px; }
.dola-connection-body { display: flex; align-items: end; gap: 10px; padding: 16px; flex-wrap: wrap; }
.dola-connection-body label { min-width: 200px; max-width: 260px; flex: 1; margin: 0; }
.dola-connection-body input { width: 100%; }
.dola-privacy-note { margin: 0; padding: 0 16px 16px; font-size: .9rem; }
.dola-create-form { display: flex; align-items: end; gap: 10px; padding: 16px; flex-wrap: wrap; }
.dola-create-form label:first-child { flex: 1 1 180px; }
.dola-create-form label:nth-child(2) { width: 100px; }
.dola-create-form label { margin: 0; }
.dola-create-form input { width: 100%; }
.dola-native-tools { margin: 0 16px 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.dola-native-tools[hidden] { display: none; }
.dola-native-tools-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.dola-native-tools-heading span { color: var(--muted); font-size: .82rem; }
.dola-native-tools-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.dola-native-tools-actions button { white-space: normal; text-align: center; }
.dola-account-toolbar, .dola-row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dola-account-toolbar { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.dola-toolbar-spacer { flex: 1; }
.dola-search { width: min(290px,100%); }
.dola-account-list { padding: 4px 16px 16px; }
.dola-account-row { display: grid; grid-template-columns: 20px 36px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 80px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dola-account-row:last-child { border-bottom: 0; }
.dola-account-row input[type="checkbox"] { width: 18px; height: 18px; }
.dola-account-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--primary); background: #eeecff; font-weight: 700; }
.dola-account-identity { min-width: 0; display: grid; gap: 2px; }
.dola-account-identity strong { overflow-wrap: anywhere; }
.dola-account-identity small { font-size: .85rem; overflow-wrap: anywhere; }
.dola-account-state { color: var(--muted); font-size: .82rem; }
.dola-danger { color: #b42337 !important; }
.dola-edit-dialog { width: min(460px,calc(100vw - 28px)); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 24px 70px rgba(8,20,48,.22); }
.dola-edit-dialog::backdrop { background: rgba(9,20,45,.5); }
.dola-edit-dialog form { display: grid; gap: 14px; }
.dola-edit-dialog h3 { margin: 0; }
.dola-edit-dialog label { display: grid; gap: 6px; }
.dola-edit-dialog input, .dola-edit-dialog textarea { width: 100%; }
.dola-empty { padding: 28px 0 16px; margin: 0; text-align: center; }
.dola-embedded-shell { display: none; min-width: 0; overflow: hidden; }
.dola-embedded-tabs { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.dola-embedded-tabs .active { color: var(--primary); border-color: var(--primary); background: #eeecff; }
.dola-embedded-pane { position: relative; min-height: 640px; background: #f5f7fc; }
.dola-embedded-hint { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); }
.dola-embedded-pane.has-account .dola-embedded-hint { display: none; }
body.dola-desktop .dola-connection { display: none; }
body.dola-desktop [data-view-panel="dola"].active { display: grid; grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); grid-template-areas: "toolbar toolbar" "setup setup" "accounts viewer"; gap: 14px; align-content: start; }
body.dola-desktop [data-view-panel="dola"] .view-toolbar { grid-area: toolbar; }
body.dola-desktop [data-view-panel="dola"] .dola-layout { grid-area: setup; display: block; margin: 0; }
body.dola-desktop [data-view-panel="dola"] .dola-accounts { grid-area: accounts; min-width: 0; }
body.dola-desktop [data-view-panel="dola"] .dola-embedded-shell { grid-area: viewer; display: block; }
body.dola-desktop .dola-account-row { grid-template-columns: 20px 32px minmax(0,1fr); }
body.dola-desktop .dola-row-actions { grid-column: 3; }
body.dola-desktop .dola-account-identity small { display: none; }
body.dola-desktop #dola-cloud-refresh { display: none; }
body.dola-web .dola-connection, body.dola-web #dola-show-app, body.dola-web #dola-edit-url { display: none !important; }
body.dola-web [data-view-panel="dola"].active { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); grid-template-areas: "toolbar toolbar" "setup setup" "accounts viewer" "tasks tasks"; gap: 14px; align-content: start; }
body.dola-web [data-view-panel="dola"] .view-toolbar { grid-area: toolbar; }
body.dola-web [data-view-panel="dola"] .dola-layout { grid-area: setup; display: block; margin: 0; }
body.dola-web [data-view-panel="dola"] .dola-accounts { grid-area: accounts; min-width: 0; }
body.dola-web [data-view-panel="dola"] .dola-embedded-shell { grid-area: viewer; display: block; min-width: 0; }
body.dola-web [data-view-panel="dola"] #platform-task-panel { grid-area: tasks; min-width: 0; }
body.dola-web .dola-account-row { grid-template-columns: 20px 32px minmax(0,1fr); }
body.dola-web .dola-row-actions { grid-column: 3; }
.dola-live-frame { display: block; width: 100%; min-height: 690px; border: 0; background: #fff; }
.dola-live-frame[hidden] { display: none; }
@media (max-width: 1100px) { body.dola-web [data-view-panel="dola"].active { grid-template-columns: 1fr; grid-template-areas: "toolbar" "setup" "accounts" "viewer" "tasks"; } }
@media (max-width: 1100px) { body.dola-desktop [data-view-panel="dola"].active { grid-template-columns: 1fr; grid-template-areas: "toolbar" "setup" "accounts" "viewer"; } }
@media (max-width: 950px) { .dola-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .dola-account-row { grid-template-columns: 20px 36px minmax(0,1fr); } .dola-row-actions { grid-column: 3; } }
@media (max-width: 600px) { .dola-account-row { padding: 12px 0; } .dola-account-toolbar { align-items: stretch; } .dola-account-toolbar button { flex: 1 1 auto; } .dola-toolbar-spacer { display: none; } }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } }

.workflow-guide { display: grid; grid-template-columns: minmax(190px,.7fr) minmax(520px,1.8fr) auto; align-items: center; gap: 18px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid #d9def5; border-radius: 15px; background: linear-gradient(135deg,#fff 0%,#f7f7ff 100%); box-shadow: 0 5px 18px rgba(31,48,86,.04); }
#workflow-guide[hidden] { display: none; }
.workflow-guide-copy { min-width: 0; }
.workflow-guide-copy .eyebrow { color: var(--primary); }
.workflow-guide-copy strong, .workflow-guide-copy p { display: block; }
.workflow-guide-copy strong { margin-top: 2px; font-size: .95rem; }
.workflow-guide-copy p { margin: 3px 0 0; font-size: .76rem; line-height: 1.45; }
.workflow-steps { display: grid; grid-template-columns: repeat(5,minmax(88px,1fr)); align-items: start; }
.workflow-steps button { position: relative; display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 4px 5px; border: 0; color: var(--muted); background: transparent; font-size: .72rem; }
.workflow-steps button:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 17px; left: calc(50% + 18px); width: calc(100% - 36px); height: 2px; background: #dfe4ef; }
.workflow-steps button i { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #dfe4ef; border-radius: 50%; color: #78849b; background: white; font-style: normal; font-weight: 800; }
.workflow-steps button.done { color: #147b59; }
.workflow-steps button.done i { color: white; border-color: #20af7d; background: #20af7d; }
.workflow-steps button.done:not(:last-child)::after { background: #77d8b6; }
.workflow-steps button.current { color: var(--primary); font-weight: 800; }
.workflow-steps button.current i { color: white; border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 5px rgba(91,83,255,.11); }
.workflow-steps button.viewing span { text-decoration: underline; text-underline-offset: 3px; }
.workflow-guide-actions { display: grid; justify-items: end; gap: 5px; }
.workflow-guide.is-compact { grid-template-columns: minmax(520px,1fr) auto; }
.workflow-guide.is-compact .workflow-guide-copy { display: none; }
.workflow-guide.is-compact .workflow-guide-actions { grid-auto-flow: column; align-items: center; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 5px 18px rgba(31, 48, 86, .035);
}
.panel-heading { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.panel-heading h3, .panel-heading p { margin-bottom: 0; }
.panel-heading p { font-size: .82rem; margin-top: 2px; }
.page-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; margin-bottom: 16px; color: white; border-radius: 18px; background: linear-gradient(120deg, #202e59 0%, #343b8a 58%, #6258fa 100%); box-shadow: var(--shadow); }
.compact-hero { min-height: 154px; position: relative; overflow: hidden; }
.compact-hero::after { content: ""; position: absolute; width: 330px; height: 330px; right: 5%; top: -180px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; box-shadow: 0 0 0 40px rgba(255,255,255,.035), 0 0 0 90px rgba(255,255,255,.025); }
.page-hero h2, .page-hero p { position: relative; z-index: 2; color: white; }
.page-hero h2 { font-size: 1.75rem; margin-bottom: 5px; }
.page-hero p { margin-bottom: 0; color: rgba(255,255,255,.72); }
.eyebrow { position: relative; z-index: 2; display: inline-block; color: #b9b5ff; margin-bottom: 7px; font-weight: 700; font-size: .8rem; }
.hero-actions { position: relative; z-index: 2; display: flex; gap: 10px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.metric-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.metric-card { display: flex; align-items: center; gap: 14px; padding: 16px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.metric-card div { min-width: 0; }
.metric-card small, .metric-card > div span { display: block; }
.metric-card strong { display: block; margin: 2px 0; font-size: 1.35rem; color: var(--ink); }
.metric-icon { display: inline-grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; border-radius: 12px; font-weight: 800; line-height: 1; text-align: center; }
.metric-icon .ui-icon { width: 19px; height: 19px; }
.metric-icon.purple { color: var(--primary); background: var(--primary-soft); }
.metric-icon.green { color: var(--green); background: var(--green-soft); }
.metric-icon.amber { color: #d48b0f; background: var(--amber-soft); }
.metric-icon.blue { color: var(--blue); background: #eaf2ff; }
.metric-icon.coral { color: var(--coral); background: var(--coral-soft); }
.dashboard-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-bottom: 16px; }
.current-project, .activity-panel { min-height: 310px; }
.project-summary { display: grid; grid-template-columns: minmax(220px, .8fr) 1fr; gap: 20px; padding: 18px; }
.project-summary > img { width: 100%; height: 190px; object-fit: cover; border-radius: 12px; }
.empty-project-summary { align-items: center; }
.empty-media { min-height: 190px; display: grid; place-items: center; border: 1px dashed #cdd6e7; border-radius: 12px; color: var(--primary); background: linear-gradient(145deg,#f7f8ff,#eef2fb); }
.empty-media span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: white; box-shadow: var(--shadow); font-size: 1.7rem; }
.dashboard-video-upload { width: 100%; grid-auto-flow: row; align-content: center; gap: 10px; font: inherit; cursor: pointer; }
.dashboard-video-upload small { font-size: .78rem; }
.dashboard-video-upload:hover, .dashboard-video-upload:focus-visible { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 2px; }
.dashboard-video-frame { position: relative; height: 190px; overflow: hidden; border-radius: 12px; background: #111318; }
.dashboard-video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.dashboard-video-replace { position: absolute; right: 10px; bottom: 10px; width: 35px; height: 35px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; background: rgba(14,18,25,.78); font-size: 1.25rem; cursor: pointer; }
.dashboard-video-replace:hover, .dashboard-video-replace:focus-visible { border-color: #65d7ed; background: #203b43; }
.status-row { display: flex; align-items: center; gap: 10px; color: var(--muted); margin-bottom: 8px; }
.status { display: inline-flex; width: fit-content; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.status.success { color: #05855c; background: var(--green-soft); }
.status.warning { color: #9e6810; background: var(--amber-soft); }
.status.info { color: #2f67ca; background: #e9f1ff; }
.stepper { display: flex; align-items: center; gap: 3px; margin: 18px 0; }
.stepper span { position: relative; flex: 1; padding-top: 17px; color: #a0abc0; font-size: .75rem; text-align: center; }
.stepper span::before { content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #d8deeb; transform: translateX(-50%); }
.stepper span:not(:last-child)::after { content: ""; position: absolute; top: 4px; left: calc(50% + 6px); right: calc(-50% + 6px); height: 2px; background: #dde3ef; }
.stepper span.done::before, .stepper span.active::before { background: var(--primary); }
.stepper span.done::after { background: var(--primary); }
.stepper span.active { color: var(--primary); font-weight: 700; }
.activity-list { display: grid; }
.activity-list button { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 15px 16px; border: 0; border-bottom: 1px solid var(--line); background: white; text-align: left; }
.activity-list button:hover { background: var(--surface-2); }
.activity-list strong, .activity-list small { display: block; }
.flow-overview { padding-bottom: 18px; }
.flow-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 9px; padding: 18px; }
.flow-steps button { display: flex; gap: 12px; align-items: center; min-height: 72px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); text-align: left; }
.flow-steps button:hover { border-color: #bebaff; background: var(--primary-soft); }
.flow-steps b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--primary); background: var(--primary-soft); }
.flow-steps strong, .flow-steps small { display: block; }
.flow-steps > i { color: #aab4c7; font-style: normal; }

.view-toolbar, .canvas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.view-toolbar h2, .view-toolbar p { margin-bottom: 0; }
.toolbar-note { margin-left: 9px; color: var(--muted); }
.extract-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .7fr); gap: 16px; margin-bottom: 16px; }
[data-view-panel="extract"] { --extract-workspace-height: clamp(380px, 42vh, 480px); }
.extract-workspace-panel { box-sizing: border-box; width: 100%; height: var(--extract-workspace-height); min-width: 0; scroll-margin-top: 88px; }
.video-panel { padding-bottom: 16px; }
.project-video-collection { margin: 12px 16px 0; }
.project-video-collection-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.project-video-collection-title small { color: var(--muted); }
.project-video-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.project-video-item { flex: 0 0 min(220px, 70vw); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); cursor: pointer; text-align: left; }
.project-video-item strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-video-item small { color: var(--muted); }
.project-video-item.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.project-video-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.video-preview { position: relative; overflow: hidden; margin: 14px 16px; border-radius: 13px; background: #101522; }
.video-preview img { width: 100%; height: 310px; object-fit: cover; }
.empty-video-state { min-height: 310px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 30px; color: #c9d2e4; text-align: center; background: radial-gradient(circle at 50% 40%,rgba(87,79,255,.18),transparent 38%),#111827; }
.empty-video-state > span { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 3px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; font-size: 1.65rem; }
.empty-video-state strong { color: white; font-size: 1.02rem; }
.empty-video-state small { max-width: 430px; color: #91a0ba; }
.video-preview .empty-video-state { width: 100%; border: 0; cursor: pointer; }
.video-preview .empty-video-state:hover > span { border-color: var(--primary); color: var(--primary); }
.play-button { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: white; background: rgba(12,19,35,.65); transform: translate(-50%,-50%); backdrop-filter: blur(8px); }
.video-time { position: absolute; left: 14px; bottom: 12px; padding: 5px 8px; color: white; background: rgba(6,11,22,.68); border-radius: 7px; font-size: .82rem; }
.timeline-strip { position: relative; height: 10px; margin: 4px 20px 0; border-radius: 999px; background: linear-gradient(90deg,#dfe6f4,#c8d7f4); }
.timeline-strip i { position: absolute; top: -4px; width: 3px; height: 18px; background: var(--primary); border-radius: 2px; }
.frame-timeline-selection { position: absolute; inset-block: 0; border-radius: inherit; background: #4ccfe4; opacity: .9; }
.frame-range-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 20px 4px; }
.frame-range-controls label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.frame-range-controls input { width: 90px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.video-editing-region { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; padding: 16px; overflow: auto; border: 1px solid #343b43; border-radius: 14px; background: #1b1e22; }
.video-editing-region[hidden] { display: none; }
.video-editing-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.video-editing-heading > div { display: grid; gap: 3px; }
.video-editing-heading strong { color: #edf7f8; font-size: 14px; }
.video-editing-heading small, .video-editing-heading output { color: #94a4ad; font-size: 12px; }
.video-editing-heading output { padding: 5px 9px; border: 1px solid #3b4b53; border-radius: 7px; color: #baf4fb; background: #17262c; font-variant-numeric: tabular-nums; }
.video-timeline-shell { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 185px; padding: 12px; border: 1px solid #303840; border-radius: 10px; background: #15181c; }
.video-timeline-scale { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: #71818b; font-size: 10px; font-variant-numeric: tabular-nums; }
.video-timeline-filmstrip { display: flex; flex: 1 1 auto; min-height: 112px; overflow: hidden; border: 1px solid #3e4b54; border-radius: 7px; background: linear-gradient(135deg, #1d2a30, #10191e); cursor: crosshair; touch-action: none; }
.video-timeline-filmstrip-status { display: grid; flex: 1; place-items: center; padding: 16px; color: #91a7b1; font-size: 12px; text-align: center; }
.video-timeline-filmstrip-frame { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-right: 1px solid #10191e; }
.video-timeline-filmstrip-frame.is-placeholder { background: linear-gradient(145deg, #27363e, #19242a 58%, #263841); }
.video-timeline-filmstrip-frame.is-placeholder:nth-child(even) { background: linear-gradient(145deg, #233039, #162128 58%, #24343c); }
.video-timeline-filmstrip-frame:last-child { border-right: 0; }
.video-timeline-filmstrip-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-timeline-filmstrip-frame span { position: absolute; right: 4px; bottom: 4px; padding: 2px 4px; border-radius: 3px; color: #fff; background: rgba(5, 10, 14, .72); font-size: 10px; font-variant-numeric: tabular-nums; }
.video-timeline-track-wrap { position: relative; padding: 2px 0 4px; margin-top: 12px; cursor: crosshair; touch-action: none; }
.video-editing-region .timeline-strip { height: 18px; margin: 0; border: 1px solid #3e4b54; border-radius: 6px; background: repeating-linear-gradient(90deg,#2b343b 0 8%,#242c32 8% 8.35%); }
.video-editing-region .timeline-strip::before, .video-editing-region .timeline-strip::after { position: absolute; top: -4px; bottom: -4px; z-index: 3; width: 4px; border-radius: 3px; background: #f2fdff; box-shadow: 0 0 0 2px rgba(86,220,239,.35); content: ""; pointer-events: none; }
.video-editing-region .timeline-strip::before { left: var(--trim-start, 0%); }
.video-editing-region .timeline-strip::after { left: var(--trim-end, 100%); }
.video-editing-region .frame-timeline-selection { z-index: 1; inset-block: 0; border-radius: 5px; background: linear-gradient(90deg,#49c9de,#64d9e6); opacity: .95; }
.video-editing-region .timeline-strip i { top: 2px; z-index: 2; width: 3px; height: 14px; border-radius: 2px; background: rgba(255,255,255,.8); }
.video-timeline-playhead { position: absolute; top: -6px; bottom: -7px; z-index: 4; width: 2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px rgba(87,212,235,.35), 0 0 12px rgba(87,212,235,.7); pointer-events: none; }
.video-timeline-playhead::before { position: absolute; top: -3px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: #fff; content: ""; transform: translateX(-50%); }
.video-playhead-control { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: #9cabb3; font-size: 11px; }
.video-playhead-control input { flex: 1; min-width: 0; accent-color: #56d4e8; }
.video-editing-region .frame-range-controls { padding: 12px 0 0; }
.video-editing-region .frame-range-controls label { color: #aab6bd; }
.video-editing-region .frame-range-controls input { color: #e9f2f4; background: #20252a; border-color: #3d4850; }
.key-frames-panel { display: flex; flex-direction: column; overflow: hidden; }
.key-frames-panel .panel-heading { flex: 0 0 auto; }
.key-frames-panel .frame-grid { flex: 1 1 auto; min-height: 0; overflow: auto; align-content: start; grid-auto-rows: max-content; }
.key-frames-panel .frame-grid.empty-frame-grid { min-height: 0; align-content: center; }

.app-view.history-view { display: none; }
.app-view.history-view.active { display: grid; gap: 18px; align-content: start; }
.history-filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.history-filters button { padding: 9px 17px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.history-filters button.active { color: var(--primary); background: var(--primary-soft); border-color: var(--primary); }
.history-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); }
.history-actions label { display: inline-flex; align-items: center; gap: 8px; }
.history-groups { display: grid; gap: 28px; }
.history-group h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 20px; }
.history-group h3 small { color: var(--muted); font-size: 12px; font-weight: 400; }
.history-card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 16px; }
.history-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.history-preview { position: relative; display: grid; place-items: center; height: 190px; overflow: hidden; background: #111318; }
.history-preview > img, .history-preview > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.history-preview audio { width: calc(100% - 20px); }
.history-audio-icon { color: var(--primary); font-size: 52px; }
.history-text-preview { width: 100%; height: 100%; margin: 0; padding: 22px; overflow: hidden; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; mask-image: linear-gradient(#000 65%,transparent); }
.history-select { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: rgba(0,0,0,.7); }
.history-card-body { display: grid; gap: 8px; padding: 13px; }
.history-kind { width: fit-content; color: var(--primary); font-size: 12px; }
.history-card-body strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.history-card-body small, .history-card-body p { margin: 0; color: var(--muted); font-size: 12px; }
.history-card-body p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.history-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.history-card-actions button, .history-card-actions a { padding: 5px 8px; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); font-size: 12px; text-decoration: none; }
.history-empty { padding: 80px 20px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; }
.settings-panel { padding-bottom: 16px; }
.settings-panel > label { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin: 16px; font-weight: 700; }
.settings-panel input[type=range] { grid-column: 1; width: 100%; accent-color: var(--primary); }
.frame-count-note { margin: -5px 16px 12px; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.segmented { display: flex; padding: 4px; margin: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.segmented button { flex: 1; border: 0; padding: 9px 7px; color: var(--muted); background: transparent; border-radius: 8px; }
.segmented button.selected { color: var(--primary); background: white; box-shadow: 0 3px 10px rgba(32,46,84,.08); font-weight: 700; }
.switchline { display: flex !important; flex-direction: row !important; justify-content: space-between; align-items: center; gap: 18px !important; }
.switchline span { display: grid; }
.switchline small { font-weight: 400; }
.switchline input[type=checkbox] {
  appearance: none;
  flex: 0 0 auto;
  width: 42px;
  height: 23px;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: #ced5e4;
  transition: .2s;
}
.switchline input[type=checkbox]::before { content: ""; display: block; width: 19px; height: 19px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: .2s; }
.switchline input[type=checkbox]:checked { background: var(--primary); }
.switchline input[type=checkbox]:checked::before { transform: translateX(19px); }
.settings-panel > .primary-button { margin: 8px 16px 0; width: calc(100% - 32px); }
.settings-panel > #extract-cancel { margin: 8px 16px 0; width: calc(100% - 32px); }
.frame-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; padding: 14px; }
.frame-source-warning { margin: 12px 14px 0; padding: 11px 13px; border: 1px solid #f4cb84; border-radius: 9px; color: #754812; background: #fff6e6; line-height: 1.45; }
.frame-source-warning[hidden] { display: none; }
.danger-text { color: #c13c48 !important; }
.danger-text:disabled { opacity: .45; }
.frame-grid.empty-frame-grid { grid-template-columns: 1fr; min-height: 150px; place-items: center; }
.empty-table-state { width: 100%; padding: 28px; color: var(--muted); text-align: center; border: 1px dashed #d7deeb; border-radius: 11px; background: var(--surface-2); }
.frame-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; }
.frame-card.selected { border: 2px solid var(--primary); }
.frame-card img { width: 100%; aspect-ratio: 1.35; object-fit: cover; }
.frame-card .frame-number { position: absolute; top: 7px; left: 7px; padding: 2px 6px; color: white; background: rgba(8,15,31,.76); border-radius: 5px; font-size: .75rem; }
.frame-card .frame-check { position: absolute; top: 7px; right: 7px; accent-color: var(--primary); }
.frame-card div:last-child { padding: 8px; }
.frame-card strong, .frame-card small { display: block; }
.two-column { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; margin-top: 16px; }
textarea, select, .form-row input, .comment-box input, .copy-field input {
  width: 100%;
  border: 1px solid #dce3f0;
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink);
  background: white;
  resize: vertical;
}
.two-column textarea { width: calc(100% - 32px); margin: 14px 16px 8px; }
.form-row { display: flex; align-items: center; gap: 8px; padding: 8px 16px 16px; }
.generated-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.generated-grid img { width: 100%; height: 145px; object-fit: cover; border-radius: 10px; }
.generated-grid.empty-results { grid-template-columns: 1fr; min-height: 173px; place-items: center; color: var(--muted); text-align: center; }
.generated-grid.empty-results p { max-width: 360px; margin: 0; }
.generated-card { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; }
.generated-card img { display: block; border-radius: 0; }
.generated-card > div { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px; }
.generated-card button, .generated-card a, .frame-actions button, .member-actions button { padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: white; font-size: .72rem; text-decoration: none; }
.generated-card button:hover, .generated-card a:hover, .frame-actions button:hover, .member-actions button:hover { color: var(--primary); border-color: #aaa7ff; background: var(--primary-soft); }
.frame-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.member-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.member-actions button[data-member-force-logout] { color: #e98d8d; border-color: rgba(233,141,141,.45); }
.member-actions button[data-member-force-logout]:hover { color: #fff; border-color: #d35454; background: #8b3030; }
.member-actions button:disabled { opacity: .55; cursor: wait; }
.feature-status { min-height: 20px; margin: 8px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.voice-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 8px 0; }
.voice-settings label { display: grid; gap: 4px; color: var(--muted); font-size: .74rem; }
.voice-copy { display: grid; gap: 6px; padding: 8px 0 2px; }
.voice-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.voice-copy label { color: var(--ink); font-weight: 700; font-size: .82rem; }
.voice-copy textarea { width: 100%; min-height: 72px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; background: #fff; color: var(--ink); font: inherit; font-size: .82rem; line-height: 1.5; }
.subtitle-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 0; }
.subtitle-settings label { display: grid; gap: 4px; color: var(--muted); font-size: .74rem; }
.shot-lock { display: inline-block; margin-left: 5px; padding: 1px 4px; border-radius: 4px; color: var(--primary); background: var(--primary-soft); font-size: .62rem; font-style: normal; }
.notification-item { display: grid; gap: 4px; padding: 10px; border-bottom: 1px solid var(--line); }
.notification-item.unread { border-left: 3px solid var(--primary); background: var(--primary-soft); }
.comment-actions { display: flex; gap: 6px; margin-top: 6px; }
.comment-actions button { border: 0; color: var(--primary); background: transparent; font-size: .72rem; }
.comment-resolved { opacity: .65; }
.comment-reply-context { display: flex; justify-content: space-between; gap: 8px; padding: 8px 16px; color: var(--muted); background: var(--primary-soft); font-size: .78rem; }
.comment-reply-context[hidden] { display: none; }
.reviewer-picker { display: grid; gap: 6px; margin: 10px 16px; color: var(--muted); font-size: .78rem; }
.reviewer-picker select { width: 100%; }
.share-list { display: grid; gap: 6px; margin-top: 10px; }
.share-item { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.share-item > span { display: grid; flex: 1; }
.share-item small { color: var(--muted); }

.source-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 10px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.source-bar > span { font-weight: 700; padding: 0 8px; }
.source-bar button:not(.text-button) { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 0; border-radius: 9px; color: var(--ink); background: var(--surface-2); }
.source-bar #generate-script-button { margin-left: auto; color: white; background: var(--primary); }
.source-bar button .ui-icon { width: 17px; height: 17px; color: var(--primary); }
.source-bar em { margin-left: auto; color: var(--muted); font-style: normal; }
.script-layout { display: grid; grid-template-columns: minmax(330px, .95fr) minmax(480px, 1.25fr) minmax(260px, .65fr); gap: 14px; }
.color-heading { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; color: white; border-radius: 15px 15px 0 0; }
.color-heading strong { font-size: 1.06rem; }
.color-heading button { min-width: 34px; min-height: 31px; border: 1px solid rgba(255,255,255,.35); border-radius: 7px; color: inherit; background: rgba(255,255,255,.12); }
.color-heading.blue { background: linear-gradient(135deg, #3c7cf6, #5c66f8); }
.color-heading.pink { background: linear-gradient(135deg, #ed4673, #ef6689); }
.script-editor { min-height: 590px; padding: 18px; line-height: 1.9; }
.script-editor p { color: var(--ink); }
.script-editor h4 { margin: 18px 0 6px; }
.script-editor h4:first-child { margin-top: 0; }
.user-edit { position: relative; padding: 10px 12px; color: #274ea9 !important; background: #eef3ff; border-left: 3px solid var(--blue); border-radius: 7px; }
.user-edit span { position: absolute; right: 8px; bottom: 5px; padding: 2px 6px; color: white; background: var(--primary); border-radius: 5px; font-size: .68rem; line-height: 1.4; }
.editor-footer { display: flex; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 5px; }
.storyboard-head, .shot-row { display: grid; grid-template-columns: 74px 54px 58px 1fr 50px; align-items: center; gap: 8px; }
.storyboard-head { padding: 9px 12px; color: var(--muted); background: var(--surface-2); font-size: .78rem; }
.shot-row { position: relative; min-height: 90px; padding: 8px 12px; border-top: 1px solid var(--line); }
.shot-row img,.shot-row video { width: 66px; height: 66px; object-fit: cover; border-radius: 8px; }
.shot-row p { margin: 0; color: var(--ink); font-size: .83rem; line-height: 1.45; }
.shot-row strong { color: var(--ink); }
.shot-row button { position: absolute; right: 5px; top: 5px; border: 0; background: transparent; color: var(--muted); }
.shot-row p:empty::before { content: "待 AI 根据参考画面生成"; color: var(--muted); }
.shot-picker-toolbar { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.shot-picker-toolbar span { color: var(--muted); font-size: .875rem; }
.shot-picker-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; max-height: min(54vh,500px); overflow-y: auto; }
.shot-picker-item { position: relative; overflow: hidden; display: grid; gap: 5px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.shot-picker-item:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.shot-picker-item input { position: absolute; top: 10px; right: 10px; z-index: 1; width: 18px; height: 18px; }
.shot-picker-item img { width: 100%; height: 112px; object-fit: cover; border-radius: 7px; }
.shot-picker-item span { overflow: hidden; color: var(--ink); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
dialog:has(.shot-picker-grid) { width: min(92vw,820px); }
.ai-assistant { padding-bottom: 14px; }
.assistant-notice { margin: 12px; padding: 12px; color: #27664f; background: var(--green-soft); border-radius: 10px; font-size: .82rem; }
.ai-assistant > label, .ai-assistant > textarea, .ai-assistant > .primary-button { margin: 10px 12px; width: calc(100% - 24px); }
.version-list { margin: 14px 12px 0; border-top: 1px solid var(--line); padding-top: 12px; }
.version-list button { width: 100%; display: flex; justify-content: space-between; padding: 9px; border: 0; color: var(--ink); background: transparent; }
.version-list button.selected { color: var(--primary); background: var(--primary-soft); border-radius: 8px; }
dialog:has(.version-comparison) { width: min(94vw, 900px); }
.version-comparison { max-height: min(65vh, 620px); overflow: auto; border-block: 1px solid var(--line); margin: 14px 0; padding: 12px 0; }
.version-comparison h4 { margin: 0 0 10px; }
.version-comparison ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; }
.version-comparison li { display: flex; justify-content: space-between; gap: 8px; background: var(--surface-2); border-radius: 8px; padding: 8px; }
.version-comparison li strong { white-space: nowrap; }
.version-script-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.version-script-compare > div { min-width: 0; }
.version-script-compare pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 250px; overflow: auto; background: var(--surface-2); border-radius: 8px; padding: 10px; font: inherit; }
.version-shot-row { display: grid; gap: 4px; border-top: 1px solid var(--line); padding: 8px 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .version-comparison ul, .version-script-compare { grid-template-columns: 1fr; } }

.post-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; margin-bottom: 14px; }
.rough-preview { position: relative; margin: 16px; overflow: hidden; border-radius: 13px; background: #0c1220; }
.rough-preview > img { width: 100%; height: 230px; object-fit: cover; filter: brightness(.78); }
.rough-preview .empty-video-state { min-height: 220px; }
.subtitle-preview { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); max-width: 80%; color: white; font-size: 1.15rem; font-weight: 700; text-shadow: 0 2px 7px #000; white-space: nowrap; }
.production-tools { padding-bottom: 12px; }
.production-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 12px; }
.production-track { min-width: 0; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.tool-action { width: 100%; min-height: 48px; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 7px; margin: 0; padding: 7px; border: 0; border-radius: 8px; background: white; text-align: left; }
.tool-action:hover { border-color: #bebaff; }
.tool-action:focus-visible, .canvas-floating-tools button:focus-visible, .icon-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tool-action .metric-icon { flex-basis: 40px; }
.tool-action .metric-icon .ui-icon { width: 20px; height: 20px; }
.tool-action strong, .tool-action small { display: block; }
.tool-action small { font-size: .75rem; }
.tool-action em { color: var(--primary); font-size: .8125rem; font-style: normal; }
.production-track .subtitle-settings, .production-track .voice-settings { padding: 6px; }
.production-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 12px; }
.video-format-choice { display: grid; gap: 3px; font-size: .77rem; color: var(--muted); }
.video-format-choice select { min-width: 135px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); padding: 6px 8px; }
.cost-box { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.cost-box strong { font-size: 1rem; }
.production-footer > .primary-button { min-width: 175px; }
.timeline-panel { position: relative; padding-bottom: 18px; overflow-x: auto; }
.timeline-panel .timeline-ruler, .timeline-panel .track { min-width: var(--timeline-content-width, 680px); }
.timeline-ruler { display: grid; grid-template-columns: repeat(7,1fr); padding: 12px 20px 8px 112px; color: var(--muted); font-size: .75rem; }
.track { display: grid; grid-template-columns: 82px 1fr; gap: 12px; align-items: center; min-height: 58px; padding: 6px 18px; border-top: 1px solid var(--line); }
.track > b { color: var(--muted); font-size: .82rem; }
.clip-row { display: flex; height: 42px; gap: 3px; }
.clip-row .subtitle-gap { min-width: 0; background: transparent; }
.clip-row i { display: grid; place-items: center; flex: 1; color: white; border-radius: 5px; font-style: normal; font-size: .78rem; }
.video-clips i { background: linear-gradient(135deg,#3e6ed3,#587ef0); }
.video-clips { position: relative; }
.video-clips.has-drop::after { content: ""; position: absolute; z-index: 5; top: -7px; bottom: -7px; left: var(--drop-x, 0px); width: 3px; border-radius: 3px; background: var(--primary); pointer-events: none; }
.timeline-clip { display: flex; align-items: center; min-width: 54px; overflow: hidden; border: 2px solid transparent; border-radius: 7px; background: linear-gradient(135deg,#3e6ed3,#587ef0); color: white; cursor: grab; user-select: none; }
.timeline-clip:active { cursor: grabbing; }
.timeline-clip.selected { border-color: #ffbd4d; box-shadow: 0 0 0 2px rgba(255,189,77,.25); }
.timeline-clip.dragging { opacity: .42; }
.timeline-clip .clip-label { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .75rem; font-weight: 700; }
.timeline-clip .clip-label small { font-size: .65rem; font-weight: 500; opacity: .85; }
.clip-trim { width: 10px; height: 100%; flex: none; border: 0; border-radius: 0; background: rgba(255,255,255,.24); cursor: ew-resize; touch-action: none; }
.clip-trim:hover, .clip-trim:focus-visible { background: #ffd276; outline: 0; }
.subtitle-clips i { background: linear-gradient(135deg,#7d65d9,#9c82ea); }
.audio-wave { height: 36px; border-radius: 5px; opacity: .85; }
.purple-wave { background: repeating-linear-gradient(90deg,#7960da 0 3px,transparent 3px 7px), linear-gradient(#efeaff,#efeaff); }
.green-wave { background: repeating-linear-gradient(90deg,#26ae87 0 2px,transparent 2px 6px), linear-gradient(#e3f8f0,#e3f8f0); }
.playhead { position: absolute; z-index: 4; left: 47%; top: 88px; bottom: 18px; width: 2px; background: var(--coral); pointer-events: none; }
.playhead::before { content: ""; position: absolute; top: -4px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); }

.canvas-toolbar { flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.canvas-toolbar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.canvas-toolbar .icon-button, .preview-stage .icon-button { flex-basis: 44px; width: 44px; height: 44px; }
.with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.with-icon .ui-icon { width: 17px; height: 17px; }
.canvas-toolbar #canvas-project-name { overflow: hidden; max-width: 240px; text-overflow: ellipsis; white-space: nowrap; }
.canvas-selection-summary { color: var(--primary); font-size: .875rem; font-weight: 700; white-space: nowrap; }
.canvas-shell { position: relative; display: block; min-height: 540px; overflow: hidden; }
.canvas-dola-panel { position: absolute; z-index: 24; top: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; width: min(540px,calc(100% - 24px)); padding: 12px; border: 1px solid #cbd4ed; border-radius: 14px; background: #fff; box-shadow: 0 20px 50px rgba(20,35,75,.22); }
.canvas-dola-panel[hidden], .canvas-dola-refs[hidden] { display: none !important; }
.canvas-dola-heading { display: flex; justify-content: space-between; align-items: center; min-height: 26px; }
.canvas-dola-heading strong { color: var(--ink); }
.canvas-dola-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 6px; }
.canvas-dola-controls label { display: grid; gap: 3px; flex: 1 1 145px; min-width: 0; font-size: .75rem; color: var(--muted); }
.canvas-dola-controls select { width: 100%; min-height: 34px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ink); }
.canvas-dola-controls button { min-height: 34px; }
.canvas-dola-status { margin: 0; color: #526482; font-size: .75rem; line-height: 1.4; }
.canvas-dola-refs { display: flex; flex-wrap: wrap; gap: 6px; max-height: 78px; overflow-y: auto; }
.canvas-dola-refs a { padding: 5px 8px; border-radius: 6px; background: #eef0ff; color: var(--primary); font-size: .72rem; }
#canvas-dola-send-refs { align-self: flex-start; }
.canvas-dola-pane { display: grid; flex: 1; place-items: center; min-height: 270px; border: 1px solid #dce2f0; border-radius: 9px; background: #f5f7fc; color: var(--muted); font-size: .8rem; }
.canvas-dola-pane .dola-live-frame { width: 100%; height: 100%; min-height: 270px; }
.canvas-dola-import { display: grid; place-items: center; flex: 0 0 auto; min-height: 42px; padding: 8px; border: 1px dashed #7770f5; border-radius: 8px; background: #f6f5ff; color: var(--primary); font-size: .85rem; font-weight: 700; cursor: pointer; }
.canvas-dola-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.canvas-dola-result-actions > button { min-height: 42px; }
@media (max-width: 700px) { .canvas-dola-result-actions { grid-template-columns: 1fr; } }
.canvas-dola-import input { display: none; }
.canvas-dola-node-open { align-self: flex-start; margin: 5px 10px 9px; padding: 5px 8px; border: 1px solid #c9c7ff; border-radius: 6px; background: #f2f1ff; color: var(--primary); font-size: .7rem; cursor: pointer; }
.canvas-dola-result video { width: 100%; max-height: 125px; border-radius: 6px; background: #101727; }
.canvas-dola-result .canvas-node-editor { min-height: 48px; }
.canvas-job-status { margin: 7px 0 10px; padding: 8px 12px; border: 1px solid #c9d6f0; border-radius: 9px; background: #f4f7ff; color: #243b65; font-size: .875rem; }
.save-conflict-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 18px; border-bottom: 1px solid #f3c27a; background: #fff5df; color: #70470b; font-size: .875rem; }
.save-conflict-banner[hidden] { display: none !important; }
.canvas-toolbar [hidden], .canvas-job-status[hidden] { display: none !important; }
.canvas-stage { position: relative; min-width: 0; }
.canvas-workspace { position: relative; height: min(760px,calc(100vh - 335px)); min-height: 540px; overflow: auto; border: 1px solid #d9e1ef; border-radius: 14px; background: #f3f6fb; }
.canvas-workspace.drag-over { border-color: var(--primary); box-shadow: inset 0 0 0 3px rgba(87,79,255,.2); }
.canvas-world { position: relative; width: 2600px; height: 1600px; transform-origin: 0 0; background-image: radial-gradient(#bcc7dc 1px, transparent 1px); background-size: 19px 19px; }
.canvas-boundary { position: absolute; inset: 0 auto auto 0; width: 2600px; height: 1600px; pointer-events: none; }
.canvas-workspace.pan-mode { cursor: grab; }
.canvas-workspace.pan-mode:active { cursor: grabbing; }
.node-library { position: absolute; z-index: 10; top: 12px; left: 12px; width: 230px; min-width: 0; max-height: calc(100% - 24px); overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); transform: translateX(calc(-100% - 25px)); visibility: hidden; pointer-events: none; transition: transform .18s ease, visibility .18s; }
.canvas-shell.show-library .node-library { transform: translateX(0); visibility: visible; pointer-events: auto; }
.node-library h3 { margin-bottom: 10px; }
.canvas-library-search { display: grid; gap: 5px; margin: 2px 0 10px; color: var(--muted); font-size: .8125rem; }
.canvas-library-search input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; }
[data-add-node][hidden] { display: none !important; }
.node-library button[hidden] { display: none; }
.canvas-panel-close { float: right; width: 26px !important; height: 26px; display: inline-grid !important; place-items: center; padding: 0 !important; border: 0 !important; border-radius: 6px; background: var(--surface-2) !important; color: var(--muted); }
.node-library button { width: 100%; display: flex; align-items: center; gap: 7px; padding: 8px 7px; border: 0; border-radius: 7px; color: var(--ink); background: transparent; text-align: left; }
.node-library button .ui-icon { width: 17px; height: 17px; color: #71809d; }
.node-library button > [data-ui-icon] { display: inline-grid; place-items: center; flex: 0 0 17px; width: 17px; height: 17px; }
.node-library button > [data-ui-icon] .ui-icon { width: 17px; height: 17px; }
.node-library button:hover { color: var(--primary); background: var(--primary-soft); }
.node-library-help { margin: 8px 2px 0; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.node-library-divider { border-top: 1px solid var(--line); margin: 10px 0; }
.canvas-material-label { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 9px 8px; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: .85rem; font-weight: 700; cursor: pointer; }
.canvas-material-label > [data-ui-icon] { display: inline-grid; place-items: center; flex: 0 0 17px; width: 17px; height: 17px; }
.canvas-material-label .ui-icon { width: 17px; height: 17px; }
.canvas-material-label input { display: none; }
.canvas-library-documents { display: grid; gap: 3px; max-height: 180px; margin-top: 10px; padding-top: 8px; overflow-y: auto; border-top: 1px solid var(--line); }
.canvas-library-documents[hidden] { display: none; }
.canvas-library-documents > strong { margin: 0 2px 3px; color: var(--muted); font-size: .72rem; }
.node-library .canvas-library-documents button { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); background: #f6f7ff; cursor: grab; }
.canvas-side-panel { position: absolute; z-index: 10; top: 12px; right: 12px; display: block; width: 340px; max-width: calc(100% - 24px); height: calc(100% - 24px); min-height: 0; transform: translateX(calc(100% + 25px)); visibility: hidden; pointer-events: none; transition: transform .18s ease, visibility .18s; }
.canvas-shell.show-inspector .canvas-side-panel, .canvas-shell.show-chat .canvas-side-panel { transform: translateX(0); visibility: visible; pointer-events: auto; }
.canvas-shell.show-inspector .canvas-chat-panel, .canvas-shell.show-chat .canvas-inspector { display: none; }
.canvas-shell.show-chat .canvas-chat-panel { display: flex; flex-direction: column; height: 100%; }
.canvas-shell.show-chat .canvas-chat-messages { flex: 1; }
.canvas-inspector, .canvas-chat-panel { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.canvas-inspector { max-height: 100%; overflow-y: auto; box-shadow: var(--shadow); }
.canvas-chat-panel { box-shadow: var(--shadow); }
.canvas-empty-state { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; justify-items: center; gap: 8px; width: min(360px,calc(100% - 32px)); padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.95); box-shadow: var(--shadow); text-align: center; transform: translate(-50%,-50%); }
.canvas-empty-state strong { color: var(--ink); font-size: 1.15rem; }
.canvas-empty-state span { color: var(--muted); font-size: .875rem; }
.canvas-empty-state > div { display: flex; gap: 8px; margin-top: 8px; }
.canvas-stage.has-nodes .canvas-empty-state { display: none; }
.canvas-context-menu { position: absolute; z-index: 20; display: grid; min-width: 160px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: var(--shadow); }
.canvas-context-menu[hidden] { display: none; }
.canvas-context-menu button { padding: 8px 10px; border: 0; border-radius: 7px; color: var(--ink); background: transparent; text-align: left; }
.canvas-context-menu button:hover { background: var(--primary-soft); color: var(--primary); }
.canvas-minimap { position: absolute; z-index: 3; right: 14px; bottom: 70px; width: 170px; height: 110px; overflow: hidden; border: 1px solid #b9c6df; border-radius: 9px; background: rgba(249,251,255,.96); box-shadow: 0 8px 22px rgba(27,44,82,.16); cursor: crosshair; }
.canvas-minimap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.canvas-minimap-nodes, .canvas-minimap-viewport { position: absolute; inset: 0; pointer-events: none; }
.canvas-minimap-nodes span { position: absolute; min-width: 4px; min-height: 4px; border-radius: 2px; background: #596be9; }
.canvas-minimap-nodes span.selected { background: #f1a92d; }
.canvas-minimap-viewport { inset: auto; border: 1.5px solid var(--primary); border-radius: 3px; background: rgba(87,79,255,.1); }
.canvas-shortcut-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.canvas-shortcut-list > span { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: .875rem; }
.canvas-shortcut-list kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); white-space: nowrap; }
.canvas-tutorial-steps { display: grid; gap: 10px; }
.canvas-tutorial-steps p { display: grid; grid-template-columns: 34px 1fr; gap: 10px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.canvas-tutorial-steps p > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #0f1719; background: var(--primary); }
.canvas-tutorial-steps p > span { display: grid; gap: 3px; color: var(--muted); font-size: .86rem; }
.canvas-tutorial-steps strong { color: var(--ink); }
.app-shell.canvas-focus-mode { grid-template-columns: minmax(0,1fr); }
.canvas-focus-mode .sidebar, .canvas-focus-mode .topbar, .canvas-focus-mode #workflow-guide { display: none; }
.canvas-focus-mode .main-column { grid-column: 1; }
.canvas-focus-mode .content { padding: 8px; }
.canvas-focus-mode .canvas-toolbar { margin-bottom: 8px; }
.canvas-focus-mode .canvas-workspace { height: calc(100vh - 78px); min-height: 520px; }
.canvas-inspector h3, .canvas-chat-heading h3 { margin: 0 0 5px; font-size: 1rem; }
.canvas-inspector > label { display: block; margin-top: 10px; color: var(--ink); font-size: .82rem; font-weight: 700; }
.canvas-inspector input, .canvas-inspector textarea, .canvas-inspector select, #canvas-chat-input { width: 100%; margin-top: 5px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; font: inherit; resize: vertical; }
.canvas-node-file { overflow-wrap: anywhere; }
.canvas-node-lineage, .canvas-node-comments { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .83rem; }
.canvas-node-lineage > div, .canvas-node-comments > div { margin-top: 6px; color: var(--muted); overflow-wrap: anywhere; }
.canvas-node-lineage button { display: block; width: 100%; margin: 4px 0; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: #f7f9ff; text-align: left; color: var(--ink); }
.canvas-node-comments p { margin: 5px 0; padding: 6px 8px; border-radius: 7px; background: #f7f9ff; color: var(--ink); }
#canvas-node-comment-form { display: flex; gap: 6px; margin-top: 8px; }
#canvas-node-comment-form input { min-width: 0; flex: 1; }
.canvas-panel-actions { display: flex; gap: 7px; margin-top: 10px; }
.canvas-panel-actions button { min-width: 0; flex: 1; white-space: normal; }
.canvas-chat-panel { display: flex; flex-direction: column; min-height: 0; }
.canvas-chat-heading small { color: var(--muted); }
.canvas-chat-messages { flex: 1; min-height: 170px; margin: 10px 0; padding: 7px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: #f8faff; }
.canvas-chat-message { margin: 8px 0; padding: 9px; border-radius: 9px; color: var(--ink); background: white; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82rem; line-height: 1.5; }
.canvas-chat-message.user { background: #ecebff; }
.canvas-chat-message strong { display: block; margin-bottom: 4px; font-size: .75rem; }
.canvas-chat-messages .canvas-chat-empty { color: var(--muted); font-size: .82rem; line-height: 1.55; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.canvas-node { position: absolute; z-index: 4; display: flex; flex-direction: column; box-sizing: border-box; width: 240px; min-width: 180px; min-height: 140px; border: 1px solid #cad5e8; border-radius: 12px; background: white; box-shadow: 0 10px 25px rgba(45,64,103,.12); overflow: visible; user-select: none; touch-action: none; }
.canvas-node.wide { width: 280px; }
.canvas-node.canvas-text-node { height: 190px; }
.canvas-node.canvas-document-node { height: 320px; }
.canvas-node.selected { box-shadow: 0 0 0 3px rgba(87,79,255,.24), 0 14px 30px rgba(45,64,103,.15); }
.canvas-marquee { position: absolute; z-index: 7; border: 1px dashed var(--primary); background: rgba(87,79,255,.12); pointer-events: none; }
.canvas-node header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; min-width: 0; min-height: 38px; padding: 9px 12px; border-radius: 11px 11px 0 0; color: white; font-weight: 700; cursor: move; }
.canvas-node header button { flex: 0 0 auto; border: 0; color: white; background: transparent; }
.canvas-node header.violet { background: linear-gradient(135deg,#695cf7,#8375ff); }
.canvas-node header.blue { background: linear-gradient(135deg,#3981f5,#5478f0); }
.canvas-node header.green { background: linear-gradient(135deg,#13b785,#28c9a0); }
.canvas-node header.yellow { background: linear-gradient(135deg,#ecad21,#f7c84f); color: #49360b; }
.canvas-node header.pink { background: linear-gradient(135deg,#ea4975,#f46f92); }
.canvas-node > img { width: 100%; height: 78px; object-fit: cover; }
.canvas-node > audio, .canvas-node > video { display: block; width: calc(100% - 20px); max-height: 110px; margin: 8px 10px; }
.canvas-node.canvas-media-node > video, .canvas-node.canvas-media-node > img { flex: 1 1 0; width: calc(100% - 20px); height: 0; min-height: 0; max-height: none; margin: 8px 10px; border-radius: 5px; object-fit: contain; background: #111318; }
.canvas-node.canvas-media-node > audio { flex: 0 0 auto; max-height: none; }
.canvas-node .canvas-node-body { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 9px 11px; overflow: hidden; overflow-wrap: anywhere; font-size: .8rem; line-height: 1.45; }
.canvas-node-editor { display: block; flex: 1; width: 100%; min-height: 70px; padding: 6px; border: 1px solid transparent; border-radius: 6px; outline: none; color: var(--ink); background: transparent; font: inherit; line-height: 1.5; resize: none; user-select: text; touch-action: auto; }
.canvas-node-editor:hover, .canvas-node-editor:focus { border-color: #b9c6ff; background: #fafbff; }
.canvas-editor-limit { align-self: flex-end; color: var(--muted); font-size: .65rem; }
.canvas-editor-limit.is-full { color: #b65d13; font-weight: 700; }
.canvas-document-body { gap: 5px; }
.canvas-document-text { flex: 1; min-height: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; touch-action: auto; scrollbar-width: thin; }
.canvas-document-body iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: #f7f8fc; }
.canvas-document-body a { align-self: flex-start; font-size: .75rem; }
.canvas-resize-handle { position: absolute; z-index: 9; right: 2px; bottom: 2px; width: 21px; height: 21px; padding: 0; border: 0; border-radius: 0 0 8px 0; background: linear-gradient(135deg, transparent 0 52%, #7067f5 53% 59%, transparent 60% 72%, #7067f5 73% 79%, transparent 80%); cursor: nwse-resize; touch-action: none; }
.canvas-resize-handle:focus-visible { outline: 2px solid #fff; box-shadow: 0 0 0 4px var(--primary); }
.canvas-node .canvas-node-body p { padding: 0; }
.canvas-node > div:not(.node-frames):not(.mini-table):not(.node-list) { padding: 8px 12px; }
.canvas-node strong, .canvas-node small { display: block; }
.canvas-node p { margin: 0; padding: 12px; color: var(--ink); font-size: .8rem; }
.canvas-node footer { position: relative; z-index: 2; flex: 0 0 auto; min-height: 29px; box-sizing: border-box; padding: 7px 12px; overflow: hidden; color: #128663; background: #f2fbf8; font-size: .75rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.canvas-port { position: absolute; z-index: 8; top: 50%; width: 14px; height: 14px; border: 3px solid white; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 1px #625cff; transform: translateY(-50%); cursor: crosshair; }
.canvas-port::after { position: absolute; inset: -10px; content: ""; }
.canvas-port.input { left: -7px; }
.canvas-port.output { right: -7px; }
.canvas-workspace.connecting .canvas-port.input { opacity: .45; }
.canvas-workspace.connecting .canvas-port.input.compatible { opacity: 1; background: #14b889; box-shadow: 0 0 0 2px #14b889, 0 0 0 7px rgba(20,184,137,.2); }
.node-frames { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; padding: 8px 8px 0; }
.node-frames img { width: 100%; height: 48px; object-fit: cover; border-radius: 5px; }
.node-list { display: grid; gap: 6px; padding: 10px; }
.node-list span, .mini-table span { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 6px; background: var(--surface-2); font-size: .78rem; }
.mini-table { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; padding: 0 10px 10px; }
.connectors { position: absolute; z-index: 2; inset: 0 auto auto 0; width: 2600px; height: 1600px; pointer-events: none; overflow: visible; }
.connectors .canvas-edge { pointer-events: all; cursor: pointer; outline: none; }
.connectors .canvas-edge-hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; }
.connectors .canvas-edge-line { fill: none; stroke: var(--primary); stroke-width: 2.2; pointer-events: none; transition: stroke .14s ease, stroke-width .14s ease; }
.connectors .canvas-edge:hover .canvas-edge-line,
.connectors .canvas-edge:focus-visible .canvas-edge-line,
.connectors .canvas-edge.selected .canvas-edge-line { stroke: #ef476f; stroke-width: 4; }
.connectors path.pending { stroke: #14b889; stroke-dasharray: 7 5; pointer-events: none; }
.connectors .canvas-edge.running .canvas-edge-line { stroke: #e9a826; stroke-dasharray: 7 5; }
.connectors .canvas-edge.done .canvas-edge-line { stroke: #13ae82; }
.connectors .canvas-edge.failed .canvas-edge-line { stroke: #e14f60; }
.track-empty { display: flex; align-items: center; color: var(--muted); font-size: .78rem; }
.clip-row .single-clip { flex: 0 1 46%; padding: 0 12px; background: linear-gradient(135deg,#26ae87,#1c9477); }
.empty-editor:empty::before { color: var(--muted); content: attr(data-placeholder); }
.shot-placeholder, .batch-placeholder, .project-placeholder { display: grid; place-items: center; color: #7886a4; background: var(--surface-2); }
.shot-placeholder .ui-icon, .batch-placeholder .ui-icon, .project-placeholder .ui-icon { width: 28px; height: 28px; }
.batch-placeholder { width: 68px; height: 44px; border-radius: 7px; }
.project-placeholder { min-height: 140px; }
.canvas-floating-tools { position: absolute; z-index: 8; display: flex; gap: 5px; padding: 6px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--shadow); }
.canvas-floating-tools { left: 16px; bottom: 16px; flex-direction: column; }
.canvas-floating-tools button { display: inline-grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; color: var(--ink); background: transparent; border-radius: 9px; }
.canvas-floating-tools .ui-icon { width: 19px; height: 19px; }
.canvas-floating-tools button:hover { background: var(--primary-soft); color: var(--primary); }
.canvas-floating-tools button.active { color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px #d1ceff; }
.canvas-hidden-tools { display: none !important; }
.canvas-bottom-status { position: absolute; z-index: 8; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 4px; }
.canvas-node-count { margin-right: 5px; color: var(--muted); font-size: .82rem; white-space: nowrap; }
.canvas-bottom-status button { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; color: var(--ink); background: transparent; }
.canvas-bottom-status button:hover, .canvas-bottom-status button[aria-pressed="true"] { color: var(--primary); background: var(--primary-soft); }
.canvas-bottom-status .ui-icon { width: 18px; height: 18px; }
.canvas-bottom-status .canvas-zoom-button { width: auto; min-width: 48px; padding: 0 8px; font-weight: 700; }
.canvas-zoom-popover { position: absolute; z-index: 19; left: 18px; bottom: 62px; width: 194px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); }
.canvas-zoom-popover[hidden] { display: none !important; }
.canvas-zoom-presets { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
.canvas-zoom-popover button { width: 100%; padding: 8px; border: 0; border-radius: 7px; color: var(--ink); background: var(--surface-2); }
.canvas-zoom-popover > button { margin-top: 6px; }
.canvas-zoom-popover button:hover { color: var(--primary); background: var(--primary-soft); }
.canvas-tool-divider { align-self: center; flex: 0 0 1px; width: 1px; height: 24px; margin: 0 5px; background: var(--line); }
.canvas-stage.connections-hidden .connectors { display: none; }
.canvas-minimap[hidden] { display: none !important; }

/* Infinite canvas: quiet dark working surface, modelled on the recorded workflow. */
[data-view-panel="canvas"] {
  --canvas-night: #101113;
  --canvas-panel: #202124;
  --canvas-panel-2: #292a2e;
  --canvas-line: rgba(255,255,255,.1);
  --canvas-text: #f2f3f5;
  --canvas-muted: #96999f;
  position: relative;
  min-height: 620px;
  color: var(--canvas-text);
}
[data-view-panel="canvas"] .canvas-home { display: none; min-height: max(620px,calc(100vh - 230px)); padding: 22px; overflow: auto; border: 1px solid #27292d; border-radius: 18px; background: #111214; }
[data-view-panel="canvas"].show-canvas-home .canvas-home { display: block; }
[data-view-panel="canvas"].show-canvas-home > .canvas-toolbar,
[data-view-panel="canvas"].show-canvas-home > .canvas-job-status,
[data-view-panel="canvas"].show-canvas-home > .canvas-shell { display: none !important; }
.canvas-home-create { display: grid; place-items: center; gap: 8px; width: 100%; min-height: 190px; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; color: #f4f5f6; background-color: #232427; background-image: radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(135deg,rgba(255,255,255,.025),rgba(95,214,236,.035)); background-size: 22px 22px,100% 100%; cursor: pointer; }
.canvas-home-create:hover { border-color: rgba(91,213,235,.45); background-color: #292b2e; box-shadow: 0 16px 44px rgba(0,0,0,.28); }
.canvas-home-create-icon { display: grid; place-items: center; width: 96px; height: 60px; border-radius: 19px; color: #111214; background: linear-gradient(#fff,#e7e8e9); box-shadow: 0 13px 30px rgba(0,0,0,.32); font-size: 2.3rem; line-height: 1; }
.canvas-home-create strong { font-size: 1.15rem; }
.canvas-home-create small { color: #969aa1; font-size: .82rem; }
.canvas-home-capabilities { display: grid; grid-template-columns: repeat(6,minmax(120px,1fr)); gap: 14px; margin: 26px 0 34px; }
.canvas-home-capabilities button { display: grid; justify-items: center; gap: 7px; min-width: 0; min-height: 116px; padding: 15px 9px; border: 1px solid transparent; border-radius: 14px; color: #e7e9eb; background: transparent; cursor: pointer; }
.canvas-home-capabilities button:hover { border-color: rgba(255,255,255,.09); background: #1d1f21; transform: translateY(-2px); }
.canvas-home-capabilities .ui-icon { width: 30px; height: 30px; padding: 13px; overflow: visible; border-radius: 13px; color: #d9dcdf; background: #292a2d; box-sizing: content-box; }
.canvas-home-capabilities strong { overflow: hidden; max-width: 100%; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.canvas-home-capabilities small { color: #777b82; font-size: .74rem; text-align: center; }
.canvas-home-recents { max-width: 1180px; margin: 0 auto; }
.canvas-home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.canvas-home-section-heading h2 { margin: 0 0 4px; color: #f3f4f5; font-size: 1.05rem; }
.canvas-home-section-heading p { margin: 0; color: #858990; font-size: .82rem; }
.canvas-home-section-heading > span { color: #8f9399; font-size: .8rem; }
.canvas-home-projects { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.canvas-home-project-card { position: relative; display: grid; grid-template-columns: 92px minmax(0,1fr) auto; align-items: center; gap: 14px; min-height: 96px; padding: 10px 14px 10px 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; color: #e9eaec; background: #191a1c; text-align: left; cursor: pointer; }
.canvas-home-project-card:hover,.canvas-home-project-card.current { border-color: rgba(83,204,229,.35); background: #202225; box-shadow: 0 13px 30px rgba(0,0,0,.22); }
.canvas-home-project-thumb { display: grid; place-items: center; width: 92px; height: 74px; border-radius: 12px; color: #5dd5eb; background-color: #242629; background-image: radial-gradient(circle,rgba(255,255,255,.11) 1px,transparent 1px); background-size: 12px 12px; }
.canvas-home-project-thumb .ui-icon { width: 32px; height: 32px; }
.canvas-home-project-copy { display: grid; gap: 7px; min-width: 0; }
.canvas-home-project-copy strong,.canvas-home-project-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-home-project-copy strong { color: #f2f3f4; font-size: .95rem; }
.canvas-home-project-copy small { color: #858990; font-size: .76rem; }
.canvas-home-project-card em { align-self: start; padding: 4px 8px; border-radius: 999px; color: #77d9bd; background: rgba(62,191,153,.12); font-size: .7rem; font-style: normal; }
.canvas-home-project-arrow { position: absolute; right: 15px; bottom: 12px; color: #8c9198; font-size: .72rem; }
.canvas-home-empty { grid-column: 1 / -1; display: grid; place-items: center; gap: 7px; min-height: 170px; border: 1px dashed rgba(255,255,255,.11); border-radius: 16px; color: #858990; }
.canvas-home-empty span { color: #d9dcdf; font-size: 2rem; }
.canvas-home-empty strong { color: #d9dcdf; }
[data-view-panel="canvas"] .canvas-name-button { max-width: 280px; overflow: hidden; padding: 6px 9px; border: 0; border-radius: 8px; color: #d7d9dd; background: transparent; font: inherit; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
[data-view-panel="canvas"] .canvas-name-button:hover { color: #fff; background: rgba(255,255,255,.08); }
[data-view-panel="canvas"] .canvas-toolbar {
  position: absolute;
  z-index: 14;
  top: 14px;
  left: 14px;
  right: 14px;
  margin: 0;
  padding: 8px;
  border-color: var(--canvas-line);
  border-radius: 13px;
  color: var(--canvas-text);
  background: rgba(27,28,31,.9);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}
[data-view-panel="canvas"] .canvas-toolbar #canvas-project-name { color: #d7d9dd; font-weight: 700; }
[data-view-panel="canvas"] #canvas-library-toggle,
[data-view-panel="canvas"] .node-library { display: none !important; }
[data-view-panel="canvas"] .canvas-toolbar .secondary-button,
[data-view-panel="canvas"] .canvas-toolbar .icon-button {
  border-color: rgba(255,255,255,.1);
  color: #dfe1e5;
  background: rgba(255,255,255,.045);
  box-shadow: none;
}
[data-view-panel="canvas"] .canvas-toolbar .secondary-button:hover,
[data-view-panel="canvas"] .canvas-toolbar .icon-button:hover { color: #fff; background: rgba(255,255,255,.1); }
[data-view-panel="canvas"] .canvas-selection-summary { color: #63d7ee; }
[data-view-panel="canvas"] .canvas-shell { min-height: 620px; border-radius: 18px; background: var(--canvas-night); }
[data-view-panel="canvas"] .canvas-stage { min-height: 620px; }
[data-view-panel="canvas"] .canvas-workspace {
  height: max(620px,calc(100vh - 230px));
  min-height: 620px;
  border-color: #25272b;
  border-radius: 18px;
  color: var(--canvas-text);
  background: var(--canvas-night);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-view-panel="canvas"] .canvas-workspace::-webkit-scrollbar { display: none; width: 0; height: 0; }
[data-view-panel="canvas"] .canvas-workspace.drag-over { border-color: #4bcde7; box-shadow: inset 0 0 0 2px rgba(75,205,231,.28); }
[data-view-panel="canvas"] .canvas-world {
  background-color: var(--canvas-night);
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 22px 22px;
}
[data-view-panel="canvas"] .node-library,
[data-view-panel="canvas"] .canvas-inspector,
[data-view-panel="canvas"] .canvas-chat-panel {
  border-color: var(--canvas-line);
  color: var(--canvas-text);
  background: rgba(31,32,35,.97);
  box-shadow: 0 20px 45px rgba(0,0,0,.42);
  backdrop-filter: blur(18px);
}
[data-view-panel="canvas"] .node-library { top: 76px; width: 252px; max-height: calc(100% - 92px); }
[data-view-panel="canvas"] .canvas-side-panel { z-index: 13; top: 76px; height: calc(100% - 92px); }
[data-view-panel="canvas"] .node-library h3,
[data-view-panel="canvas"] .canvas-inspector h3,
[data-view-panel="canvas"] .canvas-chat-heading h3 { color: var(--canvas-text); }
[data-view-panel="canvas"] .canvas-panel-close { color: #aeb1b7 !important; background: rgba(255,255,255,.06) !important; }
[data-view-panel="canvas"] .canvas-library-search,
[data-view-panel="canvas"] .node-library-help,
[data-view-panel="canvas"] .canvas-chat-heading small { color: var(--canvas-muted); }
[data-view-panel="canvas"] .canvas-library-search input,
[data-view-panel="canvas"] .canvas-inspector input,
[data-view-panel="canvas"] .canvas-inspector textarea,
[data-view-panel="canvas"] .canvas-inspector select,
[data-view-panel="canvas"] #canvas-chat-input {
  border-color: var(--canvas-line);
  color: var(--canvas-text);
  background: #16171a;
}
[data-view-panel="canvas"] .node-library button { color: #e6e7ea; }
[data-view-panel="canvas"] .node-library button .ui-icon { color: #b9bdc5; }
[data-view-panel="canvas"] .node-library button:hover { color: #fff; background: rgba(255,255,255,.08); }
[data-view-panel="canvas"] .node-library-divider,
[data-view-panel="canvas"] .canvas-library-documents,
[data-view-panel="canvas"] .canvas-node-lineage,
[data-view-panel="canvas"] .canvas-node-comments { border-color: var(--canvas-line); }
[data-view-panel="canvas"] .canvas-material-label { color: #dffaff; background: rgba(55,196,223,.12); }
[data-view-panel="canvas"] .canvas-library-documents button,
[data-view-panel="canvas"] .canvas-node-lineage button,
[data-view-panel="canvas"] .canvas-node-comments p { color: #e6e7ea; border-color: var(--canvas-line); background: #292a2e; }
[data-view-panel="canvas"] .canvas-chat-messages { border-color: var(--canvas-line); background: #17181b; }
[data-view-panel="canvas"] .canvas-chat-message { color: #e9eaec; background: #292a2e; }
[data-view-panel="canvas"] .canvas-chat-message.user { background: #20333a; }
[data-view-panel="canvas"] .canvas-empty-state {
  top: 48%;
  width: min(920px,calc(100% - 42px));
  padding: 22px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
[data-view-panel="canvas"] .canvas-empty-state strong { color: #dfe1e5; font-size: 1rem; font-weight: 650; }
[data-view-panel="canvas"] .canvas-empty-state span { color: #7f838a; }
[data-view-panel="canvas"] .canvas-empty-state > div { margin-top: 8px; }
[data-view-panel="canvas"] .canvas-empty-quick { display: grid; grid-template-columns: repeat(5,minmax(128px,1fr)); gap: 10px; width: 100%; }
[data-view-panel="canvas"] .canvas-empty-quick button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  color: #d9dbdf;
  background: #242529;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
[data-view-panel="canvas"] .canvas-empty-quick button:hover { transform: translateY(-2px); border-color: rgba(76,211,236,.45); background: #2b2d31; }
[data-view-panel="canvas"] .canvas-empty-quick .ui-icon { width: 22px; height: 22px; color: #c7cad0; }
[data-view-panel="canvas"] .canvas-empty-actions { justify-content: center; }
[data-view-panel="canvas"] .canvas-empty-actions .secondary-button { color: #d5d7dc; border-color: var(--canvas-line); background: rgba(255,255,255,.05); }
[data-view-panel="canvas"] .canvas-context-menu {
  min-width: 190px;
  max-width: min(280px,calc(100% - 16px));
  max-height: min(560px,calc(100% - 16px));
  overflow-y: auto;
  padding: 7px;
  border-color: var(--canvas-line);
  border-radius: 14px;
  color: var(--canvas-text);
  background: rgba(36,37,40,.98);
  box-shadow: 0 22px 55px rgba(0,0,0,.5);
  backdrop-filter: blur(18px);
}
[data-view-panel="canvas"] .canvas-context-menu.quick-add { width: min(304px,calc(100% - 16px)); }
[data-view-panel="canvas"] .canvas-context-menu.canvas-asset-picker { width: min(360px,calc(100% - 16px)); max-width: min(360px,calc(100% - 16px)); overflow: hidden; }
[data-view-panel="canvas"] .canvas-asset-search { width: calc(100% - 12px); margin: 2px 6px 8px; padding: 9px 10px; border: 1px solid var(--canvas-line); border-radius: 8px; outline: none; color: #f0f2f4; background: #17191c; }
[data-view-panel="canvas"] .canvas-asset-search:focus { border-color: #65d7ed; }
[data-view-panel="canvas"] .canvas-asset-results { max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
[data-view-panel="canvas"] .canvas-asset-results button { width: 100%; }
[data-view-panel="canvas"] .canvas-context-menu.canvas-actions { width: min(286px,calc(100% - 16px)); }
[data-view-panel="canvas"] .canvas-context-heading { display: grid; gap: 2px; padding: 7px 9px 9px; }
[data-view-panel="canvas"] .canvas-context-heading strong { color: #f2f3f5; font-size: .94rem; }
[data-view-panel="canvas"] .canvas-context-heading span { color: #81858c; font-size: .75rem; }
[data-view-panel="canvas"] .canvas-context-section { margin: 7px 4px 3px; padding: 9px 6px 4px; border-top: 1px solid var(--canvas-line); color: #747880; font-size: .72rem; font-weight: 700; }
[data-view-panel="canvas"] .canvas-context-empty { padding: 24px 10px; color: #777b83; text-align: center; font-size: .8rem; }
[data-view-panel="canvas"] .canvas-context-menu button { display: flex; align-items: center; min-height: 40px; gap: 10px; color: #e3e4e7; }
[data-view-panel="canvas"] .canvas-context-menu button .ui-icon { flex: 0 0 19px; width: 19px; height: 19px; color: #c2c5cb; }
[data-view-panel="canvas"] .canvas-context-menu button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-view-panel="canvas"] .canvas-context-menu button small { padding: 2px 6px; border-radius: 999px; color: #6fe0f1; background: rgba(66,199,225,.14); }
[data-view-panel="canvas"] .canvas-context-menu button:hover { color: #fff; background: rgba(255,255,255,.08); }
[data-view-panel="canvas"] .canvas-context-menu button:disabled { color: #666a72; background: transparent; cursor: default; }
[data-view-panel="canvas"] .canvas-context-menu button:disabled .ui-icon { color: #5b5f66; }
[data-view-panel="canvas"] .canvas-context-menu button:disabled small { color: #666a72; background: rgba(255,255,255,.035); }
[data-view-panel="canvas"] .canvas-context-menu.history-list button span { white-space: normal; line-height: 1.35; }
[data-view-panel="canvas"] .canvas-context-divider { height: 1px; margin: 6px 4px; background: var(--canvas-line); }
[data-view-panel="canvas"] .canvas-composer {
  position: absolute;
  z-index: 19;
  display: flex;
  flex-direction: column;
  width: min(880px,calc(100% - 28px));
  min-height: clamp(230px,32vh,286px);
  max-height: calc(100% - 96px);
  padding: 14px 16px 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  color: #f1f2f4;
  background: rgba(35,36,38,.985);
  box-shadow: 0 24px 70px rgba(0,0,0,.56);
  backdrop-filter: blur(22px);
}
[data-view-panel="canvas"] .canvas-composer[hidden] { display: none; }
[data-view-panel="canvas"] .canvas-composer.is-expanded { inset: 22px !important; width: auto; min-height: 0; max-height: none; overflow: hidden; }
[data-view-panel="canvas"] .canvas-composer-head { display: flex; align-items: flex-start; justify-content: space-between; min-height: 40px; gap: 12px; }
[data-view-panel="canvas"] .canvas-composer-chips { display: flex; flex-wrap: wrap; gap: 7px; }
[data-view-panel="canvas"] .canvas-composer-reference-count { display: inline-flex; align-items: center; color: #8ed7e4; font-size: .72rem; }
[data-view-panel="canvas"] .canvas-composer-chip,
[data-view-panel="canvas"] .canvas-composer-window-actions button {
  min-height: 34px;
  padding: 6px 11px;
  border: 0;
  border-radius: 999px;
  color: #b9bcc1;
  background: #343538;
  font-size: .875rem;
}
[data-view-panel="canvas"] .canvas-composer-chip:hover,
[data-view-panel="canvas"] .canvas-composer-window-actions button:hover { color: #fff; background: #414246; }
[data-view-panel="canvas"] .canvas-composer-window-actions { display: flex; gap: 4px; }
[data-view-panel="canvas"] .canvas-composer-window-actions button { display: grid; place-items: center; width: 34px; padding: 0; border-radius: 9px; font-size: 1.1rem; }
[data-view-panel="canvas"] #canvas-composer-prompt {
  flex: 1;
  width: 100%;
  min-height: clamp(100px,18vh,132px);
  padding: 12px 5px;
  border: 0;
  outline: 0;
  resize: none;
  color: #f3f4f5;
  background: transparent;
  font: 500 1rem/1.65 Inter,"Microsoft YaHei",sans-serif;
}
[data-view-panel="canvas"] #canvas-composer-prompt::placeholder { color: #65686d; }
[data-view-panel="canvas"] .canvas-composer-footer { display: flex; align-items: center; gap: 9px; min-height: 52px; }
[data-view-panel="canvas"] .canvas-composer-control,
[data-view-panel="canvas"] .canvas-composer-icon {
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 11px;
  color: #f0f1f2;
  background: #3a3b3e;
  font-size: .9rem;
  white-space: nowrap;
}
[data-view-panel="canvas"] .canvas-composer-control.model { max-width: 250px; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
[data-view-panel="canvas"] .canvas-composer-control:hover,
[data-view-panel="canvas"] .canvas-composer-icon:hover { background: #47484c; }
[data-view-panel="canvas"] .canvas-composer-spacer { flex: 1; }
[data-view-panel="canvas"] .canvas-composer-icon { display: grid; place-items: center; width: 40px; padding: 0; background: transparent; font-weight: 700; }
[data-view-panel="canvas"] .canvas-composer-count,
[data-view-panel="canvas"] .canvas-composer-cost { color: #9a9da3; font-size: .875rem; white-space: nowrap; }
[data-view-panel="canvas"] .canvas-composer-cost::before { content: "◆ "; color: #d7a93d; }
[data-view-panel="canvas"] .canvas-composer-run { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border: 0; border-radius: 16px; color: #202124; background: #afb2b5; font-size: 1.7rem; }
[data-view-panel="canvas"] .canvas-composer-run:hover { background: #f0f2f3; }
[data-view-panel="canvas"] .canvas-composer-popover {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 68px;
  width: min(550px,calc(100% - 32px));
  max-height: min(360px,calc(100% - 84px));
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 17px;
  color: #f0f1f2;
  background: #2a2b2e;
  box-shadow: 0 18px 44px rgba(0,0,0,.48);
}
[data-view-panel="canvas"] .canvas-composer-popover[hidden] { display: none; }
[data-view-panel="canvas"] .canvas-composer-popover[data-kind="spec"] { left: auto; right: 16px; width: min(520px,calc(100% - 32px)); }
[data-view-panel="canvas"] .composer-model-option { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 16px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; color: #f2f3f4; background: transparent; text-align: left; }
[data-view-panel="canvas"] .composer-model-option:hover,
[data-view-panel="canvas"] .composer-model-option.selected { background: #444548; }
[data-view-panel="canvas"] .composer-model-option strong { font-size: 1rem; }
[data-view-panel="canvas"] .composer-model-option small { grid-column: 1; color: #9c9fa5; font-size: .8rem; }
[data-view-panel="canvas"] .composer-model-option em { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 4px 10px; border-radius: 999px; color: #aeb1b6; background: #38393c; font-style: normal; }
[data-view-panel="canvas"] .composer-option-group { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
[data-view-panel="canvas"] .composer-option-group:last-child { margin-bottom: 0; }
[data-view-panel="canvas"] .composer-option-group strong { grid-column: 1 / -1; color: #a9acb1; font-size: .85rem; }
[data-view-panel="canvas"] .composer-option-group button { min-height: 40px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #afb1b5; background: transparent; font-size: .875rem; }
[data-view-panel="canvas"] .composer-option-group button:hover,
[data-view-panel="canvas"] .composer-option-group button.selected { border-color: #e4e5e7; color: #fff; background: #444548; }
[data-view-panel="canvas"] .composer-reference-group { display: block; }
[data-view-panel="canvas"] .composer-reference-group > strong,[data-view-panel="canvas"] .composer-reference-group > small { display: block; margin-bottom: 7px; }
[data-view-panel="canvas"] .composer-reference-list { display: grid; gap: 5px; max-height: 270px; overflow: auto; margin-bottom: 8px; }
[data-view-panel="canvas"] .composer-reference-item { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 52px; padding: 4px; text-align: left; }
[data-view-panel="canvas"] .composer-reference-item :is(img,video,.composer-reference-icon) { display: grid; place-items: center; width: 65px; height: 42px; flex: none; object-fit: contain; border-radius: 6px; background: #111923; }
[data-view-panel="canvas"] .composer-reference-icon svg { width: 22px; height: 22px; }
[data-view-panel="canvas"] .composer-reference-item > span:last-child { display: grid; min-width: 0; gap: 2px; }
[data-view-panel="canvas"] .composer-reference-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
[data-view-panel="canvas"] .composer-reference-item small { color: #a8b4bf; font-size: .7rem; }
[data-view-panel="canvas"] .composer-reference-group > button { width: 100%; }
[data-view-panel="canvas"] .canvas-node {
  border-color: rgba(255,255,255,.12);
  border-radius: 12px;
  color: #dedfe3;
  background: var(--canvas-panel);
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
}
[data-view-panel="canvas"] .canvas-node.selected { border-color: rgba(87,213,235,.7); box-shadow: 0 0 0 2px rgba(70,203,227,.2), 0 16px 36px rgba(0,0,0,.34); }
[data-view-panel="canvas"] .canvas-node header,
[data-view-panel="canvas"] .canvas-node header.violet,
[data-view-panel="canvas"] .canvas-node header.blue,
[data-view-panel="canvas"] .canvas-node header.green,
[data-view-panel="canvas"] .canvas-node header.yellow,
[data-view-panel="canvas"] .canvas-node header.pink {
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #dfe1e5;
  background: #191a1d;
}
[data-view-panel="canvas"] .canvas-node header button { color: #aeb1b7; }
[data-view-panel="canvas"] .canvas-node header { position: relative; }
[data-view-panel="canvas"] .canvas-node header::before { position: absolute; top: 11px; bottom: 11px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: #6bd6e9; content: ""; }
[data-view-panel="canvas"] .canvas-node[data-type="AI 生图"] header::before,
[data-view-panel="canvas"] .canvas-node[data-type="图片素材"] header::before,
[data-view-panel="canvas"] .canvas-node[data-type="分镜"] header::before { background: #df7cae; }
[data-view-panel="canvas"] .canvas-node[data-type="Dola 视频"] header::before,
[data-view-panel="canvas"] .canvas-node[data-type="视频"] header::before,
[data-view-panel="canvas"] .canvas-node[data-type="后期"] header::before { background: #6faef7; }
[data-view-panel="canvas"] .canvas-node[data-type="音频"] header::before,
[data-view-panel="canvas"] .canvas-node[data-type="音频素材"] header::before,
[data-view-panel="canvas"] .canvas-node[data-type="导出"] header::before { background: #68cfa2; }
[data-view-panel="canvas"] .canvas-node[data-type="剧本"] header::before,
[data-view-panel="canvas"] .canvas-node[data-type="文本"] header::before,
[data-view-panel="canvas"] .canvas-node[data-type="文本资产"] header::before { background: #d9b465; }
[data-view-panel="canvas"] .canvas-node header:has(.canvas-node-title) { min-height: 48px; }
[data-view-panel="canvas"] .canvas-node-title { display: grid; min-width: 0; gap: 1px; }
[data-view-panel="canvas"] .canvas-node-title small { overflow: hidden; color: #858b94; font-size: .65rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
[data-view-panel="canvas"] .canvas-node-title strong { overflow: hidden; color: #e6e8eb; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
[data-view-panel="canvas"] .canvas-node strong,
[data-view-panel="canvas"] .canvas-node p { color: #e2e3e6; }
[data-view-panel="canvas"] .canvas-node small,
[data-view-panel="canvas"] .canvas-editor-limit { color: #898d94; }
[data-view-panel="canvas"] .canvas-node-editor { color: #e8e9eb; }
[data-view-panel="canvas"] .canvas-node-editor:hover,
[data-view-panel="canvas"] .canvas-node-editor:focus { border-color: rgba(77,207,231,.4); background: #191a1d; }
[data-view-panel="canvas"] .canvas-capability-body { align-items: stretch; justify-content: flex-start; gap: 10px; min-height: 0; padding: 15px 16px !important; cursor: pointer; }
[data-view-panel="canvas"] .canvas-capability-heading { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 4px 0 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
[data-view-panel="canvas"] .canvas-capability-heading > span:last-child { display: grid; min-width: 0; gap: 5px; }
[data-view-panel="canvas"] .canvas-capability-heading strong { font-size: .87rem; line-height: 1.3; }
[data-view-panel="canvas"] .canvas-capability-heading small { color: #989ea6; font-size: .72rem; line-height: 1.45; }
[data-view-panel="canvas"] .canvas-capability-heading .canvas-capability-icon { flex: 0 0 38px; min-height: 38px; border: 1px solid rgba(88,211,234,.16); border-radius: 10px; color: #6bd6e9; background: rgba(88,211,234,.08); }
[data-view-panel="canvas"] .canvas-capability-heading .canvas-capability-icon .ui-icon { width: 21px; height: 21px; }
[data-view-panel="canvas"] .canvas-capability-kicker { color: #8b929b; font-size: .7rem; font-weight: 700; }
[data-view-panel="canvas"] .canvas-capability-icon { display: grid; place-items: center; min-height: 70px; color: #61646a; }
[data-view-panel="canvas"] .canvas-capability-icon .ui-icon { width: 48px; height: 48px; stroke-width: 1.45; }
[data-view-panel="canvas"] .canvas-capability-body > small { color: #8e9298; font-size: .8rem; }
[data-view-panel="canvas"] .canvas-capability-suggestions { display: grid; min-width: 0; gap: 7px; }
[data-view-panel="canvas"] .canvas-capability-suggestions button { display: flex; min-width: 0; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; color: #dfe7ea; background: #25292d; text-align: left; font-size: .78rem; cursor: pointer; }
[data-view-panel="canvas"] .canvas-capability-suggestions button::after { margin-left: auto; color: #77cfe0; content: "›"; font-size: 1.05rem; }
[data-view-panel="canvas"] .canvas-capability-suggestions button:focus-visible { outline: 2px solid #6bd6e9; outline-offset: 2px; }
[data-view-panel="canvas"] .canvas-capability-suggestions button span { min-width: 0; overflow: hidden; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
[data-view-panel="canvas"] .canvas-capability-suggestions button .ui-icon { flex: 0 0 14px; width: 14px; height: 14px; color: #b6bac0; }
[data-view-panel="canvas"] .canvas-capability-suggestions button:hover { border-color: rgba(105,217,238,.4); color: #69d9ee; background: #253339; }
[data-view-panel="canvas"] .canvas-capability-preview { display: -webkit-box; overflow: hidden; color: #b9bdc3; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-height: 1.55; }
[data-view-panel="canvas"] .canvas-filled-body { justify-content: flex-start; }
[data-view-panel="canvas"] .canvas-filled-body .canvas-capability-suggestions { margin-top: auto; }
[data-view-panel="canvas"] .canvas-filled-body .canvas-capability-preview { -webkit-line-clamp: 8; }
[data-view-panel="canvas"] .canvas-capability-preview { display: block; overflow: auto; -webkit-line-clamp: unset; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 28em; min-height: 0; flex: 1; font-size: .81rem; }
[data-view-panel="canvas"] .canvas-node.canvas-article-node { height: auto !important; min-height: var(--canvas-article-min-height, 140px); }
[data-view-panel="canvas"] .canvas-article-node .canvas-node-body { flex: none; overflow: visible; }
[data-view-panel="canvas"] .canvas-article-node .canvas-capability-preview { flex: none; width: 100%; max-width: none; overflow: visible; -webkit-line-clamp: unset; white-space: pre-wrap; overflow-wrap: anywhere; }
[data-view-panel="canvas"] .canvas-article-node .canvas-inline-text-body .canvas-node-editor { flex: none; max-width: none; overflow: hidden; }
[data-view-panel="canvas"] .canvas-article-node .canvas-inline-text-result { max-height: none; overflow: visible; }
[data-view-panel="canvas"] .canvas-inline-text-body { display: flex; flex-direction: column; min-height: 0; gap: 8px; padding: 10px 12px; }
[data-view-panel="canvas"] .canvas-inline-text-body .canvas-node-editor { width: 100%; max-width: 28em; min-height: 90px; flex: 1; font-size: .81rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; resize: none; }
[data-view-panel="canvas"] .canvas-inline-text-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
[data-view-panel="canvas"] .canvas-inline-text-footer button { min-height: 30px; padding: 4px 10px; border: 1px solid #365d68; border-radius: 7px; color: #b6f1fc; background: #173039; }
[data-view-panel="canvas"] .canvas-inline-text-result { max-height: 80px; overflow: auto; white-space: pre-wrap; font-size: .75rem; color: #a9d9e1; }
[data-view-panel="canvas"] .canvas-plain-video,[data-view-panel="canvas"] .canvas-generated-video { display: flex; flex-direction: column; min-height: 0; padding: 7px; gap: 5px; background: #15191f; }
[data-view-panel="canvas"] .canvas-plain-video video,[data-view-panel="canvas"] .canvas-generated-video video { display: block; width: 100%; min-height: 0; flex: 1; object-fit: contain; background: #080c10; border-radius: 7px; }
[data-view-panel="canvas"] .canvas-video-placeholder { display: grid; place-items: center; width: 100%; min-height: 100%; border: 0; color: #d2edf1; background: #0a1017; font-size: 2rem; }
[data-view-panel="canvas"] .canvas-video-empty { align-items: center; justify-content: center; color: #acb3b9; }
[data-view-panel="canvas"] .canvas-video-placeholder-icon { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #436474; border-radius: 50%; color: #9fe5f0; font-size: 1.5rem; }
[data-view-panel="canvas"] .canvas-video-empty button { min-height: 32px; padding: 4px 10px; border: 1px solid #375e68; border-radius: 7px; color: #b9eff8; background: #193139; }
[data-view-panel="canvas"] .canvas-video-frame-tools { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
[data-view-panel="canvas"] .canvas-video-frame-tools button { min-height: 26px; padding: 3px 7px; border: 1px solid #354551; border-radius: 6px; color: #c7d8df; background: #222a32; font-size: .68rem; }
[data-view-panel="canvas"] .canvas-post-inputs { display: flex; gap: 6px; flex: 1; overflow: auto; min-height: 0; }
[data-view-panel="canvas"] .canvas-post-input { display: flex; flex: 0 0 110px; flex-direction: column; min-height: 0; border: 1px solid #343d46; border-radius: 7px; overflow: hidden; background: #10151a; }
[data-view-panel="canvas"] .canvas-post-input :is(img,video,svg) { display: block; width: 100%; height: calc(100% - 22px); min-height: 50px; object-fit: contain; }
[data-view-panel="canvas"] .canvas-post-input small { display: block; overflow: hidden; padding: 3px 5px; text-overflow: ellipsis; white-space: nowrap; }
[data-view-panel="canvas"] .canvas-capability-body.variant-script .canvas-capability-icon,
[data-view-panel="canvas"] .canvas-capability-body.variant-storyboard .canvas-capability-icon { min-height: 48px; justify-content: flex-start; }
[data-view-panel="canvas"] .canvas-capability-body.variant-script .canvas-capability-icon .ui-icon,
[data-view-panel="canvas"] .canvas-capability-body.variant-storyboard .canvas-capability-icon .ui-icon { width: 34px; height: 34px; }
[data-view-panel="canvas"] .canvas-capability-body.variant-script .canvas-capability-heading .canvas-capability-icon,
[data-view-panel="canvas"] .canvas-capability-body.variant-storyboard .canvas-capability-heading .canvas-capability-icon { min-height: 38px; }
[data-view-panel="canvas"] .canvas-capability-body.variant-script .canvas-capability-heading .canvas-capability-icon .ui-icon,
[data-view-panel="canvas"] .canvas-capability-body.variant-storyboard .canvas-capability-heading .canvas-capability-icon .ui-icon { width: 21px; height: 21px; }
[data-view-panel="canvas"] .canvas-capability-body.variant-storyboard .canvas-capability-suggestions { grid-template-columns: repeat(2,minmax(0,1fr)); }
[data-view-panel="canvas"] .canvas-capability-body.variant-storyboard .canvas-capability-suggestions button { min-height: 42px; padding: 7px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: #25272a; }
[data-view-panel="canvas"] .canvas-capability-body.variant-document .canvas-capability-suggestions button,
[data-view-panel="canvas"] .canvas-capability-body.variant-consistency .canvas-capability-suggestions button { min-height: 34px; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.045); }
[data-view-panel="canvas"] .canvas-capability-body.variant-post .canvas-capability-suggestions,
[data-view-panel="canvas"] .canvas-capability-body.variant-export .canvas-capability-suggestions { grid-template-columns: repeat(3,minmax(0,1fr)); }
[data-view-panel="canvas"] .canvas-capability-body.variant-post .canvas-capability-suggestions button,
[data-view-panel="canvas"] .canvas-capability-body.variant-export .canvas-capability-suggestions button { flex-direction: column; justify-content: center; min-height: 58px; padding: 7px 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; text-align: center; }
[data-view-panel="canvas"] .canvas-analysis-body { gap: 10px; }
[data-view-panel="canvas"] .canvas-analysis-upload { display: grid; place-items: center; gap: 5px; min-height: 112px; border: 1px dashed rgba(255,255,255,.14); border-radius: 10px; color: #aeb2b7; background: rgba(255,255,255,.025); }
[data-view-panel="canvas"] .canvas-analysis-upload:hover { border-color: #56d1e8; color: #e9fbff; }
[data-view-panel="canvas"] .canvas-analysis-upload .ui-icon { width: 30px; height: 30px; }
[data-view-panel="canvas"] .canvas-analysis-upload strong { color: inherit; }
[data-view-panel="canvas"] .canvas-analysis-upload small { color: #777c82; }
[data-view-panel="canvas"] .canvas-analysis-body > small { color: #8d9298; }
[data-view-panel="canvas"] .canvas-analysis-dimensions { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
[data-view-panel="canvas"] .canvas-analysis-dimensions button { min-height: 34px; border: 1px solid rgba(70,205,232,.28); border-radius: 999px; color: #65d7ed; background: rgba(48,171,199,.12); }
[data-view-panel="canvas"] .canvas-analysis-start { min-height: 38px; border: 0; border-radius: 8px; color: #7f8388; background: #36383a; }
[data-view-panel="canvas"] .canvas-extract-body { justify-content: space-between; gap: 10px; }
[data-view-panel="canvas"] .canvas-extract-preview { display: grid; place-items: center; gap: 6px; min-height: 108px; border-radius: 9px; color: #92979d; background: #232528; }
[data-view-panel="canvas"] .canvas-extract-preview .ui-icon { width: 38px; height: 38px; }
[data-view-panel="canvas"] .canvas-extract-thumbnails { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; width: 100%; height: 72px; }
[data-view-panel="canvas"] .canvas-extract-thumbnails img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
[data-view-panel="canvas"] .canvas-extract-preview strong { color: #d8dade; }
[data-view-panel="canvas"] .canvas-extract-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
[data-view-panel="canvas"] .canvas-extract-actions button { min-height: 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #c9ccd1; background: #292b2e; }
[data-view-panel="canvas"] .canvas-director-body { gap: 10px; }
[data-view-panel="canvas"] .canvas-director-preview { position: relative; display: grid; place-items: center; flex: 1; min-height: 155px; overflow: hidden; border: 1px solid rgba(88,211,234,.18); border-radius: 10px; color: #7b8288; background: linear-gradient(180deg,#101214 0 54%,#171d23 54% 100%); cursor: pointer; }
[data-view-panel="canvas"] .canvas-director-preview::after { position: absolute; right: 0; bottom: 0; left: 0; height: 46%; background-image: linear-gradient(rgba(72,174,205,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(72,174,205,.18) 1px,transparent 1px); background-size: 24px 18px; content: ""; transform: perspective(120px) rotateX(52deg); transform-origin: bottom; }
[data-view-panel="canvas"] .canvas-director-preview .ui-icon { z-index: 1; width: 46px; height: 46px; }
[data-view-panel="canvas"] .canvas-director-preview span { z-index: 1; color: #a7adb3; }
[data-view-panel="canvas"] .canvas-director-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
[data-view-panel="canvas"] .canvas-director-actions button { justify-content: center; padding-inline: 3px; text-align: center; }
[data-view-panel="canvas"] .canvas-director-actions button::after { content: none; }
[data-view-panel="canvas"] .canvas-node footer { color: #74d8b9; border-radius: 0 0 11px 11px; background: #1a2623; }
[data-view-panel="canvas"] .canvas-node[data-run-status="failed"] footer { color: #fa9da7; background: #342125; }
[data-view-panel="canvas"] .canvas-node[data-run-status="running"] footer { color: #f3cb76; background: #342d1b; }
[data-view-panel="canvas"] .canvas-node[data-run-status="stale"] footer { color: #a7b4c6; background: #252a31; }
[data-view-panel="canvas"] .node-list span,
[data-view-panel="canvas"] .mini-table span { color: #d9dadd; background: #2a2b2f; }
[data-view-panel="canvas"] .canvas-port { border-color: #202124; background: #57d4eb; box-shadow: 0 0 0 1px #57d4eb, 0 0 12px rgba(87,212,235,.4); }
[data-view-panel="canvas"] .canvas-port.input { background: #61cce1; box-shadow: 0 0 0 1px #61cce1, 0 0 9px rgba(97,204,225,.3); }
[data-view-panel="canvas"] .canvas-workspace.connecting .canvas-port.input.compatible { background: #14b889; box-shadow: 0 0 0 2px #14b889, 0 0 0 7px rgba(20,184,137,.2); }
[data-view-panel="canvas"] .canvas-port.kind-text,
[data-view-panel="canvas"] .canvas-workspace.connecting .canvas-port.kind-text { background: #e6b950; box-shadow: 0 0 0 1px #e6b950, 0 0 9px rgba(230,185,80,.35); }
[data-view-panel="canvas"] .canvas-port.kind-image,
[data-view-panel="canvas"] .canvas-workspace.connecting .canvas-port.kind-image { background: #e57bb1; box-shadow: 0 0 0 1px #e57bb1, 0 0 9px rgba(229,123,177,.35); }
[data-view-panel="canvas"] .canvas-port.kind-video,
[data-view-panel="canvas"] .canvas-workspace.connecting .canvas-port.kind-video { background: #67b7f4; box-shadow: 0 0 0 1px #67b7f4, 0 0 9px rgba(103,183,244,.35); }
[data-view-panel="canvas"] .canvas-port.kind-audio,
[data-view-panel="canvas"] .canvas-workspace.connecting .canvas-port.kind-audio { background: #6bd5ab; box-shadow: 0 0 0 1px #6bd5ab, 0 0 9px rgba(107,213,171,.35); }
[data-view-panel="canvas"] .connectors .canvas-edge:is([data-edge-type="text"],[data-edge-type="document"],[data-edge-type="script"],[data-edge-type="shots"],[data-edge-type="settings"]) .canvas-edge-line { stroke: #d9ac4f; }
[data-view-panel="canvas"] .connectors .canvas-edge:is([data-edge-type="image"],[data-edge-type="frames"],[data-edge-type="asset"]) .canvas-edge-line { stroke: #dc78a9; }
[data-view-panel="canvas"] .connectors .canvas-edge:is([data-edge-type="video"],[data-edge-type="post"],[data-edge-type="file"]) .canvas-edge-line { stroke: #67b7f4; }
[data-view-panel="canvas"] .connectors .canvas-edge[data-edge-type="audio"] .canvas-edge-line { stroke: #6bd5ab; }
[data-view-panel="canvas"] .connectors .canvas-edge:is(.selected,.failed) .canvas-edge-line { stroke: #ee718f; }
[data-view-panel="canvas"] .connectors .canvas-edge.running .canvas-edge-line { stroke: #e9a826; }
[data-view-panel="canvas"] .canvas-prompt-combine { gap: 9px; }
[data-view-panel="canvas"] .canvas-prompt-combine p { color: #aeb2b8; font-size: .78rem; line-height: 1.45; }
[data-view-panel="canvas"] .canvas-prompt-combine .canvas-node-editor { flex: 1; min-height: 72px; padding: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: #17191c; }
[data-view-panel="canvas"] .canvas-composed-preview { overflow: hidden; color: #8acfb8; text-overflow: ellipsis; white-space: nowrap; }
[data-view-panel="canvas"] .canvas-prompt-combine > button { flex: 0 0 auto; min-height: 34px; border: 1px solid rgba(230,185,80,.38); border-radius: 8px; color: #e6c477; background: rgba(230,185,80,.09); }
[data-view-panel="canvas"] .canvas-prompt-combine > button:hover { background: rgba(230,185,80,.18); }
[data-view-panel="canvas"] .canvas-result-body { gap: 8px; }
[data-view-panel="canvas"] .canvas-result-caption { max-height: 45px; overflow: hidden; color: #d9dde1; white-space: pre-wrap; }
[data-view-panel="canvas"] .canvas-result-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: start; flex: 1; gap: 7px; min-height: 0; overflow: auto; }
[data-view-panel="canvas"] .canvas-result-card { display: flex; flex-direction: column; min-width: 0; min-height: 80px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; background: #15171a; }
[data-view-panel="canvas"] .canvas-result-card :is(img,video) { display: block; width: 100%; height: 72px; object-fit: cover; }
[data-view-panel="canvas"] .canvas-result-card audio { width: 100%; min-height: 50px; }
[data-view-panel="canvas"] .canvas-result-card button { min-height: 25px; overflow: hidden; padding: 4px 6px; border: 0; color: #d4d7db; background: transparent; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
[data-view-panel="canvas"] .canvas-result-card button:hover { color: #74dcef; }
[data-view-panel="canvas"] .canvas-result-copy { display: -webkit-box; flex: 1; overflow: hidden; padding: 7px; color: #aeb3bb; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
[data-view-panel="canvas"] .canvas-result-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 150px; padding: 16px; border: 1px dashed rgba(255,255,255,.14); border-radius: 9px; color: #989da5; text-align: center; }
[data-view-panel="canvas"] .canvas-result-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; }
[data-view-panel="canvas"] .canvas-result-actions small { color: #8d959b; }
[data-view-panel="canvas"] .canvas-result-actions > button { min-height: 29px; padding: 4px 8px; border: 1px solid rgba(110,207,227,.3); border-radius: 8px; color: #95dbe9; background: rgba(71,183,208,.08); font-size: .72rem; white-space: nowrap; }
[data-view-panel="canvas"] .canvas-result-actions > button:hover { background: rgba(71,183,208,.18); }
[data-view-panel="canvas"] .connectors .canvas-edge-line { stroke: #54cce5; stroke-width: 2.4; filter: drop-shadow(0 0 4px rgba(77,207,231,.28)); }
[data-view-panel="canvas"] .connectors .canvas-edge:hover .canvas-edge-line,
[data-view-panel="canvas"] .connectors .canvas-edge:focus-visible .canvas-edge-line,
[data-view-panel="canvas"] .connectors .canvas-edge.selected .canvas-edge-line { stroke: #ef718f; stroke-width: 4; }
[data-view-panel="canvas"] .canvas-minimap { right: 16px; bottom: 78px; border-color: var(--canvas-line); background: rgba(28,29,32,.94); box-shadow: 0 12px 28px rgba(0,0,0,.32); }
[data-view-panel="canvas"] .canvas-minimap-nodes span { background: #53cce5; }
[data-view-panel="canvas"] .canvas-minimap-nodes span.selected { background: #f4b740; }
[data-view-panel="canvas"] .canvas-minimap-viewport { border-color: #d9f8ff; background: rgba(76,211,236,.1); }
[data-view-panel="canvas"] .canvas-floating-tools {
  border-color: var(--canvas-line);
  color: #dedfe3;
  background: rgba(35,36,39,.94);
  box-shadow: 0 16px 36px rgba(0,0,0,.38);
  backdrop-filter: blur(18px);
}
[data-view-panel="canvas"] .canvas-floating-tools { left: 50%; bottom: 18px; flex-direction: row; transform: translateX(-50%); }
[data-view-panel="canvas"] .canvas-floating-tools button { color: #c9ccd1; }
[data-view-panel="canvas"] .canvas-floating-tools button:first-child { color: #111; background: #f4f5f7; }
[data-view-panel="canvas"] .canvas-floating-tools button:hover { color: #fff; background: rgba(255,255,255,.09); }
[data-view-panel="canvas"] .canvas-floating-tools button.active { color: #72ddef; background: rgba(75,205,231,.12); box-shadow: inset 0 0 0 1px rgba(75,205,231,.28); }
[data-view-panel="canvas"] .canvas-tool-divider { background: rgba(255,255,255,.1); }
[data-view-panel="canvas"] .canvas-bottom-status { color: #c9ccd1; }
[data-view-panel="canvas"] .canvas-node-count { color: #b7bbc1; }
[data-view-panel="canvas"] .canvas-bottom-status button { color: #c9ccd1; }
[data-view-panel="canvas"] .canvas-bottom-status button:hover,
[data-view-panel="canvas"] .canvas-bottom-status button[aria-pressed="true"] { color: #73dff1; background: rgba(75,205,231,.12); }
[data-view-panel="canvas"] .canvas-zoom-popover { border-color: var(--canvas-line); background: rgba(35,36,39,.98); box-shadow: 0 18px 42px rgba(0,0,0,.46); }
[data-view-panel="canvas"] .canvas-zoom-popover button { color: #dadddf; background: #2a2b2e; }
[data-view-panel="canvas"] .canvas-zoom-popover button:hover { color: #73dff1; background: rgba(75,205,231,.12); }
[data-view-panel="canvas"] .canvas-job-status { position: absolute; z-index: 13; top: 77px; left: 50%; margin: 0; border-color: rgba(75,205,231,.35); color: #cbf8ff; background: rgba(24,54,61,.94); transform: translateX(-50%); }
.canvas-focus-mode [data-view-panel="canvas"] .canvas-workspace { height: calc(100vh - 16px); min-height: 520px; }
.canvas-focus-mode [data-view-panel="canvas"] .canvas-toolbar { top: 8px; left: 8px; right: 8px; }

@media (max-width: 980px) {
  .canvas-home-capabilities { grid-template-columns: repeat(3,minmax(120px,1fr)); }
  .canvas-home-projects { grid-template-columns: 1fr; }
  [data-view-panel="canvas"] .canvas-toolbar { position: relative; top: auto; left: auto; right: auto; margin-bottom: 8px; }
  [data-view-panel="canvas"] .canvas-workspace { height: max(620px,calc(100vh - 300px)); }
  [data-view-panel="canvas"] .node-library,
  [data-view-panel="canvas"] .canvas-side-panel { top: 12px; height: calc(100% - 24px); max-height: calc(100% - 24px); }
  [data-view-panel="canvas"] .canvas-empty-quick { grid-template-columns: repeat(2,minmax(130px,1fr)); }
  [data-view-panel="canvas"] .canvas-empty-quick button:last-child { grid-column: 1 / -1; }
  [data-view-panel="canvas"] .canvas-node-count { display: none; }
}

@media (max-width: 620px) {
  [data-view-panel="canvas"] .canvas-home { padding: 12px; }
  .canvas-home-create { min-height: 160px; }
  .canvas-home-capabilities { grid-template-columns: repeat(2,minmax(110px,1fr)); gap: 6px; margin: 16px 0 24px; }
  .canvas-home-capabilities button { min-height: 104px; }
  .canvas-home-project-card { grid-template-columns: 72px minmax(0,1fr); }
  .canvas-home-project-thumb { width: 72px; height: 68px; }
  .canvas-home-project-card em { display: none; }
  [data-view-panel="canvas"] .canvas-empty-state { top: 44%; padding: 12px; }
  [data-view-panel="canvas"] .canvas-empty-quick { grid-template-columns: 1fr; max-height: 310px; overflow-y: auto; }
  [data-view-panel="canvas"] .canvas-empty-quick button:last-child { grid-column: auto; }
  [data-view-panel="canvas"] .canvas-floating-tools button { width: 40px; height: 40px; }
  [data-view-panel="canvas"] .canvas-floating-tools { max-width: calc(100% - 28px); overflow-x: auto; scrollbar-width: none; }
  [data-view-panel="canvas"] .canvas-floating-tools::-webkit-scrollbar { display: none; }
  [data-view-panel="canvas"] .canvas-bottom-status { bottom: 72px; }
  [data-view-panel="canvas"] .canvas-zoom-popover { bottom: 116px; }
  [data-view-panel="canvas"] .canvas-minimap { display: none; }
  [data-view-panel="canvas"] .canvas-composer { left: 8px !important; right: 8px; width: auto; min-height: 250px; max-height: calc(100% - 24px); padding: 12px; border-radius: 17px; }
  [data-view-panel="canvas"] .canvas-composer.is-expanded { inset: 8px !important; }
  [data-view-panel="canvas"] #canvas-composer-prompt { min-height: 96px; }
  [data-view-panel="canvas"] .canvas-composer-footer { flex-wrap: wrap; }
  [data-view-panel="canvas"] .canvas-composer-spacer { display: none; }
  [data-view-panel="canvas"] .composer-option-group { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

.library-layout { display: grid; grid-template-columns: 210px minmax(500px,1fr) 320px; gap: 14px; }
.library-layout:not(.image-library-layout) { grid-template-columns: 210px minmax(0,1fr); }
.image-library-layout { grid-template-columns: 210px minmax(0,1fr) 0; transition: grid-template-columns .25s ease; }
.image-library-layout.is-preview-open { grid-template-columns: 210px minmax(0,1fr) 300px; }
.invite-share { display: grid; gap: 12px; justify-items: start; }
.invite-share input { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface-2); }
.invite-share .invite-qr { padding: 10px; border-radius: 10px; background: white; }
.invite-share .invite-qr svg { display: block; width: 164px; height: 164px; }
.invite-share small { color: var(--muted); }
.image-library-preview { width: 300px; opacity: 0; transform: translateX(24px); visibility: hidden; pointer-events: none; transition: opacity .25s ease,transform .25s ease,visibility .25s; }
.image-library-layout.is-preview-open .image-library-preview { opacity: 1; transform: translateX(0); visibility: visible; pointer-events: auto; }
.folder-panel { padding-bottom: 14px; }
.folder-panel > button { width: calc(100% - 20px); display: flex; justify-content: space-between; margin: 3px 10px; padding: 10px 11px; border: 0; border-radius: 9px; color: var(--ink); background: transparent; text-align: left; }
.folder-panel > button.selected { color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.category-entry { display: flex; align-items: center; margin: 3px 10px; border-radius: 9px; }
.category-entry > button:first-child { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 0; border-radius: 9px; color: var(--ink); background: transparent; text-align: left; }
.category-entry > button.selected { color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.category-entry .category-edit { width: 29px; height: 29px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); }
.category-entry .category-edit:hover { color: var(--primary); background: var(--surface-2); }
.folder-hint { display: block; margin: 8px 18px; color: var(--muted); line-height: 1.4; }
.folder-panel hr { margin: 12px 14px; border: 0; border-top: 1px solid var(--line); }
.image-folder-panel > button.drop-target,
.folder-panel > button.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; background: var(--primary-soft); }
.document-panel { min-width: 0; position: relative; padding-bottom: 76px; }
.document-panel.is-empty { align-self: start; padding-bottom: 0; }
.document-panel.is-empty .data-table, .document-panel.is-empty .selection-bar { display: none; }
.document-panel .panel-heading .global-search { min-width: 230px; }
.library-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.library-toolbar label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.library-toolbar select { min-width: 140px; }
.library-toolbar .checkline { margin-left: auto; }
.library-toolbar input[type="checkbox"] { accent-color: var(--primary); }
.library-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 14px; }
.library-pagination button { min-width: 34px; min-height: 32px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); }
.library-pagination button.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.library-pagination button:disabled { opacity: .45; }
.tabs { display: flex; gap: 20px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.tabs button { padding: 12px 3px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; }
.tabs button.active { color: var(--primary); border-color: var(--primary); font-weight: 700; }
.data-table { min-width: 760px; overflow-x: auto; }
.data-table.is-empty .table-head { border-bottom: 0; }
.table-row { display: grid; grid-template-columns: 28px minmax(160px,2fr) 72px minmax(90px,1fr) 85px 72px 146px; align-items: center; gap: 8px; min-height: 62px; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.table-row.table-head { min-height: 42px; color: var(--muted); background: var(--surface-2); font-size: .78rem; }
.table-row.table-head span { white-space: nowrap; }
.library-row-actions { display: flex; align-items: center; gap: 4px; }
.library-row-actions button { padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: .75rem; white-space: nowrap; }
.library-row-actions .doc-favorite { font-size: 1.1rem; color: #e35069; border-color: transparent; background: transparent; }
.library-row-actions .danger-text,.image-item-delete.danger-text { color: #e35069; }
.table-row input { accent-color: var(--primary); }
.doc-name { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.doc-title-button { min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; font: inherit; overflow-wrap: anywhere; cursor: zoom-in; }
.doc-title-button:hover, .doc-title-button:focus-visible { color: var(--primary); text-decoration: underline; }
.doc-type-icon { display: grid; place-items: center; width: 32px; height: 36px; border-radius: 7px; color: white; background: var(--blue); font-size: .7rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-row span { padding: 4px 8px; color: var(--primary); background: var(--primary-soft); border-radius: 999px; font-size: .75rem; }
.selection-bar { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow); }
.selection-bar strong { margin-right: auto; }
.document-preview { padding: 0 14px 14px; }
.document-preview .panel-heading { margin: 0 -14px 14px; }
.document-preview-text { max-height: 210px; overflow: auto; padding: 13px; color: var(--ink); line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border-radius: 10px; cursor: zoom-in; }
.document-preview-text:hover, .document-preview-text:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.image-library-panel { min-width: 0; }
.image-library-search { display: flex; margin: 14px; }
.image-library-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(155px,1fr)); gap: 12px; max-height: min(70vh,780px); overflow: auto; padding: 0 14px 14px; }
.image-library-item { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.image-library-item.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.image-library-item { position: relative; }
.image-select { position: absolute; z-index: 1; left: 8px; top: 8px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; background: rgba(15,17,23,.82); }
.image-select input { margin: 0; accent-color: var(--primary); }
.image-item-delete { justify-self: start; padding: 2px 0; border: 0; background: none; cursor: pointer; }
.image-library-item > div { display: grid; gap: 3px; padding: 9px 10px; }
.image-library-item strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.image-library-item small { color: var(--muted); }
.image-library-open, .image-preview-media > button, .asset-visual-preview { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.image-library-open { position: relative; height: 118px; }
.image-library-open img, .image-library-open video, .image-preview-media img, .image-preview-media video { width: 100%; height: 100%; object-fit: contain; }
.image-library-open img, .image-library-open video { object-fit: cover; }
.video-reference-mark { position: absolute; right: 7px; bottom: 7px; padding: 3px 6px; border-radius: 5px; color: #fff; background: #111b; font-size: .7rem; }
.image-library-preview { min-width: 0; padding-bottom: 14px; }
.image-preview-media { height: 220px; margin: 0 14px; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.image-preview-media > button { height: 100%; }
.image-library-preview > p, .image-library-preview > a { margin: 12px 14px 0; overflow-wrap: anywhere; }
.image-library-preview > a { display: inline-flex; }
.image-library-preview { overflow: hidden; }
.image-library-preview > a:not([hidden]) { display: flex; width: calc(100% - 28px); justify-content: center; box-sizing: border-box; }
.image-library-preview .media-preview-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: calc(100% - 28px); margin: 12px 14px 0; }
.image-library-preview .media-preview-actions > button:not([hidden]) { display: block; width: 100%; min-width: 0; box-sizing: border-box; white-space: normal; }
.image-library-preview .media-preview-actions > button[hidden] { display: none; }
.pdf-icon { display: grid; place-items: center; width: 58px; height: 68px; margin: 10px 0; border-radius: 10px; color: white; background: linear-gradient(135deg,#ed4c52,#dc3443); font-weight: 800; }
.document-preview .switchline { margin: 20px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.consistency-tabs { margin-bottom: 14px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.asset-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.asset-card { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 14px; }
.asset-card .asset-visual { position: relative; display: grid; place-items: center; height: 170px; overflow: hidden; background: linear-gradient(135deg,#e9edff,#f7f8ff); }
.asset-card .asset-visual img { width: 100%; height: 100%; object-fit: cover; }
.asset-visual-preview { height: 100%; }
.asset-note-preview { display: -webkit-box; width: 100%; max-height: 4.5em; overflow: hidden; padding: 0; border: 0; color: var(--muted); background: transparent; text-align: left; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; cursor: zoom-in; }
.asset-note-preview:hover, .asset-note-preview:focus-visible { color: var(--primary); }
.asset-card .asset-placeholder { font-size: 3rem; }
.asset-card > div:last-child { padding: 13px; }
.asset-card strong, .asset-card small { display: block; }
.asset-card .status { position: absolute; top: 9px; right: 9px; }
.consistency-rules { padding-bottom: 15px; }
.rule-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 15px; }
.rule-grid label { padding: 12px; border: 1px solid var(--line); border-radius: 10px; }

.batch-table { padding: 0 14px 14px; }
.batch-row { display: grid; grid-template-columns: 54px minmax(180px,1.4fr) 130px 105px 130px 115px minmax(150px,auto); align-items: center; gap: 10px; min-height: 72px; border-bottom: 1px solid var(--line); }
.batch-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.batch-actions button { padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: white; font-size: .7rem; }
.batch-row.head { min-height: 42px; color: var(--muted); background: var(--surface-2); font-size: .78rem; }
.batch-row img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.row-progress { height: 6px; overflow: hidden; background: #e8edf5; border-radius: 999px; }
.row-progress i { display: block; height: 100%; background: var(--primary); }

.review-layout { display: grid; grid-template-columns: 250px minmax(480px,1fr) 280px; gap: 14px; }
.team-progress-panel { margin-bottom: 14px; }
.team-progress-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 12px; padding: 14px; }
.team-progress-member { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.team-progress-person { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.team-progress-person small { display: block; color: var(--muted); }
.team-progress-projects { display: grid; gap: 7px; }
.team-progress-projects button { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-align: left; }
.team-progress-projects button small { grid-column: 1 / -1; color: var(--muted); }
.team-progress-projects button span { color: var(--primary); }
.team-progress-empty { margin: 0; padding: 14px; text-align: center; color: var(--muted); }
.readonly-project { max-height: min(65vh,620px); overflow-y: auto; }
.readonly-project-metrics { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0; }
.readonly-project-metrics span { padding: 5px 9px; border-radius: 7px; background: var(--primary-soft); }
.readonly-project-frames { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.readonly-project-frames img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 7px; }
.readonly-project-video { display: block; width: 100%; max-height: 280px; margin: 8px 0; background: #08090b; }
.readonly-project-shots { display: grid; gap: 6px; }
.readonly-project-shots p { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; margin: 0; padding: 8px; border-radius: 7px; background: var(--surface-2); }
.readonly-project-shots span { min-width: 0; overflow-wrap: anywhere; }
.readonly-project pre { max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
[data-view-panel="review"] .empty-table-state { display: grid; place-items: center; min-height: 82px; border: 0; background: transparent; text-align: center; }
.review-list > button { width: 100%; display: grid; gap: 6px; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--line); background: white; text-align: left; }
.review-list > button.selected { background: var(--primary-soft); }
.review-list strong, .review-list small { display: block; }
.review-preview { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: center; margin: 16px; padding: 14px; background: var(--surface-2); border-radius: 12px; }
.review-preview img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; }
.comment-thread { padding: 0 16px; }
.comment-thread > div { display: flex; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); }
.comment-thread > div.comment-reply { margin-left: min(32px, 7vw); border-left: 2px solid var(--line); padding-left: 10px; }
.comment-thread p { margin: 0; color: var(--ink); }
.comment-thread small { margin-left: 8px; }
.comment-box { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); }
.member-panel { padding-bottom: 10px; }
#review-members { grid-column: 1 / -1; }
.member-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.member-row strong, .member-row small { display: block; }

.completed-layout { display: grid; grid-template-columns: 200px minmax(550px,1fr) 300px; gap: 14px; }
.project-filters { display: grid; grid-template-columns: minmax(160px,1fr) 130px 130px; gap: 8px; padding: 12px 14px 0; }
.project-filters label { display: grid; gap: 4px; color: var(--muted); font-size: .8125rem; }
.project-filters input, .project-filters select { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font: inherit; }
.project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 14px; }
.project-grid.list-view { grid-template-columns: 1fr; }
.project-grid.list-view .project-card { display: grid; grid-template-columns: 180px 1fr; }
.project-grid.list-view .project-card img { height: 112px; }
.project-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; }
.project-card.selected { border: 2px solid var(--primary); }
.project-card { cursor: pointer; }
.project-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.project-card img { width: 100%; height: 130px; object-fit: cover; }
.project-card > div { padding: 10px; }
.project-card strong { display: block; margin-bottom: 6px; }
.project-card p { margin: 7px 0 0; font-size: .78rem; }
.project-detail { padding: 0 12px 14px; }
.project-detail .panel-heading { margin: 0 -12px 12px; }
.project-detail > img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; }
.mini-frame-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin: 6px 0 14px; }
.mini-frame-row img { height: 42px; object-fit: cover; border-radius: 5px; }
.project-detail dl, .quota-panel dl { display: grid; gap: 8px; }
.project-detail dl div, .quota-panel dl div { display: flex; justify-content: space-between; gap: 12px; }
.project-detail dt, .quota-panel dt { color: var(--muted); }
.project-detail dd, .quota-panel dd { margin: 0; text-align: right; }
.project-detail .secondary-button { margin-top: 8px; }
.project-detail #project-detail-action-note { display: block; margin-top: 7px; line-height: 1.45; }

.api-layout { display: grid; grid-template-columns: minmax(500px,1fr) 330px; gap: 14px; margin-bottom: 14px; }
[data-view-panel="api"] .api-layout { grid-template-columns: minmax(0,1fr); }
.provider-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 14px; }
.provider { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: white; text-align: left; }
.provider.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(87,79,255,.1); }
.provider strong, .provider small { display: block; }
.provider em { color: var(--green); font-style: normal; font-size: .8rem; }
.api-form { display: grid; gap: 12px; padding: 14px; border-top: 1px solid var(--line); }
.api-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.api-field-grid > label, .api-advanced > label { min-width: 0; }
.api-url-toggle { margin: -2px 0; }
.api-advanced { padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.api-advanced > summary { cursor: pointer; font-weight: 700; }
.api-advanced[open] { display: grid; gap: 14px; }
.api-advanced label small { display: block; margin-top: 5px; color: var(--muted); }
.api-mapping-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.api-mapping-heading + p { margin: -8px 0 0; }
.api-model-mappings { display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.api-mapping-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 140px 50px; gap: 8px; color: var(--muted); font-size: .8rem; }
.api-mapping-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 140px auto; gap: 8px; align-items: center; }
.api-mapping-row > input { min-width: 0; }
.api-mapping-row > button { padding: 7px 10px; }
@media (max-width: 760px) { .api-field-grid { grid-template-columns: 1fr; } .api-mapping-columns { display: none; } .api-mapping-row { grid-template-columns: 1fr 1fr; } }
.input-action { display: flex; }
.input-action input { border-radius: 10px 0 0 10px; }
.input-action button { border: 1px solid #dce3f0; border-left: 0; border-radius: 0 10px 10px 0; background: var(--surface-2); }
.quota-panel { padding: 0 18px 18px; }
.quota-panel .panel-heading { margin: 0 -18px 18px; }
.quota-ring { width: 156px; height: 156px; display: grid; place-items: center; align-content: center; margin: 8px auto 20px; border-radius: 50%; background: radial-gradient(circle at center, white 58%, transparent 59%), conic-gradient(var(--primary) 0 68%, #e6eaf2 68% 100%); }
.quota-ring strong { font-size: 1.8rem; }
.quota-ring span { color: var(--muted); }
.quota-panel > label { margin-top: 20px; }
.quota-panel input { width: 100%; accent-color: var(--primary); }
.usage-filters { flex-wrap: wrap; align-items: end; }
.usage-filters label { display: grid; flex: 1 1 135px; min-width: 135px; gap: 4px; color: var(--muted); font-size: .76rem; }
.usage-filters label[hidden] { display: none; }
.usage-filters select, .usage-filters input { width: 100%; }
.usage-table { padding: 0 14px 14px; overflow-x: auto; }
.usage-row { display: grid; grid-template-columns: 145px minmax(160px,1.2fr) 68px minmax(145px,1fr) 56px minmax(185px,1.15fr); gap: 10px; align-items: center; min-width: 850px; min-height: 54px; border-bottom: 1px solid var(--line); }
.usage-row.head { min-height: 40px; color: var(--muted); background: var(--surface-2); font-size: .78rem; }
.usage-row > span, .usage-row > strong { min-width: 0; overflow-wrap: anywhere; }
.usage-row small { display: block; color: var(--muted); font-weight: 400; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }

.export-steps { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.export-steps span { color: var(--muted); font-weight: 700; }
.export-steps span.done, .export-steps span.active { color: var(--primary); }
.export-steps i { width: 120px; height: 2px; background: var(--primary); }
.export-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 18px; }
.export-layout > .share-panel { grid-column: 1 / -1; }
.member-filter { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.member-filter select { min-width: 130px; }
.model-connection-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px 4px; }
.model-connection-list { display: grid; gap: 7px; max-height: 210px; overflow-y: auto; padding: 8px 16px 14px; }
.model-connection-list > p { margin: 0; }
.model-connection-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; }
.model-connection-row.selected { border-color: var(--primary); background: var(--primary-soft); }
.model-connection-row > button:first-child { flex: 1; display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border: 0; background: transparent; color: var(--ink); text-align: left; }
.model-connection-row small { overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.model-connection-row > .danger-text { padding: 8px; border: 0; background: transparent; color: #f16b7d; }
.api-model-catalog { padding: 5px 0 11px; }
.api-model-catalog > div { display: flex; flex-wrap: wrap; gap: 5px; max-height: 200px; overflow-y: auto; margin-top: 7px; }
.api-model-catalog button { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--ink); font-size: .78rem; }
.api-model-catalog button.selected { border-color: var(--primary); color: var(--primary); }
.api-model-catalog p { margin: 0; font-size: .82rem; }
.chat-model-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#chat-connected-model { max-width: 220px; }
#settings-dialog { width: min(470px,calc(100vw - 24px)); max-height: min(85vh,720px); padding: 0; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.settings-dialog-shell { padding: 20px; }
.settings-dialog-shell header { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 17px; }
.settings-dialog-shell header p { margin: 0; }
.settings-dialog-shell h3 { margin: 18px 0 8px; color: var(--muted); font-size: .85rem; }
.settings-menu { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.settings-menu button { display: flex; justify-content: space-between; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.settings-menu button:last-child { border-bottom: 0; }
.settings-menu button:hover { background: var(--surface-2); }
.settings-menu span { color: var(--muted); }
.settings-dialog-shell footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.settings-dialog-shell footer button { flex: 1; }
.danger-close,#generic-dialog .dialog-close { color: #f16b7d; }
body.compact-ui .panel-heading { padding-top: 9px; padding-bottom: 9px; }
body.compact-ui .panel { --radius: 10px; }
body.compact-ui .table-row { min-height: 48px; }
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.export-content { padding-bottom: 12px; }
.export-content > label { display: grid; grid-template-columns: 20px 42px minmax(0,1fr); align-items: start; gap: 4px 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.export-content > label > input { grid-column: 1; margin-top: 9px; }
.export-content > label > .metric-icon { grid-column: 2; grid-row: 1 / span 2; }
.export-content > label > span { grid-column: 3; min-width: 0; }
.export-content > label > em { grid-column: 3; color: var(--muted); font-size: .78rem; font-style: normal; line-height: 1.45; overflow-wrap: anywhere; }
.export-content > label.is-unavailable { opacity: .58; }
.export-content > label.is-unavailable input { cursor: not-allowed; }
.export-missing-items { margin: 10px 14px 2px; padding: 10px 12px; border: 1px solid #f2d8a8; border-radius: 8px; background: #fff9ed; color: #76510e; font-size: .8125rem; line-height: 1.5; }
.export-content input { accent-color: var(--primary); }
.export-content strong, .export-content small { display: block; line-height: 1.45; overflow-wrap: anywhere; }
.export-content strong { font-size: .9rem; }
.export-content small { margin-top: 2px; color: var(--muted); font-size: .78rem; }
.format-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 14px; }
.format-grid button { min-height: 100px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.format-grid button.selected { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.format-grid button b { font-size: 1.2rem; }
.export-settings > .switchline, .export-settings > .full-width { margin: 8px 14px; width: calc(100% - 28px); }
.share-panel { padding-bottom: 14px; }
.share-panel > .primary-button { width: calc(100% - 28px); margin: 14px; }
.share-box { margin: 0 14px; padding: 14px; background: var(--surface-2); border-radius: 12px; }
.permission-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 14px 0; }
.permission-grid label { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: .8rem; }
.permission-grid input { accent-color: var(--primary); }
.share-box .form-row { padding: 0; }
.copy-field { display: flex; margin-top: 10px; }
.copy-field input { border-radius: 9px 0 0 9px; }
.copy-field button { border: 0; border-radius: 0 9px 9px 0; color: white; background: var(--primary); padding: 0 12px; }
.share-box p { margin: 10px 0 0; font-size: .78rem; }

.admin-layout { display: grid; grid-template-columns: minmax(600px,1fr) 320px; gap: 14px; }
.user-table { padding: 0 14px 14px; }
.user-row { display: grid; grid-template-columns: auto 1.2fr 1.3fr 100px 100px minmax(140px,auto); gap: 10px; align-items: center; min-height: 66px; border-bottom: 1px solid var(--line); }
.member-role-label { color: var(--ink); font-weight: 600; }
.member-role-select { width: 104px; min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface-2); }
.user-row.head { min-height: 40px; color: var(--muted); background: var(--surface-2); font-size: .78rem; }
.admin-settings { padding: 0 16px 16px; }
.admin-settings .panel-heading { margin: 0 -16px 14px; }
.admin-settings > label { margin: 14px 0; }
.admin-auth-note { margin: 14px 0; padding: 10px; border-radius: 8px; background: var(--surface-2); font-size: .8rem; line-height: 1.5; }
.admin-audit-panel { margin-top: 14px; padding-bottom: 10px; }
.admin-announcement-panel { margin-top: 14px; padding-bottom: 14px; }
.announcement-form { display: grid; gap: 8px; padding: 0 14px; }
.announcement-form label { color: var(--ink); font-weight: 700; }
.announcement-form textarea { width: 100%; min-height: 96px; padding: 12px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface-2); font: inherit; line-height: 1.55; }
.announcement-form > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.announcement-form small { color: var(--muted); }
.audit-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0 14px 12px; }
.audit-filters input, .audit-filters select { min-width: 0; width: 100%; height: 36px; border: 1px solid var(--line); border-radius: 9px; padding: 0 9px; background: #fff; color: var(--ink); }
@media (max-width: 800px) { .audit-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admin-role-hint { margin: 0 14px 10px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: .8rem; }
.audit-log-list { max-height: 300px; overflow: auto; padding: 0 14px; }
.audit-log-row { display: grid; grid-template-columns: 150px minmax(90px,1fr) minmax(140px,1fr) minmax(100px,1fr); gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: .78rem; overflow-wrap: anywhere; }
.audit-log-row code { color: var(--primary); }

.toast-region { position: fixed; z-index: 100; right: 20px; top: 20px; display: grid; gap: 8px; pointer-events: none; }
.toast { min-width: 280px; max-width: 390px; padding: 12px 14px; border: 1px solid #d9e3f0; border-radius: 11px; color: var(--ink); background: white; box-shadow: 0 16px 40px rgba(25,39,70,.18); animation: toast-in .25s ease both; }
.toast.success { border-left: 4px solid var(--green); }
.toast.warning { border-left: 4px solid var(--amber); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
dialog { width: min(92vw, 520px); max-height: calc(100dvh - 32px); overflow: hidden; border: 0; border-radius: 18px; padding: 0; box-shadow: 0 30px 90px rgba(16,26,51,.3); }
dialog::backdrop { background: rgba(12,20,39,.48); backdrop-filter: blur(4px); }
dialog form { position: relative; display: flex; flex-direction: column; max-height: inherit; padding: 24px; }
.asset-preview-dialog { width: min(94vw,1100px); max-height: min(92dvh,900px); }
.asset-preview-shell { display: flex; flex-direction: column; max-height: min(92dvh,900px); }
.asset-preview-shell > header, .asset-preview-shell > footer { display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
.asset-preview-shell > header { border-bottom: 1px solid var(--line); }
.asset-preview-shell > header h2 { min-width: 0; margin: 0; padding-right: 38px; overflow-wrap: anywhere; font-size: 1.05rem; }
.asset-preview-shell > header .dialog-close { margin-left: auto; }
.asset-preview-content { min-height: 120px; overflow: auto; padding: 18px; }
.asset-preview-content > img, .asset-preview-content > video { display: block; width: auto; max-width: 100%; max-height: calc(92dvh - 170px); margin: auto; object-fit: contain; }
.asset-preview-text { margin: 0; color: var(--ink); font: inherit; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.asset-preview-shell > footer { justify-content: flex-end; border-top: 1px solid var(--line); }
.asset-preview-shell > footer > a { margin-right: auto; }
#dialog-content { min-height: 0; overflow: auto; }
.dialog-close { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--surface-2); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.dialog-field { display: grid; gap: 6px; margin: 12px 0; font-weight: 700; }
.dialog-field input, .dialog-field select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; }
.profile-dialog-preview { display: flex; align-items: center; gap: 14px; margin: 12px 0; }
.profile-dialog-preview .avatar { width: 64px; height: 64px; font-size: 1.4rem; }
.profile-dialog-preview small { color: var(--muted); }
.profile-signout { margin-top: 12px; }
.notification-dialog { width: min(92vw,640px); }
.notification-dialog form { padding: 0; }
.notification-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.notification-dialog-heading > div { display: flex; align-items: center; gap: 12px; }
.notification-dialog-heading h2 { margin: 0; font-size: 1.12rem; }
.notification-dialog-heading p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; }
.notification-dialog-heading .dialog-close { position: static; flex: 0 0 34px; }
.notification-dialog-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--primary); background: var(--primary-soft); }
.notification-dialog-icon .ui-icon { width: 20px; height: 20px; }
.notification-list { min-height: 180px; max-height: min(58vh,520px); overflow-y: auto; padding: 8px 14px; }
.notification-list .notification-item { gap: 7px; padding: 14px 10px; border-bottom: 1px solid var(--line); }
.notification-list .notification-item:last-child { border-bottom: 0; }
.notification-list .notification-item.unread { border-left: 3px solid var(--primary); border-radius: 8px; background: var(--primary-soft); }
.notification-list .notification-item > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notification-list .notification-item strong { color: var(--ink); font-size: .92rem; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
.notification-list .notification-item small { color: var(--muted); font-size: .76rem; }
.notification-source { color: var(--primary); font-size: .76rem; font-weight: 800; }
.notification-new { padding: 2px 7px; border-radius: 999px; color: #091315; background: var(--primary); font-size: .68rem; font-weight: 800; }
.notification-empty { min-height: 200px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; }
.notification-empty .ui-icon { width: 28px; height: 28px; }
.notification-empty small { max-width: 340px; line-height: 1.5; }
.notification-dialog .dialog-actions { margin: 0; padding: 14px 24px 18px; border-top: 1px solid var(--line); }

@media (max-width: 1320px) {
  :root { --sidebar-width: 214px; }
  .script-layout { grid-template-columns: minmax(310px,.9fr) minmax(430px,1.1fr); }
  .script-layout .ai-assistant { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr repeat(3,auto) 1fr auto; align-items: center; gap: 8px; padding: 12px; }
  .script-layout .ai-assistant .panel-heading { border: 0; padding: 0; }
  .script-layout .ai-assistant .assistant-notice, .script-layout .ai-assistant .version-list { display: none; }
  .script-layout .ai-assistant > label, .script-layout .ai-assistant > textarea, .script-layout .ai-assistant > .primary-button { width: auto; margin: 0; }
  .library-layout { grid-template-columns: 190px minmax(500px,1fr); }
  .document-preview { grid-column: 1 / -1; }
  .review-layout { grid-template-columns: 220px minmax(500px,1fr); }
  .member-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); }
  .member-panel .panel-heading { grid-column: 1 / -1; }
  .completed-layout { grid-template-columns: 190px minmax(520px,1fr); }
  .project-detail { grid-column: 1 / -1; }
  .export-layout { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .share-panel { grid-column: 1 / -1; }
}

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .production-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workflow-guide { grid-template-columns: 1fr; }
  .workflow-guide.is-compact { grid-template-columns: 1fr; }
  .workflow-guide-actions, .workflow-guide.is-compact .workflow-guide-actions { grid-auto-flow: column; justify-content: end; justify-items: end; }
  .sidebar { transform: translateX(-100%); transition: transform .25s; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .main-column { grid-column: 1 / -1; }
  .mobile-only { display: inline-grid !important; }
  .global-search { min-width: 180px; }
  .topbar-actions > .secondary-button { display: none; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid, .extract-layout, .post-grid, .api-layout, .admin-layout { grid-template-columns: 1fr; }
  .script-layout { grid-template-columns: 1fr; }
  .script-layout .ai-assistant { display: block; }
  .script-layout .ai-assistant .assistant-notice, .script-layout .ai-assistant .version-list { display: block; }
  .script-layout .ai-assistant > label, .script-layout .ai-assistant > textarea, .script-layout .ai-assistant > .primary-button { width: calc(100% - 24px); margin: 10px 12px; }
  .frame-grid { grid-template-columns: repeat(3,1fr); }
  .flow-steps { grid-template-columns: 1fr 1fr; }
  .flow-steps > i { display: none; }
  .canvas-workspace { overflow: auto; }
}

@media (max-width: 760px) {
  .key-frames-panel .panel-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .key-frames-panel .button-row { display: flex; flex-wrap: wrap; width: 100%; }
  .library-layout:not(.image-library-layout), .image-library-layout, .image-library-layout.is-preview-open { grid-template-columns: minmax(0,1fr); }
  .image-library-preview { width: 100%; }
  .production-grid { grid-template-columns: 1fr; }
  .shot-picker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .node-library { display: block; width: min(280px,calc(100% - 24px)); }
  .node-library button, .canvas-material-label { width: 100%; }
  .canvas-side-panel { width: min(340px,calc(100% - 24px)); }
  .workflow-guide { padding: 12px; }
  .workflow-steps { grid-template-columns: repeat(5,minmax(54px,1fr)); overflow-x: auto; }
  .workflow-steps button { font-size: .64rem; }
  .workflow-steps button i { width: 29px; height: 29px; }
  .workflow-steps button:not(:last-child)::after { top: 15px; left: calc(50% + 15px); width: calc(100% - 30px); }
  body { font-size: 14px; }
  .auth-screen { grid-template-columns: 1fr; }
  .auth-backdrop { min-height: 300px; padding: 36px 24px; }
  .auth-copy h1 { font-size: 2.4rem; }
  .auth-panel { padding: 20px; }
  .auth-card { padding: 24px; }
  .auth-mobile-brand { display: flex; align-items: center; gap: 8px; }
  .topbar { min-height: 66px; padding: 10px 12px; }
  .topbar p, .profile-pill span:last-child, .topbar-actions .global-search { display: none; }
  .notification-trigger { padding-inline: 10px; }
  .content { padding: 12px; }
  .page-hero { align-items: flex-start; flex-direction: column; }
  .hero-actions { width: 100%; }
  .hero-actions button { flex: 1; }
  .metric-grid, .metric-grid.three, .dashboard-grid, .two-column, .export-layout { grid-template-columns: 1fr; }
  .project-summary { grid-template-columns: 1fr; }
  .project-summary > img { height: 210px; }
  .flow-steps, .rule-grid { grid-template-columns: 1fr; }
  .frame-grid { grid-template-columns: repeat(2,1fr); }
  .form-row { flex-wrap: wrap; }
  .source-bar { overflow-x: auto; }
  .source-bar > * { flex: 0 0 auto; }
  .rough-preview > img { height: 280px; }
  .timeline-panel { overflow-x: auto; }
  .timeline-panel > * { min-width: 680px; }
  .canvas-workspace { min-height: 540px; }
  .library-layout, .review-layout, .completed-layout { grid-template-columns: 1fr; }
  .document-panel { overflow-x: auto; }
  .selection-bar { position: sticky; bottom: 6px; min-width: 620px; }
  .asset-grid { grid-template-columns: repeat(2,1fr); }
  .batch-table, .usage-table, .user-table { overflow-x: auto; }
  .batch-row { min-width: 800px; }
  .usage-row { min-width: 850px; }
  .user-row { min-width: 760px; }
  .review-preview { grid-template-columns: 1fr; }
  .member-panel { display: block; }
  .project-grid { grid-template-columns: repeat(2,1fr); }
  .project-filters { grid-template-columns: minmax(160px,1fr) repeat(2,minmax(115px,140px)); }
  .format-grid { grid-template-columns: repeat(2,1fr); }
  .export-steps i { width: 30px; }
}

@media (max-width: 480px) {
  .auth-backdrop { display: none; }
  .auth-screen { background: linear-gradient(145deg,#eef1ff,#f9faff); }
  .auth-panel { min-height: 100vh; }
  .metric-grid, .frame-grid, .asset-grid, .project-grid { grid-template-columns: 1fr; }
  .project-filters { grid-template-columns: 1fr; }
  .topbar-actions .icon-button { display: none; }
  .notification-trigger > span:not([data-ui-icon]) { display: none; }
  .notification-trigger { width: 40px; padding: 0; justify-content: center; }
  .notification-trigger b { position: absolute; right: -5px; top: -5px; min-width: 18px; height: 18px; padding: 0 4px; }
  .project-summary > img, .video-preview img { height: 190px; }
  .panel-heading { align-items: flex-start; flex-direction: column; }
  .button-row { flex-wrap: wrap; }
  .flow-steps button { min-height: 60px; }
  .storyboard-head, .shot-row { grid-template-columns: 66px 44px 48px 1fr; }
  .storyboard-head span:last-child, .shot-row > span:last-of-type { display: none; }
  .subtitle-preview { font-size: .95rem; }
  .permission-grid { grid-template-columns: 1fr; }
}

.video-preview video,
.rough-preview video {
  width: 100%;
  height: 230px;
  display: block;
  object-fit: contain;
  background: #171324;
}
.rough-preview video.contain-preview { object-fit: contain; }
.rough-preview video:not(.contain-preview) { object-fit: cover; }

.video-preview video { height: 310px; object-fit: contain; }
.remix-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; margin-bottom: 12px; border-radius: 16px; color: #fff; background: linear-gradient(115deg, #1d2b58, #5149db); }
.remix-intro h2 { margin: 4px 0 7px; font-size: clamp(17px, 1.8vw, 23px); line-height: 1.35; }
.remix-intro p { margin: 0; color: #dce4ff; font-size: 12px; }
.remix-eyebrow { color: #c7c8ff; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.remix-intro-actions { display: flex; flex-shrink: 0; gap: 8px; flex-wrap: wrap; }
.remix-intro-actions button { white-space: nowrap; }
.remix-source-strip { display: flex; align-items: end; gap: 14px; padding: 13px 17px; margin-bottom: 12px; }
.remix-source-strip > div { flex: 1; min-width: 180px; display: grid; gap: 4px; }
.remix-source-strip > div span, .remix-source-strip label { color: #667798; font-size: 12px; }
.remix-source-strip label { display: grid; gap: 4px; min-width: 185px; }
.remix-source-strip select, .remix-controls select, .remix-submit input { width: 100%; min-height: 34px; border: 1px solid #dce3f4; border-radius: 8px; padding: 5px 9px; background: #f8faff; color: #16244b; }
.remix-stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.remix-stage { min-width: 0; overflow: hidden; }
.remix-stage-head { display: flex; gap: 10px; align-items: flex-start; padding: 14px 15px 9px; }
.remix-stage-head h3 { margin: 0 0 3px; font-size: 15px; }
.remix-stage-head p { margin: 0; color: #7583a1; font-size: 11px; line-height: 1.4; }
.remix-stage-number { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 7px; background: #eeedff; color: #594aff; font-weight: 750; font-size: 12px; }
.remix-depth-tabs { display: flex; gap: 4px; margin: 0 12px 9px; padding: 3px; background: #f1f4fb; border-radius: 8px; }
.remix-depth-tabs button { flex: 1; min-width: 0; border: 0; border-radius: 6px; background: transparent; padding: 7px 5px; color: #697994; font-size: 11px; cursor: pointer; }
.remix-depth-tabs button.active { background: white; color: #594aff; box-shadow: 0 1px 5px #15254a1a; font-weight: 700; }
.remix-depth-video-options { display: grid; gap: 3px; margin: 0 12px 9px; color: #526180; font-size: 11px; }
.remix-depth-video-options label { display: flex; align-items: center; gap: 8px; }
.remix-depth-video-options select, .remix-building-select select { border: 1px solid #dce3f4; border-radius: 7px; padding: 5px 7px; color: #23345c; background: white; }
.remix-depth-video-options small { color: #7583a1; line-height: 1.35; }
.remix-stage-preview { height: 168px; margin: 0 12px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: #131a2c; color: #bdc9e1; font-size: 12px; }
.remix-stage-preview img { width: 100%; height: 100%; object-fit: contain; }
.remix-stage-preview video { width: 100%; height: 100%; object-fit: contain; }
.remix-stage-bottom { min-height: 53px; padding: 10px 13px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.remix-stage-bottom span { color: #6d7d9b; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.remix-stage-bottom span:first-child { flex: 1 0 100%; }
.remix-stage-bottom button { white-space: nowrap; }
.remix-compose-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: 12px; }
.remix-form { padding: 15px 17px 18px; }
.remix-form > label, .remix-submit label { display: grid; gap: 6px; color: #405070; font-size: 12px; font-weight: 650; }
.remix-form textarea { width: 100%; resize: vertical; border: 1px solid #dce3f4; border-radius: 9px; padding: 9px 10px; background: #f9faff; color: #142347; font: inherit; }
.remix-attachment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 11px; }
.remix-attachment { min-width: 0; padding: 11px; border: 1px solid #dce3f4; border-radius: 9px; background: #fafbff; display: grid; align-content: start; gap: 5px; }
.remix-attachment strong { color: #263657; font-size: 13px; }
.remix-attachment > small { color: #71809d; font-size: 11px; line-height: 1.45; }
.remix-attachment-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.remix-attachment-preview { min-height: 38px; display: flex; align-items: center; gap: 7px; color: #526180; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.remix-attachment-preview img { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 5px; object-fit: cover; }
.remix-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 13px; margin-top: 10px; }
.remix-controls label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #526180; }
.remix-controls label:nth-child(2) { min-width: 150px; }
.remix-clip-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; margin: 12px 0; padding: 12px; border: 1px solid var(--border, #34383f); border-radius: 12px; background: var(--surface-soft, rgba(128, 128, 128, .06)); }
.remix-clip-controls > strong { width: 100%; font-size: 13px; }
.remix-clip-controls label { display: grid; gap: 5px; min-width: 105px; font-size: 12px; }
.remix-clip-controls input, .remix-clip-controls select { width: 100%; min-height: 36px; padding: 5px 9px; border: 1px solid #555c67; border-radius: 8px; color: inherit; background: #22252a; }
.remix-clip-controls small { flex: 1; min-width: 200px; line-height: 1.5; opacity: .75; }
.remix-disclosure { margin: 11px 0; font-size: 11px; line-height: 1.5; color: #71809d; }
.remix-submit { display: flex; align-items: end; gap: 10px; }
.remix-submit label { flex: 1; min-width: 150px; }
.remix-submit button { white-space: nowrap; }
.remix-result-preview { min-height: 248px; margin: 14px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: #131a2c; color: #bdc9e1; font-size: 12px; }
.remix-result-preview video { width: 100%; max-height: 300px; }
.remix-result-footer { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 0 15px 15px; font-size: 12px; color: #6c7b98; }
.remix-scene-dialog { width: min(900px, calc(100vw - 28px)); max-width: none; padding: 0; border: 1px solid #dce3f4; border-radius: 14px; box-shadow: 0 22px 80px #09133277; }
.remix-scene-dialog::backdrop { background: #061227aa; }
.remix-scene-dialog-head, .remix-scene-dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; }
.remix-scene-dialog-head h3 { margin: 0 0 3px; font-size: 17px; }
.remix-scene-dialog-head p, .remix-scene-dialog-actions span { margin: 0; font-size: 11px; color: #697994; }
.remix-scene-dialog-actions { justify-content: flex-start; flex-wrap: wrap; }
.remix-building-select { display: flex; align-items: center; gap: 7px; color: #405070; font-size: 12px; font-weight: 650; }
.remix-scene-viewport { width: 100%; height: min(56vh, 500px); background: #0b1426; }
.remix-scene-viewport canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 1000px) { .remix-stage-grid { grid-template-columns: 1fr 1fr; } .remix-compose-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .remix-intro, .remix-source-strip { flex-direction: column; align-items: stretch; } .remix-stage-grid, .remix-attachment-grid { grid-template-columns: 1fr; } .remix-submit { flex-direction: column; align-items: stretch; } }
.rough-preview > a { position: absolute; right: 16px; bottom: 16px; z-index: 3; text-decoration: none; }
.production-track audio { display: block; width: calc(100% - 14px); height: 34px; margin: 6px 7px 8px; }
.production-track audio[hidden] { display: none; }
.read-only-mode [contenteditable="true"] { pointer-events: none; outline: none; }
.non-admin-mode .quota-panel { display: none !important; }
.non-admin-mode .admin-cost-only, .non-admin-mode [data-view-panel="api"] { display: none !important; }
.non-admin-mode .batch-row { grid-template-columns: 54px minmax(180px,1.4fr) 130px 105px 130px minmax(150px,auto); }
.non-admin-mode .batch-row > :nth-child(6), .non-admin-mode .canvas-composer-cost { display: none !important; }
.non-admin-mode .api-layout { grid-template-columns: 1fr; }
.read-only-mode #run-workflow,
.read-only-mode #generate-image-button,
.read-only-mode #render-video-button,
.read-only-mode #new-consistency-asset,
.read-only-mode #add-shot-button,
.read-only-mode #reorganize-button,
.read-only-mode #invite-member,
.read-only-mode #run-batch,
.read-only-mode #pause-batch,
.read-only-mode #new-version-button { opacity: .45; pointer-events: none; }

@media (max-width: 480px) {
  .video-preview video { height: 190px; }
  .rough-preview video { height: 280px; }
}

/* Unified infinite-canvas colour system */
html, body { background: var(--canvas); color: var(--ink); }
body { background-image: radial-gradient(circle at 82% 8%, rgba(87,212,235,.045), transparent 30%); }
.app-shell, .main-column, .content { background: var(--canvas); }
.content { color: var(--ink); }

/* Canvas owns the complete viewport: the page no longer reserves a dead strip below it. */
.app-shell.canvas-view-open {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.canvas-view-open .main-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.canvas-view-open .topbar { flex: 0 0 auto; }
.canvas-view-open .content {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
}
.canvas-view-open [data-view-panel="canvas"].active {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.canvas-view-open [data-view-panel="canvas"] .canvas-home {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}
.canvas-view-open [data-view-panel="canvas"] .canvas-toolbar { flex: 0 0 auto; }
.canvas-view-open [data-view-panel="canvas"] .canvas-shell {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}
.canvas-view-open [data-view-panel="canvas"] .canvas-stage {
  height: 100%;
  min-height: 0;
}
.canvas-view-open [data-view-panel="canvas"] .canvas-workspace,
.canvas-view-open.canvas-focus-mode [data-view-panel="canvas"] .canvas-workspace {
  height: 100%;
  min-height: 0;
}

.sidebar {
  color: var(--ink);
  background: linear-gradient(180deg, #151619 0%, #101113 100%);
  border-right: 1px solid var(--line);
}
.brand small, .workspace-card p, .sidebar-footer { color: var(--muted); }
.nav-section-title { color: #676b72; }
.nav-item { color: #aaaeb5; }
.nav-item:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.nav-item.active { color: #dffbff; background: var(--primary-soft); box-shadow: inset 3px 0 var(--primary); }
.sidebar-divider { border-color: var(--line); }

.topbar {
  color: var(--ink);
  background: rgba(20,21,24,.92);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}
.topbar p, .profile-pill small { color: var(--muted); }
.global-search, .profile-pill { color: var(--ink); background: #202124; border-color: var(--line); }
.global-search:focus-within, .profile-pill:hover { border-color: rgba(87,212,235,.38); background: #25272a; }

.auth-screen { background: var(--canvas); }
.auth-backdrop { background: radial-gradient(circle at 25% 18%, rgba(87,212,235,.15), transparent 33%), linear-gradient(145deg,#16181b,#0d0e10); }
.auth-backdrop::after { opacity: .24; }
.auth-copy p, .auth-feature-list span { color: #a4a8af; }
.auth-panel { background: #17181b; border-left: 1px solid var(--line); }
.auth-card { color: var(--ink); background: #202124; border-color: var(--line); box-shadow: 0 26px 70px rgba(0,0,0,.34); }
.auth-tabs { background: #17181b; }
.auth-tabs button { color: var(--muted); }
.auth-tabs button.active { color: #dffbff; background: #292a2e; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.auth-divider { color: var(--muted); }
.auth-divider::before, .auth-divider::after { background: var(--line); }
.auth-error { color: #ff9ab0; background: var(--coral-soft); border-color: rgba(239,113,143,.25); }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select, textarea {
  color: var(--ink);
  background: #17181b;
  border-color: var(--line);
}
input::placeholder, textarea::placeholder { color: #656970; }
input:focus, select:focus, textarea:focus { border-color: rgba(87,212,235,.52); box-shadow: 0 0 0 3px rgba(87,212,235,.08); outline: 0; }
select option { color: var(--ink); background: #202124; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--primary); }

.primary-button { color: #0c1719; background: linear-gradient(135deg,var(--primary),var(--primary-2)); border-color: transparent; box-shadow: 0 8px 22px rgba(87,212,235,.14); }
.primary-button:hover { filter: brightness(1.06); box-shadow: 0 10px 28px rgba(87,212,235,.2); }
.secondary-button, .ghost-button, .icon-button { color: #d5d8dc; background: #292a2e; border-color: var(--line); box-shadow: none; }
.secondary-button:hover, .ghost-button:hover, .icon-button:hover { color: #f2fdff; border-color: rgba(87,212,235,.32); background: #303236; }
.danger-button { color: #ffb1c1; background: var(--coral-soft); border-color: rgba(239,113,143,.22); }
.text-button, a { color: var(--primary); }

.panel, .metric-card, .project-summary, .frame-card, .generated-card, .production-track,
.tool-action, .asset-card, .project-card, .provider, .export-step, .share-box,
.admin-settings, .admin-audit-panel, .remix-stage, .remix-form, .remix-result {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
.panel-heading, .card-heading, .section-heading { border-color: var(--line); }
.panel-heading p, .page-hero p, .metric-card p, .metric-card small, .project-summary p,
.frame-card p, .generated-card p, .tool-action p, .asset-card p, .project-card p,
.provider p, .export-step p, .empty-state p { color: var(--muted); }
.page-hero { color: var(--ink); background: linear-gradient(115deg,#232528,#1c2022); border: 1px solid var(--line); }
.page-hero::after { background: radial-gradient(circle,rgba(87,212,235,.17),transparent 70%); }
.page-hero .eyebrow, .eyebrow { color: var(--primary); }

.workflow-guide { background: linear-gradient(135deg,#202124,#191a1d); border-color: var(--line); box-shadow: none; }
.workflow-guide h2, .workflow-guide strong { color: var(--ink); }
.workflow-guide p, .workflow-guide small { color: var(--muted); }
.workflow-steps button { color: #9da1a7; }
.workflow-steps button i { color: #a9adb3; background: #2a2b2f; border-color: var(--line); }
.workflow-steps button.active { color: #dffbff; }
.workflow-steps button.active i { color: #0d1719; background: var(--primary); border-color: var(--primary); }
.workflow-steps button:not(:last-child)::after { background: var(--line); }

.metric-card, .project-summary, .frame-card, .generated-card, .tool-action,
.asset-card, .project-card, .provider { transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.metric-card:hover, .frame-card:hover, .generated-card:hover, .tool-action:hover,
.asset-card:hover, .project-card:hover, .provider:hover { border-color: rgba(87,212,235,.24); background: #24262a; }
.metric-icon, .project-icon, .tool-icon { color: var(--primary); background: var(--primary-soft); }
.metric-icon.blue, .metric-icon.purple { color: var(--primary); background: var(--primary-soft); }
.metric-icon.green { color: #76e2c1; background: var(--green-soft); }
.metric-icon.amber { color: #efc777; background: var(--amber-soft); }
.metric-icon.coral { color: #ff9db2; background: var(--coral-soft); }
.empty-media, .empty-preview, .media-placeholder { color: #777b82; background: #17181b; border-color: var(--line); }
.empty-media span { color: var(--primary); background: #292a2e; box-shadow: 0 10px 24px rgba(0,0,0,.24); }
.activity-list li, .flow-steps button, .storyboard-head, .shot-row, .source-bar,
.selection-bar, .batch-row, .usage-row, .user-row, .review-list button,
.project-filters, .export-steps, .admin-auth-note, .admin-role-hint { border-color: var(--line); }
.activity-list button, .flow-steps button, .segmented, .source-bar, .production-track .track-body,
.selection-bar, .review-list button, .project-filters, .export-steps, .admin-auth-note,
.admin-role-hint { color: var(--ink); background: #292a2e; }
.activity-list button:hover, .review-list button:hover { background: #303236; }
.segmented button { color: var(--muted); }
.segmented button.selected, .segmented button.active { color: #dffbff; background: #202124; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.flow-steps button.active, .review-list button.active { color: #dffbff; border-color: rgba(87,212,235,.36); background: var(--primary-soft); }

.frame-card .frame-index, .generated-card .card-index, .status-chip,
.tag, .badge { border-color: var(--line); background: #292a2e; color: #c9ccd1; }
.status-chip.success, .tag.success, .badge.success { color: #86eccb; background: var(--green-soft); }
.status-chip.warning, .tag.warning, .badge.warning { color: #f1ca80; background: var(--amber-soft); }
.status-chip.danger, .tag.danger, .badge.danger { color: #ff9fb3; background: var(--coral-soft); }
.status.info { color: #8deaff; background: var(--primary-soft); }
.status.success { color: #86eccb; background: var(--green-soft); }
.status.warning { color: #f1ca80; background: var(--amber-soft); }
.frame-source-warning { color: #f1ca80; background: var(--amber-soft); border-color: rgba(234,184,90,.24); }
.script-editor, .generated-card textarea, .rough-preview, .video-preview,
.document-preview, .review-preview, .project-detail { background: #17181b; border-color: var(--line); }
.generated-card button, .generated-card a, .frame-actions button, .member-actions button,
.batch-actions button { color: #d5d8dc; background: #292a2e; border-color: var(--line); }
.generated-card button:hover, .generated-card a:hover, .frame-actions button:hover,
.member-actions button:hover, .batch-actions button:hover { color: #dffbff; background: var(--primary-soft); border-color: rgba(87,212,235,.3); }

.table-head, .document-row.head, .batch-row.head, .usage-row.head, .user-row.head { color: #a6aab0; background: #292a2e; }
.table-row, .document-row, .batch-row, .usage-row, .user-row { color: var(--ink); border-color: var(--line); }
.table-row:hover, .document-row:hover, .batch-row:hover, .usage-row:hover, .user-row:not(.head):hover { background: rgba(255,255,255,.025); }
.selection-bar, .batch-actions, .review-actions { box-shadow: 0 14px 34px rgba(0,0,0,.24); }
.consistency-tabs, .project-tabs { background: #17181b; border-color: var(--line); }
.consistency-tabs button, .project-tabs button { color: var(--muted); }
.consistency-tabs button.active, .project-tabs button.active { color: #dffbff; background: var(--primary-soft); }
#app-shell .project-filters input, #app-shell .project-filters select,
#app-shell .admin-settings select, #app-shell .api-form input {
  color: var(--ink);
  background: #17181b;
  border-color: var(--line);
}
.format-grid button, .permission-grid label, .export-content, .export-settings { color: var(--ink); background: #202124; border-color: var(--line); }
.format-grid button:hover, .permission-grid label:hover { background: #292a2e; border-color: rgba(87,212,235,.25); }
.format-grid button.selected { color: #dffbff; background: var(--primary-soft); border-color: rgba(87,212,235,.5); }
.export-missing-items { color: #f1ca80; background: var(--amber-soft); border-color: rgba(234,184,90,.24); }
.copy-field button { color: #0c1719; background: var(--primary); }

.quota-ring { background: conic-gradient(var(--primary) var(--quota,68%),#303236 0); }
.quota-ring::after { color: var(--ink); background: var(--surface); }
.audit-filters input, .audit-filters select { color: var(--ink); background: #17181b; border-color: var(--line); }
.audit-log-row { border-color: var(--line); }
.dola-embedded-pane { background: #17181b; border-color: var(--line); }

.creative-view-open .main-column { height: 100vh; overflow: hidden; }
.creative-view-open .topbar, .creative-view-open #workflow-guide { display: none; }
.creative-view-open .content { height: 100vh; padding: 20px; overflow: hidden; }

.creative-workspace.active {
  height: 100vh;
  margin: -20px;
  overflow: hidden;
  background: #101113;
}
.creative-workbench {
  display: grid;
  grid-template-columns: 270px minmax(0,1fr);
  height: 100%;
  min-height: 0;
}
.model-catalog {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(0,1fr) auto;
  min-width: 0;
  padding: 20px 14px 16px;
  border-right: 1px solid #292b30;
  background: #151619;
  overflow: hidden;
}
.model-catalog-head { display: flex; align-items: center; gap: 11px; margin: 0 6px 18px; }
.model-catalog-head > div { min-width: 0; display: grid; gap: 2px; }
.model-catalog-head strong { color: #f4f5f7; font-size: 16px; }
.model-catalog-head small { color: #737880; font-size: 11px; }
.model-catalog-mark {
  display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 12px; color: #68e5f5; background: #12333a; box-shadow: inset 0 0 0 1px rgba(87,212,235,.12);
}
.model-catalog-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 11px; background: #101114; }
.model-catalog-tabs button { min-height: 32px; border: 0; border-radius: 8px; color: #7e838b; background: transparent; cursor: pointer; }
.model-catalog-tabs button.active { color: #e9fdff; background: #17363c; box-shadow: inset 0 0 0 1px rgba(87,212,235,.18); }
.model-search { display: flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 12px; padding: 0 11px; border: 1px solid #34363b; border-radius: 10px; background: #111215; }
.model-search:focus-within { border-color: rgba(87,212,235,.46); }
.model-search span { color: #7e838b; font-size: 20px; }
.model-search input { width: 100%; min-width: 0; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #dfe2e6; }
.model-list { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 7px; padding-right: 2px; }
.model-list-item {
  display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 10px;
  width: 100%; padding: 11px 9px; border: 1px solid transparent; border-radius: 12px;
  color: #dfe2e6; background: transparent; text-align: left; cursor: pointer;
}
.model-list-item:hover { background: #1c1e22; border-color: #2b2e33; }
.model-list-item.active { background: linear-gradient(90deg,#11363e,#19292e); border-color: rgba(87,212,235,.25); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.model-list-item > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.model-list-item strong, .model-list-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-list-item strong { font-size: 13px; }
.model-list-item small { color: #777c84; font-size: 10px; }
.model-list-item em { padding: 3px 6px; border-radius: 6px; color: #68dbbd; background: rgba(52,190,151,.12); font-size: 9px; font-style: normal; }
.model-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: 11px; font-weight: 800; }
.model-avatar.cyan { color: #75efff; background: #17343b; }
.model-avatar.purple { color: #c3b6ff; background: #282340; }
.model-avatar.amber { color: #ffd98f; background: #3b3020; }
.model-account { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin-top: 14px; padding: 12px; border: 1px solid #2b2e33; border-radius: 12px; background: #111215; }
.model-account span, .model-account small { color: #777c84; font-size: 10px; }
.model-account strong { color: #efc777; font-size: 13px; }
.model-account small { grid-column: 1 / -1; }
.creative-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 18px 28px 18px;
  background: radial-gradient(circle at 50% 14%,rgba(87,212,235,.035),transparent 28%),#101113;
}
.creative-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 2px 14px; }
.creative-stage-head h2 { margin: 3px 0 0; color: #f2f4f7; font-size: 22px; }
.creative-stage-head > div:last-child { display: flex; align-items: center; gap: 9px; }
.creative-model-notice { display: flex; align-items: center; justify-content: center; gap: 20px; max-width: 840px; margin: 4px auto 20px; padding: 18px 24px; border: 1px solid rgba(87,212,235,.22); border-radius: 15px; background: #191b1f; box-shadow: 0 14px 38px rgba(0,0,0,.16); }
.creative-model-notice > div { min-width: 0; }
.creative-model-notice strong { color: #f0f2f5; }
.creative-model-notice p { margin: 6px 0 0; color: #a5aab1; line-height: 1.7; font-size: 13px; }
.notice-orbit { position: relative; width: 52px; height: 52px; flex: 0 0 52px; border: 8px dashed #32c9a6; border-radius: 50%; filter: drop-shadow(0 0 12px rgba(50,201,166,.24)); }
.notice-orbit.video { border-color: #57d4eb; border-style: solid; clip-path: polygon(0 0,100% 50%,0 100%); border-radius: 8px; }
.creative-history-feed { min-height: 0; overflow: auto; align-content: start; padding: 4px max(10px,calc((100% - 1050px)/2)) 24px; }
.creative-history-feed.generated-grid { display: flex; flex-direction: column; gap: 28px; grid-template-columns: none; max-height: none; }
.creative-history-empty { display: grid; place-items: center; align-content: center; min-height: 260px; color: #656a72; text-align: center; }
.creative-history-empty > span { margin-bottom: 12px; color: #4c525b; font-size: 42px; }
.creative-history-empty strong { color: #aeb2b8; }
.creative-history-empty p { margin: 7px 0 0; font-size: 12px; }
.creative-history-item { display: grid; gap: 12px; padding-bottom: 25px; border-bottom: 1px dashed #292b30; }
.creative-history-copy { display: grid; gap: 8px; }
.creative-history-copy > div { display: flex; flex-wrap: wrap; gap: 7px; }
.creative-history-copy p { max-width: 880px; margin: 0; color: #d6d9dd; line-height: 1.7; }
.creative-history-chip { padding: 4px 8px; border: 1px solid #2f3238; border-radius: 999px; color: #7f858e; background: #17191c; font-size: 10px; }
.creative-history-media { width: min(640px,100%); overflow: hidden; border-radius: 3px; background: #090a0c; }
.creative-history-media img { display: block; width: 100%; max-height: 560px; object-fit: contain; background: #0c0d0f; }
.creative-history-actions { display: flex; gap: 8px; }
.creative-history-actions button, .creative-history-actions a { padding: 8px 12px; border: 1px solid #2c2f34; border-radius: 8px; color: #b8bdc4; background: #1b1d21; text-decoration: none; cursor: pointer; }
.creative-history-actions button:hover, .creative-history-actions a:hover { color: #e8fbff; border-color: rgba(87,212,235,.28); background: #23262a; }
.creative-dock { width: min(1120px,calc(100% - 30px)); margin: 0 auto; padding: 13px 14px 12px; border: 1px solid #2d3036; border-radius: 18px; background: rgba(31,33,37,.98); box-shadow: 0 20px 60px rgba(0,0,0,.38); backdrop-filter: blur(18px); }
.creative-reference-strip { float: left; width: 220px; grid-template-columns: 68px 68px 70px; gap: 7px; margin: 0 14px 8px 0; }
.creative-reference-strip .creative-reference-tile, .creative-reference-strip .creative-reference-preview { min-height: 76px; height: 76px; border-radius: 10px; }
.creative-reference-strip .creative-reference-tile { align-items: center; padding: 6px; text-align: center; }
.creative-reference-strip .creative-reference-tile > span { font-size: 18px; }
.creative-reference-strip .creative-reference-tile strong { font-size: 10px; }
.creative-reference-strip .creative-reference-tile small { display: none; }
.creative-reference-strip .creative-reference-preview { font-size: 9px; text-align: center; }
.creative-reference-strip .creative-reference-preview > img, .creative-reference-strip .creative-reference-preview > video { height: 76px; }
.creative-reference-strip .creative-reference-preview > div { inset: auto 3px 3px; padding: 3px 5px; }
.creative-reference-strip .creative-reference-preview > div strong { display: none; }
.creative-dock .creative-prompt-label { display: block; }
.creative-dock .creative-prompt-label textarea { width: calc(100% - 234px); min-height: 76px; height: 76px; padding: 12px 14px; border-color: transparent; background: transparent; resize: none; }
.creative-dock .creative-prompt-label textarea:focus { outline: none; border-color: transparent; box-shadow: none; }
.creative-dock-controls { clear: both; display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid #2a2c31; overflow-x: auto; }
.creative-dock-controls select, .creative-dock-controls .select-only-label select { min-width: 108px; height: 38px; padding: 0 30px 0 11px; border: 1px solid #30333a; border-radius: 9px; color: #d9dce0; background: #1b1d21; }
.creative-dock-controls .select-only-label { display: contents; }
.dock-icon-button { height: 38px; margin-left: auto; padding: 0 12px; white-space: nowrap; border: 1px solid #30333a; border-radius: 9px; color: #aeb3ba; background: #1b1d21; cursor: pointer; }
.creative-send-button { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 12px; color: #0c1517; background: linear-gradient(145deg,#79e8f7,#49c7e0); font-size: 25px; cursor: pointer; box-shadow: 0 8px 20px rgba(87,212,235,.22); }
.creative-send-button:disabled { opacity: .5; cursor: wait; }
.creative-result-count { position: absolute; right: 32px; bottom: 214px; color: #7d8289; font-size: 11px; }
.creative-history-feed .creative-video-card { display: grid; gap: 12px; padding-bottom: 25px; border: 0; border-bottom: 1px dashed #292b30; border-radius: 0; background: transparent; }
.creative-history-feed .creative-video-card video { width: min(640px,100%); max-height: 520px; border-radius: 3px; object-fit: contain; }
.creative-history-feed .creative-video-card > div { width: min(760px,100%); padding: 0; }

.creative-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 18px; padding: 2px 2px 0;
}
.creative-page-head h2 { margin: 5px 0 4px; font-size: 26px; color: var(--ink); }
.creative-page-head p { margin: 0; color: var(--muted); }
.creative-studio-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); gap: 16px; align-items: start; }
.creative-composer-card, .creative-result-card { min-width: 0; }
.creative-reference-row { display: grid; grid-template-columns: 150px 150px minmax(180px, 1fr); gap: 12px; margin-bottom: 16px; }
.creative-reference-tile, .creative-reference-preview {
  min-height: 112px; border: 1px solid var(--line); border-radius: 14px; background: #191a1d; color: var(--ink);
}
.creative-reference-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 15px; cursor: pointer; text-align: left; }
.creative-reference-tile:hover { border-color: rgba(87,212,235,.38); background: #222427; }
.creative-reference-tile > span { font-size: 24px; color: var(--primary); }
.creative-reference-tile strong { font-size: 14px; }
.creative-reference-tile small { color: var(--muted); }
.creative-reference-preview { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.creative-reference-uploading { color: var(--primary); animation: reference-upload-pulse 1s ease-in-out infinite alternate; }
@keyframes reference-upload-pulse { to { opacity: .48; } }
.creative-reference-preview > img, .creative-reference-preview > video { width: 100%; height: 150px; object-fit: cover; }
.creative-reference-preview > div { position: absolute; inset: auto 8px 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: rgba(12,13,15,.88); }
.creative-reference-preview > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.creative-reference-preview > div button { color: #ff9fb3; background: transparent; border: 0; cursor: pointer; }
.creative-prompt-label { display: grid; gap: 8px; color: #b9bdc3; font-weight: 650; }
.creative-prompt-label textarea { min-height: 174px; resize: vertical; color: var(--ink); background: #17181b; border: 1px solid var(--line); border-radius: 14px; padding: 16px; line-height: 1.65; }
.creative-prompt-label textarea:focus { outline: 1px solid rgba(87,212,235,.6); border-color: rgba(87,212,235,.6); }
.creative-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.creative-settings-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.creative-settings-grid select { width: 100%; min-height: 42px; color: var(--ink); background: #191a1d; border: 1px solid var(--line); border-radius: 10px; padding: 0 11px; }
.creative-action-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.creative-result-card .generated-grid { max-height: 660px; overflow: auto; grid-template-columns: repeat(2,minmax(0,1fr)); }
.creative-video-results { display: grid; gap: 12px; }
.creative-video-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #17181b; }
.creative-video-card video { display: block; width: 100%; max-height: 320px; background: #090a0b; }
.creative-video-card > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 12px; padding: 12px; }
.creative-video-card small { color: var(--muted); }
.creative-video-card a { grid-row: 1 / span 2; grid-column: 2; text-decoration: none; }
.chat-page-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 16px; min-height: calc(100vh - 225px); }
.chat-context-panel { align-self: start; }
.chat-context-summary { margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #17181b; color: var(--muted); line-height: 1.55; }
.chat-page-panel { display: grid; grid-template-rows: minmax(360px,1fr) auto; min-height: calc(100vh - 225px); padding: 0; overflow: hidden; }
.chat-page-messages { overflow: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.chat-page-message { max-width: min(760px,86%); padding: 14px 16px; border: 1px solid var(--line); border-radius: 15px; background: #191a1d; }
.chat-page-message.user { align-self: flex-end; background: var(--primary-soft); border-color: rgba(87,212,235,.3); }
.chat-page-message strong { display: block; margin-bottom: 7px; color: var(--primary); }
.chat-page-message p { margin: 0; color: var(--ink); white-space: pre-wrap; line-height: 1.7; }
.chat-page-empty { margin: auto; text-align: center; color: var(--muted); }
.chat-page-empty > span { display: block; margin-bottom: 10px; font-size: 40px; color: var(--primary); }
.chat-page-empty strong { color: var(--ink); }
.chat-page-form { padding: 16px; border-top: 1px solid var(--line); background: #1c1d20; }
.chat-page-form textarea { width: 100%; min-height: 96px; resize: vertical; color: var(--ink); background: #151619; border: 1px solid var(--line); border-radius: 13px; padding: 14px; line-height: 1.6; }
.chat-page-form > div { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }

/* Spacious media workbench: small type, clear symbols, fixed non-overlapping zones. */
.creative-workbench { grid-template-columns: 244px minmax(0,1fr); }
.model-catalog { padding: 24px 16px 18px; }
.model-catalog-head { margin-bottom: 24px; }
.model-catalog-head strong { font-size: 14px; }
.model-catalog-head small { font-size: 10px; }
.model-catalog-mark { width: 42px; height: 42px; flex-basis: 42px; font-size: 18px; }
.model-catalog-tabs { margin-bottom: 16px; }
.model-catalog-tabs button { font-size: 12px; }
.model-search { margin-bottom: 18px; }
.model-search input { font-size: 11px; }
.model-list { gap: 12px; }
.model-list-item { grid-template-columns: 42px minmax(0,1fr) auto; min-height: 66px; padding: 12px 10px; }
.model-list-item strong { font-size: 12px; }
.model-list-item small { font-size: 9px; }
.model-avatar { width: 42px; height: 42px; font-size: 11px; }
.model-account { padding: 14px; }
.creative-stage { padding: 26px 42px 24px; }
.creative-stage-head { padding: 0 0 22px; }
.creative-stage-head h2 { font-size: 24px; letter-spacing: -.02em; }
.creative-stage-head .eyebrow { font-size: 11px; }
.creative-model-notice { width: min(880px,86%); margin: 4px auto 32px; padding: 22px 28px; gap: 24px; }
.creative-model-notice strong { font-size: 15px; }
.creative-model-notice p { font-size: 11px; line-height: 1.75; }
.notice-orbit { width: 46px; height: 46px; flex-basis: 46px; border-width: 7px; }
.creative-history-feed { padding-inline: max(20px,calc((100% - 1040px)/2)); }
.creative-history-empty { min-height: 300px; }
.creative-history-empty > span { font-size: 38px; }
.creative-history-empty strong { font-size: 13px; }
.creative-history-empty p { font-size: 10px; }
.creative-dock {
  display: grid;
  grid-template-columns: 220px minmax(0,1fr);
  grid-template-areas: "references prompt" "controls controls";
  column-gap: 18px;
  row-gap: 14px;
  width: min(1180px,calc(100% - 24px));
  padding: 18px;
}
.creative-dock .creative-reference-strip {
  grid-area: references;
  float: none;
  display: grid;
  grid-template-columns: 66px 66px minmax(66px,1fr);
  width: auto;
  margin: 0;
  gap: 8px;
}
.creative-dock .creative-reference-strip .creative-reference-tile,
.creative-dock .creative-reference-strip .creative-reference-preview { height: 92px; min-height: 92px; }
.creative-dock .creative-reference-strip .creative-reference-preview > img,
.creative-dock .creative-reference-strip .creative-reference-preview > video { height: 92px; }
.creative-dock .creative-prompt-label { grid-area: prompt; min-width: 0; }
.creative-dock .creative-prompt-label textarea {
  width: 100%;
  min-height: 92px;
  height: 92px;
  padding: 13px 4px;
  font-size: 12px;
  line-height: 1.7;
}
.creative-dock-controls {
  grid-area: controls;
  clear: none;
  display: flex;
  gap: 9px;
  padding-top: 14px;
}
.creative-dock-controls select,
.creative-dock-controls .select-only-label select {
  flex: 1 1 108px;
  min-width: 96px;
  height: 40px;
  padding-inline: 11px 28px;
  font-size: 10px;
}
.creative-dock-controls select:first-child { flex-grow: 1.35; }
.dock-icon-button { min-width: 80px; height: 40px; margin-left: 0; font-size: 10px; }
.creative-send-button { width: 44px; height: 44px; flex-basis: 44px; }
.creative-result-count { right: 44px; bottom: 226px; font-size: 10px; }
.creative-history-copy p { font-size: 12px; }
.creative-history-actions button, .creative-history-actions a { font-size: 10px; }

.creative-view-open [data-view-panel="chat"].active {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  gap: 24px;
  height: 100vh;
  margin: -20px;
  padding: 30px 38px 28px;
  overflow: hidden;
  background: #101113;
}
[data-view-panel="chat"] .creative-page-head { margin: 0; padding: 0 2px; align-items: center; }
[data-view-panel="chat"] .creative-page-head h2 { margin-top: 6px; font-size: 24px; }
[data-view-panel="chat"] .creative-page-head p { max-width: 760px; font-size: 11px; line-height: 1.7; }
[data-view-panel="chat"] .creative-page-head .secondary-button { min-height: 38px; padding-inline: 15px; font-size: 11px; }
.chat-page-layout { grid-template-columns: 260px minmax(0,1fr); gap: 22px; min-height: 0; height: 100%; }
.chat-context-panel { min-height: 0; padding: 20px; }
.chat-context-panel .panel-heading { margin: -20px -20px 16px; padding: 18px 20px; }
.chat-context-panel .panel-heading h3 { font-size: 14px; }
.chat-context-panel .panel-heading p { font-size: 10px; }
.chat-context-panel .switchline { padding-block: 13px; }
.chat-context-panel .switchline span { font-size: 11px; }
.chat-context-panel .switchline small { margin-top: 3px; font-size: 9px; line-height: 1.45; }
.chat-context-summary { margin: 18px 0; padding: 13px; font-size: 10px; line-height: 1.65; }
.chat-context-panel > button { min-height: 40px; font-size: 11px; }
.chat-page-panel { min-height: 0; height: 100%; grid-template-rows: minmax(0,1fr) auto; }
.chat-page-messages { padding: 34px 38px; gap: 22px; }
.chat-page-empty > span { font-size: 34px; }
.chat-page-empty strong { font-size: 13px; }
.chat-page-empty p { font-size: 10px; }
.chat-page-message { padding: 15px 18px; font-size: 11px; line-height: 1.7; }
.chat-page-form { padding: 16px 18px; }
.chat-page-form textarea { min-height: 74px; max-height: 150px; padding: 14px 16px; font-size: 11px; resize: vertical; }
.chat-page-form button { min-height: 38px; font-size: 10px; }

/* Shared shell for image, video and chat. Keep the application's primary
   navigation visible; only the model catalogue inside the workbench is hidden. */
.creative-view-open .main-column { grid-column: 2; }
.creative-workbench { display: grid; grid-template-columns: 244px minmax(0,1fr); height: 100%; }
.creative-workbench > .model-catalog { display: grid; }
.creative-stage {
  grid-template-rows: auto minmax(0,1fr) auto;
  padding: 26px 118px 22px;
  overflow: hidden;
}
.creative-stage > .creative-stage-head { display: none; }
.creative-model-notice {
  align-self: start;
  display: flex;
  flex-direction: column;
  width: min(840px,72vw);
  max-width: none;
  margin: 0 auto 24px;
  padding: 0;
  gap: 68px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.creative-model-notice > .notice-orbit { width: 66px; height: 66px; flex-basis: 66px; margin: 2px auto 0; border-width: 9px; }
.creative-model-notice > div {
  width: 100%;
  padding: 20px 26px;
  border: 1px solid rgba(87,212,235,.28);
  border-radius: 14px;
  background: #1c1e22;
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.creative-model-notice strong { font-size: 13px; }
.creative-model-notice p { margin-top: 7px; color: #c4c8ce; font-size: 11px; line-height: 1.8; }
.creative-model-notice .notice-orbit.video { width: 58px; height: 58px; flex-basis: 58px; border-width: 8px; }
.notice-orbit.chat { border-color: #57d4eb; transform: rotate(30deg); }
.creative-history-feed {
  align-self: stretch;
  width: min(1120px,100%);
  margin: 0 auto;
  padding: 0 20px 26px;
}
.creative-history-empty { min-height: 100%; }
.creative-dock {
  position: relative;
  grid-template-columns: 92px minmax(0,1fr);
  width: min(1540px,100%);
  min-height: 202px;
  padding: 20px 22px 16px;
  border-radius: 18px;
}
.creative-dock .creative-reference-strip {
  grid-template-columns: 84px;
  align-content: start;
  width: 84px;
}
.creative-dock .creative-reference-strip > :not(:first-child) { display: none; }
.creative-dock .creative-reference-strip .creative-reference-tile { width: 84px; height: 112px; min-height: 112px; border-style: dashed; transform: rotate(-6deg); }
.creative-dock .creative-reference-strip .creative-reference-tile strong { font-size: 10px; }
.creative-dock .creative-prompt-label textarea { min-height: 112px; height: 112px; padding: 8px 10px; color: #d9dce1; font-size: 11px; }
.creative-dock-controls { padding-top: 14px; }
.creative-dock-controls select,
.creative-dock-controls .select-only-label select { height: 38px; border: 0; background: #272a30; }
.creative-tool-rail {
  position: absolute;
  bottom: 22px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid #2d3036;
  border-radius: 22px;
  background: rgba(31,33,37,.97);
  box-shadow: 0 16px 44px rgba(0,0,0,.32);
}
.creative-tool-rail.left { left: 28px; }
.creative-tool-rail.right { right: 28px; }
.creative-tool-rail button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #34373d;
  border-radius: 50%;
  color: #c4c8ce;
  background: #24272c;
  font-size: 15px;
  cursor: pointer;
}
.creative-tool-rail button:hover { color: #71eafa; border-color: rgba(87,212,235,.46); background: #183239; }
.creative-result-count { display: none; }

.creative-view-open [data-view-panel="chat"].active {
  position: relative;
  grid-template-rows: auto minmax(0,1fr);
  gap: 22px;
  padding: 26px 118px 22px;
}
[data-view-panel="chat"] > .creative-model-notice { width: min(840px,72vw); margin-bottom: 0; }
[data-view-panel="chat"] .chat-page-layout { display: block; min-height: 0; height: 100%; }
[data-view-panel="chat"] .chat-context-panel {
  position: absolute;
  left: 88px;
  bottom: 92px;
  z-index: 12;
  display: none;
  width: 270px;
  max-height: min(560px,70vh);
  overflow: auto;
  box-shadow: 0 22px 70px rgba(0,0,0,.5);
}
[data-view-panel="chat"] .chat-context-panel.open { display: block; }
[data-view-panel="chat"] .chat-page-panel { height: 100%; border: 0; background: transparent; box-shadow: none; }
[data-view-panel="chat"] .chat-page-messages { width: min(1120px,100%); margin: 0 auto; padding: 10px 24px 26px; }
[data-view-panel="chat"] .chat-page-form {
  width: min(1540px,100%);
  margin: 0 auto;
  padding: 18px 20px 15px;
  border: 1px solid #2d3036;
  border-radius: 18px;
  background: rgba(31,33,37,.98);
  box-shadow: 0 20px 60px rgba(0,0,0,.38);
}
[data-view-panel="chat"] .chat-page-form textarea { min-height: 108px; height: 108px; border: 0; background: transparent; resize: none; }
[data-view-panel="chat"] .chat-page-form > div { padding-top: 12px; border-top: 1px solid #2a2c31; }

/* Semantic icon controls. Every symbol has one action and one accessible title. */
.model-catalog-mark .ui-icon,
.model-search .ui-icon { width: 20px; height: 20px; }
.model-search > span { display: grid; place-items: center; color: #8f969f; }
.creative-reference-tile > span { display: grid; place-items: center; }
.creative-reference-tile .ui-icon { width: 22px; height: 22px; }
.creative-history-empty > span .ui-icon { width: 38px; height: 38px; }
.creative-tool-rail .ui-icon { width: 18px; height: 18px; }
.creative-dock-controls .dock-select {
  display: flex;
  flex: 1 1 126px;
  align-items: center;
  min-width: 112px;
  height: 40px;
  padding-left: 10px;
  border: 1px solid #30333a;
  border-radius: 9px;
  color: #9ba2aa;
  background: #272a30;
}
.creative-dock-controls .dock-select:first-child { flex-grow: 1.4; }
.creative-dock-controls .dock-select.compact { flex: .72 1 96px; min-width: 88px; }
.creative-dock-controls .dock-select > .ui-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.creative-dock-controls .dock-select select,
.creative-dock-controls .dock-select select:first-child {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 27px 0 8px;
  border: 0;
  background: transparent;
}
.dock-icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dock-icon-button .ui-icon { width: 16px; height: 16px; }
.creative-send-button { display: grid; place-items: center; }
.creative-send-button .ui-icon { width: 23px; height: 23px; stroke-width: 2.1; }
.chat-page-form button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.chat-page-form button .ui-icon { width: 16px; height: 16px; }
.chat-send-button { min-width: 86px; }
.chat-page-message.pending { opacity: .78; }
.chat-typing { display: inline-flex; align-items: center; gap: 5px; min-height: 18px; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: chat-typing 1.1s infinite ease-in-out; }
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-typing { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* The three generative destinations are one visual group, but remain direct
   navigation targets with their own routes and keyboard focus. */
.creative-nav-group {
  display: grid;
  gap: 2px;
  margin: 5px 0 8px;
  padding: 7px 5px 6px;
  border: 1px solid rgba(87,212,235,.1);
  border-radius: 13px;
  background: rgba(87,212,235,.025);
}
.creative-nav-group-title { padding: 0 10px 4px; color: #59616b; font-size: 9px; letter-spacing: .08em; }
.creative-nav-group .nav-item { margin: 0; }

/* Supplied provider artwork is the single source of truth for the three
   creative destinations. The same asset is reused in navigation, catalogues,
   hero identity, empty states and the active-model chip. */
.brand-model-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0;
  border: 0;
  line-height: 0;
}
.brand-model-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-model-icon.image,
.brand-model-icon.video { background: #111214; }
.brand-model-icon.chat { background: #fff; }
.nav-item > .nav-model-icon:first-child {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  border-radius: 7px;
  box-shadow: 0 0 12px rgba(54,207,190,.12);
}
.catalog-model-icon {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.26);
}
.model-list-item > .model-avatar.brand-model-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 0;
  box-shadow: 0 7px 18px rgba(0,0,0,.24);
}
.brand-model-icon.model-hero-icon {
  width: 82px;
  height: 82px;
  flex-basis: 82px;
  margin: 0 auto;
  border: 0;
  border-radius: 20px;
  background: transparent;
  filter: drop-shadow(0 0 18px rgba(50,201,166,.2));
}
.brand-model-icon.model-hero-icon.chat {
  border-radius: 50%;
  filter: drop-shadow(0 0 18px rgba(70,126,234,.18));
}
.dock-model-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(87,212,235,.12);
}
.empty-model-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border-radius: 15px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.empty-model-icon.chat { border-radius: 50%; }
.message-model-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.chat-page-message.assistant > strong {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Active model identity follows the selection made in the left catalogue. */
.model-catalog { grid-template-rows: auto auto minmax(0,1fr) auto; }
.model-hero-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  margin: 2px auto 0;
  border: 1px solid rgba(72,219,190,.22);
  border-radius: 50%;
  color: #34d6b1;
  background: radial-gradient(circle,rgba(50,201,166,.15),transparent 66%);
  filter: drop-shadow(0 0 15px rgba(50,201,166,.18));
}
.model-hero-icon.video { color: #57d4eb; border-color: rgba(87,212,235,.24); background: radial-gradient(circle,rgba(87,212,235,.14),transparent 66%); }
.model-hero-icon .ui-icon { width: 38px; height: 38px; stroke-width: 1.5; }
.dock-active-model {
  display: inline-flex;
  flex: 1.2 1 170px;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(87,212,235,.18);
  border-radius: 9px;
  color: #dfe5e8;
  background: #272a30;
  white-space: nowrap;
}
.dock-active-model .ui-icon { width: 17px; height: 17px; color: #62dcec; }
.dock-active-model strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; }

/* Dock parameters use in-app menus instead of the operating system's
   transient select popup. */
.creative-dock { z-index: 20; }
.creative-dock-controls { overflow: visible; }
.creative-dock-controls .custom-dock-select {
  position: relative;
  padding: 0;
  overflow: visible;
}
.dock-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.dock-select-trigger {
  display: grid;
  grid-template-columns: 17px minmax(0,1fr) 15px;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: #d8dce2;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.dock-select-trigger:hover,
.dock-select-trigger[aria-expanded="true"] { color: #f4fcff; background: #30343a; }
.dock-select-trigger .ui-icon { width: 16px; height: 16px; color: #aeb6c2; }
.dock-select-trigger .ui-icon:last-child { width: 13px; height: 13px; transition: transform .16s ease; }
.dock-select-trigger[aria-expanded="true"] .ui-icon:last-child { transform: rotate(180deg); }
.dock-select-value { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dock-select-popover {
  position: absolute;
  bottom: calc(100% + 12px);
  z-index: 80;
  width: 286px;
  max-width: min(286px,calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid #30343b;
  border-radius: 15px;
  background: #1d1f23;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  animation: dock-menu-in .14s ease-out;
}
@keyframes dock-menu-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.dock-select-popover > header { padding: 18px 18px 14px; border-bottom: 1px solid #303238; }
.dock-select-popover > header strong { color: #f1f3f6; font-size: 14px; }
.dock-select-popover > header p { margin: 6px 0 0; color: #868d97; font-size: 10px; line-height: 1.55; }
.dock-select-options { display: grid; gap: 3px; max-height: min(360px,55vh); overflow: auto; padding: 10px; }
.dock-select-options button {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) 18px;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  color: #e1e4e8;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.dock-select-options button:hover { background: #282b31; }
.dock-select-options button.active { color: #f6fdff; background: #30343a; }
.dock-select-options button:disabled { opacity: .32; cursor: not-allowed; }
.dock-select-options button .ui-icon { width: 17px; height: 17px; }
.dock-select-options button i { display: grid; place-items: center; opacity: 0; }
.dock-select-options button.active i { opacity: 1; }

/* Project-scoped conversation navigation. */
.chat-workbench > .model-catalog { grid-template-rows: auto auto minmax(88px,1fr) auto auto auto auto; }
.chat-new-session-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 43px;
  margin-bottom: 14px;
  border: 1px solid rgba(87,212,235,.42);
  border-radius: 12px;
  color: #071519;
  background: linear-gradient(135deg,#69e6f3,#45c7dc);
  box-shadow: 0 10px 26px rgba(47,190,212,.18);
  cursor: pointer;
}
.chat-new-session-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.chat-new-session-button .ui-icon { width: 18px; height: 18px; stroke-width: 2.2; }
.chat-session-section { display: grid; grid-template-rows: auto minmax(0,1fr); min-height: 0; margin-bottom: 16px; }
.chat-session-heading { display: grid; gap: 2px; padding: 0 4px 8px; }
.chat-session-heading strong,
.chat-model-heading strong { color: #bec4cc; font-size: 10px; }
.chat-session-heading small { color: #5f6670; font-size: 8px; }
.chat-session-list { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 5px; padding-right: 2px; }
.chat-session-item {
  display: grid;
  grid-template-columns: 25px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #aeb4bc;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.chat-session-item:hover { background: #1d2024; }
.chat-session-item.active { border-color: rgba(87,212,235,.26); color: #eafcff; background: #173039; }
.chat-session-item > span:first-child { display: grid; place-items: center; }
.chat-session-item .ui-icon { width: 16px; height: 16px; }
.chat-session-item > span:last-child { min-width: 0; display: grid; gap: 3px; }
.chat-session-item strong,
.chat-session-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-session-item strong { font-size: 10px; }
.chat-session-item small { color: #717984; font-size: 8px; }
.chat-session-row { display: flex; align-items: center; gap: 3px; min-width: 0; }
.creative-generation-status { grid-column: 1 / -1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface); }
.creative-video-pending { display: grid; gap: 8px; padding: 18px; border: 1px solid rgba(87,212,235,.35); border-radius: 12px; background: #17242b; }.creative-video-pending p { margin: 0; }.creative-video-pending small { color: var(--muted); }.creative-video-pending > div { display: flex; gap: 8px; }
.chat-session-row .chat-session-item { min-width: 0; }
.chat-session-delete { flex: 0 0 24px; height: 26px; border: 0; border-radius: 6px; color: #aeb4bc; background: transparent; cursor: pointer; }
.chat-session-delete:hover { color: #f87171; background: #382126; }
.chat-attachment-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-attachment-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .82rem; }
.assistant-reference { display: grid; gap: 7px; margin-top: 12px; }
.assistant-doc-picker { display: grid; gap: 9px; max-height: 360px; overflow: auto; }
.assistant-doc-picker label { display: flex; gap: 8px; align-items: center; }
.script-preview-content { max-height: 60vh; overflow: auto; line-height: 1.8; white-space: normal; }
.announcement-history { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.announcement-history h4 { margin: 0 0 10px; }
.announcement-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.announcement-row > div { display: grid; gap: 5px; min-width: 0; }
.announcement-row strong { overflow-wrap: anywhere; font-weight: 500; }
.announcement-row small { color: var(--muted); }
.api-manual-model { margin: 8px 0; color: var(--muted); font-size: .82rem; }
.api-manual-model input { width: 100%; margin-top: 8px; }
.api-model-catalog .catalog-model-chip { display: inline-flex; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--ink); font-size: .78rem; }
.billing-dashboard-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 6px 0 18px; }
.billing-dashboard-head h2 { margin: 0 0 4px; }
.billing-dashboard-head p { margin: 0; color: var(--muted); }
.billing-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }
.billing-stat { display: flex; gap: 14px; min-height: 118px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.billing-stat-icon { display: grid; flex: 0 0 42px; place-items: center; height: 42px; border-radius: 10px; color: #50d6ca; background: #15342f; }
.billing-stat-icon.blue { color: #60a5fa; background: #192945; }.billing-stat-icon.purple { color: #c084fc; background: #30203f; }.billing-stat-icon.amber { color: #fbbf24; background: #3b2a16; }.billing-stat-icon.indigo { color: #818cf8; background: #222341; }.billing-stat-icon.coral { color: #fb7185; background: #3b1e2a; }
.billing-stat > div { display: grid; gap: 4px; min-width: 0; }.billing-stat small,.billing-stat span:last-child { color: var(--muted); }.billing-stat strong { color: var(--ink); font-size: 1.35rem; overflow-wrap: anywhere; }
.billing-dashboard-filters { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); }
.billing-dashboard-filters label { display: flex; align-items: center; gap: 8px; }.billing-dashboard-filters select { width: auto; }
.billing-dashboard-charts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }.billing-dashboard-charts .panel { min-width: 0; padding: 18px; }.billing-dashboard-charts h3 { margin: 0 0 18px; }
.billing-model-layout { display: grid; grid-template-columns: 160px minmax(0,1fr); align-items: center; gap: 18px; }.billing-donut { display: grid; place-items: center; width: 160px; height: 160px; border-radius: 50%; }.billing-donut > span { display: grid; place-items: center; align-content: center; width: 108px; height: 108px; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1.1rem; font-weight: 700; }.billing-donut small { font-size: .7rem; color: var(--muted); font-weight: 400; }
.billing-model-table { min-width: 0; overflow: auto; }.billing-model-row { display: grid; grid-template-columns: minmax(130px,1fr) 55px 95px 85px; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .8rem; }.billing-model-row.head { color: var(--muted); }.billing-model-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.billing-model-row i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.billing-legend { display: flex; gap: 16px; color: var(--muted); font-size: .82rem; }.billing-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; }.legend-requests { background: #275f93; }.legend-tokens { background: #44d1e8; }.billing-usage-trend svg,#billing-usage-trend svg { display: block; width: 100%; }.billing-trend-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; }.quota-balance-value { display: flex; align-items: baseline; gap: 8px; margin: 14px 0; }.quota-balance-value strong { color: var(--primary); font-size: 1.8rem; }.billing-settings-layout { grid-template-columns: minmax(0,1fr); }.billing-settings-layout .quota-panel { width: 100%; }
@media (max-width: 1200px) { .billing-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }.billing-dashboard-charts { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .billing-stats { grid-template-columns: 1fr; }.billing-model-layout { grid-template-columns: 1fr; }.billing-dashboard-filters { flex-wrap: wrap; gap: 8px; } }
.chat-model-heading { padding: 0 4px 8px; }
.chat-workbench .model-search { margin-bottom: 8px; }
.chat-workbench .model-list { flex: 0 0 auto; overflow: visible; }

/* Image generations are conversation-like records: request, parameters,
   output, actions and timestamp are kept inside one readable window. */
#image-studio-results { gap: 0; }
.image-generation-record {
  display: grid;
  gap: 16px;
  width: 100%;
  padding: 22px 4px 28px;
  border-bottom: 1px dashed #2b2e33;
}
.generation-record-head { display: flex; align-items: flex-start; gap: 18px; min-width: 0; }
.generation-record-reference {
  position: relative;
  width: 128px;
  height: 64px;
  flex: 0 0 128px;
  margin: 5px 2px 0 7px;
}
.generation-record-reference span,
.generation-record-reference img {
  position: absolute;
  top: 0;
  left: 26px;
  width: 70px;
  height: 58px;
  border: 2px solid #d7d9dc;
  border-radius: 3px;
  background: #25282d;
  box-shadow: 0 5px 16px rgba(0,0,0,.32);
  object-fit: cover;
}
.generation-record-reference span:first-child { transform: translateX(-22px) rotate(-8deg); opacity: .65; }
.generation-record-reference span:nth-child(2) { transform: translateX(22px) rotate(8deg); opacity: .78; }
.generation-record-reference img { z-index: 2; }
.generation-record-copy { display: grid; gap: 10px; min-width: 0; padding-top: 1px; }
.generation-record-copy p { max-width: 980px; margin: 0; color: #e0e3e7; font-size: 13px; line-height: 1.75; white-space: pre-wrap; }
.generation-record-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.generation-record-result { display: grid; place-items: center; width: min(640px,100%); min-height: 180px; overflow: hidden; border-radius: 10px; background: #090a0c; }
.generation-record-preview { position: relative; display: grid; place-items: center; width: 100%; min-height: 180px; padding: 8px; border: 0; color: #eef9fc; background: transparent; cursor: zoom-in; }
.generation-record-preview img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(68vh,640px); border-radius: 6px; object-fit: contain; background: #0c0d0f; }
.generation-record-preview > span { position: absolute; right: 16px; bottom: 16px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: rgba(10,15,20,.78); font-size: 11px; pointer-events: none; }
.generation-record-preview:hover > span, .generation-record-preview:focus-visible > span { background: rgba(20,47,58,.94); }
.generation-record-preview:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.generation-record-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; min-width: 0; }
.generation-record-footer time { margin-left: auto; color: #666b73; font-size: 10px; white-space: nowrap; }
.image-generation-record .creative-history-actions { flex-wrap: wrap; }
.image-generation-record .creative-history-actions button { display: inline-flex; align-items: center; gap: 7px; }
.image-generation-record .creative-history-actions .ui-icon { width: 15px; height: 15px; }
.image-generation-record .creative-history-actions button[data-studio-image-action="delete"]:hover { color: #ff9b9b; border-color: rgba(255,110,110,.3); background: rgba(105,36,36,.25); }

/* Chat keeps the same left model selector used by image/video. */
.creative-view-open [data-view-panel="chat"].active { display: block; height: 100vh; margin: -20px; padding: 0; overflow: hidden; }
.chat-workbench { height: 100%; }
.chat-creative-main {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0,1fr);
  gap: 0;
  min-width: 0;
  height: 100%;
  padding: 22px 96px 20px;
  overflow: hidden;
  background: #101113;
}
.chat-creative-main .chat-page-layout { display: block; min-height: 0; height: 100%; }
.chat-creative-main .chat-page-panel { height: 100%; border: 0; background: transparent; box-shadow: none; }
.chat-creative-main .chat-page-messages { width: min(1120px,100%); margin: 0 auto; padding: 10px 24px 26px; }
.chat-creative-main .chat-context-panel { left: 88px; bottom: 92px; }
.chat-creative-main .creative-tool-rail.left { left: 28px; }
.chat-creative-main .creative-tool-rail.right { right: 28px; }

@media (max-width: 1050px) {
  .creative-view-open .main-column { grid-column: 1 / -1; }
  .creative-workbench { grid-template-columns: 220px minmax(0,1fr); }
  .creative-stage { padding-inline: 18px; }
  .creative-model-notice { margin-bottom: 14px; }
  .creative-reference-strip { width: 176px; grid-template-columns: 55px 55px 56px; }
  .creative-dock .creative-prompt-label textarea { width: calc(100% - 190px); }
  .creative-studio-grid { grid-template-columns: 1fr; }
  .chat-page-layout { grid-template-columns: 1fr; }
  .chat-context-panel { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .chat-context-panel .panel-heading, .chat-context-summary, .chat-context-panel > button { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .creative-workspace.active { margin: -12px; }
  .creative-workbench { grid-template-columns: 1fr; grid-template-rows: 176px minmax(0,1fr); }
  .model-catalog { grid-template-rows: auto auto minmax(0,1fr); padding: 10px 12px; border-right: 0; border-bottom: 1px solid #292b30; }
  .model-catalog-head, .model-account { display: none; }
  .model-catalog-tabs { margin-bottom: 7px; }
  .model-search { min-height: 34px; margin-bottom: 7px; }
  .model-list { flex-direction: row; overflow-x: auto; }
  .model-list-item { min-width: 230px; padding-block: 7px; }
  .creative-stage { padding: 10px; }
  .creative-stage-head { padding-bottom: 8px; }
  .creative-stage-head .secondary-button, .creative-stage-head .status { display: none; }
  .creative-model-notice { display: none; }
  .creative-history-feed { padding-inline: 4px; }
  .creative-dock { width: 100%; padding: 10px; border-radius: 14px; }
  .creative-reference-strip { float: none; width: 100%; grid-template-columns: 62px 62px minmax(0,1fr); margin: 0 0 6px; }
  .creative-dock .creative-prompt-label textarea { width: 100%; }
  .creative-dock-controls select { min-width: 100px; }
  .dock-icon-button { margin-left: 0; }
  .creative-result-count { display: none; }
  .creative-page-head { align-items: flex-start; flex-direction: column; }
  .creative-reference-row { grid-template-columns: 1fr 1fr; }
  .creative-reference-preview { grid-column: 1 / -1; }
  .creative-settings-grid { grid-template-columns: 1fr 1fr; }
  .creative-result-card .generated-grid { grid-template-columns: 1fr; }
  .chat-context-panel { display: block; }
}

@media (max-width: 1050px) {
  .creative-dock .creative-prompt-label textarea { width: 100%; }
  .creative-view-open [data-view-panel="chat"].active { padding-inline: 78px; }
  [data-view-panel="chat"] .chat-page-form,
  .creative-dock { width: 100%; }
  .chat-creative-main { padding-inline: 72px; }
}
@media (max-width: 720px) {
  .creative-workbench { display: grid; grid-template-columns: 1fr; grid-template-rows: 176px minmax(0,1fr); height: 100%; }
  .creative-workbench > .model-catalog { display: grid; }
  .creative-stage { padding: 16px 64px 14px; }
  .creative-model-notice { display: flex; width: min(92vw,680px); gap: 24px; margin-bottom: 12px; }
  .creative-model-notice > .notice-orbit { width: 44px; height: 44px; flex-basis: 44px; border-width: 6px; }
  .creative-model-notice > div { padding: 12px 15px; }
  .creative-model-notice p { font-size: 9px; }
  .creative-dock { grid-template-columns: 64px minmax(0,1fr); width: 100%; min-height: 170px; padding: 12px; }
  .creative-dock .creative-reference-strip { width: 58px; grid-template-columns: 58px; }
  .creative-dock .creative-reference-strip .creative-reference-tile { width: 58px; height: 84px; min-height: 84px; }
  .creative-dock .creative-prompt-label textarea { min-height: 84px; height: 84px; }
  .creative-tool-rail { bottom: 14px; padding: 5px; }
  .creative-tool-rail.left { left: 8px; }
  .creative-tool-rail.right { right: 8px; }
  .creative-tool-rail button { width: 32px; height: 32px; }
  .creative-view-open [data-view-panel="chat"].active { padding: 16px 58px 14px; }
  [data-view-panel="chat"] .chat-page-form { width: 100%; }
  [data-view-panel="chat"] .chat-context-panel { left: 52px; bottom: 70px; width: min(260px,calc(100vw - 104px)); }
  .chat-creative-main { padding: 16px 58px 14px; }
  .chat-workbench { grid-template-rows: 232px minmax(0,1fr); }
  .chat-workbench > .model-catalog { grid-template-rows: auto minmax(70px,1fr) auto auto auto; }
  .chat-workbench .chat-new-session-button { margin-bottom: 8px; }
  .chat-workbench .chat-session-section { margin-bottom: 8px; }
  .chat-workbench .model-list { overflow-x: auto; }
  .chat-workbench .model-list-item { min-width: 230px; }
  .dock-select-popover { position: fixed; right: 14px !important; bottom: 82px; left: 14px !important; width: auto; max-width: none; }
  .creative-dock-controls .dock-select { min-width: 104px; }
  .generation-record-head { gap: 11px; }
  .generation-record-reference { width: 88px; height: 52px; flex-basis: 88px; margin-left: 0; }
  .generation-record-reference span,
  .generation-record-reference img { left: 18px; width: 54px; height: 46px; }
  .generation-record-reference span:first-child { transform: translateX(-14px) rotate(-7deg); }
  .generation-record-reference span:nth-child(2) { transform: translateX(14px) rotate(7deg); }
  .generation-record-footer { align-items: flex-start; flex-direction: column; }
  .generation-record-footer time { margin-left: 0; }
}

.toast { color: var(--ink); background: #24262a; border-color: var(--line); box-shadow: 0 18px 48px rgba(0,0,0,.35); }
dialog, dialog form { color: var(--ink); background: #202124; }
dialog { border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0,0,0,.5); }
dialog::backdrop { background: rgba(5,6,8,.72); }
.dialog-close { color: var(--ink); background: #292a2e; }
.dialog-field input, .dialog-field select { color: var(--ink); background: #17181b; border-color: var(--line); }

.remix-intro { color: var(--ink); background: linear-gradient(115deg,#25272a,#1b2527); border: 1px solid var(--line); }
.remix-intro p, .remix-source-strip > div span, .remix-source-strip label,
.remix-stage-head p, .remix-depth-video-options small, .remix-stage-bottom span,
.remix-attachment > small, .remix-disclosure, .remix-result-footer,
.remix-scene-dialog-head p, .remix-scene-dialog-actions span { color: var(--muted); }
.remix-eyebrow, .remix-stage-number { color: var(--primary); }
.remix-stage-number { background: var(--primary-soft); }
.remix-source-strip select, .remix-controls select, .remix-submit input,
.remix-depth-video-options select, .remix-building-select select, .remix-form textarea {
  color: var(--ink); background: #17181b; border-color: var(--line);
}
.remix-depth-tabs { background: #17181b; }
.remix-depth-tabs button { color: var(--muted); }
.remix-depth-tabs button.active { color: #dffbff; background: #292a2e; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
.remix-depth-video-options, .remix-form > label, .remix-submit label,
.remix-controls label, .remix-building-select { color: #b3b6bc; }
.remix-attachment { color: var(--ink); background: #191a1d; border-color: var(--line); }
.remix-attachment strong { color: var(--ink); }
.remix-attachment-preview { color: var(--muted); }
.remix-scene-dialog { color: var(--ink); background: #202124; border-color: var(--line); box-shadow: 0 24px 80px rgba(0,0,0,.58); }
.remix-scene-dialog::backdrop { background: rgba(5,6,8,.76); }

@media (max-width: 480px) {
  .auth-screen { background: var(--canvas); }
}
.post-mode-switch { display: flex; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #1d2024; }
.post-mode-switch button { padding: 7px 12px; border: 1px solid transparent; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; }
.post-mode-switch button.active { color: #b8f5ff; border-color: #477483; background: #203840; }
.post-remix-mode #legacy-post-controls { display: none; }
.post-edit-mode > :not(.post-mode-switch):not(#legacy-post-controls) { display: none; }
.post-edit-mode #legacy-post-controls { display: grid; gap: 12px; }
.post-edit-mode #post-connected-assets,
.post-edit-mode .post-grid { display: none; }
.post-edit-mode .timeline-panel { margin: 0; }

/* The post page has one focused editing surface: assets, preview, inspector, timeline. */
.editor-top-tools {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #171a1e;
  overflow-x: auto;
}
.editor-tool-group { display: flex; align-items: stretch; gap: 4px; min-width: max-content; }
.editor-tool-button { display: grid; justify-items: center; gap: 4px; min-width: 68px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }
.editor-tool-button:hover { color: var(--ink); background: #23282d; }
.editor-tool-button.active { color: #d9fbff; border-color: #3e7480; background: #203941; }
.editor-tool-button .ui-icon { width: 18px; height: 18px; }
.editor-tool-button strong { font-size: 11px; font-weight: 600; white-space: nowrap; }
.editor-top-actions { display: flex; align-items: center; gap: 8px; min-width: max-content; margin-left: auto; }
.editor-save-state { color: #86cfae; font-size: 11px; white-space: nowrap; }
.editor-tool-workspace { display: grid; grid-template-columns: minmax(260px, 22%) minmax(520px, 1fr) minmax(300px, 25%); min-height: 560px; border: 1px solid var(--line); border-radius: 12px; background: #111316; overflow: hidden; }
.editor-media-panel, .editor-inspector-panel { min-width: 0; background: #171a1e; }
.editor-media-panel { border-right: 1px solid var(--line); }
.editor-inspector-panel { border-left: 1px solid var(--line); }
.editor-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--ink); }
.editor-panel-title > span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.editor-resource-hint { padding: 10px 12px 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.editor-import-tile { display: grid; justify-items: center; gap: 4px; width: calc(100% - 24px); margin: 10px 12px; padding: 15px 8px; border: 1px dashed #45616a; border-radius: 9px; color: #c8f6fb; background: #1a2b31; cursor: pointer; }
.editor-import-tile:hover { border-color: #78d9e3; background: #203a42; }
.editor-import-tile .ui-icon { width: 20px; height: 20px; }
.editor-import-tile strong { font-size: 12px; }
.editor-import-tile small { color: var(--muted); font-size: 10px; }
.editor-resource-list { display: grid; gap: 8px; max-height: 420px; padding: 0 12px 16px; overflow: auto; }
.editor-empty-resource { padding: 20px 8px; color: var(--muted); font-size: 11px; text-align: center; }
.editor-resource-symbol { display: grid; place-items: center; width: 42px; height: 32px; border-radius: 4px; color: #bceff5; background: #24373d; font-weight: 700; }
.editor-resource-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 54px; padding: 7px; border: 1px solid transparent; border-radius: 7px; color: var(--ink); background: #1d2126; cursor: pointer; text-align: left; }
.editor-resource-card:hover, .editor-resource-card.selected { border-color: #477783; background: #213238; }
.editor-resource-card img, .editor-resource-card video { width: 58px; height: 42px; border-radius: 4px; object-fit: cover; background: #0b0d0f; }
.editor-resource-card strong, .editor-resource-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-resource-card strong { font-size: 11px; }
.editor-resource-card small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.editor-preview-column { display: grid; grid-template-rows: 46px minmax(0, 1fr) 44px; min-width: 0; background: #0b0d10; }
.editor-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--ink); }
.editor-preview-controls { display: flex; align-items: center; gap: 6px; }
.editor-preview-controls label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.editor-preview-controls select { width: 70px; padding: 5px 6px; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; background: #191c20; }
.editor-preview-host { display: grid; place-items: center; min-height: 390px; padding: 24px; background: radial-gradient(circle at 50% 42%, #20272d 0, #0b0d10 68%); }
.editor-preview-frame { position: relative; display: grid; place-items: center; width: min(100%, 560px); height: 100%; max-height: 360px; aspect-ratio: 16 / 9; border: 1px solid #35434a; border-radius: 6px; background: #050607; overflow: hidden; transition: aspect-ratio .2s ease; }
.editor-preview-frame img, .editor-preview-frame video { width: 100%; height: 100%; object-fit: contain; }
.editor-preview-placeholder { max-width: 220px; color: #70828b; font-size: 12px; text-align: center; line-height: 1.5; }
.editor-preview-badge { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 5px 8px; border: 1px solid #4f8791; border-radius: 5px; color: #d9fbff; background: rgba(20,48,56,.9); font-size: 10px; }
.editor-applied-state { color: #80d8c0; font-size: 10px; }
.editor-transport { display: grid; grid-template-columns: 34px 48px minmax(100px, 1fr) 48px; align-items: center; gap: 8px; padding: 0 12px; border-top: 1px solid var(--line); color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; }
.editor-transport input[type="range"] { width: 100%; accent-color: #6dd6e2; }
.editor-inspector-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); }
.editor-inspector-tabs button { min-width: 0; padding: 7px 3px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; }
.editor-inspector-tabs button:hover { color: var(--ink); background: #24282d; }
.editor-inspector-tabs button.active { color: #c9f7fb; border-color: #3f707a; background: #20383e; }
.editor-inspector-body { display: grid; align-content: start; gap: 12px; padding: 12px; overflow: auto; }
.editor-inspector-empty { padding: 16px 4px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.editor-inspector-field { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.editor-inspector-field strong { color: var(--ink); font-size: 12px; }
.editor-inspector-field input[type="range"], .editor-inspector-field select { width: 100%; accent-color: #6dd6e2; }
.editor-inspector-field select, .editor-inspector-field input[type="number"] { padding: 7px; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; background: #191c20; }
.editor-inspector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.editor-command-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 9px; background: #171a1e; }
.editor-command-group { display: flex; gap: 4px; }
.editor-command { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; }
.editor-command:hover, .editor-command.active { color: #d9fbff; border-color: #3e7480; background: #203941; }
.editor-command .ui-icon { width: 14px; height: 14px; }
.editor-command strong { font-size: 11px; }
.editor-command-status { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.editor-hint { color: #71838c; }
.post-edit-mode .timeline-panel { padding: 0 12px 12px; border-color: var(--line); background: #111316; }
.post-edit-mode .timeline-panel .panel-heading { min-height: 46px; margin: 0 -12px; padding: 8px 12px; background: #171a1e; }
.post-edit-mode .timeline-panel .panel-heading h3 { font-size: 12px; }
.post-edit-mode .timeline-panel .panel-heading p, .post-edit-mode .timeline-panel .panel-heading small { display: none; }
.post-edit-mode .timeline-panel .button-row { display: none; }
.post-edit-mode .timeline-panel .track { padding: 5px 0; }
.post-edit-mode .timeline-panel .track > b { width: 52px; color: #9eabb2; font-size: 10px; }
.post-edit-mode .timeline-panel .clip-row { min-height: 34px; }
.post-edit-mode .timeline-panel .timeline-clip { min-height: 30px; border-radius: 4px; }
.post-edit-mode .timeline-panel .timeline-ruler { margin-left: 52px; }
.post-edit-mode .timeline-panel .playhead { top: 42px; }
.post-connected-assets { display: grid; gap: 8px; margin: 12px 0; padding: 14px; }
.post-connected-assets p { margin: 0; color: var(--muted); font-size: 12px; }
#post-connected-assets-list { display: flex; flex-wrap: wrap; gap: 8px; }
.post-connected-asset { display: flex; align-items: center; gap: 8px; max-width: 300px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: #171b20; }
.post-connected-asset :is(img,video) { width: 64px; height: 42px; object-fit: contain; background: #090c10; }
.post-connected-asset small { overflow: hidden; max-width: 115px; text-overflow: ellipsis; white-space: nowrap; }
.post-connected-asset button { white-space: nowrap; }
.canvas-post-workspace { display: grid; align-content: start; gap: 10px; padding: 13px; cursor: pointer; }
.canvas-post-heading { display: flex; align-items: center; gap: 9px; }
.canvas-post-heading > span:last-child { display: grid; gap: 2px; }
.canvas-post-heading strong { color: #e4f8ff; font-size: 13px; }
.canvas-post-heading small, .canvas-post-workspace p { color: #91a4b0; font-size: 11px; }
.canvas-post-workspace p { margin: 0; line-height: 1.4; }
.canvas-post-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #456674; border-radius: 8px; color: #6bd9ea; background: #21323d; }
.canvas-post-icon svg { width: 17px; height: 17px; }
.canvas-post-tracks { display: grid; gap: 3px; padding: 7px 8px; border: 1px solid #39454e; border-radius: 7px; background: #151c23; }
.canvas-post-tracks i { height: 5px; border-radius: 3px; background: linear-gradient(90deg, #5dd2e4 0 30%, transparent 30% 34%, #5dd2e4 34% 62%, transparent 62% 66%, #5dd2e4 66%); }
.canvas-post-tracks i:nth-child(2) { width: 78%; background: linear-gradient(90deg, #bc89e8 0 45%, transparent 45% 50%, #bc89e8 50%); }
.canvas-post-tracks i:nth-child(3) { width: 92%; background: #78c5a7; }

@media (max-width: 1100px) {
  .editor-tool-workspace { grid-template-columns: 220px minmax(360px, 1fr); min-height: 520px; }
  .editor-inspector-panel { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; min-height: 180px; }
  .editor-inspector-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .editor-top-tools { display: block; }
  .editor-tool-group { overflow-x: auto; }
  .editor-top-actions { justify-content: flex-end; margin-top: 8px; }
  .editor-tool-workspace { grid-template-columns: 1fr; }
  .editor-media-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .editor-resource-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 180px; }
  .editor-preview-column { min-height: 360px; }
  .editor-command-bar { align-items: flex-start; flex-direction: column; }
  .editor-command-status { width: 100%; justify-content: space-between; }
  .editor-hint { display: none; }
  .post-edit-mode .timeline-panel { overflow-x: auto; }
}

/* Clear image/video creation flow: reference, prompt, parameters, results. */
[data-view-panel="image"] .creative-stage,
[data-view-panel="video"] .creative-stage {
  display: grid;
  grid-template-columns: minmax(340px, 43%) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 16px 20px;
  padding: 22px;
  overflow: hidden;
}
[data-view-panel="image"] .creative-stage > .creative-stage-head,
[data-view-panel="video"] .creative-stage > .creative-stage-head { display: flex; grid-column: 1 / -1; grid-row: 1; padding: 0 0 3px; }
[data-view-panel="image"] .creative-model-notice,
[data-view-panel="video"] .creative-model-notice {
  grid-column: 1; grid-row: 2; display: flex; flex-direction: row;
  align-items: center; width: 100%; min-width: 0; margin: 0; padding: 12px 15px;
  gap: 12px; border: 1px solid #303943; border-radius: 13px; background: #191c20;
}
[data-view-panel="image"] .creative-model-notice > div,
[data-view-panel="video"] .creative-model-notice > div { width: auto; padding: 0; border: 0; background: none; box-shadow: none; }
[data-view-panel="image"] .creative-model-notice p,
[data-view-panel="video"] .creative-model-notice p { margin-top: 3px; font-size: 11px; line-height: 1.5; }
[data-view-panel="image"] .creative-history-feed,
[data-view-panel="video"] .creative-history-feed {
  grid-column: 2; grid-row: 2 / 4; width: 100%; min-height: 0; margin: 0; padding: 18px;
  border: 1px solid #2b3036; border-radius: 16px; background: #16181b;
}
[data-view-panel="image"] .creative-history-section,
[data-view-panel="video"] .creative-history-section {
  grid-column: 2;
  grid-row: 2 / 4;
}
[data-view-panel="image"] .creative-history-empty,
[data-view-panel="video"] .creative-history-empty { min-height: 340px; }
[data-view-panel="image"] .creative-dock,
[data-view-panel="video"] .creative-dock {
  grid-column: 1; grid-row: 3; display: flex; flex-direction: column; width: 100%; min-height: 0;
  margin: 0; padding: 18px; gap: 12px; overflow: auto; border-radius: 16px;
  box-shadow: none;
}
[data-view-panel="image"] .creative-dock .creative-reference-strip,
[data-view-panel="video"] .creative-dock .creative-reference-strip {
  display: grid; grid-template-columns: 1fr 1fr minmax(100px, 1.15fr);
  width: 100%; gap: 8px; margin: 0;
}
[data-view-panel="image"] .creative-dock .creative-reference-strip > :not(:first-child),
[data-view-panel="video"] .creative-dock .creative-reference-strip > :not(:first-child) { display: flex; }
[data-view-panel="image"] .creative-dock .creative-reference-strip .creative-reference-tile,
[data-view-panel="video"] .creative-dock .creative-reference-strip .creative-reference-tile {
  width: 100%; height: 104px; min-height: 104px; padding: 10px; border-style: dashed;
  transform: none; text-align: left; align-items: flex-start;
}
[data-view-panel="image"] .creative-dock .creative-reference-strip .creative-reference-tile small,
[data-view-panel="video"] .creative-dock .creative-reference-strip .creative-reference-tile small { display: block; }
[data-view-panel="image"] .creative-dock .creative-reference-strip .creative-reference-preview,
[data-view-panel="video"] .creative-dock .creative-reference-strip .creative-reference-preview { width: 100%; height: 104px; min-height: 104px; }
[data-view-panel="image"] .creative-dock .creative-reference-preview > img,
[data-view-panel="video"] .creative-dock .creative-reference-preview > img { height: 104px; }
[data-view-panel="image"] .creative-dock .creative-prompt-label,
[data-view-panel="video"] .creative-dock .creative-prompt-label { display: block; min-height: 0; }
[data-view-panel="image"] .creative-dock .creative-prompt-label::before,
[data-view-panel="video"] .creative-dock .creative-prompt-label::before {
  content: "画面描述"; display: block; margin: 0 0 7px; color: #d5edf1; font-size: 12px; font-weight: 700;
}
[data-view-panel="video"] .creative-dock .creative-prompt-label::before { content: "视频描述与镜头语言"; }
[data-view-panel="image"] .creative-dock .creative-prompt-label textarea,
[data-view-panel="video"] .creative-dock .creative-prompt-label textarea {
  width: 100%; height: 190px; min-height: 190px; padding: 14px; resize: vertical;
  border: 1px solid #353b43; border-radius: 11px; background: #111316; color: #edf1f4; font-size: 13px;
}
[data-view-panel="image"] .creative-dock-controls,
[data-view-panel="video"] .creative-dock-controls {
  display: flex; flex-wrap: wrap; align-content: start; gap: 9px; overflow: visible;
  padding-top: 14px; border-top: 1px solid #34383e;
}
.creative-optimize-button { align-self: flex-start; }
.optimized-prompt-preview { width: 100%; min-height: 280px; margin-top: 12px; padding: 13px; border: 1px solid #39454d; border-radius: 11px; color: #e4f0f4; background: #13191d; line-height: 1.65; resize: vertical; }
[data-view-panel="image"] .creative-dock-controls::before,
[data-view-panel="video"] .creative-dock-controls::before { content: "生成参数"; flex: 0 0 100%; color: #d5edf1; font-size: 12px; font-weight: 700; }
[data-view-panel="image"] .creative-dock-controls .dock-select,
[data-view-panel="video"] .creative-dock-controls .dock-select { flex: 1 1 130px; }
[data-view-panel="image"] .creative-dock-controls .dock-active-model,
[data-view-panel="video"] .creative-dock-controls .dock-active-model { flex: 1 1 100%; }
[data-view-panel="image"] .creative-dock-controls .dock-icon-button,
[data-view-panel="video"] .creative-dock-controls .dock-icon-button { flex: 1 1 150px; }
[data-view-panel="image"] .creative-dock-controls .creative-send-button,
[data-view-panel="video"] .creative-dock-controls .creative-send-button { width: 54px; height: 42px; flex: 0 0 54px; }
[data-view-panel="image"] .creative-tool-rail,
[data-view-panel="video"] .creative-tool-rail { display: none; }
[data-view-panel="image"] .creative-result-count,
[data-view-panel="video"] .creative-result-count { display: none; }

/* Source-attributed prompt library. */
.prompt-gallery-view.active { display: block; min-height: 100%; }
.prompt-gallery-page { max-width: 1760px; margin: 0 auto; padding: 6px 8px 40px; }
.prompt-gallery-header { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 22px; }
.prompt-gallery-header h2 { margin: 5px 0 7px; color: #f5f7f9; font-size: clamp(25px, 2.3vw, 34px); }
.prompt-gallery-header p { margin: 0; color: #a2abb4; font-size: 13px; }
.prompt-gallery-header-actions { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.prompt-gallery-header-actions span { color: #85dcec; font-size: 12px; }
.prompt-gallery-filters { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 12px; padding: 14px; border: 1px solid #30343a; border-radius: 16px; background: #1a1d21; }
.prompt-gallery-search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid #363b42; border-radius: 10px; color: #8fa8af; background: #111417; font-size: 21px; }
.prompt-gallery-search:focus-within { border-color: #57d4eb; }
.prompt-gallery-search input { flex: 1; min-width: 0; height: 42px; padding: 0; border: 0; color: #eaf1f4; background: none; box-shadow: none; }
.prompt-gallery-filters select { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #363b42; border-radius: 10px; color: #eaf1f4; background: #111417; }
.prompt-gallery-categories { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 20px; }
.prompt-gallery-categories button { padding: 7px 15px; border: 1px solid #30353b; border-radius: 999px; color: #abb6bf; background: #202328; cursor: pointer; }
.prompt-gallery-categories button:hover, .prompt-gallery-categories button.active { border-color: #6bd6e9; color: #e8fbff; background: #17383f; }
.prompt-gallery-result-line { display: flex; justify-content: space-between; gap: 14px; margin: 0 0 13px; color: #b8c2cb; font-size: 12px; }
.prompt-gallery-result-line small { color: #7d8992; }
.prompt-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; align-items: stretch; }
.prompt-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #2e343b; border-radius: 15px; background: #1a1d21; transition: transform .15s ease, border-color .15s ease; }
.prompt-card:hover { transform: translateY(-2px); border-color: #5baec1; }
.prompt-card-image { display: flex; align-items: center; justify-content: center; height: 205px; overflow: hidden; background: #111417; }
.prompt-card-image img { width: 100%; height: 100%; object-fit: cover; }
.prompt-card-placeholder { flex-direction: column; gap: 5px; color: #718a94; background: radial-gradient(circle at 35% 35%, #23343d, #14171b 68%); }
.prompt-card-placeholder span { font-size: 40px; }
.prompt-card-placeholder small { font-size: 11px; }
.prompt-card-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 14px; }
.prompt-card-heading { display: flex; justify-content: space-between; gap: 7px; color: #80d9ea; font-size: 11px; }
.prompt-card-heading small { overflow: hidden; max-width: 55%; color: #8e9ca7; text-overflow: ellipsis; white-space: nowrap; }
.prompt-card h3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 40px; margin: 9px 0 7px; color: #edf2f5; font-size: 14px; line-height: 1.45; }
.prompt-card p { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; min-height: 54px; margin: 0; color: #a8b4bd; font-size: 12px; line-height: 1.5; }
.prompt-card-tags { display: flex; gap: 5px; min-height: 25px; margin: 10px 0; overflow: hidden; }
.prompt-card-tags span { align-self: start; padding: 3px 7px; border-radius: 8px; color: #aab9c2; background: #292e34; font-size: 10px; white-space: nowrap; }
.prompt-card-body > button { width: 100%; margin-top: auto; padding: 9px 0 0; border: 0; border-top: 1px solid #30363d; color: #9ae5f2; background: transparent; text-align: left; cursor: pointer; }
.prompt-card-body > button span { float: right; }
.prompt-gallery-empty { grid-column: 1 / -1; display: grid; place-items: center; align-content: center; min-height: 280px; border: 1px dashed #384049; border-radius: 16px; color: #aebbc4; text-align: center; }
.prompt-gallery-empty p { margin: 7px 0 0; color: #81919d; }
.prompt-gallery-more { display: block; min-width: 180px; margin: 24px auto 0; }
.prompt-gallery-more[hidden] { display: none; }
.prompt-detail-dialog { width: min(900px, calc(100vw - 32px)); max-height: min(880px, calc(100vh - 32px)); padding: 0; border: 1px solid #39444b; border-radius: 18px; background: #1b1f23; }
.prompt-detail-shell { display: flex; flex-direction: column; max-height: min(880px, calc(100vh - 32px)); }
.prompt-detail-shell header { display: flex; justify-content: space-between; gap: 20px; padding: 20px 24px 16px; border-bottom: 1px solid #30363d; }
.prompt-detail-shell header small { color: #78d4e7; }
.prompt-detail-shell h2 { margin: 6px 0 0; color: #eef4f6; font-size: 20px; }
.prompt-detail-content { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 16px; min-height: 0; padding: 18px 24px; overflow: auto; }
.prompt-detail-content:has(> img[hidden]) { grid-template-columns: 1fr; }
.prompt-detail-content img { width: 100%; max-height: 260px; border-radius: 10px; object-fit: contain; background: #101316; }
.prompt-detail-content label { display: grid; gap: 8px; color: #c5d5dc; font-size: 12px; }
.prompt-detail-content textarea { width: 100%; min-height: 300px; padding: 14px; border: 1px solid #3b434c; border-radius: 11px; color: #dfeaf0; background: #111417; line-height: 1.65; resize: vertical; }
.prompt-detail-shell footer { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 24px 20px; border-top: 1px solid #30363d; }
.prompt-detail-shell footer a { margin-right: auto; color: #80d9ea; font-size: 12px; text-decoration: none; }
.prompt-gallery-tabs,.prompt-picker-tabs{display:flex;gap:8px;margin:0 0 16px;border-bottom:1px solid #323b45}
.prompt-gallery-tabs button,.prompt-picker-tabs button{padding:11px 18px;border:0;border-bottom:2px solid transparent;background:transparent;color:#9eb0b9;cursor:pointer;font-weight:700}
.prompt-gallery-tabs button.active,.prompt-picker-tabs button.active{border-color:#6fe3eb;color:#e6fcff}
.prompt-gallery-grid{display:block;columns:5 220px;column-gap:14px}
.prompt-gallery-grid .prompt-card{display:inline-flex;position:relative;width:100%;margin:0 0 14px;padding:0;break-inside:avoid;text-align:left;cursor:pointer;box-shadow:0 12px 26px #0002}
.prompt-card-image{display:block;position:relative;width:100%;height:auto;min-height:130px;background:#12171c}
.prompt-card-image img,.prompt-card-image video{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;background:#11171b}
.prompt-card-text-preview{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden;min-height:175px;padding:42px 18px 22px;box-sizing:border-box;color:#d7e9ef;background:linear-gradient(145deg,#1d3a46,#151e28 64%,#102128);font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.prompt-card-shade{position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(transparent,#0712199c);pointer-events:none}
.prompt-card-type{position:absolute;top:10px;left:10px;padding:5px 9px;border:1px solid #ffffff5c;border-radius:99px;background:#0b1820bb;color:#e6ffff;font-size:11px;font-weight:700}
.prompt-card-body{display:flex;gap:4px;padding:11px 12px 13px;min-height:0}
.prompt-card-body strong{color:#f0f7fa;font-size:13px;line-height:1.45}
.prompt-card-body small{color:#8da3ad;font-size:11px}
.prompt-card:hover{transform:translateY(-4px);border-color:#6fe3eb;box-shadow:0 17px 36px #0006}
.prompt-detail-dialog{width:min(1180px,calc(100vw - 32px));background:#151c22}
.prompt-detail-shell{max-height:min(900px,calc(100vh - 32px))}
.prompt-detail-content,.prompt-detail-content:has(> img[hidden]){display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:22px;padding:22px;overflow:auto}
.prompt-detail-preview{display:grid;place-items:center;min-height:310px;max-height:70vh;border-radius:13px;background:#0e151a;overflow:auto}
.prompt-detail-preview img,.prompt-detail-preview video{width:auto;max-width:100%;height:auto;max-height:70vh;object-fit:contain}
.prompt-detail-preview [hidden]{display:none}
.prompt-detail-no-image{max-width:90%;max-height:62vh;overflow:auto;padding:24px;color:#e3eff4;font-size:16px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.prompt-detail-side{display:flex;flex-direction:column;gap:14px;min-height:0}
.prompt-detail-side label{display:flex;flex-direction:column;gap:9px;min-height:0;color:#c5d5dc}
.prompt-detail-side textarea{min-height:230px;max-height:48vh;padding:14px;border:1px solid #3b434c;border-radius:11px;color:#dfeaf0;background:#111417;line-height:1.65;resize:vertical}
.prompt-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.prompt-detail-actions button{min-width:0}
.prompt-publish-dialog,.prompt-picker-dialog{width:min(850px,calc(100vw - 32px));max-height:90vh;padding:0;border:1px solid #405661;border-radius:18px;background:#182127;color:#e7f4f8}
.prompt-publish-dialog form{display:grid;gap:14px;padding:23px;overflow:auto;max-height:90vh}
.prompt-publish-dialog header,.prompt-picker-shell header{display:flex;justify-content:space-between;align-items:center;gap:18px}
.prompt-publish-dialog h2,.prompt-picker-dialog h2{margin:0;font-size:22px}
.prompt-publish-dialog p{margin:0;color:#a6b9c0;font-size:13px}
.prompt-publish-dialog label{display:grid;gap:6px;color:#cde1e7;font-size:13px}
.prompt-publish-dialog input,.prompt-publish-dialog select,.prompt-publish-dialog textarea{width:100%;padding:10px;border:1px solid #45606a;border-radius:10px;background:#101a20;color:#ecf7fa}
.prompt-publish-dialog footer{display:flex;justify-content:flex-end}
.prompt-picker-dialog{width:min(1050px,calc(100vw - 32px))}
.prompt-picker-shell{padding:20px;max-height:90vh;overflow:auto}
.prompt-picker-shell header small{color:#77cbd8}
.prompt-picker-shell .prompt-gallery-grid{columns:4 180px}
.prompt-picker-shell .prompt-gallery-search{display:flex;min-width:0;width:100%;margin:0 0 14px}
.prompt-picker-shell .prompt-gallery-search input{min-width:0;width:100%}
.project-bulk-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.project-bulk-toolbar select{min-height:34px;border:1px solid #3b4b53;border-radius:8px;background:#1b242a;color:#e3f4f8}
.project-bulk-toolbar span{margin-left:auto;color:#9bb4bd;font-size:12px}
.project-card{position:relative}.project-select-control{position:absolute;top:9px;right:9px;z-index:2;padding:5px;border-radius:7px;background:#132029cc;cursor:pointer}.project-select-control input{width:18px;height:18px;cursor:pointer}
#custom-project-groups{display:grid;gap:4px}
@media(max-width:900px){.prompt-detail-content,.prompt-detail-content:has(> img[hidden]){grid-template-columns:1fr}.prompt-detail-preview{max-height:45vh}.prompt-detail-preview img,.prompt-detail-preview video{max-height:45vh}.prompt-gallery-grid{columns:2 160px}.prompt-picker-shell .prompt-gallery-grid{columns:2 160px}}
@media(max-width:520px){.prompt-gallery-grid,.prompt-picker-shell .prompt-gallery-grid{columns:1 180px}.prompt-detail-actions{grid-template-columns:1fr}.prompt-gallery-header{align-items:flex-start;flex-direction:column}}
.utility-view.active { display: block; min-height: 100%; }
.utility-page { max-width: 1420px; margin: 0 auto; padding: 4px 6px 44px; }
.utility-page > header { margin-bottom: 20px; }
.utility-page > header h2 { margin: 6px 0 8px; color: #f1f5f7; font-size: 29px; }
.utility-page > header p { margin: 0; color: #a2adb6; }
.utility-two-column { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: stretch; }
.utility-card { display: flex; flex-direction: column; align-items: stretch; gap: 15px; min-width: 0; padding: 22px; }
.utility-card h3 { margin: 0; color: #e9f1f5; }
.utility-card .muted { margin: 0; font-size: 12px; }
.utility-card > img { max-width: 100%; max-height: 300px; align-self: center; border-radius: 12px; object-fit: contain; background: #101316; }
.utility-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px; border: 1px dashed #527480; border-radius: 14px; color: #e4f6fa; background: #18242a; cursor: pointer; text-align: center; }
.utility-drop > span { font-size: 28px; color: #70dbe9; }
.utility-drop small { color: #93a6b0; }
.utility-card .dialog-field { display: grid; gap: 7px; margin: 0; color: #becbd3; }
.utility-card select, .utility-card input[type="number"], .utility-card textarea { width: 100%; border: 1px solid #363f47; border-radius: 10px; color: #e5eff4; background: #111519; }
.utility-card textarea { min-height: 90px; padding: 12px; line-height: 1.6; resize: vertical; }
.utility-card #reverse-result { flex: 1; min-height: 380px; }
.utility-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.utility-fields label { display: grid; gap: 6px; color: #b9c7cf; font-size: 12px; }
.utility-fields input { min-height: 42px; padding: 0 10px; }
.utility-preview-empty { display: grid; place-items: center; min-height: 350px; border: 1px dashed #39434b; border-radius: 12px; color: #82939d; text-align: center; }
.utility-card #gif-preview { width: 100%; max-height: 560px; object-fit: contain; }
.utility-card #gif-download { align-self: flex-start; text-decoration: none; }
.utility-card .button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.asset-search-filters { display: grid; grid-template-columns: minmax(0,1fr) 150px 150px; gap: 9px; margin-bottom: 12px; }
.asset-search-filters .image-library-search { width: 100%; margin: 0; }
.asset-search-filters select { min-width: 0; padding: 0 11px; border: 1px solid #3a4148; border-radius: 9px; color: #e3edf1; background: #181c20; }
@media (max-width: 1600px) { .prompt-gallery-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 1350px) { .prompt-gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 1180px) {
  [data-view-panel="image"] .creative-stage, [data-view-panel="video"] .creative-stage { display: flex; flex-direction: column; overflow-y: auto; }
  [data-view-panel="image"] .creative-history-feed, [data-view-panel="video"] .creative-history-feed { min-height: 300px; overflow: visible; }
  [data-view-panel="image"] .creative-dock, [data-view-panel="video"] .creative-dock { overflow: visible; flex: 0 0 auto; }
}
@media (max-width: 720px) {
  [data-view-panel="image"] .creative-stage, [data-view-panel="video"] .creative-stage { padding: 14px; }
  [data-view-panel="image"] .creative-stage-head, [data-view-panel="video"] .creative-stage-head { display: flex; align-items: flex-start; flex-direction: column; }
  [data-view-panel="image"] .creative-stage-head .secondary-button, [data-view-panel="video"] .creative-stage-head .secondary-button { display: inline-flex; }
  [data-view-panel="image"] .creative-stage-head .status, [data-view-panel="video"] .creative-stage-head .status { display: none; }
  [data-view-panel="image"] .creative-model-notice, [data-view-panel="video"] .creative-model-notice { display: none; }
  [data-view-panel="image"] .creative-dock .creative-reference-strip, [data-view-panel="video"] .creative-dock .creative-reference-strip { grid-template-columns: 1fr 1fr; }
  [data-view-panel="image"] .creative-dock .creative-reference-preview, [data-view-panel="video"] .creative-dock .creative-reference-preview { grid-column: 1 / -1; }
  .prompt-gallery-header { align-items: flex-start; flex-direction: column; }
  .prompt-gallery-filters { grid-template-columns: 1fr; }
  .prompt-gallery-grid { grid-template-columns: 1fr; }
  .prompt-gallery-result-line { flex-direction: column; }
  .prompt-detail-content { grid-template-columns: 1fr; }
  .prompt-detail-content img { max-height: 180px; }
  .prompt-detail-shell footer a { flex: 1 1 100%; }
  .utility-two-column { grid-template-columns: 1fr; }
  .utility-fields { grid-template-columns: 1fr; }
  .asset-search-filters { grid-template-columns: 1fr 1fr; }
.asset-search-filters .image-library-search { grid-column: 1 / -1; }
}

/* Personal appearance preferences keep media, model logos and status colors intact. */
:root[data-site-theme] body { background-image: radial-gradient(circle at 82% 8%, var(--theme-accent-glow), transparent 32%); }
:root[data-site-theme] .sidebar { background: linear-gradient(180deg, var(--theme-sidebar), var(--canvas)); }
:root[data-site-theme] .topbar { background: var(--theme-topbar); }
:root[data-site-theme] .global-search,
:root[data-site-theme] .profile-pill,
:root[data-site-theme] .secondary-button,
:root[data-site-theme] .ghost-button,
:root[data-site-theme] .icon-button,
:root[data-site-theme] .dialog-close { background: var(--surface-2); }
:root[data-site-theme] .global-search:focus-within,
:root[data-site-theme] .profile-pill:hover,
:root[data-site-theme] .secondary-button:hover,
:root[data-site-theme] .ghost-button:hover { border-color: var(--theme-accent-border); }
:root[data-site-theme] .nav-item.active { color: var(--ink); background: var(--primary-soft); box-shadow: inset 3px 0 var(--primary); }
:root[data-site-theme] .page-hero::after { background: radial-gradient(circle, var(--theme-accent-glow), transparent 70%); }
:root[data-site-theme] .auth-backdrop { background: radial-gradient(circle at 25% 18%, var(--theme-accent-glow), transparent 35%), linear-gradient(145deg, var(--navy-2), var(--canvas)); }
:root[data-site-theme] .auth-panel,
:root[data-site-theme] .auth-tabs { background: var(--theme-input); }
:root[data-site-theme] .auth-card,
:root[data-site-theme] dialog,
:root[data-site-theme] dialog form,
:root[data-site-theme] #settings-dialog { background: var(--surface); }
:root[data-site-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
:root[data-site-theme] select,
:root[data-site-theme] textarea { background: var(--theme-input); }
:root[data-site-theme] input:focus,
:root[data-site-theme] select:focus,
:root[data-site-theme] textarea:focus { border-color: var(--theme-accent-border); box-shadow: 0 0 0 3px var(--theme-accent-glow); }
:root[data-site-theme] .creative-workspace.active,
:root[data-site-theme] .canvas-workspace { background: var(--canvas); }
:root[data-site-theme] .creative-stage { background: radial-gradient(circle at 50% 14%, var(--theme-accent-glow), transparent 34%), var(--canvas); }
:root[data-site-theme] .model-catalog { background: var(--navy-2); }
:root[data-site-theme] .creative-dock { background: var(--surface); border-color: var(--line); }
:root[data-site-theme] .canvas-world { background-image: radial-gradient(var(--theme-accent-border) .8px, transparent 1px); }

#generic-dialog[data-settings-child="true"] { width: min(640px, calc(100vw - 24px)); max-height: min(90dvh, 760px); }
#generic-dialog[data-settings-child="true"] form { max-height: min(90dvh, 760px); }
#generic-dialog[data-settings-child="true"] #dialog-content { overflow: auto; padding-right: 3px; }
.settings-dialog-back { align-self: start; margin: 0 0 12px; padding: 5px 0; border: 0; background: transparent; color: var(--primary); font-size: .84rem; font-weight: 700; }
.settings-dialog-back:hover { text-decoration: underline; }
.theme-settings { padding: 14px 0 17px; border-bottom: 1px solid var(--line); }
.theme-settings-heading { display: grid; gap: 2px; margin-bottom: 12px; }
.theme-settings-heading strong { color: var(--ink); }
.theme-settings-heading small,
.theme-settings-note { color: var(--muted); font-size: .8rem; }
.theme-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.theme-preset { display: grid; gap: 2px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface-2); text-align: left; }
.theme-preset:hover,
.theme-preset[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.theme-preset strong { padding: 5px 2px 0; font-size: .88rem; }
.theme-preset small { padding: 0 2px 3px; font-size: .75rem; }
.theme-preset-swatch { display: flex; align-items: end; gap: 5px; height: 53px; padding: 8px; overflow: hidden; border-radius: 8px; background: var(--swatch-bg); }
.theme-preset-swatch i { display: block; width: 24%; height: 18px; border-radius: 5px; background: var(--swatch-surface); }
.theme-preset-swatch i:first-child { height: 35px; border-left: 3px solid var(--swatch-accent); }
.theme-preset-swatch i:last-child { width: 34%; height: 28px; background: var(--swatch-accent); }
.theme-hue-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: var(--ink); font-size: .86rem; font-weight: 700; }
.theme-hue-label output { color: var(--primary); font-variant-numeric: tabular-nums; }
.theme-hue-slider { display: block; width: 100%; height: 14px; margin: 0; border: 0; border-radius: 999px; appearance: none; background: linear-gradient(90deg, hsl(0 82% 65%), hsl(45 82% 65%), hsl(90 82% 65%), hsl(135 82% 65%), hsl(180 82% 65%), hsl(225 82% 65%), hsl(270 82% 65%), hsl(315 82% 65%), hsl(359 82% 65%)); cursor: pointer; }
.theme-hue-slider::-webkit-slider-thumb { width: 23px; height: 23px; border: 4px solid var(--primary); border-radius: 50%; appearance: none; background: white; box-shadow: 0 1px 8px rgba(0,0,0,.45); }
.theme-hue-slider::-moz-range-thumb { width: 15px; height: 15px; border: 4px solid var(--primary); border-radius: 50%; background: white; box-shadow: 0 1px 8px rgba(0,0,0,.45); }
.theme-settings-note { margin: 10px 0 0; }
@media (max-width: 430px) { .theme-preset-grid { gap: 7px; } .theme-preset { padding: 6px; } }
.platform-task-form { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(120px, 180px) auto; align-items: end; gap: 12px; margin: 16px 0; }
.platform-task-form label { display: grid; gap: 6px; }
.platform-task-form .platform-task-prompt { grid-column: 1 / -1; }
.platform-task-form textarea { width: 100%; resize: vertical; }
.platform-task-list { display: grid; gap: 8px; }
.platform-task-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-color, #d7dce5); border-radius: 12px; }
.platform-task-row > div { display: grid; gap: 5px; min-width: 0; }
.platform-task-row small { overflow-wrap: anywhere; }
@media (max-width: 760px) { .platform-task-form, .platform-task-row { grid-template-columns: 1fr; } }
.project-pin-dialog { border: 1px solid var(--border, #cbd5e1); border-radius: 16px; padding: 24px; min-width: min(360px, calc(100vw - 32px)); color: inherit; background: var(--surface, #fff); }
.project-pin-dialog::backdrop { background: rgba(15, 23, 42, .6); }
.project-pin-dialog form { display: grid; gap: 14px; }
.project-pin-dialog input { width: 100%; padding: 12px; font: inherit; border: 1px solid #94a3b8; border-radius: 8px; }
.project-pin-dialog p { min-height: 1.3em; margin: 0; color: #b45309; }
.platform-task-output { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16em; overflow-y: auto; }
.platform-task-import { cursor: pointer; }
.platform-task-import input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.history-topline, .history-top-actions, .history-filter-row { display: flex; align-items: center; gap: 12px; }
.history-topline { min-height: 58px; }
.history-title { flex: 1; min-width: 180px; }
.history-title h2 { margin: 0; }
.history-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.history-top-actions { margin-left: auto; }
.history-filter-row { flex-wrap: wrap; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.history-filters { gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.history-filters button { padding: 9px 15px; border: 0; border-radius: 8px; background: transparent; }
.history-date-control { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.history-date-control input { min-height: 34px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); color-scheme: dark; }
.history-actions[hidden], #history-date-clear[hidden] { display: none; }
.history-group h3 { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.history-group h3 small { margin-left: auto; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; }
.history-preview { height: auto; aspect-ratio: 3 / 4; }
.history-preview:has(audio) { align-content: center; gap: 10px; background: linear-gradient(145deg,#252044,#151229); }
.history-audio-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: #d8c9ff; background: #50417f; font-size: 42px; }
.history-view:not(.batch-mode) .history-select { display: none; }
@media (max-width: 900px) { .history-topline { flex-wrap: wrap; } .history-top-actions { width: 100%; justify-content: flex-end; } }

/* Product rule: the compact "我的作品" shelf belongs only to the two
   creation surfaces. The full history remains a deliberate destination. */
.creative-history-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #2b3036;
  border-radius: 16px;
  background: #16181b;
}
.creative-history-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid #2b3036;
}
.creative-history-section-head > div:first-child { min-width: 0; }
.creative-history-section-head .eyebrow { color: #78828c; font-size: 10px; }
.creative-history-section-head h3 { margin: 3px 0 0; color: #edf1f4; font-size: 18px; }
.creative-history-section-head p { margin: 4px 0 0; color: #7f8991; font-size: 11px; line-height: 1.45; }
.creative-history-section-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.creative-result-count-inline { color: #66d9ed; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.creative-history-section .creative-history-feed { grid-column: auto; grid-row: auto; width: 100%; min-height: 0; margin: 0; padding: 14px 18px 18px; border: 0; border-radius: 0; background: transparent; }
.creative-history-section .creative-history-empty { min-height: 220px; }
.app-view.history-view:not(.active) { display: none !important; }
.app-view.history-view.active { display: grid !important; gap: 18px; align-content: start; }

@media (max-width: 1180px) {
  .creative-history-section { min-height: 300px; }
}
@media (max-width: 720px) {
  .creative-history-section-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .creative-history-section-tools { width: 100%; justify-content: space-between; }
  .creative-history-section .creative-history-feed { padding-inline: 12px; }
}

/* ==========================================================================
   登录页视觉强化 · 分层科技感背景（2026-10-06）
   分层（由后到前）：底色渐变 → 光斑 → 极光 → 透视网格 → 粒子 → 光束
                     → 扫描线 → HUD 取景框 → 噪点 → 暗角 → 内容
   原则：全部走主题 token（--primary / --primary-2 / --navy / --canvas /
        --theme-accent-glow / --theme-accent-border），保证 4 套主题换肤生效；
        只用 transform / opacity 做动画；提供 prefers-reduced-motion 与
        无 backdrop-filter 的降级；所有装饰层 pointer-events:none 且 aria-hidden。
   注意：统一使用 #auth-screen 前缀 —— 用 id 特异性稳定胜过文件前段
        的 `:root[data-site-theme] .auth-*` 覆盖，无需 !important。
   ========================================================================== */

#auth-screen {
  position: relative;
  isolation: isolate;
  background: var(--canvas);
}
#auth-screen .auth-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}
#auth-screen .auth-backdrop,
#auth-screen .auth-panel { position: relative; z-index: 1; }

/* ---------- 1. 底色渐变 ---------- */
#auth-screen .auth-fx-base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(78% 60% at 76% 8%, var(--theme-accent-glow), transparent 62%),
    radial-gradient(66% 54% at 6% 92%, var(--theme-accent-glow), transparent 64%),
    radial-gradient(120% 96% at 14% 4%, var(--navy-2), transparent 58%),
    radial-gradient(100% 88% at 90% 96%, var(--navy-2), transparent 60%),
    linear-gradient(158deg, var(--navy) 0%, var(--canvas) 50%, var(--navy) 100%);
}

/* ---------- 1b. 流动光带（最容易被一眼看出"背景在动"的一层） ---------- */
/* 一条大跨度斜向光带缓慢横穿整个背景；只动 transform，走合成器，开销低。 */
#auth-screen .auth-fx-flow {
  position: absolute;
  inset: -34%;
  background: linear-gradient(112deg,
    transparent 14%,
    var(--primary) 30%,
    transparent 46%,
    var(--primary-2) 62%,
    transparent 78%);
  opacity: .2;
  animation: authFxFlow 19s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes authFxFlow {
  from { transform: translate3d(-17%, -10%, 0) rotate(-5deg) scale(1.06); }
  to   { transform: translate3d(17%, 10%, 0) rotate(5deg) scale(1.3); }
}

/* ---------- 2. 光斑（局部辉光，支撑内容对比） ---------- */
/* 说明：不使用 filter:blur() —— 径向渐变本身就平滑衰减到 transparent，
   加高斯模糊只增加整屏模糊开销、几乎不增加观感。
   也刻意不加「实心平台段」(如 color 0%, color 14%, transparent 72%)：
   大尺寸圆上 14% 实心半径可达 ~97px，会在画面上留下一个可见的灰盘边缘。 */
#auth-screen .auth-orb { mix-blend-mode: screen; }
#auth-screen .auth-orb-one {
  width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
  right: 2%; top: 2%;
  background: radial-gradient(circle at 38% 34%, var(--primary-2), transparent 76%);
  opacity: .15;
  animation: authFxOrbA 17s ease-in-out infinite;
  will-change: transform;
}
#auth-screen .auth-orb-two {
  width: 26vw; height: 26vw; min-width: 200px; min-height: 200px;
  left: 4%; top: 54%;
  background: radial-gradient(circle at 42% 40%, var(--primary), transparent 78%);
  opacity: .12;
  animation: authFxOrbB 21s ease-in-out infinite;
  will-change: transform;
}
@keyframes authFxOrbA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-9%, 9%, 0) scale(1.18); }
}
@keyframes authFxOrbB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
  50%      { transform: translate3d(11%, -8%, 0) scale(.9); }
}

/* ---------- 3. 极光（大面积流动光晕） ---------- */
/* 同光斑：靠渐变自身衰减做出柔光，省掉整屏高斯模糊，软件渲染与低端 GPU 都友好。 */
#auth-screen .auth-fx-aurora {
  position: absolute;
  inset: -12%;
  opacity: .46;
  mix-blend-mode: screen;
}
#auth-screen .auth-fx-aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
#auth-screen .auth-fx-aurora span:nth-child(1) {
  width: 48vmax; height: 48vmax; left: -10%; top: -16%;
  background: radial-gradient(circle at 36% 36%, var(--primary), transparent 66%);
  opacity: .46;
  animation: authFxAuroraA 13s ease-in-out infinite;
}
#auth-screen .auth-fx-aurora span:nth-child(2) {
  width: 40vmax; height: 40vmax; right: -14%; top: -8%;
  background: radial-gradient(circle at 40% 40%, var(--primary-2), transparent 68%);
  opacity: .38;
  animation: authFxAuroraB 16s ease-in-out infinite;
}
#auth-screen .auth-fx-aurora span:nth-child(3) {
  width: 52vmax; height: 52vmax; left: 22%; bottom: -26%;
  background: radial-gradient(circle at 44% 44%, var(--primary), transparent 70%);
  opacity: .26;
  animation: authFxAuroraC 20s ease-in-out infinite;
}
#auth-screen .auth-fx-aurora span:nth-child(4) {
  width: 30vmax; height: 30vmax; right: 4%; bottom: 8%;
  background: radial-gradient(circle at 40% 40%, var(--primary-2), transparent 72%);
  opacity: .22;
  animation: authFxAuroraD 17s ease-in-out infinite;
}
@keyframes authFxAuroraA {
  0%, 100% { transform: translate3d(-4vw, -3vh, 0) scale(.96); }
  50%      { transform: translate3d(15vw, 11vh, 0) scale(1.3); }
}
@keyframes authFxAuroraB {
  0%, 100% { transform: translate3d(4vw, 3vh, 0) scale(1.14); }
  50%      { transform: translate3d(-16vw, 14vh, 0) scale(.84); }
}
@keyframes authFxAuroraC {
  0%, 100% { transform: translate3d(4vw, 3vh, 0) scale(.9); }
  50%      { transform: translate3d(-14vw, -12vh, 0) scale(1.22); }
}
@keyframes authFxAuroraD {
  0%, 100% { transform: translate3d(-3vw, 2vh, 0) scale(.96); }
  50%      { transform: translate3d(13vw, -11vh, 0) scale(1.32); }
}

/* ---------- 4. 透视网格（科技感主视觉） ---------- */
#auth-screen .auth-fx-grid {
  position: absolute;
  left: -30%; right: -30%; bottom: -8%; height: 68%;
  perspective: 460px;
  perspective-origin: 50% 0%;
  opacity: .72;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 52%, rgba(0,0,0,.55) 78%, transparent 96%);
  mask-image: linear-gradient(to top, #000 0%, #000 52%, rgba(0,0,0,.55) 78%, transparent 96%);
}
#auth-screen .auth-fx-grid > span {
  position: absolute;
  left: 0; right: 0; top: -170px; bottom: 0;
  background-image:
    linear-gradient(to right, var(--primary) 0 1px, transparent 1px),
    linear-gradient(to bottom, var(--primary) 0 1px, transparent 1px);
  background-size: 68px 68px;
  transform: rotateX(74deg) translate3d(0, 0, 0);
  transform-origin: 50% 100%;
  opacity: .5;
  will-change: transform;
  animation: authFxGridFlow 2.2s linear infinite;
}
#auth-screen .auth-fx-grid::after {
  content: "";
  position: absolute; left: 14%; right: 14%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  box-shadow: 0 0 22px 3px var(--primary-soft);
  opacity: .85;
}
@keyframes authFxGridFlow {
  from { transform: rotateX(74deg) translate3d(0, 0, 0); }
  to   { transform: rotateX(74deg) translate3d(0, 68px, 0); }
}

/* ---------- 5. 粒子（canvas） ---------- */
#auth-screen .auth-fx-particles {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .9;
}

/* ---------- 6. 光束 ---------- */
#auth-screen .auth-fx-streaks { position: absolute; inset: 0; overflow: hidden; opacity: .55; }
#auth-screen .auth-fx-streaks span {
  position: absolute; top: -25%; bottom: -25%; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--primary), transparent);
  animation: authFxStreak 9s linear infinite;
}
#auth-screen .auth-fx-streaks span:nth-child(1) { left: 16%; opacity: .50; animation-duration: 5.5s; animation-delay: -1.5s; }
#auth-screen .auth-fx-streaks span:nth-child(2) { left: 51%; opacity: .34; animation-duration: 7.2s; animation-delay: -4.5s; }
#auth-screen .auth-fx-streaks span:nth-child(3) { left: 83%; opacity: .44; animation-duration: 6.2s; animation-delay: -3s; }
@keyframes authFxStreak {
  0%   { transform: translate3d(-12vw, 0, 0) scaleY(.55); opacity: 0; }
  14%  { opacity: .85; }
  86%  { opacity: .55; }
  100% { transform: translate3d(12vw, 0, 0) scaleY(1); opacity: 0; }
}

/* ---------- 7. 扫描线 ---------- */
#auth-screen .auth-fx-scan {
  position: absolute; left: 0; right: 0; height: 34vh;
  background: linear-gradient(to bottom, transparent, var(--theme-accent-glow) 52%, transparent);
  opacity: .55;
  animation: authFxScan 7.5s linear infinite;
}
@keyframes authFxScan {
  0%   { transform: translate3d(0, -40vh, 0); opacity: 0; }
  12%  { opacity: .6; }
  88%  { opacity: .4; }
  100% { transform: translate3d(0, 116vh, 0); opacity: 0; }
}

/* ---------- 8. HUD 取景框 ---------- */
#auth-screen .auth-fx-hud span {
  position: absolute; width: 76px; height: 76px;
  border: 1px solid var(--theme-accent-border);
  opacity: .7;
}
#auth-screen .auth-fx-hud span:nth-child(1) { left: 26px;  top: 26px;    border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
#auth-screen .auth-fx-hud span:nth-child(2) { right: 26px; top: 26px;    border-left: 0;  border-bottom: 0; border-radius: 0 10px 0 0; }
#auth-screen .auth-fx-hud span:nth-child(3) { left: 26px;  bottom: 26px; border-right: 0; border-top: 0;    border-radius: 0 0 0 10px; }
#auth-screen .auth-fx-hud span:nth-child(4) { right: 26px; bottom: 26px; border-left: 0;  border-top: 0;    border-radius: 0 0 10px 0; }

/* ---------- 9. 噪点（消除大面积渐变的色带，增加质感） ---------- */
/* 用普通 alpha 混合而非 mix-blend-mode —— 混合模式会让整屏每帧重新混合，
   在动画背景上代价明显，而 4.5% 的普通叠加观感几乎一致。 */
#auth-screen .auth-fx-noise {
  position: absolute; inset: 0;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
}

/* ---------- 10. 暗角 ---------- */
#auth-screen .auth-fx-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(126% 92% at 46% 42%, transparent 34%, rgba(0,0,0,.34) 74%, rgba(0,0,0,.62) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.34), transparent 22%, transparent 78%, rgba(0,0,0,.34));
}

/* ==========================================================================
   内容层：品牌区 / 表单区
   ========================================================================== */

/* 左侧品牌区：让背景透出来，只保留可读性遮罩 */
#auth-screen .auth-backdrop {
  background: linear-gradient(148deg, rgba(6,9,13,.42) 0%, rgba(6,9,13,.16) 52%, rgba(6,9,13,.44) 100%);
}
/* 点阵质感（替换原先的 64px 静态网格） */
#auth-screen .auth-backdrop::before {
  content: "";
  position: absolute; inset: 0;
  opacity: .55;
  background-image: radial-gradient(var(--theme-accent-border) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(118% 88% at 16% 20%, #000 0%, transparent 70%);
  mask-image: radial-gradient(118% 88% at 16% 20%, #000 0%, transparent 70%);
}
/* 文字可读性遮罩（替换原先的旋转圆角矩形装饰） */
#auth-screen .auth-backdrop::after {
  content: "";
  position: absolute; inset: 0;
  border: 0; border-radius: 0; transform: none; box-shadow: none;
  background: linear-gradient(100deg, rgba(3,5,8,.74) 0%, rgba(3,5,8,.34) 48%, transparent 82%);
}

#auth-screen .auth-copy { animation: authFxRise .72s cubic-bezier(.2,.7,.3,1) both; }
#auth-screen .auth-mark {
  font-size: 1.28rem;
  letter-spacing: .01em;
  margin-bottom: 22px;
}
#auth-screen .auth-mark img {
  width: 66px; height: 46px;
  filter: drop-shadow(0 0 16px var(--theme-accent-glow)) drop-shadow(0 8px 20px rgba(0,0,0,.55));
}

/* 小标签 */
#auth-screen .auth-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 18px; padding: 6px 14px 6px 12px;
  border: 1px solid var(--theme-accent-border);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  font-size: .76rem; font-weight: 600; letter-spacing: .14em;
  color: #dff4f8;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#auth-screen .auth-kicker i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft), 0 0 10px var(--primary);
  animation: authFxPulse 2.4s ease-in-out infinite;
}
@keyframes authFxPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

/* 主标题：白色 + 末段渐变强调 + 轻微辉光
   max-width + text-wrap:balance 保证「从一段视频，／到完整创作。」稳定两行，
   不会出现末字孤行（如「作。」单独一行）。 */
#auth-screen .auth-copy h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  letter-spacing: -.045em;
  line-height: 1.08;
  max-width: 640px;
  text-wrap: balance;
  text-shadow: 0 6px 34px rgba(0,0,0,.5);
}
#auth-screen .auth-h1-accent {
  background-image: linear-gradient(96deg, var(--primary-2), var(--primary) 58%, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  #auth-screen .auth-h1-accent { color: var(--primary); -webkit-text-fill-color: currentColor; }
}
#auth-screen .auth-copy > p {
  color: rgba(233,242,246,.82);
  font-size: 1.06rem;
  line-height: 1.72;
  max-width: 540px;
  text-shadow: 0 2px 14px rgba(0,0,0,.42);
}

/* 特性胶囊 */
#auth-screen .auth-feature-row { gap: 10px; margin-top: 30px; }
#auth-screen .auth-feature-row span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--theme-accent-border);
  background: rgba(255,255,255,.055);
  border-radius: 999px;
  color: #e6f4f8;
  font-size: .84rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
#auth-screen .auth-feature-row span::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}
#auth-screen .auth-feature-row span:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* 关键指标条 */
#auth-screen .auth-metrics {
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
}
#auth-screen .auth-metrics > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#auth-screen .auth-metrics strong {
  font-size: 1.7rem; line-height: 1; font-weight: 800; letter-spacing: -.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
#auth-screen .auth-metrics > div:first-child strong { color: var(--primary); }
#auth-screen .auth-metrics small { color: rgba(210,222,228,.66); font-size: .78rem; }

/* 右侧表单区：磨砂玻璃，让背景动效透出来（面板内只有不透明卡片，可放心透光） */
#auth-screen .auth-panel {
  background: linear-gradient(180deg, rgba(18,20,24,.58) 0%, rgba(11,13,16,.80) 100%);
  border-left: 1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(16px) saturate(128%);
  backdrop-filter: blur(16px) saturate(128%);
}
#auth-screen .auth-panel::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--primary), transparent);
  opacity: .5;
}

#auth-screen .auth-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  box-shadow: 0 34px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  animation: authFxRise .72s cubic-bezier(.2,.7,.3,1) both .1s;
}
#auth-screen .auth-card::before {
  content: "";
  position: absolute; left: 24px; right: 24px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: .85;
}
#auth-screen .auth-card::after {
  content: "";
  position: absolute; right: -70px; top: -70px; width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--theme-accent-glow), transparent 70%);
  pointer-events: none;
}
@keyframes authFxRise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 表单元素：聚焦态统一到主题强调色 */
#auth-screen .auth-tabs {
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.07);
}
#auth-screen .auth-tabs button.active {
  color: #eafcff;
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--theme-accent-border);
}
#auth-screen input:focus,
#auth-screen .auth-code-row input:focus {
  border-color: var(--theme-accent-border);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
#auth-screen .auth-submit {
  min-height: 48px;
  font-size: .95rem;
  letter-spacing: .01em;
  box-shadow: 0 12px 30px var(--theme-accent-glow), inset 0 1px 0 rgba(255,255,255,.26);
}
#auth-screen button:focus-visible,
#auth-screen input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- 响应式 ---------- */
/* 761–868px：原两列 grid 的最小宽度合计 860px（minmax(440px,…) + minmax(420px,…)），
   在该区间会撑出横向滚动条。提前收成"品牌头 + 表单"的上下堆叠。 */
@media (max-width: 868px) {
  #auth-screen { grid-template-columns: minmax(0, 1fr); }
  #auth-screen .auth-backdrop { min-height: 320px; padding: 42px 26px; align-items: center; }
  #auth-screen .auth-copy { max-width: 620px; }
  #auth-screen .auth-copy h1 { font-size: clamp(2.05rem, 6.4vw, 3rem); }
  #auth-screen .auth-copy > p { font-size: 1rem; }
  #auth-screen .auth-panel { padding: 28px 22px 34px; border-left: 0; }
  #auth-screen .auth-panel::before { display: none; }
  #auth-screen .auth-metrics { margin-top: 24px; padding-top: 18px; gap: 12px 26px; }
  #auth-screen .auth-backdrop::after { background: linear-gradient(180deg, rgba(3,5,8,.18) 0%, rgba(3,5,8,.30) 55%, rgba(3,5,8,.66) 100%); }
}
@media (max-width: 1100px) {
  #auth-screen .auth-fx-grid { height: 58%; opacity: .5; }
}
@media (max-width: 760px) {
  #auth-screen .auth-fx-aurora { opacity: .4; }
  #auth-screen .auth-fx-aurora span:nth-child(3) { display: none; }
  #auth-screen .auth-fx-grid { left: -60%; right: -60%; height: 50%; }
  #auth-screen .auth-fx-hud span { width: 52px; height: 52px; }
  #auth-screen .auth-fx-hud span:nth-child(1),
  #auth-screen .auth-fx-hud span:nth-child(2) { top: 16px; }
  #auth-screen .auth-fx-hud span:nth-child(1),
  #auth-screen .auth-fx-hud span:nth-child(3) { left: 16px; }
  #auth-screen .auth-fx-hud span:nth-child(2),
  #auth-screen .auth-fx-hud span:nth-child(4) { right: 16px; }
  #auth-screen .auth-fx-hud span:nth-child(3),
  #auth-screen .auth-fx-hud span:nth-child(4) { bottom: 16px; }
  #auth-screen .auth-metrics strong { font-size: 1.45rem; }
}
@media (max-width: 480px) {
  /* 小屏没有品牌区，背景层就是唯一装饰：面板放透、动效适度加强；
     卡片本身保持高不透明，保证表单文字对比不受背景影响。 */
  #auth-screen .auth-fx-aurora { opacity: .62; }
  #auth-screen .auth-fx-aurora span:nth-child(3) { display: block; }
  #auth-screen .auth-fx-aurora span:nth-child(3) { left: 4%; bottom: -18%; width: 44vmax; height: 44vmax; }
  #auth-screen .auth-fx-aurora span:nth-child(4) { display: none; }
  #auth-screen .auth-fx-grid { left: -120%; right: -120%; bottom: -6%; height: 76%; opacity: .52; }
  #auth-screen .auth-fx-streaks { opacity: .45; }
  #auth-screen .auth-fx-hud span { width: 44px; height: 44px; }
  #auth-screen .auth-panel {
    border-left: 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(12,14,17,.40) 0%, rgba(9,10,13,.62) 100%);
  }
  #auth-screen .auth-panel::before { display: none; }
  #auth-screen .auth-card {
    background: linear-gradient(180deg, rgba(38,40,45,.95) 0%, rgba(30,32,36,.97) 100%);
    box-shadow: 0 26px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  }
  #auth-screen .auth-fx-noise { opacity: .035; }
}
/* 横屏矮视口：避免装饰层把内容挤出首屏 */
@media (max-height: 620px) {
  #auth-screen .auth-fx-grid { height: 44%; }
  #auth-screen .auth-metrics { display: none; }
}
/* 无 backdrop-filter 支持时退化为不透明表面 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #auth-screen .auth-panel { background: linear-gradient(180deg, #14161a 0%, #0c0e11 100%); }
  #auth-screen .auth-card { background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%); }
}
/* 降低动态效果偏好：停掉全部装饰动画，只保留静态分层
   注意 .auth-orb 在 .auth-backdrop 内、不在 .auth-fx 内，必须单独列出，
   否则它会继续漂移（本轮实测就漏过这一条）。 */
@media (prefers-reduced-motion: reduce) {
  #auth-screen .auth-fx *,
  #auth-screen .auth-orb,
  #auth-screen .auth-copy,
  #auth-screen .auth-card,
  #auth-screen .auth-kicker i { animation: none !important; }
  #auth-screen .auth-fx-scan,
  #auth-screen .auth-fx-streaks { display: none; }
  #auth-screen .auth-fx-aurora span,
  #auth-screen .auth-orb { will-change: auto; }
}