:root{
  --bg:#FFFFFF; --soft:#EEF3FC; --surface:#FFFFFF; --ink:#0F1E33; --muted:#53627A;
  --blue:#0B4DB8; --blue-deep:#0A2F6E; --line:#D6E0F0; --red:#B3261E; --amber:#9A6700;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B1424; --soft:#111E36; --surface:#14223D; --ink:#E9EFFA; --muted:#9FB0CC;
    --blue:#6FA2FF; --blue-deep:#0E2A5C; --line:#24375C; --red:#FF8A80; --amber:#E8B44C; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1424; --soft:#111E36; --surface:#14223D; --ink:#E9EFFA; --muted:#9FB0CC;
  --blue:#6FA2FF; --blue-deep:#0E2A5C; --line:#24375C; --red:#FF8A80; --amber:#E8B44C; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 Figtree,"Noto Sans Ethiopic",system-ui,-apple-system,"Segoe UI",sans-serif}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
h1,h2,h3{font-family:"Bricolage Grotesque",Figtree,"Noto Sans Ethiopic",system-ui,sans-serif;line-height:1.1;margin:0}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:8px 12px;flex-wrap:wrap}
.brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.3rem;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:8px;letter-spacing:.02em}
nav{display:flex;gap:2px;overflow-x:auto}
nav a{text-decoration:none;color:var(--muted);padding:8px 10px;border-radius:6px;font-weight:500;white-space:nowrap;font-size:.95rem}
nav a:hover{color:var(--ink);background:var(--soft)}
.badge{display:inline-grid;place-items:center;width:1em;height:1em;border-radius:50%;background:var(--blue);color:#fff;font-size:inherit;vertical-align:-.12em}
.badge svg{width:62%;height:62%}

.hero{background:var(--blue-deep);color:#fff;padding:72px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
@media (max-width:760px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.3rem,6.5vw,4.2rem);font-weight:700;letter-spacing:-.02em;max-width:13ch}
.hero p{font-size:1.15rem;color:#C9D8F3;max-width:46ch;margin:18px 0 28px}
.card-demo{background:#fff;color:#0F1E33;border-radius:14px;padding:22px;box-shadow:0 18px 40px rgba(0,0,0,.25);max-width:340px}
.card-demo .nm{font-family:"Bricolage Grotesque",sans-serif;font-size:1.45rem;font-weight:700;display:flex;align-items:center;gap:8px}
.card-demo .nm .badge{background:#0B4DB8;font-size:1.2rem}
.card-demo dl{margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.92rem}
.card-demo dt{color:#53627A} .card-demo dd{margin:0;font-weight:600}
.btn{display:inline-block;font:600 1rem Figtree,sans-serif;padding:12px 20px;border-radius:8px;border:2px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer;text-decoration:none}
.hero .btn{background:#fff;color:#0A2F6E;border-color:#fff}
.hero .btn.ghost{background:transparent;color:#fff}
.btn.ghost{background:transparent;color:var(--blue)}
.btn.small{padding:6px 12px;font-size:.9rem}
.btn:disabled{opacity:.5;cursor:default}

section{padding:48px 0}
.pager{display:flex;justify-content:space-between;gap:12px;padding-bottom:40px}
.pager .btn{max-width:48%;text-align:center}
.pager .btn.off{visibility:hidden}
nav a[aria-current="page"]{color:var(--blue);background:var(--soft)}
.slide-in{animation:slideIn .35s ease-out}
@keyframes slideIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.slide-in{animation:none}}
section h2{font-size:clamp(1.7rem,4vw,2.3rem);margin-bottom:8px}
.lead{color:var(--muted);max-width:60ch;margin:0 0 28px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;counter-reset:s}
.step{border-top:3px solid var(--blue);padding-top:14px}
.step h3{font-size:1.2rem;margin-bottom:6px}
.step h3::before{counter-increment:s;content:counter(s) ". ";color:var(--blue)}
.step p{margin:0;color:var(--muted)}

label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
textarea{min-height:90px;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px}
.field{margin-bottom:16px}
.status{margin-top:12px;font-weight:500;min-height:1.5em}
.status.err{color:var(--red)} .status.ok{color:var(--blue)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;margin-bottom:20px}
.soft{background:var(--soft);border-color:transparent}
.result{display:flex;gap:14px;align-items:center;margin-top:14px;font-size:1.05rem}
.result .badge{font-size:2rem;flex:none}
.pill{display:inline-block;font-size:.8rem;font-weight:600;padding:2px 10px;border-radius:99px;background:var(--soft);color:var(--muted)}
.pill.v{background:var(--blue);color:#fff}
.totals{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:4px 0 20px}
.totals div{border-inline-start:4px solid var(--line);padding-block:4px;padding-inline-start:12px}
.totals div:nth-child(2){border-color:var(--blue)} .totals div:nth-child(3){border-color:var(--amber)}
.totals span{display:block;font-size:.85rem;color:var(--muted)}
.totals b{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.3rem,4vw,1.8rem);font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{text-align:start;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
th{color:var(--muted);font-weight:600}
.bar{display:grid;grid-template-columns:minmax(90px,30%) 1fr auto;gap:10px;align-items:center;margin:6px 0;font-size:.9rem}
.bar i{display:block;height:12px;border-radius:3px;background:var(--blue)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.hidden{display:none!important}
.auth-ov{position:fixed;inset:0;z-index:90;background:rgba(6,16,36,.6);display:grid;place-items:center;padding:16px}
.auth-ov.hidden{display:none!important}
.auth-card{position:relative;background:var(--surface);color:var(--ink);border-radius:14px;padding:24px 20px;width:min(420px,100%);box-shadow:0 18px 44px rgba(0,0,0,.35)}
.subnav{display:flex;gap:6px;padding-top:14px;padding-bottom:0}
.subnav a{text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 14px;border-radius:99px;border:1px solid var(--line);color:var(--ink)}
.subnav a[aria-current="page"]{background:var(--blue);border-color:var(--blue);color:#fff}
.subnav.hidden{display:none!important}
.mcard{background:#0A2F6E;color:#fff;border-radius:16px;padding:20px;max-width:440px;box-shadow:0 10px 26px rgba(10,47,110,.25)}
.mc-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mc-brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.5rem}
.mc-ok{display:flex;align-items:center;gap:6px;font-weight:600;color:#BFD6FF;font-size:.9rem}
.mc-body{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-top:22px}
.mc-name{font-weight:700;font-size:1.25rem;line-height:1.2}
.mc-code{font-family:"Bricolage Grotesque",monospace;font-weight:700;font-size:clamp(1.15rem,5.4vw,1.6rem);white-space:nowrap;letter-spacing:.03em;margin:6px 0}
.mc-meta{color:#C9D8F3;font-size:.88rem}
.mc-qr{background:#fff;border-radius:10px;padding:5px;width:clamp(86px,26vw,118px);height:clamp(86px,26vw,118px);flex:none}
.mc-qr svg{width:100%;height:100%;display:block}
#tourOv{position:fixed;inset:0;z-index:100}
.tour-spot{position:fixed;border-radius:10px;box-shadow:0 0 0 9999px rgba(6,16,36,.62);outline:3px solid #fff;outline-offset:0;transition:left .3s,top .3s,width .3s,height .3s;pointer-events:none;animation:tourPulse 1.6s ease-in-out infinite}
@keyframes tourPulse{50%{outline-color:#FFD54A}}
.tour-arrow{position:fixed;width:40px;height:60px;color:#FFD54A;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));pointer-events:none;transition:left .3s,top .3s;animation:tourBob .9s ease-in-out infinite}
@keyframes tourBob{50%{translate:0 7px}}
.tour-card{position:fixed;background:var(--surface);color:var(--ink);border-radius:12px;padding:16px;box-shadow:0 14px 36px rgba(0,0,0,.4);transition:left .3s,top .3s}
.tour-card p{margin-block:4px 14px;margin-inline:0 28px;font-size:1.02rem;line-height:1.5}
.tour-count{font-size:.8rem;color:var(--blue);font-weight:700;letter-spacing:.02em}
.tour-btns{display:flex;justify-content:space-between;gap:10px}
.tour-x{position:absolute;top:6px;inset-inline-end:8px;background:none;border:0;font-size:1.15rem;color:var(--muted);cursor:pointer;padding:6px}
@media (prefers-reduced-motion:reduce){.tour-spot,.tour-arrow{animation:none;transition:none}.tour-card{transition:none}}
.chatlog{max-height:55vh;min-height:140px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin:14px 0;padding:4px}
.bub-u,.bub-a{padding:10px 14px;max-width:85%;white-space:pre-wrap;line-height:1.5}
.bub-u{align-self:flex-end;background:var(--blue);color:#fff;border-radius:14px 14px 4px 14px}
.bub-a{align-self:flex-start;background:var(--soft);border-radius:14px 14px 14px 4px}
.chatrow{display:flex;gap:8px}
.opt input[type=checkbox]{width:22px;height:22px;accent-color:var(--blue);flex:none}
.dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:var(--soft);border-radius:10px;padding:16px}
.kpi span{display:block;color:var(--muted);font-size:.9rem;line-height:1.3}
.kpi b{display:block;margin-top:6px;font-family:"Bricolage Grotesque",sans-serif;font-size:2.2rem;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--blue)}
.about p{max-width:65ch}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:24px}
.values div{border-inline-start:4px solid var(--blue);padding-inline-start:14px}
.values h3{font-size:1.15rem;margin-bottom:4px}
.values p{margin:0;color:var(--muted)}
.rules h3{font-size:1.2rem;margin:22px 0 8px}
.rules ol{padding-inline-start:1.6em;margin:0;max-width:65ch}
.rules li{margin-bottom:8px}
.langbtn{font:600 .9rem Figtree,"Noto Sans Ethiopic",sans-serif;border:1px solid var(--blue);color:var(--blue);background:transparent;border-radius:99px;padding:6px 12px;cursor:pointer;flex:none}
header nav{flex:1 1 auto;justify-content:flex-end;min-width:0}
@media (max-width:900px){header nav{order:3;flex-basis:100%;justify-content:flex-start;padding-bottom:6px}.hdr-tools{margin-inline-start:auto}}
fieldset{border:1px solid var(--line);border-radius:10px;padding:16px 16px 0;margin:0 0 16px}
legend{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;padding:0 6px}
.poll{border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:14px;background:var(--surface)}
.poll h3{font-size:1.2rem;margin:6px 0 4px}
.poll .meta{color:var(--muted);font-size:.9rem;margin-bottom:12px}
.opt{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;cursor:pointer}
.opt input{width:auto}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tabs button{font:600 .95rem Figtree,sans-serif;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:8px 14px;border-radius:99px;cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.pill.open{background:#1C7C3A;color:#fff} .pill.closed{background:var(--muted);color:var(--bg)}
.detail{font-size:.9rem;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:0}
.detail dt{color:var(--muted)} .detail dd{margin:0}
.report{border-top:3px solid var(--blue);padding-top:12px;margin-bottom:26px}
.wbar{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 20px;counter-reset:w}
.wbar li{flex:1;font-size:.85rem;line-height:1.3;color:var(--muted);border-top:4px solid var(--line);padding-top:8px;counter-increment:w}
.wbar li::before{content:counter(w) ". "}
.wbar li.now{color:var(--ink);font-weight:600;border-color:var(--blue)}
.wbar li.done{border-color:var(--blue)}
.wnav{display:flex;gap:10px;flex-wrap:wrap}
footer{padding:32px 0;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line)}

.hdr-tools{display:flex;gap:8px;align-items:center}
.langsel{font:600 .9rem Figtree,"Noto Sans Ethiopic",sans-serif;border:1px solid var(--blue);color:var(--blue);background:transparent;border-radius:99px;padding:6px 10px;width:auto;cursor:pointer}
[dir=rtl] body{font-family:Figtree,"Noto Sans Arabic","Noto Sans Ethiopic",system-ui,sans-serif}
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.principles div{background:var(--soft);border-radius:10px;padding:14px 16px}
.principles b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.05rem;margin-bottom:2px}
.principles span{color:var(--muted);font-size:.93rem}
.yn{display:flex;gap:10px;margin:8px 0 10px}
.yn .opt{flex:1;margin:0;font-weight:700;justify-content:center;font-size:1.05rem}
.yn .opt:has(input:checked){border-color:var(--blue);background:var(--soft)}
.explain{background:var(--soft);border-radius:8px;padding:10px 12px;margin:0 0 12px;white-space:pre-wrap}
.discuss{border-top:1px solid var(--line);margin-top:14px;padding-top:10px}
.discuss summary{cursor:pointer;font-weight:600;color:var(--blue)}
.cmt{border-bottom:1px solid var(--line);padding:10px 0}
.cmt:last-child{border-bottom:0}
.cmt p{margin:4px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.cmt .who{font-weight:600;font-size:.92rem}
.cmt .who small{color:var(--muted);font-weight:400}
.linkbtn{background:none;border:0;color:var(--muted);font:500 .85rem Figtree,sans-serif;cursor:pointer;padding:4px 0;text-decoration:underline}
.linkbtn:disabled{text-decoration:none;cursor:default}
.note{font-size:.88rem;color:var(--muted)}
.warnbox{border:1px solid var(--red);border-radius:8px;padding:10px 12px;margin:8px 0;color:var(--red)}
.splitbar{display:flex;height:28px;border-radius:6px;overflow:hidden;margin:8px 0;background:var(--line)}
.splitbar i{display:grid;place-items:center;color:#fff;font-style:normal;font-weight:700;font-size:.85rem;min-width:0}
.splitbar .y{background:var(--blue)} .splitbar .n{background:#8A97AB}
.bk{margin-top:10px}
.bk table td,.bk table th{white-space:normal}
.res{border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:16px;background:var(--surface)}
.res h3{font-size:1.2rem;margin:6px 0}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:500;margin:10px 0}
.chk input{width:22px;height:22px;flex:none;accent-color:var(--blue);margin:1px 0 0}
.guide li{margin-bottom:10px}