/* معيار — platform styles. Identity: Meyar design package (Qyem / Dar Al-Bushra palette, square dots, diamond pattern). */
@font-face{font-family:"Meyar Arabic";src:local("DIN Next LT W23"),local("DINNextLTW23-Regular");font-weight:400}
@font-face{font-family:"Meyar Arabic";src:local("DIN Next LT W23 Medium"),local("DINNextLTW23-Medium");font-weight:500}
@font-face{font-family:"Meyar Arabic";src:local("DIN Next LT W23 Bold"),local("DINNextLTW23-Bold");font-weight:700}
:root{
  --navy:#100e66; --royal:#103184; --blue:#1061b2; --sky:#83bde5; --ice:#caf5ff; --pink:#ffc7f1; --rose:#d9539f;
  --paper:#f4f6fb; --card:#ffffff; --ink:#0f1f55; --ink-2:#5d6a88; --ink-3:#8b96b0; --line:#e6ebf3; --line-2:#d5ddea; --tint:#edf3fb; --tint-2:#f6f9fd;
  --ok:#1d8a5c; --warn:#b97a0c; --bad:#c2414b;
  --f:"Meyar Arabic","Readex Pro",Tahoma,sans-serif;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-back:cubic-bezier(.34,1.56,.64,1);
  --r-sm:10px; --r:14px; --r-lg:18px;
  --shadow:0 1px 2px rgba(16,49,132,.04),0 10px 30px -18px rgba(16,49,132,.18);
  --shadow-lift:0 2px 4px rgba(16,49,132,.05),0 22px 40px -20px rgba(16,49,132,.32);
  --surface:#ffffff; --head:#103184; --link:#1061b2; --strong:#103184; --fill:#103184; --fill-hover:#0c2873; --kind-mix:100%; --dash:#bccce4; --scrim:rgba(232,238,248,.55);
  color-scheme:light;
  --side-w:264px; --top-h:76px;
  --z-top:20; --z-side:30; --z-tab:25; --z-modal:60; --z-toast:80;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;font-weight:400}
