@font-face {
  font-family: KokoDisplay;
  src: local("Arial Black"), local("Microsoft YaHei Bold");
  font-weight: 900;
  font-display: swap;
}

/* Customer Seedance API keys */
.account-api-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, .1);
}
.api-management-view {
  max-width: 1120px !important;
}
.api-management-panel {
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 8px;
  background: rgba(255, 255, 252, .74);
}
.api-management-panel .account-api-head strong { font-size: 17px; }
.api-doc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.api-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.api-usage-grid > div {
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 8px;
  background: rgba(255, 255, 252, .62);
}
.api-usage-grid span,
.api-usage-grid small { color: #747984; font-size: 11px; }
.api-usage-grid strong { color: #101119; font-size: 18px; }
#accountDialog .settings-card {
  max-height: min(760px, calc(100vh - 32px));
  overflow-y: auto;
}
.account-api-head,
.account-api-key-row,
.account-api-secret > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.account-api-head { justify-content: space-between; }
.account-api-head > div { display: grid; gap: 3px; }
.account-api-head strong { font-size: 14px; color: #101119; }
.account-api-head small,
.account-api-list p,
.account-api-secret > span { font-size: 11px; color: #747984; }
.account-api-secret {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(44, 190, 124, .32);
  background: rgba(44, 190, 124, .08);
  border-radius: 8px;
}
.account-api-secret > div { margin-top: 8px; }
.account-api-secret code {
  flex: 1;
  min-width: 0;
  padding: 9px;
  overflow: auto;
  white-space: nowrap;
  border-radius: 6px;
  background: rgba(255, 255, 255, .8);
  color: #101119;
  font-size: 11px;
}
.account-api-list { display: grid; gap: 7px; margin-top: 12px; }
.account-api-list > p { margin: 4px 0; }
.account-api-key-row {
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 8px;
}
.account-api-key-row > div { display: grid; gap: 3px; min-width: 0; flex: 1; }
.account-api-key-row strong { font-size: 12px; }
.account-api-key-row code { font-size: 10px; color: #747984; }
.account-api-key-row > span { font-size: 10px; color: #9b5b5b; }
.account-api-key-row > span.is-active { color: #198b5d; }
.account-api-key-row > button {
  color: #b64747;
  font-size: 11px;
  font-weight: 700;
}
.account-api-doc {
  display: inline-flex;
  margin-top: 12px;
  color: #087f8c;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}
@media (max-width: 620px) {
  .account-api-head { align-items: flex-start; }
  .account-api-secret > div { align-items: stretch; flex-direction: column; }
  .api-usage-grid { grid-template-columns: 1fr; }
  .api-management-panel { padding: 16px; }
}

/* Task refresh: one stable request, one restrained progress indicator. */
.app-shell .refresh-icon {
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  transform-origin: 50% 50%;
}
.app-shell #reloadTasks {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 112px !important;
}
.app-shell #sideTaskRefresh {
  width: 40px !important;
  padding: 0 !important;
}
.app-shell #reloadTasks:disabled,
.app-shell #sideTaskRefresh:disabled {
  opacity: .62 !important;
  cursor: wait !important;
  transform: none !important;
}
.app-shell .is-refreshing .refresh-icon {
  animation: kokoTaskRefreshSpin .72s linear infinite;
}
@keyframes kokoTaskRefreshSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell .is-refreshing .refresh-icon { animation: none; }
}

/* Infinite media canvas: powered by Panzoom, priced from the live catalog. */
.app-shell #canvasView {
  width: 100% !important;
  max-width: none !important;
  height: calc(100vh - 62px) !important;
  padding: 18px 20px 20px !important;
  overflow: hidden !important;
}
.app-shell .canvas-shell {
  min-height: 0 !important;
  height: 100% !important;
}
.app-shell .canvas-toolbar {
  min-height: 54px !important;
  margin-bottom: 12px !important;
}
.app-shell .canvas-toolbar h2 {
  margin: 0 0 5px !important;
  color: #f5f8f4 !important;
  font-size: 20px !important;
  letter-spacing: 0 !important;
}
.app-shell .canvas-toolbar p {
  color: #aebbb3 !important;
  font-size: 11px !important;
}
.app-shell .canvas-actions {
  flex: none !important;
  padding: 4px !important;
  border: 1px solid var(--lib-line) !important;
  border-radius: 12px !important;
  background: rgba(255,255,252,.72) !important;
}
.app-shell .canvas-add,
.app-shell .canvas-tool {
  height: 34px !important;
  border-color: transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--lib-ink) !important;
}
.app-shell .canvas-add {
  min-width: 98px !important;
  font-weight: 760 !important;
}
.app-shell .canvas-add.active {
  background: #171817 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.app-shell .canvas-tool:hover {
  background: rgba(21,21,21,.07) !important;
}
.app-shell #canvasZoomLabel {
  color: var(--lib-muted) !important;
  font-variant-numeric: tabular-nums !important;
}
.app-shell .canvas-layout {
  grid-template-columns: 282px minmax(0, 1fr) !important;
  gap: 12px !important;
  min-height: 0 !important;
  height: calc(100% - 66px) !important;
}
.app-shell .canvas-inspector {
  min-height: 0 !important;
  padding: 18px !important;
  overflow-y: auto !important;
  border: 1px solid var(--lib-line) !important;
  border-radius: 16px !important;
  background: rgba(255,255,252,.76) !important;
  box-shadow: 0 18px 44px rgba(25,26,24,.06) !important;
}
.app-shell .canvas-inspector :disabled {
  opacity: .62 !important;
  color: #68716c !important;
  -webkit-text-fill-color: #68716c !important;
}
.app-shell .canvas-inspector h3 {
  margin: 0 0 5px !important;
  color: var(--lib-ink) !important;
  font-size: 16px !important;
}
.app-shell .canvas-inspector > p {
  margin: 0 0 17px !important;
  color: var(--lib-muted) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}
.app-shell .canvas-field {
  margin-top: 12px !important;
  color: #525451 !important;
  font-size: 10px !important;
  font-weight: 760 !important;
}
.app-shell .canvas-field input,
.app-shell .canvas-field textarea,
.app-shell .canvas-field select {
  display: block !important;
  width: 100% !important;
  margin-top: 6px !important;
  border: 1px solid var(--lib-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--lib-ink) !important;
  outline: none !important;
  font-size: 11px !important;
}
.app-shell .canvas-field input,
.app-shell .canvas-field select {
  height: 38px !important;
  padding: 0 10px !important;
}
.app-shell .canvas-field textarea {
  min-height: 92px !important;
  padding: 10px !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}
.app-shell .canvas-field input:focus,
.app-shell .canvas-field textarea:focus,
.app-shell .canvas-field select:focus {
  border-color: var(--lib-accent) !important;
  box-shadow: 0 0 0 3px rgba(47,111,100,.1) !important;
}
.app-shell .canvas-param-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
.app-shell .canvas-param[hidden] {
  display: none !important;
}
.app-shell .canvas-node-price {
  margin-top: 13px !important;
  padding: 10px 11px !important;
  border-radius: 10px !important;
  background: rgba(47,111,100,.08) !important;
  color: var(--lib-accent) !important;
  font-size: 11px !important;
  font-weight: 780 !important;
  font-variant-numeric: tabular-nums !important;
}
.app-shell .canvas-inspector-actions {
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
  margin-top: 14px !important;
}
.app-shell .canvas-inspector-actions button {
  min-width: 0 !important;
  padding-inline: 8px !important;
}
.app-shell .canvas-inspector-actions .canvas-run {
  grid-column: 1 / -1 !important;
  background: #171817 !important;
  border-color: #171817 !important;
}
.app-shell .canvas-stage {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 1px solid var(--lib-line) !important;
  border-radius: 16px !important;
  background: #f2f2ed !important;
  touch-action: none !important;
}
.app-shell .canvas-stage::before {
  background-image: radial-gradient(rgba(25,26,24,.2) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
  opacity: .5 !important;
  pointer-events: none !important;
}
.app-shell .canvas-layer {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  transform-origin: 0 0 !important;
}
.app-shell .canvas-node {
  width: 224px !important;
  min-height: 104px !important;
  padding: 14px !important;
  gap: 11px !important;
  border: 1px solid rgba(25,26,24,.14) !important;
  border-radius: 14px !important;
  background: rgba(255,255,252,.96) !important;
  color: var(--lib-ink) !important;
  box-shadow: 0 16px 34px rgba(25,26,24,.12) !important;
  cursor: grab !important;
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}
.app-shell .canvas-node:active {
  cursor: grabbing !important;
}
.app-shell .canvas-node.selected {
  border-color: var(--lib-accent) !important;
  box-shadow: 0 0 0 3px rgba(47,111,100,.1), 0 18px 38px rgba(25,26,24,.14) !important;
}
.app-shell .canvas-node-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  background: #171817 !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
}
.app-shell .canvas-node-image .canvas-node-icon {
  background: var(--lib-accent) !important;
}
.app-shell .canvas-node-media {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  flex: none !important;
  width: 64px !important;
  height: 76px !important;
  overflow: hidden !important;
  border: 1px solid rgba(25, 26, 24, .12) !important;
  border-radius: 9px !important;
  background: #eceeeb !important;
  color: var(--lib-muted) !important;
}
.app-shell .canvas-node-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.app-shell .canvas-node-media i {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(47, 111, 100, .2) !important;
  border-top-color: var(--lib-accent) !important;
  border-radius: 50% !important;
  animation: canvas-node-spin .9s linear infinite !important;
}
.app-shell .canvas-node-media b {
  margin-top: -18px !important;
  font-size: 8px !important;
  font-weight: 760 !important;
}
.app-shell .canvas-node-media-failed,
.app-shell .canvas-node-media.is-error {
  background: #f6eceb !important;
  color: #a84640 !important;
}
.app-shell .canvas-node-media-failed i,
.app-shell .canvas-node-media.is-error img {
  display: none !important;
}
.app-shell .canvas-node-media-failed b,
.app-shell .canvas-node-media.is-error b {
  margin-top: 0 !important;
  padding: 6px !important;
  text-align: center !important;
}
.app-shell .canvas-node em.generation-failed {
  color: #a84640 !important;
}
@keyframes canvas-node-spin {
  to { transform: rotate(360deg); }
}
.app-shell .canvas-node-copy {
  min-width: 0 !important;
  flex: 1 !important;
}
.app-shell .canvas-node strong,
.app-shell .canvas-node small,
.app-shell .canvas-node em {
  display: block !important;
  max-width: 142px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.app-shell .canvas-node strong {
  color: var(--lib-ink) !important;
  font-size: 12px !important;
}
.app-shell .canvas-node small {
  margin-top: 5px !important;
  color: var(--lib-muted) !important;
  font-size: 9.5px !important;
}
.app-shell .canvas-node em {
  margin-top: 10px !important;
  color: var(--lib-accent) !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
.app-shell .canvas-node .node-menu {
  flex: none !important;
  color: var(--lib-muted) !important;
}
.app-shell .canvas-create-menu {
  z-index: 8 !important;
  grid-template-columns: 1fr !important;
  min-width: 150px !important;
  padding: 6px !important;
  border: 1px solid var(--lib-line) !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: 0 18px 44px rgba(25,26,24,.18) !important;
}
.app-shell .canvas-create-menu button {
  height: 36px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--lib-ink) !important;
  font-weight: 720 !important;
}
.app-shell .canvas-create-menu button:hover {
  background: rgba(47,111,100,.1) !important;
  color: var(--lib-accent) !important;
}
.app-shell .canvas-empty {
  color: var(--lib-muted) !important;
}
.app-shell .canvas-empty strong {
  color: #525451 !important;
}
.app-shell .canvas-hint {
  right: 12px !important;
  bottom: 10px !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  background: rgba(255,255,252,.78) !important;
  color: var(--lib-muted) !important;
  pointer-events: none !important;
}

@media (max-width: 980px) {
  .app-shell #canvasView {
    height: auto !important;
    min-height: calc(100vh - 62px) !important;
    overflow: visible !important;
  }
  .app-shell .canvas-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .app-shell .canvas-inspector {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 12px !important;
  }
  .app-shell .canvas-inspector > h3,
  .app-shell .canvas-inspector > p,
  .app-shell .canvas-node-price,
  .app-shell .canvas-inspector-actions {
    grid-column: 1 / -1 !important;
  }
  .app-shell .canvas-stage {
    min-height: 540px !important;
    height: 62vh !important;
  }
}
@media (max-width: 620px) {
  .app-shell #canvasView {
    padding: 12px 10px 88px !important;
  }
  .app-shell .canvas-toolbar {
    align-items: stretch !important;
  }
  .app-shell .canvas-actions {
    width: 100% !important;
    overflow-x: auto !important;
  }
  .app-shell .canvas-inspector {
    display: block !important;
  }
  .app-shell .canvas-stage {
    min-height: 520px !important;
    height: 62vh !important;
  }
}

/* View isolation: the desktop create layout has an explicit display rule, so
   hidden views must win with the same important priority. */
.app-shell .content.hidden {
  display: none !important;
}
.app-shell .content:not(.hidden) {
  position: relative !important;
  z-index: 1 !important;
}

/* Keep history rows compact and reserve a stable media box for portrait art. */
.app-shell #tasksView .task-list {
  gap: 8px !important;
}
.app-shell #tasksView .task-row {
  grid-template-columns: 76px minmax(0, 1fr) auto !important;
  min-height: 76px !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
}
.app-shell #tasksView .task-thumb {
  width: 76px !important;
  height: 56px !important;
  min-width: 76px !important;
  min-height: 56px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}
.app-shell #tasksView .task-thumb > img,
.app-shell #tasksView .task-thumb > video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
.app-shell #tasksView .task-info {
  min-width: 0 !important;
}
.app-shell #tasksView .task-info h4,
.app-shell #tasksView .task-info p {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.app-shell #tasksView .task-row-actions {
  min-width: 0 !important;
  white-space: nowrap !important;
}
.app-shell #tasksView .task-row-image {
  grid-template-columns: 62px minmax(0, 1fr) auto !important;
  min-height: 64px !important;
  gap: 10px !important;
  padding: 8px 10px !important;
}
.app-shell #tasksView .task-row-image .task-thumb {
  width: 62px !important;
  min-width: 62px !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 8px !important;
}
.app-shell #tasksView .task-row-image .task-info h4 {
  margin-bottom: 3px !important;
}
@media (max-width: 760px) {
  .app-shell #tasksView .task-row {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    min-height: 68px !important;
    gap: 9px !important;
    padding: 9px !important;
  }
  .app-shell #tasksView .task-thumb {
    width: 64px !important;
    min-width: 64px !important;
    height: 48px !important;
    min-height: 48px !important;
  }
  .app-shell #tasksView .task-row-image {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    min-height: 60px !important;
    gap: 8px !important;
    padding: 7px 8px !important;
  }
  .app-shell #tasksView .task-row-image .task-thumb {
    width: 56px !important;
    min-width: 56px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  .app-shell #tasksView .task-row-actions {
    grid-column: 2 !important;
    justify-content: flex-start !important;
  }
}

