/* Lucid dark appearance: shared surfaces and semantic colors for the mobile
   prototype. Main-tab washes carry the brand spectrum; detail screens stay
   quiet. Typography, spacing, content and interactions remain unchanged. */
.screen[data-appearance="dark"] {
  color-scheme: dark;
  /* Agency Home glow asset: assets/home/05-yellow50031.svg. */
  --dark-sunlight: #ffdf8b;
  --dark-control: color-mix(in srgb, var(--ld-black) 97%, var(--ld-sky-100));
  --dark-night: color-mix(in srgb, var(--ld-black) 92%, var(--ld-sky-100));
  --dark-card: color-mix(in srgb, var(--ld-black) 86%, var(--ld-sky-100));
  --dark-raised: color-mix(in srgb, var(--ld-black) 81%, var(--ld-sky-100));
  --dark-text: color-mix(in srgb, var(--ld-white) 90%, var(--ld-sky-100));
  --dark-gain: color-mix(in srgb, var(--ld-lime-300) 55%, var(--ld-sky-100));
  --dark-secondary: color-mix(in srgb, var(--dark-text) 76%, var(--dark-night));
  --dark-muted: color-mix(in srgb, var(--dark-text) 62%, var(--dark-night));
  --bg: var(--dark-night);
  --bg-2: var(--dark-raised);
  --bg-card: var(--dark-card);
  --ink: var(--dark-text);
  --ink-2: var(--dark-secondary);
  --ink-3: var(--dark-muted);
  --accent: var(--dark-text);
  --accent-ink: var(--dark-night);
  --accent-pos: var(--dark-gain);
  --signal-neg: var(--ld-rose-300);
  --signal-danger: var(--ld-rose-300);
  --signal-warn: var(--dark-sunlight);
  --signal-data: var(--ld-sky-300);
  --accent-2: var(--dark-gain);
  --accent-3: var(--ld-rose-300);
  --accent-4: var(--ld-sky-300);
  --accent-soft: color-mix(in srgb, var(--ld-sky-300) 12%, var(--bg));
  --hold-accent: var(--ld-sky-100);
  --chart-line: var(--dark-gain);
  --chart-fill: var(--dark-gain);
  --terminal-fill: var(--dark-text);
  --terminal-ink: var(--dark-night);
  --bg-sky: color-mix(in srgb, var(--ld-sky-300) 18%, var(--dark-night));
  --bg-olive: color-mix(in srgb, var(--ld-lime-300) 14%, var(--dark-night));
  --bg-clay: color-mix(in srgb, var(--ld-rose-300) 14%, var(--dark-night));
  --bg-sand: color-mix(in srgb, var(--dark-sunlight) 14%, var(--dark-night));
  --rule: rgb(255 255 255 / 8%);
  --rule-2: rgb(255 255 255 / 16%);
  --ld-surface: var(--dark-night);
  --ld-text: var(--dark-text);
  --ld-muted: var(--dark-muted);
  --ld-border: var(--rule);
  --ld-gain: var(--dark-gain);
  --ld-loss: var(--ld-rose-300);
  --ld-white-50: var(--dark-card);
  --ld-white-64: rgb(255 255 255 / 6%);
  --ld-neutral-25: var(--dark-raised);
  --ld-neutral-50: var(--dark-card);
  --ld-shadow-dock: 0 -12px 40px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(212 232 255 / 12%);
  --ld-shadow-card: 0 10px 24px -8px rgb(0 0 0 / 38%), 0 2px 5px rgb(0 0 0 / 16%), inset 0 1px 0 rgb(212 232 255 / 7%);
  --ld-shadow-control: 0 4px 10px rgb(0 0 0 / 24%), inset 0 1px 0 rgb(212 232 255 / 10%);
  color: var(--ink);
  /* Shared pearl atmosphere; spectrum is concentrated at active edges. */
  --dark-atmosphere:
    radial-gradient(ellipse 320px 270px at 38% -55px, rgb(246 247 243 / 12%), transparent 100%),
    radial-gradient(ellipse 250px 230px at 105% -15px, rgb(255 241 208 / 7%), transparent 100%),
    radial-gradient(ellipse 240px 290px at -25% 100px, rgb(212 232 255 / 6%), transparent 100%),
    var(--dark-night);
  --dark-edge-spectrum: conic-gradient(from 0deg,
    #99f3d6 0deg, #99f3f7 65deg, #dff7b0 125deg,
    #ffdfb0 180deg, #ffa3cc 235deg, #a3d1ff 285deg, #99f3d6 360deg);
  --dark-edge-glow: 0 4px 14px rgb(0 0 0 / 32%);
  background: var(--bg);
}
/* The entry and main conversation share Home’s light-led atmosphere. */
.screen[data-appearance="dark"]:not(:has(> .viewport)),
.screen[data-appearance="dark"]:has(> .viewport[data-lucid-page="yoshi"]) {
  background: var(--dark-atmosphere);
}
/* Home: diffuse pearl light rather than overlapping rose/lilac color. */
.screen[data-appearance="dark"]:has(> .viewport[data-lucid-page="home"]) {
  background:
    radial-gradient(ellipse 320px 270px at 38% -55px, rgb(246 247 243 / 17%), transparent 100%),
    radial-gradient(ellipse 250px 230px at 105% -15px, rgb(255 241 208 / 12%), transparent 100%),
    radial-gradient(ellipse 240px 290px at -25% 100px, rgb(212 232 255 / 10%), transparent 100%),
    var(--dark-night);
}
.screen[data-appearance="dark"]:has(> .viewport[data-lucid-page="home"] .ld-home[data-performance="loss"]) {
  background:
    radial-gradient(ellipse 350px 260px at 0 -20px, color-mix(in srgb, var(--ld-red-900) 28%, transparent), transparent 100%),
    radial-gradient(ellipse 260px 210px at 100% 0, color-mix(in srgb, var(--ld-rose-300) 9%, transparent), transparent 100%),
    var(--dark-night);
}
.screen[data-appearance="dark"] .ld-tab-header > button,
.screen[data-appearance="dark"] .ld-tab-header > span:last-child > button {
  border: 1px solid var(--rule) !important;
}
.screen[data-appearance="dark"] .ld-account-tile img,
.screen[data-appearance="dark"] .ld-account-chevron img,
.screen[data-appearance="dark"] img[style*="brightness(0)"] {
  filter: brightness(0) invert(1) !important;
}
.screen[data-appearance="dark"] .ld-account-apy {
  background: color-mix(in srgb, var(--dark-gain) 10%, transparent);
}
.screen[data-appearance="dark"] .ld-chart-ranges button[style*="background: var(--bg-2)"] {
  background: var(--dark-raised) !important;
}
/* The shared dock uses a softly lit center that retains
   the new brand mark and the raised geometry from the approved navigation. */
.screen[data-appearance="dark"] > .tabbar {
  background: var(--dark-night);
}
.screen[data-appearance="dark"] .ld-yoshi-tab > span:first-child {
  background: var(--dark-control) !important;
  border-color: rgb(235 247 239 / 20%) !important;
  box-shadow: var(--dark-edge-glow), inset 0 1px 0 rgb(255 255 255 / 8%) !important;
}
.screen[data-appearance="dark"] .ld-yoshi-tab img {
  filter: invert(1);
}
.screen[data-appearance="dark"] button:focus-visible {
  outline: 2px solid var(--ld-sky-300);
  outline-offset: 3px;
}

/* All main surfaces use the same quiet light; details retain a plain ground. */
.screen[data-appearance="dark"]:has(> .viewport[data-lucid-page="activity"]) {
  background: var(--dark-atmosphere);
}
.screen[data-appearance="dark"] [data-screen-label="Trade"],
.screen[data-appearance="dark"] [data-screen-label="Transfer"],
.screen[data-appearance="dark"] .ld-rail-screen {
  background: var(--dark-atmosphere) !important;
}
.screen[data-appearance="dark"] [data-screen-label="Trade"][data-lucid-phase="detail"],
.screen[data-appearance="dark"] [data-screen-label="Holding"] {
  background: var(--bg) !important;
}
/* Form accessories, selected filters and disabled buttons had light-only
   adapter colors. Explicit roles preserve the existing component geometry. */
.screen[data-appearance="dark"] .ld-detail-header > button {
  border: 1px solid var(--rule) !important;
}
.screen[data-appearance="dark"] .ld-button[data-kind="ghost"],
.screen[data-appearance="dark"] .ld-button[data-kind="quiet"],
.screen[data-appearance="dark"] .ld-segmented,
.screen[data-appearance="dark"] .ld-amount-field,
.screen[data-appearance="dark"] .ld-form-field > input {
  background: var(--bg-2) !important;
  border-color: var(--rule) !important;
}
.screen[data-appearance="dark"] .ld-button:disabled {
  background: var(--bg-2) !important; color: var(--ink-3) !important;
}
.screen[data-appearance="dark"] .ld-amount-field button:not([aria-label="Clear amount"]),
.screen[data-appearance="dark"] [aria-label="Filter activity by type"] button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--ld-sky-100) 25%, var(--bg)) !important;
  color: var(--ink) !important;
}
.screen[data-appearance="dark"] .ld-amount-field[data-invalid="true"] {
  border-color: var(--signal-danger) !important;
}
.screen[data-appearance="dark"] .ld-form-field > input:focus,
.screen[data-appearance="dark"] .ld-amount-field:focus-within {
  box-shadow: inset 0 0 0 1px var(--ld-sky-300);
}
.screen[data-appearance="dark"] input,
.screen[data-appearance="dark"] textarea,
.screen[data-appearance="dark"] select { caret-color: var(--ld-sky-100); }
.screen[data-appearance="dark"] input::placeholder,
.screen[data-appearance="dark"] textarea::placeholder { color: var(--ink-3); }
.screen[data-appearance="dark"] .ld-trade-amount[data-empty="true"] > span {
  color: var(--ink-3) !important;
}
.screen[data-appearance="dark"] [role="switch"][aria-checked="true"] {
  background: var(--ld-sky-300) !important;
}
.screen[data-appearance="dark"] [role="switch"][aria-checked="false"] {
  background: var(--ink-3) !important;
}
.screen[data-appearance="dark"] [role="switch"] > span { background: var(--bg) !important; }
/* Web chat treatment translated through the reviewed dark surface roles. */
.screen[data-appearance="dark"] .ld-chat-user { background: var(--bg-card); }
.screen[data-appearance="dark"] .ld-yoshi-composer {
  background: var(--dark-card-material); border-color: var(--rule-2);
}

