:root{--brand-burgundy:#692039;--brand-gold:#c29a52;--brand-ivory:#fbf8f0;--brand-paper:#fffefa;--brand-ink:#30272a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;min-width:320px}body{background:var(--brand-ivory);color:var(--brand-ink);margin:0;font-family:Tahoma,Noto Naskh Arabic,Arial,sans-serif;line-height:1.8}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--brand-gold);outline-offset:4px}.brand-link{border-radius:.65rem;align-items:center;gap:.7rem;width:fit-content;display:inline-flex}.brand-logo-frame{flex:none;width:5.5rem;height:5.5rem;display:block;position:relative}.brand-logo{object-fit:contain;object-position:center}.brand-copy{gap:.05rem;display:grid}.brand-name{color:var(--brand-burgundy);font-size:1.05rem;font-weight:800;line-height:1.65}.brand-tagline{color:#866945;font-size:.77rem;font-weight:700}
.client-demo{color:#34262d;background:linear-gradient(150deg,#fbf8f0,#f6f0e7 65%,#fbf7f1);min-height:100svh;font-family:Tahoma,Noto Naskh Arabic,Arial,sans-serif}.client-demo *{box-sizing:border-box}.client-demo button,.client-demo select,.client-demo input,.client-demo textarea{font:inherit}.client-demo button{cursor:pointer}.client-demo :is(button,input,textarea,select):focus-visible{outline-offset:2px;outline:3px solid #ba9145}.client-demo p{line-height:1.9}.client-demo .demo-header{background:#fffdf9;border-bottom:1px solid #e7d9c3}.client-demo .demo-header-inner{justify-content:space-between;align-items:center;gap:1rem;max-width:1260px;margin:auto;padding:.55rem 1.5rem;display:flex}.client-demo .brand-logo-frame{width:3.55rem;height:3.55rem}.client-demo .brand-name{font-size:1rem}.client-demo .demo-top-label{color:#6b263d;background:#f7e8e9;border:1px solid #e4c7cc;border-radius:30px;padding:.5rem .75rem;font-size:.78rem;font-weight:800}.client-demo .demo-shell{max-width:1240px;margin:auto;padding:2.4rem 1.3rem 3rem}.client-demo .demo-intro{justify-content:space-between;align-items:flex-start;gap:1.5rem;margin-bottom:1.7rem;display:flex}.client-demo .demo-kicker{color:#936c39;letter-spacing:.02em;margin:0 0 .2rem;font-size:.8rem;font-weight:800}.client-demo .demo-intro h1{color:#521b30;margin:.1rem 0;font-size:clamp(1.7rem,3vw,2.65rem);font-weight:850;line-height:1.5}.client-demo .demo-intro p:last-child{color:#6b6062;max-width:780px;margin:.35rem 0}.client-demo .demo-reset{color:#61253a;background:#fffdf9;border:1px solid #d8c5ae;border-radius:.7rem;flex-shrink:0;padding:.8rem 1rem;font-size:.86rem;font-weight:800}.client-demo .demo-reset:hover{background:#f5eade}.client-demo .demo-selector{background:#fffefa;border:1px solid #e7dac8;border-radius:1.15rem;flex-wrap:wrap;align-items:end;gap:1.5rem;margin-bottom:1rem;padding:1.25rem 1.45rem;display:flex;box-shadow:0 .8rem 2rem #41122508}.client-demo .demo-selector>p{color:#807272;margin:0 0 .6rem;font-size:.78rem}.client-demo .demo-role-choice{border:0;flex:1;min-width:0;margin:0;padding:0}.client-demo .demo-role-choice legend{color:#705361;padding:0 0 .45rem;font-size:.78rem;font-weight:800}.client-demo .demo-role-choice button{color:#69414e;background:#f9f3ea;border:1px solid #e0d5c9;border-radius:.65rem;margin:.15rem 0 .15rem .45rem;padding:.55rem .95rem;font-size:.86rem;font-weight:800}.client-demo .demo-role-choice button.is-selected{color:#fffefa;background:#672038;border-color:#672038;box-shadow:0 .25rem .75rem #69203930}.client-demo .demo-country-select{color:#705361;gap:.35rem;min-width:185px;font-size:.78rem;font-weight:800;display:grid}.client-demo .demo-country-select select{color:#392b2c;background:#fdfaf5;border:1px solid #d5c5b0;border-radius:.6rem;min-height:2.8rem;padding:.6rem .8rem}.client-demo .demo-workspace{grid-template-columns:225px minmax(0,1fr);align-items:start;gap:1rem;display:grid}.client-demo .demo-sidebar{background:#fffefa;border:1px solid #e1d2bd;border-radius:1.1rem;min-width:0;padding:1.1rem;box-shadow:0 .75rem 2rem #562a2610}.client-demo .demo-sidebar-caption{letter-spacing:.02em;color:#98764c;margin:0 0 .6rem;font-size:.76rem;font-weight:800}.client-demo .demo-sidebar nav{gap:.35rem;display:grid}.client-demo .demo-sidebar nav button{text-align:right;color:#635258;background:0 0;border:1px solid #0000;border-radius:.65rem;padding:.8rem .85rem;font-size:.86rem;font-weight:750}.client-demo .demo-sidebar nav button:hover{background:#faf3e8}.client-demo .demo-sidebar nav button.is-current{color:#66223a;background:#f4e6da;border-color:#e7d2bb}.client-demo .demo-sidebar-foot{color:#8b7a77;border-top:1px solid #eee2d6;margin-top:1.4rem;padding-top:1rem;font-size:.72rem;line-height:1.9}.client-demo .demo-main-panel{background:#fffefa;border:1px solid #e5d9c7;border-radius:1.1rem;min-width:0;padding:1.7rem;box-shadow:0 1rem 2.8rem #562a2610}.client-demo .demo-section-heading{border-bottom:1px solid #eee3d4;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;display:flex}.client-demo .demo-section-heading small{color:#94774b;font-size:.75rem;font-weight:800}.client-demo .demo-section-heading h2{color:#51182c;margin:.1rem 0 0;font-size:clamp(1.35rem,2vw,1.75rem)}.client-demo .demo-live{color:#426b46;white-space:nowrap;background:#eaf2e9;border-radius:5rem;padding:.35rem .65rem;font-size:.72rem;font-weight:800}.client-demo .demo-flash{color:#674c38;background:#faf3e6;border:1px solid #e8d7bc;border-radius:.65rem;margin:0 0 1.25rem;padding:.65rem .85rem;font-size:.79rem}.client-demo .demo-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:0 0 1.25rem;display:grid}.client-demo .demo-stat{background:linear-gradient(150deg,#f9f2e7,#fffdf9);border:1px solid #e9dbc6;border-radius:.9rem;align-content:start;gap:.2rem;min-width:0;padding:1rem;display:grid}.client-demo .demo-stat span{color:#735e61;font-size:.76rem;font-weight:700}.client-demo .demo-stat strong{color:#68233c;overflow-wrap:anywhere;font-size:clamp(1.18rem,2vw,1.52rem)}.client-demo .demo-stat small{color:#987b62;font-size:.7rem}.client-demo .demo-pane{background:#fffdf8;border:1px solid #eadfce;border-radius:.95rem;min-width:0;margin:1rem 0;padding:1.3rem}.client-demo .demo-pane-title{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem;margin-bottom:.8rem;display:flex}.client-demo .demo-pane-title h2{color:#6b243b;margin:0;font-size:1.12rem}.client-demo .demo-pane-title>span{color:#937b65;font-size:.73rem}.client-demo .demo-step-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;display:grid}.client-demo .demo-step{text-align:right;background:#fff7ed;border:1px solid #e4d2bb;border-radius:.8rem;gap:.3rem;min-width:0;padding:1.1rem .9rem;display:grid}.client-demo .demo-step:hover{background:#fcf0df;border-color:#bf9656}.client-demo .demo-step b{color:#c49a55;font-size:1.45rem}.client-demo .demo-step strong{color:#55263a;font-size:.88rem}.client-demo .demo-step span{color:#7e7070;font-size:.75rem}.client-demo .demo-status-grid{flex-wrap:wrap;gap:.45rem;display:flex}.client-demo .demo-status{white-space:normal;border-radius:5rem;align-items:center;gap:.3rem;padding:.35rem .65rem;font-size:.74rem;font-weight:800;display:inline-flex}.client-demo .demo-status.is-on{color:#3b6e48;background:#e8f3e9}.client-demo .demo-status.is-off{color:#944056;background:#f7e8e9}.client-demo .demo-muted{color:#7f7470;font-size:.82rem}.client-demo .demo-lesson-list{gap:.75rem;display:grid}.client-demo .demo-lesson{background:#fffdf9;border:1px solid #e8dfd1;border-radius:.8rem;flex-wrap:wrap;align-items:center;gap:.9rem;min-width:0;padding:1rem;display:flex}.client-demo .demo-lesson-number{color:#875c28;background:#f6ebd7;border-radius:.65rem;flex:none;place-items:center;width:2.3rem;height:2.3rem;font-weight:900;display:grid}.client-demo .demo-lesson>div{flex:1;min-width:185px}.client-demo .demo-lesson h3{color:#5f253b;margin:0;font-size:.93rem}.client-demo .demo-lesson p{color:#756e68;margin:.12rem 0;font-size:.8rem}.client-demo .demo-lesson small{color:#98774f;font-size:.7rem}.client-demo .demo-media-section{border-top:1px solid #eadfce;margin-top:1.2rem;padding-top:.9rem}.client-demo .demo-media-section h3{color:#572c3a;font-size:1rem}.client-demo .demo-upload{color:#512a2c;cursor:pointer;background:#e9d7b3;border-radius:.62rem;align-items:center;gap:.45rem;padding:.65rem .95rem;font-size:.83rem;font-weight:800;display:inline-flex;position:relative}.client-demo .demo-upload input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.client-demo .demo-video-wrap{color:#fff4e4;background:#181216;border-radius:.85rem;margin:1rem 0;padding:1rem}.client-demo .demo-video-wrap p{font-size:.78rem}.client-demo .demo-video-wrap video{border-radius:.4rem;width:100%;max-height:380px}.client-demo .demo-video-empty{color:#f9eadb;background:linear-gradient(150deg,#321822,#552136);border-radius:.85rem;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;height:195px;margin:1rem 0;display:flex}.client-demo .demo-video-empty>span{color:#e7bb67;font-size:2.5rem}.client-demo .demo-video-empty>small{color:#dbc9c1;font-size:.75rem}.client-demo .demo-actions{flex-wrap:wrap;gap:.6rem;margin-top:1rem;display:flex}.client-demo .demo-primary,.client-demo .demo-secondary{border-radius:.64rem;min-height:2.75rem;padding:.65rem 1rem;font-size:.82rem;font-weight:800}.client-demo .demo-primary{color:#fff;background:#682139;border:1px solid #682139}.client-demo .demo-primary:hover{background:#4e172b}.client-demo .demo-secondary{color:#673344;background:#f9eedc;border:1px solid #e0ccb0}.client-demo .demo-secondary:hover{background:#f1dfc6}.client-demo .demo-warning{color:#a43846;font-weight:800}.client-demo .demo-locked{color:#744f39;background:#fdf4e7;border:1px dashed #d9b995;border-radius:.7rem;padding:1rem;line-height:1.8}.client-demo .demo-question{border:1px solid #e8ddcc;border-radius:.75rem;min-width:0;margin:0 0 .9rem;padding:1rem}.client-demo .demo-question legend{color:#5d2b3b;padding:0 .5rem;font-size:.9rem;font-weight:800}.client-demo .demo-choice{color:#584e51;cursor:pointer;border-radius:.45rem;align-items:center;gap:.65rem;margin:.3rem 0;padding:.45rem .5rem;font-size:.85rem;display:flex}.client-demo .demo-choice:hover{background:#f9efe3}.client-demo .demo-choice input{accent-color:#692039}.client-demo .demo-score{color:#316244;background:#eaf5eb;border:1px solid #bcd7c4;border-radius:.75rem;gap:.3rem;margin:1rem 0;padding:1rem;display:grid}.client-demo .demo-score>span{font-size:.82rem}.client-demo .demo-field{color:#352b31;resize:vertical;background:#fffefa;border:1px solid #d8c6b6;border-radius:.65rem;width:100%;min-width:0;margin:.35rem 0 .85rem;padding:.65rem .85rem;font-size:.87rem;display:block}.client-demo .demo-person-row{align-items:center;gap:.9rem;margin:1rem 0;display:flex}.client-demo .demo-person-row h3{color:#5f233c;margin:0;font-size:.99rem}.client-demo .demo-person-row p{margin:0;font-size:.82rem}.client-demo .demo-avatar{color:#6e213b;background:#eed9b6;border-radius:1rem;flex:none;place-items:center;width:3.3rem;height:3.3rem;font-weight:900;display:grid}.client-demo .demo-meter{background:#f0e5d8;border-radius:2rem;height:.8rem;margin:.65rem 0;overflow:hidden}.client-demo .demo-meter>span{background:#b78d50;border-radius:2rem;height:100%;transition:width .3s;display:block}.client-demo .demo-grade-form{gap:.35rem;margin:1rem 0;display:grid}.client-demo .demo-grade-form>label{color:#5e3443;font-size:.83rem;font-weight:800}.client-demo .demo-assignment{overflow-wrap:anywhere;background:#fdf7ec;border:1px solid #e8d7b6;border-radius:.75rem;padding:1.1rem}.client-demo .demo-switch-row{border:1px solid #e7d7c0;border-radius:.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:1rem;display:flex}.client-demo .demo-switch-row>div{flex:1;min-width:180px}.client-demo .demo-switch-row strong{color:#51283c;display:block}.client-demo .demo-switch-row small{color:#8a7670;margin-top:.2rem;font-size:.76rem;display:block}.client-demo .demo-ticket-list{gap:.75rem;display:grid}.client-demo .demo-ticket-list article{overflow-wrap:anywhere;border:1px solid #e9ddcf;border-radius:.7rem;padding:1rem}.client-demo .demo-ticket-list article strong{color:#652840;font-size:.89rem}.client-demo .demo-footer{color:#806a66;border-top:1px solid #e7dcc9;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-top:1.75rem;padding-top:1.4rem;font-size:.73rem;display:flex}.client-demo .demo-footer strong{color:#672139}@media (max-width:950px){.client-demo .demo-workspace{grid-template-columns:minmax(0,1fr)}.client-demo .demo-sidebar{padding:.8rem}.client-demo .demo-sidebar nav{flex-wrap:wrap;display:flex}.client-demo .demo-sidebar nav button{padding:.55rem .75rem}.client-demo .demo-sidebar-foot{display:none}}@media (max-width:720px){.client-demo .demo-header-inner{flex-wrap:wrap;padding:.5rem 1rem}.client-demo .demo-shell{padding:1.25rem .7rem 2rem}.client-demo .demo-intro{flex-direction:column;gap:1rem}.client-demo .demo-selector,.client-demo .demo-main-panel{padding:1rem}.client-demo .demo-step-grid{grid-template-columns:minmax(0,1fr)}.client-demo .demo-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.client-demo .demo-section-heading{align-items:flex-start}.client-demo .demo-pane{padding:1rem}.client-demo .demo-lesson>div{min-width:0}}@media (max-width:420px){.client-demo .demo-top-label{font-size:.7rem}.client-demo .demo-role-choice button{margin:.15rem;padding:.45rem .6rem;font-size:.78rem}.client-demo .demo-stat{padding:.75rem}.client-demo .demo-section-heading{flex-wrap:wrap}}.client-demo .demo-code{color:#6f253d;letter-spacing:.03em;overflow-wrap:anywhere;direction:ltr;unicode-bidi:isolate;background:#f4ebda;border:1px solid #e1cba6;border-radius:.45rem;margin-inline:.2rem;padding:.35rem .6rem;font-family:Consolas,Courier New,monospace;font-weight:900;display:inline-block}