/* Auth refresh: the register flow shares the console's monochrome material system. */
html body .login-screen {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 500px) !important;
  min-height: 100svh !important;
  background: #080909 !important;
  color: #f4f6f3 !important;
}
html body .login-screen .login-aside {
  min-width: 0 !important;
  background: #080909 url("assets/bonzai-ring.png") right 38% / min(76%, 760px) auto no-repeat !important;
  border-right: 1px solid #292e2d !important;
}
html body .login-screen .auth-aside-video {
  display: none !important;
}
html body .login-screen .login-aside::before {
  inset: 0 !important;
  z-index: 0 !important;
  background: linear-gradient(90deg, #080909 0%, rgba(8,9,9,.82) 36%, rgba(8,9,9,.08) 100%) !important;
  opacity: 1 !important;
}
html body .login-screen .login-aside::after {
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(8,9,9,.12), rgba(8,9,9,.06) 52%, #080909 100%) !important;
  opacity: 1 !important;
  filter: none !important;
}
html body .login-screen .login-aside .welcome-brand,
html body .login-screen .login-aside-copy {
  z-index: 1 !important;
}
html body .login-screen .login-aside .welcome-brand .brand-logo {
  width: 138px !important;
  filter: none !important;
}
html body .login-screen .login-aside-copy {
  max-width: 480px !important;
}
html body .login-screen .login-aside-copy > span {
  color: #d8ff69 !important;
  letter-spacing: .14em !important;
}
html body .login-screen .login-aside-copy h2 {
  color: #f4f6f3 !important;
  font-size: clamp(42px, 5.5vw, 76px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}
html body .login-screen .login-aside-copy h2 em {
  color: #d8ff69 !important;
}
html body .login-screen .login-aside-copy > p {
  color: #9ba59f !important;
}
html body .login-screen .login-panel {
  position: relative !important;
  align-items: center !important;
  padding: 42px clamp(24px, 5vw, 64px) !important;
  background: #101212 !important;
  color: #f4f6f3 !important;
  overflow: hidden !important;
}
html body .login-screen .login-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: .45 !important;
  background: radial-gradient(circle at 84% 8%, rgba(216,255,105,.08), transparent 28%) !important;
}
html body .login-screen .login-form-wrap {
  position: relative !important;
  z-index: 1 !important;
  width: min(360px, 100%) !important;
}
html body .login-screen .back-link {
  z-index: 2 !important;
  top: 30px !important;
  left: 34px !important;
  color: #909a94 !important;
}
html body .login-screen .back-link:hover {
  color: #d8ff69 !important;
}
html body .login-screen .form-eyebrow {
  color: #d8ff69 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
}
html body .login-screen .login-form-wrap h1 {
  margin: 13px 0 8px !important;
  color: #f4f6f3 !important;
  font-size: 31px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
html body .login-screen .form-muted {
  color: #8e9992 !important;
}
html body .login-screen .auth-switch {
  margin: 28px 0 6px !important;
  border-bottom-color: #2b322f !important;
}
html body .login-screen .auth-switch button {
  color: #7e8982 !important;
}
html body .login-screen .auth-switch button.active {
  border-bottom-color: #d8ff69 !important;
  color: #d8ff69 !important;
}
html body .login-screen .login-form-wrap label {
  color: #b9c2bc !important;
}
html body .login-screen .login-form-wrap input {
  border-color: #303834 !important;
  background: #0b0d0d !important;
  color: #f4f6f3 !important;
  caret-color: #d8ff69 !important;
}
html body .login-screen .login-form-wrap input::placeholder {
  color: #66716a !important;
}
html body .login-screen .login-form-wrap input:focus {
  border-color: #d8ff69 !important;
  box-shadow: 0 0 0 3px rgba(216,255,105,.12) !important;
}
html body .login-screen .login-form-wrap input:-webkit-autofill,
html body .login-screen .login-form-wrap input:-webkit-autofill:hover,
html body .login-screen .login-form-wrap input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4f6f3 !important;
  -webkit-box-shadow: 0 0 0 1000px #0b0d0d inset !important;
  box-shadow: 0 0 0 1000px #0b0d0d inset !important;
  caret-color: #d8ff69 !important;
}
html body .login-screen .code-button {
  border-color: #303834 !important;
  background: #171b19 !important;
  color: #cbd4cd !important;
}
html body .login-screen .code-button:hover:not(:disabled) {
  border-color: #d8ff69 !important;
  color: #d8ff69 !important;
}
html body .login-screen .login-submit {
  margin-top: 26px !important;
  background: #d8ff69 !important;
  color: #11140f !important;
  box-shadow: none !important;
}
html body .login-screen .login-submit:hover {
  background: #e4ff94 !important;
}
html body .login-screen .login-note {
  color: #737d77 !important;
}
html body .login-screen .referral-notice {
  border-color: #405231 !important;
  background: #182015 !important;
  color: #d8ff69 !important;
}
@media (max-width: 760px) {
  html body .login-screen {
    display: block !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: auto !important;
  }
  html body .login-screen .login-aside {
    display: flex !important;
    min-height: 194px !important;
    height: 194px !important;
    padding: 24px 22px 22px !important;
    background-size: 330px auto !important;
    background-position: 118% 44% !important;
  }
  html body .login-screen .login-aside .welcome-brand .brand-logo {
    width: 110px !important;
  }
  html body .login-screen .login-aside-copy h2 {
    font-size: 34px !important;
  }
  html body .login-screen .login-aside-copy > span {
    margin-bottom: 9px !important;
    font-size: 9px !important;
  }
  html body .login-screen .login-aside-copy > p {
    max-width: 260px !important;
    font-size: 12px !important;
  }
  html body .login-screen .login-panel {
    min-height: calc(100svh - 194px) !important;
    padding: 38px 22px 48px !important;
  }
  html body .login-screen .back-link {
    top: 18px !important;
    left: 22px !important;
  }
}

/* Reference-led console system: dark, precise, and content-first. */
.app-shell {
  --console-bg: #080909;
  --console-surface: #101212;
  --console-surface-raised: #151818;
  --console-line: #292e2d;
  --console-muted: #8b9290;
  --console-ink: #f4f6f3;
  --console-accent: #d8ff69;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  background: var(--console-bg) !important;
  color: var(--console-ink) !important;
}
.app-shell .sidebar {
  width: 220px !important;
  min-width: 220px !important;
  min-height: 100vh !important;
  padding: 22px 14px 18px !important;
  background: #0b0c0c !important;
  border-right: 1px solid var(--console-line) !important;
}
.app-shell .brand {
  height: 36px !important;
  padding: 0 10px 0 !important;
  margin-bottom: 28px !important;
}
.app-shell .brand-logo {
  width: 116px !important;
  height: auto !important;
}
.app-shell .new-btn {
  height: 42px !important;
  border-radius: 9px !important;
  background: var(--console-accent) !important;
  color: #10120e !important;
  box-shadow: none !important;
  font-weight: 850 !important;
}
.app-shell .nav-list {
  gap: 4px !important;
  margin-top: 24px !important;
}
.app-shell .nav-item {
  height: 42px !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  color: #89908e !important;
  font-size: 12px !important;
  font-weight: 720 !important;
}
.app-shell .nav-item:hover {
  background: #151818 !important;
  color: #e7ebe7 !important;
}
.app-shell .nav-item.active {
  background: #1b201e !important;
  color: var(--console-accent) !important;
  box-shadow: inset 2px 0 0 var(--console-accent) !important;
}
.app-shell .nav-icon {
  color: inherit !important;
  font-size: 13px !important;
}
.app-shell .nav-item em {
  background: var(--console-accent) !important;
  color: #10120e !important;
}
.app-shell .sidebar-foot {
  color: var(--console-muted) !important;
}
.app-shell .status-pill {
  color: var(--console-muted) !important;
}
.app-shell .dot {
  background: var(--console-accent) !important;
  box-shadow: 0 0 0 4px rgba(216,255,105,.1) !important;
}
.app-shell .main {
  min-width: 0 !important;
  background: var(--console-bg) !important;
}
.app-shell .topbar {
  height: 72px !important;
  padding: 0 26px !important;
  background: #0b0c0c !important;
  border-bottom: 1px solid var(--console-line) !important;
}
.app-shell .topbar h1 {
  color: var(--console-ink) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}
.app-shell .topbar p {
  color: var(--console-muted) !important;
}
.app-shell .top-actions {
  gap: 8px !important;
}
.app-shell .home-btn,
.app-shell .balance-btn,
.app-shell .icon-btn,
.app-shell .avatar {
  border: 1px solid var(--console-line) !important;
  background: var(--console-surface) !important;
  color: #dce2de !important;
}
.app-shell .balance-btn {
  min-height: 36px !important;
  border-radius: 8px !important;
}
.app-shell .balance-btn .points-icon {
  color: var(--console-accent) !important;
}
.app-shell .content {
  width: 100% !important;
  max-width: 1440px !important;
  padding: 20px 26px 30px !important;
  margin: 0 auto !important;
}
.app-shell #createView > .hero-copy {
  position: relative !important;
  min-height: 132px !important;
  padding: 25px 28px 23px !important;
  margin-bottom: 14px !important;
  border: 1px solid var(--console-line) !important;
  border-radius: 14px !important;
  background: #0e1010 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.app-shell #createView > .hero-copy::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 0 0 auto !important;
  width: 36% !important;
  background: linear-gradient(90deg, transparent, rgba(216,255,105,.08)) !important;
  pointer-events: none !important;
}
.app-shell #createView > .hero-copy .hero-kicker,
.app-shell #createView > .hero-copy h2,
.app-shell #createView > .hero-copy p {
  position: relative !important;
  z-index: 1 !important;
}
.app-shell #createView > .hero-copy .hero-kicker {
  color: var(--console-accent) !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
}
.app-shell #createView > .hero-copy .hero-kicker .hero-state {
  color: #89908e !important;
}
.app-shell #createView > .hero-copy .signal-dot {
  background: var(--console-accent) !important;
  box-shadow: 0 0 0 4px rgba(216,255,105,.1) !important;
}
.app-shell #createView > .hero-copy h2 {
  max-width: 780px !important;
  margin-top: 12px !important;
  color: var(--console-ink) !important;
  font-family: "Bricolage Grotesque", "Noto Sans SC", sans-serif !important;
  font-size: clamp(30px, 3.6vw, 52px) !important;
  line-height: 1.04 !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}
.app-shell #createView > .hero-copy h2 span {
  color: var(--console-accent) !important;
}
.app-shell #createView > .hero-copy p {
  max-width: 680px !important;
  margin-top: 10px !important;
  color: #929a97 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}
.app-shell .workspace-grid {
  grid-template-columns: minmax(360px, 1.08fr) minmax(360px, .92fr) 292px !important;
  gap: 12px !important;
}
.app-shell .panel {
  padding: 17px !important;
  border: 1px solid var(--console-line) !important;
  border-radius: 14px !important;
  background: var(--console-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.app-shell .panel-head {
  min-height: 38px !important;
  margin-bottom: 13px !important;
}
.app-shell .panel h3 {
  color: var(--console-ink) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
.app-shell .muted {
  color: var(--console-muted) !important;
}
.app-shell .credit-chip {
  min-height: 30px !important;
  border: 1px solid #34402a !important;
  background: #1b2414 !important;
  color: var(--console-accent) !important;
}
.app-shell .model-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
.app-shell .model-chip {
  min-height: 62px !important;
  padding: 10px !important;
  border: 1px solid var(--console-line) !important;
  border-radius: 9px !important;
  background: #141717 !important;
  color: #dfe5e0 !important;
  box-shadow: none !important;
}
.app-shell .model-chip:hover {
  border-color: #59664d !important;
  background: #191d1a !important;
  transform: translateY(-1px) !important;
}
.app-shell .model-chip.selected,
.app-shell .model-chip.active {
  border-color: var(--console-accent) !important;
  background: #d8ff69 !important;
  color: #12150f !important;
  box-shadow: 0 8px 20px rgba(216,255,105,.08) !important;
}
.app-shell .model-chip small {
  color: inherit !important;
  opacity: .64 !important;
}
.app-shell .field-label,
.app-shell .field-label-row {
  color: #b4bdb8 !important;
}
.app-shell #prompt {
  min-height: 126px !important;
  border: 1px solid var(--console-line) !important;
  border-radius: 10px !important;
  background: #0b0d0d !important;
  color: var(--console-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.app-shell #prompt::placeholder {
  color: #68716d !important;
}
.app-shell .quick-prompts {
  gap: 7px !important;
  margin-top: 8px !important;
}
.app-shell .quick-prompts button,
.app-shell .tags button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid var(--console-line) !important;
  border-radius: 8px !important;
  background: #151818 !important;
  color: #c2cbc5 !important;
  font-size: 11px !important;
  font-weight: 720 !important;
}
.app-shell .quick-prompts button:hover,
.app-shell .tags button:hover {
  border-color: var(--console-accent) !important;
  color: var(--console-accent) !important;
  background: #1b2118 !important;
}
.app-shell .prompt-template-icon {
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  background: #27301f !important;
  color: var(--console-accent) !important;
  font-size: 10px !important;
}
.app-shell .upload-tile,
.app-shell .asset-thumb {
  border-color: #3a433e !important;
  border-radius: 9px !important;
  background: #141717 !important;
  color: #77827b !important;
}
.app-shell .upload-tile span {
  color: var(--console-accent) !important;
}
.app-shell .control select {
  height: 38px !important;
  border: 1px solid var(--console-line) !important;
  border-radius: 8px !important;
  background: #0b0d0d !important;
  color: #d8ded9 !important;
}
.app-shell .generate-btn {
  height: 46px !important;
  border-radius: 8px !important;
  background: var(--console-accent) !important;
  color: #11140f !important;
  box-shadow: 0 12px 28px rgba(216,255,105,.08) !important;
}
.app-shell .form-note {
  color: #737d77 !important;
}
.app-shell .preview-stage {
  background: #090b0b !important;
  border: 1px solid #202624 !important;
  border-radius: 10px !important;
}
.app-shell .preview-stage .empty-visual {
  border-color: #29302c !important;
  background: linear-gradient(145deg, #121615, #090b0b 64%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.app-shell .preview-stage .play-orb {
  width: 52px !important;
  height: 52px !important;
  background: var(--console-accent) !important;
  color: #10130e !important;
  box-shadow: none !important;
}
.app-shell .preview-stage .empty-visual p {
  color: #dfe6e0 !important;
}
.app-shell .task-sidebar {
  min-height: 0 !important;
}
.app-shell .side-task-list {
  gap: 7px !important;
  align-content: start !important;
  grid-auto-rows: max-content !important;
}
.app-shell .side-task-row {
  border-color: var(--console-line) !important;
  background: #141717 !important;
  color: #dfe5e0 !important;
}
.app-shell .side-task-row:hover {
  border-color: #59664d !important;
  background: #191d1a !important;
}
.app-shell .side-task-thumb {
  background: #252e20 !important;
  color: var(--console-accent) !important;
}
.app-shell .side-task-kind {
  color: var(--console-accent) !important;
}
.app-shell .side-task-row strong {
  color: #e8eee9 !important;
}
.app-shell .side-task-row small {
  color: #7f8982 !important;
}
.app-shell .side-task-all {
  border-color: var(--console-line) !important;
  background: #151818 !important;
  color: #ccd5cf !important;
}
.app-shell #tasksView .task-row {
  border-color: var(--console-line) !important;
  background: #141717 !important;
  box-shadow: none !important;
}
.app-shell #tasksView .task-info h4 {
  color: #e8eee9 !important;
}
.app-shell #tasksView .task-info p,
.app-shell #tasksView .task-info-top {
  color: #7f8982 !important;
}
.app-shell #tasksView .task-kind-label {
  color: var(--console-accent) !important;
}
.app-shell #tasksView .task-thumb {
  background: #202522 !important;
  border-color: #303734 !important;
}
.app-shell #tasksView .task-preview-btn {
  border-color: #3b443f !important;
  background: #1a1e1c !important;
  color: #e3e9e3 !important;
}
.app-shell #tasksView .task-preview-btn:hover {
  border-color: var(--console-accent) !important;
  background: var(--console-accent) !important;
  color: #10130e !important;
}
.app-shell #tasksView .task-status {
  border: 1px solid #364038 !important;
  background: #1d241c !important;
  color: #c4d2bf !important;
}
@media (max-width: 1260px) {
  .app-shell .workspace-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px) !important;
  }
  .app-shell .task-sidebar {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 760px) {
  .app-shell {
    display: block !important;
    background: var(--console-bg) !important;
  }
  .app-shell .sidebar {
    background: #0b0c0c !important;
    border-color: var(--console-line) !important;
  }
  .app-shell .topbar {
    background: #0b0c0c !important;
  }
  .app-shell .content {
    padding: 10px 10px 88px !important;
  }
  .app-shell #createView > .hero-copy {
    padding: 19px 16px 20px !important;
    border-radius: 14px !important;
  }
  .app-shell #createView > .hero-copy h2 {
    font-size: clamp(27px, 8.4vw, 36px) !important;
    line-height: 1.08 !important;
  }
  .app-shell #createView > .hero-copy p {
    font-size: 11px !important;
  }
  .app-shell .panel,
  .app-shell #createView .panel {
    border-radius: 14px !important;
    background: var(--console-surface) !important;
  }
  .app-shell .model-row {
    grid-template-columns: 1fr !important;
  }
  .app-shell .model-chip {
    min-height: 56px !important;
  }
  .app-shell .quick-prompts button,
  .app-shell .tags button {
    flex: 1 1 calc(50% - 7px) !important;
    justify-content: flex-start !important;
  }
}
.panel-head-actions,
.section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Keep generated and uploaded media inside their owning panel.  Images can
   have arbitrary source dimensions, so they must fit the stage rather than
   define the page layout. */
.app-shell .workspace-grid,
.app-shell .workspace-grid > *,
.app-shell .panel,
.app-shell .preview,
.app-shell .preview-stage,
.app-shell .asset-grid,
.app-shell .asset-item,
.app-shell .library-grid,
.app-shell .library-grid > * {
  min-width: 0 !important;
  max-width: 100% !important;
}
.app-shell .panel,
.app-shell .preview-stage,
.app-shell .asset-item,
.app-shell .library-grid > * {
  overflow: hidden !important;
}
.app-shell .preview-stage {
  width: 100% !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
}
.app-shell .preview-stage > img,
.app-shell .preview-stage > video {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
.app-shell .asset-item img,
.app-shell .asset-item video,
.app-shell .library-grid img,
.app-shell .library-grid video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
.app-shell .asset-item img,
.app-shell .asset-item video {
  width: 82px !important;
  height: 70px !important;
}
.app-shell .preview-stage:has(> video) {
  background: radial-gradient(circle at 50% 35%, #202529 0, #0b0d0e 62%) !important;
}
.app-shell .preview-stage > video {
  width: 100% !important;
  height: 100% !important;
  border-radius: 10px !important;
  background: #050607 !important;
  object-fit: contain !important;
  box-shadow: 0 14px 34px #0009 !important;
}
.app-shell .preview-stage > img {
  border-radius: 10px !important;
  box-shadow: 0 14px 34px #0009 !important;
}
:root {
  --koko-cyan: #18c4e6;
  --koko-white: #f7f7f4;
  --koko-black: #08090a;
  --koko-line: #2b2d2f;
}
html,
body {
  background: var(--koko-black);
  color: var(--koko-white);
}
.welcome-screen {
  position: relative !important;
  display: block !important;
  width: 100vw !important;
  height: 100svh !important;
  min-height: 620px !important;
  overflow: hidden !important;
  background: #08090a !important;
  color: #fff !important;
  isolation: isolate;
}
.welcome-screen.hidden,
.login-screen.hidden,
.app-shell.hidden {
  display: none !important;
}
.welcome-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  z-index: 0 !important;
  filter: brightness(0.66) saturate(0.86) !important;
  background: #08090a !important;
}
.welcome-video-shade {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    rgba(4, 5, 6, 0.3),
    rgba(4, 5, 6, 0.05) 32%,
    rgba(4, 5, 6, 0.78) 100%
  ) !important;
}
.welcome-nav {
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 78px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 clamp(24px, 5vw, 72px) !important;
  z-index: 3 !important;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.46),
    transparent
  ) !important;
  border: 0 !important;
}
.welcome-brand .brand-logo {
  display: block !important;
  width: 142px !important;
  height: 38px !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: none !important;
}
.runway-links {
  display: flex !important;
  align-items: center !important;
  gap: clamp(18px, 2.7vw, 42px) !important;
  margin-left: auto !important;
  margin-right: clamp(20px, 3vw, 46px) !important;
}
.runway-links button,
.welcome-nav-actions button {
  font-family: "Noto Sans SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px !important;
  color: #e8e8e5 !important;
}
.runway-links button {
  opacity: 0.78 !important;
}
.runway-links button:hover {
  opacity: 1 !important;
  color: #fff !important;
}
.welcome-nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.welcome-nav-actions .quiet-link {
  height: 36px !important;
  padding: 0 12px !important;
  color: #dfdfdb !important;
}
.welcome-nav-actions .welcome-cta {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  background: #f4f4f1 !important;
  color: #111 !important;
}
.welcome-nav-actions .welcome-cta:hover {
  background: #fff !important;
}
.welcome-main {
  position: absolute !important;
  inset: 78px 0 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: flex-end !important;
  min-height: 0 !important;
  padding: 0 clamp(24px, 7vw, 112px) clamp(60px, 10vh, 118px) !important;
}
.welcome-copy {
  max-width: 720px !important;
}
.welcome-kicker {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #ecece8 !important;
  font-family: "Bricolage Grotesque", "Noto Sans SC", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-shadow: 0 2px 12px #000 !important;
}
.signal-dot {
  width: 6px !important;
  height: 6px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}
