:root { --ambient-base: #0c121d; --ambient-line-opacity: .25; --ambient-point-opacity: .36; --ambient-wash: rgb(32 117 212 / 7%); --ambient-reading: rgb(12 18 29 / 42%); --ambient-field: rgb(12 18 29 / 64%); }
:root[data-theme="light"] { --ambient-base: #f3f7fc; --ambient-line-opacity: .18; --ambient-point-opacity: .28; --ambient-wash: rgb(47 139 223 / 5%); --ambient-reading: rgb(243 247 252 / 48%); --ambient-field: rgb(255 255 255 / 72%); }
:root[data-ambient="feature"] { --ambient-line-opacity: .66; --ambient-point-opacity: .86; }
:root[data-theme="light"][data-ambient="feature"] { --ambient-line-opacity: .39; --ambient-point-opacity: .57; }
body { isolation: isolate; background: var(--ambient-base); }
body::before, body::after { content: ""; position: fixed; inset: -5%; z-index: -1; pointer-events: none; background-position: center; background-size: cover; background-repeat: no-repeat; }
body::before { background-image: url("/ambient-lines.svg"); opacity: var(--ambient-line-opacity); animation: ambient-flow 22s ease-in-out infinite alternate; }
body::after { background-image: url("/ambient-points.svg"); opacity: var(--ambient-point-opacity); animation: ambient-points 18s ease-in-out infinite alternate; }
.desktop-pdv-shell { background: transparent; }
:root[data-surface="pdv"] body { background: var(--ambient-base); }
.desktop-pdv-main, .main { background: transparent; }
/* One translucent veil per reading area, never on the text or nested tables. */
.content :is(.dashboard-area, .stock-page, .accounts-register, .sales-history-workspace, .us-workspace, .cw-workspace) { position: relative; isolation: isolate; background: transparent; }
.content :is(.dashboard-area, .stock-page, .accounts-register, .sales-history-workspace, .us-workspace, .cw-workspace)::before {
  content: ""; position: absolute; inset: -18px; z-index: -1; pointer-events: none;
  background: var(--ambient-reading); border-radius: 22px;
  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent), linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-composite: intersect;
}
.content .panel { background-color: var(--ambient-reading); border-radius: 10px; box-shadow: 0 0 16px 3px color-mix(in srgb, var(--ambient-reading) 45%, transparent); }
.content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) { background-color: var(--ambient-field); }
:root[data-ambient="feature"] .pdv-home { background: radial-gradient(ellipse at 45% 35%, var(--ambient-wash), transparent 70%); }
:root[data-ambient="feature"] .pdv-home-sale { background: color-mix(in srgb, var(--surface) 88%, transparent); }
:root[data-ambient="feature"] .pdv-home-routine { background: color-mix(in srgb, var(--surface) 94%, transparent); }
:root[data-motion-paused="true"] body::before, :root[data-motion-paused="true"] body::after { animation-play-state: paused; }
@keyframes ambient-flow { from { transform: translate(-2%, -1%) rotate(-1deg) scale(1); } to { transform: translate(2%, 1.2%) rotate(1deg) scale(1.025); } }
@keyframes ambient-points { from { transform: translate(1.8%, .9%) scale(1.015); } to { transform: translate(-2.2%, -1.5%) scale(1); } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; transform: none; } }
@media (forced-colors: active), print { body::before, body::after { display: none; } }