/* r103: direct, stable UI. Keep Canvas dark; all ordinary/auth surfaces paint light. */
#youzi-route-boot { display: none !important; }

body.youzi-home .home-hero-copy,
body.youzi-home .home-new-canvas::before,
body.youzi-home .home-tool-card,
body.youzi-home .home-tool-card::before,
body.youzi-home .home-tool-card::after,
body.youzi-home .home-card-pointer-light,
body.youzi-home .home-work-card,
body.youzi-home .home-work-media img,
body.youzi-home .home-work-video,
body.youzi-home .home-work-overlay,
body.youzi-home .home-border-glow::after {
  animation: none !important;
  transition: none !important;
  filter: none !important;
}

body.youzi-home .home-border-glow::after {
  display: none !important;
}

body.youzi-home .home-work-card,
body.youzi-home .home-work-card:hover,
body.youzi-home .home-work-card:focus-visible,
body.youzi-home .home-masonry.is-selection-mode .home-work-card:hover {
  top: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}

body.youzi-home .home-work-card:hover,
body.youzi-home .home-work-card:focus-visible {
  border-color: rgba(31, 99, 233, .2) !important;
}

body.youzi-home .home-work-card:hover img,
body.youzi-home .home-work-card:hover .home-work-video {
  transform: none !important;
}

html[data-youzi-route="canvas"] .task-node select[data-yz-empty-credential="1"] {
  appearance: none;
  pointer-events: none;
  cursor: not-allowed;
  color: #6f7784;
  background-image: none;
}

body.youzi-home .home-new-brush-arrow {
  left: calc(var(--home-new-icon-left) + var(--home-new-icon-size) + 14px) !important;
  right: 18px !important;
  bottom: clamp(18px, 7%, 30px) !important;
  width: auto !important;
  max-width: calc(100% - var(--home-new-icon-left) - var(--home-new-icon-size) - 32px) !important;
  height: clamp(118px, 58%, 232px) !important;
  max-height: calc(100% - 92px) !important;
  object-fit: contain !important;
  object-position: left bottom !important;
  transform: none !important;
}

.home-work-sentinel {
  display: block;
  width: 100%;
  height: 2px;
  margin: 0;
  break-inside: avoid;
}

html[data-youzi-route="canvas"] .result-card {
  --yz-result-actions-opacity: 1 !important;
}

html[data-youzi-route="canvas"] .yz-result-actions {
  opacity: 1 !important;
  flex: 0 0 auto;
  max-width: calc(100% - 28px);
  gap: 3px;
  pointer-events: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

html[data-youzi-route="canvas"] .yz-result-actions > button,
html[data-youzi-route="canvas"] .yz-result-actions > a {
  min-width: 0;
  padding-inline: 5px !important;
  font-size: 8px;
  pointer-events: auto;
}

/* Keep dialog loading feedback and the original canvas result animation. */
html[data-youzi-route="canvas"] .dot-wave {
  animation: 12s linear infinite dot-spin !important;
  will-change: transform, opacity;
}

html[data-youzi-route="canvas"] .thin-connections .yz-flow-wire-pulse {
  animation: none !important;
}

/* Keep the four home tools in a predictable 2x2 layout instead of mixed spans. */
body.youzi-home .home-tools-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body.youzi-home .home-tool-card:nth-child(n) {
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0 !important;
}

/* The tab text is the control; remove the extra gooey layer that made it look doubled. */
body.youzi-home .home-tabs {
  background: #fff !important;
  border: 1px solid #dfe4ec !important;
  box-shadow: none !important;
}

body.youzi-home .home-gooey-pill,
body.youzi-home .home-gooey-text,
body.youzi-home .home-gooey-particles {
  display: none !important;
}

body.youzi-home .home-tab,
body.youzi-home .home-tab.is-active {
  color: #3f4756 !important;
  background: transparent !important;
  text-shadow: none !important;
  transition: none !important;
}

body.youzi-home .home-tab.is-active {
  background: #eef2ff !important;
  border: 1px solid #dfe4ec !important;
}

/* Light-theme login fields remain readable for typed and browser-filled values. */
.login-shell form label span {
  color: #3f4756 !important;
}

.login-shell input {
  color: #202532 !important;
  caret-color: #39445a !important;
  border-color: #c8d0dc !important;
  -webkit-text-fill-color: #202532 !important;
}

.login-shell input::placeholder {
  color: #68758a !important;
  opacity: 1 !important;
}

.login-shell input:focus {
  border-color: #5b5bd6 !important;
  box-shadow: 0 0 0 3px rgba(91, 91, 214, .16) !important;
}

.login-shell input:-webkit-autofill,
.login-shell input:-webkit-autofill:hover,
.login-shell input:-webkit-autofill:focus {
  color: #202532 !important;
  caret-color: #202532 !important;
  -webkit-text-fill-color: #202532 !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
}

.login-page {
  color: #202532 !important;
  background: #f7f8fb !important;
}

.login-shell {
  color: #202532 !important;
  background: #fff !important;
  border-color: #e2e6ee !important;
  box-shadow: 0 18px 54px rgba(42, 58, 91, .1) !important;
}

.login-copy span,
.login-shell form label span,
.login-shell > footer {
  color: #687080 !important;
}

.login-shell input {
  color: #202532 !important;
  background: #fbfcfe !important;
  border-color: #dfe4ec !important;
}

.login-tabs {
  background: #f0f2f6 !important;
}

.login-page *,
.login-page *::before,
.login-page *::after {
  animation: none !important;
  transition-duration: .12s !important;
}

html[data-youzi-route="canvas"] .auth-loading {
  min-height: 100vh;
  background-color: #f8fafc !important;
  background-image: radial-gradient(circle at 1px 1px, rgba(31,37,50,.1) 1px, transparent 1.2px) !important;
  background-size: 30px 30px !important;
}

html[data-youzi-route="canvas"] .auth-loading > * {
  display: none !important;
}

@media (max-width: 560px) {
  body.youzi-home .home-tools-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }

  body.youzi-home .home-new-brush-arrow {
    right: 12px !important;
    height: clamp(96px, 52%, 160px) !important;
    max-height: calc(100% - 82px) !important;
  }
}