h1,h2,h3,h4{line-height:1.35;margin:0;font-weight:600;color:var(--head);text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
.num,.tabular{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate}
.muted{color:var(--ink-2)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.skip{position:fixed;top:8px;right:8px;z-index:100;background:var(--royal);color:#fff;padding:8px 14px;border-radius:10px;transform:translateY(-200%);transition:transform 200ms}
.skip:focus{transform:none}

/* ---------- page transitions between documents (View Transitions) ---------- */
@view-transition{navigation:auto}
::view-transition-old(main){animation:vt-out 200ms var(--ease-in) both}
::view-transition-new(main){animation:vt-in 360ms var(--ease-out) both}
@keyframes vt-out{to{opacity:0;filter:blur(10px);transform:scale(.985)}}
@keyframes vt-in{from{opacity:0;filter:blur(10px);transform:scale(.99)}}
.main{view-transition-name:main}
.side{view-transition-name:side}
.topbar{view-transition-name:topbar}

/* ---------- shell: white sidebar on the right, top bar over the content ---------- */
.shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100dvh;background:linear-gradient(to left,var(--surface) calc(var(--side-w) - 1px),var(--line) 0 var(--side-w),transparent 0)}
.side{background:var(--surface);border-inline-end:1px solid var(--line);padding:26px 18px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;overflow-y:auto;z-index:var(--z-side)}
.side .brand{display:grid;justify-items:start;gap:6px;padding:0 12px 22px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.side .brand img{width:132px;height:auto}
.side .brand span{font-size:12px;color:var(--ink-2)}
.nav{position:relative;display:grid;gap:3px}
.nav-label{font-size:11.5px;color:var(--ink-3);padding:14px 14px 4px}
.nav a{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;font-size:15px;color:var(--ink-2);transition:color 200ms var(--ease-out)}
.nav a .ic{flex:none;transition:transform 200ms var(--ease-out)}
.nav a:hover{color:var(--head)}
.nav a:hover .ic{transform:translateX(-2px)}
.nav a .badge{margin-inline-start:auto;background:var(--pink);color:#103184;font-size:11.5px;font-weight:700;border-radius:7px;min-width:22px;height:22px;display:grid;place-items:center;padding-inline:6px}
.nav a.is-active{color:var(--head);font-weight:500}
.nav-pill{position:absolute;inset-inline:0;top:0;height:46px;background:var(--tint);border-radius:12px;z-index:0;transform:translateY(var(--y,0));transition:transform 420ms var(--ease-back),height 420ms var(--ease-back),opacity 200ms;opacity:0;pointer-events:none}
.nav-pill::after{content:"";position:absolute;inset-inline-start:-6px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--blue)}
.nav-pill.ready{opacity:1}
.side .grow{flex:1;min-height:20px}
.school{display:grid;justify-items:center;text-align:center;gap:2px;background:var(--tint-2);border:1px solid var(--line);border-radius:14px;padding:16px 12px;margin-bottom:12px}
.school .ic-tile{width:34px;height:34px;border-radius:50%;background:var(--ice);color:#1061b2;display:grid;place-items:center;margin-bottom:6px}
.school b{font-weight:500;color:var(--head);font-size:14px}
.school small{color:var(--ink-3);font-size:12px}
.out{border-top:1px solid var(--line);padding-top:10px}
.out button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border:0;background:none;border-radius:12px;color:var(--ink-2);cursor:pointer;font-size:14.5px;transition:background-color 160ms,color 160ms}
.out button:hover{background:color-mix(in srgb,var(--bad) 7%,transparent);color:var(--bad)}

.col{min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--top-h);display:flex;align-items:center;gap:16px;padding:0 clamp(16px,3vw,40px);background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:var(--z-top)}
.topbar .menu-btn,.top-logo{display:none}
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid transparent;border-radius:12px;padding:0 14px;height:44px;color:var(--ink-3);transition:border-color 160ms,background-color 160ms,box-shadow 160ms}
.search:focus-within{background:var(--surface);border-color:var(--link);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 12%,transparent)}
.search input{flex:1;border:0;background:none;outline:none;height:100%;font-size:14px;color:var(--ink);min-width:0}
.search input::placeholder{color:var(--ink-3)}
.top-tools{margin-inline-start:auto;display:flex;align-items:center;gap:14px}
.bell{position:relative;color:var(--ink-2)}
.bell.has::after{content:"";position:absolute;top:7px;inset-inline-end:8px;width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px var(--surface)}
.me{display:flex;align-items:center;gap:12px;padding-inline-start:14px;border-inline-start:1px solid var(--line)}
.me .who{line-height:1.45;text-align:end;min-width:0}
.me .who b{display:block;font-weight:500;color:var(--head);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.me .who span{display:block;color:var(--ink-3);font-size:11.5px}
.icon-btn{width:38px;height:38px;border-radius:11px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:inherit;transition:background-color 160ms,transform 160ms,color 160ms}
.icon-btn:hover{background:var(--tint);color:var(--head)}
.icon-btn:active{transform:scale(.94)}
.av{width:42px;height:42px;border-radius:50%;background:var(--pink);color:#103184;display:grid;place-items:center;font-weight:600;flex:none;overflow:hidden;font-size:16px}
.av img{width:100%;height:100%;object-fit:cover}
.av-lg{width:48px;height:48px;font-size:19px}
.main{min-width:0;padding:32px clamp(16px,3vw,40px) 64px;width:100%;max-width:1320px}
.tabbar{display:none}

/* ---------- page header ---------- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.page-head h1{font-size:clamp(24px,2.5vw,32px);font-weight:700;letter-spacing:-.01em}
.page-head .sub{color:var(--ink-2);font-size:14px;margin-top:4px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);margin-bottom:12px}
.crumbs a:hover{color:var(--link)}
.crumbs .sep{opacity:.5}

/* ---------- buttons, chips, forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;padding:11px 20px;font-size:14.5px;font-weight:500;border:1px solid transparent;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 200ms,box-shadow 200ms,color 200ms,border-color 200ms;white-space:nowrap;line-height:1.3}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--fill);color:#fff;box-shadow:0 8px 18px -10px rgba(16,49,132,.6)}
.btn-primary:hover{background:var(--fill-hover)}
.btn-ghost{background:var(--card);color:var(--head);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--sky);background:var(--tint-2)}
.btn-light{background:#fff;color:#103184}
.btn-light:hover{background:var(--ice)}
.btn-danger{background:var(--bad);color:#fff}
.btn-danger:hover{filter:brightness(1.07)}
.btn-soft-danger{background:transparent;color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.btn-soft-danger:hover{background:color-mix(in srgb,var(--bad) 8%,transparent)}
.btn-sm{padding:7px 13px;font-size:13px;border-radius:10px}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn .ic{transition:transform 200ms var(--ease-out)}
.btn:hover .ic.go{transform:translateX(-3px)}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;border-radius:8px;padding:3px 10px;white-space:nowrap}
.chip-complete{color:var(--head);background:var(--tint)}
.chip-complete::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--ok)}
.chip-partial{color:#0b5d7a;background:var(--ice)}
.chip-empty{color:#8a2468;background:var(--pink)}
.chip-neutral{color:var(--ink-2);background:var(--tint)}
.code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;direction:ltr;unicode-bidi:isolate;background:var(--tint);color:var(--link);border-radius:7px;padding:2px 8px;font-size:12.5px;white-space:nowrap;display:inline-block}
.star{color:var(--rose);font-weight:700}

.field{display:grid;gap:6px}
.field>span,.field>label{font-size:13.5px;font-weight:500;color:var(--head)}
.field small{color:var(--ink-3);font-size:12px}
.input,.select,.textarea{width:100%;border:1px solid var(--line-2);background:var(--surface);border-radius:12px;padding:12px 14px;font-size:14.5px;transition:border-color 160ms,box-shadow 160ms;outline:none}
.textarea{min-height:92px;resize:vertical;line-height:1.7}
.input:focus,.select:focus,.textarea:focus{border-color:var(--link);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 12%,transparent)}
.input.is-invalid{border-color:var(--bad)}
.err{color:var(--bad);font-size:12.5px}
.form-grid{display:grid;gap:16px}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choice{display:grid;gap:8px}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opt span{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:12px;padding:11px 14px;font-size:14px;background:var(--surface);transition:border-color 160ms,background-color 160ms,color 160ms;height:100%}
.opt span::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;transition:border-color 160ms,box-shadow 160ms}
.opt input[type=checkbox]+span::before{border-radius:5px}
.opt span i{width:10px;height:10px;border-radius:3px;flex:none}
.opt input:checked+span{border-color:var(--link);background:var(--tint-2);color:var(--head);font-weight:500}
.opt input:checked+span::before{border-color:var(--link);box-shadow:inset 0 0 0 3.5px var(--surface);background:var(--blue)}
.opt input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.alert{border-radius:12px;padding:12px 14px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start}
.alert-info{background:var(--tint);color:var(--head)}

/* ---------- surfaces ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.card-pad{padding:24px 26px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.section-title h2{font-size:19px;font-weight:700}
.section-title a{font-size:13px;color:var(--link)}
.ic-tile{width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--link);display:grid;place-items:center;flex:none}

/* evidence meter: square dots, the same square as the logo's dots */
.meter{display:inline-flex;align-items:center;gap:4px;direction:rtl;flex:none}
.meter i{display:block;background:var(--line);border-radius:2px;transition:background-color 300ms var(--ease-out)}
.meter-sm i{width:10px;height:10px}
.meter-lg{gap:8px}
.meter-lg i{width:34px;height:34px;border-radius:5px}
.meter i.on{background:var(--blue)}
.meter.is-full i.on{background:var(--strong)}
.meter.is-full i.on:nth-child(5){background:var(--sky)}
.meter-inv i{background:rgba(255,255,255,.18)}
.meter-inv i.on{background:var(--surface)}

.track{display:block;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.track>i{display:block;height:100%;border-radius:99px;transform-origin:right center;background:var(--blue)}
.track-thin{height:5px}
.track.done>i{background:var(--strong)}

/* progress ring */
.ring{position:relative;width:var(--s);height:var(--s);display:grid;place-items:center;flex:none}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.ring .rt{stroke:var(--line)}
.ring .rv{stroke:var(--blue);stroke-dasharray:100}
.ring b{position:relative;font-weight:400;color:var(--head);font-size:calc(var(--s) * .26);line-height:1;direction:ltr;display:flex;align-items:baseline}
.ring b small{font-size:.62em;margin-inline-start:1px}
.ring.inv .rt{stroke:rgba(255,255,255,.2)}
.ring.inv .rv{stroke:#fff}
.ring.inv b{color:#fff}

/* ---------- dashboard ---------- */
.hero{position:relative;overflow:hidden;background:var(--royal);color:#fff;border-radius:22px;padding:30px 34px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;margin-bottom:22px;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 100% 0,rgba(16,97,178,.55),transparent 55%),radial-gradient(80% 120% at 0 100%,rgba(16,14,102,.65),transparent 60%);z-index:-1}
.hero h1,.hero h2{color:#fff;font-size:clamp(22px,2.4vw,30px);font-weight:500}
.hero p{color:#d5e0f6;font-size:15.5px;margin-top:8px;max-width:52ch}
.hero .btn{margin-top:20px}
.hero .score{display:grid;justify-items:center;gap:8px;font-size:13px;color:#d5e0f6;margin-inline-end:clamp(0px,20vw,300px)}
.hero .dia{position:absolute;inset-inline-end:12px;bottom:-6px;width:min(270px,30%);pointer-events:none;z-index:-1}
.dia path{transform-box:fill-box;transform-origin:center}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:22px}
.kpi{padding:22px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:start}
.kpi .k{font-size:14px;color:var(--ink-2);line-height:1.5}
.kpi .v{grid-column:1/-1;font-size:34px;font-weight:400;color:var(--head);line-height:1.15;direction:ltr;text-align:end;display:flex;gap:8px;justify-content:flex-end;align-items:baseline}
.kpi .v small{font-size:22px;color:var(--ink-3)}
.kpi .v.bad{color:var(--rose)}
.kpi .ic-tile{grid-row:1;grid-column:2}

.dash{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:22px}
.domains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.domains.single{grid-template-columns:1fr}
.dcard{display:grid;gap:16px;padding:24px 26px;transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out),border-color 200ms}
.dcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line-2)}
.dhead{display:flex;align-items:flex-start;gap:14px}
.dhead b{font-size:19px;font-weight:600;display:block;line-height:1.4;color:var(--head)}
.dhead small{color:var(--ink-2);font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.6;margin-top:2px}
.dmeta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ink-2)}
.dmeta .pct{font-size:22px;color:var(--link);direction:ltr}
.dcard .foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;color:var(--link);font-size:14.5px}
.dcard .foot .ic{transition:transform 200ms var(--ease-out)}
.dcard:hover .foot .ic{transform:translateX(-4px)}
.stds{display:grid;gap:8px}
.std-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 40px;gap:10px;align-items:center;font-size:13px;color:var(--ink-2)}
.std-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.std-row b{font-weight:500;font-size:12.5px;text-align:end;color:var(--head)}

.bars{display:grid;gap:20px}
.bar-row{display:grid;gap:9px}
.bar-row .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15px;color:var(--head)}
.bar-row .top b{font-weight:400;color:var(--link);direction:ltr;font-size:15px}
.bar-row:hover .top span{color:var(--link)}

