:root{
  --bg:#F2F3F6; --card:#FFFFFF; --line:rgba(34,40,49,.08); --ink:#222831; --ink2:#4A515C; --muted:#8A919C;
  --navy:#002754; --navy2:#0B3B70; --sky:#0077B6; --skySoft:rgba(0,119,182,.08);
  --gold:#D9A630; --goldInk:#8C6412; --goldSoft:rgba(217,166,48,.13);
  --green:#1F8A57; --greenSoft:rgba(31,138,87,.10); --red:#D92D20; --redSoft:rgba(217,45,32,.08);
  --grey:#6B7280; --greySoft:#E8EAED; --r:20px;
  --shadow:0 1px 1px rgba(0,39,84,.03),0 6px 20px rgba(0,39,84,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Almarai",-apple-system,system-ui,sans-serif;background:#D9DCE2;color:var(--ink);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
.app{position:relative;height:100dvh;max-width:430px;margin:0 auto;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
@media (min-width:520px){
  body{display:flex;align-items:center;justify-content:center;padding:24px 0}
  .app{height:min(900px,calc(100vh - 48px));width:410px;border-radius:46px;box-shadow:0 40px 90px rgba(0,20,45,.28),0 0 0 11px #0E1116,0 0 0 12px #2A2F38}
}
.scroll{flex:1;overflow-y:auto;padding:6px 18px 132px;scroll-behavior:smooth}
.scroll::-webkit-scrollbar{display:none}
.ic{width:21px;height:21px;flex:none}
.ic.sm{width:18px;height:18px}.ic.xs{width:14px;height:14px}.ic.lg{width:26px;height:26px}

/* header */
.top{display:flex;align-items:center;gap:10px;padding:18px 18px 4px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;color:var(--navy);letter-spacing:-.2px}
.logo b{width:34px;height:34px;border-radius:10px;background:linear-gradient(155deg,#0B3B70,var(--navy));display:grid;place-items:center;color:var(--gold);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.top .sp{flex:1}
.iconbtn{width:38px;height:38px;border-radius:50%;background:var(--card);display:grid;place-items:center;position:relative;box-shadow:var(--shadow);color:var(--ink)}
.iconbtn .dot{position:absolute;top:8px;left:9px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid #fff}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.subtop{display:flex;align-items:center;gap:12px;padding:18px 18px 8px}
.subtop h1{font-size:28px;font-weight:800;flex:1;letter-spacing:-.4px}
.hello h2{font-size:28px;font-weight:800;letter-spacing:-.5px}
.hello p{color:var(--muted);font-size:13.5px;margin-top:2px}

/* cards */
.card{background:var(--card);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.card h3{font-size:15.5px;font-weight:700}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:11.5px}
.sec-title{display:flex;align-items:center;justify-content:space-between;margin:22px 4px 10px}
.sec-title h3{font-size:19px;font-weight:800;letter-spacing:-.3px}
.sec-title a{font-size:14px;color:var(--sky);font-weight:700}
.chipic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--skySoft);color:var(--navy);flex:none}
.chipic.green{background:var(--greenSoft);color:var(--green)}.chipic.red{background:var(--redSoft);color:var(--red)}.chipic.grey{background:var(--greySoft);color:var(--grey)}.chipic.dark{background:var(--navy);color:#fff}

.pill{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap}
.pill.green{background:var(--greenSoft);color:var(--green)}
.pill.amber{background:var(--goldSoft);color:var(--goldInk)}
.pill.grey{background:var(--greySoft);color:var(--grey)}
.pill.red{background:var(--redSoft);color:var(--red)}
.pill.dark{background:var(--navy);color:#fff}
.pill.glass{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18)}

/* hero */
.hero{border-radius:26px;overflow:hidden;background:var(--card);margin-bottom:12px;box-shadow:0 2px 2px rgba(0,39,84,.03),0 14px 34px rgba(0,39,84,.10)}
.hero .img{position:relative;height:214px}
.hero .img>svg{width:100%;height:100%;display:block}
.hero .img .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,20,45,0) 38%,rgba(0,20,45,.78) 100%)}
.hero .img .tag{position:absolute;top:14px;right:14px}
.hero .img .cap{position:absolute;bottom:14px;right:16px;left:16px;color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.hero .img .cap h3{font-size:22px;font-weight:800;letter-spacing:-.3px}
.hero .img .cap p{font-size:12.5px;opacity:.82;margin-top:2px}
.hero .body{padding:12px}
.stats{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{padding:6px 8px;text-align:center}
.stat+.stat{border-inline-start:1px solid var(--line)}
.stat .chipic{display:none}
.stat b{display:block;font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-.3px}
.stat span{font-size:11.5px;color:var(--muted)}

.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}
.qa{background:var(--card);border-radius:20px;padding:14px 4px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;font-weight:700;position:relative;text-align:center;box-shadow:var(--shadow)}
.qa .chipic{width:42px;height:42px;border-radius:13px}
.qa.main{background:linear-gradient(160deg,#0B3B70,var(--navy));color:#fff}
.qa.main .chipic{background:rgba(255,255,255,.12);color:var(--gold)}
.badge{position:absolute;top:8px;left:10px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-size:10.5px;display:grid;place-items:center;padding:0 5px;font-weight:700}

.upcoming{background:linear-gradient(160deg,#0B3B70 0%,var(--navy) 60%,#001B3B 100%);border-radius:24px;padding:16px;margin-bottom:12px;color:#fff;box-shadow:0 14px 34px rgba(0,39,84,.22)}
.upcoming .head{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;margin:0 2px 4px;color:#fff}
.upcoming .head .ic{color:var(--gold)}
.up-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px 14px;margin-top:9px}
.up-item h4{font-size:14.5px;font-weight:700;margin:7px 0 2px}
.upcoming .muted{color:rgba(255,255,255,.62)}
.upcoming .pill{background:rgba(255,255,255,.1);color:rgba(255,255,255,.9)}
.upcoming .pill.red{background:rgba(217,166,48,.18);color:#F0D28A}

.ann{display:flex;gap:12px;align-items:flex-start}

/* timeline */
.tl{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:4px 16px}
.tl-i{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.tl-i:last-child{border-bottom:0}
.tl-i .dt{width:30px;height:30px;border-radius:9px;background:var(--skySoft);display:grid;place-items:center;color:var(--navy);flex:none;margin-top:2px}
.tl-i .dt.green{background:var(--greenSoft);color:var(--green)}
.tl-i .dt.grey{background:var(--greySoft);color:var(--grey)}
.tl-i .dt.red{background:var(--redSoft);color:var(--red)}
.tl-i .box{flex:1;min-width:0}
.tl-i .box h4{font-size:14px;font-weight:700;margin:1px 0 2px}

/* tab bar: floating glass */
.tabbar{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));left:14px;right:14px;padding:7px;border-radius:30px;background:rgba(255,255,255,.78);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 30px rgba(0,39,84,.14);display:flex;justify-content:space-between;align-items:center;gap:2px;z-index:5}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--muted);padding:7px 2px;border-radius:22px;font-weight:700}
.tab.on{background:var(--skySoft);color:var(--navy)}
.tab.sos{flex:none;width:56px;height:56px;border-radius:50%;background:linear-gradient(160deg,#EA4335,var(--red));color:#fff;justify-content:center;gap:0;font-size:10px;margin:0 4px;box-shadow:0 6px 16px rgba(217,45,32,.35),inset 0 1px 0 rgba(255,255,255,.25)}

/* segmented */
.seg{display:flex;background:#E3E5EA;border-radius:11px;padding:3px;margin:4px 0 16px}
.seg button{flex:1;padding:8px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--ink2)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.04)}

.tk{display:block}
.tk .between{align-items:flex-start}
.tk h4{font-size:15px;font-weight:700;margin:5px 0 6px}

/* forms */
.types{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.type{background:var(--card);border-radius:20px;padding:15px;text-align:start;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);border:1.5px solid transparent}
.type b{font-size:15.5px}.type span{font-size:12.5px;color:var(--muted);line-height:1.6}
.type.red{border-color:rgba(217,45,32,.18)}
.lbl{font-size:13px;font-weight:700;margin:18px 4px 8px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.ch{padding:9px 15px;border-radius:999px;background:var(--card);font-size:13.5px;font-weight:700;box-shadow:var(--shadow);color:var(--ink2)}
.ch.on{background:var(--navy);color:#fff}
textarea{width:100%;min-height:96px;border-radius:16px;border:0;background:var(--card);padding:13px 15px;font:inherit;font-size:14.5px;resize:none;color:var(--ink);box-shadow:var(--shadow)}
textarea:focus{outline:2px solid rgba(0,119,182,.35)}
.photo{border:1.5px dashed rgba(34,40,49,.16);border-radius:16px;padding:16px;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13.5px;background:rgba(255,255,255,.6)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;border-radius:15px;font-weight:700;font-size:15.5px}
.btn.pri{background:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(0,39,84,.2)}
.btn.dark{background:var(--ink);color:#fff}
.btn.ghost{background:var(--greySoft);color:var(--navy)}
.btn.red{background:var(--red);color:#fff;box-shadow:0 10px 24px rgba(217,45,32,.28)}
.btn+.btn{margin-top:10px}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--greySoft);border-radius:14px;padding:12px 14px;font-size:12.5px;color:var(--ink2);line-height:1.75}
.note.amber{background:var(--goldSoft);color:var(--goldInk)}
.note.red{background:var(--redSoft);color:#9B2017}
.dup{background:var(--card);border-radius:18px;padding:14px;margin-top:14px;box-shadow:var(--shadow);border-inline-start:3px solid var(--gold)}

/* steps */
.steps{position:relative;padding-inline-start:32px}
.steps::before{content:"";position:absolute;inset-inline-start:11px;top:12px;bottom:14px;width:2px;background:var(--greySoft)}
.st{position:relative;padding:3px 0 16px}
.st:last-child{padding-bottom:2px}
.st .dt{position:absolute;inset-inline-start:-32px;top:2px;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center}
.st.wait .dt{background:var(--card);border:2px solid var(--greySoft);color:var(--muted)}
.st.now .dt{background:var(--gold)}
.st b{font-size:14.5px}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.ba div{border-radius:14px;overflow:hidden;position:relative;height:120px}
.ba div>svg{width:100%;height:100%;display:block}
.ba .pill{position:absolute;top:8px;right:8px}
.stars{display:flex;gap:6px;justify-content:center;margin:10px 0 4px;color:#D5D8DE}
.stars .on{color:var(--gold)}
.stars svg{width:32px;height:32px}

/* file */
.folders{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.folder{background:var(--card);border-radius:20px;padding:15px;display:flex;flex-direction:column;gap:12px;text-align:start;box-shadow:var(--shadow)}
.folder b{font-size:15px}
.list .li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.list .li:last-child{border-bottom:0;padding-bottom:2px}
.list .li:first-child{padding-top:2px}
.li .grow{flex:1;min-width:0}
.li h4{font-size:14.5px;font-weight:700}

/* money */
.big{font-size:38px;font-weight:800;letter-spacing:-1px;color:var(--navy)}
.big small{font-size:15px;color:var(--muted);font-weight:700;letter-spacing:0}
.bars .bar{margin-top:13px}
.bars .track{height:8px;border-radius:5px;background:var(--greySoft);overflow:hidden;margin-top:7px;display:flex}
.bars .fill{height:100%;border-radius:5px;background:linear-gradient(270deg,var(--navy),var(--sky))}
.donut{width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--navy) 0 82%,var(--greySoft) 82% 100%);display:grid;place-items:center;flex:none}
.donut div{width:90px;height:90px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center}
.donut b{font-size:22px;display:block;line-height:1.1;color:var(--navy);font-weight:800}

/* votes */
.vote h4{font-size:17px;font-weight:800;margin:10px 0 6px;letter-spacing:-.2px}
.opt{margin-top:10px}
.opt .track{height:38px;border-radius:12px;background:var(--bg);position:relative;overflow:hidden}
.opt .fill{position:absolute;inset-block:0;inset-inline-start:0;background:var(--skySoft)}
.opt .lab{position:relative;display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 13px;font-size:13.5px;font-weight:700}

/* toggles */
.tg{width:51px;height:31px;border-radius:16px;background:#E3E5EA;position:relative;flex:none;transition:.2s}
.tg::after{content:"";position:absolute;top:2px;right:2px;width:27px;height:27px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 2px 5px rgba(0,0,0,.18)}
.tg.on{background:var(--sky)}
.tg.on::after{right:22px}
.tg.lock{opacity:.55}

/* sos */
.sos-top{background:linear-gradient(165deg,#E5483B,#B8231A);color:#fff;padding:20px 18px 24px;border-radius:0 0 30px 30px}
.sos-top h1{font-size:24px;font-weight:800;letter-spacing:-.3px}
.sos-top p{opacity:.88;font-size:13px;margin-top:5px}
.sos-top .iconbtn{background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.etypes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.et{background:var(--card);border-radius:18px;padding:14px 12px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;text-align:start;box-shadow:var(--shadow);border:1.5px solid transparent}
.et .chipic{background:var(--redSoft);color:var(--red)}
.et.on{border-color:var(--red)}
.count{text-align:center;padding:24px 10px}
.ring{width:150px;height:150px;border-radius:50%;margin:10px auto 16px;display:grid;place-items:center;background:conic-gradient(var(--red) var(--p,100%),rgba(217,45,32,.12) 0)}
.ring div{width:128px;height:128px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-size:52px;font-weight:800;color:var(--red)}
.call{display:flex;align-items:center;gap:14px;background:linear-gradient(160deg,#E5483B,var(--red));color:#fff;border-radius:22px;padding:18px;box-shadow:0 12px 28px rgba(217,45,32,.3)}
.call .chipic{width:54px;height:54px;border-radius:17px;background:rgba(255,255,255,.18);color:#fff}
.call b{font-size:28px;display:block;line-height:1.2;font-weight:800}
.call2{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:18px;padding:12px 14px;margin-top:10px;box-shadow:var(--shadow)}
.addr{background:var(--card);border-radius:20px;padding:15px;margin-top:12px;box-shadow:var(--shadow);border-inline-start:3px solid var(--gold)}
.addr p{font-size:15.5px;font-weight:700;line-height:1.85;margin:6px 0 12px}
.do{counter-reset:d}
.do li{list-style:none;counter-increment:d;display:flex;gap:10px;padding:8px 0;font-size:14.5px;line-height:1.7}
.do li::before{content:counter(d);width:24px;height:24px;border-radius:50%;background:var(--redSoft);color:var(--red);font-weight:800;font-size:12.5px;display:grid;place-items:center;flex:none;margin-top:2px}
.live{display:flex;align-items:center;gap:12px}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid rgba(217,45,32,.15);border-top-color:var(--red);animation:sp 1s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}

.toast{position:absolute;bottom:104px;left:18px;right:18px;background:rgba(34,40,49,.94);backdrop-filter:blur(10px);color:#fff;border-radius:16px;padding:13px 16px;font-size:13.5px;line-height:1.6;z-index:9;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:none}
.done{text-align:center;padding:34px 10px 10px}
.done .chipic{width:76px;height:76px;border-radius:24px;margin:0 auto 16px}
.done h2{font-size:24px;font-weight:800}
.mt{margin-top:12px}.mt2{margin-top:22px}
.demo{font-size:11px;color:var(--muted);text-align:center;margin-top:20px;line-height:1.7}

/* dark mode */
body.dark{--bg:#0B1220;--card:#141C2B;--line:rgba(255,255,255,.08);--ink:#E8ECF2;--ink2:#C2C9D4;--muted:#8B94A3;--greySoft:#1F2838;--skySoft:rgba(56,160,215,.16);--goldSoft:rgba(217,166,48,.16);--goldInk:#E9C26A;--greenSoft:rgba(52,199,120,.14);--green:#4CC38A;--redSoft:rgba(239,83,70,.16);--shadow:0 0 0 1px rgba(255,255,255,.04);background:#05080F}
body.dark .logo,body.dark .big,body.dark .stat b,body.dark .kpi b,body.dark .donut b{color:#fff}
body.dark .kpi.red b{color:#FF7A6E}body.dark .kpi.gold b{color:var(--goldInk)}
body.dark .chipic{color:#8CCDEE}body.dark .chipic.dark{background:#22324D;color:#fff}
body.dark .btn.ghost{color:#E8ECF2}
body.dark .tab.on{color:#fff}
body.dark .tabbar{background:rgba(20,28,43,.82);border-color:rgba(255,255,255,.06)}
body.dark .seg{background:#1F2838}body.dark .seg button.on{background:#2C3850;color:#fff}
body.dark .donut div{background:var(--card)}
body.dark .tg{background:#2C3850}body.dark .tg.on{background:var(--sky)}
body.dark .bsw{color:#fff}
body.dark .qa.main,body.dark .upcoming{box-shadow:none}
body.dark .photo{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12)}
body.dark .tbl tr:hover td{background:rgba(255,255,255,.03)}
body.dark .ch{color:var(--ink2)}
body.dark .bars .track,body.dark .prog,body.dark .sla .track{background:#1F2838}
.qa-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.qa-row .qa{flex-direction:row;justify-content:flex-start;padding:12px;gap:10px;text-align:start}
.qa-row .qa span.t{display:block;font-size:13.5px}.qa-row .qa small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.slot{padding:10px 12px;border-radius:12px;background:var(--card);box-shadow:var(--shadow);font-size:13px;font-weight:700;text-align:center}
.slot.on{background:var(--navy);color:#fff}.slot.off{opacity:.4;text-decoration:line-through;pointer-events:none}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.costbar{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--greySoft);margin-top:8px}
.costbar div{background:linear-gradient(270deg,var(--red),#F07A3F)}
.qrbox{width:96px;height:96px;border-radius:12px;background:#fff;padding:8px;flex:none;box-shadow:var(--shadow)}
.qrbox svg{width:100%;height:100%}
.ck{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.ck:last-child{border-bottom:0}
.ck .ok{width:24px;height:24px;border-radius:50%;background:var(--greenSoft);color:var(--green);display:grid;place-items:center;flex:none}
.ck .no{width:24px;height:24px;border-radius:50%;background:var(--redSoft);color:var(--red);display:grid;place-items:center;flex:none}
.stock-q{font-size:20px;font-weight:800;min-width:42px;text-align:center}

/* ---- manager ---- */

/* manager additions */
.bsw{display:inline-flex;align-items:center;gap:6px;background:var(--card);box-shadow:var(--shadow);border-radius:999px;padding:7px 12px 7px 10px;font-size:13px;font-weight:700;color:var(--navy);margin:2px 0 14px}
.bsw .ic{transform:rotate(90deg)}
.embar{display:flex;align-items:center;gap:12px;background:linear-gradient(160deg,#E5483B,var(--red));color:#fff;border-radius:20px;padding:14px;margin-bottom:12px;box-shadow:0 10px 24px rgba(217,45,32,.28);width:100%;text-align:start}
.embar .chipic{background:rgba(255,255,255,.18);color:#fff}
.embar b{display:block;font-size:15px}.embar span{font-size:12px;opacity:.9}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.kpi{background:var(--card);border-radius:20px;padding:14px;box-shadow:var(--shadow);text-align:start;display:flex;flex-direction:column;gap:6px}
.kpi b{font-size:30px;font-weight:800;letter-spacing:-.8px;color:var(--navy);line-height:1}
.kpi.red b{color:var(--red)}.kpi.gold b{color:var(--goldInk)}
.kpi span{font-size:12.5px;color:var(--muted);font-weight:700}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.fbar{display:flex;gap:8px;overflow-x:auto;margin:0 -18px 14px;padding:2px 18px 4px}
.fbar::-webkit-scrollbar{display:none}
.fbar .ch{white-space:nowrap;flex:none}
.sla{margin-top:10px}
.sla .track{height:5px;border-radius:3px;background:var(--greySoft);overflow:hidden;display:flex;margin-top:6px}
.sla .fill{height:100%;border-radius:3px;background:var(--sky)}
.sla.late .fill{background:var(--red)}.sla.warn .fill{background:var(--gold)}
.sla .between span{font-size:11.5px;font-weight:700}
.sla.late .between span:last-child{color:var(--red)}
.inp{width:100%;border-radius:14px;border:0;background:var(--card);padding:13px 15px;font:inherit;font-size:14.5px;color:var(--ink);box-shadow:var(--shadow)}
.inp:focus{outline:2px solid rgba(0,119,182,.35)}
.lvls{display:flex;gap:6px;margin-top:10px}
.lvls div{flex:1;border-radius:12px;background:var(--bg);padding:9px 8px;font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center}
.lvls div.on{background:var(--skySoft);color:var(--navy);font-weight:700;box-shadow:inset 0 0 0 1.5px rgba(0,39,84,.25)}
.tpls{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.tpl{background:var(--card);border-radius:18px;padding:13px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;font-weight:700;box-shadow:var(--shadow);border:1.5px solid transparent;text-align:center}
.tpl.on{border-color:var(--navy)}
.preview{background:var(--card);border-radius:18px;padding:14px;box-shadow:var(--shadow);border-inline-start:3px solid var(--navy);font-size:14px;line-height:1.8}
.sheet-bg{position:absolute;inset:0;background:rgba(0,15,35,.35);z-index:20;display:flex;align-items:flex-end}
.sheet{background:var(--bg);width:100%;border-radius:26px 26px 0 0;padding:10px 18px 30px}
.sheet .grab{width:38px;height:5px;border-radius:3px;background:#C9CDD4;margin:0 auto 14px}
.two{display:flex;gap:10px}.two .btn{margin-top:0!important}
.btn.no{background:var(--redSoft);color:var(--red)}
.btn.sm{padding:11px;font-size:13.5px;border-radius:13px}
.who{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:14px;padding:10px 12px;margin-top:10px}
.prog{height:8px;border-radius:5px;background:var(--greySoft);overflow:hidden;display:flex;margin-top:8px}
.prog div{background:var(--navy);border-radius:5px}
.tab .cnt{position:absolute;top:-2px;left:-2px;min-width:18px;height:18px;border-radius:9px;background:#fff;color:var(--red);font-size:10.5px;font-weight:800;display:grid;place-items:center;padding:0 4px}
.tab.sos{position:relative}
.fieldrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.fieldrow:last-child{border-bottom:0}
.fieldrow span:first-child{color:var(--muted);font-size:13px}
.fieldrow b{font-weight:700;text-align:end}

/* ---- staff ---- */
.langbtn{display:flex;align-items:center;gap:5px;height:38px;padding:0 12px;border-radius:19px;background:var(--card);box-shadow:var(--shadow);font-weight:800;font-size:13px;color:var(--navy)}
.bigt{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{position:relative;background:var(--card);border-radius:22px;padding:16px;box-shadow:var(--shadow);min-height:124px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;text-align:start}
.tile .chipic{width:48px;height:48px;border-radius:15px;margin-bottom:auto}
.tile b{font-size:17px;line-height:1.35}.tile span:not(.chipic){font-size:13px;color:var(--muted)}
.tile i{position:absolute;top:14px;inset-inline-end:14px;font-style:normal;background:var(--red);color:#fff;font-weight:800;font-size:14px;min-width:28px;height:28px;border-radius:14px;display:grid;place-items:center}
.tile.wide{grid-column:1/-1;min-height:84px;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;background:var(--navy);color:#fff}
.tile.wide .chipic{margin:0;background:rgba(255,255,255,.14);color:#fff}.tile.wide span:not(.chipic){color:rgba(255,255,255,.75);display:block}
.tile.wide.plain{background:var(--card);color:inherit}.tile.wide.plain .chipic{background:var(--redSoft);color:var(--red)}
.tcard{width:100%;display:block;text-align:start;background:var(--card);border-radius:20px;padding:16px;box-shadow:var(--shadow);margin-bottom:12px}
.tcard h3{font-size:17px;margin:10px 0 6px;line-height:1.5}
.btn.big{padding:19px;font-size:17px;border-radius:18px;margin-top:12px}
.btn.okb{background:var(--greenSoft);color:var(--green)}
.mic{width:100%;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;padding:22px;border-radius:22px;background:var(--card);box-shadow:var(--shadow);font-weight:800;font-size:16px;color:var(--navy)}
.voice{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--bg)}
.wave{flex:1;display:flex;align-items:center;gap:3px;height:24px}.wave i{flex:1;background:var(--sky);border-radius:2px;opacity:.7}
.rk{padding:13px 0;border-top:1px solid var(--line)}.rk:first-of-type{border-top:0}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pgrid button{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:14px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:700;font-size:14px;border:2px solid transparent}
.pgrid button.on{border-color:var(--sky);color:var(--sky)}
.ins{display:flex;align-items:center;gap:12px;padding:10px 0}.ins b{font-size:15px;line-height:1.5}
.gcard{padding:0;overflow:hidden}.gimg{height:150px}.gimg svg{width:100%;height:100%;display:block}
[dir=ltr],[dir=ltr] *{letter-spacing:normal!important}[dir=ltr] .subtop .iconbtn svg,[dir=ltr] .embar>svg{transform:scaleX(-1)}

/* ---- bluefort ---- */
.bgrid{display:grid;gap:12px}
.bcard{width:100%;display:block;text-align:start;background:var(--card);border-radius:20px;padding:16px;box-shadow:var(--shadow);border-inline-start:5px solid var(--green)}
.bcard.amber,.bhead.amber{border-inline-start-color:var(--gold)}.bcard.red,.bhead.red{border-inline-start-color:var(--red)}
.bhead{border-inline-start:5px solid var(--green)}
.bcard h3{font-size:16px}
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.mini div{background:var(--bg);border-radius:12px;padding:8px 4px;text-align:center}
.mini b{display:block;font-size:17px}.mini span{font-size:10.5px;color:var(--muted)}
.mini .r b{color:var(--red)}.mini .a b{color:var(--goldInk)}
.slarow{display:grid;grid-template-columns:62px 1fr 1fr;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.slarow:first-child{border-top:0}.slarow div{display:flex;flex-direction:column;gap:4px}.slarow .inp{padding:9px 10px}
.bhead .btn{text-decoration:none}
.stepbar{background:var(--card);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:12px}
.stepbar b{font-size:15.5px}
.dots{display:flex;gap:5px;margin-top:10px}.dots button{flex:1;height:6px;border-radius:3px;background:var(--greySoft)}.dots button.d{background:var(--green)}.dots button.c{background:var(--navy)}
body.dark .dots button.c{background:var(--sky)}
.steplist{display:none}
.stepr{display:flex;align-items:center;gap:4px;background:var(--bg);border-radius:14px;padding:4px}
.stepr button{width:36px;height:36px;border-radius:11px;background:var(--card);font-size:20px;font-weight:800;color:var(--navy);box-shadow:var(--shadow)}
.stepr b{min-width:34px;text-align:center;font-size:17px}.stepr.sm button{width:30px;height:30px;font-size:17px}.stepr.sm b{min-width:26px;font-size:15px}
.flrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}.flrow:first-child{border-top:0}.flrow>span{width:52px;flex:none}.flrow .chips{margin:0}
.ownrow{display:grid!important;grid-template-columns:34px 1fr 1fr;gap:8px;align-items:center}.ownrow .inp{padding:9px 10px;font-size:13.5px;min-width:0}.ownrow .pill{grid-column:2/-1;justify-self:start}
.mapbox{width:100%;height:110px;border-radius:16px;background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 10px,var(--card) 10px,var(--card) 20px);border:1.5px dashed var(--greySoft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-weight:700;font-size:13px}
.qrgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.qrmini{background:var(--card);border-radius:16px;padding:10px;box-shadow:var(--shadow);text-align:center}.qrmini b{display:block;font-size:12.5px;margin-top:6px}.qrmini span{font-size:10px;color:var(--muted)}
.qrmini .qrbox{box-shadow:none;padding:4px}
@media (max-width:500px){.qrgrid{grid-template-columns:repeat(2,1fr)}}
.linkbox{background:var(--bg);border-radius:12px;padding:12px 14px;font-weight:700;font-size:14px;text-align:left;word-break:break-all}

/* ---- public ---- */
.langbtn{display:flex;align-items:center;gap:5px;height:38px;padding:0 12px;border-radius:19px;background:var(--card);box-shadow:var(--shadow);font-weight:800;font-size:13px;color:var(--navy)}
.top .iconbtn+.logo{margin-inline-start:4px}
.place{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:18px;padding:12px 14px;box-shadow:var(--shadow)}
.place b{display:block;font-size:15px}.place span:not(.chipic){font-size:13px;color:var(--muted)}
.morenums{display:block;width:100%;text-align:center;margin-top:10px;font-size:13px;font-weight:700;color:var(--red)}
.demobar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:18px;padding:10px;border:1.5px dashed var(--greySoft);border-radius:16px}
.demobar span{font-size:12px;color:var(--muted);font-weight:700}.demobar .ch{font-size:12px;padding:6px 10px}
.appad{display:flex;gap:12px;align-items:flex-start}
[dir=ltr],[dir=ltr] *{letter-spacing:normal!important}[dir=ltr] .top .iconbtn svg{transform:scaleX(-1)}
.stk{background:#fff;color:#1E2530;border-radius:24px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.14);max-width:330px;margin:0 auto;border:1px solid #E3E6EA}
.stk-h{background:#002754;color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.stk-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px}.stk-logo b{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#D9A630}
.stk-loc{text-align:end}.stk-loc b{display:block;font-size:13.5px}.stk-loc span{font-size:11px;opacity:.75}
.stk-qr{width:190px;height:190px;margin:22px auto 10px;padding:10px;background:#fff;border-radius:16px;border:3px solid #D9A630}.stk-qr svg{width:100%;height:100%}
.stk-t{text-align:center;padding:0 18px 16px}.stk-t b{display:block;font-size:15px;line-height:1.6}.stk-t span{display:block;font-size:12px;color:#5F6B7A;margin-top:4px}
.stk-em{background:#D92D20;color:#fff;padding:12px 14px;text-align:center}
.stk-em-t{font-weight:800;font-size:13px;margin-bottom:8px}
.stk-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}.stk-nums div{background:rgba(255,255,255,.14);border-radius:10px;padding:6px 2px}
.stk-nums b{display:block;font-size:20px}.stk-nums span{font-size:10px;line-height:1.35;display:block;opacity:.92}
.stk-em p{font-size:11px;opacity:.9;margin:0}

.btn.big{padding:18px;font-size:16.5px;border-radius:18px;margin-top:10px}
.btn.okb{background:var(--greenSoft);color:var(--green)}
.phs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ph{aspect-ratio:1;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}.ph svg{width:100%;height:100%;display:block}
.ph.add{background:var(--card);border:1.5px dashed var(--greySoft);box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:12px;font-weight:700}

.mbars{display:flex;align-items:flex-end;gap:10px;height:96px;margin:14px 0 6px}.mbars>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}.mbars>div>div{width:100%;border-radius:8px 8px 3px 3px}

/* ---- desktop ---- */

/* desktop */
body.desk{display:block!important;padding:0!important;background:var(--bg)}
.app.desk{max-width:none!important;width:100%!important;height:100vh!important;border-radius:0!important;box-shadow:none!important;flex-direction:row}
.side{width:250px;background:linear-gradient(180deg,#00264F,#00183A);color:#fff;display:flex;flex-direction:column;padding:22px 14px 16px;gap:3px;flex:none}
.side .logo{color:#fff;margin:0 8px 20px}
.side .logo b{background:rgba(255,255,255,.1)}
.bsw2{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 12px;margin-bottom:6px;color:#fff;text-align:start;width:100%}
.bsw2 small{display:block;font-size:11px;color:rgba(255,255,255,.55)}
.bsw2 b{font-size:13.5px}
.bmenu{background:rgba(255,255,255,.06);border-radius:12px;padding:4px;margin-bottom:10px}
.bmenu button{display:flex;justify-content:space-between;width:100%;padding:9px 10px;border-radius:9px;font-size:13px;color:rgba(255,255,255,.8);font-weight:700}
.bmenu button.on{background:rgba(255,255,255,.1);color:#fff}
.navsec{font-size:11px;color:rgba(255,255,255,.4);font-weight:700;margin:14px 12px 4px}
.nav{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:rgba(255,255,255,.7);font-weight:700;font-size:14px;width:100%;text-align:start;position:relative}
.nav:hover{background:rgba(255,255,255,.05)}
.nav.on{background:rgba(255,255,255,.11);color:#fff}
.nav.on .ic{color:var(--gold)}
.nav .n{margin-inline-start:auto;min-width:20px;height:20px;border-radius:10px;background:rgba(255,255,255,.12);font-size:11px;display:grid;place-items:center;padding:0 6px}
.nav .n.red{background:var(--red);color:#fff}
.side .sp{flex:1}
.me{display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid rgba(255,255,255,.08);margin-top:10px}
.me .avatar{background:var(--gold);color:var(--navy)}
.me b{font-size:13.5px;display:block}.me span{font-size:11.5px;color:rgba(255,255,255,.55)}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;padding:22px 34px 14px}
.topbar h1{font-size:28px;font-weight:800;flex:1;letter-spacing:-.5px}
.search{width:300px;display:flex;align-items:center;gap:8px;background:var(--card);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow);color:var(--muted);font-size:13.5px}
.topbar .btn{width:auto;padding:11px 18px;font-size:14px}
.content{flex:1;overflow:auto;padding:4px 34px 40px}
.wrap{max-width:820px}
.grid2{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start}
.kpis.k4{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpis.k4 .kpi{padding:18px}
.md{display:grid;grid-template-columns:420px 1fr;gap:22px;align-items:start}
.md .col{min-width:0}
.md .col.list-col{max-height:calc(100vh - 120px);overflow:auto;padding:2px 4px 30px;margin:-2px -4px}
.md .col.det{position:sticky;top:0}
.tk.sel{box-shadow:0 0 0 2px var(--navy),var(--shadow)}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-size:12px;color:var(--muted);font-weight:700;text-align:start;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 12px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:#FAFBFC}
.card.flush{padding:6px 8px}
.desk #raw{display:block!important}
.desk #raw .sos-top{border-radius:24px;margin-bottom:16px}
.desk #raw .scroll{overflow:visible;padding:0!important}
.desk .toast{position:fixed;left:24px;right:auto;bottom:24px;width:380px}
.desk .demo{text-align:start}
.emptyd{display:grid;place-items:center;height:300px;color:var(--muted);background:var(--card);border-radius:20px;box-shadow:var(--shadow)}
@media (max-width:1150px){
  .grid2,.md{grid-template-columns:1fr!important}
  .md .col.list-col{max-height:none;overflow:visible}
  .kpis.k4{grid-template-columns:repeat(2,1fr)}
  .search{display:none}
  .topbar,.content{padding-left:20px;padding-right:20px}
}
@media (max-width:760px){.side{width:76px;padding:18px 8px}.side .logo{font-size:0;justify-content:center;margin:0 0 16px}.bsw2 div,.bsw2>svg,.navsec,.me div,.nav .n{display:none}.nav{justify-content:center;font-size:0;gap:0}.bsw2{justify-content:center}}

/* ---- system shell ---- */
#main{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
.app.desk #main{height:100vh}
.app.desk #view{flex:1;overflow:auto;padding:4px 34px 40px}
.app.desk .wrap{max-width:860px}.app.desk .wrap.wide{max-width:none}
.app.desk .topbar .iconbtn{flex:none}
.side{display:none}.app.desk .side{display:flex}
.login{padding:10px 2px 30px}
.lg-brand{text-align:center;padding:26px 0 18px}.lg-brand .logo{justify-content:center}
#demoBtn{position:fixed;bottom:calc(100px + env(safe-area-inset-bottom));left:18px;z-index:60;background:#002754;color:#fff;font-weight:800;font-size:13px;border-radius:22px;padding:11px 16px;box-shadow:0 8px 22px rgba(0,20,45,.3);display:flex;align-items:center;gap:6px}
#demoSheet .sheet-bg{position:fixed;z-index:70}
#demoSheet .sheet{max-width:520px;margin:0 auto}
.desk #demoBtn{bottom:24px;left:24px;right:auto}
.desk .toast{bottom:80px!important}
.app:not(.desk) .toast{bottom:156px}
.side .me{cursor:pointer}