:root{--bg:#f5f7fb;--surface:#fff;--surface2:#f0f5f7;--ink:#1a2940;--muted:#77859a;--line:#e8edf3;--primary:#176c83;--primary2:#109eaa;--primarysoft:#e8f6f7;--accent:#e7b354;--green:#1d9b74;--red:#c75264;--warn:#b88921;--shadow:0 10px 30px rgba(34,56,79,.045);color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Tajawal","Cairo","Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.7}body.dark{--bg:#0e1825;--surface:#172536;--surface2:#1e3245;--ink:#ecf5fa;--muted:#a1b1c3;--line:#2b4155;--primary:#4dbac4;--primary2:#33c1c7;--primarysoft:#203e4a;--shadow:0 10px 25px rgba(0,0,0,.2);color-scheme:dark}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}input,select,textarea{outline:0;color:var(--ink);background:var(--surface)}.muted,.hint{color:var(--muted)}.hint{font-size:12px;margin:8px 0}.app-shell{min-height:100vh;display:flex}.sidebar{width:260px;flex-shrink:0;position:sticky;top:0;height:100vh;background:var(--surface);border-left:1px solid var(--line);padding:24px 14px;display:flex;flex-direction:column;z-index:20;overflow:auto}.brand{display:flex;gap:12px;align-items:center;padding:0 13px 24px}.brand b{font-size:19px;line-height:1.3}.brand small{display:block;font-size:11px;color:var(--muted);margin-top:4px;max-width:175px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.brand-mark{display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;width:46px;height:46px;font-size:26px;border-radius:15px;box-shadow:0 7px 17px rgba(25,125,150,.18)}.nav-cap{color:var(--muted);font-size:11px;padding:6px 17px;letter-spacing:.3px}.nav{display:flex;flex-direction:column;gap:2px}.nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;color:var(--muted);font-weight:600;white-space:nowrap;transition:.16s}.nav a:hover,.nav a.active{background:var(--primarysoft);color:var(--primary)}.nav a.active{position:relative}.nav a.active:before{content:'';position:absolute;right:0;top:24%;height:52%;width:3px;background:var(--primary);border-radius:3px}.nav-icon{font-size:21px;width:23px;text-align:center;line-height:1}.side-foot{margin-top:auto;padding:20px 12px 0;font-size:11px;color:var(--muted)}.side-foot small{display:block;padding-top:6px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#37b68f;margin-left:5px}.screen{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{height:81px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:10px 32px;gap:15px}.top-start,.top-end{display:flex;align-items:center;gap:14px}.crumb{font-weight:700;color:var(--muted);font-size:13px}.menu-btn{display:none}.tenant-switch select{max-width:220px;min-height:37px;border:1px solid var(--line);border-radius:10px;padding:5px 10px;background:var(--bg)}.theme-btn,.notification-icon,.menu-btn{border:1px solid var(--line);background:var(--surface);border-radius:11px;width:38px;height:38px;display:grid;place-items:center;font-size:19px;position:relative}.notification-icon i{position:absolute;font-size:9px;background:var(--red);color:#fff;border-radius:10px;padding:0 4px;top:-5px;left:-4px;font-style:normal}.mini-profile{display:flex;align-items:center;gap:8px}.mini-profile b,.mini-profile small{display:block;line-height:1.4}.mini-profile b{font-size:12px}.mini-profile small{font-size:10px;color:var(--muted)}.bubble{width:40px;height:40px;display:inline-grid;place-items:center;flex-shrink:0;border-radius:14px;background:var(--primarysoft);color:var(--primary);font-weight:800;font-size:16px}.bubble.small{width:34px;height:34px;border-radius:11px;font-size:13px}.content{width:100%;max-width:1580px;margin:0 auto;padding:34px 36px;flex:1}.heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}.heading h1{font-size:28px;line-height:1.35;margin:0 0 7px;letter-spacing:-.7px;font-weight:800}.heading p{color:var(--muted);margin:0;font-size:13px}.heading-right{display:flex;gap:8px;flex-wrap:wrap}.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:21px 22px;margin-bottom:22px;box-shadow:var(--shadow);min-width:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.panel h2{font-size:17px;letter-spacing:-.15px;margin:0}.panel h3{font-size:15px;margin:0 0 10px}.panel p{margin-top:0}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:24px}.metric{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:21px;display:flex;align-items:center;gap:16px;min-height:118px;box-shadow:var(--shadow)}.metric-icon{background:var(--primarysoft);color:var(--primary);width:50px;height:50px;display:grid;place-items:center;font-size:26px;border-radius:14px;flex-shrink:0}.metric p{font-size:12px;color:var(--muted);margin:0}.metric strong{display:block;font-size:25px;font-weight:850;line-height:1.3;margin-top:4px;white-space:nowrap}.metric small{display:block;font-size:10px;color:var(--muted)}.dashboard-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}.two-cols.wide{grid-template-columns:1.45fr 1fr}.item-line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.item-line:last-child{border-bottom:0}.item-line b,.item-line small{display:block}.item-line small{font-size:11px;color:var(--muted)}.item-line>.inline-form{flex-shrink:0}.rank-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.rank-row:last-child{border:0}.rank-row>div{flex:1}.rank-row b,.rank-row small{display:block}.rank-row small{font-size:11px;color:var(--muted)}.rank-row strong{font-size:16px;color:var(--primary)}.rank-num{width:29px;height:29px;display:grid;place-items:center;background:var(--surface2);border-radius:9px;color:var(--muted);font-weight:800}.rank-num.winner{background:#fff2cb;color:#9e6b17}.insight{margin:17px 0 21px}.insight>div:first-child{display:flex;justify-content:space-between;margin-bottom:9px}.insight b{font-size:19px}.progress{background:var(--surface2);border-radius:20px;height:9px;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2));border-radius:inherit}.insight-line{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:13px 0}.insight-line:last-child{border:0}.insight-line b{color:var(--primary)}.quick-links{display:flex;gap:8px;flex-wrap:wrap}.btn{border:1px solid var(--line);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;background:var(--surface);color:var(--ink);font-weight:700;min-height:38px;white-space:normal;text-align:center;transition:.15s}.btn:hover{transform:translateY(-1px);border-color:var(--primary)}.btn.primary{background:linear-gradient(125deg,#176c83,#178c9a);color:#fff;border-color:transparent}.btn.primary:hover{background:linear-gradient(125deg,#145a70,#137d8b);box-shadow:0 6px 14px rgba(21,110,130,.2)}.btn.subtle{background:var(--primarysoft);color:var(--primary);border-color:transparent}.btn.outline{border-color:var(--primary);color:var(--primary);background:transparent}.btn.xs{font-size:11px;padding:5px 9px;min-height:28px;border-radius:7px}.btn.lg{padding:12px 22px;min-height:48px;font-size:15px}.btn:disabled{opacity:.48;cursor:not-allowed;transform:none}.link{color:var(--primary);font-size:12px;font-weight:750}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.stacked{display:flex;flex-direction:column;gap:14px}.field{display:flex;flex-direction:column;gap:6px;min-width:0}.field>span{font-size:12px;font-weight:700;color:var(--ink)}.field input,.field select,.field textarea,.filter-row input,.filter-row select,.inline-form input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:43px;background:var(--surface);color:var(--ink)}.field input:focus,.field select:focus,.field textarea:focus,.filter-row input:focus,.filter-row select:focus{border-color:var(--primary2);box-shadow:0 0 0 3px var(--primarysoft)}.field textarea{resize:vertical}.field input[type=file]{padding:7px;font-size:12px}.field input:disabled{background:var(--bg)}.check{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}.check input{accent-color:var(--primary);width:16px;height:16px}.permissions{border:1px solid var(--line);padding:14px;border-radius:11px}.permissions summary{font-weight:700;cursor:pointer}.permission-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.filter-row{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:17px}.filter-row>.field{min-width:155px}.filter-row>input{width:220px}.filter-row>select{width:180px}.filter-row>.btn{min-height:43px}.table-wrap{overflow-x:auto;width:100%}table{width:100%;border-collapse:collapse;text-align:right;white-space:nowrap}th{color:var(--muted);font-size:11px;font-weight:700;background:var(--bg)}td,th{padding:13px 12px;border-bottom:1px solid var(--line)}td{font-size:12px}td a:not(.btn){color:var(--primary)}tr:last-child td{border-bottom:0}td b{font-weight:750}.table-sub{display:block;color:var(--muted);font-size:10px;margin-top:2px}.points-num{color:var(--primary);font-weight:850;white-space:nowrap}.inline-form{display:inline-flex;vertical-align:middle;gap:5px;align-items:center;margin:2px}.inline-form input{width:125px;min-height:28px;padding:4px 7px}.tag{display:inline-block;padding:3px 9px;font-size:10px;border-radius:7px;background:var(--surface2);color:var(--muted);font-weight:700;white-space:nowrap}.tag-approved,.tag-active,.tag-delivered{color:#137c60;background:#e4f7ee}.tag-rejected,.tag-cancelled,.tag-stopped{color:#b53c50;background:#fff0f1}.tag-pending,.tag-parent_pending,.tag-submitted{color:#986c16;background:#fff5df}.tag-closed,.tag-hidden{background:var(--surface2)}.empty{padding:32px;text-align:center;color:var(--muted)}.empty span{display:block;font-size:42px;opacity:.5}.alert{padding:13px 16px;border:1px solid #c1efdc;background:#eafaf1;color:#176b4a;border-radius:10px;margin-bottom:20px}.alert.error{background:#fff0f1;border-color:#f2c9cf;color:#ae3148}.alert.warning{background:#fff8e7;color:#986c16;border-color:#f4ddb1}.footer{text-align:center;color:var(--muted);font-size:11px;padding:28px 0 5px}.badges{display:flex;gap:15px;flex-wrap:wrap}.badge-item{border:1px solid #f6dfae;color:#b27f24;background:#fff8e7;padding:12px 16px;border-radius:13px;font-weight:750}.badge-card{background:var(--surface2);border-radius:13px;min-width:125px;padding:17px;display:flex;flex-direction:column;gap:5px;text-align:center}.badge-card strong{font-size:30px}.badge-card b{font-size:12px}.badge-card small{color:var(--muted)}.badge-card.locked{filter:grayscale(1);opacity:.42}.student-hero{background:linear-gradient(105deg,#17677f,#1aa0a9);color:#fff;border-radius:21px;padding:30px 38px;margin-bottom:23px;display:flex;justify-content:space-between;align-items:center;overflow:hidden}.student-hero h2{font-size:25px;line-height:1.6;margin:12px 0 5px}.student-hero p{color:#dbf8fb}.student-hero-symbol{font-size:100px;filter:drop-shadow(0 10px 12px #06556844)}.student-hero .btn.primary{background:#fff;color:#17566b}.student-hero .btn.outline{color:#fff;border-color:#fff}.shop-balance{display:flex;justify-content:flex-start;align-items:center;gap:20px;background:var(--primarysoft);border-radius:17px;padding:20px;margin-bottom:22px;flex-wrap:wrap}.shop-balance strong{font-size:26px;color:var(--primary)}.cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:22px}.reward-card{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow);min-width:0}.reward-photo{height:185px;background:linear-gradient(125deg,#e9f5f5,#f4efe1);display:grid;place-items:center}.reward-photo img{width:100%;height:100%;object-fit:cover}.reward-photo span{font-size:75px}.reward-detail{padding:19px}.reward-detail h3{font-size:17px;margin:0 0 8px}.reward-detail p{font-size:12px;color:var(--muted);min-height:32px}.reward-detail small{color:var(--muted)}.reward-detail .stacked{gap:8px}.reward-detail .stacked .field textarea{min-height:60px}.contest-illus{background:linear-gradient(120deg,#ecf6f7,#f6ecd2);height:110px;display:grid;place-items:center;font-size:51px}.pill{display:inline-block;padding:5px 12px;border-radius:50px;background:#e3f5f5;color:#176e82;font-size:11px;font-weight:750}.chip{display:inline-block;background:var(--primarysoft);color:var(--primary);padding:6px 12px;border-radius:9px;margin:5px}.parent-card{text-align:center}.parent-card>.bubble{width:62px;height:62px;margin:0 auto 10px;font-size:25px}.parent-card h3{margin:5px}.parent-card .btn{margin-top:15px}.message-row{display:flex;gap:13px;border-bottom:1px solid var(--line);padding:18px 0;align-items:flex-start}.message-row>div{flex:1}.message-row b{display:block}.message-row p{margin:5px 0}.message-row small{color:var(--muted)}.modal{position:fixed;inset:0;background:#091724b5;display:grid;place-items:center;padding:20px;z-index:99}.modal[hidden]{display:none}.modal-inner{background:#fff;color:#1b3545;border-radius:18px;padding:25px;text-align:center;width:min(370px,95vw);position:relative}.modal-close{position:absolute;left:16px;top:14px;border:0;background:none;font-size:20px}.modal h2{font-size:20px}.modal code{direction:ltr;display:block;margin:10px}.modal canvas{max-width:100%}.code-text{font-family:monospace;direction:ltr}.icon{display:inline-block}.auth-bg{background:radial-gradient(circle at 15% 10%,#e6f6f6,transparent 40%),radial-gradient(circle at 75% 85%,#e7edf6,transparent 48%),#f6f8fc;min-height:100vh;display:grid;place-items:center;padding:25px;color:#1a2940}.auth-card{width:100%;max-width:430px;background:#fff;border-radius:22px;padding:39px;box-shadow:0 18px 65px #174e6922}.auth-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:23px;font-size:20px}.auth-card h1{text-align:center;margin:0;font-size:26px}.auth-card>p{text-align:center;color:#8797a5;margin:7px 0 30px}.auth-card .btn{width:100%;margin-top:9px}.auth-hint{text-align:center;color:#95a3b1;margin-top:23px;font-size:11px}.installer{width:min(850px,96vw);margin:35px 0;padding:34px}.installer h1{margin:0 0 5px}.installer h3{margin:8px 0 0}.installer .btn{align-self:flex-start}.landing{background:#fafcfe}.landing-nav{max-width:1230px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:22px 25px}.landing-nav .brand{padding:0}.hero{max-width:1220px;margin:30px auto 65px;padding:30px;display:grid;grid-template-columns:1.15fr 1fr;gap:45px;align-items:center;min-height:485px}.hero-content h1{font-size:57px;line-height:1.45;margin:23px 0;letter-spacing:-2px}.hero-content em{font-style:normal;color:var(--primary)}.hero-content p{font-size:17px;color:#74849a;max-width:550px}.hero-ctas{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px}.hero-facts{display:flex;gap:20px;color:#687e92;font-size:12px;margin-top:36px;flex-wrap:wrap}.hero-graphic{height:435px;background:radial-gradient(circle at 55% 38%,#d1f5ef,#e7f2f7 67%,transparent 68%);display:grid;place-items:center;position:relative}.mock-card{background:#fff;width:290px;border-radius:24px;box-shadow:0 15px 65px #2678862c;text-align:center;padding:29px;transform:rotate(-3deg)}.mock-card small{color:#7f94a3}.star-medal{font-size:79px;margin:7px 0}.mock-card strong{display:block;font-size:17px}.mock-score{font-size:33px;font-weight:900;color:var(--primary);margin:8px}.mock-score span{font-size:14px}.mock-row{display:flex;justify-content:space-between;margin-top:10px;font-size:11px}.floating-card{position:absolute;right:0;bottom:45px;background:#fff;padding:15px 20px;border-radius:15px;box-shadow:0 8px 22px #186e8c22;font-weight:700;transform:rotate(3deg)}.feature-section{background:#fff;padding:60px 20px}.feature-section h2{text-align:center;font-size:28px;margin:0 0 40px}.features{max-width:1210px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.features article{padding:27px;border:1px solid #e6eef2;border-radius:16px}.features article span{color:var(--primary);font-size:35px}.features article h3{font-size:17px}.features article p{color:#8290a2}.landing-footer{text-align:center;padding:30px;color:#8a98aa}
@media(max-width:1200px){.sidebar{width:224px}.content{padding:28px 22px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.cards-3{grid-template-columns:repeat(2,1fr)}.hero-content h1{font-size:47px}}
@media(max-width:800px){.sidebar{position:fixed;right:0;top:0;height:100vh;transform:translateX(101%);transition:.2s;width:250px;box-shadow:0 0 0 transparent}.sidebar.open{transform:translateX(0);box-shadow:0 0 0 200vw #0b223366}.menu-btn{display:grid}.topbar{height:auto;min-height:71px;padding:12px 15px;flex-wrap:wrap}.top-end{gap:7px;flex-wrap:wrap}.top-start{gap:8px}.mini-profile span:last-child,.signout{display:none}.content{padding:23px 14px}.heading h1{font-size:24px}.dashboard-grid,.two-cols,.two-cols.wide{grid-template-columns:1fr}.hero{grid-template-columns:1fr;padding:15px;margin:0 auto 30px}.hero-content h1{font-size:43px}.hero-graphic{height:330px}.feature-section{padding:30px 15px}.features{grid-template-columns:repeat(2,1fr)}.student-hero-symbol{font-size:58px}.student-hero h2{font-size:20px}}
@media(max-width:520px){.metrics{gap:9px}.metric{min-height:100px;padding:12px;gap:9px;display:block}.metric-icon{width:35px;height:35px;font-size:19px;margin-bottom:6px}.metric strong{font-size:20px}.cards-3{grid-template-columns:1fr}.form-grid,.permission-grid{grid-template-columns:1fr}.heading{display:block}.heading-right{margin-top:12px}.panel{padding:14px}.student-hero{padding:24px;display:block}.student-hero-symbol{display:none}.top-end .tenant-switch select{max-width:133px}.top-end{margin-right:auto}.topbar{gap:4px}.hero-content h1{font-size:37px}.hero-content p{font-size:14px}.features{grid-template-columns:1fr}.auth-card{padding:28px 22px}.filter-row .field,.filter-row input,.filter-row select{width:100%}.filter-row{align-items:stretch}}
@media print{.sidebar,.topbar,.footer,.print-hide,.btn,.heading-right,.inline-form,.modal-close{display:none!important}.content{padding:0}.app-shell,.screen{display:block}.panel,.metric{box-shadow:none;border-color:#dedede;break-inside:avoid}.modal:not([hidden]){position:static;background:#fff;padding:0}.modal:not([hidden]) .modal-inner{border:0;box-shadow:none}}
.certificate{margin:auto;max-width:850px;min-height:530px;background:var(--surface);border:8px double #bba267;border-radius:8px;padding:43px;text-align:center;box-shadow:var(--shadow)}.certificate-top{display:flex;align-items:center;gap:15px;font-size:19px;font-weight:800}.certificate-seal{font-size:65px}.certificate h2{font-size:31px;color:var(--primary);margin:8px}.certificate h1{font-size:33px;margin:8px;border-bottom:2px solid var(--accent);display:inline-block;padding:0 25px}.certificate p{color:var(--muted);font-size:18px}.certificate-level{font-size:19px;font-weight:750;margin:23px}.certificate-bottom{display:flex;justify-content:space-between;margin-top:65px;color:var(--muted)}@media(max-width:520px){.certificate{min-height:470px;padding:20px}.certificate h2{font-size:23px}.certificate h1{font-size:25px}.certificate-bottom{display:block}}
.brand-logo{width:46px;height:46px;object-fit:contain;border:1px solid var(--line);border-radius:12px;background:#fff;padding:3px;flex-shrink:0}