/* SHABAB SAFARI PRO 1.5.12 — Easy-mode dashboard (METRIC style + HR PRO glass + 3 view modes). Scoped under .m12. Navy + yellow. Light / Dark. Phone first. */
.m12{--m12-navy:#1f3a6e;--m12-navy2:#0f2550;--m12-gold:#f2c300;--m12-ink:#0b1f4a;--m12-muted:#5b6886;--m12-card:rgba(255,255,255,.86);--m12-well:#eef2f8;--m12-line:rgba(11,31,74,.10);
  --m12-shadow:0 18px 40px -22px rgba(11,31,74,.30),0 1px 2px rgba(11,31,74,.06);color:var(--m12-ink);max-width:1400px;min-width:0}
html[data-theme="dark"] .m12{--m12-ink:#eef2fb;--m12-muted:#a9b8d6;--m12-card:rgba(14,27,58,.72);--m12-well:rgba(4,12,32,.55);--m12-line:rgba(255,255,255,.10);--m12-shadow:0 24px 48px -24px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.25)}
.m12 *{box-sizing:border-box}.m12 .num{font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.m12-head h1{margin:6px 0 2px;font-size:32px;font-weight:800;letter-spacing:-.02em}
.m12-greet{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:15px}.m12-greet span{color:var(--m12-muted)}
.m12-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}
.m12-faint{color:var(--m12-muted);font-size:13px}
.m12-vs{position:relative;display:inline-flex;padding:5px;border-radius:18px;background:var(--m12-card);border:1px solid var(--m12-line);box-shadow:var(--m12-shadow)}
.m12-vs button{position:relative;z-index:1;border:0;background:none;width:52px;height:40px;border-radius:13px;color:var(--m12-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.m12-vs button.on{color:#fff}
.m12-pill{position:absolute;z-index:0;top:5px;height:40px;border-radius:13px;background:linear-gradient(135deg,var(--m12-navy),var(--m12-navy2));box-shadow:0 6px 16px -6px rgba(15,37,80,.7);transition:left .4s cubic-bezier(.3,1.35,.5,1),width .4s}
.m12-dots{display:inline-flex;gap:8px;padding:6px;border-radius:30px;background:var(--m12-card);border:1px solid var(--m12-line);margin:0 0 12px}
.m12-dots button{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--m12-line);cursor:pointer}.m12-dots button.on{box-shadow:0 0 0 3px var(--m12-gold)}
.m12-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 10px;max-width:100%}.m12-chips::-webkit-scrollbar{display:none}
.m12-chips button{flex:none;border:1px solid var(--m12-line);background:var(--m12-card);color:var(--m12-ink);border-radius:30px;padding:9px 18px;font:600 15px/1 inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:42px}
.m12-chips button.on{background:var(--m12-navy);color:#fff;border-color:var(--m12-navy)}
.m12-gd{display:inline-block;width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.m12-card{background:var(--m12-card);border:1px solid var(--m12-line);border-radius:20px;padding:14px;box-shadow:var(--m12-shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);min-width:0}
.m12-card h3{margin:0 0 10px;font-size:15px}
.m12-lh{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.08em;color:#16a34a;margin-bottom:10px}
.m12-l4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.m12-lt,.m12-kpi{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--m12-well);color:inherit;text-decoration:none;min-width:0}
.m12-lt b,.m12-kpi b{display:block;font-size:22px;font-weight:800}.m12-kl{display:block;font-size:13px;color:var(--m12-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m12-ki{flex:none;width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:rgba(31,58,110,.10);color:var(--m12-navy)}
html[data-theme="dark"] .m12-ki{background:rgba(242,195,0,.14);color:var(--m12-gold)}
.m12-hqs{display:grid;gap:16px;margin-top:16px}.m12-hqs.m12-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.m12-hq{display:flex;flex-direction:column;gap:12px;min-width:0}
.m12-hqh{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:var(--m12-card);border:1px solid var(--m12-line);font-size:16px}
.m12-hqh[data-goto]{cursor:pointer}.m12-hqh[data-goto]:hover{border-color:var(--m12-gold)}
.m12-live{width:10px;height:10px;border-radius:50%;background:#22c55e;animation:m12p 1.8s infinite}@keyframes m12p{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}100%{box-shadow:0 0 0 9px transparent}}
.m12-cur{font-weight:800;color:var(--m12-navy);background:rgba(242,195,0,.25);border-radius:8px;padding:2px 8px;font-size:12px}html[data-theme="dark"] .m12-cur{color:var(--m12-gold)}
.m12-tag{font-size:12px;color:var(--m12-muted)}.m12-tag.go{color:var(--m12-navy);font-weight:800}html[data-theme="dark"] .m12-tag.go{color:var(--m12-gold)}
.m12-hero{border-radius:24px;padding:20px 22px;color:#fff;background:radial-gradient(120% 140% at 100% 0%,#2a4f93 0%,var(--m12-navy) 45%,var(--m12-navy2) 100%);box-shadow:0 24px 50px -24px rgba(15,37,80,.8);overflow:hidden}
.m12-eye{color:var(--m12-gold);font-weight:800;letter-spacing:.12em;font-size:13px;text-transform:uppercase}
.m12-big{margin:8px 0 6px;line-height:1}.m12-big small{color:var(--m12-gold);font-size:20px;font-weight:800}.m12-big span{font-size:44px;font-weight:900;letter-spacing:-.02em}
.m12-area{width:100%;height:120px;display:block;margin:8px 0}
.m12-sub3{display:flex;flex-wrap:wrap;gap:8px 26px}.m12-sub3 span{display:block;font-size:13px;color:#c9d4ee}.m12-sub3 b{font-size:20px;font-weight:800}
.m12-swipe{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(185px,1fr);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;max-width:100%;scrollbar-width:thin}
.m12-swipe>*{scroll-snap-align:start;background:var(--m12-card);border:1px solid var(--m12-line);box-shadow:var(--m12-shadow)}
.m12-up{color:#16a34a}.m12-down{color:#e11d48}
.m12-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.m12-bar{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:8px;align-items:center;margin:6px 0;font-size:13px}
.m12-bn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m12-bt{height:10px;border-radius:6px;background:var(--m12-well);overflow:hidden}.m12-bt i{display:block;height:100%;border-radius:6px}
.m12-don{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.m12-don svg{flex:none}.m12-dt{font-size:10px;fill:var(--m12-muted)}.m12-dv{font-size:17px;font-weight:800;fill:var(--m12-ink)}
.m12-leg{list-style:none;margin:0;padding:0;flex:1;min-width:150px;font-size:13px}.m12-leg li{display:flex;gap:8px;align-items:center;margin:4px 0}.m12-leg i{width:10px;height:10px;border-radius:3px;flex:none}.m12-leg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m12-gauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.m12-gauge{background:var(--m12-card);border:1px solid var(--m12-line);border-radius:20px;padding:12px;text-align:center;box-shadow:var(--m12-shadow);display:flex;flex-direction:column;gap:2px;min-width:0}
.m12-gv{font-size:20px;font-weight:900;fill:var(--m12-ink)}
.m12[data-view="gauge"] .m12-hero .m12-big span{font-size:36px}
.m12-h2{font-size:18px;margin:20px 0 10px}
.m12-adds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.m12-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:92px;border-radius:20px;border:0;cursor:pointer;font:700 14px/1.2 inherit;color:#fff;background:linear-gradient(135deg,#2a4f93,var(--m12-navy));box-shadow:0 14px 28px -16px rgba(15,37,80,.9);padding:10px;text-align:center}
.m12-add .m12-ai{width:44px;height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:var(--m12-gold);color:var(--m12-navy2)}
.m12-qr{display:flex;flex-wrap:wrap;gap:8px}.m12-qb{border:1px solid var(--m12-line);background:var(--m12-card);color:var(--m12-ink);border-radius:14px;padding:11px 14px;font:700 13px/1 inherit;cursor:pointer;min-height:44px}
.m12-qb:hover{border-color:var(--m12-gold)}
.m12-alerts{padding:6px}.m12-al{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;color:inherit;text-decoration:none}.m12-al+.m12-al{border-top:1px solid var(--m12-line)}
.m12-al:hover{background:var(--m12-well)}.m12-alt{flex:1;min-width:0}.m12-alt b{display:block;font-size:14px}.m12-alt i{display:block;font-style:normal;font-size:12px;color:var(--m12-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m12-cnt{font-weight:900;font-size:16px;padding:4px 10px;border-radius:10px;background:var(--m12-well)}.m12-al.has .m12-cnt{background:var(--m12-gold);color:var(--m12-navy2)}.m12-view{font-size:12px;font-weight:800;color:var(--m12-muted)}
.m12-cus label{display:inline-flex;gap:6px;align-items:center}.m12-cus input{width:auto}
@media (max-width:1100px){.m12-hqs.m12-2{grid-template-columns:minmax(0,1fr)}.m12-adds{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.m12-l4{grid-template-columns:repeat(2,minmax(0,1fr))}.m12-two,.m12-gauges{grid-template-columns:minmax(0,1fr)}.m12-swipe{grid-auto-columns:78%}
  .m12-adds{grid-template-columns:repeat(2,minmax(0,1fr))}.m12-add:last-child:nth-child(odd){grid-column:1/-1}.m12-big span{font-size:36px}.m12-head h1{font-size:28px}.m12-hero{padding:18px}
  .m12-view{display:none}.m12-qb{flex:1 1 45%}}
@media (max-width:380px){.m12-big span{font-size:31px}.m12-lt b{font-size:19px}.m12-chips button{padding:8px 14px;font-size:14px}.m12-ki{width:36px;height:36px}}

.m12-kpi{flex-direction:column;align-items:flex-start;gap:6px}.m12-kpi b{font-size:19px;white-space:nowrap}.m12-kpi .m12-kl{max-width:100%}
.m12-greet b{font-size:17px}
.m12-lt>span:last-child{min-width:0;overflow:hidden}.m12-l4{min-width:0}

.m12-bio{text-decoration:none;background:linear-gradient(135deg,#0d3b3a,#0b5e57)}.m12-bio .m12-ai{background:none;padding:0}.m12-bio img{border-radius:50%;display:block}
.m12-adds{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media (max-width:760px){.m12-adds{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---- 1.5.12 the 4th view ORBIT: dark admin look (deep navy, glowing orange orb, cyan glow, glass panels) - always dark ---- */
.m12[data-view="orbit"]{--m12-ink:#e6edf8;--m12-muted:#93a4c3;--m12-card:rgba(13,22,44,.72);--m12-well:rgba(255,255,255,.05);--m12-line:rgba(255,255,255,.09);background:#050a17;color:#e6edf8;border-radius:24px;padding:16px;position:relative;overflow:hidden}
.m12[data-view="orbit"] .m12-greet span,.m12[data-view="orbit"] .m12-faint{color:#93a4c3}
.m12[data-view="orbit"] .m12-chips button{background:rgba(255,255,255,.05);color:#e6edf8;border-color:rgba(255,255,255,.1)}.m12[data-view="orbit"] .m12-chips button.on{background:#2563eb;border-color:#2563eb}
.m12[data-view="orbit"] .m12-pill{background:linear-gradient(135deg,#2563eb,#1d4ed8)}
.m12[data-view="orbit"] .m12-ki{background:rgba(56,189,248,.12);color:#38bdf8}
.o12-wrap{position:relative;display:flex;flex-direction:column;gap:14px;margin-top:14px;isolation:isolate}
.o12-orb{position:absolute;z-index:-1;top:-120px;inset-inline-end:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd08a,#f59e0b 35%,#b45309 70%,#7c2d12);box-shadow:0 0 120px 30px rgba(245,158,11,.35);opacity:.9;pointer-events:none}
.o12-glow{position:absolute;z-index:-1;bottom:-120px;inset-inline-end:-60px;width:380px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.45),transparent 70%);filter:blur(10px);pointer-events:none}
.o12-g{background:rgba(13,22,44,.62);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:14px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 20px 40px -24px rgba(0,0,0,.8);min-width:0}
.o12-hq{gap:14px}.o12-hq .m12-hqh{background:rgba(13,22,44,.62);border-color:rgba(255,255,255,.09);color:#e6edf8}
.o12-top{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:14px}
.o12-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0}.o12-k{padding:14px;border-inline-end:1px solid rgba(255,255,255,.08);min-width:0}.o12-k:last-child{border:0}
.o12-k i,.o12-goal>i,.o12-live>i{display:block;font-style:normal;font-size:12.5px;color:#93a4c3}.o12-k b{display:block;font-size:24px;font-weight:800;margin:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o12-sp{width:100%;height:28px;display:block}
.o12-pill{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:2px 9px;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.08);color:#cbd5e1;white-space:nowrap}
.o12-pill.up{background:rgba(34,197,94,.16);color:#4ade80}.o12-pill.dn{background:rgba(244,63,94,.16);color:#fb7185}.o12-pill.wait{background:rgba(245,158,11,.16);color:#fbbf24}
.o12-goal{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.o12-rv{font-size:20px;font-weight:900;fill:#fff}
.o12-gl{display:flex;justify-content:space-between;gap:8px;width:100%;font-size:13px}.o12-gl span{color:#93a4c3}
.o12-btn,.o12-chip{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#e6edf8;border-radius:12px;padding:7px 12px;font:700 12.5px/1 inherit;cursor:pointer;min-height:34px}
.o12-chip.on{background:#2563eb;border-color:#2563eb}
.o12-mid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:14px}
.o12-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.o12-chartbox .m12-area{height:200px}
.o12-big{display:block;font-size:44px;font-weight:900;margin:2px 0 8px}
.o12-bars{display:flex;align-items:flex-end;gap:3px;height:60px;margin-bottom:10px}.o12-bars i{flex:1;background:linear-gradient(180deg,#3b82f6,#1d4ed8);border-radius:3px 3px 0 0;min-width:2px}
.o12-q{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.o12-it{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);min-width:0}
.o12-av{flex:none;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:linear-gradient(135deg,#334155,#1e293b);color:#e2e8f0}
.o12-it-t{flex:1;min-width:0}.o12-it-t b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o12-it-t i{display:block;font-style:normal;font-size:11.5px;color:#93a4c3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o12-dot{flex:none;width:10px;height:10px;border-radius:3px}.o12-faint{color:#93a4c3;font-size:12.5px}.o12-lnk{color:#60a5fa;font-size:12.5px;font-weight:700;text-decoration:none}
.o12-split{display:flex;height:10px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.06);margin:8px 0}
.o12-lanes{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;max-width:100%}
.o12-lane{scroll-snap-align:start;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.12);border-radius:16px;padding:10px;min-height:160px;transition:background .2s,border-color .2s}
.o12-lane.hot{background:rgba(37,99,235,.16);border-color:#3b82f6}
.o12-lh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.o12-cnt{font-size:12px;font-weight:800;background:rgba(255,255,255,.08);border-radius:10px;padding:2px 8px}
.o12-card{background:rgba(15,26,52,.9);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px;margin-bottom:8px;display:flex;flex-direction:column;gap:3px;touch-action:none;user-select:none;cursor:grab;transition:transform .2s,opacity .2s}
.o12-card b{font-size:13.5px}.o12-card i{font-style:normal;font-size:11.5px;color:#93a4c3}.o12-cr{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px}
.o12-mv{border:0;background:#2563eb;color:#fff;border-radius:10px;width:34px;height:30px;font-size:18px;cursor:pointer}
.o12-src{opacity:.35}.o12-ghost{position:fixed;z-index:3000;margin:0;box-shadow:0 30px 60px -20px rgba(0,0,0,.9);transition:transform .25s cubic-bezier(.3,1.6,.5,1);background:rgba(15,26,52,.97);border:1px solid #3b82f6;border-radius:14px;padding:10px;color:#e6edf8}
.o12-empty{padding:18px 6px;text-align:center}
@media (max-width:1100px){.o12-top,.o12-mid{grid-template-columns:minmax(0,1fr)}.o12-q{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.m12[data-view="orbit"]{padding:10px;border-radius:18px}.o12-kpis{grid-template-columns:minmax(0,1fr)}.o12-k{border:0;border-bottom:1px solid rgba(255,255,255,.08)}.o12-orb{width:220px;height:220px;top:-90px}.o12-lanes{grid-auto-columns:82%}.o12-big{font-size:36px}}
/* 1.5.12 ALERTS (bell + popup + page) */
.bell.red::after{background:var(--bad)}.bell.on:not(.red)::after{background:#d18b00}
.al-g h3{margin:12px 0 6px;font-size:14px;letter-spacing:.04em}
.al-a{border:1px solid var(--line);border-radius:12px;margin:6px 0;background:var(--card)}
.al-a>summary{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;list-style:none;font-weight:600}
.al-a>summary::-webkit-details-marker{display:none}
.al-a[open]>summary{border-bottom:1px solid var(--line)}
.al-n{min-width:26px;height:22px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:var(--line);color:var(--text)}
.al-n.amber{background:#d18b00;color:#fff}.al-n.red{background:var(--bad);color:#fff}
.al-it{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:6px 10px;border-top:1px dashed var(--line);flex-wrap:wrap}
.al-it:first-of-type{border-top:0}.al-it.red .al-t b{color:var(--bad)}
.al-t{min-width:0;flex:1 1 200px;overflow-wrap:anywhere}.al-m{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.al-f{gap:6px;padding:6px 10px}
.al-pop{max-height:62vh;overflow:auto}
.xview .chip{border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:var(--card);cursor:pointer}.xview .chip.on{background:var(--pri,#1e3a8a);color:#fff;border-color:transparent}
.xv-nos{margin:6px 0;padding:6px 10px;border-radius:10px;background:color-mix(in srgb,var(--pri,#1e3a8a) 8%,transparent)}
.xv-fixbox{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}.xv-fixbox label{display:flex;flex-direction:column;gap:2px;margin:0}.xv-fixbox input{max-width:200px}
.xv-tot{margin-top:10px;max-width:560px}
.m12-cdocs{display:flex;flex-direction:column;gap:6px;padding:10px}.m12-cd{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;border:1px solid var(--line);text-decoration:none;color:inherit;flex-wrap:wrap}
.m12-cd b{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}.m12-cd.bad{border-color:var(--bad)}.m12-cd.warn{border-color:#d18b00}.m12-cd i{font-style:normal;opacity:.75}
.o12-card[data-drag]{user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:grab}
@media (max-width:760px){.o12-orb{width:150px;height:150px;top:-70px;inset-inline-end:-50px;opacity:.55;box-shadow:0 0 60px 14px rgba(245,158,11,.25)}.o12-glow{opacity:.5}}
.al-f .chip{border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:var(--card);cursor:pointer;font:inherit;font-size:12px;color:inherit}.al-f .chip.on{background:var(--pri,#1e3a8a);color:#fff;border-color:transparent}
.al-zero{margin-top:8px;font-size:12px}
/* ===== 1.5.12 polish (SB): animated gradient gauges, sparklines, donut draw, COMPACT desktop spacing ===== */
.m12-garc{animation:m12arc .8s cubic-bezier(.2,.8,.2,1) both;filter:drop-shadow(0 2px 4px rgba(245,158,11,.35))}
.m12-gauge.bad .m12-garc{filter:drop-shadow(0 2px 4px rgba(225,29,72,.35))}.m12-gauge.bad .m12-gv{fill:#e11d48}
@keyframes m12arc{from{stroke-dasharray:0 100}}
.m12-dseg{transform-origin:64px 64px;animation:m12seg .6s cubic-bezier(.2,.8,.2,1) both}@keyframes m12seg{from{transform:rotate(-40deg) scale(.7);opacity:0}}
.m12-don svg{filter:drop-shadow(0 6px 12px rgba(15,37,80,.18))}
.m12-sp{display:block;width:100%;height:26px;margin-top:4px}
.m12-hero{position:relative}.m12-hsp{position:absolute;inset-inline-end:18px;top:16px;width:34%;max-width:260px;opacity:.95}.m12-sp-hero{height:46px}
.m12-kpi .m12-sp{margin-top:2px}
@media (prefers-reduced-motion:reduce){.m12-garc,.m12-dseg{animation:none}}
@media (min-width:761px){
  .m12-head h1{margin:2px 0 0;font-size:28px}.m12-row{margin:6px 0}.m12-dots{margin:0 0 6px}.m12-chips{padding:0 0 6px}.m12-chips button{min-height:36px;padding:7px 15px;font-size:14px}
  .m12-hqs{gap:12px;margin-top:8px}.m12-hq{gap:8px}.m12-hqh{padding:7px 12px;border-radius:14px}
  .m12-hero{padding:14px 18px;border-radius:20px}.m12-big{margin:4px 0 4px}.m12-big span{font-size:38px}.m12[data-view="gauge"] .m12-hero .m12-big span{font-size:32px}.m12-sub3 b{font-size:18px}
  .m12-gauges{gap:8px}.m12-gauge{padding:8px 8px 10px;border-radius:16px}.m12-gauge b{font-size:13px;line-height:1.25}.m12-gauge .m12-faint{font-size:11.5px;line-height:1.3}
  .m12-swipe{gap:8px}.m12-lt,.m12-kpi{padding:9px 10px;border-radius:14px;gap:4px}.m12-kpi b{font-size:17px}.m12-ki{width:34px;height:34px;border-radius:10px}
  .m12-card{padding:12px}.m12-two{gap:8px}.m12-h2{font-size:16px;margin:12px 0 6px}
  .m12-add{min-height:70px;gap:6px;border-radius:16px;padding:8px}.m12-add .m12-ai{width:36px;height:36px;border-radius:11px}
  .m12-qb{min-height:36px;padding:8px 12px}.m12-al{padding:7px 10px}
}
/* the sidebar colour runs the full height of the window (no white corner under a short menu) */
@media (min-width:901px){.app{position:relative}.app::before{content:'';position:fixed;top:0;bottom:0;inset-inline-start:0;width:260px;background:var(--side);z-index:0;pointer-events:none}.app>.side{position:sticky;z-index:1;min-height:100vh}}
.m12-toprow{gap:8px 14px}.m12-toprow .m12-dots{margin:0}.m12-toprow .m12-head{margin-inline-end:6px}
/* ===== 1.5.12 SB "make both same colour like BIO": BIO NIGHT look (palette bionight = BIO CLOUD skin nexus / nexuslight).
   Deep navy glass, gold active bar, 16 px cards with thin coloured accent lines (green / amber / red / violet / blue), white bold numbers. ===== */
html[data-pal=bionight]{--bio-ok:var(--ok);--bio-warn:var(--warn);--bio-bad:var(--bad);--bio-vio:var(--violet,#9a7cf0);--bio-info:var(--info)}
html[data-pal=bionight] .card{border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow)}
html[data-pal=bionight][data-theme=dark] .card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-pal=bionight] .top{background:color-mix(in srgb,var(--solid) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
html[data-pal=bionight] .side{border-inline-end:1px solid var(--menu-line)}
html[data-pal=bionight][data-theme=dark] .side{box-shadow:inset -1px 0 0 rgba(242,195,0,.18),4px 0 30px rgba(0,0,0,.25)}
html[data-pal=bionight] .side .nav a.on,html[data-pal=bionight] .side .t12-side.on,html[data-pal=bionight] .side .nav-g.hub-on{background:var(--menu-on-bg);color:var(--menu-on-text);box-shadow:inset 3px 0 0 var(--menu-on-bar),var(--glow);border-radius:12px;font-weight:700}
html[dir=rtl][data-pal=bionight] .side .nav a.on,html[dir=rtl][data-pal=bionight] .side .t12-side.on,html[dir=rtl][data-pal=bionight] .side .nav-g.hub-on{box-shadow:inset -3px 0 0 var(--menu-on-bar),var(--glow)}
html[data-pal=bionight] .side .nav a,html[data-pal=bionight] .side .t12-side{font-weight:600}
html[data-pal=bionight] .banner{border-radius:14px;border:1px solid var(--line)}
html[data-pal=bionight] .btn{border-radius:12px}
html[data-pal=bionight] .btn.pri{background:var(--pri-bg);color:var(--pri-text);border-color:var(--pri-border);box-shadow:var(--pri-shadow)}
html[data-pal=bionight] h1,html[data-pal=bionight] .num{font-weight:800}
/* dashboard: BIO tokens + accent lines on top / bottom of every tile, colours cycle like BIO (green, amber, red, violet, blue, gold) */
html[data-pal=bionight] .m12{--m12-navy:#0f1c38;--m12-navy2:#06122b;--m12-gold:#f2c300;--m12-card:var(--card);--m12-line:var(--line);--m12-well:var(--card2);--m12-ink:var(--text);--m12-muted:var(--muted);--m12-shadow:var(--shadow)}
html[data-pal=bionight] .m12-hero{background:radial-gradient(120% 140% at 100% 0%,rgba(242,195,0,.16) 0%,#12244a 40%,#0a1730 100%);border:1px solid var(--line)}
html[data-pal=bionight][data-theme=light] .m12-hero{background:linear-gradient(120deg,#0b1f4a,#16306b 70%,#1d3b7e)}
html[data-pal=bionight] .m12-card,html[data-pal=bionight] .m12-gauge,html[data-pal=bionight] .m12-hq{border-radius:16px}
html[data-pal=bionight] :is(.m12-gauge,.m12-kpi,.m12-lt){position:relative;overflow:hidden;--k:var(--bio-ok)}
html[data-pal=bionight] :is(.m12-gauge,.m12-kpi,.m12-lt)::before,html[data-pal=bionight] :is(.m12-gauge,.m12-kpi,.m12-lt)::after{content:'';position:absolute;inset-inline:0;height:2px;background:var(--k);opacity:.85;pointer-events:none}
html[data-pal=bionight] :is(.m12-gauge,.m12-kpi,.m12-lt)::before{top:0}
html[data-pal=bionight] :is(.m12-gauge,.m12-kpi,.m12-lt)::after{bottom:0;inset-inline:14px;opacity:.6}
html[data-pal=bionight] :is(.m12-gauge,.m12-kpi,.m12-lt):nth-child(6n+2){--k:var(--bio-warn)}
html[data-pal=bionight] :is(.m12-gauge,.m12-kpi,.m12-lt):nth-child(6n+3){--k:var(--bio-bad)}
html[data-pal=bionight] :is(.m12-gauge,.m12-kpi,.m12-lt):nth-child(6n+4){--k:var(--bio-vio)}
html[data-pal=bionight] :is(.m12-gauge,.m12-kpi,.m12-lt):nth-child(6n+5){--k:var(--bio-info)}
html[data-pal=bionight] :is(.m12-gauge,.m12-kpi,.m12-lt):nth-child(6n+6){--k:var(--gold)}
html[data-pal=bionight][data-theme=dark] :is(.m12-kpi,.m12-lt) b{color:#fff;text-shadow:0 0 14px color-mix(in srgb,var(--k) 45%,transparent)}
html[data-pal=bionight] .al-a{border-radius:14px;border-color:var(--line);background:var(--card);box-shadow:inset 3px 0 0 var(--gold)}
html[data-pal=bionight] dialog{border-radius:16px;border:1px solid var(--line);background:var(--solid);color:var(--text)}

/* ===== 1.5.12 NEXUS icon tiles in the side menu, NAVY + GOLD (SB standard; tile shape = SHABAB NEXUS HQ: radius 12/40, 145deg gradient bright -> main -> navy, glossy top half,
   inset white highlight, coloured soft shadow, white line icon; the active one glows) - every palette ===== */
.ntile{--n1:#2c4c8c;--n2:#14306b;--n3:#06122b;--ni:#ffd84a;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:9px;color:var(--ni);overflow:hidden;border:1px solid rgba(242,195,0,.45);
  background:linear-gradient(145deg,var(--n1) 0%,var(--n2) 45%,var(--n3) 100%);box-shadow:0 4px 10px color-mix(in srgb,var(--n2) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.45);transition:box-shadow .15s,transform .15s}
.ntile::after{content:'';position:absolute;inset:0 0 50% 0;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0));pointer-events:none}
.ntile svg{position:relative;z-index:1;width:16px;height:16px;stroke:var(--ni);stroke-width:2}
.side .nav .ic{width:auto}.side .nav-gi .ntile,.side .ic .ntile{margin-inline-end:2px}
.side a:hover .ntile,.side .nav-g:hover .ntile{transform:translateY(-1px)}
.side a.on .ntile,.side .t12-side.on .ntile,.side .nav-g.hub-on .ntile{--n1:#ffe680;--n2:#f2c300;--n3:#c99a00;--ni:#0b1f4a;border-color:#ffe27a;box-shadow:0 0 0 2px rgba(242,195,0,.35),0 0 18px rgba(242,195,0,.55),inset 0 1px 0 rgba(255,255,255,.55)}
.side .ic.sm .ntile{width:22px;height:22px;border-radius:7px}.side .ic.sm .ntile svg{width:13px;height:13px}

/* ===== 1.5.12 SLIM RAIL: on the BIO page the SAFARI menu shrinks to a column of icon tiles (BIO's own menu is enough); toggle = expand again.
   PC only - on the phone the menu stays a drawer (closed). ===== */
.rail-tog{display:none}
@media (min-width:901px){
  .app.rail .rail-tog,.app.bio-pg .rail-tog{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:0 0 10px;padding:6px;border:1px solid var(--menu-line);background:transparent;color:var(--menu-text);border-radius:10px;cursor:pointer;font:600 12px/1.2 inherit}
  .app.rail{grid-template-columns:72px 1fr}
  .app.rail::before{width:72px!important}
  .app.rail>.side{padding:12px 8px 20px;overflow-x:hidden;scrollbar-width:none}
  .app.rail .side :is(.side-co,.nav-find,.nav-sec,.chev,.side-foot,.side-ver,small,.logo span,.logo b,.ver,.easy-sw){display:none!important}
  .app.rail .side .logo{justify-content:center}
  .app.rail .side :is(a,.nav-g){justify-content:center;padding:6px 0!important;min-height:44px;margin:2px 0!important;font-size:0!important;position:relative;gap:0!important}
  .app.rail .side .ntile{width:40px;height:40px;border-radius:12px;margin:0!important}.app.rail .side .ntile svg{width:20px;height:20px}
  .app.rail .side .nav-g .nav-gl{position:absolute;inset:0;font-size:0!important;opacity:0}
  .app.rail .side nav[data-navg]{display:block!important}.app.rail .side nav[data-navg]>:not(.t12-bio){display:none!important}
  .app.rail .side .nav-it .mi,.app.rail .side a>span:not(.ic):not(.nav-gi){display:none}
  .app.rail .side .t12-bio img{width:40px;height:40px;border-radius:12px}
  .app.rail .side :is(a.on,.t12-side.on,.nav-g.hub-on,.t12-bio){background:transparent!important;box-shadow:none!important}
  .app.rail .side .t12-bio{box-shadow:none}.app.rail .side .t12-bio img{box-shadow:0 0 0 2px var(--menu-on-bar),0 0 16px rgba(242,195,0,.5)}
  .app.rail .side .rail-tog{font-size:0}.app.rail .side .rail-tog svg{width:18px;height:18px}
}
/* 1.5.12 THEME STUDIO fine-tuning: font + corner radius + dashboard background (owner sets them in Settings -> Look) */
html[data-font=montserrat] :is(body,input,select,textarea,button){font-family:Montserrat,Tajawal,Cairo,system-ui,sans-serif}
html[data-font=manrope] :is(body,input,select,textarea,button){font-family:Manrope,Tajawal,Cairo,system-ui,sans-serif}
html[data-font=cairo] :is(body,input,select,textarea,button){font-family:Cairo,Tajawal,system-ui,sans-serif}
html[data-font=tajawal] :is(body,input,select,textarea,button){font-family:Tajawal,Cairo,system-ui,sans-serif}
html[data-font=system] :is(body,input,select,textarea,button){font-family:system-ui,'Segoe UI',Roboto,Tahoma,sans-serif}
html[data-radius] :is(.card,.m12-card,.m12-gauge,.m12-hq,.m12-hero,.al-a,dialog){border-radius:var(--radius)!important}
html[data-radius] :is(.btn,input,select,textarea){border-radius:calc(var(--radius) * .7)}
html[data-studio] .m12{background:var(--dash-bg,transparent);border-radius:var(--radius,16px)}
.lk-fine .form-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
/* 1.5.13 V2 fix 3: the Easy-mode dashboard follows the company book colours - HQ UAE (maroon preset) = maroon + gold cards, HQ OMAN stays navy + yellow */
html[data-pal="maroon"] .m12{--m12-navy:#7a1428;--m12-navy2:#4a0c1a;--m12-gold:#d9a521;--m12-ink:#3a0a14;--m12-muted:#6f5058;--m12-line:rgba(74,12,26,.12);--m12-well:#f8eeef;--m12-shadow:0 18px 40px -22px rgba(74,12,26,.32),0 1px 2px rgba(74,12,26,.06)}
html[data-pal="maroon"][data-theme="dark"] .m12{--m12-ink:#fbeef0;--m12-muted:#d6b3b9;--m12-card:rgba(58,10,20,.72);--m12-well:rgba(30,5,11,.55);--m12-line:rgba(255,255,255,.10)}
html[data-pal="maroon"] .m12-ki{background:rgba(122,20,40,.12);color:#7a1428}html[data-pal="maroon"][data-theme="dark"] .m12-ki{background:rgba(217,165,33,.16);color:#d9a521}
html[data-pal="maroon"] .m12{--m12-card:var(--card);--m12-line:var(--line);--m12-well:var(--card2);--m12-ink:var(--text);--m12-muted:var(--muted);--m12-shadow:var(--shadow)}
html[data-pal="maroon"] .m12-hero{background:radial-gradient(120% 140% at 100% 0%,rgba(217,165,33,.18) 0%,#5b0f1f 40%,#2a0710 100%);border:1px solid var(--line)}
html[data-pal="maroon"][data-theme=light] .m12-hero{background:linear-gradient(120deg,#4a0c1a,#7a1428 70%,#8e3748)}