/* Jade-night ambient variant. Motion uses only transform and opacity. */
body.ambient { background: #112823; color: #e9ecd6; }
.ambient .screen { position: relative; z-index: 1; }
.ambient-scene { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
.cloud { position: absolute; color: #d7b56d; opacity: .1; width: 460px; height: 160px; }
.cloud-one { top: 13%; right: -130px; animation: cloud-drift 42s ease-in-out infinite alternate; }
.cloud-two { bottom: 8%; left: -170px; animation: cloud-drift 53s ease-in-out -19s infinite alternate-reverse; }
.ambient-orbit { position: absolute; width: 520px; height: 520px; right: -330px; top: 36%; border: 1px solid #d7b56d; border-radius: 50%; opacity: .1; }
.ambient .masthead { position: relative; }
.ambient .brand h1 { display: block !important; color: #f0e7c8; font-size: 29px; letter-spacing: 1.5px; }
.ambient .brand p { color: #a3bca9; }
.ambient .brand p::before { display: none; content: none; }
.ambient .brand-mark { background: #b65f47; color: #fff0d0; border: 1px solid #d8a267; box-shadow: 0 3px 0 #09201b; }
.ambient .date-time > p { color: #cadbc8; }
.ambient .date-time > div { border-color: #50604a; }
.ambient .date-time span { color: #9eb69f; }
.ambient #clock { color: #e6c584; }
.dragon-stage { position: absolute; left: 40%; top: -13px; width: 235px; height: 91px; pointer-events: none; }
.jade-dragon { width: 195px; height: 89px; position: absolute; top: 0; left: 30px; animation: dragon-float 8s ease-in-out infinite; }
.dragon-tail { transform-origin: 120px 57px; animation: tail-sway 5s ease-in-out infinite; }
.fortune-seal { position: absolute; left: 0; top: 19px; color: #e3bd77; border: 1px solid #bc8060; border-radius: 5px; width: 34px; height: 39px; line-height: 36px; text-align: center; font: 27px/37px 'Microsoft YaHei','Noto Sans CJK SC','SimSun',serif; transform: rotate(-6deg); opacity: .8; }
.ambient .totals { background: #245345; border: 1px solid #66845a; position: relative; overflow: hidden; box-shadow: 0 5px 0 #0c211c; }
.ambient .totals::after { content: ''; position: absolute; top: 0; bottom: 0; left: -110px; width: 65px; background: rgba(239,214,151,.045); transform: skewX(-20deg); animation: jade-shimmer 24s linear infinite; pointer-events: none; }
.ambient .totals h2, .ambient .total span, .ambient #balance-note { color: #bbd3b8; }
.ambient .total { border-color: #648464; }
.ambient .balance p { color: #f1d494; }
.ambient .total p { color: #e9f1d8; }
.ambient .eyebrow { color: #e2b66d; }
.ambient h2 { color: #e2e8d2; }
.ambient .electric-latest strong { color: #ffac77; }
.ambient .electric-latest span, .ambient .chart-legend { color: #a8bfa6; }
.ambient .electric-key { background: #e69460; animation: ember-pulse 6s ease-in-out infinite; }
.ambient .other-key { background: #567363; }
.ambient #expense-chart text { fill: #c9d9c1; }
.ambient #expense-chart text[fill="#a85c36"] { fill: #f2ac78; }
.ambient #expense-chart rect[fill="#dfd7c8"] { fill: #496a57; }
.ambient #expense-chart rect[fill="#ce7b50"] { fill: #dd9562; }
.ambient #expense-chart line { stroke: #355340; }
.ambient .chart-note, .ambient .recent-date, .ambient .residents > span { color: #a1b698; }
.ambient .finance-bottom, .ambient .residents, .ambient .recent { border-color: #42583f; }
.ambient .recent-amount { color: #d8cd91; }
.ambient .month-spend { color: #e4d8a0; }
.ambient .category-bar { background: #294638; }
.ambient .categories { color: #bcd2b6; }
.ambient .residents li { color: #c5d4b9; }
.ambient .jemuran { background: #edf0dd; border: 1px solid #c5b985; color: #304f40; box-shadow: 0 5px 0 #0c211c; }
.ambient .ai-heading .eyebrow { color: #488164; }
.ambient .ai-heading h2 { color: #2d5844; }
.ambient .mascot { animation: laundry-sway 9s ease-in-out -2s infinite; transform-origin: 50% 15%; }
.ambient .mode { color: #7f7155; }
.ambient .recommendation { background: #d9e4c7; border-left: 3px solid #649375; }
.ambient .recommendation.caution { background: #f0d6ae; border-left-color: #cb804e; }
.ambient .recommendation.waiting { background: #e5e3d1; border-left-color: #aaa17c; }
.ambient #recommend-floor { color: #315f43; }
.ambient .wash-plan { border-color: #d0d6bd; }
.ambient .weather-status { color: #6f7d61; }
.ambient footer, .ambient #data-note { color: #9fb292; }
.ambient #ledger-note { color: #c4ac77; }
@keyframes dragon-float { 0%,100% { transform: translate(0,0) rotate(-2deg); } 50% { transform: translate(9px,-5px) rotate(2deg); } }
@keyframes tail-sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes cloud-drift { from { transform: translateX(-25px); } to { transform: translateX(100px); } }
@keyframes jade-shimmer { from { transform: translateX(0) skewX(-20deg); } to { transform: translateX(1500px) skewX(-20deg); } }
@keyframes ember-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes laundry-sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@media (max-width: 1300px) {
  .ambient .brand h1 { font-size: 27px; }
  .dragon-stage { left: 37%; width: 190px; }
  .jade-dragon { width: 165px; left: 25px; }
  .fortune-seal { top: 24px; width: 27px; height: 33px; font-size: 23px; line-height: 31px; }
}
@media (min-width: 1600px) and (min-height: 900px) {
  .ambient .brand h1 { font-size: 38px; }
  .dragon-stage { width: 310px; top: -10px; }
  .jade-dragon { width: 250px; height: 115px; left: 45px; }
  .fortune-seal { width: 42px; height: 48px; font-size: 34px; line-height: 46px; top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient *, .ambient *::before, .ambient *::after { animation: none !important; }
}

/* Night shift: dim surfaces, fixed data colors, slow decorative light only. */
body.ambient { background:#0b121a; color:#d3ddd9; }
.ambient .brand { position:relative; z-index:2; }
.ambient .brand h1 { display:block !important; visibility:visible !important; opacity:1 !important; animation:none !important; color:#e8dec1; }
.ambient .brand-mark { background:#d3a333; color:#182126; border-color:#e7bd55; }
.ambient .totals { background:#142c30; border-color:#41605c; box-shadow:none; }
.ambient .balance p { color:#e4c277; }
.ambient .jemuran { position:relative; background:#14212c; color:#c3d3d7; border-color:#3c5360; box-shadow:none; }
.ambient .ai-heading h2 { color:#d3ddd9; }
.ambient .ai-heading .eyebrow, .ambient #recommend-floor { color:#8bc5b4; }
.ambient .mode, .ambient .progress-key, .ambient .track-legend small,
.ambient .wash-plan span:not(.wash-icon), .ambient .weather-status,
.ambient #recommend-label { color:#a1b2bc; }
.ambient .wash-plan { border-color:#344754; }
.ambient .recommendation { background:#1c3538; border-left-color:#75a998; }
.ambient .recommendation.caution { background:#393027; border-left-color:#cda456; }
.ambient .recommendation.waiting { background:#263039; border-left-color:#89959b; }
.ambient #drying-clock text { fill:#afbdc7; }
.ambient #drying-clock #dial-time { fill:#dbe3df; }
.ambient #drying-clock text[fill="#ab704e"] { fill:#d8a57f; }
.ambient #drying-clock text[fill="#397460"] { fill:#83c2ac; }
.ambient #drying-clock [stroke="#eae8e1"] { stroke:#20303c; }
.ambient #drying-clock [stroke="#f1e7be"] { stroke:#3c3c32; }
.ambient #drying-clock [stroke="#c2b9a8"], .ambient #drying-clock [stroke="#d1cec0"] { stroke:#56636a; }
.ambient #drying-clock [fill="#fffaf2"] { fill:#172732; }
.ambient #drying-clock [fill="#3a493c"] { fill:#d8c38a; }
.ambient .finance-bottom, .ambient .residents, .ambient .recent { border-color:#34434b; }
.ambient #expense-chart line { stroke:#2b3b44; }
.ambient .electric-key { animation:none; }
.cloud, .ambient-orbit { display:none; }
.night-light { position:absolute; top:0; right:0; bottom:0; left:0; opacity:0; background:linear-gradient(115deg,rgba(35,155,198,.13),transparent 40%,transparent 65%,rgba(35,155,198,.17)); box-shadow:inset 0 0 65px rgba(35,155,198,.12); animation:night-blue 96s linear infinite; }
.night-violet { background:linear-gradient(115deg,rgba(132,73,175,.15),transparent 40%,transparent 65%,rgba(170,69,142,.17)); box-shadow:inset 0 0 65px rgba(151,63,175,.12); animation-name:night-violet; }
.night-amber { background:linear-gradient(115deg,rgba(190,124,32,.13),transparent 40%,transparent 65%,rgba(200,145,44,.15)); box-shadow:inset 0 0 65px rgba(190,124,32,.12); animation-name:night-amber; }
.ambient .masthead::after { content:''; position:absolute; bottom:-7px; left:0; right:0; height:2px; background:#cca54b; animation:neon-trim 96s linear infinite; }
.mine-stage { position:absolute; left:39%; top:-13px; width:225px; height:94px; pointer-events:none; }
.mine-stage svg { width:100%; height:100%; overflow:visible; }
.excavator-arm { transform-origin:111px 58px; animation:dig 12s ease-in-out infinite; }
.mine-dust { animation:dust 12s ease-in-out infinite; }
.mine-beacon { animation:ember-pulse 5s ease-in-out infinite; }
@keyframes dig { 0%,100% { transform:rotate(-3deg); } 45%,60% { transform:rotate(9deg); } }
@keyframes dust { 0%,35%,100% { opacity:0; transform:translateY(0); } 60% { opacity:.5; } 85% { opacity:0; transform:translateY(-7px); } }
@keyframes night-blue { 0%,100% { opacity:1; } 33%,66% { opacity:0; } }
@keyframes night-violet { 0%,66%,100% { opacity:0; } 33% { opacity:1; } }
@keyframes night-amber { 0%,33%,100% { opacity:0; } 66% { opacity:1; } }
@keyframes neon-trim { 0%,100% { background:#4d94ad; } 33% { background:#9b6bab; } 66% { background:#bd9749; } }
@media(max-width:1300px) { .mine-stage { left:37%; width:195px; } }
@media(min-width:1600px) and (min-height:900px) { .mine-stage { width:290px; height:120px; } }
@media(prefers-reduced-motion:reduce) { .ambient *, .ambient *::before, .ambient *::after { animation:none !important; } .night-light { opacity:.6; } .night-violet,.night-amber { opacity:0; } }