/* Shared dark materials: raised cards, inset fields, tactile controls.
   The fine top light comes from the same sky tint as the screen glow. */
.screen[data-appearance="dark"] {
  --dark-card-material: linear-gradient(155deg, rgb(212 232 255 / 5%), transparent 65%), var(--dark-card);
  --dark-field-material: linear-gradient(180deg, rgb(0 0 0 / 7%), transparent 70%), var(--dark-card);
  --dark-field-shadow: inset 0 2px 4px rgb(0 0 0 / 16%), 0 1px 0 rgb(212 232 255 / 4%);
}
.screen[data-appearance="dark"] [data-lucid-surface="card"],
.screen[data-appearance="dark"] .ld-account-row {
  background: var(--dark-card-material) !important;
}
/* Transparent child rows let the shared card material remain continuous. */
.screen[data-appearance="dark"] [data-lucid-surface="card"] > button[style*="background: var(--bg-card)"] {
  background: transparent !important;
}
.screen[data-appearance="dark"] .ld-button:not(:disabled),
.screen[data-appearance="dark"] .ld-amount-field button:not([aria-label="Clear amount"]),
.screen[data-appearance="dark"] .ld-account-tile {
  box-shadow: var(--ld-shadow-control);
}
.screen[data-appearance="dark"] .ld-button:disabled { box-shadow: none; }
.screen[data-appearance="dark"] .ld-segmented,
.screen[data-appearance="dark"] .ld-amount-field,
.screen[data-appearance="dark"] .ld-trade-amount,
.screen[data-appearance="dark"] .ld-form-field > input,
.screen[data-appearance="dark"] div:has(> input[placeholder^="Search"]) {
  background: var(--dark-field-material) !important;
  box-shadow: var(--dark-field-shadow);
  border-color: var(--rule-2) !important;
}
.screen[data-appearance="dark"] .ld-form-field > input:focus,
.screen[data-appearance="dark"] .ld-amount-field:focus-within {
  box-shadow: var(--dark-field-shadow), inset 0 0 0 1px var(--ld-sky-300);
}
.screen[data-appearance="dark"] .ld-amount-field[data-invalid="true"] { border-color: var(--signal-danger) !important; }
/* One type scale for the existing Transfer, check and trade forms. */
.screen[data-appearance="dark"] .ld-rail-screen .ld-label,
.screen[data-appearance="dark"] [data-screen-label="Trade"] .ld-label,
.screen[data-appearance="dark"] .ld-form-field > div:first-child {
  font-size: var(--ld-type-small) !important;
  font-weight: 400 !important;
  line-height: 1.4;
}
.screen[data-appearance="dark"] .ld-rail-screen .ld-label > span,
.screen[data-appearance="dark"] [data-screen-label="Trade"] .ld-label > span {
  font-size: inherit !important; font-weight: inherit !important;
}
.screen[data-appearance="dark"] .ld-transfer-account-name,
.screen[data-appearance="dark"] .ld-transfer-account-value {
  font-size: var(--ld-type-body) !important; font-weight: 500; line-height: 1.25;
}
.screen[data-appearance="dark"] .ld-transfer-account-sub {
  font-size: var(--ld-type-small) !important; font-weight: 400; line-height: 1.4;
}
.screen[data-appearance="dark"] .ld-amount-field > input,
.screen[data-appearance="dark"] .ld-amount-field > span:first-child,
.screen[data-appearance="dark"] .ld-trade-amount > span {
  font-size: var(--ld-type-value) !important; font-weight: 400; line-height: 1.4;
}
.screen[data-appearance="dark"] .ld-trade-amount {
  box-sizing: border-box; min-height: 64px !important;
  padding: 12px 16px !important; border-radius: var(--ld-radius-card) !important;
}

