/* اشتراكي — shared styles (new look: teal band + sun yellow) */
:root{
  --ink:#0B1824; --deep:#08303A; --teal:#0B8F9C; --teal2:#2BB8C4; --sun:#FFC93C; --sun2:#FFB000;
  --canvas:#F2F5F7; --surface:#FFFFFF; --line:#E3E8ED; --muted:#6B7A8A; --text:#14212E;
  --accent:#0B8F9C; --accent-soft:#E2F3F4;
  --good:#1E9E5A; --good-soft:#E3F5EB; --warn:#C98A0B; --warn-soft:#FBF1DC; --bad:#D14343; --bad-soft:#FBE5E5;
  --display:"Readex Pro","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --body:"IBM Plex Sans Arabic","Readex Pro",Tahoma,sans-serif;
  --big:"Big Shoulders Display","Readex Pro",sans-serif;
  --radius:22px; color-scheme:light;
}
:root[data-theme="dark"]{
  --canvas:#0B141E; --surface:#13202E; --line:#21324A; --muted:#8FA0B2; --text:#E6EDF3;
  --accent:#2BB8C4; --accent-soft:#12343A; --good:#3CC47C; --good-soft:#123323; --warn:#E3A93A; --warn-soft:#3A2D10;
  --bad:#EF6B6B; --bad-soft:#3D1A1A; color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#0B141E; --surface:#13202E; --line:#21324A; --muted:#8FA0B2; --text:#E6EDF3;
    --accent:#2BB8C4; --accent-soft:#12343A; --good:#3CC47C; --good-soft:#123323; --warn:#E3A93A; --warn-soft:#3A2D10;
    --bad:#EF6B6B; --bad-soft:#3D1A1A; color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--canvas);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.6;transition:background .3s,color .3s}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
[hidden]{display:none!important}

/* ---------- top band (hero header on every page) ---------- */
.band{position:relative;color:#fff;overflow:hidden;padding:12px 14px 24px;border-radius:0 0 34px 34px;
  background:radial-gradient(90% 80% at 10% 120%,#FFC93C40 0%,transparent 55%),linear-gradient(165deg,var(--deep) 0%,#086A76 50%,var(--teal) 85%,#16A6B2 100%)}
.band .wm{position:absolute;bottom:-14px;inset-inline:0;text-align:center;font-family:var(--big);font-weight:800;font-size:clamp(90px,17vw,180px);line-height:1;
  color:transparent;-webkit-text-stroke:1.2px #ffffff1f;direction:ltr;white-space:nowrap;pointer-events:none;user-select:none}
.top{position:relative;z-index:3;display:flex;align-items:center;gap:10px;padding:6px 7px 6px 12px;border-radius:999px;max-width:1100px;margin:0 auto;
  background:#ffffff1c;border:1px solid #ffffff2e;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff}
.top .mark{width:34px;height:34px;border-radius:11px;background:#fff;display:grid;place-items:center;flex:none;overflow:hidden}
.top .mark svg{stroke:var(--teal)}
.top .mark svg circle{fill:var(--teal)}
.top b{font-family:var(--display);font-size:15.5px;display:block;line-height:1.25}
.top small{color:#ffffffbb;font-size:11.5px;display:block;line-height:1.2}
.top .end{margin-inline-start:auto}
.ib{width:34px;height:34px;border-radius:50%;border:1px solid #ffffff40;background:#ffffff14;color:#fff;display:grid;place-items:center;flex:none;padding:0}
.ib svg{width:16px;height:16px}
.linkbtn{background:#fff;border:0;color:var(--ink);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;font-family:var(--display);white-space:nowrap}
a.linkbtn{text-decoration:none}
.band-body{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:18px 6px 0}
.band .hello h1{font-size:clamp(24px,6.4vw,32px);font-weight:700;color:#fff}
.band .hello h1 em,.band h1 em{font-style:normal;color:var(--sun)}
.band .hello p{margin:2px 0 0;color:#ffffffcc;font-size:14px}
.band.tall{padding-bottom:36px}

/* ---------- page + cards ---------- */
.page{max-width:820px;margin:0 auto;padding:16px 14px 60px;display:flex;flex-direction:column;gap:12px}
.narrow{max-width:460px}
.hello h1{font-size:24px}
.hello p{margin:2px 0 0;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;position:relative;overflow:hidden}
.card h2{font-size:17px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h2 .end{margin-inline-start:auto}
.muted{color:var(--muted);font-size:13.5px}
.center{text-align:center}
/* coloured strip on the side of a card */
.strip{padding-inline-end:58px}
.strip::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:42px;background:var(--c,var(--teal))}
.strip .si{position:absolute;inset-inline-end:7px;top:16px;width:28px;height:28px;border-radius:9px;background:#ffffffd9;display:grid;place-items:center;z-index:1;font-size:14px}
.c-sun{--c:var(--sun)} .c-teal{--c:var(--teal)} .c-ink{--c:var(--ink)} .c-bad{--c:var(--bad)} .c-good{--c:var(--good)} .c-warn{--c:var(--warn)} .c-sky{--c:var(--teal2)} .c-orange{--c:#FF7A45}

form.stack{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field>span{font-size:13px;color:var(--muted)}
.in{background:var(--canvas);border:1px solid var(--line);border-radius:14px;padding:12px 14px;width:100%}
.in.ltr{direction:ltr;text-align:left}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.row2{grid-template-columns:1fr}}

.btn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:10px 16px;font-family:var(--display);font-weight:600;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--text);transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--ink);border-color:var(--ink);color:#fff}
:root[data-theme="dark"] .btn.pri{background:var(--sun);border-color:var(--sun);color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.pri{background:var(--sun);border-color:var(--sun);color:var(--ink)}}
.btn.sun{background:var(--sun);border-color:var(--sun);color:var(--ink);box-shadow:0 8px 22px #FFB00040}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.btn.small{padding:6px 12px;font-size:12.5px}
.btn:disabled{opacity:.55;cursor:default}
.btn.wide{width:100%}
a.btn{text-decoration:none}

.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.g{background:var(--good-soft);color:var(--good)} .w{background:var(--warn-soft);color:var(--warn)}
.b{background:var(--bad-soft);color:var(--bad)} .n{background:var(--accent-soft);color:var(--accent)}
.m{background:color-mix(in srgb,var(--muted) 15%,transparent);color:var(--muted)}
.y{background:var(--sun);color:var(--ink)}

.list{display:flex;flex-direction:column}
.item{display:flex;align-items:center;gap:12px;padding:12px 2px;border-top:1px solid var(--line);flex-wrap:wrap}
.item:first-child{border-top:0}
.item .grow{flex:1;min-width:160px}
.item b{display:block;font-family:var(--display)}
.empty{color:var(--muted);text-align:center;padding:18px 0}

.err{color:var(--bad);font-size:13.5px;min-height:1.2em;margin:0}
.ok-box{background:var(--good-soft);color:var(--text);border-radius:16px;padding:12px 14px}
.code-box{background:var(--canvas);border:1px dashed var(--line);border-radius:14px;padding:12px;font-family:ui-monospace,Consolas,monospace;direction:ltr;text-align:center;font-size:17px;letter-spacing:2px;word-break:break-all}
.steps{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px}
.lock{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);border-radius:14px;padding:10px 12px;font-size:13.5px}
.stat{display:flex;gap:18px;flex-wrap:wrap}
.stat div span{display:block;font-size:12.5px;color:var(--muted)}
.stat div strong{font-family:var(--big);font-weight:800;font-size:34px;line-height:1}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.otp-big{font-family:var(--big);font-weight:800;font-size:30px;letter-spacing:4px;direction:ltr}
.err-box{background:var(--bad-soft);border-radius:14px;padding:10px 12px;font-size:13.5px;margin-bottom:10px}

/* QR / subscriber link (dark band card) */
.qr-wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.qr{width:150px;height:150px;background:#fff;border-radius:18px;padding:9px;flex:none;box-shadow:0 0 0 4px var(--sun)}
.qr svg{width:100%;height:100%;display:block}
.small-code{font-size:13px;letter-spacing:0;margin-bottom:8px}
.card.dark-card{background:var(--ink);border-color:var(--ink);color:#fff}
.card.dark-card .muted{color:#ffffffaa}
.card.dark-card .code-box{background:#ffffff10;border-color:#ffffff30;color:var(--sun)}
.card.dark-card .btn{background:transparent;color:#fff;border-color:#ffffff40}
.card.dark-card .btn.sun{background:var(--sun);color:var(--ink);border-color:var(--sun)}

/* ---------- subscriber gauge (inside the band) ---------- */
.gwrap{position:relative;display:grid;place-items:center;margin:10px auto 0;width:min(84vw,320px)}
.gwrap .sunb{position:absolute;width:74%;aspect-ratio:1;border-radius:50%;top:-4%;background:radial-gradient(circle at 38% 30%,#FFE58A,var(--sun) 45%,var(--sun2));box-shadow:0 20px 60px #FFB00050;animation:pop .9s cubic-bezier(.3,1.4,.5,1) both}
.gwrap .ringd{position:absolute;width:94%;aspect-ratio:1;top:-14%;border-radius:50%;border:1px dashed #ffffff30;animation:spin 50s linear infinite}
@keyframes pop{from{transform:scale(.5);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.gcard{position:relative;margin-top:32%;width:94%;background:var(--surface);color:var(--text);border-radius:26px;padding:12px 12px 12px;box-shadow:0 18px 40px #00000030;display:flex;flex-direction:column;align-items:center;gap:6px}
.gcard .ghead{display:flex;width:100%;align-items:center;font-family:var(--display);font-size:13.5px;font-weight:600}
.gcard .ghead .end{margin-inline-start:auto}
.ring{position:relative;width:230px;height:132px}
.ring svg{width:100%;height:100%;overflow:visible}
.ring .read{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;align-items:center}
.ring .read strong{font-family:var(--big);font-weight:800;font-size:46px;line-height:.95}
.ring .read span{font-size:12px;color:var(--muted)}
.legend{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;font-size:11px}
.legend .pill{font-size:11px;padding:2px 8px}
.center-row{justify-content:center;align-items:center}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-family:var(--body);font-weight:500}
.live i{width:8px;height:8px;border-radius:50%;background:var(--good);animation:pulse 1.6s infinite}
.live.off i{background:var(--muted);animation:none}
@keyframes pulse{50%{opacity:.35}}

/* quick actions */
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.qa>*{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:12px 4px;display:grid;justify-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--text);text-decoration:none;font-family:var(--display)}
.qa>* span{width:40px;height:40px;border-radius:13px;background:var(--canvas);display:grid;place-items:center;font-size:18px}
.qa>*:first-child span{background:var(--sun)}

/* fault finder chain */
.chain{display:flex;justify-content:space-between;position:relative;margin:6px 0 14px}
.chain::before{content:"";position:absolute;top:22px;left:12%;right:12%;height:4px;background:var(--line);border-radius:4px}
.node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;width:25%;font-size:12px;text-align:center;font-weight:600}
.node .ic{width:46px;height:46px;border-radius:15px;background:var(--canvas);border:2px solid var(--line);display:grid;place-items:center;position:relative}
.node .ic svg{width:22px;height:22px}
.node .mk{position:absolute;top:-7px;inset-inline-end:-7px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700}
.node.sg .ic{border-color:var(--good);background:var(--good-soft);color:var(--good)} .node.sg .mk{background:var(--good)}
.node.sw .ic{border-color:var(--warn);background:var(--warn-soft);color:var(--warn)} .node.sw .mk{background:var(--warn)}
.node.sb .ic{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)} .node.sb .mk{background:var(--bad)}
.verdict{border-radius:16px;padding:10px 12px;font-size:14px}
.verdict b{display:block;font-size:15px;font-family:var(--display)}
.verdict.vg{background:var(--good-soft)} .verdict.vw{background:var(--warn-soft)} .verdict.vb{background:var(--bad-soft)} .verdict.vm{background:var(--canvas)}

/* days-left ring */
.days{display:flex;align-items:center;gap:14px}
.ringp{width:78px;height:78px;flex:none}
.ringp .t{font-family:var(--big);font-weight:800;font-size:27px;fill:var(--text)}
.ringp .trk{stroke:var(--line)} .ringp .val{stroke:var(--sun);transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1)}
.ringp.lowp .val{stroke:var(--bad)}

/* tabs, tickets */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tab{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;font-family:var(--display)}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tickets{display:flex;flex-direction:column;gap:10px}
.tk{border:1px solid var(--line);border-radius:20px;padding:14px 58px 14px 14px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;background:var(--surface)}
[dir="rtl"] .tk{padding:14px 14px 14px 58px}
.tk::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:42px;background:var(--c,var(--line))}
.tk.k0{--c:var(--bad)} .tk.k1{--c:var(--accent)} .tk.k2{--c:var(--warn)} .tk.k3{--c:var(--good)} .tk.k4{--c:var(--muted)}
.tk-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tk-top b{font-size:15.5px;font-family:var(--display)}
.tk-top .end{margin-inline-start:auto}
.tk-name{font-weight:700;font-family:var(--display)}
.tk p{margin:0;font-size:13.5px;color:var(--muted)}
.facts{display:flex;gap:6px;flex-wrap:wrap}
select.in{padding:9px 12px;border-radius:999px}
.steps-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.steps-bar span{height:6px;border-radius:6px;background:var(--line)}
.steps-bar span.on{background:var(--c,var(--accent))}
.track{display:flex;flex-direction:column}
.st{display:flex;gap:12px;align-items:flex-start;position:relative;padding-bottom:16px}
.st:last-child{padding-bottom:0}
.st::before{content:"";position:absolute;inset-inline-start:13px;top:28px;bottom:0;width:2px;background:var(--line)}
.st:last-child::before{display:none}
.st.done::before{background:var(--good)}
.dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--surface);flex:none;display:grid;place-items:center;font-size:12px;color:#fff;font-weight:700}
.st.done .dot{background:var(--good);border-color:var(--good)}
.st.now .dot{background:var(--sun);border-color:var(--sun);box-shadow:0 0 0 6px #FFC93C33;animation:glow 1.6s infinite}
@keyframes glow{50%{box-shadow:0 0 0 10px #FFC93C11}}
.st b{display:block;font-size:14.5px;font-family:var(--display)}
.st small{color:var(--muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 13px;font-size:13px;font-weight:600}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.stars{display:flex;gap:4px;direction:ltr;justify-content:center}
.star{border:0;background:none;font-size:34px;line-height:1;color:var(--line);padding:2px;transition:transform .15s}
.star.on{color:var(--sun)} .star:active{transform:scale(1.3)}
.mark img,.logo-prev img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.mark{overflow:hidden}
.logo-pick{display:flex;gap:14px;align-items:center;margin-bottom:8px}
.logo-prev{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#0B8F9C,#2BB8C4);display:grid;place-items:center;overflow:hidden;flex:none}
.ann{padding:14px 58px 14px 14px;border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;margin-top:10px;background:var(--surface)}
[dir="rtl"] .ann{padding:14px 14px 14px 58px}
.ann::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:42px;background:var(--c,var(--teal))}
.ann.t-cut{--c:var(--bad)} .ann.t-maint{--c:var(--sun)} .ann.t-offer{--c:var(--good)} .ann.t-general{--c:var(--teal)}
.ann-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ann-top .end{margin-inline-start:auto}
.ann p{margin:0}
.ann.new{box-shadow:0 0 0 2px var(--sun)}

/* ---------- agent / owner layout: floating pill nav ---------- */
.layout{display:grid;grid-template-columns:96px 1fr;gap:0;max-width:1180px;margin:0 auto}
.side{padding:16px 0 16px 0;display:flex;justify-content:center}
.nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:14px;align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:6px;box-shadow:0 14px 40px #0B182418}
.nav button{border:0;background:transparent;border-radius:22px;padding:9px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--muted);width:72px;position:relative;font-family:var(--display)}
.nav button:hover{color:var(--text)}
.nav button.on{background:var(--ink);color:#fff}
.nav button.on svg{color:var(--sun)}
.nav svg{width:21px;height:21px;flex:none}
.badge{position:absolute;top:3px;inset-inline-end:10px;background:var(--bad);color:#fff;border-radius:999px;font-size:10px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px;font-weight:700}
.layout .page{max-width:900px;width:100%}
@media (max-width:760px){
  .layout{display:block}
  .side{position:fixed;bottom:12px;left:0;right:0;z-index:20;padding:0;pointer-events:none}
  .nav{flex-direction:row;position:static;pointer-events:auto;max-width:calc(100% - 20px);overflow-x:auto;scrollbar-width:none;border-radius:999px;padding:5px}
  .nav::-webkit-scrollbar{display:none}
  .nav button{width:auto;min-width:56px;padding:8px 10px;border-radius:999px}
  .layout .page{padding-bottom:110px}
}

/* KPIs: glass tiles inside the band */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:16px}
@media(min-width:760px){.kpis{grid-template-columns:repeat(5,1fr)}}
.kpi{background:#ffffff16;border:1px solid #ffffff26;border-radius:18px;padding:10px 12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:start;color:#fff;display:flex;flex-direction:column-reverse;gap:2px}
.kpi strong{font-family:var(--big);font-weight:800;font-size:40px;line-height:1;color:var(--sun)}
.kpi span{font-size:12px;opacity:.9}
.kpi.k-bad{background:var(--sun);border-color:var(--sun);color:var(--ink)} .kpi.k-bad strong{color:var(--ink)}
@media(max-width:759px){.kpi.k-bad{grid-column:span 2}}
.card .kpis .kpi{background:var(--canvas);border-color:var(--line);color:var(--text)} .card .kpis .kpi strong{color:var(--text)}

/* subscriber floating tab bar */
body.has-tabs .page{padding-bottom:110px}
.tabbar{position:fixed;bottom:12px;left:0;right:0;display:flex;justify-content:center;z-index:20;pointer-events:none}
.tabbar .in{pointer-events:auto;display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px;box-shadow:0 14px 40px #0B182430;width:auto;max-width:calc(100% - 20px)}
.tabbar button{border:0;background:transparent;border-radius:999px;padding:8px 10px;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10.5px;font-weight:600;color:var(--muted);min-width:58px;position:relative;font-family:var(--display)}
.tabbar button.on{background:var(--ink);color:#fff}
.tabbar button.on svg{color:var(--sun)}
.tabbar svg{width:21px;height:21px}
.bdg{position:absolute;top:2px;inset-inline-end:8px;background:var(--bad);color:#fff;border-radius:999px;font-size:9.5px;min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat-card span{display:block;font-size:12.5px;color:var(--muted)}
.stat-card strong{font-family:var(--display);font-size:20px;font-weight:700;display:block}
.bar{height:7px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;background:var(--sun);border-radius:4px;width:0}
.temp{background:var(--canvas);border-radius:16px;padding:10px 12px}
.temp span{font-size:12px;color:var(--muted);display:block}
.temp strong{font-family:var(--big);font-weight:800;font-size:24px;color:var(--muted)}
.soon{border:1px dashed var(--line);border-radius:16px;padding:10px 12px;font-size:13px;color:var(--muted);margin:10px 0 0}
.row-card{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* speed test: yellow sun dial */
.speed{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.speed h2{width:100%}
.speedo{position:relative;width:min(76vw,300px);aspect-ratio:1;display:grid;place-items:center}
.speedo .sunb{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 38% 30%,#FFE58A,var(--sun) 45%,var(--sun2));box-shadow:0 20px 60px #FFB00050}
.speedo svg{position:absolute;inset:0;width:100%;height:100%}
.speedo .sarc{transition:stroke-dashoffset .25s}
.speedo .inner{position:relative;text-align:center;color:var(--ink)}
.big{font-family:var(--big);font-weight:800;font-size:72px;line-height:.9;color:var(--ink)}
.big small{font-family:var(--body);font-size:15px;font-weight:600;display:block;margin-top:4px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.trio div{background:var(--canvas);border-radius:18px;padding:10px 6px}
.trio span{display:block;font-size:12px;color:var(--muted)}
.trio strong{font-family:var(--big);font-weight:800;font-size:26px}
.go{border:0;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:16px;padding:13px 30px}
.go:disabled{opacity:.6}

.seg{display:flex;background:var(--canvas);border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:none;border-radius:999px;padding:8px;font-size:13.5px;color:var(--muted);font-weight:600}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:0 2px 8px #0001}

/* join page */
.hero-join h1{font-size:clamp(24px,6.6vw,34px);line-height:1.3;color:#fff}
.hero-join h1 em{font-style:normal;color:var(--sun)}
.hero-join p{color:#ffffffcc;margin:6px 0 0}
.features{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.features li{display:flex;flex-direction:column;padding:12px 58px 12px 14px;border:1px solid var(--line);border-radius:18px;position:relative;overflow:hidden}
[dir="rtl"] .features li{padding:12px 14px 12px 58px}
.features li::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:42px;background:var(--c,var(--teal))}
.features li:nth-child(6n+1){--c:var(--sun)} .features li:nth-child(6n+2){--c:var(--teal)} .features li:nth-child(6n+3){--c:var(--ink)}
.features li:nth-child(6n+4){--c:#FF7A45} .features li:nth-child(6n+5){--c:var(--teal2)} .features li:nth-child(6n+6){--c:var(--good)}
.features li b{font-family:var(--display)}
.features li span{color:var(--muted);font-size:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.check input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--teal)}
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0;pointer-events:none}

/* login choice */
.choose{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:-30px;position:relative;z-index:3}
.choice{border:2px solid var(--line);background:var(--surface);border-radius:22px;padding:16px 10px;text-align:center;display:grid;gap:6px;justify-items:center;transition:.2s;color:var(--text)}
.choice .ico{width:54px;height:54px;border-radius:17px;background:var(--canvas);display:grid;place-items:center;font-size:25px}
.choice b{font-family:var(--display);font-size:16px}
.choice small{color:var(--muted);font-size:12px}
.choice.on{border-color:var(--sun);box-shadow:0 10px 26px #FFB00030}
.choice.on .ico{background:var(--sun)}
.orb{position:absolute;width:62vw;max-width:300px;aspect-ratio:1;border-radius:50%;top:-14%;left:-14%;background:radial-gradient(circle at 60% 60%,#FFE58A,var(--sun) 45%,var(--sun2));box-shadow:0 20px 70px #FFB00050;animation:pop 1s cubic-bezier(.3,1.4,.5,1) both;pointer-events:none}
.orb::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:1px dashed #ffffff40}
.band.login-band{min-height:40vh;display:flex;flex-direction:column;padding-bottom:46px}
.band.login-band .top{width:100%}
.band.login-band .band-body{margin-top:auto;width:100%}
.band.login-band h1{font-size:clamp(30px,8vw,42px);font-weight:700}

/* entrance animation */
.rise>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.rise>*:nth-child(2){animation-delay:.06s}.rise>*:nth-child(3){animation-delay:.12s}.rise>*:nth-child(4){animation-delay:.18s}
.rise>*:nth-child(5){animation-delay:.24s}.rise>*:nth-child(6){animation-delay:.3s}.rise>*:nth-child(n+7){animation-delay:.34s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- welcome after login ---------- */
#wel{position:fixed;inset:0;z-index:100;display:grid;place-items:center;color:#fff;text-align:center;
  background:radial-gradient(110% 80% at 50% 115%,#FFC93C55 0%,transparent 50%),linear-gradient(165deg,var(--deep) 0%,#086A76 55%,var(--teal) 100%);
  transition:transform .85s cubic-bezier(.77,0,.18,1)}
#wel.out{transform:translateY(-100%)}
#wel .box{display:grid;justify-items:center;gap:14px;padding:20px}
.lg{position:relative;width:118px;height:118px;display:grid;place-items:center}
.lg .tile{width:100%;height:100%;border-radius:34px;background:linear-gradient(145deg,#fff,#EAF6F7);color:var(--teal);display:grid;place-items:center;overflow:hidden;
  font-family:var(--display);font-weight:800;font-size:54px;box-shadow:0 20px 50px #00000040;transform:scale(.3) rotate(-14deg);opacity:0;
  animation:lgIn .9s cubic-bezier(.3,1.5,.5,1) .15s forwards;position:relative;z-index:2}
.lg .tile img{width:100%;height:100%;object-fit:cover}
@keyframes lgIn{to{transform:none;opacity:1}}
.lg .wv{position:absolute;inset:0;border-radius:40px;border:2px solid var(--sun);opacity:0;animation:wave 1.6s ease-out .6s 2}
.lg .wv+.wv{animation-delay:.95s}
@keyframes wave{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.wl1{font-family:var(--display);font-weight:700;font-size:clamp(28px,8vw,44px);line-height:1.25}
.wl1 em{font-style:normal;color:var(--sun)}
.wp{display:inline-block;clip-path:inset(-20% 0 -20% 100%);animation:wipe .8s cubic-bezier(.45,.05,.3,1) forwards;padding:0 2px}
@keyframes wipe{to{clip-path:inset(-20% 0 -20% 0)}}
.wl2{font-size:15px;opacity:0;animation:fadeUp .6s ease forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:.88;transform:none}}
.agcard{display:flex;align-items:center;gap:12px;background:#ffffff1a;border:1px solid #ffffff33;border-radius:22px;padding:10px 16px 10px 12px;backdrop-filter:blur(10px);
  opacity:0;transform:translateY(16px) scale(.96);animation:cardIn .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes cardIn{to{opacity:1;transform:none}}
.agcard .mini{width:46px;height:46px;border-radius:14px;background:#fff;color:var(--teal);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:22px;flex:none;overflow:hidden}
.agcard .mini img{width:100%;height:100%;object-fit:cover}
.agcard small{display:block;opacity:.75;font-size:12px;text-align:start}
.agcard b{font-family:var(--display);font-size:17px}
.wbar{width:140px;height:4px;border-radius:4px;background:#ffffff26;overflow:hidden;opacity:0;animation:fadeUp .4s ease forwards}
.wbar i{display:block;height:100%;width:0;background:var(--sun);border-radius:4px;animation:fill 1.1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fill{to{width:100%}}

.toast{pointer-events:none;position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;opacity:0;transition:.25s;z-index:95;max-width:calc(100% - 32px);font-size:14px}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01s!important;transition:none!important}}
/* KPI tiles on a light page (owner) */
.page .kpi{background:var(--surface);border-color:var(--line);color:var(--text);backdrop-filter:none}
.page .kpi strong{color:var(--text)}
.page .kpi.k-bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)} .page .kpi.k-bad strong{color:var(--bad)}
.page .hello h1{font-size:26px}

/* notification bell */
.ib{position:relative}
.ib .bd{position:absolute;top:-4px;inset-inline-end:-4px;background:var(--sun);color:var(--ink);font-size:10px;font-weight:700;border-radius:999px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px;box-shadow:0 0 0 2px #0B8F9C}
.bell.shake svg{animation:shake .9s cubic-bezier(.36,.07,.19,.97) 2;transform-origin:50% 10%}
@keyframes shake{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}