@font-face{font-family:"Cairo";src:url("fonts/Cairo.ttf") format("truetype");font-weight:200 1000;font-style:normal;font-display:swap}
:root{--ink:#1b1464;--muted:#53546e;--blue:#1b1464;--line:#a1bce04d;--glass:#ffffffb8;--radius:26px;--shadow:0 20px 60px #315cab12;font-family:"Cairo",Tahoma,Arial,sans-serif;color:var(--ink);background:#eff7f6;font-size:16px}*{box-sizing:border-box}body{margin:0;min-height:100vh;line-height:1.75}body:before{content:'';position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse at 85% 10%,#bbb7e5 0,transparent 43%),radial-gradient(ellipse at 5% 45%,#b0e5df 0,transparent 40%),linear-gradient(160deg,#f6faf9,#e9e8f6 65%,#f6faf9)}.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(#4468a519 .8px,transparent .8px);background-size:22px 22px;mask-image:linear-gradient(transparent,#000,transparent)}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid #00877e;outline-offset:4px}input,textarea,select{width:100%;min-width:0;padding:12px 14px;border:1px solid #8cabcd80;border-radius:13px;background:#ffffffb8;color:var(--ink);outline:none}input:focus,textarea:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 4px #548ffe22}textarea{resize:vertical}label{display:grid;gap:7px;font-size:.875rem;font-weight:bold}form{display:grid;gap:17px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(2rem,4vw,3.6rem);line-height:1.45;margin-bottom:18px}h2{font-size:clamp(1.5rem,2.4vw,2.3rem);line-height:1.55;margin-bottom:12px}h3{font-size:1.15rem}p{color:var(--muted)}em{font-style:normal;color:var(--blue)}.wrap{width:min(1240px,calc(100% - 64px));margin:auto}.glass{background:var(--glass);border:1px solid #fff;border-radius:var(--radius);box-shadow:var(--shadow),inset 0 1px 0 #fff;backdrop-filter:blur(24px)}.pad{padding:28px}.top{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:100px}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand strong{font-size:1.65rem;line-height:1.3}.brand span{display:block;font-size:.75rem;font-weight:normal;color:var(--muted);margin-top:5px}.navlinks,.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.navlinks{gap:28px}.navlinks>a{font-size:.875rem}.button{border:1px solid transparent;display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:48px;padding:11px 22px;border-radius:14px;font-size:.9rem;font-weight:bold;transition:.2s}.button:hover{transform:translateY(-2px)}.primary{color:#fff;background:linear-gradient(120deg,#00a99d,#1b1464);box-shadow:0 8px 20px #1b146426}.soft{background:#ffffffad;border-color:#aec9e55c;color:var(--ink)}.danger{background:#fff1f0;color:#983e40;border-color:#ffc9c9}.wide{width:100%}.link{border:0;background:transparent;color:var(--blue);text-align:start;padding:0;font-size:.875rem}.eyebrow{display:block;color:#1b1464;font-size:.8rem;font-weight:bold;margin-bottom:18px}.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:#d9efebb3;border:1px solid #c2dfdc;border-radius:99px;color:#1b1464;font-size:.75rem}.muted{color:var(--muted);font-size:.875rem}.fine{font-size:.8rem}.row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.two,.three{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.stack{display:grid;gap:14px}.section{margin:100px 0}.section-head{margin:30px 0 23px}.foot{text-align:center;padding:40px 20px;color:var(--muted);font-size:.8rem}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;min-height:690px;padding:60px 0}.hero h1{font-size:clamp(2.9rem,5.3vw,4.8rem);line-height:1.26}.hero-copy>p{max-width:520px;margin:25px 0 28px;line-height:1.95}.hero-demo{position:relative;padding:30px;transform:none}.hero-demo>*{transform:rotate(0deg)}.demo-label{font-size:.85rem;color:var(--muted);margin:28px 0 12px}.hero-demo h2{font-size:1.65rem}.demo-options{display:grid;gap:11px;margin:25px 0}.demo-options>span{display:flex;align-items:center;gap:12px;padding:14px;background:#f7faffbd;border:1px solid var(--line);border-radius:13px;font-size:.875rem}.demo-options b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#e3eeff}.demo-options .chosen{background:#e0eeff;border-color:#84b0ef}.chosen i{margin-right:auto;color:var(--blue)}.insight{display:flex;align-items:center;gap:15px;border-radius:18px;padding:18px;background:#e2efffa8}.insight p{margin:4px 0 0;font-size:.875rem}.insight-icon{font-size:2rem;color:#00877e}.floating{position:absolute;left:-32px;bottom:-39px;display:grid;gap:5px;padding:16px 28px;transform:none;background:#f3faffeb}.floating span{font-size:.75rem;color:var(--muted)}.floating strong{font-size:1.1rem}.small-facts{display:flex;gap:25px;font-size:.75rem;color:var(--muted);margin-top:25px}.small-facts span:before{content:'✓';margin-left:7px;color:var(--blue)}.feature{padding:30px}.feature p{margin:0}.step{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#dcecff;color:#1b1464;margin-bottom:25px;font-size:.875rem}.symbol{display:block;color:var(--blue);font-size:2.7rem;margin-bottom:10px}.mode-card{background:linear-gradient(130deg,#ffffffd9,#dcecff99)}.auth-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;min-height:75vh;padding:40px 0}.auth-card{padding:35px}.tabs{display:flex;gap:6px;padding:5px;border-radius:13px;background:#dce9f9;margin-bottom:25px}.tabs button{flex:1;border:0;padding:12px 7px;background:transparent;border-radius:10px;color:var(--muted);font-size:.875rem}.tabs button[aria-selected=true]{background:#fff;color:var(--blue);box-shadow:0 3px 12px #315cab12}.auth-card .fine{margin-top:20px}.workspace{display:grid;grid-template-columns:240px minmax(0,1fr);gap:35px;padding:20px 25px;max-width:1600px;margin:auto}.sidebar{position:sticky;top:20px;height:calc(100vh - 40px);padding:30px 20px;display:flex;flex-direction:column;background:#ffffff8c}.sidebar nav{display:grid;gap:9px;margin-top:45px}.sidebar nav a{padding:12px;border-radius:13px;display:flex;gap:13px;align-items:center;font-size:1.1rem}.sidebar nav a span{font-size:.875rem}.sidebar nav a.active{color:var(--blue);background:#dae9ff}.sidebar-bottom{margin-top:auto;display:grid;gap:8px;padding-top:25px;border-top:1px solid var(--line);overflow-wrap:anywhere}.desk{min-width:0;padding:6px 10px 30px}.desk-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.desk-top h1{font-size:1.9rem;margin:0}.desk-top .eyebrow{margin-bottom:2px}.welcome{display:grid;grid-template-columns:1fr .6fr;align-items:center;padding:35px;background:linear-gradient(125deg,#fff9,#c6e1ff9c);overflow:hidden}.welcome h2{font-size:2.6rem;margin:20px 0 12px}.welcome-orbit{width:190px;height:190px;border:1px solid #6999e24d;border-radius:50%;display:grid;place-items:center;justify-self:center;box-shadow:0 0 0 28px #ffffff2b,0 0 0 55px #ffffff29}.welcome-orbit span{display:grid;place-items:center;width:115px;height:115px;border-radius:35px;background:linear-gradient(140deg,#89baff99,#fff);font-size:4rem;color:#4379c4;box-shadow:0 20px 40px #507ab32a;transform:rotate(-12deg)}.compact{margin-top:20px;gap:15px}.metric{padding:18px 25px}.metric strong{display:block;font-size:2rem;line-height:1.4}.activity-card{padding:24px}.activity-card h3{margin:12px 0}.activity-card .row{margin-top:20px}.bank-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:22px;align-items:start}.option-input{display:flex;gap:10px;align-items:center;margin-bottom:9px}.option-input input[type=radio],.check input{width:20px;height:20px;accent-color:var(--blue);flex:0 0 auto}.check{display:flex;align-items:center;gap:10px}.filters{padding:15px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px;margin-bottom:15px}.question-card{padding:22px;overflow-wrap:anywhere}.question-card h3{line-height:1.8;margin:13px 0}.question-card details{font-size:.875rem;color:var(--muted);margin-top:12px}.question-card summary{cursor:pointer;color:var(--blue)}.question-card ul{padding-inline-start:22px}.question-card .answer-key{color:#166951;font-weight:bold}.builder-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:15px}.picker{max-height:600px;overflow-y:auto;padding:12px 4px}.pick-card{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;border:1px solid var(--line);border-radius:15px;padding:15px;background:#fff9}.pick-card p{font-size:.875rem;margin:0}.pick-card .button{padding:8px 12px;min-height:40px}.selection{background:#e4efff80;border-radius:20px;padding:20px;align-self:start;position:sticky;top:20px}.selection ol{padding:0;list-style:none;display:grid;gap:10px;margin:20px 0}.selection li{border-radius:14px;padding:12px;background:#fff;display:flex;gap:10px;align-items:center}.selection li p{font-size:.875rem;margin:0;flex:1}.selection li .actions{gap:3px}.icon-button{width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);padding:0;font-size:1rem}.run-row{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.run-row h3{margin:0 0 4px}.empty{padding:40px;text-align:center;color:var(--muted)}dialog{width:min(620px,calc(100% - 35px));padding:30px;color:var(--ink)}dialog::backdrop{background:#133c6b60;backdrop-filter:blur(5px)}.mode-options label{cursor:pointer;display:flex;flex-direction:column;align-items:start;gap:8px;padding:22px;border:1px solid var(--line);border-radius:16px}.mode-options input{width:20px;height:20px;accent-color:var(--blue)}.mode-options label:has(:checked){border-color:var(--blue);background:#e6f0ff}.mode-options span{color:var(--muted);font-weight:normal}.mobile-wrap{width:min(620px,calc(100% - 32px));margin:auto}.join-card{padding:32px;margin:25px 0}.join-card h1{font-size:2.4rem}.live-wrap{width:min(1500px,calc(100% - 55px));margin:auto}.live-top{width:min(1500px,calc(100% - 55px))}.lobby{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;padding:45px;align-items:center;min-height:65vh}.lobby h1{font-size:3.4rem}.qr-box{background:#fff;border:1px solid #dbe7f6;border-radius:22px;display:grid;justify-items:center;padding:22px;max-width:330px;margin:auto}.qr-box svg{max-width:100%;height:auto;display:block}.qr-box code{font-size:1.8rem;letter-spacing:4px;color:var(--blue)}.qr-box a{font-size:.75rem;word-break:break-all;color:var(--muted);direction:ltr}.group-form{display:flex;gap:10px;align-items:end;margin:15px 0}.group-form label{flex:1}.group-chip{display:flex;justify-content:space-between;align-items:center;background:#e7f0ff;padding:8px 15px;border-radius:12px}.stage-grid{display:grid;grid-template-columns:1fr 265px;gap:22px}.stage-main{padding:32px}.stage-main h1{font-size:clamp(1.7rem,3.2vw,3.1rem);margin:22px 0 28px}.stage-options{display:grid;grid-template-columns:1fr 1fr;gap:16px}.stage-option{display:flex;align-items:center;gap:14px;padding:22px;text-align:start;border:1px solid #a2bddc80;background:#fff9;border-radius:17px;color:var(--ink);font-size:clamp(1rem,1.5vw,1.5rem);line-height:1.7;min-height:105px}.stage-option b{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;background:#dfebff;border-radius:12px;font-size:1rem}.stage-option span{flex:1;overflow-wrap:anywhere}.stage-option.correct{background:#e0f6f0;border-color:#5baf96}.stage-option.selected{box-shadow:inset 0 0 0 2px #00a99d}.stage-option.wrong{background:#fff0ed;border-color:#e7afa4}.stage-side{padding:22px;align-self:start}.stage-side form{gap:12px}.stage-side h3{margin-bottom:15px}.stage-side .qr-box{padding:8px}.stage-side .qr-box code{font-size:1.2rem}.stage-side .qr-box a{display:none}.stage-side .qr-box svg{max-width:180px}.stage-side .mini{font-size:.8rem;margin:10px 0}.stage-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.explanation{padding:20px;margin-top:22px;background:#e1f2ff;border:1px solid #b8d6ef;border-radius:16px}.explanation p{margin:5px 0 0}.report-card{padding:25px}.report-card h3{line-height:1.8}.report-card .bar{height:8px;border-radius:9px;background:#dbe7f5;overflow:hidden;margin:15px 0}.bar i{display:block;height:100%;background:linear-gradient(90deg,#00877e,#62b9df)}.report-card.review{border-color:#e7caa3}.report-card.good{border-color:#a1d8c4}.report-top{padding:35px;margin-bottom:22px}.report-top h1{margin-bottom:12px}.progress{display:flex;gap:5px;margin:15px 0}.progress i{height:5px;background:#d7e3f4;flex:1;border-radius:10px}.progress i.done{background:#00877e}.student-options{display:grid;gap:11px;margin-top:22px}.student-options .stage-option{font-size:1rem;min-height:65px;padding:13px}.confidence{display:flex;gap:12px;align-items:center;border:0;padding:15px 0}.confidence label{display:flex;gap:7px;align-items:center;font-size:.875rem}.confidence input{width:18px;height:18px;accent-color:var(--blue)}.confidence legend{font-size:.875rem}.waiting{text-align:center;padding:50px 25px}.waiting-symbol{font-size:4rem;color:#4b88d6;margin:15px 0}.error{color:#9a343b;background:#ffebe9;padding:14px;border-radius:12px}.success{color:#12694f;background:#dcf4eb;padding:14px;border-radius:12px}#notice{position:fixed;bottom:24px;left:24px;max-width:min(450px,calc(100% - 48px));background:#173f75;color:#fff;padding:17px 23px;border-radius:15px;z-index:100;box-shadow:0 15px 40px #1b146433}#notice.bad{background:#903f46}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}hr{width:100%;border:0;border-top:1px solid var(--line)}@media(min-width:1800px){.live-wrap{max-width:1750px}.stage-main h1{font-size:3.8rem}.stage-option{font-size:1.8rem}}@media(max-width:1100px){.workspace{grid-template-columns:190px 1fr;gap:18px;padding:15px}.sidebar{padding:23px 14px}.bank-layout{grid-template-columns:1fr}.hero{gap:30px}.navlinks{gap:14px}.auth-layout{gap:40px}.stage-grid{grid-template-columns:1fr 225px}.stage-option{padding:15px}}@media(max-width:760px){.wrap{width:calc(100% - 32px)}.top{min-height:82px;gap:12px}.navlinks>a:first-child{display:none}.navlinks{gap:8px}.brand strong{font-size:1.3rem}.brand img{width:36px;height:36px}.button{padding:10px 15px;gap:8px}.hero{grid-template-columns:1fr;padding:30px 0 50px;gap:45px}.hero h1{font-size:3.3rem}.hero-demo{margin:0 12px}.floating{left:-9px;bottom:-25px}.three,.two,.auth-layout{grid-template-columns:1fr}.section{margin:65px 0}.section-head h2{font-size:1.8rem}.auth-layout{gap:20px;padding-top:20px}.workspace{display:block;padding:12px}.sidebar{position:static;height:auto;padding:17px;border-radius:20px}.sidebar nav{display:flex;overflow-x:auto;margin:16px 0 0;gap:5px}.sidebar nav a{white-space:nowrap;padding:8px;font-size:.875rem}.sidebar nav a span{font-size:.8rem}.sidebar-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:15px;padding-top:12px;font-size:.875rem}.sidebar-bottom .muted{display:none}.desk{padding:25px 0}.desk-top .button{font-size:.8rem}.welcome{grid-template-columns:1fr;padding:25px}.welcome h2{font-size:2.2rem}.welcome-orbit{display:none}.compact{grid-template-columns:repeat(3,1fr);gap:8px}.metric{padding:15px 10px}.metric .muted{font-size:.75rem}.metric strong{font-size:1.6rem}.builder-grid{grid-template-columns:1fr}.selection{position:static}.filters{grid-template-columns:1fr 1fr}.filters label:first-child{grid-column:1/-1}.pad{padding:21px}.live-wrap,.live-top{width:calc(100% - 26px)}.lobby{grid-template-columns:1fr;padding:25px;gap:25px}.lobby h1{font-size:2.3rem}.stage-grid{grid-template-columns:1fr}.stage-side{order:-1}.stage-side .qr-box{display:none}.stage-side>h3{margin-bottom:8px}.stage-options{grid-template-columns:1fr}.stage-main{padding:22px}.stage-main h1{font-size:1.7rem}.stage-option{min-height:75px}.join-card{padding:23px}.join-card h1{font-size:2rem}.mode-options{grid-template-columns:1fr 1fr}.mode-options label{padding:15px}.small-facts{gap:12px;flex-wrap:wrap}.group-form{flex-wrap:wrap}.foot{padding:25px 15px}.report-top{padding:25px}.navlinks .button{padding:8px 10px}.navlinks>a{font-size:.8rem}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}@media print{body:before,.ambient,.top,.sidebar,.stage-controls,#notice,.foot{display:none}.glass{background:white;box-shadow:none;break-inside:avoid}.live-wrap{width:100%}.two{grid-template-columns:1fr}.report-card{break-inside:avoid}}
:is(.stage-option):disabled{opacity:1;cursor:default}

.logo-plaque{display:flex!important;align-items:center;justify-content:center;background:linear-gradient(115deg,#00a99d,#1b1464);padding:12px 16px;border-radius:16px;box-shadow:0 8px 24px #1b146420;margin:0!important}.logo-plaque img{display:block;width:130px;height:auto;max-width:100%}.brand .brand-caption{color:var(--ink);font-size:.8rem}.auth-feedback{padding:20px;border:1px solid #00877e;border-radius:16px;background:#e5f6f2;color:#1b1464}.auth-feedback[hidden]{display:none}.auth-feedback strong{display:block;font-size:1.2rem;margin-bottom:8px}.auth-feedback p{margin:0;color:#28544f}.auth-feedback:focus{outline:3px solid #00a99d;outline-offset:3px}.hero .eyebrow{display:inline-block;padding:9px 18px;background:linear-gradient(115deg,#00a99d18,#1b146410);border:1px solid #00a99d40;border-radius:99px;color:#1b1464;font-size:1rem}.primary{background:linear-gradient(115deg,#007c74,#1b1464);box-shadow:0 8px 24px #1b146425}.progress .done,.bar i{background:linear-gradient(100deg,#00a99d,#1b1464)}@media(max-width:760px){.brand .brand-caption{display:none}.logo-plaque img{width:110px}}
/* 2.2: the gradient belongs to the page, never to the original logo. */
body:before{background:linear-gradient(125deg,#00a99d 0%,#126078 43%,#1b1464 100%);background-size:150% 150%;animation:background-flow 24s ease-in-out infinite alternate}
.ambient{background-image:radial-gradient(#ffffff22 .8px,transparent .8px)}
.logo-original{display:block!important;margin:0!important;padding:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.logo-original img{display:block;width:140px;height:auto;object-fit:contain}
.brand .brand-caption{color:white}
.glass{background:rgba(255,255,255,.83);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(28px) saturate(135%);-webkit-backdrop-filter:blur(28px) saturate(135%);box-shadow:0 18px 55px #080b3e26,inset 0 1px 0 #ffffff99}
.top,.hero-copy,.section-head,.desk-top,.auth-layout>section:first-child{color:white}
.hero-copy p,.hero-copy em,.hero-copy .small-facts,.section-head p,.section-head .eyebrow,.desk-top .eyebrow,.auth-layout>section:first-child>p,.auth-layout>section:first-child em,.foot,.access-note{color:#f1fffd}
.hero .eyebrow{color:white;background:#ffffff15;border-color:#ffffff55}
.top>.navlinks>a:not(.button),.top>a:not(.button){color:white}
.sidebar.glass{background:rgba(17,27,82,.44);color:white}
.sidebar .muted,.sidebar .link,.sidebar .brand-caption{color:#e7fffb}
.sidebar nav a.active{background:#ffffff24;color:white;border:1px solid #ffffff50}
.auth-layout .insight{color:var(--ink)}
.primary{background:#1b1464}
.button,.glass.feature,.hero-demo{transition:transform .22s ease,box-shadow .22s ease}
@media(hover:hover){.glass.feature:hover,.hero-demo:hover{transform:none;box-shadow:0 24px 60px #080b3e40}.button:hover{box-shadow:0 8px 25px #080b3e40}}
.account-controls{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.account-controls label{min-width:145px;flex:1}.account-controls label[hidden]{display:none}.account-controls input{max-width:180px}.access-note a{text-decoration:underline}
@keyframes background-flow{from{background-position:0% 30%}to{background-position:100% 70%}}
@media(max-width:760px){.logo-original img{width:115px}.account-controls{width:100%}}
@media(prefers-reduced-motion:reduce){body:before{animation:none}.button,.glass.feature,.hero-demo{transition:none}}
@media print{.section-head,.section-head p,.desk-top,.access-note{color:#1b1464}.glass{background:white}}

/* MIDAN 3.0 — SVG-only interface icons, accessible persistent theme, session pulse */
.ui-icon{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.17em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.symbol .ui-icon{width:54px;height:54px;stroke-width:1.4}
.sidebar nav .ui-icon{width:20px;height:20px}
.insight-icon .ui-icon{width:32px;height:32px}
.mode-options strong{display:flex;align-items:center;gap:8px}
.stage-option small .ui-icon{vertical-align:middle}
.icon-button .ui-icon{width:17px;height:17px}
/* Real-time participation on the trainer's protected activity screen. */
.stage-grid.phone-stage{grid-template-columns:minmax(0,1fr) minmax(300px,360px)}
.stage-grid.phone-stage .stage-side{padding:20px;min-width:0}
.attendee-panel{min-width:0}
.people-heading{margin-bottom:14px}
.people-heading h3,.people-heading h2{display:flex;gap:8px;align-items:center;margin-bottom:3px}
.people-heading p{margin:0}
.attendance-meter{width:100%;height:9px;background:#e1e9e8;border-radius:20px;overflow:hidden}
.attendance-meter>span{display:block;height:100%;background:linear-gradient(90deg,#00a99d,#1b1464);transition:width .3s ease}
.attendee-filters{display:flex;gap:5px;flex-wrap:wrap;margin:13px 0}
.filter-choice{border:1px solid var(--line);background:#ffffffc4;color:var(--ink);font-size:.74rem;padding:5px 9px;border-radius:30px;font-weight:700}
.filter-choice.active{color:#fff;background:#1b1464;border-color:#1b1464}
.attendee-list{display:flex;flex-direction:column;gap:7px;max-height:300px;overflow-y:auto;overscroll-behavior:contain;padding-inline-end:5px;scrollbar-color:#91bcb1 transparent}
.attendee-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#ffffff82;border:1px solid #9abdab50;padding:7px 9px;border-radius:11px;min-width:0}
.attendee-name{font-size:.84rem;font-weight:700;overflow-wrap:anywhere;min-width:0}
.state-pill{display:inline-flex;align-items:center;gap:5px;font-size:.73rem;font-weight:700;padding:4px 9px;border-radius:20px;white-space:nowrap}
.state-pill .ui-icon{width:13px;height:13px}
.is-done{background:#d6f3e4;color:#116446}
.is-waiting{background:#ffefd1;color:#725018}
.is-progress{background:#dceafb;color:#224f8a}
.qr-details{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:.82rem}
.qr-details summary{cursor:pointer;font-weight:700;color:var(--blue);padding:7px 0}
.qr-details[open] .qr-box{padding:8px;margin:10px auto}
.qr-details .qr-box svg{max-width:175px}
.lobby-participants{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start}
.lobby-participants .qr-box{width:245px;padding:12px}
.lobby-participants .qr-box svg{max-width:182px}
.joined-list{min-width:0}
.joined-list h3{display:flex;gap:7px;align-items:center}
.joined-list .attendee-list{max-height:265px;flex-direction:row;flex-wrap:wrap;align-content:start}
.joined-chip{border:1px solid #a8d5c0;background:#ecfff6e0;border-radius:50px;padding:5px 11px;font-size:.78rem;overflow-wrap:anywhere}
.people-report{padding:28px;margin-bottom:22px}
.people-report .eyebrow{margin-bottom:5px}
.people-report .fine{margin-bottom:0}
.table-scroll{overflow:auto;width:100%;max-width:100%;border:1px solid var(--line);border-radius:14px;margin:16px 0}
.results-table{border-collapse:collapse;width:100%;min-width:620px;text-align:right;font-size:.88rem}
.results-table th,.results-table td{padding:11px 16px;border-bottom:1px solid var(--line)}
.results-table thead{background:#dff0e9;color:#173f36}
.results-table tbody tr:nth-child(even){background:#ffffff52}
.results-table tbody tr:last-child>*{border-bottom:0}
.results-table tbody th{font-weight:700}
@media(max-width:1060px){.lobby-participants{grid-template-columns:1fr}.lobby-participants .qr-box{width:auto}}
@media(max-width:760px){.stage-grid.phone-stage{grid-template-columns:1fr}.attendee-list{max-height:205px}.stage-side .qr-details[open] .qr-box{display:grid}.lobby-participants{grid-template-columns:1fr}.lobby-participants .qr-box{width:100%}.people-report{padding:17px}.people-heading{align-items:start}.results-table{font-size:.8rem}}
@media print{.qr-details,.attendee-filters{display:none!important}.table-scroll{overflow:visible}.results-table{min-width:0;font-size:10px}.results-table th,.results-table td{padding:5px}.people-report{break-inside:auto}.results-table tr{break-inside:avoid}}

.waiting-symbol .ui-icon{width:65px;height:65px;stroke-width:1.3}


/* MIDAN 3.2 — calm, mouse-reactive particle field; brand palette stays dark */
:root{background:#173c66}
body{background:linear-gradient(125deg,#00a99d 0%,#126078 43%,#1b1464 100%);background-attachment:fixed}
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:none!important;mask-image:none!important;animation:none!important}
#ambient-particles{display:block;width:100%;height:100%;pointer-events:none}
.foot{letter-spacing:.055em;direction:ltr;text-align:center}
/* Destructive action in activity tiles */
.activity-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.activity-head .pill{min-width:0}
.delete-activity{color:#b91c1c;background:#fff1f2;border:1px solid #fecdd3;flex:0 0 40px;width:40px;height:40px;border-radius:12px;transition:background .2s,transform .2s,box-shadow .2s}
.delete-activity .ui-icon{width:20px;height:20px;stroke-width:2}
.delete-activity:hover{background:#ffe4e6;transform:translateY(-2px);box-shadow:0 5px 15px #7f1d1d21}
.delete-activity:focus-visible{outline:3px solid #e11d48;outline-offset:3px}
.delete-activity:disabled{opacity:.45}
@media(prefers-reduced-motion:reduce){.delete-activity{transition:none!important}}

/* MIDAN 3.3 — Mobile legibility: level content, calm motion, breathable rhythm.
   Desktop layout and brand colors are deliberately untouched. */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .hero { min-height: 0; padding: 24px 0 36px; gap: 32px; }
  .hero h1 {
    font-size: clamp(2.2rem, 9vw, 2.8rem);
    line-height: 1.48;
    letter-spacing: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .hero-copy > p { line-height: 1.95; font-size: .98rem; margin: 22px 0 24px; }
  .hero-demo, .hero-demo:hover, .hero-demo > *, .hero-demo .floating {
    transform: none !important;
    rotate: none !important;
  }
  .hero-demo {
    margin: 0;
    padding: 22px;
    border-radius: 22px;
  }
  .hero-demo h2 { font-size: 1.42rem; line-height: 1.65; }
  .demo-label { margin: 22px 0 9px; }
  .demo-options { margin: 17px 0; gap: 10px; }
  .demo-options > span { min-height: 55px; line-height: 1.65; padding: 10px 12px; }
  .hero-demo .insight { padding: 14px; }
  .floating {
    position: static;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    max-width: 100%;
    padding: 11px 14px;
    border-radius: 14px;
  }
  .floating strong { font-size: .91rem; }
  .floating span { font-size: .73rem; }
  .ambient { opacity: .65; }
}
@media (max-width: 360px) {
  .wrap { width: calc(100% - 30px); }
  .hero h1 { font-size: 2.12rem; }
  .hero-demo { padding: 17px; }
  .navlinks { gap: 10px; }
}

/* MIDAN 3.4: Keep the Canvas dots above the gradient, below all interface content. */
body {position:relative; isolation:isolate;}
body > .ambient { z-index:0; opacity:1; visibility:visible; }
body > .top,
body > main,
body > .workspace,
body > .foot {position:relative; z-index:1;}
/* No rotated cards or inclined text on any mobile browser (including desktop-site mode). */
.hero-demo,
.hero-demo:hover,
.hero-demo > *,
.hero-demo .floating { transform:none !important; rotate:none !important; }
.hero h1, .hero h2, .hero p, .hero strong, .hero span, .hero em, .hero i {font-style:normal;}
@media (max-width:760px){
 .ambient {opacity:1 !important;}
 .hero-demo {margin:0 !important;}
}
@media print { .ambient {display:none!important;} }

/* MIDAN 3.5: Mobile typography, true SVG icons, consistent education-themed buttons. */
/* Consistent primary action styling across teacher, student, modal and homepage. */
.button.primary,
button.button.primary,
a.button.primary {
  color: #fff;
  background: linear-gradient(112deg, #08796f 0%, #0b647b 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 23px rgba(4,68,83,.25);
}
.button.primary:hover,
button.button.primary:hover,
a.button.primary:hover {
  background: linear-gradient(112deg, #066a62 0%, #084f66 100%);
  box-shadow: 0 11px 26px rgba(4,68,83,.34);
}
.button.primary:focus-visible {outline-color:#bafbe8; outline-offset:3px;}
.cta-icon, .inline-icon {display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.cta-icon .ui-icon {width:19px;height:19px;stroke-width:2;}
.inline-icon .ui-icon {width:20px;height:20px;vertical-align:middle;stroke-width:2;}
.floating strong{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.small-facts span {display:inline-flex;align-items:center;gap:6px;}
.small-facts span::before {content:none!important;}
.small-facts span .ui-icon{width:17px;height:17px;stroke:#89e9da;stroke-width:2.5;}
/* Prevent native/emoji substitutes on the public home controls. */
.hero .ui-icon {fill:none;stroke:currentColor;}
@media (max-width:760px){
  /* The Cairo variable face is visually slanted in some iOS browsers. Use the
     platform Arabic UI face, which is upright and consistently readable. */
  html, body, button, input, textarea, select, .button {
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif !important;
    font-style:normal !important;
    font-variation-settings:normal !important;
    font-synthesis-style:none;
  }
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  h1,h2,h3,p,span,strong,em,a,label,b,small{font-style:normal!important;}
  .hero h1{font-weight:800;line-height:1.48;letter-spacing:normal;}
  .hero-copy>p{font-size:1rem;line-height:1.95;}
  .hero-demo h2{font-weight:750;line-height:1.6;}
  .hero-demo,.hero-demo>*{transform:none!important;rotate:none!important;}
  .hero .actions{gap:10px;}
  .hero .actions .button{gap:9px;}
  .small-facts{gap:11px 16px;}
  .floating strong{gap:6px;}
}
@media(prefers-reduced-motion:reduce){
  .button.primary:hover,button.button.primary:hover{transform:none;}
}

/* MIDAN 3.6 — Bulk bank import and question ownership-aware deletion */
.bank-import{margin:20px 0 24px;padding:25px 28px;display:grid;gap:16px}
.bank-import-heading{align-items:start}
.bank-import-heading h3{margin:0 0 4px}
.bank-import-heading p{margin:0;max-width:690px}
.bank-import-heading .eyebrow{margin-bottom:4px}
.bank-import-heading .actions{justify-content:flex-start;gap:14px}
.bulk-upload-controls{display:grid;gap:8px}
.bulk-upload-controls>label{max-width:740px}
.bulk-upload-controls input[type=file]{min-height:50px;cursor:pointer;direction:rtl;color:#1b1464;background:#f7ffffd9}
.bulk-preview{border-top:1px solid #c5d8e6;padding-top:15px;display:grid;gap:12px}
.bulk-preview[hidden]{display:none!important}
.bulk-status{display:inline-flex;gap:8px;align-items:center;font-weight:bold}
.bulk-status .ui-icon{width:19px;height:19px}
.bulk-valid{color:#14775d}.bulk-invalid{color:#a12638}
.bulk-errors{margin:0;padding-inline-start:25px;max-height:280px;overflow:auto;color:#9c1f36;font-size:.86rem}
.bulk-errors li{margin-bottom:7px}
.bulk-table{min-width:475px}
.bulk-table td{max-width:440px;overflow-wrap:anywhere}
.question-head{align-items:center}
.question-head-actions{display:flex;gap:10px;align-items:center}
.delete-question{display:inline-grid;place-items:center;color:#b91c1c;background:#fff1f2;border:1px solid #fecdd3;flex:0 0 40px;width:40px;height:40px;border-radius:12px;transition:background .2s,transform .2s}
.delete-question:hover{background:#ffe4e6;transform:translateY(-2px)}
.delete-question:focus-visible{outline:3px solid #e11d48;outline-offset:3px}
.delete-question .ui-icon{width:20px;height:20px;stroke-width:2}
@media(max-width:760px){.bank-import{padding:18px}.bank-import-heading .actions{width:100%}.bulk-preview>.row{align-items:stretch}.bulk-preview .button{width:100%}.bulk-table{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.delete-question{transition:none}}

/* MIDAN 3.7 — projector-friendly QR and resilient lobby layout. */
.lobby.lobby-phone{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(18px,2vw,36px);padding:clamp(22px,3vw,44px)}
.lobby-phone .lobby-participants{grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:clamp(16px,2vw,28px)}
.lobby-phone .lobby-participants .qr-box{width:100%;max-width:390px;padding:18px;border-radius:22px}
.lobby-phone .lobby-participants .qr-box #qr{width:100%;display:flex;justify-content:center}
.lobby-phone .lobby-participants .qr-box svg{width:100%;max-width:360px;height:auto;aspect-ratio:1/1;display:block}
.lobby-phone .lobby-participants .qr-box code{font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:.14em;direction:ltr;unicode-bidi:isolate}
.lobby-phone .lobby-participants .qr-box a{max-width:100%;overflow-wrap:anywhere;text-align:center}
@media(max-width:1150px){.lobby.lobby-phone{grid-template-columns:1fr;align-items:start}.lobby-phone .lobby-participants{grid-template-columns:minmax(0,370px) minmax(0,1fr)}}
@media(max-width:680px){.lobby-phone .lobby-participants{grid-template-columns:1fr}.lobby-phone .lobby-participants .qr-box{max-width:390px;margin:auto}.lobby-phone .lobby-participants .qr-box svg{max-width:340px}}