/* Annotation refinements: clean badges, readable labels and fund/company marks. */
.screen[data-appearance="dark"] .ld-account-name { color: var(--ink); }
.screen[data-appearance="dark"] .ld-alert-count { border-color: transparent !important; background-clip: padding-box; }
.screen[data-appearance="dark"] .ld-funding-pill {
  background: linear-gradient(120deg, rgb(163 209 255 / 8%), rgb(191 247 175 / 4%)), var(--dark-card) !important;
  border: 1px solid rgb(212 232 255 / 12%) !important;
  box-shadow: inset 0 1px 0 rgb(212 232 255 / 6%), 0 3px 8px rgb(0 0 0 / 12%);
  padding: 7px 12px !important; gap: 8px !important;
  color: var(--ink-2) !important;
}
.screen[data-appearance="dark"] .ld-funding-pill > svg { color: var(--dark-gain); }
.screen[data-appearance="dark"] .ld-security-mark { background: #f7f7f7 !important; }
.screen[data-appearance="dark"] {
  --dark-map-up: color-mix(in srgb, var(--ld-lime-500) 70%, var(--ld-cyan-300));
  --dark-map-down: color-mix(in srgb, var(--ld-red-900) 60%, var(--ld-rose-300));
}
.screen[data-appearance="dark"] .ld-sector-tile { box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); }

