/* ORIGIN TEA V89 — dark look inside the app, to match the dark login.
   html[data-app="dark"] = everything dark · html[data-app="mix"] = dark top bar, hero and menu, light cards */

/* ---------- shared: dark header, hero, bottom menu ---------- */
html[data-app] #app .header{background:rgba(14,10,12,.92)!important;backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)!important;color:#F6ECF0}
html[data-app] #app .header b,html[data-app] #app .brand b{color:#fff}
html[data-app] #app .header span,html[data-app] #roleLabel{color:#B8A6AE!important}
html[data-app] #app .header select{background:rgba(255,255,255,.06)!important;color:#F6ECF0!important;border:1px solid rgba(255,255,255,.12)!important}
html[data-app] #app .brand img{box-shadow:0 0 18px rgba(234,47,107,.45);border-radius:10px}
html[data-app] #notificationBell,html[data-app] #originBackButtonV12{background:#1A1316!important;color:#F6ECF0!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:0 6px 20px rgba(0,0,0,.35)!important}
html[data-app] #notificationBell svg,html[data-app] #originBackButtonV12 svg{stroke:#F6ECF0}
html[data-app] #app nav.bottom{background:rgba(14,10,12,.94)!important;backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.07)!important}
html[data-app] #app nav.bottom button{color:#8E7C84!important}
html[data-app] #app nav.bottom button.active{color:#FF4F87!important}
html[data-app] #app nav.bottom button.active span{background:linear-gradient(135deg,#FF4F87,#C8004A)!important;box-shadow:0 0 18px rgba(234,47,107,.55)!important;color:#fff!important}
html[data-app] #v73Hero{position:relative;overflow:hidden;background:#171014!important;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 50px rgba(0,0,0,.35)!important}
html[data-app] #v73Hero::before{content:"";position:absolute;width:320px;height:320px;right:-120px;top:-170px;background:radial-gradient(closest-side,rgba(234,47,107,.65),rgba(234,47,107,0))}
html[data-app] #v73Hero::after{content:"";position:absolute;width:220px;height:220px;left:-90px;bottom:-140px;background:radial-gradient(closest-side,rgba(120,60,255,.35),rgba(120,60,255,0))}
html[data-app] #v73Hero>*{position:relative;z-index:1}
html[data-app] #v73Hero .v73date{color:#FF8FB1!important}