.welcome-copy h1 {
  margin: 20px 0 22px !important;
  color: #fff !important;
  font-family: KokoDisplay, "Noto Serif SC", "Noto Sans SC", "Microsoft YaHei", sans-serif !important;
  font-size: clamp(52px, 6.4vw, 100px) !important;
  font-weight: 900 !important;
  line-height: 0.96 !important;
  letter-spacing: -3px !important;
  text-shadow: 0 3px 26px #000 !important;
}
.welcome-copy h1 em {
  color: #fff !important;
  font-style: normal !important;
}
.welcome-copy p {
  max-width: 600px !important;
  margin: 0 !important;
  color: #f1f1ed !important;
  font-family: "Noto Sans SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-shadow: 0 2px 12px #000 !important;
}
.welcome-actions {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  margin-top: 30px !important;
}
.welcome-actions .welcome-cta.large {
  height: 48px !important;
  padding: 0 20px !important;
  border-radius: 6px !important;
  background: #f6f6f3 !important;
  color: #111 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.welcome-actions .welcome-cta.large:hover {
  background: #fff !important;
}
.welcome-actions .quiet-link {
  color: #f1f1ee !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-shadow: 0 2px 12px #000 !important;
}
.login-screen {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 520px) !important;
  width: 100vw !important;
  height: 100svh !important;
  min-height: 620px !important;
  background: #0a0b0c !important;
  color: #f3f3ef !important;
}
.login-aside {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 42px clamp(28px, 6vw, 96px) !important;
  background: linear-gradient(135deg, #111516, #08090a) !important;
  border: 0 !important;
  overflow: hidden !important;
}
.auth-aside-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.28 !important;
  filter: saturate(0.82) contrast(1.06) !important;
  pointer-events: none !important;
}
.login-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #070a0b66, #070a0bcc 78%, #070a0bf2);
  pointer-events: none;
}
.login-aside:after {
  content: "";
  position: absolute;
  inset: 34% -10% -10% 12%;
  background: url("assets/runway-home.mp4") center/cover no-repeat;
  opacity: 0.18;
  filter: blur(1px);
  pointer-events: none;
}
.login-aside .welcome-brand,
.login-aside-copy {
  position: relative !important;
  z-index: 1 !important;
}
.login-aside .welcome-brand .brand-logo {
  width: 150px !important;
}
.login-aside-copy h2 {
  margin: 0 0 18px !important;
  color: #fff !important;
  font-family: KokoDisplay, "Noto Serif SC", "Noto Sans SC", "Microsoft YaHei", sans-serif !important;
  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: 0.98 !important;
  letter-spacing: -2px !important;
}
.login-aside-copy > span {
  display: block !important;
  margin-bottom: 18px !important;
  color: #b9c4c4 !important;
  font-family: "Bricolage Grotesque", "Noto Sans SC", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
}
.login-aside-copy > p {
  max-width: 380px !important;
  margin: 0 !important;
  color: #c5cecc !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.login-aside-copy h2 em {
  color: #fff !important;
  font-style: normal !important;
}
.login-panel {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px !important;
  background: #f4f4f1 !important;
  color: #111 !important;
}
.login-form-wrap {
  width: min(360px, 100%) !important;
}
.login-form-wrap .form-eyebrow {
  color: #5a6466 !important;
  letter-spacing: 1.5px !important;
}
.login-form-wrap h1 {
  margin: 12px 0 7px !important;
  color: #111 !important;
  font-size: 28px !important;
  letter-spacing: -0.7px !important;
}
.form-muted {
  color: #667074 !important;
}
.login-form-wrap label {
  display: block !important;
  margin-top: 20px !important;
  color: #3f4b4e !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.login-form-wrap input {
  height: 46px !important;
  margin-top: 8px !important;
  border: 1px solid #cfd5d5 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #121516 !important;
}
.login-form-wrap input:focus {
  border-color: #16aac5 !important;
  box-shadow: 0 0 0 3px #16c4e622 !important;
}
.login-submit {
  width: 100% !important;
  height: 46px !important;
  margin-top: 24px !important;
  border-radius: 6px !important;
  background: #111 !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.guest-login {
  width: 100% !important;
  height: 44px !important;
  border: 1px solid #cdd2d2 !important;
  border-radius: 6px !important;
  color: #243034 !important;
  background: #fff !important;
}
.guest-login:hover {
  border-color: #16aac5 !important;
}
.login-divider {
  margin: 22px 0 !important;
  color: #8a9293 !important;
}
.login-note {
  color: #7c8587 !important;
}
.back-link {
  position: absolute !important;
  top: 30px !important;
  left: 34px !important;
  color: #566366 !important;
  font-size: 12px !important;
}
@media (max-width: 760px) {
  .welcome-nav {
    height: 64px !important;
    padding: 0 18px !important;
  }
  .welcome-brand .brand-logo {
    width: 118px !important;
    height: 32px !important;
  }
  .runway-links {
    display: none !important;
  }
  .welcome-nav-actions {
    gap: 3px !important;
  }
  .welcome-nav-actions .quiet-link,
  .welcome-nav-actions .welcome-cta {
    height: 32px !important;
    font-size: 12px !important;
  }
  .welcome-main {
    inset: 64px 0 0 !important;
    padding: 0 22px 48px !important;
  }
  .welcome-copy h1 {
    font-size: clamp(48px, 13vw, 70px) !important;
    letter-spacing: -2px !important;
  }
  .welcome-copy p {
    font-size: 13px !important;
  }
  .welcome-actions {
    gap: 16px !important;
  }
  .login-screen {
    grid-template-columns: 1fr !important;
  }
  .login-aside {
    display: none !important;
  }
  .login-panel {
    padding: 28px 22px !important;
  }
}

/* Login fields stay stacked and occupy one predictable column. */
.login-form-wrap form {
  display: block !important;
  width: 100% !important;
}
.login-form-wrap form.hidden {
  display: none !important;
}
.login-form-wrap label {
  display: block !important;
  width: 100% !important;
  margin-top: 20px !important;
  line-height: 1.35 !important;
}
.login-form-wrap input {
  display: block !important;
  width: 100% !important;
  height: 46px !important;
  margin-top: 8px !important;
  padding: 0 13px !important;
  line-height: 46px !important;
}
.login-submit,
.guest-login {
  display: block !important;
  width: 100% !important;
}
.referral-notice {
  margin: 16px 0 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #b9e8ef !important;
  border-radius: 6px !important;
  background: #eefbfc !important;
  color: #167487 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
.auth-switch {
  display: flex !important;
  gap: 8px !important;
  margin: 24px 0 4px !important;
  border-bottom: 1px solid #d9dddd !important;
}
.auth-switch button {
  height: 36px !important;
  padding: 0 4px !important;
  margin-right: 16px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: #6b7476 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.auth-switch button.active {
  border-bottom-color: #111 !important;
  color: #111 !important;
}
.code-field {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
  align-items: end !important;
  gap: 10px !important;
}
.code-field label {
  min-width: 0 !important;
}
.code-button {
  height: 46px !important;
  border: 1px solid #cfd5d5 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #243034 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.code-button:disabled {
  opacity: 0.55 !important;
  cursor: wait !important;
}
.app-shell #prompt {
  background: #cfd3d4 !important;
  border-color: #aeb6b8 !important;
  color: #171d1f !important;
}
.app-shell #prompt::placeholder {
  color: #626d70 !important;
}
.points-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 17px !important;
  height: 17px !important;
  margin-right: 5px !important;
  border: 1px solid currentColor !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  line-height: 1 !important;
  vertical-align: -2px !important;
}
.credit-chip .points-icon {
  width: 15px !important;
  height: 15px !important;
  margin-right: 4px !important;
}
.domain-gateway-note {
  display: grid !important;
  gap: 6px !important;
  padding: 13px 14px !important;
  border: 1px solid #cbdfe2 !important;
  border-radius: 9px !important;
  background: #eff9fa !important;
  color: #176675 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
.domain-gateway-note span {
  color: #547980 !important;
  font-size: 11px !important;
}
.recharge-card {
  width: min(520px, calc(100vw - 32px));
  background: #f7f8f8 !important;
  color: #20282b !important;
}
.recharge-card .dialog-head {
  margin-bottom: 18px !important;
}
.recharge-card .dialog-head h3 {
  font-size: 20px !important;
  letter-spacing: -0.02em;
}
.balance-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  border: 1px solid #d7ddde !important;
  border-radius: 10px !important;
  background: #e8ecec !important;
}
.balance-hero > span {
  color: #68777a !important;
  font-size: 12px !important;
}
.balance-hero strong {
  color: #1e2a2d !important;
  font-size: 20px !important;
}
.balance-hero .points-icon,
.recharge-summary .points-icon {
  color: #118da0 !important;
  border-color: #118da0 !important;
}
.recharge-options {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-top: 16px !important;
}
.recharge-option {
  position: relative !important;
  min-height: 68px !important;
  padding: 12px 10px !important;
  border: 1px solid #cfd7d8 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #2b383b !important;
  text-align: left !important;
}
.recharge-option strong,
.recharge-option span {
  display: block !important;
}
.recharge-option strong {
  font-size: 17px !important;
}
.recharge-option span {
  margin-top: 3px !important;
  color: #6d7b7e !important;
  font-size: 11px !important;
}
.recharge-option em {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  background: #dff4f6 !important;
  color: #087b8b !important;
  font-size: 10px !important;
  font-style: normal !important;
}
.recharge-option.selected {
  border-color: #12b7d2 !important;
  box-shadow: 0 0 0 2px #12b7d222 !important;
  background: #f0fbfc !important;
}
.recharge-custom input {
  background: #fff !important;
  border-color: #cfd7d8 !important;
}
.recharge-summary {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 14px !important;
}
.recharge-summary > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 12px !important;
  border-radius: 8px !important;
  background: #edf1f1 !important;
  color: #667578 !important;
  font-size: 11px !important;
}
.recharge-summary strong {
  color: #263336 !important;
  font-size: 14px !important;
}
.recharge-summary .points-icon {
  width: 14px !important;
  height: 14px !important;
  margin-right: 3px !important;
  font-size: 9px !important;
}
.recharge-summary-money {
  color: #0b8596 !important;
}
.recharge-detail-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 14px !important;
}
.recharge-detail-grid > div {
  display: flex !important;
  gap: 9px !important;
  padding: 11px !important;
  border: 1px solid #dce2e2 !important;
  border-radius: 8px !important;
  background: #fbfcfc !important;
}
.detail-icon {
  display: grid !important;
  flex: 0 0 24px !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  background: #dff4f6 !important;
  color: #0b8ea0 !important;
  font-size: 13px !important;
}
.recharge-detail-grid p {
  margin: 0 !important;
}
.recharge-detail-grid b,
.recharge-detail-grid small {
  display: block !important;
}
.recharge-detail-grid b {
  color: #2c393c !important;
  font-size: 11px !important;
}
.recharge-detail-grid small {
  margin-top: 3px !important;
  color: #778487 !important;
  font-size: 10px !important;
  line-height: 1.55 !important;
}
.recharge-safe-note {
  margin: 13px 0 0 !important;
  color: #7b898b !important;
  font-size: 10px !important;
}
.preview-stage > img,
.preview-stage > video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
.task-thumb {
  width: 110px !important;
  height: 62px !important;
  min-width: 110px !important;
  overflow: hidden !important;
}
.task-thumb img,
.task-thumb video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}
.task-row {
  min-height: 90px !important;
  overflow: hidden !important;
}
@media (max-width: 620px) {
  .task-thumb {
    width: 70px !important;
    min-width: 70px !important;
    height: 62px !important;
  }
}

/* The task page uses the light Lib surface; override the earlier dark console row. */
.app-shell #tasksView .section-heading h2 {
  color: var(--lib-ink) !important;
}
.app-shell #tasksView .section-heading p {
  color: var(--lib-muted) !important;
}
.app-shell #tasksView .task-row {
  background: rgba(255,255,252,.82) !important;
  border-color: rgba(21,21,21,.12) !important;
  color: var(--lib-ink) !important;
  box-shadow: 0 10px 24px rgba(25,26,24,.055) !important;
}
.app-shell #tasksView .task-row:hover {
  background: #fff !important;
  border-color: var(--lib-line-strong) !important;
  transform: translateY(-1px) !important;
}
.app-shell #tasksView .task-thumb {
  background: #e7e7e1 !important;
  border-color: rgba(21,21,21,.1) !important;
}
.app-shell #tasksView .task-info h4 {
  color: var(--lib-ink) !important;
}
.app-shell #tasksView .task-info p,
.app-shell #tasksView .task-info-top {
  color: var(--lib-muted) !important;
}
.app-shell #tasksView .task-kind-label {
  color: var(--lib-accent) !important;
}

.toast { z-index: 2147483647 !important; }
.task-row-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.task-preview-btn { height:32px; padding:0 14px; border:1px solid #3a3d40; border-radius:8px; background:#252729; color:#fff; font-size:11px; font-weight:700; }
.task-preview-btn:hover { background:#18c4e6; border-color:#18c4e6; color:#071012; }
.task-row.can-preview .task-thumb { cursor:zoom-in; }
.side-task-row em {
  display: block;
  max-width: calc(100% - 42px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  color: #f09b9b;
  font-size: 10px;
  line-height: 1.35;
}
.asset-item img,
.asset-item video,
.asset-thumb,
.library-grid img,
.library-grid video {
  object-fit: contain !important;
  background: #0b0d0e !important;
}
.asset-item img,
.asset-item video {
  display: block;
}
.history-preview-dialog { width:min(1120px,calc(100vw - 40px)) !important; max-width:none !important; padding:0 !important; border:0 !important; border-radius:16px !important; background:#111315 !important; color:#fff !important; overflow:hidden !important; }
.history-preview-dialog::backdrop { background:rgba(0,0,0,.78) !important; backdrop-filter:blur(5px); }
.history-preview-card { padding:20px !important; }
.history-preview-card .dialog-head { margin-bottom:16px !important; }
.history-preview-card .dialog-head p { color:#8f999c !important; }
.history-preview-stage { display:grid; place-items:center; width:100%; height:min(72vh,760px); min-height:360px; overflow:hidden; border-radius:12px; background:#08090a; }
.history-preview-stage img,.history-preview-stage video { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; }
.history-preview-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
@media(max-width:620px){.task-row-actions{grid-column:2;justify-content:flex-start}.history-preview-dialog{width:calc(100vw - 18px)!important}.history-preview-stage{height:65vh;min-height:260px}}

.app-shell #prompt {
  background: #d9dedf !important;
  color: #07090a !important;
  border-color: #c4cacc !important;
}
.app-shell #prompt::placeholder {
  color: #596166 !important;
}
.app-shell #prompt:focus {
  border-color: #18c4e6 !important;
  box-shadow: 0 0 0 3px rgba(24, 196, 230, 0.16) !important;
}
.app-shell .preview-stage.image-preview {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-height: min(70vh, 680px) !important;
  margin: 0 auto !important;
  background: #08090a !important;
}
.app-shell .preview-stage.image-preview[data-ratio="1:1"] {
  aspect-ratio: 1 / 1 !important;
}
.app-shell .preview-stage.image-preview[data-ratio="9:16"] {
  aspect-ratio: 9 / 16 !important;
}
.app-shell .preview-stage.image-preview[data-ratio="16:9"] {
  aspect-ratio: 16 / 9 !important;
}
.app-shell .preview-stage.video-preview {
  min-height: 450px !important;
}
.app-shell .preview-stage.image-preview > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #08090a !important;
}
.app-shell .asset-item {
  width: 90px !important;
  flex: 0 0 90px !important;
  max-width: 90px !important;
  overflow: visible !important;
}
.app-shell #assetGrid .asset-item > img,
.app-shell #assetGrid .asset-item > video {
  width: 90px !important;
  height: 70px !important;
  max-width: 90px !important;
  max-height: 70px !important;
  object-fit: contain !important;
}

/* Keep the console usable on phones: no desktop grid minimums or horizontal overflow. */
@media (max-width: 767px) {
  html, body { min-width: 0; overflow-x: hidden; }
  .app-shell { width: 100%; min-width: 0; }
  .app-shell .sidebar {
    width: 64px;
    min-width: 64px;
    padding: 16px 7px 12px;
  }
  .app-shell .brand-logo { width: 48px; height: 27px; }
  .app-shell .new-btn { margin: 17px 0 12px; }
  .app-shell .main { width: calc(100% - 64px); min-width: 0; }
  .app-shell .topbar {
    min-height: 62px;
    height: auto;
    padding: 10px 9px;
    gap: 7px;
  }
  .app-shell .topbar > div:first-child { min-width: 0; }
  .app-shell .topbar h1 {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }
  .app-shell .topbar p { display: none; }
  .app-shell .top-actions { gap: 4px; flex-shrink: 0; }
  .app-shell .home-btn,
  .app-shell .balance-btn { height: 30px; padding: 0 7px; font-size: 10px; }
  .app-shell .home-btn span { font-size: 14px; }
  .app-shell .balance-btn { gap: 3px; }
  .app-shell .balance-btn .points-icon { display: none; }
  .app-shell .icon-btn { width: 26px; font-size: 18px; }
  .app-shell .avatar { width: 29px; height: 29px; font-size: 12px; }
  .app-shell .content { min-height: 0; padding: 14px 9px 24px; }
  .app-shell .hero-copy { margin: 0 0 14px; padding: 17px 14px; }
  .app-shell .hero-copy h2 { font-size: 21px; line-height: 1.35; }
  .app-shell .hero-copy p { font-size: 11px; line-height: 1.5; }
  .app-shell .workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
  }
  .app-shell .workspace-grid > * { width: 100%; min-width: 0; grid-column: auto; }
  .app-shell .panel { padding: 14px; border-radius: 10px; }
  .app-shell .composer { min-height: 0; }
  .app-shell .panel-head { margin-bottom: 15px; gap: 8px; }
  .app-shell .panel h3 { font-size: 15px; }
  .app-shell .credit-chip { padding: 6px 8px; font-size: 10px; white-space: nowrap; }
  .app-shell .model-row { flex-wrap: wrap; overflow: visible; }
  .app-shell .model-chip { min-width: 0; flex: 1 1 112px; padding: 9px 10px; }
  .app-shell textarea { min-height: 128px; font-size: 12px; }
  .app-shell .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .app-shell .control select { min-width: 0; font-size: 11px; }
  .app-shell .generate-btn { margin-top: 17px; height: 42px; font-size: 12px; }
  .app-shell .generate-row { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; margin-top: 17px !important; }
  .app-shell .generate-row .generate-btn { width: 100% !important; height: 42px !important; }
  .app-shell .generate-row .credit-chip { width: 100% !important; justify-content: center !important; min-height: 38px !important; border-radius: 12px !important; }
  .app-shell .preview { min-height: 390px; }
  .app-shell .preview-stage { min-height: 290px; border-radius: 8px; }
  .app-shell .task-sidebar { min-height: 0; }
  .app-shell .side-task-list { max-height: 250px; grid-template-columns: 1fr; }
  .app-shell .side-task-row strong,
  .app-shell .side-task-row small { max-width: calc(100% - 38px); }
  .app-shell .canvas-toolbar { align-items: flex-start; }
  .app-shell .canvas-toolbar h2 { font-size: 20px; }
  .app-shell .canvas-actions { width: 100%; overflow-x: auto; padding-bottom: 3px; }
  .app-shell .canvas-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .app-shell .canvas-inspector { min-height: 0; }
  .app-shell .canvas-stage { min-height: 430px; }
}