.list{display:grid}
.li{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.li:first-child{padding-top:2px}
.li:last-child{border-bottom:0;padding-bottom:0}
.li .ic-tile{width:38px;height:38px;border-radius:50%;background:var(--tint)}
.li .tx{min-width:0;flex:1;font-size:14px;line-height:1.6;color:var(--head)}
.li .tx p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.li .tx small{color:var(--ink-3);font-size:12px}
a.li:hover .tx p{color:var(--link)}
.empty-note{color:var(--ink-2);font-size:13.5px;padding:10px 0}
.banner{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--pink);color:var(--head);border-radius:var(--r);padding:12px 18px;margin-bottom:20px;font-size:14px;box-shadow:var(--shadow)}
.banner .btn{margin-inline-start:auto}
.foot-note{display:flex;justify-content:space-between;gap:12px;color:var(--ink-3);font-size:13px;margin-top:26px}

/* ---------- domain page ---------- */
.dom-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;padding:28px 30px;align-items:center;position:relative;overflow:hidden}
.dom-hero .ic-tile{width:54px;height:54px;border-radius:15px}
.dom-hero h1{font-size:clamp(24px,2.6vw,32px);font-weight:700}
.dom-hero .def{color:var(--ink-2);max-width:80ch;font-size:15px;line-height:1.95;margin-top:12px}
.dom-hero .score{display:grid;gap:8px;justify-items:center;font-size:13px;color:var(--ink-2)}
.stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px;font-size:13.5px;color:var(--ink-2)}
.stats b{display:block;color:var(--head);font-size:22px;font-weight:400;line-height:1.3}
.std-block{margin-top:20px;overflow:hidden;scroll-margin-top:calc(var(--top-h) + 16px)}
.std-h{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--tint-2)}
.std-h h2{font-size:18px;font-weight:600}
.std-h .track{width:150px}
.std-h .pc{font-size:18px;color:var(--link);min-width:52px;text-align:end;direction:ltr}
.std-h .tools{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.ind-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto 58px 92px;gap:16px;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line);transition:background-color 160ms}
.ind-row:last-child{border-bottom:0}
.ind-row:hover{background:var(--tint-2)}
.ind-row .t{font-size:14.5px;line-height:1.8;color:var(--ink)}
.ind-row .n{font-size:12px;color:var(--ink-3)}
.ind-row .pc{text-align:end;color:var(--link);direction:ltr}
.ind-row .go{justify-self:end}