/* Reference-inspired luminous edges: solid dark centers with localized color.
   Disabled, destructive and secondary controls keep their separate meanings. */
.screen[data-appearance="dark"] .ld-button[data-kind="primary"]:not(:disabled) {
  --accent-ink: var(--dark-text);
  background: var(--dark-control) !important;
  color: var(--dark-text) !important;
  border: 1px solid rgb(235 247 239 / 18%) !important;
  box-shadow: var(--dark-edge-glow), inset 0 1px 0 rgb(255 255 255 / 5%);
}
.screen[data-appearance="dark"] .ld-yoshi-composer {
  background: var(--dark-control);
  border-color: rgb(235 247 239 / 18%);
  box-shadow: var(--dark-edge-glow);
}
.screen[data-appearance="dark"] .ld-yoshi-composer button:last-child {
  --accent-ink: var(--dark-text);
  background: var(--dark-raised) !important;
  color: var(--dark-text) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
}

/* Separate spectrum and face layers let light diffuse beyond the silhouette
   without a hard rainbow border or color leaking into the dark center. */
.screen[data-appearance="dark"] .ld-button[data-kind="primary"]:not(:disabled),
.screen[data-appearance="dark"] .ld-yoshi-composer {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.screen[data-appearance="dark"] .ld-yoshi-tab > span:first-child { isolation: isolate; overflow: visible; }
.screen[data-appearance="dark"] .ld-button[data-kind="primary"]:not(:disabled)::before,
.screen[data-appearance="dark"] .ld-yoshi-tab > span:first-child::before,
.screen[data-appearance="dark"] .ld-yoshi-composer::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--dark-edge-spectrum);
  filter: blur(7px);
  opacity: .30;
  pointer-events: none;
  z-index: -2;
}
.screen[data-appearance="dark"] .ld-button[data-kind="primary"]:not(:disabled)::after,
.screen[data-appearance="dark"] .ld-yoshi-tab > span:first-child::after,
.screen[data-appearance="dark"] .ld-yoshi-composer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--dark-control);
  pointer-events: none;
  z-index: -1;
}
.screen[data-appearance="dark"] .ld-yoshi-tab > span:first-child::before { inset: -1px; opacity: .38; filter: blur(8px); }
.screen[data-appearance="dark"] .ld-yoshi-composer::before { opacity: .18; }