/* Console visual polish */
.app-shell {
  background:
    radial-gradient(circle at 78% -12%, rgba(27, 212, 240, 0.1), transparent 30%),
    linear-gradient(180deg, #101112 0%, #0b0c0d 100%) !important;
  color: #f7f8f8 !important;
}
.app-shell .sidebar {
  width: 248px !important;
  padding: 28px 20px 18px !important;
  background: rgba(17, 18, 19, 0.97) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 18px 0 60px rgba(0, 0, 0, 0.2) !important;
}
.app-shell .brand {
  padding: 0 4px 28px !important;
}
.app-shell .brand-logo {
  width: 132px !important;
  height: 42px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
.app-shell .new-btn {
  height: 42px !important;
  margin: 20px 0 18px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  background: #20c6e8 !important;
  color: #051013 !important;
  box-shadow: 0 14px 34px rgba(32, 198, 232, 0.22) !important;
  letter-spacing: -0.02em !important;
}
.app-shell .new-btn:hover {
  filter: brightness(1.08) !important;
}
.app-shell .nav-list {
  gap: 7px !important;
}
.app-shell .nav-item {
  position: relative !important;
  height: 42px !important;
  padding: 0 13px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: #c8ced0 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
}
.app-shell .nav-item:hover {
  background: #202324 !important;
  color: #fff !important;
  border-color: #2d3436 !important;
}
.app-shell .nav-item.active {
  background: #2d2f31 !important;
  color: #fff !important;
  border-color: #343a3d !important;
}
.app-shell .nav-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: #20c6e8 !important;
}
.app-shell .nav-icon {
  color: #ecf2f3 !important;
}
.app-shell .main {
  width: calc(100% - 248px) !important;
}
.app-shell .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 12 !important;
  height: 76px !important;
  padding: 0 clamp(22px, 3vw, 42px) !important;
  background: rgba(16, 17, 18, 0.86) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) !important;
}
.app-shell .topbar h1 {
  font-size: 22px !important;
  letter-spacing: -0.05em !important;
}
.app-shell .topbar p {
  color: #8f9a9d !important;
}
.app-shell .home-btn,
.app-shell .balance-btn,
.app-shell .icon-btn,
.app-shell .avatar {
  border-radius: 12px !important;
  background: #202224 !important;
  border: 1px solid #33383b !important;
  color: #fff !important;
}
.app-shell .balance-btn {
  padding: 0 14px !important;
}
.app-shell .points-icon {
  color: #20c6e8 !important;
  border-color: rgba(32, 198, 232, 0.62) !important;
}
.app-shell .content {
  max-width: 1540px !important;
  padding: 28px clamp(18px, 3vw, 44px) 54px !important;
}
.app-shell .hero-copy {
  margin: 8px 0 18px !important;
  padding: 28px 22px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(32, 198, 232, 0.08), transparent 45%),
    #101112 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  text-align: center !important;
}
.app-shell .hero-copy h2 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: clamp(24px, 3vw, 38px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.08em !important;
}
.app-shell .hero-copy h2 span {
  color: #f7f8f8 !important;
}
.app-shell .hero-copy p {
  color: #97a1a4 !important;
}
.app-shell .workspace-grid {
  grid-template-columns: minmax(420px, 1.08fr) minmax(360px, 0.86fr) 254px !important;
  gap: 16px !important;
}
.app-shell .panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    #151617 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24) !important;
}
.app-shell .panel h3 {
  color: #fff !important;
  font-size: 18px !important;
  letter-spacing: -0.04em !important;
}
.app-shell .muted,
.app-shell .field-label small,
.app-shell .form-note {
  color: #8d989b !important;
}
.app-shell .field-label {
  color: #b8c1c4 !important;
}
.app-shell .credit-chip {
  min-height: 36px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: 999px !important;
  background: #26282b !important;
  color: #fff !important;
}
.app-shell .model-chip {
  min-height: 62px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: #17191a !important;
  border-color: #343a3d !important;
  color: #cbd3d5 !important;
}
.app-shell .model-chip.selected {
  background: #f1f2f2 !important;
  border-color: #f1f2f2 !important;
  color: #090b0c !important;
}
.app-shell .model-chip strong {
  font-size: 13px !important;
}
.app-shell .model-chip small {
  color: inherit !important;
  opacity: 0.72 !important;
  white-space: normal !important;
  line-height: 1.35 !important;
}
.app-shell #prompt {
  min-height: 136px !important;
  border-radius: 15px !important;
  background: #d5d9da !important;
  border-color: #b8c0c2 !important;
  color: #101314 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
.app-shell #prompt:focus {
  border-color: #20c6e8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 0 0 3px rgba(32, 198, 232, 0.18) !important;
}
.app-shell .quick-prompts button {
  height: 30px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background: #202224 !important;
  color: #dce2e3 !important;
}
.app-shell .upload-tile {
  background: #0d0f10 !important;
  border-color: #3d4548 !important;
  border-radius: 14px !important;
}
.app-shell .upload-tile span {
  color: #dffbff !important;
}
.app-shell .controls {
  gap: 12px !important;
}
.app-shell .control select {
  height: 38px !important;
  border-radius: 12px !important;
  background: #17191a !important;
  border-color: #343a3d !important;
  color: #fff !important;
}
.app-shell .generate-btn {
  height: 48px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #e7e8e8, #a8acad) !important;
  color: #07090a !important;
  box-shadow: 0 18px 50px rgba(255, 255, 255, 0.08) !important;
}
.app-shell .generate-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
}
.app-shell .generate-row .generate-btn {
  flex: 1 1 auto !important;
  margin-top: 0 !important;
}
.app-shell .generate-row .credit-chip {
  flex: 0 0 auto !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  border-radius: 15px !important;
  background: #202224 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.app-shell .panel-head .credit-chip {
  display: none !important;
}
.app-shell .generate-btn:hover:not(:disabled) {
  filter: brightness(1.08) !important;
}
.app-shell .generate-btn:disabled {
  background: #707575 !important;
  color: #202324 !important;
}
.app-shell .preview-stage {
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 35%, #171b1d 0, #090a0b 70%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.app-shell .empty-visual p {
  color: #dbe5e7 !important;
}
.app-shell .play-orb {
  background: #191d1f !important;
  border: 1px solid #3b4447 !important;
  color: #fff !important;
}
.app-shell .secondary-btn,
.app-shell .primary-btn,
.app-shell .side-task-all {
  border-radius: 12px !important;
  background: #202224 !important;
  border: 1px solid #343a3d !important;
  color: #fff !important;
}
.app-shell .secondary-btn:hover,
.app-shell .side-task-all:hover {
  border-color: #20c6e8 !important;
  color: #9bf2ff !important;
}
.app-shell .task-sidebar {
  min-height: 636px !important;
}
.app-shell .side-task-list {
  gap: 10px !important;
}
.app-shell .side-task-row {
  min-height: 82px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: #1b1d1e !important;
  border-color: #343a3d !important;
}
.app-shell .side-task-row:hover {
  background: #1e282b !important;
  border-color: #20c6e8 !important;
}
.app-shell .side-task-kind {
  color: #20c6e8 !important;
  font-weight: 900 !important;
}
.app-shell .side-task-status.done {
  color: #69e5ab !important;
}
.app-shell .side-task-status.failed {
  color: #ff9aa0 !important;
}
.app-shell .task-row {
  background: #161819 !important;
  border-color: #303739 !important;
  border-radius: 16px !important;
}
.app-shell .task-thumb {
  border-radius: 12px !important;
  background: #222628 !important;
}
@media (max-width: 1260px) {
  .app-shell .workspace-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr) !important;
  }
  .app-shell .task-sidebar {
    grid-column: 1 / -1 !important;
    min-height: 210px !important;
  }
  .app-shell .side-task-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-height: 230px !important;
  }
}
@media (max-width: 767px) {
  .app-shell .sidebar {
    width: 68px !important;
    min-width: 68px !important;
    padding: 16px 8px 12px !important;
  }
  .app-shell .main {
    width: calc(100% - 68px) !important;
  }
  .app-shell .brand-logo {
    width: 52px !important;
    height: 28px !important;
    object-position: center !important;
  }
  .app-shell .content {
    padding: 14px 10px 26px !important;
  }
  .app-shell .workspace-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .app-shell .side-task-list {
    grid-template-columns: 1fr !important;
  }
}