/* ---------- indicator page ---------- */
.ind-hero{padding:28px 30px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.ind-hero h1{font-size:clamp(19px,2vw,24px);font-weight:500;line-height:1.8;margin-top:12px;max-width:62ch;color:var(--head)}
.ind-hero .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ind-score{display:grid;gap:12px;justify-items:center;padding:6px 10px;position:relative}
.ind-score .big{font-size:48px;font-weight:400;line-height:1;color:var(--head);direction:ltr;display:flex;align-items:baseline}
.ind-score .big small{font-size:22px;margin-inline-start:2px}
.ind-score .cap{font-size:13px;color:var(--ink-2);text-align:center}
.stamp{position:absolute;top:-8px;inset-inline-start:-22px;border:2px solid #103184;color:#103184;font-weight:700;font-size:13px;padding:2px 10px;border-radius:8px;transform:rotate(-12deg);background:var(--ice);opacity:0;pointer-events:none}
.stamp.show{opacity:1}
.pager{display:flex;gap:8px}
.rule-note{font-size:13.5px;color:var(--ink-2);display:flex;gap:8px;align-items:center;margin:20px 2px 14px}
.rule-note b{color:var(--head)}

.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.slot{position:relative;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;min-height:250px;padding:12px;transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.slot:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.slot .no{position:absolute;top:22px;inset-inline-start:22px;z-index:2;background:var(--surface);color:var(--head);font-size:11.5px;font-weight:500;border-radius:7px;padding:1px 9px}
.slot .no.extra{background:var(--pink);color:#103184}
.thumb{height:104px;border-radius:12px;display:grid;place-items:center;color:color-mix(in srgb,var(--c,var(--blue)) var(--kind-mix),#fff);font-weight:500;font-size:12.5px;background:var(--tint);position:relative;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .kind{display:grid;justify-items:center;gap:4px;padding-top:14px}
.slot .body{padding:14px 6px 8px;display:grid;gap:4px;flex:1;align-content:start}
.slot .body b{font-weight:500;font-size:15px;line-height:1.55;color:var(--head);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slot .body p{font-size:13px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.6}
.slot .body small{font-size:12px;color:var(--ink-3)}
.slot .acts{display:flex;gap:2px;padding:8px 2px 0;border-top:1px solid var(--line);align-items:center}
.slot .acts .w{margin-inline-start:auto;font-size:12.5px;font-weight:500;color:var(--link);background:var(--tint);border-radius:7px;padding:1px 8px}
.slot .acts .w.zero{color:var(--ink-3);background:var(--paper)}
.slot .acts .icon-btn{width:34px;height:34px;color:var(--link)}
.slot .acts .icon-btn.del{color:var(--ink-3)}
.slot .acts .icon-btn.del:hover{background:color-mix(in srgb,var(--bad) 9%,transparent);color:var(--bad)}
.slot.empty{border:1.5px dashed var(--dash);background:transparent;box-shadow:none;align-items:center;justify-content:center;gap:10px;color:var(--link);cursor:pointer;font-size:15px;text-align:center;padding:16px}
.slot.empty:hover{background:var(--surface);border-color:var(--link)}
.slot.empty .plus{width:46px;height:46px;border-radius:13px;background:var(--tint);display:grid;place-items:center;transition:transform 300ms var(--ease-back)}
.slot.empty:hover .plus{transform:scale(1.08) rotate(90deg)}
.slot.empty small{color:var(--ink-3);font-size:12px}
.slot.empty.ro{cursor:default;color:var(--ink-3)}
.slot.empty.ro:hover{background:transparent;border-color:var(--dash)}

/* ---------- evidence library ---------- */
.filters{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:22px;flex-wrap:wrap}
.filters .search{max-width:none;flex:1 1 260px}
.filters .seg{margin:0;border:0;padding:0;background:none;gap:8px}
.filters .seg a{border:1px solid var(--line-2);border-radius:10px}
.filters .seg a.is-active{border-color:transparent}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.lib .slot{min-height:0}
.lib .slot .body small.dom{color:var(--ink-2);font-size:13px}
.pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;color:var(--ink-2);font-size:13.5px;flex-wrap:wrap}
.pagination .pg{display:flex;gap:6px}

/* ---------- reports ---------- */
.summary{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));align-items:center;padding:22px 28px;gap:20px;margin-bottom:22px}
.summary h2{font-size:19px;font-weight:500}
.summary .sub{color:var(--ink-2);font-size:13px}
.summary .stat{text-align:center;display:grid;gap:2px}
.summary .stat b{font-size:32px;font-weight:400;color:var(--head);line-height:1.2;direction:ltr}
.summary .stat>span{font-size:13px;color:var(--ink-2)}
.reports{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;margin-bottom:22px}
.donut-wrap{display:grid;justify-items:center;gap:18px}
.donut-wrap .ring b{flex-direction:column;align-items:center;font-size:40px}
.legend{display:flex;gap:24px;font-size:13px;color:var(--ink-2)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:6px;vertical-align:middle}
.rtable{width:100%;border-collapse:collapse;font-size:14px}
.rtable th{font-weight:500;color:var(--ink-3);font-size:12.5px;text-align:start;padding:10px 12px;border-bottom:1px solid var(--line)}
.rtable td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink)}
.rtable tr.dom td{background:var(--tint-2);color:var(--head);font-weight:600}
.rtable td.n{text-align:center;font-variant-numeric:tabular-nums}
.rtable .track{width:120px;display:inline-block;vertical-align:middle}
.print-only{display:none}

/* ---------- modal (card → modal morph) ---------- */
.backdrop{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:var(--z-modal)}
.modal{position:fixed;z-index:calc(var(--z-modal) + 1);top:50%;left:50%;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);transform-origin:top left;background:var(--surface);border-radius:24px;box-shadow:0 40px 80px -30px rgba(16,49,132,.45),0 0 0 1px rgba(16,49,132,.06);display:flex;flex-direction:column;overflow:hidden;translate:-50% -50%}
.modal-content{display:flex;flex-direction:column;min-height:0;overflow:auto}
.modal-h{display:flex;align-items:flex-start;gap:12px;padding:22px 24px 6px}
.modal-h h3{font-size:19px}
.modal-h p{color:var(--ink-2);font-size:13px;margin-top:2px}
.modal-h .icon-btn{margin-inline-start:auto;color:var(--ink-2)}
.modal-b{padding:14px 24px;display:grid;gap:16px}
.modal-f{padding:14px 24px 22px;display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);background:var(--tint-2)}
.modal-f .sp{flex:1}
.modal-wide{width:min(720px,calc(100vw - 32px))}