/* ---------- mix: light page, softer cards ---------- */
html[data-app="mix"] body:has(#login.hidden){background:#F4F0F2}

/* ---------- dark: everything ---------- */
html[data-app="dark"]{color-scheme:dark}
html[data-app="dark"] body:has(#login.hidden),html[data-app="dark"] #app,html[data-app="dark"] #app main{background:#0E0A0C!important;color:#F6ECF0}
html[data-app="dark"] #app,html[data-app="dark"] #modal{--accent:#FF4F87;--accent-2:#C8004A;--accent-soft:rgba(234,47,107,.14);--accent-ink:#FF8FB1;--ok-soft:rgba(61,220,132,.14);--ok:#3DDC84;--warn-soft:rgba(255,183,77,.14);--warn:#FFB74D;--bad-soft:rgba(255,82,82,.14);--bad:#FF6B6B;--bg:#0E0A0C}
html[data-app="dark"] #app h2,html[data-app="dark"] #app h3,html[data-app="dark"] #app h4,html[data-app="dark"] #modal h3,html[data-app="dark"] #modal h4,html[data-app="dark"] #app b,html[data-app="dark"] #modal b{color:#F6ECF0}
html[data-app="dark"] #app .sub,html[data-app="dark"] #app .muted,html[data-app="dark"] #app .tiny,html[data-app="dark"] #modal .sub,html[data-app="dark"] #modal .muted,html[data-app="dark"] #modal .tiny,html[data-app="dark"] #app label,html[data-app="dark"] #modal label{color:#B8A6AE!important}
html[data-app="dark"] #app .card,html[data-app="dark"] #app .section,html[data-app="dark"] #app .list-item,html[data-app="dark"] #modal .list-item,html[data-app="dark"] #modal .section,html[data-app="dark"] #app .v72card,html[data-app="dark"] #v72LeaveHome,html[data-app="dark"] #v72PayCard,html[data-app="dark"] #app .v73tile,html[data-app="dark"] #app .v73grid button,html[data-app="dark"] .v88drink,html[data-app="dark"] .v86step,html[data-app="dark"] .v86ing{background:#1A1316!important;border:1px solid rgba(255,255,255,.08)!important;color:#F6ECF0!important;box-shadow:none!important}
html[data-app="dark"] #app .stack .list-item .list-item{background:#231A1E!important}
html[data-app="dark"] #app .v73tile b,html[data-app="dark"] #app .v73tile small,html[data-app="dark"] #app .v73grid button{color:#F6ECF0!important}
html[data-app="dark"] #app .metric{color:#fff!important}
html[data-app="dark"] #app .info,html[data-app="dark"] #modal .info{background:rgba(234,47,107,.10)!important;border:1px solid rgba(234,47,107,.25)!important;border-left:4px solid #FF4F87!important;color:#F6DDE6!important}
html[data-app="dark"] #modal .sheet{background:#140E11!important;color:#F6ECF0;border:1px solid rgba(255,255,255,.08)}
html[data-app="dark"] #modal .sheet-head{border-bottom:1px solid rgba(255,255,255,.08)!important}
html[data-app="dark"] #modal .icon{background:#231A1E!important;color:#F6ECF0!important}
html[data-app="dark"] #app input,html[data-app="dark"] #app select,html[data-app="dark"] #app textarea,html[data-app="dark"] #modal input,html[data-app="dark"] #modal select,html[data-app="dark"] #modal textarea{background:#231A1E!important;color:#F6ECF0!important;border:1px solid rgba(255,255,255,.12)!important}
html[data-app="dark"] #app input::placeholder,html[data-app="dark"] #modal input::placeholder,html[data-app="dark"] #modal textarea::placeholder{color:#7C6A72}
html[data-app="dark"] #app .btn.secondary,html[data-app="dark"] #modal .btn.secondary,html[data-app="dark"] #app button.secondary,html[data-app="dark"] #modal button.secondary{background:#231A1E!important;border:1px solid rgba(255,255,255,.12)!important;color:#F6ECF0!important}
html[data-app="dark"] #app .btn.danger,html[data-app="dark"] #modal .btn.danger{background:rgba(255,82,82,.14)!important;color:#FF8A8A!important}
html[data-app="dark"] #app .btn.primary,html[data-app="dark"] #modal .btn.primary{background:linear-gradient(135deg,#FF4F87,#C8004A)!important;box-shadow:0 0 18px rgba(234,47,107,.35)!important;color:#fff!important}
html[data-app="dark"] #app .badge,html[data-app="dark"] #modal .badge{background:#2A2024;color:#E6D6DD}
html[data-app="dark"] #app table,html[data-app="dark"] #modal table{color:#F6ECF0}
html[data-app="dark"] #app th,html[data-app="dark"] #modal th{background:#231A1E!important;color:#B8A6AE!important;border-color:rgba(255,255,255,.08)!important}
html[data-app="dark"] #app td,html[data-app="dark"] #modal td{border-color:rgba(255,255,255,.08)!important}
html[data-app="dark"] .v57ScheduleScroll,html[data-app="dark"] .v57ScheduleScroll thead,html[data-app="dark"] .v57ScheduleScroll th:first-child,html[data-app="dark"] .v57ScheduleScroll td:first-child{background:#1A1316!important;border-color:rgba(255,255,255,.08)!important}
/* inline white backgrounds from older screens */
html[data-app="dark"] #app [style*="background:white"],html[data-app="dark"] #modal [style*="background:white"],html[data-app="dark"] #app [style*="background:#fff"],html[data-app="dark"] #modal [style*="background:#fff"],html[data-app="dark"] #app [style*="background: white"],html[data-app="dark"] #modal [style*="background: white"]{background:#1A1316!important;color:#F6ECF0}
html[data-app="dark"] #app .row,html[data-app="dark"] #modal .row{color:inherit}
html[data-app="dark"] .v87tbl tr.v87sum td,html[data-app="dark"] table.v85tbl tr.v85sum td,html[data-app="dark"] table.v86tbl tr td,html[data-app="dark"] .v86tot,html[data-app="dark"] .v87kpis span,html[data-app="dark"] .v86levels span{background:#231A1E!important;border-color:rgba(255,255,255,.08)!important;color:#F6ECF0}
html[data-app="dark"] .v87promo{background:rgba(255,183,77,.08)!important;border-color:rgba(255,183,77,.25)!important}
html[data-app="dark"] .v87pos,html[data-app="dark"] .badge.v85ok{color:#3DDC84!important}
html[data-app="dark"] .badge.v85ok{background:rgba(61,220,132,.14)!important}
html[data-app="dark"] .badge.v85wait{background:rgba(255,183,77,.14)!important;color:#FFB74D!important}
html[data-app="dark"] .negative,html[data-app="dark"] .v86big,html[data-app="dark"] .v86bigsm{color:#FF6B6B!important}
html[data-app="dark"] .v86bar span{background:rgba(234,47,107,.45)}html[data-app="dark"] .v86bar.on{background:#231A1E}
html[data-app="dark"] #v84PendingQueue{background:#1A1316!important;border-color:rgba(255,255,255,.08)!important}
html[data-app="dark"] #v79PushHome,html[data-app="dark"] .v79card{background:#1A1316!important;border:1px dashed rgba(234,47,107,.5)!important}
html[data-app="dark"] #v41Messages,html[data-app="dark"] .chat-thread{background:#0E0A0C!important}
html[data-app="dark"] img.v85big{background:#231A1E!important;border-color:rgba(255,255,255,.08)!important}
html[data-app="dark"] hr,html[data-app="dark"] .hr{border-color:rgba(255,255,255,.08)!important;background:rgba(255,255,255,.08)!important}
/* fixes from the full-screen scan */
html[data-app="dark"] #modal .sheet-head{background:#140E11!important}
html[data-app="dark"] #modal .sheet::before{background:#3A2A31!important}
html[data-app] #app .header .sync{color:#fff!important}
html[data-app="dark"] #app [style*="background:#f"],html[data-app="dark"] #modal [style*="background:#f"],html[data-app="dark"] #app [style*="background: #f"],html[data-app="dark"] #modal [style*="background: #f"],html[data-app="dark"] #app [style*="background:#e"],html[data-app="dark"] #modal [style*="background:#e"]{background:#231A1E!important;color:#F6ECF0}
html[data-app="dark"] #app [style*="color:#"],html[data-app="dark"] #modal [style*="color:#111"],html[data-app="dark"] #modal [style*="color:#222"],html[data-app="dark"] #modal [style*="color:#333"]{}
html[data-app="dark"] #app .sync.saved{background:#157A45!important}html[data-app="dark"] #app .sync.saving{background:#9A5B00!important}html[data-app="dark"] #app .sync.offline{background:#B3261E!important}
html:not([data-app="dark"]) #app .badge.good,html:not([data-app="dark"]) #modal .badge.good{color:#12803B!important}

html[data-app="dark"] .cloud-refresh{background:#231A1E!important;color:#F6ECF0!important;border-color:#43343A!important}