/* Preview dialog viewport clamp */
.history-preview-dialog {
  width: min(980px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: hidden !important;
}
.history-preview-card {
  max-height: calc(100vh - 48px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}
.history-preview-stage {
  width: 100% !important;
  height: min(58vh, 620px) !important;
  min-height: 0 !important;
  max-height: calc(100vh - 190px) !important;
  overflow: hidden !important;
  align-self: center !important;
}
.history-preview-stage img,
.history-preview-stage video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
@media (max-width: 767px) {
  .history-preview-dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
  }
  .history-preview-card {
    padding: 14px !important;
    max-height: calc(100vh - 20px) !important;
  }
  .history-preview-stage {
    height: min(56vh, 420px) !important;
    max-height: calc(100vh - 170px) !important;
  }
}

/* Premium console deployment */
:root {
  --premium-bg: #050508;
  --premium-panel: rgba(15, 16, 24, .74);
  --premium-line: rgba(255,255,255,.105);
  --premium-text: #f7f7fb;
  --premium-muted: #8e91a3;
  --premium-cyan: #66f3ff;
  --premium-pink: #ff4fd8;
  --premium-lime: #c9ff5d;
  --premium-ease: cubic-bezier(.16, 1, .3, 1);
}
body:has(.app-shell:not(.hidden)) {
  overflow: hidden;
  background: var(--premium-bg) !important;
  color: var(--premium-text) !important;
  font-family: "Noto Sans SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", sans-serif !important;
}
body:has(.app-shell:not(.hidden))::before,
body:has(.app-shell:not(.hidden))::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body:has(.app-shell:not(.hidden))::before {
  background:
    radial-gradient(48vw 34vw at 78% 18%, rgba(102,243,255,.24), transparent 60%),
    radial-gradient(42vw 38vw at 62% 74%, rgba(255,79,216,.20), transparent 62%),
    radial-gradient(32vw 28vw at 26% 36%, rgba(201,255,93,.10), transparent 68%);
  filter: blur(34px) saturate(1.25);
  opacity: .8;
  animation: kokoLiquidDrift 14s ease-in-out infinite alternate;
}
body:has(.app-shell:not(.hidden))::after {
  opacity: .25;
  background:
    linear-gradient(115deg, transparent 0 47%, rgba(255,255,255,.06) 47.4% 47.7%, transparent 48.2%),
    linear-gradient(65deg, transparent 0 54%, rgba(102,243,255,.055) 54.4% 54.7%, transparent 55.1%);
  background-size: 180px 180px, 220px 220px;
  animation: kokoMeshSlide 18s linear infinite;
}
@keyframes kokoLiquidDrift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(2%, 1.5%, 0) scale(1.05); }
  100% { transform: translate3d(0, -1.6%, 0) scale(1.03); }
}
@keyframes kokoMeshSlide { to { background-position: 180px 90px, -220px 110px; } }
.app-shell {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 236px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 78% 6%, rgba(102,243,255,.14), transparent 30%),
    radial-gradient(circle at 20% 92%, rgba(255,79,216,.12), transparent 32%),
    #050508 !important;
  color: var(--premium-text) !important;
  isolation: isolate !important;
}
.app-shell::before,
.app-shell::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}
.app-shell::before {
  z-index: -1 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E") !important;
  opacity: .12 !important;
  mix-blend-mode: overlay !important;
}
.app-shell::after {
  z-index: -1 !important;
  width: 58vw !important;
  height: 58vw !important;
  left: auto !important;
  right: -16vw !important;
  top: -22vw !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: conic-gradient(from 70deg, transparent, rgba(102,243,255,.14), transparent, rgba(255,79,216,.12), transparent) !important;
  mask: radial-gradient(circle, transparent 52%, black 54%, black 57%, transparent 59%) !important;
  animation: kokoOrbit 24s linear infinite !important;
}
@keyframes kokoOrbit { to { transform: rotate(360deg); } }
.app-shell .sidebar {
  width: 236px !important;
  min-width: 236px !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 22px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(180deg, rgba(8,8,12,.88), rgba(8,8,12,.62)) !important;
  border-right: 1px solid var(--premium-line) !important;
  border-bottom: 0 !important;
  backdrop-filter: blur(28px) !important;
  box-shadow: none !important;
}
.app-shell .brand {
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
}
.app-shell .brand-logo {
  width: 130px !important;
  height: 38px !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.42)) !important;
}
.app-shell .new-btn {
  width: 100% !important;
  height: 46px !important;
  margin: 20px 0 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #f7f7fb !important;
  color: #07070a !important;
  font-weight: 900 !important;
  text-align: center !important;
  box-shadow: 0 18px 42px rgba(255,255,255,.15) !important;
}
.app-shell .new-btn::before { display: none !important; }
.app-shell .nav-list {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  overflow: visible !important;
}
.app-shell .nav-item {
  position: relative !important;
  width: 100% !important;
  height: 46px !important;
  display: grid !important;
  grid-template-columns: 22px 1fr auto !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 0 13px !important;
  border-radius: 16px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #989cac !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  transition: transform .24s var(--premium-ease), color .24s var(--premium-ease), background .24s var(--premium-ease), border-color .24s var(--premium-ease) !important;
}
.app-shell .nav-item:hover {
  transform: translateX(3px) !important;
  color: #fff !important;
  background: rgba(255,255,255,.055) !important;
  border-color: var(--premium-line) !important;
}
.app-shell .nav-item.active {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.045)) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 0 0 1px rgba(102,243,255,.08) !important;
}
.app-shell .nav-item.active::before {
  content: "" !important;
  display: block !important;
  width: 4px !important;
  height: 22px !important;
  position: absolute !important;
  left: 0 !important;
  top: 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,var(--premium-cyan),var(--premium-pink)) !important;
  box-shadow: 0 0 20px rgba(102,243,255,.7) !important;
}
.app-shell .nav-list .nav-item::after { display: none !important; }
.app-shell .nav-icon {
  width: 18px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  color: currentColor !important;
  opacity: .88 !important;
  font-size: 14px !important;
}
.app-shell .nav-item em {
  width: 24px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(102,243,255,.13) !important;
  color: var(--premium-cyan) !important;
  font-style: normal !important;
  font-size: 11px !important;
}
.app-shell .sidebar-foot {
  display: grid !important;
  gap: 10px !important;
  margin-top: auto !important;
}
.app-shell .status-pill {
  padding: 13px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid var(--premium-line) !important;
  color: var(--premium-muted) !important;
}
.app-shell .dot { background: var(--premium-lime) !important; box-shadow: 0 0 16px rgba(201,255,93,.8) !important; }
.app-shell .main {
  width: auto !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: 72px minmax(0, 1fr) !important;
}
.app-shell .topbar {
  position: relative !important;
  top: auto !important;
  z-index: 12 !important;
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 0 28px !important;
  background: rgba(8,8,12,.52) !important;
  border-bottom: 1px solid var(--premium-line) !important;
  backdrop-filter: blur(26px) !important;
}
.app-shell .topbar h1 {
  margin: 0 !important;
  color: #fff !important;
  font: 700 22px/1 "Space Grotesk", Manrope, "HarmonyOS Sans SC", sans-serif !important;
  letter-spacing: -.045em !important;
}
.app-shell .topbar p {
  margin: 7px 0 0 !important;
  color: var(--premium-muted) !important;
  font-size: 12px !important;
}
.app-shell .top-actions { display: flex !important; align-items: center !important; gap: 10px !important; }
.app-shell .home-btn,
.app-shell .balance-btn,
.app-shell .icon-btn,
.app-shell .avatar,
.app-shell .text-btn {
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 14px !important;
  border: 1px solid var(--premium-line) !important;
  background: rgba(255,255,255,.055) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  backdrop-filter: blur(14px) !important;
}
.app-shell .balance-btn .points-icon {
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(102,243,255,.12) !important;
  color: var(--premium-cyan) !important;
  border: 1px solid rgba(102,243,255,.35) !important;
  font-size: 11px !important;
}
.app-shell .content {
  position: relative !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: auto !important;
  padding: 22px 28px 28px !important;
}
.app-shell .hero-copy {
  position: relative !important;
  min-height: 112px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 24px !important;
  align-items: center !important;
  margin: 0 0 16px !important;
  padding: 20px 22px !important;
  border-radius: 30px !important;
  border: 1px solid var(--premium-line) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
  box-shadow: 0 40px 120px rgba(0,0,0,.55) !important;
  overflow: hidden !important;
  text-align: left !important;
}
.app-shell .hero-copy::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  background: radial-gradient(circle at 74% 18%, rgba(102,243,255,.26), transparent 24%), linear-gradient(100deg, transparent 0 28%, rgba(255,255,255,.12) 42%, transparent 58%) !important;
  opacity: .7 !important;
}
.app-shell .hero-copy::after {
  content: "10\A并发上限\A\A100\A积分起充\A\A15s\A视频保留" !important;
  white-space: pre !important;
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 96px) !important;
  grid-auto-flow: column !important;
  gap: 10px !important;
  align-items: center !important;
  width: 308px !important;
  height: 70px !important;
  color: transparent !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.22)) 0 0 / 96px 70px no-repeat,
    linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.22)) 106px 0 / 96px 70px no-repeat,
    linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.22)) 212px 0 / 96px 70px no-repeat !important;
  border-radius: 18px !important;
}
.app-shell .hero-copy h2,
.app-shell .hero-copy p { position: relative !important; z-index: 1 !important; }
.app-shell .hero-copy h2 {
  margin: 0 !important;
  max-width: 820px !important;
  color: #fff !important;
  font: 700 clamp(30px,4.4vw,58px)/.9 "Space Grotesk", Manrope, "HarmonyOS Sans SC", sans-serif !important;
  letter-spacing: -.07em !important;
}
.app-shell .hero-copy h2 span { color: #fff !important; }
.app-shell .hero-copy p {
  max-width: 720px !important;
  margin: 12px 0 0 !important;
  color: #a7aabd !important;
  line-height: 1.5 !important;
  font-size: 14px !important;
}
.app-shell .workspace-grid {
  display: grid !important;
  grid-template-columns: minmax(410px, 1.02fr) minmax(380px, .96fr) 300px !important;
  gap: 16px !important;
}
.app-shell .panel {
  position: relative !important;
  min-width: 0 !important;
  border-radius: 28px !important;
  border: 1px solid var(--premium-line) !important;
  background: var(--premium-panel) !important;
  box-shadow: 0 40px 120px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(28px) !important;
  overflow: hidden !important;
  padding: 24px !important;
}
.app-shell .panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.13), transparent 28%) !important;
  opacity: 0 !important;
  transition: opacity .22s var(--premium-ease) !important;
}
.app-shell .panel:hover::before { opacity: 1 !important; }
.app-shell .panel-head {
  position: relative !important;
  z-index: 1 !important;
  min-height: 64px !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  align-items: flex-start !important;
  margin-bottom: 16px !important;
}
.app-shell .panel h3 {
  margin: 0 !important;
  color: #fff !important;
  font: 700 18px/1 "Space Grotesk", Manrope, "HarmonyOS Sans SC", sans-serif !important;
  letter-spacing: -.045em !important;
}
.app-shell .muted,
.app-shell .panel-head span,
.app-shell .form-note,
.app-shell .field-label small { color: var(--premium-muted) !important; }
.app-shell .composer > * { position: relative !important; z-index: 1 !important; }
.app-shell .model-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; overflow: visible !important; }
.app-shell .model-chip {
  min-height: 72px !important;
  border: 1px solid var(--premium-line) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.05) !important;
  color: #f8f8fb !important;
  text-align: left !important;
  padding: 13px !important;
  transition: transform .22s var(--premium-ease), background .22s var(--premium-ease) !important;
}
.app-shell .model-chip:hover { transform: translateY(-2px) !important; }
.app-shell .model-chip.selected { background: #f8f8fb !important; color: #07070a !important; }
.app-shell .model-chip strong { display: block !important; font-size: 13px !important; }
.app-shell .model-chip small { display: block !important; margin-top: 7px !important; color: currentColor !important; opacity: .68 !important; line-height: 1.35 !important; font-size: 11px !important; white-space: normal !important; }
.app-shell .field-label { color: #c2c5d2 !important; font-size: 12px !important; font-weight: 800 !important; }
.app-shell #prompt {
  width: 100% !important;
  min-height: 154px !important;
  resize: none !important;
  border-radius: 24px !important;
  border: 1px solid #f8f8ff !important;
  background: #dfe1e9 !important;
  color: #11131a !important;
  padding: 17px !important;
  line-height: 1.55 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.app-shell #prompt:focus { border-color: var(--premium-cyan) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 0 0 4px rgba(102,243,255,.14) !important; }
.app-shell .quick-prompts button,
.app-shell .tags button {
  height: 30px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  color: #e6e7ee !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.app-shell .upload-tile {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
}
.app-shell .control select {
  height: 42px !important;
  padding: 0 12px !important;
  border-radius: 16px !important;
  border: 1px solid var(--premium-line) !important;
  background: rgba(255,255,255,.055) !important;
  color: #fff !important;
}
.app-shell .generate-row { display: grid !important; grid-template-columns: 164px 1fr !important; gap: 12px !important; margin-top: 14px !important; }
.app-shell .generate-row .credit-chip {
  order: -1 !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 13px !important;
  border-radius: 18px !important;
  border: 1px solid var(--premium-line) !important;
  background: rgba(255,255,255,.055) !important;
  color: var(--premium-muted) !important;
}
.app-shell .generate-row .generate-btn {
  height: 52px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: #07070a !important;
  background: #f8f8fb !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
  box-shadow: 0 22px 56px rgba(255,255,255,.13) !important;
  overflow: hidden !important;
}
.app-shell .generate-row .generate-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  background: linear-gradient(105deg, transparent, rgba(102,243,255,.75), rgba(255,79,216,.38), transparent) !important;
  transform: translateX(-120%) !important;
  animation: kokoPremiumSweep 4s var(--premium-ease) infinite !important;
}
@keyframes kokoPremiumSweep { 0%,52%{transform:translateX(-120%)}72%,100%{transform:translateX(120%)} }
.app-shell .preview { min-height: 100% !important; }
.app-shell .preview-stage {
  position: relative !important;
  min-height: 514px !important;
  margin: 0 !important;
  border-radius: 26px !important;
  background: #090a10 !important;
  border: 1px solid var(--premium-line) !important;
  overflow: hidden !important;
  perspective: 1000px !important;
}
.app-shell .preview-stage .empty-visual {
  position: absolute !important;
  inset: 42px !important;
  display: grid !important;
  place-items: center !important;
  transform-style: preserve-3d !important;
  animation: kokoStackFloat 6.5s ease-in-out infinite !important;
}
@keyframes kokoStackFloat { 0%,100%{transform:rotateX(0deg) rotateY(-2deg) translateY(0)}50%{transform:rotateX(2deg) rotateY(3deg) translateY(-12px)} }
.app-shell .preview-stage .empty-visual::before,
.app-shell .preview-stage .empty-visual::after {
  content: "" !important;
  position: absolute !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: linear-gradient(135deg,#17151f,#5733ff,#050508) !important;
  box-shadow: 0 36px 100px rgba(0,0,0,.52) !important;
  opacity: .62 !important;
  inset: 28px !important;
  transform: translateY(28px) scale(.92) !important;
}
.app-shell .preview-stage .empty-visual::after {
  background: linear-gradient(135deg,#111827 0 25%,#5ff4ff 26% 34%,#29235c 35% 52%,#ff4fd8 53% 54%,#0c0c11 55%) !important;
  inset: 0 !important;
  opacity: 1 !important;
  transform: translateZ(80px) !important;
}
.app-shell .preview-stage .play-orb {
  position: relative !important;
  z-index: 2 !important;
  width: 72px !important;
  height: 72px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.38) !important;
}
.app-shell .preview-stage .empty-visual p,
.app-shell .preview-stage .empty-visual span { position: relative !important; z-index: 2 !important; color: rgba(255,255,255,.78) !important; }
.app-shell .task-sidebar { min-height: 100% !important; display: grid !important; grid-template-rows: auto 1fr auto !important; }
.app-shell .side-task-row {
  min-height: 82px !important;
  display: grid !important;
  gap: 8px !important;
  padding: 12px !important;
  border: 1px solid var(--premium-line) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.05) !important;
  text-align: left !important;
  color: #fff !important;
  position: relative !important;
  overflow: hidden !important;
  animation: kokoTaskIn .5s var(--premium-ease) both !important;
}
@keyframes kokoTaskIn { from{opacity:0;transform:translateY(16px);filter:blur(8px)} to{opacity:1;transform:translateY(0);filter:blur(0)} }
.app-shell .side-task-kind,
.app-shell .side-task-status { color: var(--premium-cyan) !important; font-size: 10px !important; font-weight: 900 !important; }
.app-shell .side-task-row strong { color: #fff !important; font-size: 12px !important; line-height: 1.25 !important; }
.app-shell .side-task-row small { color: var(--premium-muted) !important; font-size: 11px !important; }
dialog:has(> .recharge-card) {
  width: min(710px, calc(100vw - 48px)) !important;
  max-width: none !important;
  border-radius: 34px !important;
  background: rgba(247,248,255,.9) !important;
  box-shadow: 0 46px 140px rgba(0,0,0,.52) !important;
  backdrop-filter: blur(30px) !important;
}
dialog:has(> .recharge-card)::backdrop { background: rgba(5,5,8,.56) !important; backdrop-filter: blur(12px) !important; }
.recharge-card {
  width: 100% !important;
  margin: 0 !important;
  padding: 24px 26px 16px !important;
  border: 0 !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 86% 0%, rgba(102,243,255,.32), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(255,79,216,.18), transparent 36%),
    rgba(247,248,255,.9) !important;
  color: #101119 !important;
  box-shadow: none !important;
}
.recharge-card .dialog-head { padding-bottom: 16px !important; border-bottom: 1px solid rgba(0,0,0,.08) !important; margin-bottom: 16px !important; }
.recharge-card .dialog-head h3 { font: 700 25px/1 "Space Grotesk", Manrope, "HarmonyOS Sans SC", sans-serif !important; letter-spacing: -.06em !important; color: #101119 !important; }
.recharge-card .dialog-head p { color: #6c7080 !important; }
.recharge-options { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
.recharge-option {
  min-height: 90px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  background: rgba(255,255,255,.72) !important;
  padding: 14px !important;
  text-align: left !important;
  color: #101119 !important;
  transition: transform .24s var(--premium-ease), border-color .24s var(--premium-ease), box-shadow .24s var(--premium-ease) !important;
}
.recharge-option:hover { transform: translateY(-3px) !important; }
.recharge-option.selected { border-color: rgba(255,79,216,.5) !important; box-shadow: 0 0 0 4px rgba(255,79,216,.1), 0 22px 44px rgba(255,79,216,.12) !important; background: rgba(255,255,255,.84) !important; }
.recharge-option strong { display:block !important; font-size: 25px !important; letter-spacing: -.06em !important; color: #101119 !important; }
.recharge-option span { color:#717586 !important; font-size: 12px !important; }
.recharge-option em { float:right !important; margin-top:-2px !important; padding:4px 7px !important; border-radius:999px !important; color:#050508 !important; background:var(--premium-lime) !important; font-size:10px !important; font-style:normal !important; font-weight:900 !important; }
.recharge-custom label,
.recharge-custom { color:#747888 !important; font-size:12px !important; font-weight:900 !important; }
.recharge-custom input { height: 46px !important; border-radius: 18px !important; border:1px solid rgba(0,0,0,.11) !important; background:#fff !important; color:#101119 !important; padding:0 13px !important; }
.recharge-note,
.recharge-safe-note { color:#747888 !important; }
.recharge-summary { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 14px !important; }
.recharge-summary > div { min-height: 58px !important; display:flex !important; justify-content:space-between !important; align-items:center !important; border:1px solid rgba(0,0,0,.08) !important; border-radius:18px !important; background:rgba(255,255,255,.62) !important; color:#747888 !important; padding: 12px 14px !important; }
.recharge-summary strong { color:#101119 !important; font-size:16px !important; }
.recharge-summary-money { color:#d414ab !important; font-size:26px !important; }
.wechat-pay-panel { border-radius: 22px !important; background:#fff !important; border:1px solid rgba(0,0,0,.08) !important; }
.recharge-card .primary-btn { height:48px !important; border:0 !important; border-radius:18px !important; color:#fff !important; background:#101119 !important; font-weight:950 !important; box-shadow:0 18px 40px rgba(0,0,0,.18) !important; }
.recharge-card .secondary-btn { height:48px !important; border-radius:18px !important; background: rgba(255,255,255,.72) !important; color: #101119 !important; border-color: rgba(0,0,0,.1) !important; }
/* Keep the payment code inside the dialog viewport on short and narrow screens. */
dialog:has(> .recharge-card) {
  max-height: calc(100dvh - 24px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
dialog:has(> .recharge-card) > .recharge-card {
  min-height: 0 !important;
  box-sizing: border-box !important;
}
.wechat-pay-panel img#wechatPayQr {
  display: block !important;
  width: 144px !important;
  height: 144px !important;
  min-width: 144px !important;
  min-height: 144px !important;
  max-width: 144px !important;
  max-height: 144px !important;
  object-fit: contain !important;
  flex: 0 0 144px !important;
}
@media (max-width: 1260px) {
  .app-shell .workspace-grid { grid-template-columns: 1fr 330px !important; }
  .app-shell .task-sidebar { grid-column: 1 / -1 !important; }
  .app-shell .side-task-list { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 760px) {
  body:has(.app-shell:not(.hidden)) { overflow: auto !important; }
  .app-shell { grid-template-columns: 72px 1fr !important; }
  .app-shell .sidebar { width:72px !important; min-width:72px !important; padding:14px 8px !important; }
  .app-shell .brand-logo { width:54px !important; object-position:left !important; }
  .app-shell .new-btn,.app-shell .nav-item:not(.active),.app-shell .sidebar-foot { display:none !important; }
  .app-shell .nav-item { grid-template-columns:1fr !important; place-items:center !important; padding:0 !important; }
  .app-shell .topbar { padding:0 12px !important; }
  .app-shell .topbar p,.app-shell .home-btn { display:none !important; }
  .app-shell .content { padding:14px 10px !important; }
  .app-shell .hero-copy { grid-template-columns:1fr !important; }
  .app-shell .hero-copy::after { display:none !important; }
  .app-shell .hero-copy h2 { font-size:32px !important; }
  .app-shell .workspace-grid,.app-shell .model-row,.app-shell .generate-row,.recharge-summary,.recharge-options { grid-template-columns:1fr !important; }
  dialog:has(> .recharge-card) { width: calc(100vw - 20px) !important; }
  .wechat-pay-panel { grid-template-columns: 112px minmax(0, 1fr) !important; gap: 12px !important; }
  .wechat-pay-panel img#wechatPayQr { width: 112px !important; height: 112px !important; min-width: 112px !important; min-height: 112px !important; max-width: 112px !important; max-height: 112px !important; flex-basis: 112px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body:has(.app-shell:not(.hidden))::before,
  body:has(.app-shell:not(.hidden))::after,
  .app-shell::after,
  .app-shell .preview-stage .empty-visual,
  .app-shell .generate-row .generate-btn::before { animation: none !important; }
}

/* Premium deployment correction: real DOM has h2 and p as separate grid children. */
.app-shell .hero-copy h2 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  max-width: 860px !important;
  font-size: clamp(30px, 4vw, 54px) !important;
  line-height: .96 !important;
  letter-spacing: -.04em !important;
}
.app-shell .hero-copy p {
  grid-column: 1 !important;
  grid-row: 2 !important;
  max-width: 760px !important;
}
.app-shell .hero-copy::after {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}
@media (max-width: 980px) {
  .app-shell .hero-copy {
    grid-template-columns: 1fr !important;
  }
  .app-shell .hero-copy::after {
    display: none !important;
  }
}

/* Real hero stats, replacing earlier pseudo stat block. */
.app-shell .hero-copy::after { display: none !important; }
.app-shell .hero-stats {
  position: relative !important;
  z-index: 1 !important;
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  display: grid !important;
  grid-template-columns: repeat(3, 96px) !important;
  gap: 10px !important;
}
.app-shell .hero-stats span {
  min-height: 70px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,.22) !important;
  border: 1px solid var(--premium-line) !important;
  color: var(--premium-muted) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}
.app-shell .hero-stats b {
  display: block !important;
  margin-bottom: 4px !important;
  color: #fff !important;
  font-family: "Bricolage Grotesque", "Noto Sans SC", sans-serif !important;
  font-size: 21px !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
}
@media (max-width: 980px) {
  .app-shell .hero-stats {
    grid-column: 1 !important;
    grid-row: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 760px) {
  .app-shell .hero-stats { display: none !important; }
}

/* Density correction: keep the creation action visible on shallow desktop screens. */
@media (min-width: 1280px) {
  .app-shell {
    --console-edge: clamp(16px, 1.35vw, 26px);
  }
  .app-shell .main {
    grid-template-rows: 64px minmax(0, 1fr) !important;
  }
  .app-shell .topbar {
    min-height: 64px !important;
    padding: 0 var(--console-edge) !important;
  }
  .app-shell .topbar h1 {
    font-size: 23px !important;
    letter-spacing: -.035em !important;
  }
  .app-shell .topbar p {
    font-size: 12px !important;
  }
  .app-shell .content {
    padding: 16px var(--console-edge) 18px !important;
  }
  .app-shell .hero-copy {
    min-height: 94px !important;
    margin-bottom: 12px !important;
    padding: 16px 22px !important;
    border-radius: 26px !important;
  }
  .app-shell .hero-copy h2 {
    max-width: 720px !important;
    font-size: clamp(34px, 3.35vw, 50px) !important;
    line-height: .92 !important;
  }
  .app-shell .hero-copy p {
    max-width: 690px !important;
    margin-top: 9px !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
    color: rgba(222, 226, 239, .74) !important;
  }
  .app-shell .hero-stats {
    grid-template-columns: repeat(3, 86px) !important;
    gap: 8px !important;
  }
  .app-shell .hero-stats span {
    min-height: 58px !important;
    padding: 10px 11px !important;
    border-radius: 16px !important;
    font-size: 10px !important;
  }
  .app-shell .hero-stats b {
    font-size: 19px !important;
  }
  .app-shell .workspace-grid {
    grid-template-columns: minmax(520px, .94fr) minmax(430px, .9fr) 280px !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
  .app-shell .panel {
    border-radius: 24px !important;
    padding: 18px !important;
  }
  .app-shell .panel-head {
    min-height: 44px !important;
    margin-bottom: 12px !important;
  }
  .app-shell .panel h3 {
    font-size: 17px !important;
  }
  .app-shell .model-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .app-shell .model-chip {
    min-height: 58px !important;
    border-radius: 17px !important;
    padding: 11px 12px !important;
  }
  .app-shell .model-chip strong {
    font-size: 12px !important;
  }
  .app-shell .model-chip small {
    margin-top: 5px !important;
    font-size: 10px !important;
    line-height: 1.28 !important;
  }
  .app-shell .field-label,
  .app-shell .field-label-row {
    margin-top: 14px !important;
    margin-bottom: 7px !important;
  }
  .app-shell #prompt {
    min-height: 112px !important;
    border-radius: 20px !important;
    padding: 14px 16px !important;
    line-height: 1.45 !important;
  }
  .app-shell .quick-prompts {
    margin-top: 8px !important;
    gap: 7px !important;
  }
  .app-shell .quick-prompts button,
  .app-shell .tags button {
    height: 27px !important;
    padding: 0 11px !important;
    font-size: 11px !important;
  }
  .app-shell .asset-section {
    margin-top: 14px !important;
  }
  .app-shell .asset-grid {
    min-height: 62px !important;
    gap: 8px !important;
  }
  .app-shell .upload-tile {
    width: 82px !important;
    height: 62px !important;
    min-height: 62px !important;
    border-radius: 15px !important;
  }
  .app-shell .upload-tile span {
    font-size: 26px !important;
    line-height: 1 !important;
  }
  .app-shell .upload-tile small {
    font-size: 10px !important;
  }
  .app-shell .controls {
    margin-top: 11px !important;
    gap: 8px !important;
  }
  .app-shell .control select {
    height: 38px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
  }
  .app-shell .generate-row {
    grid-template-columns: 138px 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }
  .app-shell .generate-row .credit-chip,
  .app-shell .generate-row .generate-btn {
    height: 46px !important;
    border-radius: 16px !important;
  }
  .app-shell .form-note {
    margin-top: 8px !important;
    font-size: 11px !important;
  }
  .app-shell .preview-stage {
    min-height: clamp(360px, calc(100vh - 320px), 500px) !important;
  }
  .app-shell .task-sidebar {
    min-height: 0 !important;
  }
  .app-shell .side-task-list {
    max-height: calc(100vh - 250px) !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }
  .app-shell .side-task-row {
    min-height: 72px !important;
    gap: 6px !important;
    padding: 11px !important;
    border-radius: 18px !important;
  }
}

/* Preview placeholder correction: replace the loud stripe card with a quieter cinema monitor. */
.app-shell .preview-stage .empty-visual {
  inset: 28px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 68% 32%, rgba(102,243,255,.28), transparent 28%),
    radial-gradient(circle at 28% 72%, rgba(255,79,216,.16), transparent 32%),
    linear-gradient(145deg, #111827, #090a10 58%, #050508) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 34px 90px rgba(0,0,0,.48) !important;
  overflow: hidden !important;
}
.app-shell .preview-stage .empty-visual::before {
  inset: auto 9% 11% 9% !important;
  height: 34% !important;
  border-radius: 22px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 18px) !important;
  border-color: rgba(255,255,255,.12) !important;
  transform: none !important;
  opacity: .58 !important;
}
.app-shell .preview-stage .empty-visual::after {
  inset: 11% 10% auto 10% !important;
  height: 42% !important;
  border-radius: 24px !important;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(102,243,255,.22) 42% 44%, transparent 44%),
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.22), transparent 18%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.025)) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.42) !important;
  opacity: .9 !important;
  transform: none !important;
}
.app-shell .preview-stage .play-orb {
  width: 60px !important;
  height: 60px !important;
  margin-bottom: 76px !important;
  background:
    radial-gradient(circle at 38% 28%, rgba(255,255,255,.5), transparent 26%),
    linear-gradient(145deg, rgba(102,243,255,.45), rgba(255,255,255,.08)) !important;
}
.app-shell .preview-stage .empty-visual p {
  margin-top: -54px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}
.app-shell .preview-stage .empty-visual span {
  margin-top: -24px !important;
  font-size: 11px !important;
  color: rgba(226,229,240,.62) !important;
}

/* Light Gray Lib direction: final console layer. */
body:has(.app-shell:not(.hidden)) {
  --lib-bg: #ededeb;
  --lib-paper: #fafaf7;
  --lib-panel: rgba(255, 255, 252, .86);
  --lib-panel-solid: #fbfbf7;
  --lib-ink: #151515;
  --lib-muted: #676a6d;
  --lib-soft: #8b8f93;
  --lib-line: rgba(20, 20, 18, .12);
  --lib-line-strong: rgba(20, 20, 18, .2);
  --lib-accent: #2f6f64;
  --lib-accent-2: #d8a84f;
  --lib-danger: #b64747;
  --lib-shadow: 0 22px 60px rgba(25, 26, 24, .08);
  --lib-radius: 24px;
  margin: 0 !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 78% 8%, rgba(100, 137, 126, .2), transparent 32%),
    linear-gradient(180deg, #f4f3ef 0%, #e8e8e3 100%) !important;
  color: var(--lib-ink) !important;
  font-family: "Bricolage Grotesque", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}
body:has(.app-shell:not(.hidden))::before {
  opacity: .28 !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(21,21,18,.06), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)) !important;
  background-size: auto !important;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.18)) !important;
  animation: none !important;
}
body:has(.app-shell:not(.hidden))::after {
  opacity: .46 !important;
  background:
    radial-gradient(circle at 15% 80%, rgba(255,255,255,.88), transparent 24%),
    radial-gradient(circle at 83% 18%, rgba(47,111,100,.18), transparent 28%) !important;
  filter: blur(12px) !important;
  animation: none !important;
}
.app-shell {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 232px minmax(0, 1fr) !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  color: var(--lib-ink) !important;
}
.app-shell .sidebar {
  width: 232px !important;
  min-width: 232px !important;
  height: 100vh !important;
  padding: 18px 14px !important;
  background: rgba(247, 247, 243, .78) !important;
  border-right: 1px solid var(--lib-line) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.72) !important;
  backdrop-filter: blur(24px) saturate(1.05) !important;
}
.app-shell .brand-logo {
  width: 104px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: invert(1) contrast(1.15) !important;
}
.app-shell .new-btn {
  height: 40px !important;
  margin: 18px 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid #171717 !important;
  background: #171717 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  box-shadow: 0 14px 26px rgba(20,20,18,.13) !important;
}
.app-shell .nav-list {
  gap: 5px !important;
}
.app-shell .nav-item {
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #5f6467 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: -.01em !important;
}
.app-shell .nav-item:hover {
  background: rgba(255,255,255,.64) !important;
  border-color: var(--lib-line) !important;
  color: var(--lib-ink) !important;
  transform: translateX(2px) !important;
}
.app-shell .nav-item.active {
  background: #fff !important;
  border-color: rgba(21,21,21,.16) !important;
  color: var(--lib-ink) !important;
  box-shadow: 0 10px 28px rgba(25,26,24,.08) !important;
}
.app-shell .nav-item.active::before {
  width: 4px !important;
  height: 18px !important;
  border-radius: 99px !important;
  background: var(--lib-accent) !important;
  box-shadow: none !important;
}
.app-shell .nav-icon,
.app-shell .points-icon {
  color: inherit !important;
  filter: none !important;
}
.app-shell .nav-item em,
.app-shell .status-pill {
  background: rgba(47,111,100,.1) !important;
  color: var(--lib-accent) !important;
  border-color: rgba(47,111,100,.18) !important;
}
.app-shell .sidebar-foot {
  color: var(--lib-muted) !important;
}
.app-shell .main {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 62px minmax(0, 1fr) !important;
  background: transparent !important;
}
.app-shell .topbar {
  min-height: 62px !important;
  padding: 0 clamp(16px, 1.55vw, 28px) !important;
  background: rgba(248,248,244,.72) !important;
  border-bottom: 1px solid var(--lib-line) !important;
  backdrop-filter: blur(22px) !important;
}
.app-shell .topbar h1 {
  color: var(--lib-ink) !important;
  font-size: 21px !important;
  font-weight: 880 !important;
  letter-spacing: -.035em !important;
}
.app-shell .topbar p,
.app-shell .muted,
.app-shell .form-note,
.app-shell .field-label small {
  color: var(--lib-muted) !important;
}
.app-shell .top-actions {
  gap: 9px !important;
}
.app-shell .home-btn,
.app-shell .balance-btn,
.app-shell .icon-btn,
.app-shell .avatar,
.app-shell .text-btn,
.app-shell .secondary-btn {
  min-height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid var(--lib-line) !important;
  background: rgba(255,255,252,.74) !important;
  color: var(--lib-ink) !important;
  box-shadow: none !important;
}
.app-shell .home-btn:hover,
.app-shell .balance-btn:hover,
.app-shell .icon-btn:hover,
.app-shell .avatar:hover,
.app-shell .text-btn:hover,
.app-shell .secondary-btn:hover {
  border-color: var(--lib-line-strong) !important;
  background: #fff !important;
  transform: translateY(-1px) !important;
}
.app-shell .balance-btn b {
  color: var(--lib-ink) !important;
}
.app-shell .content {
  min-height: 0 !important;
  overflow: auto !important;
  padding: 16px clamp(16px, 1.55vw, 28px) 20px !important;
  color: var(--lib-ink) !important;
}
.app-shell .content::-webkit-scrollbar,
.app-shell .side-task-list::-webkit-scrollbar {
  width: 8px !important;
}
.app-shell .content::-webkit-scrollbar-thumb,
.app-shell .side-task-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: rgba(21,21,21,.22) content-box !important;
}
.app-shell .hero-copy {
  min-height: 96px !important;
  margin-bottom: 14px !important;
  padding: 18px 22px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(21,21,21,.12) !important;
  background:
    linear-gradient(100deg, rgba(255,255,255,.92), rgba(249,249,244,.8) 48%, rgba(224,232,226,.74)) !important;
  box-shadow: var(--lib-shadow) !important;
  overflow: hidden !important;
}
.app-shell .hero-copy::before {
  opacity: .38 !important;
  background:
    linear-gradient(90deg, rgba(21,21,21,.04) 1px, transparent 1px) 0 0 / 30px 100%,
    radial-gradient(circle at 84% 25%, rgba(47,111,100,.16), transparent 28%) !important;
  animation: none !important;
}
.app-shell .hero-copy h2 {
  max-width: 760px !important;
  color: #111 !important;
  font-family: "Bricolage Grotesque", "Noto Serif SC", "Noto Sans SC", sans-serif !important;
  font-size: clamp(36px, 3.2vw, 54px) !important;
  line-height: .94 !important;
  font-weight: 950 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance !important;
}
.app-shell .hero-copy h2 span {
  display: inline !important;
  color: var(--lib-accent) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.app-shell .hero-copy p {
  max-width: 720px !important;
  margin-top: 9px !important;
  color: #5d6265 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.app-shell .hero-stats {
  grid-template-columns: repeat(3, 86px) !important;
  gap: 8px !important;
}
.app-shell .hero-stats span {
  min-height: 58px !important;
  padding: 10px 11px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(21,21,21,.12) !important;
  background: rgba(255,255,252,.58) !important;
  color: #6a6f72 !important;
}
.app-shell .hero-stats b {
  color: #111 !important;
  font-size: 19px !important;
}
.app-shell .workspace-grid {
  display: grid !important;
  grid-template-columns: minmax(500px, .9fr) minmax(430px, .82fr) 292px !important;
  gap: 14px !important;
  align-items: stretch !important;
  min-height: 0 !important;
}
.app-shell .panel {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 18px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(21,21,21,.12) !important;
  background: var(--lib-panel) !important;
  box-shadow: 0 18px 50px rgba(25,26,24,.075) !important;
  backdrop-filter: blur(18px) saturate(1.04) !important;
}
.app-shell .panel::before,
.app-shell .panel::after {
  opacity: 0 !important;
}
.app-shell .panel-head {
  min-height: 42px !important;
  margin-bottom: 12px !important;
}
.app-shell .panel h3 {
  color: var(--lib-ink) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}
.app-shell .credit-chip {
  min-height: 34px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(47,111,100,.18) !important;
  background: rgba(47,111,100,.08) !important;
  color: var(--lib-accent) !important;
}
.app-shell .model-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
}
.app-shell .model-chip {
  min-height: 58px !important;
  padding: 11px 12px !important;
  border-radius: 17px !important;
  border: 1px solid var(--lib-line) !important;
  background: rgba(255,255,252,.62) !important;
  color: var(--lib-ink) !important;
  box-shadow: none !important;
}
.app-shell .model-chip:hover {
  border-color: rgba(47,111,100,.34) !important;
  background: #fff !important;
  transform: translateY(-1px) !important;
}
.app-shell .model-chip.active {
  border-color: #171717 !important;
  background: #171717 !important;
  color: #fff !important;
  box-shadow: 0 16px 32px rgba(20,20,18,.16) !important;
}
.app-shell .model-chip small {
  margin-top: 5px !important;
  color: inherit !important;
  opacity: .66 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}
.app-shell .field-label,
.app-shell .field-label-row {
  margin-top: 13px !important;
  margin-bottom: 7px !important;
  color: #393b3c !important;
  font-size: 11px !important;
  font-weight: 880 !important;
}
.app-shell textarea,
.app-shell input,
.app-shell select {
  color: var(--lib-ink) !important;
  caret-color: var(--lib-accent) !important;
}
.app-shell #prompt {
  min-height: 112px !important;
  padding: 14px 16px !important;
  border-radius: 20px !important;
  border: 1px solid var(--lib-line) !important;
  background: #f6f6f2 !important;
  color: #1b1c1d !important;
  line-height: 1.48 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.app-shell #prompt::placeholder {
  color: #777c80 !important;
}
.app-shell #prompt:focus,
.app-shell .control select:focus,
.app-shell button:focus-visible,
.app-shell a:focus-visible {
  outline: 2px solid rgba(47,111,100,.42) !important;
  outline-offset: 2px !important;
}
.app-shell .quick-prompts {
  margin-top: 8px !important;
  gap: 7px !important;
}
.app-shell .quick-prompts button,
.app-shell .tags button {
  height: 28px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid var(--lib-line) !important;
  background: rgba(255,255,252,.72) !important;
  color: #343638 !important;
  font-size: 11px !important;
  font-weight: 790 !important;
}
.app-shell .asset-section {
  margin-top: 14px !important;
}
.app-shell .asset-grid {
  min-height: 62px !important;
  gap: 8px !important;
}
.app-shell .upload-tile,
.app-shell .asset-thumb {
  width: 82px !important;
  height: 62px !important;
  min-height: 62px !important;
  border-radius: 16px !important;
  border: 1px dashed rgba(21,21,21,.22) !important;
  background: rgba(255,255,252,.64) !important;
  color: #495052 !important;
}
.app-shell .upload-tile:hover {
  border-color: var(--lib-accent) !important;
  background: #fff !important;
}
.app-shell .upload-tile span {
  color: var(--lib-accent) !important;
  font-size: 25px !important;
}
.app-shell .controls {
  margin-top: 11px !important;
  gap: 8px !important;
}
.app-shell .control label {
  color: #565b5e !important;
  font-size: 10px !important;
}
.app-shell .control select {
  height: 38px !important;
  border-radius: 14px !important;
  border-color: var(--lib-line) !important;
  background: rgba(255,255,252,.7) !important;
  color: #1f2021 !important;
  font-size: 11px !important;
}
.app-shell .generate-btn {
  width: 100% !important;
  height: 46px !important;
  margin-top: 10px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, #151515 0%, #242520 58%, #2f6f64 100%) !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(18,18,16,.2) !important;
  font-size: 13px !important;
  font-weight: 920 !important;
}
.app-shell .generate-btn::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent) !important;
  animation-duration: 3.4s !important;
}
.app-shell .generate-btn kbd {
  color: rgba(255,255,255,.72) !important;
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.1) !important;
}
.app-shell .form-note {
  margin-top: 8px !important;
  font-size: 11px !important;
}
.app-shell .preview {
  min-height: 100% !important;
}
.app-shell .preview-stage {
  min-height: clamp(340px, calc(100vh - 308px), 490px) !important;
  border-radius: 22px !important;
  border: 1px solid var(--lib-line) !important;
  background:
    linear-gradient(180deg, #fbfbf8, #ecece7) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88) !important;
}
.app-shell .preview-stage > img,
.app-shell .preview-stage > video {
  border-radius: 20px !important;
  background: #101113 !important;
}
.app-shell .preview-stage .empty-visual {
  inset: 18px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 10px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(21,21,21,.12) !important;
  background:
    radial-gradient(circle at 68% 28%, rgba(47,111,100,.15), transparent 25%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(230,230,223,.84)),
    repeating-linear-gradient(135deg, rgba(21,21,21,.055) 0 1px, transparent 1px 18px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 48px rgba(25,26,24,.08) !important;
  transform: none !important;
  overflow: hidden !important;
}
.app-shell .preview-stage .empty-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: 12% 10% auto 10% !important;
  height: 42% !important;
  border-radius: 20px !important;
  border: 1px solid rgba(21,21,21,.1) !important;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(47,111,100,.14) 42% 45%, transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(232,232,225,.55)) !important;
  box-shadow: 0 18px 42px rgba(25,26,24,.1) !important;
  opacity: 1 !important;
  transform: none !important;
}
.app-shell .preview-stage .empty-visual::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 12% 13% 12% !important;
  height: 28% !important;
  border-radius: 18px !important;
  border: 1px solid rgba(21,21,21,.1) !important;
  background:
    repeating-linear-gradient(90deg, rgba(21,21,21,.13) 0 1px, transparent 1px 16px),
    linear-gradient(90deg, rgba(255,255,255,.8), rgba(230,230,223,.52)) !important;
  opacity: .78 !important;
  transform: none !important;
}
.app-shell .preview-stage .play-orb {
  position: relative !important;
  z-index: 2 !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 0 38px !important;
  border: 1px solid rgba(21,21,21,.1) !important;
  background: #151515 !important;
  color: #fff !important;
  box-shadow: 0 16px 36px rgba(25,26,24,.18) !important;
}
.app-shell .preview-stage .empty-visual p,
.app-shell .preview-stage .empty-visual span {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  color: var(--lib-ink) !important;
}
.app-shell .preview-stage .empty-visual p {
  font-size: 14px !important;
  font-weight: 880 !important;
}
.app-shell .preview-stage .empty-visual span {
  font-size: 11px !important;
  color: var(--lib-muted) !important;
}
.app-shell .preview-actions {
  margin-top: 10px !important;
  gap: 8px !important;
}
.app-shell .task-sidebar {
  min-height: 0 !important;
}
.app-shell .side-task-list {
  max-height: calc(100vh - 252px) !important;
  overflow: auto !important;
  padding-right: 2px !important;
}
.app-shell .side-task-row {
  min-height: 72px !important;
  gap: 6px !important;
  padding: 11px !important;
  border-radius: 18px !important;
  border: 1px solid var(--lib-line) !important;
  background: rgba(255,255,252,.64) !important;
  color: var(--lib-ink) !important;
}
.app-shell .side-task-row:hover {
  background: #fff !important;
  border-color: var(--lib-line-strong) !important;
  transform: translateY(-1px) !important;
}
.app-shell .side-task-kind {
  color: var(--lib-accent) !important;
}
.app-shell .side-task-row strong {
  color: #1a1b1c !important;
}
.app-shell .side-task-row small {
  color: var(--lib-muted) !important;
}
.app-shell .side-task-row em {
  color: var(--lib-danger) !important;
}
.app-shell .side-task-all {
  height: 38px !important;
  margin-top: 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--lib-line) !important;
  background: #171717 !important;
  color: #fff !important;
}
.task-row {
  border-color: rgba(21,21,21,.12) !important;
  background: rgba(255,255,252,.74) !important;
  color: var(--lib-ink) !important;
  box-shadow: 0 16px 36px rgba(25,26,24,.065) !important;
}
.task-row:hover {
  border-color: var(--lib-line-strong) !important;
  background: #fff !important;
}
.task-thumb {
  background:
    linear-gradient(135deg, rgba(21,21,21,.07), rgba(21,21,21,.025)),
    #e7e7e1 !important;
  border: 1px solid rgba(21,21,21,.1) !important;
}
.task-thumb-placeholder {
  display: grid !important;
  place-items: center !important;
  gap: 5px !important;
  width: 100% !important;
  height: 100% !important;
  color: #343736 !important;
}
.task-thumb-placeholder i {
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #171717 !important;
  color: #fff !important;
  font-style: normal !important;
  font-size: 10px !important;
}
.task-thumb-placeholder b {
  font-size: 10px !important;
  font-weight: 850 !important;
}
.task-info h4 {
  color: #171717 !important;
}
.task-info p {
  color: var(--lib-muted) !important;
}
.task-preview-btn {
  border-color: var(--lib-line) !important;
  background: #fff !important;
  color: #171717 !important;
}
.task-preview-btn:hover {
  border-color: #171717 !important;
  background: #171717 !important;
  color: #fff !important;
}
.task-status.completed,
.side-task-status.completed {
  background: rgba(47,111,100,.12) !important;
  color: var(--lib-accent) !important;
}
.task-status.failed,
.side-task-status.failed {
  background: rgba(182,71,71,.1) !important;
  color: var(--lib-danger) !important;
}
.history-preview-dialog {
  border-radius: 24px !important;
  background: #f8f8f4 !important;
  color: var(--lib-ink) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.24) !important;
}
.history-preview-dialog::backdrop {
  background: rgba(28,28,25,.52) !important;
  backdrop-filter: blur(6px) !important;
}
.history-preview-stage {
  border-radius: 20px !important;
  background: #e7e7e1 !important;
  border: 1px solid var(--lib-line) !important;
}
::selection {
  background: rgba(47,111,100,.22) !important;
  color: #111 !important;
}
@media (max-width: 1460px) {
  .app-shell .workspace-grid {
    grid-template-columns: minmax(440px, .95fr) minmax(390px, .82fr) 260px !important;
  }
  .app-shell .hero-copy h2 {
    font-size: clamp(32px, 3vw, 48px) !important;
  }
}
@media (max-width: 1260px) {
  .app-shell .workspace-grid {
    grid-template-columns: minmax(0, 1fr) 320px !important;
  }
  .app-shell .task-sidebar {
    grid-column: 1 / -1 !important;
  }
  .app-shell .side-task-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-height: none !important;
  }
}
@media (max-width: 760px) {
  body:has(.app-shell:not(.hidden)) {
    overflow: auto !important;
  }
  .app-shell {
    grid-template-columns: 72px 1fr !important;
    min-height: 100vh !important;
    height: auto !important;
  }
  .app-shell .sidebar {
    width: 72px !important;
    min-width: 72px !important;
    padding: 14px 8px !important;
  }
  .app-shell .brand-logo {
    width: 54px !important;
  }
  .app-shell .content {
    padding: 14px 10px 22px !important;
  }
  .app-shell .workspace-grid,
  .app-shell .model-row,
  .app-shell .side-task-list {
    grid-template-columns: 1fr !important;
  }
  .app-shell .hero-copy h2 {
    font-size: 31px !important;
  }
  .app-shell .hero-stats {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell *,
  .app-shell *::before,
  .app-shell *::after {
    transition-duration: .01ms !important;
    animation: none !important;
  }
}



/* Shallow viewport fit: keep the action row visible on 823px desktops. */
@media (min-width: 1280px) {
  .app-shell #createView {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: calc(100vh - 62px) !important;
    overflow: hidden !important;
    align-content: stretch !important;
  }
  .app-shell #createView .hero-copy {
    min-height: 104px !important;
    height: 104px !important;
    margin-bottom: 14px !important;
    padding: 14px 22px !important;
  }
  .app-shell #createView .hero-copy h2 {
    font-size: clamp(32px, 2.6vw, 46px) !important;
    line-height: .9 !important;
  }
  .app-shell #createView .hero-copy p {
    margin-top: 8px !important;
    font-size: 12px !important;
    line-height: 1.32 !important;
  }
  .app-shell #createView .workspace-grid {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }
  .app-shell #createView .panel {
    height: 100% !important;
    padding: 16px !important;
  }
  .app-shell #createView .composer {
    overflow: auto !important;
    padding-bottom: 12px !important;
  }
  .app-shell #createView .composer::-webkit-scrollbar {
    width: 7px !important;
  }
  .app-shell #createView .composer::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 99px !important;
    background: rgba(21,21,21,.22) content-box !important;
  }
  .app-shell #createView .panel-head {
    min-height: 38px !important;
    margin-bottom: 10px !important;
  }
  .app-shell #createView .field-label,
  .app-shell #createView .field-label-row {
    margin-top: 10px !important;
    margin-bottom: 6px !important;
  }
  .app-shell #createView .model-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .app-shell #createView .model-chip {
    min-height: 52px !important;
    padding: 9px 11px !important;
    border-radius: 15px !important;
  }
  .app-shell #createView .model-chip small {
    margin-top: 4px !important;
    font-size: 9.5px !important;
    line-height: 1.22 !important;
  }
  .app-shell #createView #prompt {
    min-height: 92px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    line-height: 1.4 !important;
  }
  .app-shell #createView .quick-prompts {
    margin-top: 7px !important;
  }
  .app-shell #createView .quick-prompts button,
  .app-shell #createView .tags button {
    height: 26px !important;
    padding: 0 10px !important;
    font-size: 10.5px !important;
  }
  .app-shell #createView .asset-section {
    margin-top: 10px !important;
  }
  .app-shell #createView .asset-grid {
    min-height: 52px !important;
  }
  .app-shell #createView .upload-tile,
  .app-shell #createView .asset-thumb {
    width: 74px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 14px !important;
  }
  .app-shell #createView .upload-tile span {
    font-size: 22px !important;
  }
  .app-shell #createView .upload-tile small {
    font-size: 9px !important;
  }
  .app-shell #createView .controls {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    margin-top: 9px !important;
    gap: 7px !important;
  }
  .app-shell #createView .control label {
    margin-bottom: 4px !important;
    font-size: 9.5px !important;
  }
  .app-shell #createView .control select {
    height: 34px !important;
    border-radius: 13px !important;
    padding: 0 10px !important;
    font-size: 10.5px !important;
  }
  .app-shell #createView .generate-btn {
    height: 44px !important;
    margin-top: 8px !important;
    border-radius: 15px !important;
  }
  .app-shell #createView .form-note {
    margin-top: 7px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  .app-shell #createView .preview-stage {
    min-height: 0 !important;
    height: calc(100% - 86px) !important;
  }
  .app-shell #createView .preview-actions {
    height: 38px !important;
    margin-top: 8px !important;
  }
  .app-shell #createView .side-task-list {
    max-height: calc(100% - 88px) !important;
  }
}

