/* Main pages only. Neutral materials; keep wallpaper, semantics and behavior intact. */
:root {
  --neutral-rgb: 250, 250, 249;
  --neutral-ink: #303136;
  --neutral-muted: #64656c;
  --neutral-faint: #83848b;
  --neutral-accent: #a56578;
  --neutral-soft: #eee2e7;
  --neutral-edge: rgba(75, 76, 86, .16);
  --neutral-rail: linear-gradient(145deg, #fafafa, #eeeff1);
  --neutral-shadow: 0 8px 24px rgba(24, 27, 35, .08);
}
html[data-theme="dark"], html[data-theme="night"],
html:not([data-wall-host]):not([data-theme="light"]) {
  --neutral-rgb: 32, 33, 38;
  --neutral-ink: #eeedf0;
  --neutral-muted: #bbb9c1;
  --neutral-faint: #96949e;
  --neutral-accent: #d3a0b1;
  --neutral-soft: #45353e;
  --neutral-edge: rgba(235, 233, 240, .15);
  --neutral-rail: linear-gradient(145deg, #26272d, #202126);
  --neutral-shadow: 0 8px 24px rgba(0, 0, 0, .17);
}
html:is([data-wall-host="home"], [data-wall-host="hub"]) {
  --canvas: rgb(var(--neutral-rgb)); --canvas-warm: rgb(var(--neutral-rgb));
  --surface: rgb(var(--neutral-rgb));
  --surface-soft: rgba(var(--neutral-rgb), .88);
  --ink: var(--neutral-ink); --text: var(--neutral-ink);
  --muted: var(--neutral-muted); --faint: var(--neutral-faint);
  --rose: var(--neutral-accent); --rose-deep: var(--neutral-accent);
  --rose-soft: var(--neutral-soft); --rose-mist: var(--neutral-soft);
  --cream: rgba(var(--neutral-rgb), .84);
  --border: var(--neutral-edge); --hub-line: var(--neutral-edge);
  --hub-panel: rgba(var(--neutral-rgb), .62);
  --hub-shadow: var(--neutral-shadow);
  --amber: var(--neutral-accent) !important;
  --heng: var(--neutral-accent); --heng-soft: var(--neutral-soft);
}
/* The same wallpaper veil on Home and Dashboard, independent of hue extraction. */
html[data-wall][data-wall-host="home"] .app::after,
html[data-wall][data-wall-host="hub"] .hub-app::before,
html[data-wall][data-wall-host="home"][data-theme="dark"] .app::after,
html[data-wall][data-wall-host="hub"][data-theme="dark"] .hub-app::before {
  background-image: linear-gradient(180deg,
    rgba(var(--neutral-rgb), calc(.62 * var(--wall-veil-eff, 1))),
    rgba(var(--neutral-rgb), calc(.5 * var(--wall-veil-eff, 1)))), var(--wall-img);
  filter: none;
}
html[data-wall-host="home"] :is(.home-whisper, .signature-card, .schedule-line, .chat-door, .today-card, .settings-bar, .rare-grid a),
html[data-wall-host="hub"] :is(.watch-hero, .pulse-card, .quota-card, .identity-card) {
  background: linear-gradient(145deg, rgba(var(--neutral-rgb), .62), rgba(var(--neutral-rgb), .46));
  border-color: var(--neutral-edge);
  box-shadow: var(--neutral-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-wall-host="hub"] .watch-hero::before { opacity: .1; }
html[data-wall-host="hub"] :is(.hub-anchor-nav, .hero-glance > span) {
  background: rgba(var(--neutral-rgb), .86);
  border-color: var(--neutral-edge);
}
html[data-wall-host="hub"] #newTaskBtn.primary-action {
  background: var(--neutral-soft); color: var(--neutral-ink);
  border-color: var(--neutral-edge); box-shadow: none;
}
html[data-wall-host="hub"] .quiet-action {
  background: rgba(var(--neutral-rgb), .84); color: var(--neutral-ink);
}
/* Chat rails stay opaque: do not reintroduce WebKit scrolling-text flicker. */
html[data-wall-host="chat"], html[data-wall-host="chat"] body {
  --ink: var(--neutral-ink); --ink-dim: var(--neutral-muted);
  --ink-faint: var(--neutral-faint); --mist: var(--neutral-edge);
  --gold: var(--neutral-accent) !important;
}
html[data-wall-host="chat"] header::before,
html[data-wall-host="chat"] footer .line,
html[data-wall-host="chat"] footer .attach-row.open {
  background: var(--neutral-rail) !important;
  border-color: var(--neutral-edge);
  box-shadow: var(--neutral-shadow), inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-wall-host="chat"] header .name { color: var(--neutral-accent) !important; }
html[data-wall-host="chat"] header .sig { color: var(--neutral-muted) !important; }
html[data-wall-host="chat"] :is(header .icon-btn, footer .icon-btn) { color: var(--neutral-muted); }
html[data-wall-host="chat"] footer .send { color: var(--neutral-accent); }
html[data-wall-host="chat"] footer .line .field:focus-within,
html[data-wall-host="chat"].in-shell footer .line .field:focus-within {
  background: rgba(var(--neutral-rgb), .65);
  border-color: var(--neutral-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 10px rgba(20,22,28,.08);
}
html[data-wall-host="chat"] .row.him:not(.proactive) .bubble {
  color: var(--neutral-ink);
  background: linear-gradient(145deg, rgba(var(--neutral-rgb), .70), rgba(var(--neutral-rgb), .62));
  border-color: var(--neutral-edge); box-shadow: var(--neutral-shadow);
}
html[data-wall-host="chat"] .row.her .bubble {
  color: var(--neutral-ink);
  background: color-mix(in srgb, var(--neutral-soft) 76%, transparent);
  border-color: color-mix(in srgb, var(--neutral-accent) 32%, transparent);
  box-shadow: var(--neutral-shadow);
}
html[data-wall-host="chat"] #liveRow.row.him .bubble {
  background: rgb(var(--neutral-rgb));
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Shell dock (App) and page-owned navigation (web) share the rail material. */
html[data-wall-host="chat"]:not(.in-shell) footer {
  background: linear-gradient(180deg, transparent, rgba(var(--neutral-rgb), .18));
}
#dock, #kb-shim, html[data-wall-host] .bottom-zone,
html[data-wall-host="chat"] .dock3 {
  background: var(--neutral-rail);
  border-color: var(--neutral-edge);
  --muted: var(--neutral-muted); --rose: var(--neutral-accent);
  --rose-deep: var(--neutral-accent);
}
#dock button { color: var(--neutral-muted); }
#dock button.on { color: var(--neutral-accent); }
#dock button.on span::after { background: var(--neutral-accent); }
html[data-wall-host] .dock a,
html[data-wall-host="chat"] .dock3 a { color: var(--neutral-muted); }
html[data-wall-host] .dock a.active,
html[data-wall-host="chat"] .dock3 a.on { color: var(--neutral-accent); }