/* ZEBS appearance: four named themes (Midnight, Savanna, Pearl, Zinara Gold) x light / dark mode.
   Applies to the sign-in page, its info modal, the sign-out screens and the security popup.
   Theme: html[data-zt="midnight|savanna|pearl|gold"] (Pearl is the default; Midnight is the base look).
   Mode:  html.dark (shared with the app's own dark switch, localStorage "theme"). */

/* ---------- Savanna: warm cream and gold ---------- */
html[data-zt="savanna"] .login-card>.lg-top,
html[data-zt="savanna"] .card .top,
html[data-zt="savanna"] #lg-hero,
html[data-zt="savanna"] #sx-head{background:radial-gradient(130% 160% at 0% 0%,#e4dcc0 0%,#f2eddc 42%,#fff 100%);color:#16181d;border-bottom:1px solid #d9cfa8}
html[data-zt="savanna"] .lg-org,html[data-zt="savanna"] .card .top .org,html[data-zt="savanna"] #lg-hero .ver{color:#8a6a28}
html[data-zt="savanna"] .lg-top .lg-logo,html[data-zt="savanna"] #lg-hero img.logo,html[data-zt="savanna"] .card .top img{box-shadow:0 0 0 1px rgba(207,177,78,.45),0 6px 16px rgba(138,106,40,.15)}
html[data-zt="savanna"] .lg-version-pill{color:#5a4a1c;background:rgba(207,177,78,.2);border-color:rgba(138,106,40,.4)}
html[data-zt="savanna"] .lg-version-pill i{color:#8a6a28}
html[data-zt="savanna"] #lg-hero h2,html[data-zt="savanna"] #sx-head h2{color:#16181d !important}
html[data-zt="savanna"] #lg-hero h2 em{color:#8a6a28}
html[data-zt="savanna"] #lg-hero p,html[data-zt="savanna"] #sx-head p{color:#5d6472 !important}
html[data-zt="savanna"] #sx-head .material-symbols-outlined{color:#8a6a28}
html[data-zt="savanna"] #lg-close{color:#3a2d00;background:rgba(255,255,255,.7);border-color:rgba(138,106,40,.35)}
html[data-zt="savanna"] #lg-road path:first-child{fill:#8a6a28;fill-opacity:.12}
html[data-zt="savanna"] #lg-road path:nth-child(2){stroke:#8a6a28;stroke-opacity:.35}

/* ---------- Pearl: clean white ---------- */
html[data-zt="pearl"] .login-card>.lg-top,
html[data-zt="pearl"] .card .top,
html[data-zt="pearl"] #lg-hero,
html[data-zt="pearl"] #sx-head{background:#fff;color:#16181d;border-bottom:1px solid #e4e7ee}
html[data-zt="pearl"] .lg-top .lg-logo,html[data-zt="pearl"] #lg-hero img.logo,html[data-zt="pearl"] .card .top img{background:transparent;box-shadow:none}
html[data-zt="pearl"] .lg-org,html[data-zt="pearl"] .card .top .org,html[data-zt="pearl"] #lg-hero .ver{color:#8a6a28}
html[data-zt="pearl"] .lg-version-pill{color:#3a4256;background:#f4f5f8;border-color:#dfe3ec}
html[data-zt="pearl"] .lg-version-pill i{color:#8a6a28}
html[data-zt="pearl"] #lg-hero h2,html[data-zt="pearl"] #sx-head h2{color:#16181d !important}
html[data-zt="pearl"] #lg-hero h2 em{color:#8a6a28}
html[data-zt="pearl"] #lg-hero p,html[data-zt="pearl"] #sx-head p{color:#5d6472 !important}
html[data-zt="pearl"] #sx-head .material-symbols-outlined{color:#8a6a28}
html[data-zt="pearl"] #lg-close{color:#3a4256;background:#f4f5f8;border-color:#dfe3ec}
html[data-zt="pearl"] #lg-road path:first-child{fill:#8a6a28;fill-opacity:.08}
html[data-zt="pearl"] #lg-road path:nth-child(2){stroke:#8a6a28;stroke-opacity:.3}
html[data-zt="pearl"]{background:#f6f7f9 !important}

/* ---------- Zinara Gold: gold-led brand look ---------- */
html[data-zt="gold"]{background:radial-gradient(1100px 600px at 0% -10%,rgba(207,177,78,.38),transparent 60%),radial-gradient(900px 520px at 100% 110%,rgba(184,150,46,.22),transparent 60%),#faf6e8 !important}
html[data-zt="gold"] .login-card>.lg-top,
html[data-zt="gold"] .card .top,
html[data-zt="gold"] #lg-hero,
html[data-zt="gold"] #sx-head{background:linear-gradient(135deg,#a8851f 0%,#cfb14e 38%,#ecd88a 62%,#c9a63c 100%);color:#2b2100;border-bottom:3px solid #8a6a28}
html[data-zt="gold"] .lg-top .lg-logo,html[data-zt="gold"] #lg-hero img.logo,html[data-zt="gold"] .card .top img{background:#fff;box-shadow:0 6px 18px rgba(90,66,8,.25)}
html[data-zt="gold"] .lg-org,html[data-zt="gold"] .card .top .org,html[data-zt="gold"] #lg-hero .ver{color:#3a2b00}
html[data-zt="gold"] .lg-version-pill{color:#2b2100;background:rgba(255,255,255,.55);border-color:rgba(58,43,0,.35)}
html[data-zt="gold"] .lg-version-pill i{color:#8a6a28}
html[data-zt="gold"] #lg-hero h2,html[data-zt="gold"] #sx-head h2{color:#2b2100 !important}
html[data-zt="gold"] #lg-hero h2 em{color:#fff}
html[data-zt="gold"] #lg-hero p,html[data-zt="gold"] #sx-head p{color:#4a3a08 !important}
html[data-zt="gold"] #sx-head .material-symbols-outlined{color:#3a2b00}
html[data-zt="gold"] #lg-close{color:#2b2100;background:rgba(255,255,255,.55);border-color:rgba(58,43,0,.3)}
html[data-zt="gold"] #lg-road path:first-child{fill:#3a2b00;fill-opacity:.14}
html[data-zt="gold"] #lg-road path:nth-child(2){stroke:#3a2b00;stroke-opacity:.35}
html[data-zt="gold"] #lg-road .d{stroke:#fff}
html[data-zt="gold"] .lg-badge span::before{background:linear-gradient(135deg,#1a2b4d,#0f1b33)}
html[data-zt="gold"] .lg-badge i{color:#ecd88a}
html[data-zt="gold"] .login-card .btn-login,html[data-zt="gold"] .card .btn.primary,html[data-zt="gold"] .sx-go{background:linear-gradient(135deg,#b8962e,#d9bc57) !important;color:#2b2100 !important}
html[data-zt="gold"] .lg-pills span{background:rgba(207,177,78,.22);border-color:rgba(138,106,40,.5);color:#3a2b00}
html[data-zt="gold"] .lg-new .lg-mod{background:linear-gradient(180deg,#fffaea,#fff);border-color:rgba(207,177,78,.55)}
html[data-zt="gold"] .lg-steps li::before{background:#a8851f;color:#fff}

/* ---------- Dark mode (any theme) ---------- */
html.dark{--bg:#0b0f1a;--fg:#f2f3f7;--muted:#a9afbd;--card:#141a29;--line:#232b3f;color-scheme:dark}
html:not(.dark){--bg:#eef0f5;--fg:#16181d;--muted:#5d6472;--card:#fff;--line:#e3e6ee}
html.dark{background:radial-gradient(1200px 600px at 10% -10%,rgba(207,177,78,.10),transparent 60%),radial-gradient(900px 500px at 110% 110%,rgba(70,100,170,.22),transparent 60%),#0b0f1a !important}
html.dark[data-zt="pearl"]{background:#0f1115 !important}
html.dark[data-zt="gold"]{background:radial-gradient(1100px 600px at 0% -10%,rgba(207,177,78,.22),transparent 60%),#14110a !important}
html.dark .login-card{background:#141a29 !important;border-color:#232b3f !important}
html.dark .login-title,html.dark .lg-h1,html.dark .login-form label,html.dark .login-card .btn-outline{color:#f2f3f7 !important}
html.dark .lg-sub,html.dark .forgot-link,html.dark .lg-foot .legal-links,html.dark .legal-links a,html.dark #pk-login p,html.dark .social-divider{color:#a9afbd !important}
html.dark .login-card .login-form .lg-field input[type]{background:#0f1524 !important;border-color:#2a3350 !important;color:#f2f3f7 !important}
html.dark .login-card .login-form .lg-field label{color:#8d96a8 !important}
html.dark .login-card .login-form .lg-field input:focus+label,html.dark .login-card .login-form .lg-field input:not(:placeholder-shown)+label{color:#e6c869 !important}
html.dark .login-card .btn-outline{background:#0f1524 !important;border-color:#2a3350 !important}
html.dark .lg-pills span{background:rgba(207,177,78,.14);color:#f0e3b0;border-color:rgba(207,177,78,.4)}
html.dark .lg-brandstrip{border-top-color:#232b3f !important}
html.dark .lg-brandstrip img{background:#fff;border-radius:8px;padding:3px 6px;height:34px !important}
html.dark .login-card>.lg-foot{border-top-color:#232b3f !important}
html.dark .login-road path:first-child{fill:#fff;fill-opacity:.05}
html.dark .login-road path:nth-child(2){stroke:#fff;stroke-opacity:.1}
html.dark .login-card>.lg-badge span{border-color:#141a29}
/* header bands in dark mode */
html.dark .login-card>.lg-top,html.dark .card .top,html.dark #lg-hero,html.dark #sx-head{background:linear-gradient(135deg,#0d1730,#070c19);color:#fff;border-bottom-color:#cfb14e}
html.dark[data-zt="savanna"] .login-card>.lg-top,html.dark[data-zt="savanna"] .card .top,html.dark[data-zt="savanna"] #lg-hero,html.dark[data-zt="savanna"] #sx-head{background:linear-gradient(135deg,#2f2815,#1a160c);border-bottom-color:#8a6a28}
html.dark[data-zt="pearl"] .login-card>.lg-top,html.dark[data-zt="pearl"] .card .top,html.dark[data-zt="pearl"] #lg-hero,html.dark[data-zt="pearl"] #sx-head{background:#1b2030;border-bottom-color:#2a3350}
html.dark[data-zt="gold"] .login-card>.lg-top,html.dark[data-zt="gold"] .card .top,html.dark[data-zt="gold"] #lg-hero,html.dark[data-zt="gold"] #sx-head{background:linear-gradient(135deg,#6b5416,#8a6d1c 45%,#a8851f);color:#fff;border-bottom-color:#e6c869}
html.dark #lg-hero h2,html.dark #sx-head h2{color:#fff !important}html.dark[data-zt="gold"] .lg-org,html.dark[data-zt="gold"] .card .top .org,html.dark[data-zt="gold"] #lg-hero .ver{color:#fde9a0}html.dark #lg-hero h2 em{color:#cfb14e}
html.dark #lg-hero p,html.dark #sx-head p{color:rgba(255,255,255,.85) !important}
html.dark .lg-org,html.dark .card .top .org,html.dark #lg-hero .ver{color:#cfb14e}
html.dark .lg-version-pill{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
html.dark .lg-top .lg-logo,html.dark #lg-hero img.logo,html.dark .card .top img{background:#fff}
/* info modal */
html.dark #lg-box{background:#141a29;color:#f2f3f7}
html.dark #lg-body h3{color:#e6c869}html.dark #lg-body .sub,html.dark .lg-mod span,html.dark .lg-steps span,html.dark #lg-foot{color:#a9afbd}
html.dark .lg-mod,html.dark .lg-steps li,html.dark .lg-new .lg-mod{background:#0f1524;border-color:#232b3f}
html.dark .lg-mod b,html.dark .lg-steps b{color:#f2f3f7}
html.dark .lg-steps li::before{background:#cfb14e;color:#1a2b4d}
html.dark #lg-tip{background:#1b2236;color:#f2f3f7}html.dark #lg-tip::before{background:#1b2236}
/* security popup */
html.dark #sx-box{background:#141a29;color:#f2f3f7}html.dark .sx-card{border-color:#2a3350}

/* ---------- Appearance picker ---------- */
.zt-fab{position:fixed;top:12px;right:12px;z-index:2147482000;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid rgba(26,43,77,.16);background:rgba(255,255,255,.9);color:#1a2b4d;font:inherit;font-size:.74rem;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(26,43,77,.12);backdrop-filter:blur(6px)}
html.dark .zt-fab{background:rgba(20,26,41,.9);color:#f2f3f7;border-color:#2a3350}
#zt-pop{position:fixed;inset:0;z-index:2147483200;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(8,14,30,.5);backdrop-filter:blur(3px)}
#zt-pop.open{display:flex}
#zt-box{width:min(100%,520px);max-height:92vh;overflow:auto;border-radius:22px;background:#fff;color:#16181d;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
html.dark #zt-box{background:#141a29;color:#f2f3f7}
#zt-box h2{margin:0 0 2px;font-size:1.05rem;font-weight:800}#zt-box p.s{margin:0 0 12px;font-size:.8rem;color:#5d6472}html.dark #zt-box p.s{color:#a9afbd}
.zt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zt-opt{position:relative;text-align:left;border:2px solid #e3e6ee;border-radius:16px;padding:8px;background:transparent;color:inherit;font:inherit;cursor:pointer}
html.dark .zt-opt{border-color:#2a3350}
.zt-opt[aria-pressed="true"]{border-color:#cfb14e;box-shadow:0 0 0 3px rgba(207,177,78,.25)}
.zt-sw{height:46px;border-radius:10px;margin-bottom:6px;border:1px solid rgba(0,0,0,.08)}
.zt-opt b{display:block;font-size:.84rem}.zt-opt span{display:block;font-size:.7rem;color:#5d6472}html.dark .zt-opt span{color:#a9afbd}
.zt-modes{display:flex;gap:6px;margin-top:14px;padding:4px;border-radius:999px;background:rgba(127,127,127,.12)}
.zt-modes button{flex:1;border:0;border-radius:999px;padding:7px 8px;background:transparent;color:inherit;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.zt-modes button[aria-pressed="true"]{background:#cfb14e;color:#3a2d00}
.zt-done{display:block;width:100%;margin-top:14px;border:0;border-radius:12px;padding:10px;background:#1a2b4d;color:#fff;font:inherit;font-weight:700;cursor:pointer}

.zb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.zb-opt{border:2px solid #e3e6ee;border-radius:12px;padding:5px;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:center}
html.dark .zb-opt{border-color:#2a3350}
.zb-opt[aria-pressed="true"]{border-color:#cfb14e;box-shadow:0 0 0 3px rgba(207,177,78,.25)}
.zb-opt .zb-prev{height:44px;border-radius:8px;margin-bottom:4px}
.zb-opt span{font-size:.68rem;font-weight:700}
.zt-zoom{flex-wrap:wrap}.zt-zoom button{padding:6px 4px;font-size:.74rem;min-width:44px}
@media (max-width:480px){.zb-grid{grid-template-columns:repeat(3,1fr)}}