/* Mobile correction: move navigation to the bottom and remove horizontal clipping. */
@media (max-width: 760px) {
  html,
  body:has(.app-shell:not(.hidden)) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  body:has(.app-shell:not(.hidden)) {
    min-height: 100vh !important;
    background: linear-gradient(180deg, #f4f3ef, #e9e9e4) !important;
  }
  .app-shell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 100vh !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
  }
  .app-shell .sidebar {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 80 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 6px !important;
    border: 1px solid rgba(21,21,21,.14) !important;
    border-radius: 24px !important;
    background: rgba(250,250,246,.9) !important;
    box-shadow: 0 18px 45px rgba(20,20,18,.16) !important;
    backdrop-filter: blur(22px) saturate(1.08) !important;
  }
  .app-shell .sidebar .brand-logo,
  .app-shell .new-btn,
  .app-shell .sidebar-foot {
    display: none !important;
  }
  .app-shell .nav-list {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  .app-shell .nav-item,
  .app-shell .nav-item:not(.active) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 18px 1fr !important;
    place-items: center !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 4px 2px !important;
    border-radius: 18px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #666b6e !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: -.02em !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .app-shell .nav-item.active {
    border-color: rgba(47,111,100,.22) !important;
    background: #fff !important;
    color: #151515 !important;
    box-shadow: 0 8px 22px rgba(25,26,24,.08) !important;
  }
  .app-shell .nav-item.active::before {
    display: none !important;
  }
  .app-shell .nav-icon {
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    font-size: 12px !important;
  }
  .app-shell .nav-item em {
    position: absolute !important;
    top: 3px !important;
    right: 5px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
    line-height: 16px !important;
  }
  .app-shell .main {
    display: grid !important;
    grid-template-rows: 58px auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
  }
  .app-shell .topbar {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 10px !important;
    border-left: 0 !important;
  }
  .app-shell .topbar > div:first-child {
    min-width: 0 !important;
    max-width: calc(100vw - 190px) !important;
  }
  .app-shell .topbar h1 {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 19px !important;
  }
  .app-shell .topbar p,
  .app-shell .home-btn {
    display: none !important;
  }
  .app-shell .top-actions {
    flex: 0 0 auto !important;
    gap: 6px !important;
  }
  .app-shell .balance-btn {
    min-width: 104px !important;
    height: 40px !important;
    padding: 0 10px !important;
  }
  .app-shell .icon-btn,
  .app-shell .avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
  .app-shell .content {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 0 !important;
    padding: 10px 10px 88px !important;
    overflow: visible !important;
  }
  .app-shell #createView {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  .app-shell .hero-copy {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 10px !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }
  .app-shell .hero-copy h2 {
    max-width: 100% !important;
    font-size: clamp(30px, 9.6vw, 38px) !important;
    line-height: .94 !important;
    letter-spacing: -.055em !important;
  }
  .app-shell .hero-copy p {
    max-width: 100% !important;
    margin-top: 10px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  .app-shell .workspace-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  .app-shell .panel,
  .app-shell #createView .panel {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }
  .app-shell #createView .composer {
    overflow: visible !important;
  }
  .app-shell .panel-head {
    min-height: 40px !important;
    margin-bottom: 12px !important;
  }
  .app-shell .model-row,
  .app-shell #createView .model-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .app-shell .model-chip,
  .app-shell #createView .model-chip {
    min-height: 58px !important;
    padding: 11px 12px !important;
  }
  .app-shell #prompt,
  .app-shell #createView #prompt {
    min-height: 120px !important;
    font-size: 13px !important;
  }
  .app-shell .quick-prompts button,
  .app-shell .tags button,
  .app-shell #createView .quick-prompts button,
  .app-shell #createView .tags button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
  }
  .app-shell .upload-tile,
  .app-shell .asset-thumb,
  .app-shell #createView .upload-tile,
  .app-shell #createView .asset-thumb {
    width: 84px !important;
    height: 64px !important;
    min-height: 64px !important;
  }
  .app-shell .controls,
  .app-shell #createView .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .app-shell .control:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
  .app-shell .control select,
  .app-shell #createView .control select {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 13px !important;
  }
  .app-shell .generate-row {
    grid-template-columns: 1fr !important;
  }
  .app-shell .generate-row .credit-chip,
  .app-shell .generate-btn,
  .app-shell #createView .generate-btn {
    min-height: 48px !important;
    height: 48px !important;
  }
  .app-shell .preview-stage,
  .app-shell #createView .preview-stage {
    height: auto !important;
    min-height: 330px !important;
  }
  .app-shell .preview-stage .empty-visual {
    inset: 12px !important;
  }
  .app-shell .preview-stage .empty-visual::before {
    inset: 10% 8% auto 8% !important;
    height: 34% !important;
  }
  .app-shell .preview-stage .empty-visual::after {
    inset: auto 8% 12% 8% !important;
    height: 24% !important;
  }
  .app-shell .preview-actions {
    flex-wrap: wrap !important;
  }
  .app-shell .side-task-list,
  .app-shell #createView .side-task-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-height: none !important;
  }
  .task-row {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .task-row-actions {
    grid-column: 2 !important;
    justify-content: flex-start !important;
  }
}