.yz-canvas-startup-shell {
  min-height: 100vh;
  background: #f8fafc;
  color: #202532;
}

.yz-canvas-startup-shell .quiet-header {
  height: 56px;
  border-bottom: 1px solid #e5e9f0;
  background: #fbfcff;
}

.yz-canvas-startup-shell .white-canvas {
  min-height: calc(100vh - 56px);
  background-color: #f8fafc;
  background-image: radial-gradient(circle at 1px 1px, rgba(31, 37, 50, .1) 1px, transparent 1.2px);
  background-size: 30px 30px;
}

/* Keep node geometry and drag transforms intact while removing decorative motion. */
html[data-youzi-route="canvas"] .graph-node {
  --yz-node-control: #000;
  --yz-node-control-text: #fff;
  --yz-node-pin-fill: #fff;
  --yz-node-pin-stroke: #000;
  --yz-node-timer-surface: #f7f8fa;
  --yz-node-timer-text: #000;
  --yz-node-timer-label: #000;
}

html[data-youzi-route="canvas"] .graph-node,
html[data-youzi-route="canvas"] .graph-node *,
html[data-youzi-route="canvas"] .graph-node::before,
html[data-youzi-route="canvas"] .graph-node::after,
html[data-youzi-route="canvas"] .graph-node *::before,
html[data-youzi-route="canvas"] .graph-node *::after {
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-youzi-route="canvas"] .graph-node :is(.mode-tabs button.active, .choice-group button.selected, .primary-run) {
  background: var(--yz-node-control) !important;
  color: var(--yz-node-control-text) !important;
  -webkit-text-fill-color: var(--yz-node-control-text) !important;
  filter: none !important;
  will-change: auto;
}

html[data-youzi-route="canvas"] .graph-node .primary-run:disabled {
  opacity: 1 !important;
}

/* These controls already contain their labels; remove the duplicated overlay labels. */
html[data-youzi-route="canvas"] .graph-node :is(.mode-tabs button.active, .choice-group button.selected, .primary-run)::before,
html[data-youzi-route="canvas"] .graph-node :is(.mode-tabs button.active, .choice-group button.selected, .primary-run)::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  will-change: auto;
}

html[data-youzi-route="canvas"] .graph-node .ratio-group button.selected .ratio-preview-shape {
  border-color: var(--yz-node-control-text);
}

