/* SHABAB SAFARI PRO — look: deep burgundy + magenta + gold (from the logo). Light theme = white + burgundy + a little gold. */
@font-face{font-family:Cinzel;src:url(../fonts/cinzel-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Cinzel;src:url(../fonts/cinzel-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url(../fonts/manrope-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(../fonts/manrope-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url(../fonts/manrope-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url(../fonts/manrope-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url(../fonts/manrope-latin-800-normal.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Cairo;src:url(../fonts/cairo-arabic-400-normal.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Cairo;src:url(../fonts/cairo-arabic-700-normal.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Cairo;src:url(../fonts/cairo-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Cairo;src:url(../fonts/cairo-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}

:root,[data-theme=dark]{
  --bg:#22040f; --bg2:#3a0a1e; --bg3:#5a0a2a; --card:rgba(255,255,255,.055); --card2:rgba(255,255,255,.09); --solid:#3b0b20;
  --line:rgba(227,181,82,.22); --line2:rgba(255,255,255,.10); --text:#fbeef3; --muted:#d9aebf; --faint:#a77d8f;
  --pink:#e0407e; --pink2:#c2185b; --gold:#e3b552; --gold2:#f4d38a; --ok:#3ccf91; --warn:#f2b33d; --bad:#ff5d73; --info:#6fb7ff;
  --input:rgba(0,0,0,.25); --shadow:0 18px 50px rgba(0,0,0,.45); --glow:0 0 0 1px rgba(227,181,82,.35),0 10px 30px rgba(194,24,91,.25);
  --side:linear-gradient(180deg,#300818 0%,#4a0b26 60%,#3a0a1e 100%);
  --page:radial-gradient(1200px 700px at 85% -10%,rgba(224,64,126,.28),transparent 60%),radial-gradient(900px 600px at -10% 110%,rgba(227,181,82,.12),transparent 60%),linear-gradient(160deg,#2a0513,#420b22 55%,#2a0613);
}
[data-theme=light]{
  --bg:#fbf6f8; --bg2:#ffffff; --bg3:#f3e6eb; --card:#ffffff; --card2:#fdf4f7; --solid:#ffffff;
  --line:rgba(90,10,42,.14); --line2:rgba(90,10,42,.10); --text:#2b0a18; --muted:#6e3e52; --faint:#9a7484;
  --pink:#c2185b; --pink2:#5a0a2a; --gold:#b8862a; --gold2:#c9993d; --ok:#178a5a; --warn:#b97800; --bad:#c62c45; --info:#2a6fc2;
  --input:#fff; --shadow:0 10px 30px rgba(90,10,42,.10); --glow:0 0 0 1px rgba(184,134,42,.35),0 8px 22px rgba(90,10,42,.12);
  --side:linear-gradient(180deg,#5a0a2a 0%,#6d0f35 100%);
  --page:linear-gradient(180deg,#fbf6f8,#f7eef2);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--page);background-attachment:fixed;color:var(--text);font:15px/1.5 Manrope,Cairo,system-ui,'Segoe UI',Tahoma,sans-serif;-webkit-font-smoothing:antialiased}
[dir=rtl] *{letter-spacing:0!important}
[dir=rtl] body,[dir=rtl] input,[dir=rtl] select,[dir=rtl] textarea,[dir=rtl] button{font-family:Cairo,Manrope,Tahoma,sans-serif}
a{color:var(--gold2)} [data-theme=light] a{color:var(--pink2)}
h1,h2,h3{margin:0 0 .5em;font-weight:700;letter-spacing:.2px}
h1{font-size:1.45rem} h2{font-size:1.15rem} h3{font-size:1rem}
.brand-font{font-family:Cinzel,Cairo,serif;letter-spacing:.5px}
.muted{color:var(--muted)} .faint{color:var(--faint)} .gold{color:var(--gold)} .pink{color:var(--pink)} .ok{color:var(--ok)} .bad{color:var(--bad)} .warn{color:var(--warn)}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.hide{display:none!important}

/* ---- shell */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.side{background:var(--side);border-inline-end:1px solid var(--line);position:sticky;top:0;height:100vh;overflow:auto;padding:18px 14px 30px;color:#fbeef3}
.logo{display:flex;align-items:center;gap:12px;padding:4px 6px 18px;border-bottom:1px solid rgba(227,181,82,.25);margin-bottom:12px}
.logo img{width:46px;height:46px;border-radius:12px;box-shadow:0 0 0 1px rgba(227,181,82,.5),0 6px 18px rgba(0,0,0,.35)}
.logo b{display:block;font-family:Cinzel,serif;font-size:15px;color:#f4d38a;letter-spacing:1px;line-height:1.1}
.logo span{font-size:11px;color:#e7b9c9;letter-spacing:.4px}
.nav-g{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:#c993a8;margin:14px 8px 6px}
[dir=rtl] .nav-g{letter-spacing:0}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:#f7dce6;text-decoration:none;font-weight:500;font-size:14px}
.nav a:hover{background:rgba(255,255,255,.07)}
.nav a.on{background:linear-gradient(90deg,rgba(224,64,126,.35),rgba(227,181,82,.12));box-shadow:inset 3px 0 0 #e3b552;color:#fff}
[dir=rtl] .nav a.on{box-shadow:inset -3px 0 0 #e3b552}
.nav .ic{width:20px;text-align:center;opacity:.9}
.nav .cnt{margin-inline-start:auto;background:#e0407e;color:#fff;border-radius:20px;font-size:11px;padding:0 7px}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:10px;padding:12px 22px;border-bottom:1px solid var(--line2);position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(12px)}
.top .search{flex:1;max-width:520px}
.top .sp{flex:1}
.top .burger{display:none}
.content{padding:22px;max-width:1500px;width:100%}
.banner{margin:12px 22px 0;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(242,179,61,.12);font-size:14px}
.banner.red{background:rgba(255,93,115,.14);border-color:rgba(255,93,115,.4)}

/* ---- controls */
input,select,textarea{width:100%;background:var(--input);color:var(--text);border:1px solid var(--line2);border-radius:10px;padding:9px 11px;font:inherit;outline:none;min-height:40px}
[data-theme=dark] select option{background:#3b0b20;color:#fbeef3}
textarea{min-height:76px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,181,82,.18)}
input[type=checkbox]{width:20px;height:20px;min-height:0;accent-color:var(--pink)}
label.f{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px;font-weight:600}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--bad)}
.help{font-size:12px;color:var(--faint);margin-top:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--card2);color:var(--text);padding:9px 15px;border-radius:11px;font:inherit;font-weight:600;cursor:pointer;min-height:40px;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--gold)}
.btn.pri{background:linear-gradient(135deg,#e0407e,#a0124b);border-color:rgba(227,181,82,.55);color:#fff;box-shadow:0 6px 18px rgba(194,24,91,.35)}
[data-theme=light] .btn.pri{background:linear-gradient(135deg,#6d0f35,#5a0a2a);border-color:#b8862a}
.btn.gold{background:linear-gradient(135deg,#f4d38a,#c99a3e);color:#3a0a1e;border-color:#f4d38a}
.btn.ghost{background:transparent}
.btn.danger{border-color:rgba(255,93,115,.55);color:var(--bad);background:transparent}
.btn.sm{padding:5px 10px;min-height:32px;font-size:13px;border-radius:9px}
.btn.wa{background:#1f9d55;border-color:#25d366;color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn{width:40px;padding:0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px 16px}
.form-grid .w2{grid-column:span 2}
.chk{display:flex;align-items:center;gap:9px;min-height:40px}

/* ---- cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);backdrop-filter:blur(14px);margin-bottom:16px}
.card h2{display:flex;align-items:center;gap:8px}
.card .gl{height:2px;background:linear-gradient(90deg,var(--gold),transparent);margin:-6px 0 14px;border:0;opacity:.7}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px;margin-bottom:16px}
.kpi{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);backdrop-filter:blur(14px);text-decoration:none;color:inherit;display:block}
.kpi:before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--gold),var(--pink),transparent)}
.kpi .l{font-size:12.5px;color:var(--muted);font-weight:600}
.kpi .v{font-size:27px;font-weight:800;margin-top:4px;letter-spacing:-.3px}
.kpi .v small{font-size:13px;color:var(--gold);font-weight:700;margin-inline-start:4px}
.kpi .s{font-size:12px;color:var(--faint);margin-top:2px}
.kpi.hot .v{color:var(--gold2)} [data-theme=light] .kpi.hot .v{color:var(--pink2)}
.hero{display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:20px;margin-bottom:16px;border:1px solid var(--line);background:linear-gradient(120deg,rgba(194,24,91,.35),rgba(90,10,42,.25) 50%,rgba(227,181,82,.18));box-shadow:var(--glow)}
[data-theme=light] .hero{background:linear-gradient(120deg,#5a0a2a,#8d1745 60%,#b8862a);color:#fff}
.hero img{width:64px;height:64px;border-radius:16px}
.hero h1{margin:0;font-family:Cinzel,Cairo,serif;color:var(--gold2)} [data-theme=light] .hero h1{color:#f4d38a}
.hero .sub{opacity:.9}
.two{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.chart{width:100%;height:190px}
.bar-l{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:13px}
.bar-l .b{flex:1;height:9px;border-radius:9px;background:var(--line2);overflow:hidden}
.bar-l .b i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--gold))}
.alert{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:11px;margin-bottom:7px;border:1px solid var(--line2);background:var(--card2);font-size:13.5px;text-decoration:none;color:inherit}
.alert .dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none}
.alert.red .dot{background:var(--bad)} .alert.amber .dot{background:var(--warn)} .alert.blue .dot{background:var(--info)}

/* ---- tables + lists */
.tbl-wrap{overflow:auto;border-radius:14px;border:1px solid var(--line2)}
table.t{width:100%;border-collapse:collapse;font-size:14px}
.t th{text-align:start;font-size:12px;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--card2);white-space:nowrap;position:sticky;top:0}
.t td{padding:9px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
.t tr.click{cursor:pointer} .t tr.click:hover td{background:rgba(227,181,82,.07)}
.t td.r,.t th.r{text-align:end}
.t tfoot td{font-weight:800;border-top:2px solid var(--line)}
.pill{display:inline-block;padding:1px 9px;border-radius:20px;font-size:12px;font-weight:700;border:1px solid var(--line2);background:var(--card2);white-space:nowrap}
.pill.green{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)} .pill.red{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.pill.amber{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)} .pill.blue{color:var(--info);border-color:color-mix(in srgb,var(--info) 45%,transparent)}
.pill.gold{color:var(--gold);border-color:var(--line)}
.cards-list{display:none}
.li{display:block;padding:12px 14px;border:1px solid var(--line2);border-radius:14px;margin-bottom:9px;background:var(--card);text-decoration:none;color:inherit}
.li .h{display:flex;justify-content:space-between;gap:8px;font-weight:700}
.li .m{font-size:13px;color:var(--muted);margin-top:3px}
.pager{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:10px;font-size:13px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{border:1px solid var(--line2);background:transparent;color:var(--muted);padding:7px 13px;border-radius:20px;font:inherit;font-weight:600;cursor:pointer}
.tabs button.on{background:linear-gradient(135deg,rgba(224,64,126,.4),rgba(227,181,82,.2));color:var(--text);border-color:var(--gold)}
[data-theme=light] .tabs button.on{background:#5a0a2a;color:#fff}
.empty{text-align:center;padding:30px;color:var(--faint)}
.sum-box{display:grid;grid-template-columns:auto auto;gap:4px 18px;justify-content:end;font-size:14px}
.sum-box .tot{font-size:18px;font-weight:800;color:var(--gold2)} [data-theme=light] .sum-box .tot{color:var(--pink2)}
.lines .ln{display:grid;grid-template-columns:130px 1fr 70px 120px 120px 110px 110px 40px;gap:8px;align-items:center;margin-bottom:8px}
.lines .hd{font-size:12px;color:var(--muted);font-weight:700}
.lines .ln.inv{grid-template-columns:1fr 70px 130px 190px 120px 40px}
.opt-box{border:1px dashed var(--line);border-radius:14px;padding:12px;margin-bottom:12px}
.check-list label{display:flex;gap:9px;align-items:center;padding:5px 0}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px 12px;font-size:14px} .kv b{color:var(--muted);font-weight:600}

/* ---- dialogs + toasts (in-page; no browser alert / confirm / prompt) */
dialog.sbd{border:1px solid var(--line);border-radius:18px;background:var(--solid);color:var(--text);padding:0;max-width:min(560px,94vw);width:100%;box-shadow:0 30px 80px rgba(0,0,0,.6)}
dialog.sbd.wide{max-width:min(900px,96vw)}
dialog.sbd::backdrop{background:rgba(20,2,10,.62);backdrop-filter:blur(3px)}
.sbd .dh{padding:15px 18px;border-bottom:1px solid var(--line);font-weight:800;display:flex;align-items:center;gap:8px}
.sbd .db{padding:16px 18px;max-height:70vh;overflow:auto}
.sbd .df{padding:12px 18px;border-top:1px solid var(--line2);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.toasts{position:fixed;bottom:18px;inset-inline-end:18px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--solid);border:1px solid var(--line);border-inline-start:4px solid var(--ok);padding:10px 14px;border-radius:12px;box-shadow:var(--shadow);max-width:380px;font-size:14px}
.toast.bad{border-inline-start-color:var(--bad)}

/* ---- login */
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login .art{background:url(../img/poster.webp) center/cover no-repeat,#3a0a1e;position:relative}
.login .art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(34,4,15,.9))}
[dir=rtl] .login .art:after{background:linear-gradient(-90deg,transparent 60%,rgba(34,4,15,.9))}
.login .box{display:flex;align-items:center;justify-content:center;padding:30px}
.login .panel{width:100%;max-width:420px}
.login .panel .card{padding:26px}
.lang-sw{position:absolute;top:14px;inset-inline-end:14px;z-index:5}

/* ---- phone */
.bottom{display:none}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:280px;z-index:50;transform:translateX(-100%);transition:transform .2s}
  [dir=rtl] .side{inset:0 0 0 auto;transform:translateX(100%)}
  .app.open .side{transform:none}
  .app.open:after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40}
  .top .burger{display:inline-flex}
  .top{padding:10px 12px}
  .top .hide-s{display:none}
  .content{padding:14px 12px 90px}
  .two,.three{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:12px 13px} .kpi .v{font-size:20px}
  .tbl-wrap.resp{display:none} .cards-list{display:block}
  .form-grid{grid-template-columns:1fr} .form-grid .w2{grid-column:auto}
  .lines .ln,.lines .ln.inv{grid-template-columns:1fr 1fr;padding:10px;border:1px solid var(--line2);border-radius:12px}
  .lines .ln .full{grid-column:1/-1} .lines .hd{display:none}
  .bottom{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--solid);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bottom a{flex:1;text-align:center;font-size:11px;color:var(--muted);text-decoration:none;padding:4px 0}
  .bottom a .ic{display:block;font-size:19px}
  .bottom a.on{color:var(--gold)}
  .login{grid-template-columns:1fr} .login .art{height:240px} .login .art:after{background:linear-gradient(180deg,transparent 50%,rgba(34,4,15,.95))}
  .hero{padding:14px;flex-wrap:wrap} .hero img{width:48px;height:48px} .hero h1{font-size:1.1rem} .hero .row{width:100%} .hero .row .btn{flex:1}
  .kv{grid-template-columns:1fr}
  h1{font-size:1.25rem}
  .toasts{left:12px;right:12px;bottom:80px}
}
@media print{ .side,.top,.bottom,.banner,.no-print{display:none!important} .app{display:block} body{background:#fff;color:#000} }
/* reference picker */
.refp{position:relative}
.refl{position:absolute;z-index:60;inset-inline:0;top:100%;margin-top:4px;background:var(--solid);border:1px solid var(--line);border-radius:12px;max-height:260px;overflow:auto;box-shadow:var(--shadow)}
.refl .opt{padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--line2)} .refl .opt:hover{background:rgba(227,181,82,.12)}

/* 1.1: company logo on a white rounded tile (their own colours stay readable on the dark theme), counter buttons, demo banner */
.co-logo{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:14px;padding:6px 10px;box-shadow:0 0 0 1px rgba(227,181,82,.45),0 6px 18px rgba(0,0,0,.25);max-width:100%}
.co-logo img{display:block;max-width:100%;max-height:44px;width:auto;height:auto;border-radius:8px}
.co-logo.big{padding:8px 12px}.co-logo.big img{max-height:58px}
.hero .co-logo img{width:auto;height:auto}
.side-co{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 6px 14px}
#lco .co-logo{margin:0 0 12px}
.bigbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px}
.bigbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(140deg,rgba(194,24,91,.28),rgba(227,181,82,.16));color:inherit;text-decoration:none;font-size:17px;box-shadow:var(--glow)}
.bigbtn:hover,.bigbtn:focus-visible{border-color:#e3b552;transform:translateY(-1px)}
.bigbtn .ic{color:#e3b552}
[data-theme=light] .bigbtn{background:#fff;border-color:#e8c9d6}
[data-theme=light] .bigbtn .ic{color:#8d1745}
.banner.demo{background:linear-gradient(90deg,rgba(227,181,82,.28),rgba(227,181,82,.12));border-color:#e3b552}
@media (max-width:600px){.bigbtns{grid-template-columns:repeat(2,1fr)}.bigbtn{min-height:84px;font-size:15px}}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.chk.svc{padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:15px}

/* ---- 1.1 palette "navy" (navy blue + yellow, from the AL ANSARI logo / website: #2f3967 #06163a #23336d #fbdf05) — set per company (Settings → Numbers & print) */
[data-pal=navy],[data-pal=navy][data-theme=dark]{
  --bg:#06163a; --bg2:#0d2150; --bg3:#2f3967; --card:rgba(255,255,255,.055); --card2:rgba(255,255,255,.09); --solid:#0e1f4a;
  --line:rgba(251,223,5,.22); --line2:rgba(255,255,255,.10); --text:#f1f4ff; --muted:#b7c2e8; --faint:#8592c0;
  --pink:#6f8cff; --pink2:#3d52a8; --gold:#fbdf05; --gold2:#ffe95c;
  --glow:0 0 0 1px rgba(251,223,5,.32),0 10px 30px rgba(47,57,103,.45);
  --side:linear-gradient(180deg,#06163a 0%,#1a2a5e 60%,#0d1d47 100%);
  --page:radial-gradient(1200px 700px at 85% -10%,rgba(80,105,210,.30),transparent 60%),radial-gradient(900px 600px at -10% 110%,rgba(251,223,5,.10),transparent 60%),linear-gradient(160deg,#050f2a,#122459 55%,#06163a);
}
[data-pal=navy][data-theme=light]{
  --bg:#f4f6fc; --bg2:#ffffff; --bg3:#e6eaf7; --card:#ffffff; --card2:#f6f8fe; --solid:#ffffff;
  --line:rgba(47,57,103,.16); --line2:rgba(47,57,103,.10); --text:#0b1838; --muted:#3f4c78; --faint:#6e7899;
  --pink:#2f3967; --pink2:#23336d; --gold:#8a7300; --gold2:#a58a00;
  --glow:0 0 0 1px rgba(251,223,5,.55),0 8px 22px rgba(47,57,103,.12);
  --side:linear-gradient(180deg,#2f3967 0%,#23336d 100%);
  --page:linear-gradient(180deg,#f4f6fc,#edf1fa);
}
[data-pal=navy] .side{color:#f1f4ff}
[data-pal=navy] .logo{border-bottom-color:rgba(251,223,5,.3)}
[data-pal=navy] .logo img{box-shadow:0 0 0 1px rgba(251,223,5,.55),0 6px 18px rgba(0,0,0,.35)}
[data-pal=navy] .logo b{color:#fbdf05} [data-pal=navy] .logo span{color:#c9d2f2} [data-pal=navy] .nav-g{color:#9fb0e6}
[data-pal=navy] .nav a.on{background:linear-gradient(90deg,rgba(111,140,255,.35),rgba(251,223,5,.14));box-shadow:inset 3px 0 0 #fbdf05}
[data-pal=navy][dir=rtl] .nav a.on{box-shadow:inset -3px 0 0 #fbdf05}
[data-pal=navy][data-theme=dark] select option{background:#0e1f4a;color:#f1f4ff}
[data-pal=navy] input:focus,[data-pal=navy] select:focus,[data-pal=navy] textarea:focus{box-shadow:0 0 0 3px rgba(251,223,5,.2)}
[data-pal=navy] .btn.pri{background:linear-gradient(135deg,#3d52a8,#23336d);border-color:rgba(251,223,5,.6);box-shadow:0 6px 18px rgba(35,51,109,.4)}
[data-pal=navy][data-theme=light] .btn.pri{background:linear-gradient(135deg,#2f3967,#23336d);border-color:#fbdf05}
[data-pal=navy] .btn.gold{background:linear-gradient(135deg,#ffe95c,#fbdf05);color:#06163a;border-color:#ffe95c}
[data-pal=navy] .hero{background:linear-gradient(120deg,rgba(61,82,168,.45),rgba(35,51,109,.3) 50%,rgba(251,223,5,.16))}
[data-pal=navy][data-theme=light] .hero{background:linear-gradient(120deg,#23336d,#2f3967 60%,#3d52a8);color:#fff}
[data-pal=navy][data-theme=light] .hero h1{color:#fbdf05}
[data-pal=navy] .t tr.click:hover td{background:rgba(251,223,5,.07)}
[data-pal=navy] .tabs button.on{background:linear-gradient(135deg,rgba(111,140,255,.4),rgba(251,223,5,.2))} [data-pal=navy][data-theme=light] .tabs button.on{background:#2f3967;color:#fff}
[data-pal=navy] .refl .opt:hover{background:rgba(251,223,5,.12)}
[data-pal=navy] .co-logo{box-shadow:0 0 0 1px rgba(251,223,5,.55),0 6px 18px rgba(0,0,0,.25)}
[data-pal=navy] .bigbtn{background:linear-gradient(140deg,rgba(61,82,168,.45),rgba(251,223,5,.14))} [data-pal=navy] .bigbtn .ic{color:#fbdf05}
[data-pal=navy][data-theme=light] .bigbtn{background:#fff;border-color:#cdd5ee} [data-pal=navy][data-theme=light] .bigbtn .ic{color:#2f3967}
[data-pal=navy] .banner.demo{background:linear-gradient(90deg,rgba(251,223,5,.25),rgba(251,223,5,.08));border-color:#fbdf05}
[data-pal=navy][data-theme=light] a{color:#23336d}
[data-pal=navy] .login .art{background-color:#06163a}
[data-pal=navy] .login .art:after{background:linear-gradient(90deg,rgba(6,22,58,.35) 0%,transparent 40%,rgba(6,22,58,.92))}
[data-pal=navy][dir=rtl] .login .art:after{background:linear-gradient(-90deg,rgba(6,22,58,.35) 0%,transparent 40%,rgba(6,22,58,.92))}
@media (max-width:900px){[data-pal=navy] .login .art:after{background:linear-gradient(180deg,transparent 50%,rgba(6,22,58,.95))}}
.prayer{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:8px;font-size:13px;align-items:center}.prayer span{padding:2px 9px;border-radius:999px;border:1px solid var(--line)}.prayer span.on{border-color:var(--gold);color:var(--gold2);background:rgba(255,255,255,.06)}.prayer small{font-size:11px}
[data-theme=light] .hero .prayer span{border-color:rgba(255,255,255,.35)} [data-theme=light] .hero .prayer .faint{color:rgba(255,255,255,.75)}

/* SAFARI 1.1.1 day-mode menu: the left menu keeps light text on its dark background in day mode too */
[data-theme] .side .nav a{color:#f7dce6} [data-theme] .side .nav a.on{color:#fff}
[data-pal=navy][data-theme] .side a,[data-pal=navy][data-theme] .side .nav a{color:#f1f4ff} [data-pal=navy][data-theme] .side .nav a.on{color:#fff}
[data-theme=light] .side a:not(.btn){color:inherit}