/* View isolation must outrank the breakpoint-specific #createView display rules. */
.app-shell #createView[hidden],
.app-shell #canvasView[hidden],
.app-shell #tasksView[hidden],
.app-shell #assetsView[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.app-shell .main > .content:not([hidden]) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

/* Compact task surfaces: keep status and actions stable while copy grows. */
.app-shell #tasksView .task-list {
  width: min(100%, 1080px) !important;
  margin-inline: auto !important;
  gap: 8px !important;
}
.app-shell #tasksView .task-row {
  min-height: 72px !important;
  grid-template-columns: 88px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
  align-items: center !important;
}
.app-shell #tasksView .task-thumb {
  width: 88px !important;
  min-width: 88px !important;
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 9px !important;
}
.app-shell #tasksView .task-info {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}
.app-shell #tasksView .task-info-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: var(--lib-muted) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}
.app-shell #tasksView .task-kind-label {
  flex: none !important;
  color: var(--lib-accent) !important;
  font-weight: 850 !important;
}
.app-shell #tasksView .task-info-top time {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.app-shell #tasksView .task-info h4 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
  overflow: hidden !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}
.app-shell #tasksView .task-info p {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}
.app-shell #tasksView .task-row-actions {
  flex: none !important;
  gap: 7px !important;
}
.app-shell #tasksView .task-preview-btn {
  height: 28px !important;
  padding-inline: 10px !important;
  border-radius: 8px !important;
}
.app-shell #tasksView .task-status {
  min-width: 48px !important;
  padding: 5px 8px !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.app-shell .side-task-list {
  gap: 7px !important;
  align-content: start !important;
  grid-auto-rows: max-content !important;
}
.app-shell .side-task-row {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: max-content !important;
  align-items: center !important;
  align-self: start !important;
  height: auto !important;
  min-height: 64px !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
}
.app-shell .side-task-thumb {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  background: #171717 !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
.app-shell .side-task-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
}
.app-shell .side-task-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin-bottom: 4px !important;
}
.app-shell .side-task-kind {
  margin: 0 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}
.app-shell .side-task-status {
  position: static !important;
  flex: none !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}
.app-shell .side-task-row strong {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
  overflow: hidden !important;
  padding: 0 !important;
  line-height: 1.35 !important;
}
.app-shell .side-task-row small {
  display: block !important;
  max-width: 100% !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
}
.app-shell .side-task-row em {
  display: block !important;
  max-width: 100% !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 9px !important;
}
@media (max-width: 620px) {
  .app-shell #tasksView .task-row {
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    min-height: 68px !important;
    gap: 9px !important;
    padding: 8px !important;
  }
  .app-shell #tasksView .task-thumb {
    width: 72px !important;
    min-width: 72px !important;
    height: 48px !important;
    min-height: 48px !important;
  }
  .app-shell #tasksView .task-row:not(.can-preview) .task-row-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  .app-shell #tasksView .task-row.can-preview {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }
  .app-shell #tasksView .task-row.can-preview .task-row-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-content: flex-start !important;
  }
}

/* Final console material pass: inspired by the supplied monochrome AI references. */
html body .app-shell {
  --console-bg: #080909;
  --console-surface: #101212;
  --console-raised: #151818;
  --console-line: #292e2d;
  --console-muted: #8b9290;
  --console-ink: #f4f6f3;
  --console-accent: #d8ff69;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  background: var(--console-bg) !important;
  color: var(--console-ink) !important;
}
html body .app-shell .sidebar {
  width: 220px !important;
  min-width: 220px !important;
  min-height: 100vh !important;
  padding: 22px 14px 18px !important;
  background: #0b0c0c !important;
  border-right: 1px solid var(--console-line) !important;
}
html body .app-shell .brand {
  height: 36px !important;
  padding: 0 10px !important;
  margin-bottom: 28px !important;
}
html body .app-shell .brand-logo {
  width: 116px !important;
  height: auto !important;
}
html body .app-shell .new-btn {
  height: 42px !important;
  border-radius: 9px !important;
  background: var(--console-accent) !important;
  color: #10120e !important;
  box-shadow: none !important;
  font-weight: 850 !important;
}
html body .app-shell .nav-list {
  gap: 4px !important;
  margin-top: 24px !important;
}
html body .app-shell .nav-item {
  height: 42px !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  color: #89908e !important;
  font-size: 12px !important;
  font-weight: 720 !important;
}
html body .app-shell .nav-item:hover {
  background: #151818 !important;
  color: #e7ebe7 !important;
}
html body .app-shell .nav-item.active {
  background: #1b201e !important;
  color: var(--console-accent) !important;
  box-shadow: inset 2px 0 0 var(--console-accent) !important;
}
html body .app-shell .nav-item em {
  background: var(--console-accent) !important;
  color: #10120e !important;
}
html body .app-shell .main {
  min-width: 0 !important;
  background: var(--console-bg) !important;
}
html body .app-shell .topbar {
  height: 72px !important;
  padding: 0 26px !important;
  background: #0b0c0c !important;
  border-bottom: 1px solid var(--console-line) !important;
}
html body .app-shell .topbar h1 {
  color: var(--console-ink) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}