/* The transparent original pin retains its exact size, position and pointer target. */
html[data-youzi-route="canvas"] .graph-node :is(.output-pin, .input-pin, .task-input-handle, .connect-handle, .yz-cutout-node-input, .yz-cutout-input-pin, .yz-cutout-output-pin) {
  background: transparent !important;
  border-color: transparent !important;
  transform: none !important;
  filter: none !important;
}

html[data-youzi-route="canvas"] .graph-node :is(.output-pin, .input-pin, .task-input-handle, .connect-handle, .yz-cutout-node-input, .yz-cutout-input-pin, .yz-cutout-output-pin)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 1px solid var(--yz-node-pin-stroke);
  border-radius: 50%;
  background: var(--yz-node-pin-fill);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

html[data-youzi-route="canvas"] .graph-node :is(.output-pin, .input-pin, .task-input-handle, .connect-handle, .yz-cutout-node-input, .yz-cutout-input-pin, .yz-cutout-output-pin)::after {
  content: none !important;
  display: none !important;
}

html[data-youzi-route="canvas"] .thin-connections .yz-flow-wire-pulse {
  display: none !important;
}

html[data-youzi-route="canvas"] .thin-connections .active-wire {
  animation: none !important;
  transition: none !important;
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  filter: none !important;
}

html[data-youzi-route="canvas"] .graph-node .generation-preview > .dot-wave {
  display: block;
  inset: 8% !important;
  animation: yz-generation-dot-field 4.8s ease-in-out infinite !important;
  will-change: transform, opacity;
}

html[data-youzi-route="canvas"] .graph-node .generation-preview > .dot-wave > span {
  background: #5b91ff !important;
  box-shadow: 0 0 5px rgba(91, 145, 255, .2) !important;
}

@keyframes yz-generation-dot-field {
  0%, 100% { opacity: .34; transform: translate3d(-1.5%, 1%, 0) scale(.96); }
  48% { opacity: .92; transform: translate3d(1.5%, -1%, 0) scale(1.04); }
}

html[data-youzi-route="canvas"] .graph-node .generation-preview[data-yz-timed] {
  background: var(--yz-node-timer-surface);
}

html[data-youzi-route="canvas"] .graph-node .generation-preview[data-yz-timed]::after {
  display: none !important;
}

html[data-youzi-route="canvas"] .graph-node .generation-preview[data-yz-timed] > strong,
html[data-youzi-route="canvas"] .graph-node .generation-preview[data-yz-timed] > small {
  display: none !important;
}

/* The button is disabled only while its generation task is running. */
html[data-youzi-route="canvas"] .task-node.graph-node .primary-run:disabled {
  position: relative;
}

html[data-youzi-route="canvas"] .task-node.graph-node .primary-run:disabled::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 14px;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: yz-generation-button-spin .85s linear infinite !important;
}

html[data-youzi-route="canvas"] .task-node.graph-node .primary-run:disabled > span {
  margin-left: 22px;
}

@keyframes yz-generation-button-spin {
  from { transform: translateY(-50%) rotate(0); }
  to { transform: translateY(-50%) rotate(360deg); }
}

html[data-youzi-route="canvas"] .graph-node .generation-preview[data-yz-timed] > .yz-generation-timer {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid #e4eaf2;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(43, 67, 108, .08);
  color: var(--yz-node-timer-text);
  line-height: 1;
  pointer-events: none;
}

html[data-youzi-route="canvas"] .graph-node .yz-generation-timer-value {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #006bff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  html[data-youzi-route="canvas"] .graph-node .generation-preview > .dot-wave,
  html[data-youzi-route="canvas"] .task-node.graph-node .primary-run:disabled::before {
    animation: none !important;
  }
}

/* Follow the page's existing color scheme without changing its theme. */
@supports (color: light-dark(#fff, #000)) {
  html[data-youzi-route="canvas"] .graph-node {
    --yz-node-control: #000;
    --yz-node-control-text: light-dark(#fff, #f5f7fc);
    --yz-node-pin-fill: light-dark(#fff, #1d2635);
    --yz-node-pin-stroke: light-dark(#000, #a7b6ca);
    --yz-node-timer-surface: light-dark(#f7f8fa, #192230);
    --yz-node-timer-text: light-dark(#000, #edf2f9);
    --yz-node-timer-label: light-dark(#000, #aab7c9);
  }
}