/* Zainah Workspace / approved 2026 sapphire system; intentionally loaded LAST. */
:root {
  --brand-sapphire:#6D6AEF;--brand-cornflower:#978BDF;--brand-baby:#B5A9E6;
  --brand-ice:#D3CCE0;--brand-cyan:#EEEAFE;
  --bg:#F7F8FA; --card:#FFFFFF; --border:#E5E8EF; --text:#1E2230; --muted:#6B7280;
  --indigo:#1E2230;--indigo-2:#625ED7;--indigo-3:#F5F6FA;--brand-indigo:#1E2230;
  --violet:#6D6AEF;--lavender:#978BDF;--lilac:#B5A9E6;
  --lilac-soft:#EEEAFE;--lavender-soft:#EEEAFE;--peach:#D3CCE0;--peach-deep:#625ED7;
  --surface-raised:#F5F6FA;--surface-hover:#F5F3FF;--surface-selected:#EEEAFE;--surface-sel:#EEEAFE;
  --head-bg:#F5F6FA;--grid-line:#E5E8EF;--row-hover:#F5F3FF;
  --grid-selection-ink:#6D6AEF;--grid-selection-tint:rgba(109,106,239,.08);
  --grad-iri:linear-gradient(120deg,#625ED7,#6D6AEF);
  --grad-action:linear-gradient(120deg,#625ED7,#6D6AEF);
  --grad:linear-gradient(120deg,#625ED7,#6D6AEF);
  --grad-iri-rev:linear-gradient(115deg,#6D6AEF,#978BDF 65%,#D3CCE0);
  --glow-lav:0 7px 22px rgba(109,106,239,.17);
  --sh-1:0 2px 9px rgba(30,34,48,.05);
  --sh-2:0 12px 35px rgba(30,34,48,.11);
  --green:#16866C;--green-soft:#E3F6EF;
  --red:#C4455D;--red-soft:#FCE9ED;
  --amber:#B77A22;--amber-soft:#FFF3DF;
}
html.dark {
  --bg:#161722;--card:#232437;--border:#3A3B53;--text:#F5F4FA;--muted:#BCB8D4;
  --indigo:#1C1D2A;--indigo-2:#2A2B40;--indigo-3:#161722;--brand-indigo:#D3CCE0;
  --violet:#978BDF;--lavender:#B5A9E6;--lilac:#B5A9E6;
  --lilac-soft:#312F4B;--lavender-soft:#312F4B;--peach:#D3CCE0;--peach-deep:#B5A9E6;
  --surface-raised:#2A2B40;--surface-hover:#223553;--surface-selected:#312F4B;--surface-sel:#312F4B;
  --head-bg:#2A2B40;--grid-line:#3A3B53;--row-hover:#2A2B40;
  --grid-selection-ink:#B5A9E6;--grid-selection-tint:rgba(181,169,230,.1);
  --grad-iri:linear-gradient(120deg,#978BDF,#B5A9E6);
  --grad-action:linear-gradient(120deg,#978BDF,#B5A9E6);
  --grad:linear-gradient(120deg,#978BDF,#B5A9E6);
  --glow-lav:0 7px 22px rgba(109,106,239,.15);
  --sh-1:0 2px 10px rgba(0,0,0,.22);
  --sh-2:0 15px 40px rgba(0,0,0,.3);
  --green:#66DABB;--green-soft:#163E3B;
  --red:#FF8097;--red-soft:#442738;
  --amber:#F5C071;--amber-soft:#403523;
}
/* Remove old purple/peach background glows from BOTH themes. */
body {background:var(--bg);color:var(--text)}
body::before {background:radial-gradient(700px 380px at 99% -5%,rgba(181,169,230,.09),transparent 70%),linear-gradient(180deg,#F7F8FA,#F7F9FF)!important}
html.dark body::before {background:radial-gradient(680px 450px at 100% -15%,rgba(109,106,239,.12),transparent 72%),linear-gradient(180deg,#161722,#161722)!important}
html:not(.dark) aside {background:#F5F6FA!important;color:#1E2230;border-right:1px solid #E5E8EF}
html.dark aside {background:#1C1D2A!important;color:#F5F4FA;border-right:1px solid #3A3B53}
html:not(.dark) aside button.nav {color:#6B7280}
html:not(.dark) aside button.nav:hover {color:#1E2230;background:#E7ECF9}
html:not(.dark) aside button.nav.active {background:#EEEAFE;color:#625ED7;box-shadow:none}
html:not(.dark) aside button.nav.active::before {background:#6D6AEF}
html.dark aside button.nav {color:#BCB8D4}
html.dark aside button.nav:hover {color:#F5F4FA;background:#2A2B40}
html.dark aside button.nav.active {background:#312F4B;color:#D3CCE0;box-shadow:none}
html.dark aside button.nav.active::before {background:#978BDF}
html:not(.dark) aside .nav-label {color:#6B7280;opacity:.85}
html.dark aside .nav-label {color:#BCB8D4;opacity:.75}
html:not(.dark) .topbar{background:rgba(255,255,255,.97)!important;border-bottom:1px solid #E5E8EF}
html.dark .topbar{background:rgba(28,29,42,.98)!important;border-bottom:1px solid #3A3B53}
html:not(.dark) .card,html:not(.dark) .dash-widget .card {background:#FFFFFF;border:1px solid #E5E8EF;box-shadow:0 4px 16px rgba(30,34,48,.04)}
html.dark .card,html.dark .dash-widget .card {background:#232437;border:1px solid #3A3B53;box-shadow:0 4px 16px rgba(0,0,0,.12)}
html:not(.dark) .modal,html:not(.dark) .modal.side{background:#FFFFFF!important;border-color:#E5E8EF}
html.dark .modal,html.dark .modal.side{background:#232437!important;border-color:#3A3B53}
html:not(.dark) .fld,html:not(.dark) .inp,html:not(.dark) select {background-color:#FFFFFF;color:#1E2230;border-color:#E5E8EF}
html.dark .fld,html.dark .inp,html.dark select {background-color:#2A2B40;color:#F5F4FA;border-color:#3A3B53}
.btn:not(.soft):not(.danger){background:var(--grad-action);box-shadow:var(--glow-lav)}
html:not(.dark) .btn:not(.soft):not(.danger){color:#FFFFFF}
html.dark .btn:not(.soft):not(.danger){color:#161722}
html:not(.dark) .btn.soft {background:#FFFFFF;color:#625ED7;border:1px solid #E5E8EF;box-shadow:none}
html:not(.dark) .btn.soft:hover {background:#EEEAFE;border-color:#D3CCE0}
html.dark .btn.soft {background:#2A2B40;color:#D3CCE0;border:1px solid #3A3B53;box-shadow:none}
html.dark .btn.soft:hover {background:#312F4B}
:where(button,input,select,textarea,a):focus-visible{outline:2px solid #6D6AEF;outline-offset:2px}
html.dark :where(button,input,select,textarea,a):focus-visible{outline-color:#B5A9E6}
/* Approved artwork, shared by sidebar, splash and login. */
.logo .logo-mark,.zw-icon,.auth-logo {background:none!important;box-shadow:none!important;overflow:visible}
.logo-mark img,.zw-icon img,.auth-logo img{display:block;width:100%;height:100%;object-fit:contain}
.logo .logo-mark{width:43px;height:43px;border-radius:13px;flex:0 0 43px}
.logo{gap:9px;min-width:0}
.zw-brand-text{min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.logo .zw-brand-text .zw-brand-name{font:400 20px/1 'Marcellus',Georgia,serif!important;letter-spacing:.006em!important;white-space:nowrap;color:inherit}
.logo .zw-brand-text .zw-brand-category{font:700 8px/1.2 'Plus Jakarta Sans',sans-serif!important;letter-spacing:.29em!important;color:var(--muted)}
html:not(.dark) .zw-brand-text .zw-brand-name{color:#1E2230}
html.dark .zw-brand-text .zw-brand-name{color:#F5F4FA}
.zw-splash-lockup{display:flex;align-items:center;flex-direction:column;gap:7px}
.zw-splash-lockup .zw-icon{width:104px;height:104px;margin-bottom:9px}
.zw-splash-lockup strong{font:400 30px/1.15 'Marcellus',Georgia,serif;color:#F5F4FA}
.zw-splash-lockup small{font:700 11px 'Plus Jakarta Sans',sans-serif;letter-spacing:.32em;color:#D3CCE0}
#splash {background:radial-gradient(700px 450px at 50% 0%,#2A2B40,#161722 68%)!important}
#authRoot{background:radial-gradient(760px 450px at 85% 0%,#2A2B40,#161722 72%)!important;color:#F5F4FA}
#authRoot::before{background:radial-gradient(circle,rgba(109,106,239,.12),transparent 70%)!important}
#authRoot .auth-card{background:#232437!important;border:1px solid #3A3B53!important;box-shadow:0 20px 65px rgba(0,0,0,.35)!important}
#authRoot .auth-card::before{color:#B5A9E6;opacity:.12}
#authRoot .auth-logo{width:82px;height:82px;margin:0 auto 10px;border:0!important;border-radius:20px}
#authRoot .auth-card h2{font-family:'Marcellus',Georgia,serif!important;font-size:30px!important;line-height:1.15!important;font-weight:400!important}
#authRoot .zw-auth-subtitle{margin-top:6px;margin-bottom:15px;color:#D3CCE0;font:700 10px/1.4 'Plus Jakarta Sans',sans-serif;letter-spacing:.32em}
#authRoot .auth-tabs {background:#2A2B40!important;border:1px solid #3A3B53}
#authRoot .auth-tabs button{color:#BCB8D4}
#authRoot .auth-tabs button.active{background:#312F4B!important;color:#F5F4FA}
#authRoot .fld{background:#2A2B40!important;color:#F5F4FA!important;border-color:#3A3B53!important}
#authRoot .fld:focus{border-color:#978BDF!important;box-shadow:0 0 0 3px rgba(151,139,223,.17)!important}
#authRoot .btn.full{background:linear-gradient(110deg,#978BDF,#B5A9E6)!important;color:#161722!important;box-shadow:none!important}
#authRoot .auth-links button{color:#D3CCE0!important}
#authRoot .auth-err{color:#FF8097}
/* Browser tab/controls maintain contrast in both modes. */
html:not(.dark) .bottombar{background:rgba(255,255,255,.97)!important;border-top:1px solid #E5E8EF}
html.dark .bottombar{background:rgba(28,29,42,.98)!important;border-top:1px solid #3A3B53}
html:not(.dark) .more-sheet{background:#FFFFFF;color:#1E2230}
html.dark .more-sheet{background:#232437;color:#F5F4FA}
@media(max-width:640px){.logo .logo-mark{width:35px;height:35px;flex-basis:35px}.logo .zw-brand-text .zw-brand-name{font-size:16px!important}.logo .zw-brand-text .zw-brand-category{font-size:7px!important}}
@media(prefers-reduced-motion:reduce){.logo-mark{animation:none!important}}

/* PASTEL SKIES — approved live-preview theme, applied after legacy styling */
:root{--brand-sapphire:#6D6AEF;--brand-cornflower:#8F83DC;--brand-baby:#B2A6DD;--brand-ice:#D3CCE0;--brand-cyan:#EEEAFE;--bg:#F7F8FA;--card:#FFFFFF;--border:#E5E8EF;--text:#1E2230;--muted:#6B7280;--indigo:#1E2230;--indigo-2:#6D6AEF;--indigo-3:#F5F6FA;--brand-indigo:#6D6AEF;--violet:#6D6AEF;--lavender:#978BDF;--lilac:#B5A9E6;--lilac-soft:#EEEAFE;--lavender-soft:#F3F0FF;--peach:#D3CCE0;--peach-deep:#978BDF;--surface-raised:#F5F6FA;--surface-hover:#F5F3FF;--surface-selected:#EEEAFE;--surface-sel:#EEEAFE;--head-bg:#F5F6FA;--grid-line:#E5E8EF;--row-hover:#F5F3FF;--grid-selection-ink:#6D6AEF;--grid-selection-tint:rgba(109,106,239,.10);--grad-iri:linear-gradient(120deg,#6D6AEF,#978BDF);--grad-action:linear-gradient(120deg,#6D6AEF,#978BDF);--grad:linear-gradient(120deg,#6D6AEF,#978BDF);--grad-iri-rev:linear-gradient(115deg,#B2A6DD,#978BDF,#6D6AEF);--glow-lav:0 7px 22px rgba(109,106,239,.13);--sh-1:0 2px 9px rgba(38,28,91,.035);--sh-2:0 12px 35px rgba(38,28,91,.09)}
html.dark{--bg:#161722;--card:#232437;--border:#3A3B53;--text:#F5F4FA;--muted:#BCB8D4;--indigo:#1C1D2A;--indigo-2:#2A2B40;--indigo-3:#161722;--brand-indigo:#B6ACE3;--violet:#AAA0FF;--lavender:#9A8CE3;--lilac:#B6ACE3;--lilac-soft:#312F4B;--lavender-soft:#312F4B;--peach:#B6ACE3;--peach-deep:#9A8CE3;--surface-raised:#2A2B40;--surface-hover:#2B2D45;--surface-selected:#312F4B;--surface-sel:#312F4B;--head-bg:#2A2B40;--grid-line:#3A3B53;--row-hover:#2B2D45;--grid-selection-ink:#AAA0FF;--grid-selection-tint:rgba(170,160,255,.13);--grad-iri:linear-gradient(120deg,#8D82FA,#AAA0FF);--grad-action:linear-gradient(120deg,#8D82FA,#AAA0FF);--grad:linear-gradient(120deg,#8D82FA,#AAA0FF);--grad-iri-rev:linear-gradient(115deg,#B6ACE3,#9A8CE3,#8D82FA);--glow-lav:0 7px 22px rgba(141,130,250,.13);--sh-1:0 2px 10px rgba(4,3,16,.18);--sh-2:0 15px 40px rgba(4,3,16,.26)}
body{background:var(--bg)!important;color:var(--text)}
body::before{background:radial-gradient(700px 380px at 99% -5%,rgba(178,166,221,.08),transparent 70%),linear-gradient(180deg,#F7F8FA,#F7F8FA)!important}
html.dark body::before{background:radial-gradient(680px 450px at 100% -15%,rgba(154,140,227,.09),transparent 72%),linear-gradient(180deg,#161722,#161722)!important}
html:not(.dark) aside{background:#FFFFFF!important;color:#1E2230;border-color:#E5E8EF}
html.dark aside{background:#1C1D2A!important;color:#F5F4FA;border-color:#3A3B53}
html:not(.dark) aside button.nav{color:#6B7280}html.dark aside button.nav{color:#BCB8D4}
html:not(.dark) aside button.nav.active{background:#EEEAFE;color:#6D6AEF}html.dark aside button.nav.active{background:#312F4B;color:#AAA0FF}
html:not(.dark) aside button.nav.active::before{background:#6D6AEF}html.dark aside button.nav.active::before{background:#AAA0FF}
html:not(.dark) .topbar,html:not(.dark) .top{background:#FFFFFF!important;border-color:#E5E8EF}
html.dark .topbar,html.dark .top{background:#1C1D2A!important;border-color:#3A3B53}
html:not(.dark) .card,html:not(.dark) .dash-widget .card{background:#FFFFFF;border-color:#E5E8EF;box-shadow:var(--sh-1)}
html.dark .card,html.dark .dash-widget .card{background:#232437;border-color:#3A3B53;box-shadow:var(--sh-1)}
html:not(.dark) .modal,html:not(.dark) .modal.side{background:#FFFFFF!important;border-color:#E5E8EF}
html.dark .modal,html.dark .modal.side{background:#232437!important;border-color:#3A3B53}
html:not(.dark) :is(.fld,.inp,select,textarea){background-color:#FFFFFF;color:#1E2230;border-color:#E5E8EF}
html.dark :is(.fld,.inp,select,textarea){background-color:#202132;color:#F5F4FA;border-color:#3A3B53}
html:not(.dark) .btn.soft{background:#FFFFFF;color:#6D6AEF;border-color:#E5E8EF}
html.dark .btn.soft{background:#2A2B40;color:#AAA0FF;border-color:#3A3B53}
html.dark .btn:not(.soft):not(.danger),html.dark .btn.pri{color:#171429}
:where(button,input,select,textarea,a):focus-visible{outline-color:#6D6AEF}html.dark :where(button,input,select,textarea,a):focus-visible{outline-color:#AAA0FF}
/* Time-aware hero: morning, afternoon and evening retain their own distinct three-color atmospheres. */
.hero-morning .hx-bg{background:radial-gradient(55% 75% at 82% 20%,rgba(255,219,206,.78),transparent 70%),radial-gradient(65% 80% at 15% 30%,rgba(211,204,240,.8),transparent 72%),linear-gradient(135deg,#9997d8,#c4b5ec,#f3c6cf)!important}
.hero-afternoon .hx-bg{background:radial-gradient(55% 70% at 82% 20%,rgba(178,166,221,.72),transparent 72%),radial-gradient(60% 80% at 18% 75%,rgba(227,217,247,.52),transparent 75%),linear-gradient(125deg,#6D6AEF,#978BDF,#D3CCE0)!important}
.hero-evening .hx-bg{background:radial-gradient(65% 60% at 82% 18%,rgba(141,130,250,.45),transparent 70%),radial-gradient(60% 65% at 20% 72%,rgba(107,99,169,.48),transparent 70%),linear-gradient(135deg,#161722,#353153,#594b87)!important}
/* Prayer widget, dashboard widgets and patterned ornamentation inherit the same identity. */
.prayer-card .pr2.next{background:linear-gradient(125deg,#6D6AEF,#978BDF)!important;color:#fff!important;box-shadow:0 9px 24px rgba(109,106,239,.2)!important}
html.dark .prayer-card .pr2.next{background:linear-gradient(125deg,#8177e9,#a99bf5)!important;color:#171429!important}
.prayer-card .pr2:not(.next){background:var(--surface-raised)!important;border-color:var(--border)!important;color:var(--text)!important}
.prayer-card .pr2:hover{border-color:var(--lavender)!important}
:is(.dash-widget,.wbox,.prayer-card,.note-card,.routine-card) :is(.pattern,.pattern-rail,.pattern-corner){color:var(--lavender);border-color:var(--border)}
html.dark :is(.dash-widget,.wbox,.prayer-card,.note-card,.routine-card){border-color:var(--border)}
html:not(.dark) :is(.dash-widget,.wbox,.prayer-card,.note-card,.routine-card){border-color:var(--border)}
/* Recolor decorative SVG patterns without affecting chart series or user-defined data colors. */
:root{--pattern-ink:#B2A6DD;--pattern-color:#B2A6DD;--interlock-color:#D3CCE0}
html.dark{--pattern-ink:#766DAD;--pattern-color:#766DAD;--interlock-color:#4B456C}