html body .app-shell .topbar p {
  color: var(--console-muted) !important;
}
html body .app-shell .home-btn,
html body .app-shell .balance-btn,
html body .app-shell .icon-btn,
html body .app-shell .avatar {
  border: 1px solid var(--console-line) !important;
  background: var(--console-surface) !important;
  color: #dce2de !important;
}
html body .app-shell .balance-btn .points-icon {
  color: var(--console-accent) !important;
}
html body .app-shell .content {
  width: 100% !important;
  max-width: 1440px !important;
  padding: 20px 26px 30px !important;
  margin: 0 auto !important;
}
html body .app-shell #createView > .hero-copy {
  position: relative !important;
  display: block !important;
  min-height: 132px !important;
  height: auto !important;
  padding: 25px 28px 23px !important;
  margin-bottom: 14px !important;
  border: 1px solid var(--console-line) !important;
  border-radius: 14px !important;
  background: #0e1010 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html body .app-shell #createView > .hero-copy::before {
  display: none !important;
}
html body .app-shell #createView > .hero-copy::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 0 0 auto !important;
  width: 36% !important;
  background: linear-gradient(90deg, transparent, rgba(216,255,105,.08)) !important;
  pointer-events: none !important;
}
html body .app-shell #createView > .hero-copy .hero-kicker {
  position: relative !important;
  z-index: 1 !important;
  color: var(--console-accent) !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
}
html body .app-shell #createView > .hero-copy .hero-state {
  color: #89908e !important;
}
html body .app-shell #createView > .hero-copy h2 {
  position: relative !important;
  z-index: 1 !important;
  max-width: 780px !important;
  margin: 12px 0 0 !important;
  color: var(--console-ink) !important;
  font-size: clamp(30px, 3.6vw, 52px) !important;
  line-height: 1.04 !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}
html body .app-shell #createView > .hero-copy h2 span {
  color: var(--console-accent) !important;
}
html body .app-shell #createView > .hero-copy p {
  position: relative !important;
  z-index: 1 !important;
  max-width: 680px !important;
  margin: 10px 0 0 !important;
  color: #929a97 !important;
  font-size: 12px !important;
}
html body .app-shell .workspace-grid {
  grid-template-columns: minmax(360px, 1.08fr) minmax(360px, .92fr) 292px !important;
  gap: 12px !important;
}
html body .app-shell .panel {
  padding: 17px !important;
  border: 1px solid var(--console-line) !important;
  border-radius: 14px !important;
  background: var(--console-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html body .app-shell .panel h3 {
  color: var(--console-ink) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
html body .app-shell .muted {
  color: var(--console-muted) !important;
}
html body .app-shell .model-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
html body .app-shell .model-chip {
  min-height: 62px !important;
  padding: 10px !important;
  border: 1px solid var(--console-line) !important;
  border-radius: 9px !important;
  background: var(--console-raised) !important;
  color: #dfe5e0 !important;
  box-shadow: none !important;
}
html body .app-shell .model-chip:hover {
  border-color: #59664d !important;
  background: #191d1a !important;
}
html body .app-shell .model-chip.selected,
html body .app-shell .model-chip.active {
  border-color: var(--console-accent) !important;
  background: var(--console-accent) !important;
  color: #12150f !important;
}
html body .app-shell #prompt {
  min-height: 126px !important;
  border: 1px solid var(--console-line) !important;
  border-radius: 10px !important;
  background: #0b0d0d !important;
  color: var(--console-ink) !important;
}
html body .app-shell #prompt::placeholder {
  color: #68716d !important;
}
html body .app-shell .quick-prompts {
  gap: 7px !important;
  margin-top: 8px !important;
}
html body .app-shell .quick-prompts button,
html body .app-shell .tags button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid var(--console-line) !important;
  border-radius: 8px !important;
  background: var(--console-raised) !important;
  color: #c2cbc5 !important;
  font-size: 11px !important;
}
html body .app-shell .quick-prompts button:hover,
html body .app-shell .tags button:hover {
  border-color: var(--console-accent) !important;
  color: var(--console-accent) !important;
  background: #1b2118 !important;
}
html body .app-shell .prompt-template-icon {
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  background: #27301f !important;
  color: var(--console-accent) !important;
  font-size: 10px !important;
}
html body .app-shell .upload-tile,
html body .app-shell .asset-thumb,
html body .app-shell .control select {
  border-color: #3a433e !important;
  border-radius: 9px !important;
  background: #141717 !important;
  color: #d8ded9 !important;
}
html body .app-shell .upload-tile span {
  color: var(--console-accent) !important;
}
html body .app-shell .generate-btn {
  height: 46px !important;
  border-radius: 8px !important;
  background: var(--console-accent) !important;
  color: #11140f !important;
  box-shadow: 0 12px 28px rgba(216,255,105,.08) !important;
}
html body .app-shell .form-note {
  color: #737d77 !important;
}
html body .app-shell .preview-stage {
  background: #090b0b !important;
  border-color: #202624 !important;
  border-radius: 10px !important;
}
html body .app-shell .task-sidebar {
  min-height: 0 !important;
}
html body .app-shell .side-task-list {
  align-content: start !important;
  grid-auto-rows: max-content !important;
}
html body .app-shell .side-task-row,
html body .app-shell #tasksView .task-row {
  border-color: var(--console-line) !important;
  background: var(--console-raised) !important;
  color: #dfe5e0 !important;
  box-shadow: none !important;
}
html body .app-shell .side-task-row:hover,
html body .app-shell #tasksView .task-row:hover {
  border-color: #59664d !important;
  background: #191d1a !important;
}
html body .app-shell .side-task-thumb {
  background: #252e20 !important;
  color: var(--console-accent) !important;
}
html body .app-shell .side-task-kind,
html body .app-shell #tasksView .task-kind-label {
  color: var(--console-accent) !important;
}
html body .app-shell .side-task-row strong,
html body .app-shell #tasksView .task-info h4 {
  color: #e8eee9 !important;
}
html body .app-shell .side-task-row small,
html body .app-shell #tasksView .task-info p,
html body .app-shell #tasksView .task-info-top {
  color: #7f8982 !important;
}
html body .app-shell .side-task-all {
  border-color: var(--console-line) !important;
  background: var(--console-raised) !important;
  color: #ccd5cf !important;
}
@media (max-width: 1260px) {
  html body .app-shell .workspace-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px) !important;
  }
  html body .app-shell .task-sidebar {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 760px) {
  html body .app-shell {
    display: block !important;
    background: var(--console-bg) !important;
  }
  html body .app-shell .sidebar {
    background: #0b0c0c !important;
    border-color: var(--console-line) !important;
  }
  html body .app-shell .topbar {
    background: #0b0c0c !important;
  }
  html body .app-shell .content {
    padding: 10px 10px 88px !important;
  }
  html body .app-shell #createView > .hero-copy {
    min-height: 0 !important;
    padding: 19px 16px 20px !important;
    border-radius: 14px !important;
  }
  html body .app-shell #createView > .hero-copy h2 {
    font-size: clamp(27px, 8.4vw, 36px) !important;
    line-height: 1.08 !important;
  }
  html body .app-shell .panel,
  html body .app-shell #createView .panel {
    border-radius: 14px !important;
    background: var(--console-surface) !important;
  }
  html body .app-shell .model-row {
    grid-template-columns: 1fr !important;
  }
  html body .app-shell .quick-prompts button,
  html body .app-shell .tags button {
    flex: 1 1 calc(50% - 7px) !important;
    justify-content: flex-start !important;
  }
}

/* Final fit fixes for the real viewport and the white logo asset. */
html body .app-shell .brand-logo {
  filter: none !important;
}

.site-brand-name {
  min-width: 0;
  max-width: 180px;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.welcome-brand .site-brand-name {
  margin-left: 12px;
  color: #f4f4f2;
  font-size: 14px;
}
.app-shell .brand .site-brand-name {
  margin-left: 9px;
  color: #f1f1ef;
}
@media (max-width: 760px) {
  .app-shell .site-brand-name {
    display: none;
  }
  .welcome-brand .site-brand-name {
    display: block;
    max-width: 74px;
    margin-left: 6px;
    font-size: 10px;
  }
}

/* Extend the Bonzai material from the empty state into the actual console surfaces. */
html,
html body {
  margin: 0 !important;
  min-width: 0 !important;
  background: #080909 !important;
}
html body .app-shell,
html body .login-screen,
html body .welcome-screen {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
html body .app-shell .main {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #080909 !important;
}
html body .app-shell .main::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 72px !important;
  right: -70px !important;
  width: min(560px, 42vw) !important;
  height: min(760px, 82vh) !important;
  pointer-events: none !important;
  background: url("assets/bonzai-ring.png") right 22% / contain no-repeat !important;
  opacity: .12 !important;
  mix-blend-mode: screen !important;
}
html body .app-shell .main > * {
  position: relative !important;
  z-index: 1 !important;
}
html body .app-shell .preview-stage {
  background-color: #090b0b !important;
  background-image: linear-gradient(135deg, rgba(8,9,9,.92), rgba(8,9,9,.72)), url("assets/bonzai-video-cover.png") !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat !important;
}

/* Bonzai reference imagery gives the empty preview a real visual anchor. */
html body .app-shell .preview-stage .empty-visual-media {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #080909 !important;
}
html body .app-shell .preview-stage .empty-visual-media::before,
html body .app-shell .preview-stage .empty-visual-media::after {
  display: none !important;
  content: none !important;
}
html body .app-shell .preview-stage .empty-visual-cover,
html body .app-shell .preview-stage .empty-visual-ring {
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
  max-width: none !important;
}
html body .app-shell .preview-stage .empty-visual-cover {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: none !important;
}
html body .app-shell .preview-stage .empty-visual-ring {
  top: -14% !important;
  right: -24% !important;
  width: 96% !important;
  height: 132% !important;
  object-fit: cover !important;
  object-position: 72% center !important;
  opacity: .62 !important;
  mix-blend-mode: screen !important;
}
html body .app-shell .preview-stage .empty-visual-scrim {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(8,9,9,.18), rgba(8,9,9,.04) 48%, rgba(8,9,9,.3)) !important;
}
html body .app-shell .preview-stage .empty-visual-content {
  position: absolute !important;
  z-index: 2 !important;
  inset: auto 18px 17px !important;
  display: grid !important;
  justify-items: start !important;
  gap: 3px !important;
  text-align: left !important;
}
html body .app-shell .preview-stage .empty-visual-content p {
  margin: 0 !important;
  color: #f4f6f3 !important;
  font-size: 14px !important;
  font-weight: 760 !important;
}
html body .app-shell .preview-stage .empty-visual-content > span:last-child {
  color: #a6afaa !important;
  font-size: 10px !important;
}
html body .app-shell .preview-stage .empty-visual-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 3px !important;
  color: var(--console-accent) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}
html body .app-shell .preview-stage .empty-visual-label i {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--console-accent) !important;
  box-shadow: 0 0 14px rgba(216,255,105,.7) !important;
}
html body .app-shell #tasksView .task-thumb-placeholder {
  position: relative !important;
  overflow: hidden !important;
  background: #0c0e0d url("assets/bonzai-video-cover.png") center / cover no-repeat !important;
}
html body .app-shell #tasksView .task-thumb-placeholder::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(8,9,9,.45) !important;
}
html body .app-shell #tasksView .task-thumb-placeholder i,
html body .app-shell #tasksView .task-thumb-placeholder b {
  position: relative !important;
  z-index: 1 !important;
}
@media (max-width: 1400px) and (min-width: 761px) {
  html body .app-shell .workspace-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) 260px !important;
  }
}
@media (max-width: 760px) {
  html body .app-shell .main::before {
    top: 58px !important;
    right: -120px !important;
    width: 420px !important;
    height: 560px !important;
    opacity: .09 !important;
  }
  html body .app-shell .sidebar {
    position: fixed !important;
    inset: auto 10px max(8px, env(safe-area-inset-bottom, 0px)) 10px !important;
    z-index: 80 !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 6px !important;
    border: 1px solid var(--console-line) !important;
    border-radius: 18px !important;
    background: rgba(11, 12, 12, .94) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .38) !important;
    backdrop-filter: blur(18px) !important;
  }
  html body .app-shell .sidebar .brand,
  html body .app-shell .sidebar .new-btn,
  html body .app-shell .sidebar .sidebar-foot {
    display: none !important;
  }
  html body .app-shell .nav-list {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  html body .app-shell .nav-item,
  html body .app-shell .nav-item:not(.active) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 17px 1fr !important;
    place-items: center !important;
    min-width: 0 !important;
    height: 48px !important;
    padding: 4px 2px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #77807b !important;
    box-shadow: none !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  html body .app-shell .nav-item.active {
    background: #20251e !important;
    color: var(--console-accent) !important;
  }
  html body .app-shell .nav-item.active::before {
    display: none !important;
  }
  html body .app-shell .nav-icon {
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    font-size: 11px !important;
  }
  html body .app-shell .nav-item em {
    position: absolute !important;
    top: 2px !important;
    right: 3px !important;
    min-width: 15px !important;
    height: 15px !important;
    padding: 0 3px !important;
    font-size: 8px !important;
    line-height: 15px !important;
  }
  html body .app-shell .main {
    display: grid !important;
    grid-template-rows: 58px auto !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  html body .app-shell .workspace-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }
  html body .app-shell .workspace-grid > .panel {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Keep the two reference assets in separate visual layers. */
html body .app-shell .main {
  background-color: #080909 !important;
  background-image:
    linear-gradient(90deg, #080909 0%, rgba(8, 9, 9, .96) 38%, rgba(8, 9, 9, .58) 100%),
    url("assets/bonzai-ring.png") !important;
  background-position: center, right 72px !important;
  background-size: 100% 100%, min(680px, 52vw) auto !important;
  background-repeat: no-repeat !important;
}
html body .app-shell .main::before {
  display: none !important;
}
html body .app-shell .preview-stage {
  background-color: #090b0b !important;
  background-image: none !important;
}
html body .app-shell .preview-stage .empty-visual-media {
  background: transparent !important;
}
html body .app-shell .preview-stage .empty-visual-cover {
  display: block !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: .82 !important;
}
html body .app-shell .preview-stage .empty-visual-ring {
  display: none !important;
}

/* Keep the console backdrop visible and give the horizontal preview artwork
   a stable frame so it is not stretched by the composer column. */
html body .app-shell .main {
  background-image:
    linear-gradient(90deg, #080909 0%, rgba(8, 9, 9, .9) 32%, rgba(8, 9, 9, .28) 100%),
    url("assets/bonzai-ring.png") !important;
  background-position: center, right 72px !important;
  background-size: 100% 100%, min(1100px, 78vw) auto !important;
}
html body .app-shell #createView > .hero-copy,
html body .app-shell #createView .workspace-grid > .panel {
  background-color: rgba(11, 12, 12, .86) !important;
  backdrop-filter: blur(7px) !important;
}
html body .app-shell #createView .preview-stage {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  align-self: start !important;
}
@media (max-width: 760px) {
  html body .app-shell #createView .preview-stage {
    min-height: 240px !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Material reset: the hero owns the background artwork; the preview owns one
   clean source image. No decorative asset is shared between both surfaces. */
html body .app-shell .main {
  background: #080909 !important;
}
html body .app-shell #createView > .hero-copy {
  background-color: #0b0c0c !important;
  background-image:
    linear-gradient(90deg, #0b0c0c 0%, rgba(11, 12, 12, .98) 48%, rgba(11, 12, 12, .46) 76%, rgba(11, 12, 12, .18) 100%),
    url("assets/bonzai-ring.png") !important;
  background-position: center, right 46% !important;
  background-size: 100% 100%, min(680px, 54%) auto !important;
  background-repeat: no-repeat !important;
  backdrop-filter: none !important;
}
html body .app-shell #createView > .hero-copy::after {
  display: none !important;
}
html body .app-shell #createView .workspace-grid > .panel {
  background: var(--console-surface) !important;
  backdrop-filter: none !important;
}
html body .app-shell #createView .preview-stage {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  background: #090b0b !important;
}
html body .app-shell #createView .preview-stage .empty-visual-media {
  inset: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #090b0b !important;
}
html body .app-shell #createView .preview-stage .empty-visual-cover {
  display: block !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
}
html body .app-shell #createView .preview-stage .empty-visual-scrim {
  background: linear-gradient(180deg, transparent 42%, rgba(5, 6, 6, .84) 100%) !important;
}
html body .app-shell .preview-actions[hidden] {
  display: none !important;
}
html body .app-shell #tasksView .task-thumb-placeholder {
  background-image: url("assets/bonzai-preview-clean.png") !important;
}
@media (max-width: 760px) {
  html body .app-shell #createView > .hero-copy {
    background-position: center, right center !important;
    background-size: 100% 100%, auto 125% !important;
  }
  html body .app-shell #createView .preview-stage {
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Balance value must not inherit the light theme's dark numeric color. */
html body .app-shell #rechargeBtn #balanceLabel {
  color: var(--console-accent) !important;
  text-shadow: 0 0 12px rgba(216, 255, 105, .18) !important;
}

/* Canvas wiring follows the upstream infinite-canvas interaction model:
   connections live in world space, nodes stay above the SVG layer, and the
   handles remain usable without starting a canvas pan. */
html body .app-shell .canvas-connection-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
html body .app-shell .canvas-connection-hit {
  fill: none !important;
  stroke: transparent !important;
  stroke-width: 18px !important;
  pointer-events: stroke !important;
  cursor: pointer !important;
}
html body .app-shell .canvas-connection-line {
  fill: none !important;
  stroke: rgba(47, 111, 100, .62) !important;
  stroke-width: 2px !important;
  pointer-events: none !important;
}
html body .app-shell .canvas-connection-draft {
  fill: none !important;
  stroke: var(--lib-accent) !important;
  stroke-width: 2px !important;
  stroke-dasharray: 6 6 !important;
  pointer-events: none !important;
}
html body .app-shell .canvas-node {
  z-index: 2 !important;
}
html body .app-shell .canvas-handle {
  position: absolute !important;
  top: 50% !important;
  z-index: 6 !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border: 2px solid var(--lib-accent) !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(25, 26, 24, .16) !important;
  opacity: 0 !important;
  transform: translateY(-50%) scale(.82) !important;
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease !important;
  cursor: crosshair !important;
}
html body .app-shell .canvas-handle-target { left: -10px !important; }
html body .app-shell .canvas-handle-source { right: -10px !important; }
html body .app-shell .canvas-node:hover .canvas-handle,
html body .app-shell .canvas-node.selected .canvas-handle,
html body .app-shell .canvas-node.connection-target .canvas-handle {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1) !important;
}
html body .app-shell .canvas-node.connection-target {
  border-color: var(--lib-accent) !important;
  box-shadow: 0 0 0 3px rgba(47, 111, 100, .14), 0 18px 38px rgba(25, 26, 24, .14) !important;
}
html body .app-shell .canvas-handle:hover {
  background: var(--lib-accent) !important;
}
html body .app-shell .canvas-stage.is-panning,
html body .app-shell .canvas-stage.is-panning .canvas-node {
  cursor: grabbing !important;
}
@media (max-width: 620px) {
  html body .app-shell .canvas-handle {
    opacity: .8 !important;
  }
}