.drop{border:1.5px dashed var(--dash);border-radius:14px;padding:22px;display:grid;justify-items:center;gap:8px;text-align:center;cursor:pointer;transition:border-color 160ms,background-color 160ms;position:relative;background:var(--tint-2)}
.drop:hover,.drop.over{border-color:var(--link);background:var(--tint)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .ic{color:var(--link)}
.drop b{font-weight:500;font-size:14px;color:var(--head)}
.drop small{color:var(--ink-3);font-size:12px}
.drop .picked{font-size:13px;color:var(--head);font-weight:500;word-break:break-all}
.progress{height:6px;border-radius:99px;background:var(--tint);overflow:hidden}
.progress i{display:block;height:100%;width:100%;background:var(--blue);transform-origin:right;transform:scaleX(0);transition:transform 160ms linear}
.or{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- toast ---------- */
.toasts{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);z-index:var(--z-toast);display:grid;justify-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.toast{grid-area:1/1;display:flex;align-items:center;gap:10px;background:var(--royal);color:#fff;border-radius:14px;padding:12px 18px 12px 16px;font-size:14px;box-shadow:0 18px 40px -16px rgba(16,49,132,.7);pointer-events:auto}
.toast .ic{flex:none}
.toast.ok .ic{color:var(--ice)}
.toast.err{background:#5c1620}
.toast.err .ic{color:#ffb3ba}

/* ---------- admin: users ---------- */
.seg{position:relative;display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px;gap:2px;margin-bottom:20px;max-width:100%;overflow-x:auto}
.seg a{position:relative;z-index:1;padding:8px 16px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink-2);display:flex;gap:8px;align-items:center;white-space:nowrap;transition:color 200ms}
.seg a:hover{color:var(--head)}
.seg a.is-active{color:#fff}
.seg a .n{background:var(--tint);color:var(--head);border-radius:7px;font-size:11.5px;padding:0 7px;min-width:20px;text-align:center}
.seg a.is-active .n{background:rgba(255,255,255,.18);color:#fff}
.seg-pill{position:absolute;top:4px;bottom:4px;right:0;width:0;background:var(--fill);border-radius:10px;z-index:0;transition:transform 420ms var(--ease-back),width 420ms var(--ease-back)}
.filters .seg-pill{top:0;bottom:0}
.users{display:grid;gap:14px}
.ucard{padding:22px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:22px}
.uinfo{display:grid;gap:10px;align-content:start}
.uinfo .top{display:flex;gap:12px;align-items:center}
.uinfo .top b{font-size:16px;font-weight:600;display:block;color:var(--head)}
.uinfo .top small{color:var(--ink-2);font-size:12.5px;direction:ltr;display:block;text-align:end;unicode-bidi:isolate}
.uinfo dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:13px}
.uinfo dt{color:var(--ink-3)}
.uinfo dd{margin:0}
.uinfo .note{background:var(--tint);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--head)}
.uform{display:grid;gap:12px;border-inline-start:1px solid var(--line);padding-inline-start:22px}
.uform .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.uform .acts .sp{flex:1}
.empty-state{padding:48px 20px;text-align:center;display:grid;gap:10px;justify-items:center;color:var(--ink-2)}
.empty-state img{width:200px;margin-bottom:8px}

/* ---------- activity ---------- */
.feed{display:grid}
.feed .row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);font-size:14px}
.feed .row:last-child{border-bottom:0}
.feed .row small{color:var(--ink-3);font-size:12px;white-space:nowrap}
.feed .row .av{width:34px;height:34px;font-size:13px}

/* ---------- auth pages ---------- */
.auth{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--surface);padding:28px;gap:28px}
.auth .art{background:var(--royal);color:#fff;position:relative;overflow:hidden;display:grid;align-content:start;padding:clamp(28px,5vw,56px);gap:14px;border-radius:26px;isolation:isolate;min-height:560px}
.auth .art::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 100% 0,rgba(16,97,178,.5),transparent 60%);z-index:-1}
.auth .art .wm{width:160px;margin-bottom:clamp(40px,10vh,110px)}
.auth .art h2{font-size:clamp(30px,3.6vw,50px);color:#fff;font-weight:500;line-height:1.45;max-width:12ch}
.auth .art p{color:#d5e0f6;max-width:40ch;font-size:16px;line-height:1.9}
.auth .art .tag{justify-self:start;background:#fff;color:#103184;border-radius:8px;padding:4px 14px;font-size:13px;margin-top:12px}
.auth .art .facts{display:flex;gap:30px;flex-wrap:wrap;margin-top:22px}
.auth .art .facts b{display:block;font-size:30px;font-weight:400;color:#fff;line-height:1.2}
.auth .art .facts span{font-size:12.5px;color:#b9c9ec}
.auth .art .dia{position:absolute;bottom:-10px;inset-inline-end:-10px;width:min(520px,90%);z-index:-1;pointer-events:none}
.auth .pane{display:grid;place-items:center;padding:24px clamp(8px,4vw,48px)}
.auth .box{width:min(440px,100%);display:grid;gap:22px}
.auth .box h1{font-size:clamp(26px,2.6vw,32px);font-weight:500}
.auth .box .lead{color:var(--ink-2);font-size:15px;margin-top:-12px}
.auth .box.center{text-align:center;justify-items:center}
.auth .logo{width:min(180px,60%)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:12px;padding:15px;font-weight:500;font-size:15.5px;background:var(--fill);color:#fff;transition:background-color 160ms,box-shadow 200ms,transform 160ms;width:100%;cursor:pointer;box-shadow:0 12px 24px -14px rgba(16,49,132,.8)}
.gbtn:hover{background:var(--fill-hover)}
.gbtn:active{transform:scale(.98)}
.gbtn .g{width:28px;height:28px;border-radius:8px;background:var(--surface);display:grid;place-items:center}
.gbtn svg{width:18px;height:18px}
.fine{font-size:13px;color:var(--ink-2);line-height:1.9}
.foot-school{color:var(--ink-3);font-size:13px;text-align:center}
.dev{border:1px dashed var(--line-2);border-radius:14px;padding:14px;display:grid;gap:10px;text-align:start}
.dev b{font-size:12px;color:var(--warn);font-weight:500}
.dev form{display:flex;gap:8px}
.wait-icon{width:84px;height:84px;border-radius:24px;background:var(--tint);display:grid;place-items:center;color:var(--link)}
.wait-icon .ic{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.steps{display:grid;gap:0;text-align:start;width:100%}
.steps div{display:flex;gap:12px;align-items:flex-start;padding:10px 0;font-size:14px}
.steps i{width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:600;background:var(--tint);color:var(--ink-3)}
.steps .done i{background:var(--fill);color:#fff}
.steps .now i{background:var(--pink);color:#103184}


/* ---------- dark theme: explicit choice, or the system setting when none is saved ---------- */
:root[data-theme="dark"]{--paper:#0a0f2c; --card:#111840; --surface:#111840; --ink:#e3e9f8; --ink-2:#a6b2d4; --ink-3:#7783a8; --line:#222b5a; --line-2:#2f3a72; --tint:#1a2453; --tint-2:#151d49;
  --head:#eef2ff; --link:#8cc3ec; --strong:#83bde5; --fill:#1a5fb0; --fill-hover:#2270c4; --kind-mix:45%; --dash:#3a4785; --scrim:rgba(6,9,30,.55);
  --shadow:0 1px 2px rgba(0,0,0,.25),0 10px 30px -18px rgba(0,0,0,.6); --shadow-lift:0 2px 4px rgba(0,0,0,.3),0 22px 40px -20px rgba(0,0,0,.7);
  color-scheme:dark;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0a0f2c; --card:#111840; --surface:#111840; --ink:#e3e9f8; --ink-2:#a6b2d4; --ink-3:#7783a8; --line:#222b5a; --line-2:#2f3a72; --tint:#1a2453; --tint-2:#151d49;
  --head:#eef2ff; --link:#8cc3ec; --strong:#83bde5; --fill:#1a5fb0; --fill-hover:#2270c4; --kind-mix:45%; --dash:#3a4785; --scrim:rgba(6,9,30,.55);
  --shadow:0 1px 2px rgba(0,0,0,.25),0 10px 30px -18px rgba(0,0,0,.6); --shadow-lift:0 2px 4px rgba(0,0,0,.3),0 22px 40px -20px rgba(0,0,0,.7);
  color-scheme:dark;}}
.logo-dk{display:none!important}
:root[data-theme="dark"] .logo-lt{display:none!important}
:root[data-theme="dark"] .logo-dk{display:block!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-lt{display:none!important}:root:not([data-theme="light"]) .logo-dk{display:block!important}}
.alert-warn{background:color-mix(in srgb,var(--warn) 14%,var(--surface));color:color-mix(in srgb,var(--warn) 55%,var(--ink))}
.alert-error{background:color-mix(in srgb,var(--bad) 14%,var(--surface));color:color-mix(in srgb,var(--bad) 55%,var(--ink))}
.theme-btn{color:var(--ink-2)}
.auth-theme{position:fixed;top:16px;inset-inline-start:16px;z-index:5;background:var(--surface);border:1px solid var(--line)}
.theme-btn .ic-moon{display:none}
:root[data-theme="dark"] .theme-btn .ic-sun{display:none}
:root[data-theme="dark"] .theme-btn .ic-moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .ic-sun{display:none}:root:not([data-theme="light"]) .theme-btn .ic-moon{display:block}}
/* theme switch: the new theme spreads as a circle from the button (see app.js) */
html.vt-theme .main,html.vt-theme .side,html.vt-theme .topbar{view-transition-name:none}
html.vt-theme::view-transition-old(root),html.vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .kpis{grid-template-columns:1fr 1fr}
  .dash,.reports{grid-template-columns:1fr}
  .hero .score{margin-inline-end:0}
  .summary{grid-template-columns:1fr 1fr 1fr}
  .summary>div:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  :root{--top-h:64px}
  .shell{grid-template-columns:1fr;background:none}
  .side{position:fixed;inset:0 0 0 auto;width:min(300px,86vw);height:100%;transform:translateX(105%);transition:transform 380ms var(--ease-out),box-shadow 380ms;box-shadow:none}
  .side.open{transform:none;box-shadow:-30px 0 60px -20px rgba(16,49,132,.35)}
  .scrim{position:fixed;inset:0;background:rgba(15,31,85,.3);z-index:calc(var(--z-side) - 1);opacity:0;pointer-events:none;transition:opacity 300ms}
  .scrim.open{opacity:1;pointer-events:auto}
  .topbar .menu-btn{display:grid;color:var(--ink-2)}
  .top-logo{display:block;margin-inline-start:auto}
  .top-logo img{height:34px;width:auto}
  .topbar .search,.me .who,.me{display:none}
  .topbar .top-tools{margin:0}
  .main{padding:22px 16px calc(96px + env(safe-area-inset-bottom,0px))}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;inset:auto 0 0 0;z-index:var(--z-tab);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar a,.tabbar button{display:grid;justify-items:center;gap:2px;padding:6px 0;border:0;background:none;color:var(--ink-3);font-size:11px;cursor:pointer;border-radius:12px;transition:color 200ms}
  .tabbar .is-active{color:var(--link)}
  .tabbar .is-active .ic{transform:translateY(-1px)}
  .toasts{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .hero{grid-template-columns:1fr;padding:24px;gap:18px}
  .hero .score{justify-items:start;grid-row:1}
  .hero .dia{width:200px;opacity:.6}
  .domains{grid-template-columns:1fr}
  .dom-hero,.ind-hero{grid-template-columns:1fr;padding:22px}
  .dom-hero .score,.ind-score{justify-items:start;text-align:start}
  .ind-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"c t t" "m m p";row-gap:8px;padding:14px 18px}
  .ind-row .code{grid-area:c}
  .ind-row .t{grid-area:t}
  .ind-row .meter{grid-area:m}
  .ind-row .pc{grid-area:p}
  .ind-row .go{display:none}
  .std-h{padding:16px 18px}
  .ucard{grid-template-columns:1fr}
  .uform{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--line);padding-top:14px}
  .auth{grid-template-columns:1fr;padding:12px;gap:8px}
  .auth .art{min-height:0;order:-1;padding:26px}
  .auth .art .wm{width:110px;margin-bottom:22px}
  .auth .art h2{font-size:28px}
  .auth .art .facts{display:none}
  .auth .art .dia{width:240px;opacity:.5}
}
@media (max-width:560px){
  .kpis{gap:12px}
  .kpi{padding:16px}
  .kpi .v{font-size:26px}
  .kpi .ic-tile{width:36px;height:36px}
  .kpi .k{font-size:12.5px}
  .form-2{grid-template-columns:1fr}
  .std-h .track{width:90px}
  .slots{grid-template-columns:1fr 1fr;gap:12px}
  .slot{min-height:220px;padding:8px}
  .slot .no{top:16px;inset-inline-start:16px}
  .thumb{height:88px}
  .thumb .kind{padding-top:26px}
  .modal{border-radius:20px}
  .summary{grid-template-columns:1fr 1fr 1fr;padding:18px}
  .summary .stat b{font-size:24px}
  .card-pad{padding:20px}
}
@media print{
  .side,.topbar,.tabbar,.no-print,.toasts{display:none!important}
  .shell{display:block}
  .main{padding:0;max-width:none}
  body{background:var(--surface);font-size:12px}
  .card{box-shadow:none;break-inside:avoid}
  .print-only{display:block}
  .reports{grid-template-columns:1.6fr 1fr}
  @page{size:A4;margin:14mm}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important}
  ::view-transition-old(main),::view-transition-new(main){animation:none}
}