@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--navy:#061025;--navy-2:#0a1733;--surface:#0d1d3d;--surface-2:#102449;--surface-3:#152b54;--text:#f6f8ff;--muted:#a9b7d3;--line:rgba(255,255,255,.1);--brand-primary:#15c8ef;--brand-secondary:#7a4dff;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--info:#38bdf8;--white:#fff;--shadow:0 22px 60px rgba(0,0,0,.28);--radius:20px;--radius-sm:12px;--container:1220px;--header-h:76px;--sidebar-w:270px;--app-font:"IBM Plex Sans Arabic","Inter",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#061025 0%,#071632 52%,#061025 100%);color:var(--text);font-family:var(--app-font);line-height:1.65;min-height:100vh}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 10%,rgba(21,200,239,.09),transparent 28%),radial-gradient(circle at 85% 5%,rgba(122,77,255,.12),transparent 25%);z-index:-1}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}button{cursor:pointer}.container{width:min(calc(100% - 32px),var(--container));margin-inline:auto}.skip-link{position:fixed;inset-inline-start:16px;top:-80px;background:#fff;color:#000;padding:10px 16px;z-index:9999;border-radius:8px}.skip-link:focus{top:12px}.main-content{min-height:55vh}.section{padding:78px 0}.section-sm{padding:46px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}.section-head h1,.section-head h2{margin:0;line-height:1.2}.section-head p{margin:8px 0 0;color:var(--muted);max-width:720px}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--brand-primary);font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}.eyebrow:before{content:"";width:28px;height:2px;background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary))}.lead{font-size:1.12rem;color:var(--muted);max-width:760px}.muted{color:var(--muted)}.text-danger{color:#fda4af}.text-success{color:#86efac}.text-warning{color:#fcd34d}.text-center{text-align:center}.stack{display:grid;gap:16px}.stack-lg{display:grid;gap:28px}.grid{display:grid;gap:22px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:linear-gradient(145deg,rgba(17,37,75,.94),rgba(9,23,51,.95));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 34px rgba(0,0,0,.16);padding:24px}.card-flat{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:var(--radius);padding:22px}.glass{background:rgba(10,25,55,.72);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:var(--shadow)}.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;font-size:.78rem;font-weight:700;background:rgba(21,200,239,.12);color:#93ecff;border:1px solid rgba(21,200,239,.22)}.badge.success{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.25)}.badge.warning{background:rgba(245,158,11,.12);color:#fcd34d;border-color:rgba(245,158,11,.25)}.badge.danger{background:rgba(239,68,68,.12);color:#fda4af;border-color:rgba(239,68,68,.25)}.badge.gray{background:rgba(255,255,255,.07);color:#cbd5e1}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border-radius:12px;padding:10px 18px;border:1px solid transparent;font-weight:800;transition:.2s ease;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,var(--brand-primary),#0aa8d7 45%,var(--brand-secondary));color:#fff;box-shadow:0 12px 26px rgba(21,200,239,.16)}.btn-secondary{background:linear-gradient(135deg,var(--brand-secondary),#5d38dc);color:#fff}.btn-outline{border-color:rgba(21,200,239,.4);color:#9beeff;background:rgba(21,200,239,.05)}.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--text)}.btn-light{background:#fff;color:#07122d}.btn-danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:#fecaca}.btn-sm{min-height:36px;padding:7px 13px;font-size:.88rem}.btn-xs{min-height:30px;padding:4px 10px;font-size:.78rem}.btn-block{width:100%}.inline-form{display:inline-flex}.icon-btn{border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center}.announcement{background:linear-gradient(90deg,#0f58a7,#693fe5);color:#fff;position:relative;z-index:70}.announcement-inner{min-height:42px;display:flex;align-items:center;justify-content:center;gap:30px;font-size:.9rem}.announcement-inner>div:first-child{display:flex;gap:10px;align-items:center}.announcement-actions{display:flex;align-items:center;gap:8px}.site-header{height:var(--header-h);position:sticky;top:0;z-index:60;background:rgba(6,16,37,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.header-inner{height:100%;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:10px;min-width:205px}.brand img{width:52px;height:52px;object-fit:contain;border-radius:14px}.brand span{display:grid;line-height:1.15}.brand b{font-size:1.05rem}.brand small{font-size:.65rem;color:var(--muted);letter-spacing:.06em}.primary-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}.primary-nav>a{padding:8px 11px;color:#d7def1;border-radius:10px;font-size:.92rem;font-weight:700}.primary-nav>a:hover,.primary-nav>a.active{background:rgba(21,200,239,.09);color:#8cecff}.header-actions{display:flex;align-items:center;gap:8px}.currency-switch select,.language-switch{height:36px;background:rgba(255,255,255,.05);color:#fff;border:1px solid var(--line);border-radius:10px;padding:5px 9px}.currency-switch option{color:#111}.avatar-button{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));display:grid;place-items:center;font-weight:800}.mobile-menu-button,.mobile-auth-links{display:none}.app-shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:calc(100vh - var(--header-h))}.app-sidebar{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow:auto;border-inline-end:1px solid var(--line);background:rgba(7,18,43,.92);padding:22px 14px;z-index:30}.sidebar-user{display:flex;gap:12px;align-items:center;padding:10px 10px 20px;border-bottom:1px solid var(--line);margin-bottom:14px}.user-avatar{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));display:grid;place-items:center;font-weight:800;overflow:hidden;flex:0 0 44px}.user-avatar img{width:100%;height:100%;object-fit:cover}.sidebar-user div:last-child{min-width:0}.sidebar-user strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-user small{color:var(--muted)}.sidebar-nav{display:grid;gap:4px}.sidebar-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:#c4cfe5;font-size:.9rem}.sidebar-nav a span{width:24px;text-align:center;color:#78e5ff}.sidebar-nav a:hover,.sidebar-nav a.active{background:linear-gradient(90deg,rgba(21,200,239,.14),rgba(122,77,255,.10));color:#fff}.sidebar-logout{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}.sidebar-logout button{width:100%;display:flex;gap:10px;align-items:center;background:transparent;color:#fda4af;border:0;padding:10px 12px}.app-workspace{min-width:0}.authenticated .site-footer{margin-inline-start:var(--sidebar-w)}.flash{margin-top:18px;border-radius:14px;padding:12px 16px;border:1px solid}.flash-success{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#bbf7d0}.flash-error{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#fecaca}.hero{padding:64px 0 72px;position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:50px}.hero h1{font-size:clamp(2.25rem,5vw,4.8rem);line-height:1.05;margin:0 0 18px;letter-spacing:-.03em}.gradient-text{background:linear-gradient(110deg,#fff 10%,#7cecff 50%,#a887ff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.hero-points span{font-size:.86rem;color:#cbd5e1;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:7px 11px;border-radius:999px}.hero-media{position:relative}.hero-media:before{content:"";position:absolute;inset:8% 4%;background:linear-gradient(135deg,rgba(21,200,239,.25),rgba(122,77,255,.25));filter:blur(60px)}.hero-media img,.hero-media video,.hero-media iframe{position:relative;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:28px;border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow)}.video-frame{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#020617;border:1px solid var(--line);position:relative}.video-frame iframe,.video-frame video,.video-frame img{width:100%;height:100%;object-fit:cover;border:0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat-card{text-align:center;padding:24px}.stat-card strong{display:block;font-size:2rem;color:#fff}.stat-card span{color:var(--muted)}.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.course-card{display:flex;flex-direction:column;overflow:hidden;padding:0}.course-thumb{position:relative;aspect-ratio:16/10;background:#09162f;overflow:hidden}.course-thumb img{width:100%;height:100%;object-fit:cover;transition:.35s}.course-card:hover .course-thumb img{transform:scale(1.04)}.course-thumb .badge{position:absolute;top:14px;inset-inline-start:14px}.favorite-form{position:absolute;top:12px;inset-inline-end:12px}.favorite-form button{width:38px;height:38px;border-radius:12px;background:rgba(4,12,31,.72);border:1px solid rgba(255,255,255,.16);color:#fff}.course-body{display:flex;flex-direction:column;gap:12px;padding:20px;flex:1}.course-body h3{font-size:1.12rem;margin:0;line-height:1.4}.course-body p{color:var(--muted);margin:0;font-size:.91rem}.course-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:#aebbd4;font-size:.82rem}.course-price{display:flex;align-items:baseline;gap:9px;margin-top:auto}.course-price strong{font-size:1.35rem;color:#fff}.course-price del{color:#7f8ba3}.course-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}.rating{display:flex;align-items:center;gap:6px;color:#fbbf24}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.service-card{position:relative;overflow:hidden}.service-card:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;background:rgba(122,77,255,.13);top:-60px;inset-inline-end:-50px}.service-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(21,200,239,.18),rgba(122,77,255,.2));color:#8deaff;font-size:1.35rem;margin-bottom:16px}.service-card h3{margin:0 0 8px}.service-card p{color:var(--muted);margin:0 0 18px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{display:flex;gap:15px;align-items:flex-start}.feature-icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:rgba(21,200,239,.12);display:grid;place-items:center;color:#8deaff}.testimonial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.testimonial-card blockquote{margin:0 0 18px;color:#dce4f5}.testimonial-person{display:flex;align-items:center;gap:12px}.testimonial-person img,.testimonial-person .avatar{width:46px;height:46px;border-radius:14px;object-fit:cover;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));display:grid;place-items:center;font-weight:800}.faq-list{display:grid;gap:12px}.faq-item{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:15px;overflow:hidden}.faq-item summary{cursor:pointer;padding:17px 20px;font-weight:800;list-style:none;display:flex;justify-content:space-between}.faq-item summary:after{content:"+";color:var(--brand-primary)}.faq-item[open] summary:after{content:"−"}.faq-answer{padding:0 20px 18px;color:var(--muted)}.cta-panel{padding:42px;border-radius:28px;background:linear-gradient(125deg,rgba(15,88,167,.78),rgba(105,63,229,.75));border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-panel h2{margin:0 0 8px}.page-hero{padding:52px 0 34px}.page-hero h1{font-size:clamp(2rem,4vw,3.4rem);margin:0 0 10px}.breadcrumbs{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.86rem;margin-bottom:14px}.filters-panel{padding:20px;margin-bottom:26px}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.field{display:grid;gap:7px}.field label{font-size:.85rem;color:#d4ddec;font-weight:700}.field input,.field select,.field textarea,.input{width:100%;background:rgba(3,10,27,.55);border:1px solid var(--line);color:#fff;border-radius:11px;padding:11px 13px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(21,200,239,.55);box-shadow:0 0 0 3px rgba(21,200,239,.08)}.field select option{color:#111}.field textarea{min-height:120px;resize:vertical}.field.span-2{grid-column:span 2}.field.span-3{grid-column:span 3}.field.span-4{grid-column:1/-1}.check-row{display:flex;align-items:center;gap:9px}.check-row input{width:auto}.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.pagination{display:flex;justify-content:center;gap:7px;margin-top:28px}.pagination a,.pagination span{min-width:38px;height:38px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line)}.pagination .active{background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));border-color:transparent}.empty-state{text-align:center;padding:56px 24px}.empty-state strong{display:block;font-size:1.25rem;margin-bottom:8px}.course-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:30px;align-items:start}.course-title-block h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.15;margin:12px 0}.course-share{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.course-share a{padding:7px 11px;border:1px solid var(--line);border-radius:10px;color:#cdd8ec;font-size:.85rem}.purchase-card{position:sticky;top:calc(var(--header-h) + 22px)}.purchase-card .price-big{font-size:2rem;font-weight:800;margin:12px 0}.purchase-card ul{padding-inline-start:20px;color:var(--muted)}.offer-countdown{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.offer-countdown span{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;padding:7px 9px;font-size:.8rem}.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow:auto}.tabs button,.tabs a{background:transparent;border:0;color:var(--muted);padding:11px 15px;border-bottom:2px solid transparent;white-space:nowrap}.tabs button.active,.tabs a.active{color:#fff;border-color:var(--brand-primary)}[data-tab-panel][hidden]{display:none!important}.accordion-module{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}.accordion-module summary{padding:15px 17px;cursor:pointer;background:rgba(255,255,255,.03);font-weight:800}.lesson-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 17px;border-top:1px solid var(--line);color:#cbd5e1}.lesson-row small{color:var(--muted)}.checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:28px;align-items:start}.order-summary{position:sticky;top:calc(var(--header-h) + 22px)}.summary-line{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}.summary-line.total{font-size:1.18rem;font-weight:800;border:0}.payment-methods{display:grid;gap:12px}.payment-method{position:relative}.payment-method input{position:absolute;opacity:0}.payment-method label{display:block;border:1px solid var(--line);border-radius:14px;padding:15px;cursor:pointer;background:rgba(255,255,255,.03)}.payment-method input:checked+label{border-color:var(--brand-primary);background:rgba(21,200,239,.08)}.dashboard-page{padding:30px}.dashboard-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.dashboard-header h1{margin:0}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}.metric-card{display:flex;align-items:center;justify-content:space-between;gap:12px}.metric-card strong{font-size:1.8rem;display:block}.metric-card small{color:var(--muted)}.metric-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:rgba(21,200,239,.11);color:#8cecff;font-size:1.25rem}.data-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px}.data-table{width:100%;border-collapse:collapse;min-width:760px}.data-table th,.data-table td{text-align:start;padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:top}.data-table th{font-size:.78rem;text-transform:uppercase;color:#92a3bf;background:rgba(255,255,255,.035);position:sticky;top:0}.data-table tr:hover td{background:rgba(255,255,255,.02)}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.progress{height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary));border-radius:inherit}.status-pill{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.78rem;font-weight:700;background:rgba(255,255,255,.07);color:#d4ddec}.status-pill.active,.status-pill.approved,.status-pill.completed,.status-pill.paid,.status-pill.published{background:rgba(34,197,94,.12);color:#86efac}.status-pill.pending,.status-pill.in_review,.status-pill.waiting_reply{background:rgba(245,158,11,.12);color:#fcd34d}.status-pill.rejected,.status-pill.failed,.status-pill.revoked,.status-pill.critical{background:rgba(239,68,68,.12);color:#fda4af}.admin-tabs{display:flex;gap:8px;overflow:auto;margin-bottom:20px}.admin-tabs a{padding:9px 14px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);white-space:nowrap}.admin-tabs a:hover{border-color:rgba(21,200,239,.4)}.editor-grid{display:grid;grid-template-columns:390px minmax(0,1fr);gap:22px}.sticky-panel{position:sticky;top:calc(var(--header-h) + 20px);align-self:start}.list-card{display:grid;gap:8px}.list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025)}.list-item-content{min-width:0}.list-item strong{display:block}.list-item small{color:var(--muted)}.media-preview{width:86px;height:62px;object-fit:cover;border-radius:10px;background:#07112a}.notice{padding:13px 16px;border-radius:13px;background:rgba(56,189,248,.09);border:1px solid rgba(56,189,248,.24);color:#bae6fd}.warning-box{padding:13px 16px;border-radius:13px;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.24);color:#fde68a}.danger-box{padding:13px 16px;border-radius:13px;background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.24);color:#fecaca}.site-footer{border-top:1px solid var(--line);background:#040c1e;padding:54px 0 18px;margin-top:70px}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px}.footer-grid h3{margin-top:0}.footer-grid a,.footer-grid p{display:block;color:var(--muted);margin:7px 0}.footer-logo{width:160px;max-height:80px;object-fit:contain;margin-bottom:12px}.social-icons{display:flex;gap:8px;margin-top:12px}.social-icons a{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;margin:0}.footer-bottom{border-top:1px solid var(--line);margin-top:30px;padding-top:16px;display:flex;justify-content:space-between;color:#8290aa;font-size:.83rem}.floating-whatsapp{position:fixed;bottom:22px;inset-inline-end:20px;z-index:80;display:flex;align-items:center;gap:8px;background:#18a958;color:#fff;padding:10px 14px;border-radius:999px;box-shadow:0 14px 35px rgba(0,0,0,.3)}.floating-whatsapp span{font-weight:900}.chatbot{position:fixed;bottom:22px;inset-inline-start:20px;z-index:90}.chatbot-launcher{border:1px solid var(--line);background:rgba(7,18,45,.94);color:#fff;border-radius:999px;padding:8px 13px 8px 8px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow)}.chatbot-launcher img{width:34px;height:34px;border-radius:50%;object-fit:contain}.chatbot-panel{position:absolute;bottom:58px;inset-inline-start:0;width:min(380px,calc(100vw - 32px));height:500px;background:#071630;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}.chatbot-panel header{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.chatbot-panel header div{display:grid}.chatbot-panel header small{color:var(--muted)}.chatbot-close{border:0;background:transparent;color:#fff;font-size:1.5rem}.chatbot-messages{padding:14px;overflow:auto;display:flex;flex-direction:column;gap:10px}.chat-message{max-width:88%;padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.06)}.chat-message.user{margin-inline-start:auto;background:rgba(21,200,239,.16)}.chatbot-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}.chatbot-form input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:11px;color:#fff;padding:10px}.chatbot-form button{border:0;border-radius:10px;background:var(--brand-primary);color:#051021;padding:8px 13px;font-weight:800}.auth-shell{min-height:calc(100vh - var(--header-h));display:grid;place-items:center;padding:48px 16px}.auth-card{width:min(520px,100%);padding:30px}.auth-card h1{margin-top:0}.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:16px;color:#9edff0}.quiz-option{display:flex;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;margin:8px 0}.lesson-player-shell{position:relative}.content-watermark{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;overflow:hidden;opacity:.12;z-index:5}.content-watermark span{transform:rotate(-28deg);font-size:1.2rem;font-weight:800;white-space:nowrap}.certificate-card{border:1px solid rgba(21,200,239,.28);background:linear-gradient(145deg,rgba(21,200,239,.07),rgba(122,77,255,.08));position:relative;overflow:hidden}.certificate-card:after{content:"◇";position:absolute;font-size:8rem;opacity:.05;inset-inline-end:-10px;bottom:-35px}.timeline{display:grid;gap:0}.timeline-item{position:relative;padding:0 0 22px 28px}.timeline-item:before{content:"";position:absolute;inset-inline-start:7px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--brand-primary)}.timeline-item:after{content:"";position:absolute;inset-inline-start:11px;top:19px;bottom:0;width:2px;background:var(--line)}.timeline-item:last-child:after{display:none}
@media(max-width:1100px){.primary-nav{gap:0}.primary-nav>a{padding:7px 8px;font-size:.85rem}.header-actions .btn{display:none}.grid-4,.metric-grid{grid-template-columns:repeat(2,1fr)}.course-grid,.service-grid,.testimonial-grid{grid-template-columns:repeat(2,1fr)}.hero-grid{gap:28px}.editor-grid{grid-template-columns:1fr}.sticky-panel{position:static}}
@media(max-width:900px){:root{--sidebar-w:0px}.header-actions .currency-switch{display:none}.mobile-menu-button{display:grid;gap:4px;background:transparent;border:0;padding:8px;margin-inline-start:auto}.mobile-menu-button span{display:block;width:24px;height:2px;background:#fff}.primary-nav{position:fixed;top:var(--header-h);inset-inline:12px;display:none;flex-direction:column;align-items:stretch;background:#071630;border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow)}.primary-nav.open{display:flex}.primary-nav>a{padding:11px}.mobile-auth-links{display:grid;gap:4px;border-top:1px solid var(--line);padding-top:8px}.mobile-auth-links a,.mobile-auth-links button{display:block;width:100%;text-align:start;padding:10px;background:transparent;color:#fff;border:0}.app-shell{display:block}.app-sidebar{position:fixed;top:var(--header-h);bottom:0;inset-inline-start:-290px;width:270px;height:auto;transition:.25s;box-shadow:var(--shadow)}.app-sidebar.open{inset-inline-start:0}.authenticated .mobile-menu-button:after{content:""}.authenticated .site-footer{margin-inline-start:0}.hero-grid,.course-hero-grid,.checkout-grid{grid-template-columns:1fr}.hero-media{order:-1}.purchase-card,.order-summary{position:static}.footer-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}.field.span-3,.field.span-4{grid-column:1/-1}.dashboard-page{padding:24px 16px}}
@media(max-width:640px){.container{width:min(calc(100% - 22px),var(--container))}.brand span{display:none}.header-actions .btn,.header-actions .currency-switch{display:none}.announcement-inner{padding:8px 0;align-items:flex-start}.announcement-inner>div:first-child{display:grid;gap:2px}.section{padding:52px 0}.hero{padding:38px 0 50px}.hero h1{font-size:2.45rem}.grid-2,.grid-3,.grid-4,.course-grid,.service-grid,.testimonial-grid,.feature-grid,.stats-grid,.metric-grid,.form-grid{grid-template-columns:1fr}.field.span-2,.field.span-3,.field.span-4{grid-column:auto}.section-head,.dashboard-header,.cta-panel,.footer-bottom{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr}.course-hero-grid{gap:18px}.checkout-grid{gap:18px}.card{padding:18px}.dashboard-page{padding:18px 11px}.floating-whatsapp b,.chatbot-launcher span{display:none}.floating-whatsapp,.chatbot-launcher{width:48px;height:48px;padding:0;justify-content:center}.chatbot{bottom:18px}.floating-whatsapp{bottom:18px}.site-footer{padding-top:40px}.data-table{min-width:680px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Phase 3 compatibility layer for the retained administration, teacher and reviewer screens. */
.dashboard-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:24px}.dashboard-head h1{margin:0}.dashboard-head p{margin:7px 0 0;color:var(--muted);max-width:760px}.button-group,.button-row,.table-actions,.download-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.btn-lg{min-height:50px;padding:12px 22px}.grow{flex:1}.block{display:block}.top-gap{margin-top:22px}.narrow{max-width:820px;margin-inline:auto}.narrow-wide{max-width:1050px;margin-inline:auto}.panel{background:linear-gradient(145deg,rgba(17,37,75,.94),rgba(9,23,51,.95));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 34px rgba(0,0,0,.16);padding:22px;margin-bottom:22px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}.panel-head h2,.panel-head h3{margin:0}.form-stack{display:grid;gap:16px}.form-stack>label,.form-grid>label,.settings-group>label{display:grid;gap:7px;color:#d4ddec;font-size:.88rem;font-weight:700}.form-stack input:not([type=checkbox]):not([type=radio]),.form-stack select,.form-stack textarea,.form-grid input:not([type=checkbox]):not([type=radio]),.form-grid select,.form-grid textarea,.setting-row input,.setting-row select,.setting-row textarea{width:100%;background:rgba(3,10,27,.55);border:1px solid var(--line);color:#fff;border-radius:11px;padding:11px 13px;outline:none}.form-stack select option,.form-grid select option,.setting-row select option{color:#111}.form-stack textarea,.form-grid textarea,.setting-row textarea{resize:vertical}.form-stack input:focus,.form-stack select:focus,.form-stack textarea:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:rgba(21,200,239,.55);box-shadow:0 0 0 3px rgba(21,200,239,.08)}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.form-section{border:1px solid var(--line);border-radius:15px;padding:16px;background:rgba(255,255,255,.02)}.form-errors,.notice-box{padding:13px 16px;border-radius:13px;background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.24);color:#fecaca}.help-text{display:block;color:var(--muted);font-size:.78rem;font-weight:400}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:15px}.table-wrap table{width:100%;border-collapse:collapse;min-width:720px}.table-wrap th,.table-wrap td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}.table-wrap th{color:#96a6c0;background:rgba(255,255,255,.035);font-size:.8rem}.table-link{background:transparent;border:0;color:#8cecff;padding:3px;font-weight:700}.table-link.danger{color:#fda4af}.empty-cell{text-align:center;color:var(--muted);padding:30px!important}.dashboard-grid{display:grid;gap:22px}.dashboard-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-grid.main-side{grid-template-columns:minmax(0,1fr) 340px}.metric-grid-8{grid-template-columns:repeat(4,minmax(0,1fr))}.compact-list{display:grid;gap:8px;padding:0;margin:0;list-style:none}.compact-list li{padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.025)}.admin-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.admin-shortcuts a{border:1px solid var(--line);border-radius:13px;padding:14px;background:rgba(255,255,255,.025)}.admin-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.content-scroll{max-height:560px}.compact-form{gap:9px}.brand-upload-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.brand-upload-grid label{display:grid;gap:8px}.brand-preview{height:110px;width:100%;object-fit:contain;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:13px;padding:9px}.settings-group{display:grid;gap:13px;margin-bottom:28px}.settings-group h2{border-bottom:1px solid var(--line);padding-bottom:9px}.setting-row{grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr)!important;align-items:start}.setting-row>span{display:grid}.setting-row small{color:var(--muted);font-weight:400}.feedback-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.feedback-admin-grid article{border:1px solid var(--line);border-radius:14px;padding:13px}.feedback-admin-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;margin-bottom:10px}.avatar-letter{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));display:grid;place-items:center;font-weight:800}.check-stack,.check-grid{display:grid;gap:10px}.check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grading-card,.question-card,.module-card,.payment-card,.report-card{border:1px solid var(--line);border-radius:15px;padding:16px;background:rgba(255,255,255,.025)}.grading-form{display:grid;gap:12px}.curriculum-list,.lesson-list,.resource-list,.option-list,.announcement-list,.intent-list{display:grid;gap:10px}.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px}.lesson-sidebar{position:sticky;top:calc(var(--header-h) + 20px);align-self:start}.lesson-title{margin-top:0}.lesson-status,.resource-locked{color:var(--muted);font-size:.84rem}.secure-video-shell{position:relative}.moving-watermark{position:absolute;inset:0;pointer-events:none;z-index:3;display:grid;place-items:center;opacity:.15}.video-protection-note{margin-top:8px;color:var(--muted);font-size:.8rem}.quiz-header,.quiz-meta,.review-facts{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.quiz-instructions,.quiz-callout,.content-note{padding:13px 16px;border:1px solid rgba(56,189,248,.24);background:rgba(56,189,248,.08);border-radius:13px}.option-item{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);padding:11px;border-radius:11px}.quiz-submit-bar{position:sticky;bottom:10px;padding:12px;background:rgba(6,16,37,.9);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;display:flex;justify-content:flex-end}.report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.report-icon{font-size:1.7rem}.health-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.prose{max-width:850px}.prose p,.prose li{color:#cbd5e1}.error-page{text-align:center;padding:90px 20px}.error-code{font-size:clamp(4rem,12vw,9rem);line-height:1;margin:0;color:#7cecff}.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}.payment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.content-scroll{overflow:auto}.autosave-status{color:var(--muted);font-size:.8rem}
@media(max-width:1100px){.admin-content-grid,.brand-upload-grid,.admin-shortcuts,.feedback-admin-grid,.report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid.main-side,.lesson-layout{grid-template-columns:1fr}.lesson-sidebar{position:static}.metric-grid-8{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.dashboard-head{align-items:flex-start;flex-direction:column}.form-grid.two,.form-grid.three,.form-grid.four,.dashboard-grid.two,.dashboard-grid.three,.admin-content-grid,.brand-upload-grid,.admin-shortcuts,.feedback-admin-grid,.report-grid,.health-grid,.payment-grid,.three-col{grid-template-columns:1fr}.setting-row{grid-template-columns:1fr!important}.panel{padding:16px}.metric-grid-8{grid-template-columns:1fr}}

/* Phase 4 mobile overflow hardening for review and dashboard content. */
.dashboard-grid,.dashboard-grid>*{min-width:0}
.panel,.module-card,.lesson-row,.review-facts,.review-facts>*{overflow-wrap:anywhere;word-break:break-word;min-width:0}

/* FIX: honor the hidden state of the chatbot panel */
.chatbot-panel[hidden]{display:none!important}


.chatbot-panel[hidden] {
    display: none !important;
}
/* ========================================================================== 
   All in AI — final maintainable theme layer
   Light is the default; dark mode is opt-in. Tokens follow a restrained
   spacing, typography and contrast system for consistent maintenance.
   ========================================================================== */
:root,
html[data-theme="light"]{
  color-scheme:light;
  --navy:#f7f9fc;
  --navy-2:#eef3f9;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#eef4fb;
  --text:#172033;
  --muted:#65738a;
  --line:#dce4ef;
  --white:#ffffff;
  --success:#14804a;
  --warning:#a45b00;
  --danger:#c6283d;
  --info:#0b72b9;
  --shadow:0 18px 50px rgba(31,49,78,.10);
  --shadow-sm:0 8px 24px rgba(31,49,78,.08);
  --focus:0 0 0 3px color-mix(in srgb,var(--brand-primary) 28%,transparent);
  --radius:18px;
  --radius-sm:11px;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --navy:#0b1220;
  --navy-2:#111b2e;
  --surface:#142036;
  --surface-2:#18263f;
  --surface-3:#20304d;
  --text:#f4f7fb;
  --muted:#a9b7cc;
  --line:#2b3b58;
  --white:#ffffff;
  --success:#4ade80;
  --warning:#fbbf24;
  --danger:#fb7185;
  --info:#38bdf8;
  --shadow:0 22px 60px rgba(0,0,0,.30);
  --shadow-sm:0 10px 28px rgba(0,0,0,.22);
}
html{background:var(--navy)}
body{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy) 100%);color:var(--text);transition:background-color .2s ease,color .2s ease}
body:before{background:radial-gradient(circle at 15% 8%,color-mix(in srgb,var(--brand-primary) 9%,transparent),transparent 30%),radial-gradient(circle at 88% 4%,color-mix(in srgb,var(--brand-secondary) 9%,transparent),transparent 28%)}
:focus-visible{outline:2px solid var(--brand-primary);outline-offset:3px}
::selection{background:color-mix(in srgb,var(--brand-primary) 28%,transparent)}
.card,.panel{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-sm);color:var(--text)}
.card-flat,.form-section,.grading-card,.question-card,.module-card,.payment-card,.report-card,.compact-list li,.admin-shortcuts a{background:var(--surface-2);border-color:var(--line)}
.glass{background:color-mix(in srgb,var(--surface) 88%,transparent);border-color:var(--line);box-shadow:var(--shadow)}
.muted,.lead,.help-text,.lesson-status,.resource-locked,.video-protection-note,.autosave-status,.section-head p{color:var(--muted)}
.prose p,.prose li{color:var(--text)}
.eyebrow{color:color-mix(in srgb,var(--brand-primary) 72%,#005b7b)}
.btn{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,color-mix(in srgb,var(--brand-primary) 80%,#087da5),var(--brand-secondary));color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--brand-primary) 18%,transparent)}
.btn-outline{border-color:color-mix(in srgb,var(--brand-primary) 48%,var(--line));color:color-mix(in srgb,var(--brand-primary) 70%,#075572);background:color-mix(in srgb,var(--brand-primary) 7%,var(--surface))}
html[data-theme="dark"] .btn-outline{color:#9cecff}
.btn-ghost{background:var(--surface-2);border-color:var(--line);color:var(--text)}
.btn-danger{background:color-mix(in srgb,var(--danger) 10%,var(--surface));border-color:color-mix(in srgb,var(--danger) 30%,var(--line));color:var(--danger)}
.icon-btn{border-color:var(--line);background:var(--surface-2);color:var(--text)}
.badge{background:color-mix(in srgb,var(--brand-primary) 10%,var(--surface));color:color-mix(in srgb,var(--brand-primary) 65%,#075572);border-color:color-mix(in srgb,var(--brand-primary) 25%,var(--line))}
.badge.gray{background:var(--surface-3);color:var(--muted);border-color:var(--line)}
.badge.success,.badge-success{background:color-mix(in srgb,var(--success) 11%,var(--surface));color:var(--success);border-color:color-mix(in srgb,var(--success) 28%,var(--line))}
.badge.warning,.badge-warning{background:color-mix(in srgb,var(--warning) 10%,var(--surface));color:var(--warning);border-color:color-mix(in srgb,var(--warning) 28%,var(--line))}
.badge.danger,.badge-danger{background:color-mix(in srgb,var(--danger) 10%,var(--surface));color:var(--danger);border-color:color-mix(in srgb,var(--danger) 28%,var(--line))}

.site-header{background:color-mix(in srgb,var(--surface) 92%,transparent);border-bottom:1px solid var(--line);box-shadow:0 6px 24px rgba(31,49,78,.06)}
.brand span b,.primary-nav a,.header-actions,.mobile-auth-links a,.mobile-auth-links button{color:var(--text)}
.brand span small{color:var(--muted)}
.primary-nav a:hover,.primary-nav a.active{color:color-mix(in srgb,var(--brand-primary) 70%,#075572);background:color-mix(in srgb,var(--brand-primary) 8%,var(--surface))}
.header-actions select,.language-switch,.theme-toggle,.avatar-button{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.theme-toggle{width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center;padding:0;font-size:1.05rem}
.mobile-menu-button span{background:var(--text)}

.app-sidebar{background:var(--surface);border-inline-end:1px solid var(--line);color:var(--text)}
.sidebar-user,.sidebar-nav a,.sidebar-logout button{border-color:var(--line);color:var(--text)}
.sidebar-nav a:hover,.sidebar-nav a.active{background:color-mix(in srgb,var(--brand-primary) 9%,var(--surface));color:color-mix(in srgb,var(--brand-primary) 68%,#075572)}
.app-workspace{background:transparent}
.site-footer{background:var(--surface);border-top:1px solid var(--line);color:var(--text)}
.site-footer p,.site-footer a,.footer-bottom{color:var(--muted)}
.site-footer h3{color:var(--text)}
.social-icons a{background:var(--surface-2);border:1px solid var(--line);color:var(--text)}

.form-stack>label,.form-grid>label,.settings-group>label,.field label{color:var(--text)}
.form-stack input:not([type=checkbox]):not([type=radio]),.form-stack select,.form-stack textarea,.form-grid input:not([type=checkbox]):not([type=radio]),.form-grid select,.form-grid textarea,.setting-row input,.setting-row select,.setting-row textarea,.field input,.field select,.field textarea{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.form-stack input:focus,.form-stack select:focus,.form-stack textarea:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-primary);box-shadow:var(--focus);outline:0}
.form-stack select option,.form-grid select option,.setting-row select option,.field select option{background:var(--surface);color:var(--text)}
.notice,.notice-box,.quiz-instructions,.quiz-callout,.content-note{background:color-mix(in srgb,var(--info) 7%,var(--surface));border-color:color-mix(in srgb,var(--info) 25%,var(--line));color:var(--text)}
.form-errors,.flash-error{background:color-mix(in srgb,var(--danger) 8%,var(--surface));border-color:color-mix(in srgb,var(--danger) 28%,var(--line));color:var(--danger)}
.flash-success{background:color-mix(in srgb,var(--success) 8%,var(--surface));border-color:color-mix(in srgb,var(--success) 28%,var(--line));color:var(--success)}
.table-wrap{border-color:var(--line);background:var(--surface)}
.table-wrap th{color:var(--muted);background:var(--surface-2)}
.table-wrap td,.table-wrap th{border-color:var(--line)}
.table-link{color:color-mix(in srgb,var(--brand-primary) 72%,#075572)}

/* Checkout and payment-review flow */
.checkout-layout,.checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:28px;align-items:start}
.checkout-main{min-width:0}
.checkout-form{display:grid;gap:24px}
.checkout-fieldset{margin:0;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:22px;display:grid;gap:18px}
.checkout-fieldset legend{font-weight:800;padding-inline:8px;color:var(--text)}
.checkout-step{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));color:#fff;margin-inline-end:8px}
.payment-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.payment-method-option,.payment-method-card{position:relative;border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:14px;cursor:pointer;transition:.18s ease}
.payment-method-option:has(input:checked),.payment-method-option.selected,.payment-method-card:has(input:checked),.payment-method-card.selected{border-color:var(--brand-primary);box-shadow:var(--focus);background:color-mix(in srgb,var(--brand-primary) 6%,var(--surface))}
.payment-method-option input,.payment-method-card input{position:absolute;opacity:0;pointer-events:none}
.payment-method-option small,.payment-method-card small{display:block;color:var(--muted)}
.payment-method-details{padding:14px;border-radius:13px;background:var(--surface-2);border:1px dashed var(--line)}
.check-row{display:flex;gap:11px;align-items:flex-start;color:var(--text)}
.check-row input{margin-top:5px}
.check-row small{display:block;color:var(--muted)}
.checkout-submit-box{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:20px}
.checkout-submit-box p{margin:5px 0 0;color:var(--muted)}
.order-summary{position:sticky;top:calc(var(--header-h) + 18px)}
.checkout-course-image{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;margin:12px 0 18px}
.summary-line{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.summary-line.total{font-size:1.1rem;border-bottom:0}
.trust-list{display:grid;gap:8px;padding:0;list-style:none;color:var(--muted)}
.trust-list li:before{content:'✓';color:var(--success);font-weight:900;margin-inline-end:8px}
.order-status-shell{padding:72px 16px;min-height:65vh;display:grid;place-items:center}
.order-status-card{width:min(100%,760px);text-align:center}
.status-illustration{width:78px;height:78px;border-radius:24px;display:grid;place-items:center;margin:0 auto 20px;font-size:2.2rem;font-weight:900}
.status-illustration.success{background:color-mix(in srgb,var(--success) 12%,var(--surface));color:var(--success)}
.status-illustration.danger{background:color-mix(in srgb,var(--danger) 12%,var(--surface));color:var(--danger)}
.status-illustration.warning,.status-illustration.pending{background:color-mix(in srgb,var(--warning) 12%,var(--surface));color:var(--warning)}
.order-status-details,.payment-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:24px 0}
.order-status-details>div,.payment-facts>div{padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);display:grid;gap:4px}
.order-status-details span,.payment-facts dt{color:var(--muted);font-size:.8rem}
.payment-facts dd{margin:0;font-weight:700}
.payment-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding-bottom:14px}
.payment-review-form{border-top:1px solid var(--line);padding-top:16px}
.manual-notification{border-top:1px solid var(--line);padding-top:12px}
.manual-notification summary{cursor:pointer;font-weight:700;color:var(--muted)}
.empty-state{text-align:center;padding:50px 20px}

/* Chatbot: hidden must always win over layout display rules. */
.chatbot-panel[hidden]{display:none!important}
.chatbot-launcher,.chatbot-panel{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow)}
.chatbot-launcher span,.chatbot-panel header strong{color:var(--text)}
.chatbot-panel header small{color:var(--muted)}
.chatbot-panel header{background:var(--surface-2);border-bottom:1px solid var(--line)}
.chatbot-close{color:var(--text);background:var(--surface);border:1px solid var(--line)}
.chat-message.assistant{background:var(--surface-2);border:1px solid var(--line);color:var(--text)}
.chat-message.user{background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));color:#fff}
.chatbot-form{background:var(--surface);border-top:1px solid var(--line)}
.chatbot-form input{background:var(--surface-2);border:1px solid var(--line);color:var(--text)}
.floating-whatsapp{box-shadow:var(--shadow-sm)}

.quiz-submit-bar{background:color-mix(in srgb,var(--surface) 92%,transparent);border-color:var(--line)}
.option-item{border-color:var(--line);background:var(--surface)}
.error-page{color:var(--text)}
.error-code{color:var(--brand-primary)}

@media(max-width:980px){
  .header-actions .btn{display:none}
  .primary-nav{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
  .primary-nav a,.mobile-auth-links a,.mobile-auth-links button{color:var(--text)}
  .checkout-layout,.checkout-grid{grid-template-columns:1fr}
  .order-summary{position:static}
}
@media(max-width:720px){
  .section{padding:52px 0}
  .container{width:min(calc(100% - 24px),var(--container))}
  .header-actions{gap:6px}
  .currency-switch select{max-width:92px}
  .language-switch{padding-inline:9px}
  .theme-toggle{width:38px;height:38px}
  .payment-methods,.order-status-details,.payment-facts{grid-template-columns:1fr}
  .checkout-fieldset{padding:16px}
  .checkout-submit-box{align-items:stretch;flex-direction:column}
  .checkout-submit-box .btn{width:100%}
  .payment-card-head{flex-direction:column}
  .chatbot{inset-inline-end:12px;bottom:14px}
  .chatbot-panel{width:min(390px,calc(100vw - 24px));max-height:min(70vh,560px)}
  .floating-whatsapp{inset-inline-start:12px;bottom:14px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}

Primary Blue: #0878FF
Purple: #6847F5
Dark Navy: #0B1736
Success: #0B9F69
Warning: #E38700
Danger: #DC3148
Light Background: #F4F7FF
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--navy:#061025;--navy-2:#0a1733;--surface:#0d1d3d;--surface-2:#102449;--surface-3:#152b54;--text:#f6f8ff;--muted:#a9b7d3;--line:rgba(255,255,255,.1);--brand-primary:#15c8ef;--brand-secondary:#7a4dff;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--info:#38bdf8;--white:#fff;--shadow:0 22px 60px rgba(0,0,0,.28);--radius:20px;--radius-sm:12px;--container:1220px;--header-h:76px;--sidebar-w:270px;--app-font:"IBM Plex Sans Arabic","Inter",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#061025 0%,#071632 52%,#061025 100%);color:var(--text);font-family:var(--app-font);line-height:1.65;min-height:100vh}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 10%,rgba(21,200,239,.09),transparent 28%),radial-gradient(circle at 85% 5%,rgba(122,77,255,.12),transparent 25%);z-index:-1}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}button{cursor:pointer}.container{width:min(calc(100% - 32px),var(--container));margin-inline:auto}.skip-link{position:fixed;inset-inline-start:16px;top:-80px;background:#fff;color:#000;padding:10px 16px;z-index:9999;border-radius:8px}.skip-link:focus{top:12px}.main-content{min-height:55vh}.section{padding:78px 0}.section-sm{padding:46px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}.section-head h1,.section-head h2{margin:0;line-height:1.2}.section-head p{margin:8px 0 0;color:var(--muted);max-width:720px}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--brand-primary);font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}.eyebrow:before{content:"";width:28px;height:2px;background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary))}.lead{font-size:1.12rem;color:var(--muted);max-width:760px}.muted{color:var(--muted)}.text-danger{color:#fda4af}.text-success{color:#86efac}.text-warning{color:#fcd34d}.text-center{text-align:center}.stack{display:grid;gap:16px}.stack-lg{display:grid;gap:28px}.grid{display:grid;gap:22px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:linear-gradient(145deg,rgba(17,37,75,.94),rgba(9,23,51,.95));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 34px rgba(0,0,0,.16);padding:24px}.card-flat{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:var(--radius);padding:22px}.glass{background:rgba(10,25,55,.72);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:var(--shadow)}.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;font-size:.78rem;font-weight:700;background:rgba(21,200,239,.12);color:#93ecff;border:1px solid rgba(21,200,239,.22)}.badge.success{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.25)}.badge.warning{background:rgba(245,158,11,.12);color:#fcd34d;border-color:rgba(245,158,11,.25)}.badge.danger{background:rgba(239,68,68,.12);color:#fda4af;border-color:rgba(239,68,68,.25)}.badge.gray{background:rgba(255,255,255,.07);color:#cbd5e1}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border-radius:12px;padding:10px 18px;border:1px solid transparent;font-weight:800;transition:.2s ease;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,var(--brand-primary),#0aa8d7 45%,var(--brand-secondary));color:#fff;box-shadow:0 12px 26px rgba(21,200,239,.16)}.btn-secondary{background:linear-gradient(135deg,var(--brand-secondary),#5d38dc);color:#fff}.btn-outline{border-color:rgba(21,200,239,.4);color:#9beeff;background:rgba(21,200,239,.05)}.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--text)}.btn-light{background:#fff;color:#07122d}.btn-danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:#fecaca}.btn-sm{min-height:36px;padding:7px 13px;font-size:.88rem}.btn-xs{min-height:30px;padding:4px 10px;font-size:.78rem}.btn-block{width:100%}.inline-form{display:inline-flex}.icon-btn{border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center}.announcement{background:linear-gradient(90deg,#0f58a7,#693fe5);color:#fff;position:relative;z-index:70}.announcement-inner{min-height:42px;display:flex;align-items:center;justify-content:center;gap:30px;font-size:.9rem}.announcement-inner>div:first-child{display:flex;gap:10px;align-items:center}.announcement-actions{display:flex;align-items:center;gap:8px}.site-header{height:var(--header-h);position:sticky;top:0;z-index:60;background:rgba(6,16,37,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.header-inner{height:100%;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:10px;min-width:205px}.brand img{width:52px;height:52px;object-fit:contain;border-radius:14px}.brand span{display:grid;line-height:1.15}.brand b{font-size:1.05rem}.brand small{font-size:.65rem;color:var(--muted);letter-spacing:.06em}.primary-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}.primary-nav>a{padding:8px 11px;color:#d7def1;border-radius:10px;font-size:.92rem;font-weight:700}.primary-nav>a:hover,.primary-nav>a.active{background:rgba(21,200,239,.09);color:#8cecff}.header-actions{display:flex;align-items:center;gap:8px}.currency-switch select,.language-switch{height:36px;background:rgba(255,255,255,.05);color:#fff;border:1px solid var(--line);border-radius:10px;padding:5px 9px}.currency-switch option{color:#111}.avatar-button{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));display:grid;place-items:center;font-weight:800}.mobile-menu-button,.mobile-auth-links{display:none}.app-shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:calc(100vh - var(--header-h))}.app-sidebar{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow:auto;border-inline-end:1px solid var(--line);background:rgba(7,18,43,.92);padding:22px 14px;z-index:30}.sidebar-user{display:flex;gap:12px;align-items:center;padding:10px 10px 20px;border-bottom:1px solid var(--line);margin-bottom:14px}.user-avatar{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));display:grid;place-items:center;font-weight:800;overflow:hidden;flex:0 0 44px}.user-avatar img{width:100%;height:100%;object-fit:cover}.sidebar-user div:last-child{min-width:0}.sidebar-user strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-user small{color:var(--muted)}.sidebar-nav{display:grid;gap:4px}.sidebar-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:#c4cfe5;font-size:.9rem}.sidebar-nav a span{width:24px;text-align:center;color:#78e5ff}.sidebar-nav a:hover,.sidebar-nav a.active{background:linear-gradient(90deg,rgba(21,200,239,.14),rgba(122,77,255,.10));color:#fff}.sidebar-logout{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}.sidebar-logout button{width:100%;display:flex;gap:10px;align-items:center;background:transparent;color:#fda4af;border:0;padding:10px 12px}.app-workspace{min-width:0}.authenticated .site-footer{margin-inline-start:var(--sidebar-w)}.flash{margin-top:18px;border-radius:14px;padding:12px 16px;border:1px solid}.flash-success{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#bbf7d0}.flash-error{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#fecaca}.hero{padding:64px 0 72px;position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:50px}.hero h1{font-size:clamp(2.25rem,5vw,4.8rem);line-height:1.05;margin:0 0 18px;letter-spacing:-.03em}.gradient-text{background:linear-gradient(110deg,#fff 10%,#7cecff 50%,#a887ff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.hero-points span{font-size:.86rem;color:#cbd5e1;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:7px 11px;border-radius:999px}.hero-media{position:relative}.hero-media:before{content:"";position:absolute;inset:8% 4%;background:linear-gradient(135deg,rgba(21,200,239,.25),rgba(122,77,255,.25));filter:blur(60px)}.hero-media img,.hero-media video,.hero-media iframe{position:relative;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:28px;border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow)}.video-frame{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#020617;border:1px solid var(--line);position:relative}.video-frame iframe,.video-frame video,.video-frame img{width:100%;height:100%;object-fit:cover;border:0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat-card{text-align:center;padding:24px}.stat-card strong{display:block;font-size:2rem;color:#fff}.stat-card span{color:var(--muted)}.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.course-card{display:flex;flex-direction:column;overflow:hidden;padding:0}.course-thumb{position:relative;aspect-ratio:16/10;background:#09162f;overflow:hidden}.course-thumb img{width:100%;height:100%;object-fit:cover;transition:.35s}.course-card:hover .course-thumb img{transform:scale(1.04)}.course-thumb .badge{position:absolute;top:14px;inset-inline-start:14px}.favorite-form{position:absolute;top:12px;inset-inline-end:12px}.favorite-form button{width:38px;height:38px;border-radius:12px;background:rgba(4,12,31,.72);border:1px solid rgba(255,255,255,.16);color:#fff}.course-body{display:flex;flex-direction:column;gap:12px;padding:20px;flex:1}.course-body h3{font-size:1.12rem;margin:0;line-height:1.4}.course-body p{color:var(--muted);margin:0;font-size:.91rem}.course-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:#aebbd4;font-size:.82rem}.course-price{display:flex;align-items:baseline;gap:9px;margin-top:auto}.course-price strong{font-size:1.35rem;color:#fff}.course-price del{color:#7f8ba3}.course-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}.rating{display:flex;align-items:center;gap:6px;color:#fbbf24}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.service-card{position:relative;overflow:hidden}.service-card:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;background:rgba(122,77,255,.13);top:-60px;inset-inline-end:-50px}.service-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(21,200,239,.18),rgba(122,77,255,.2));color:#8deaff;font-size:1.35rem;margin-bottom:16px}.service-card h3{margin:0 0 8px}.service-card p{color:var(--muted);margin:0 0 18px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{display:flex;gap:15px;align-items:flex-start}.feature-icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:rgba(21,200,239,.12);display:grid;place-items:center;color:#8deaff}.testimonial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.testimonial-card blockquote{margin:0 0 18px;color:#dce4f5}.testimonial-person{display:flex;align-items:center;gap:12px}.testimonial-person img,.testimonial-person .avatar{width:46px;height:46px;border-radius:14px;object-fit:cover;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));display:grid;place-items:center;font-weight:800}.faq-list{display:grid;gap:12px}.faq-item{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:15px;overflow:hidden}.faq-item summary{cursor:pointer;padding:17px 20px;font-weight:800;list-style:none;display:flex;justify-content:space-between}.faq-item summary:after{content:"+";color:var(--brand-primary)}.faq-item[open] summary:after{content:"−"}.faq-answer{padding:0 20px 18px;color:var(--muted)}.cta-panel{padding:42px;border-radius:28px;background:linear-gradient(125deg,rgba(15,88,167,.78),rgba(105,63,229,.75));border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-panel h2{margin:0 0 8px}.page-hero{padding:52px 0 34px}.page-hero h1{font-size:clamp(2rem,4vw,3.4rem);margin:0 0 10px}.breadcrumbs{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.86rem;margin-bottom:14px}.filters-panel{padding:20px;margin-bottom:26px}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.field{display:grid;gap:7px}.field label{font-size:.85rem;color:#d4ddec;font-weight:700}.field input,.field select,.field textarea,.input{width:100%;background:rgba(3,10,27,.55);border:1px solid var(--line);color:#fff;border-radius:11px;padding:11px 13px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(21,200,239,.55);box-shadow:0 0 0 3px rgba(21,200,239,.08)}.field select option{color:#111}.field textarea{min-height:120px;resize:vertical}.field.span-2{grid-column:span 2}.field.span-3{grid-column:span 3}.field.span-4{grid-column:1/-1}.check-row{display:flex;align-items:center;gap:9px}.check-row input{width:auto}.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.pagination{display:flex;justify-content:center;gap:7px;margin-top:28px}.pagination a,.pagination span{min-width:38px;height:38px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line)}.pagination .active{background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));border-color:transparent}.empty-state{text-align:center;padding:56px 24px}.empty-state strong{display:block;font-size:1.25rem;margin-bottom:8px}.course-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:30px;align-items:start}.course-title-block h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.15;margin:12px 0}.course-share{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.course-share a{padding:7px 11px;border:1px solid var(--line);border-radius:10px;color:#cdd8ec;font-size:.85rem}.purchase-card{position:sticky;top:calc(var(--header-h) + 22px)}.purchase-card .price-big{font-size:2rem;font-weight:800;margin:12px 0}.purchase-card ul{padding-inline-start:20px;color:var(--muted)}.offer-countdown{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.offer-countdown span{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;padding:7px 9px;font-size:.8rem}.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow:auto}.tabs button,.tabs a{background:transparent;border:0;color:var(--muted);padding:11px 15px;border-bottom:2px solid transparent;white-space:nowrap}.tabs button.active,.tabs a.active{color:#fff;border-color:var(--brand-primary)}[data-tab-panel][hidden]{display:none!important}.accordion-module{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}.accordion-module summary{padding:15px 17px;cursor:pointer;background:rgba(255,255,255,.03);font-weight:800}.lesson-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 17px;border-top:1px solid var(--line);color:#cbd5e1}.lesson-row small{color:var(--muted)}.checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:28px;align-items:start}.order-summary{position:sticky;top:calc(var(--header-h) + 22px)}.summary-line{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}.summary-line.total{font-size:1.18rem;font-weight:800;border:0}.payment-methods{display:grid;gap:12px}.payment-method{position:relative}.payment-method input{position:absolute;opacity:0}.payment-method label{display:block;border:1px solid var(--line);border-radius:14px;padding:15px;cursor:pointer;background:rgba(255,255,255,.03)}.payment-method input:checked+label{border-color:var(--brand-primary);background:rgba(21,200,239,.08)}.dashboard-page{padding:30px}.dashboard-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.dashboard-header h1{margin:0}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}.metric-card{display:flex;align-items:center;justify-content:space-between;gap:12px}.metric-card strong{font-size:1.8rem;display:block}.metric-card small{color:var(--muted)}.metric-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:rgba(21,200,239,.11);color:#8cecff;font-size:1.25rem}.data-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px}.data-table{width:100%;border-collapse:collapse;min-width:760px}.data-table th,.data-table td{text-align:start;padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:top}.data-table th{font-size:.78rem;text-transform:uppercase;color:#92a3bf;background:rgba(255,255,255,.035);position:sticky;top:0}.data-table tr:hover td{background:rgba(255,255,255,.02)}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.progress{height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary));border-radius:inherit}.status-pill{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.78rem;font-weight:700;background:rgba(255,255,255,.07);color:#d4ddec}.status-pill.active,.status-pill.approved,.status-pill.completed,.status-pill.paid,.status-pill.published{background:rgba(34,197,94,.12);color:#86efac}.status-pill.pending,.status-pill.in_review,.status-pill.waiting_reply{background:rgba(245,158,11,.12);color:#fcd34d}.status-pill.rejected,.status-pill.failed,.status-pill.revoked,.status-pill.critical{background:rgba(239,68,68,.12);color:#fda4af}.admin-tabs{display:flex;gap:8px;overflow:auto;margin-bottom:20px}.admin-tabs a{padding:9px 14px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);white-space:nowrap}.admin-tabs a:hover{border-color:rgba(21,200,239,.4)}.editor-grid{display:grid;grid-template-columns:390px minmax(0,1fr);gap:22px}.sticky-panel{position:sticky;top:calc(var(--header-h) + 20px);align-self:start}.list-card{display:grid;gap:8px}.list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025)}.list-item-content{min-width:0}.list-item strong{display:block}.list-item small{color:var(--muted)}.media-preview{width:86px;height:62px;object-fit:cover;border-radius:10px;background:#07112a}.notice{padding:13px 16px;border-radius:13px;background:rgba(56,189,248,.09);border:1px solid rgba(56,189,248,.24);color:#bae6fd}.warning-box{padding:13px 16px;border-radius:13px;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.24);color:#fde68a}.danger-box{padding:13px 16px;border-radius:13px;background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.24);color:#fecaca}.site-footer{border-top:1px solid var(--line);background:#040c1e;padding:54px 0 18px;margin-top:70px}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px}.footer-grid h3{margin-top:0}.footer-grid a,.footer-grid p{display:block;color:var(--muted);margin:7px 0}.footer-logo{width:160px;max-height:80px;object-fit:contain;margin-bottom:12px}.social-icons{display:flex;gap:8px;margin-top:12px}.social-icons a{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;margin:0}.footer-bottom{border-top:1px solid var(--line);margin-top:30px;padding-top:16px;display:flex;justify-content:space-between;color:#8290aa;font-size:.83rem}.floating-whatsapp{position:fixed;bottom:22px;inset-inline-end:20px;z-index:80;display:flex;align-items:center;gap:8px;background:#18a958;color:#fff;padding:10px 14px;border-radius:999px;box-shadow:0 14px 35px rgba(0,0,0,.3)}.floating-whatsapp span{font-weight:900}.chatbot{position:fixed;bottom:22px;inset-inline-start:20px;z-index:90}.chatbot-launcher{border:1px solid var(--line);background:rgba(7,18,45,.94);color:#fff;border-radius:999px;padding:8px 13px 8px 8px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow)}.chatbot-launcher img{width:34px;height:34px;border-radius:50%;object-fit:contain}.chatbot-panel{position:absolute;bottom:58px;inset-inline-start:0;width:min(380px,calc(100vw - 32px));height:500px;background:#071630;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}.chatbot-panel header{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.chatbot-panel header div{display:grid}.chatbot-panel header small{color:var(--muted)}.chatbot-close{border:0;background:transparent;color:#fff;font-size:1.5rem}.chatbot-messages{padding:14px;overflow:auto;display:flex;flex-direction:column;gap:10px}.chat-message{max-width:88%;padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.06)}.chat-message.user{margin-inline-start:auto;background:rgba(21,200,239,.16)}.chatbot-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}.chatbot-form input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:11px;color:#fff;padding:10px}.chatbot-form button{border:0;border-radius:10px;background:var(--brand-primary);color:#051021;padding:8px 13px;font-weight:800}.auth-shell{min-height:calc(100vh - var(--header-h));display:grid;place-items:center;padding:48px 16px}.auth-card{width:min(520px,100%);padding:30px}.auth-card h1{margin-top:0}.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:16px;color:#9edff0}.quiz-option{display:flex;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;margin:8px 0}.lesson-player-shell{position:relative}.content-watermark{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;overflow:hidden;opacity:.12;z-index:5}.content-watermark span{transform:rotate(-28deg);font-size:1.2rem;font-weight:800;white-space:nowrap}.certificate-card{border:1px solid rgba(21,200,239,.28);background:linear-gradient(145deg,rgba(21,200,239,.07),rgba(122,77,255,.08));position:relative;overflow:hidden}.certificate-card:after{content:"◇";position:absolute;font-size:8rem;opacity:.05;inset-inline-end:-10px;bottom:-35px}.timeline{display:grid;gap:0}.timeline-item{position:relative;padding:0 0 22px 28px}.timeline-item:before{content:"";position:absolute;inset-inline-start:7px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--brand-primary)}.timeline-item:after{content:"";position:absolute;inset-inline-start:11px;top:19px;bottom:0;width:2px;background:var(--line)}.timeline-item:last-child:after{display:none}
@media(max-width:1100px){.primary-nav{gap:0}.primary-nav>a{padding:7px 8px;font-size:.85rem}.header-actions .btn{display:none}.grid-4,.metric-grid{grid-template-columns:repeat(2,1fr)}.course-grid,.service-grid,.testimonial-grid{grid-template-columns:repeat(2,1fr)}.hero-grid{gap:28px}.editor-grid{grid-template-columns:1fr}.sticky-panel{position:static}}
@media(max-width:900px){:root{--sidebar-w:0px}.header-actions .currency-switch{display:inline-block}.mobile-menu-button{display:inline-flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:4.5px!important;width:42px!important;height:42px!important;border-radius:12px!important;background:rgba(21,200,239,.12)!important;border:1px solid rgba(21,200,239,.35)!important;padding:0!important;margin-inline-start:auto!important;box-shadow:0 4px 12px rgba(0,0,0,.15)!important;cursor:pointer;transition:all .2s ease;z-index:9999!important}.mobile-menu-button span{display:block!important;width:20px!important;height:2.5px!important;background:var(--brand-primary,#15c8ef)!important;border-radius:3px!important;transition:all .2s ease}html[data-theme="light"] .mobile-menu-button{background:#edf6ff!important;border-color:#0878ff!important}html[data-theme="light"] .mobile-menu-button span{background:#0878ff!important}.mobile-menu-button[aria-expanded="true"]{background:rgba(239,68,68,.15)!important;border-color:rgba(239,68,68,.4)!important}.mobile-menu-button[aria-expanded="true"] span{background:#ef4444!important}.primary-nav{position:fixed;top:calc(var(--header-h) + 6px);inset-inline-end:16px;inset-inline-start:auto;width:280px;max-width:calc(100vw - 32px);display:none;flex-direction:column;align-items:stretch;background:var(--surface,#071630);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow);z-index:9998!important}html[data-theme="light"] .primary-nav{background:#ffffff;border-color:#d4deef}.primary-nav.open{display:flex}.primary-nav>a{padding:11px;font-weight:700}.mobile-auth-links{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:12px;margin-top:8px}.mobile-auth-links a,.mobile-auth-links button{display:block;width:100%;text-align:start;padding:10px;background:transparent;color:var(--text);border:0;font-weight:700}.app-shell{display:block}.app-sidebar{position:fixed;top:var(--header-h);bottom:0;inset-inline-start:-290px;width:270px;height:auto;transition:.25s;box-shadow:var(--shadow)}.app-sidebar.open{inset-inline-start:0}.authenticated .mobile-menu-button:after{content:""}.authenticated .site-footer{margin-inline-start:0}.hero-grid,.course-hero-grid,.checkout-grid{grid-template-columns:1fr}.hero-media{order:-1}.purchase-card,.order-summary{position:static}.footer-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}.field.span-3,.field.span-4{grid-column:1/-1}.dashboard-page{padding:24px 16px}html.menu-open,body.menu-open{position:fixed!important;width:100%!important;height:100%!important;overflow:hidden!important}}
@media(max-width:640px){.container{width:min(calc(100% - 22px),var(--container))}.header-inner{gap:8px!important;justify-content:space-between!important}.brand{min-width:auto!important}.brand img{width:42px!important;height:42px!important;border-radius:10px!important}.brand span{display:none!important}.header-actions{gap:6px!important}.header-actions .btn{display:none!important}.theme-toggle,.language-switch,.currency-switch select{height:36px!important;padding:4px 8px!important;font-size:.82rem!important}.announcement-inner{padding:8px 0;align-items:flex-start}.announcement-inner>div:first-child{display:grid;gap:2px}.section{padding:52px 0}.hero{padding:38px 0 50px}.hero h1{font-size:2.45rem}.grid-2,.grid-3,.grid-4,.course-grid,.service-grid,.testimonial-grid,.feature-grid,.stats-grid,.metric-grid,.form-grid{grid-template-columns:1fr}.field.span-2,.field.span-3,.field.span-4{grid-column:auto}.section-head,.dashboard-header,.cta-panel,.footer-bottom{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr}.course-hero-grid{gap:18px}.checkout-grid{gap:18px}.card{padding:18px}.dashboard-page{padding:18px 11px}.floating-whatsapp b,.chatbot-launcher span{display:none}.floating-whatsapp,.chatbot-launcher{width:48px;height:48px;padding:0;justify-content:center}.chatbot{bottom:18px}.floating-whatsapp{bottom:18px}.site-footer{padding-top:40px}.data-table{min-width:680px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Phase 3 compatibility layer for the retained administration, teacher and reviewer screens. */
.dashboard-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:24px}.dashboard-head h1{margin:0}.dashboard-head p{margin:7px 0 0;color:var(--muted);max-width:760px}.button-group,.button-row,.table-actions,.download-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.btn-lg{min-height:50px;padding:12px 22px}.grow{flex:1}.block{display:block}.top-gap{margin-top:22px}.narrow{max-width:820px;margin-inline:auto}.narrow-wide{max-width:1050px;margin-inline:auto}.panel{background:linear-gradient(145deg,rgba(17,37,75,.94),rgba(9,23,51,.95));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 34px rgba(0,0,0,.16);padding:22px;margin-bottom:22px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}.panel-head h2,.panel-head h3{margin:0}.form-stack{display:grid;gap:16px}.form-stack>label,.form-grid>label,.settings-group>label{display:grid;gap:7px;color:#d4ddec;font-size:.88rem;font-weight:700}.form-stack input:not([type=checkbox]):not([type=radio]),.form-stack select,.form-stack textarea,.form-grid input:not([type=checkbox]):not([type=radio]),.form-grid select,.form-grid textarea,.setting-row input,.setting-row select,.setting-row textarea{width:100%;background:rgba(3,10,27,.55);border:1px solid var(--line);color:#fff;border-radius:11px;padding:11px 13px;outline:none}.form-stack select option,.form-grid select option,.setting-row select option{color:#111}.form-stack textarea,.form-grid textarea,.setting-row textarea{resize:vertical}.form-stack input:focus,.form-stack select:focus,.form-stack textarea:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:rgba(21,200,239,.55);box-shadow:0 0 0 3px rgba(21,200,239,.08)}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.form-section{border:1px solid var(--line);border-radius:15px;padding:16px;background:rgba(255,255,255,.02)}.form-errors,.notice-box{padding:13px 16px;border-radius:13px;background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.24);color:#fecaca}.help-text{display:block;color:var(--muted);font-size:.78rem;font-weight:400}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:15px}.table-wrap table{width:100%;border-collapse:collapse;min-width:720px}.table-wrap th,.table-wrap td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}.table-wrap th{color:#96a6c0;background:rgba(255,255,255,.035);font-size:.8rem}.table-link{background:transparent;border:0;color:#8cecff;padding:3px;font-weight:700}.table-link.danger{color:#fda4af}.empty-cell{text-align:center;color:var(--muted);padding:30px!important}.dashboard-grid{display:grid;gap:22px}.dashboard-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-grid.main-side{grid-template-columns:minmax(0,1fr) 340px}.metric-grid-8{grid-template-columns:repeat(4,minmax(0,1fr))}.compact-list{display:grid;gap:8px;padding:0;margin:0;list-style:none}.compact-list li{padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.025)}.admin-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.admin-shortcuts a{border:1px solid var(--line);border-radius:13px;padding:14px;background:rgba(255,255,255,.025)}.admin-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.content-scroll{max-height:560px}.compact-form{gap:9px}.brand-upload-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.brand-upload-grid label{display:grid;gap:8px}.brand-preview{height:110px;width:100%;object-fit:contain;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:13px;padding:9px}.settings-group{display:grid;gap:13px;margin-bottom:28px}.settings-group h2{border-bottom:1px solid var(--line);padding-bottom:9px}.setting-row{grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr)!important;align-items:start}.setting-row>span{display:grid}.setting-row small{color:var(--muted);font-weight:400}.feedback-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.feedback-admin-grid article{border:1px solid var(--line);border-radius:14px;padding:13px}.feedback-admin-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;margin-bottom:10px}.avatar-letter{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));display:grid;place-items:center;font-weight:800}.check-stack,.check-grid{display:grid;gap:10px}.check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grading-card,.question-card,.module-card,.payment-card,.report-card{border:1px solid var(--line);border-radius:15px;padding:16px;background:rgba(255,255,255,.025)}.grading-form{display:grid;gap:12px}.curriculum-list,.lesson-list,.resource-list,.option-list,.announcement-list,.intent-list{display:grid;gap:10px}.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px}.lesson-sidebar{position:sticky;top:calc(var(--header-h) + 20px);align-self:start}.lesson-title{margin-top:0}.lesson-status,.resource-locked{color:var(--muted);font-size:.84rem}.secure-video-shell{position:relative}.moving-watermark{position:absolute;inset:0;pointer-events:none;z-index:3;display:grid;place-items:center;opacity:.15}.video-protection-note{margin-top:8px;color:var(--muted);font-size:.8rem}.quiz-header,.quiz-meta,.review-facts{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.quiz-instructions,.quiz-callout,.content-note{padding:13px 16px;border:1px solid rgba(56,189,248,.24);background:rgba(56,189,248,.08);border-radius:13px}.option-item{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);padding:11px;border-radius:11px}.quiz-submit-bar{position:sticky;bottom:10px;padding:12px;background:rgba(6,16,37,.9);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;display:flex;justify-content:flex-end}.report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.report-icon{font-size:1.7rem}.health-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.prose{max-width:850px}.prose p,.prose li{color:#cbd5e1}.error-page{text-align:center;padding:90px 20px}.error-code{font-size:clamp(4rem,12vw,9rem);line-height:1;margin:0;color:#7cecff}.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}.payment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.content-scroll{overflow:auto}.autosave-status{color:var(--muted);font-size:.8rem}
@media(max-width:1100px){.admin-content-grid,.brand-upload-grid,.admin-shortcuts,.feedback-admin-grid,.report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid.main-side,.lesson-layout{grid-template-columns:1fr}.lesson-sidebar{position:static}.metric-grid-8{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.dashboard-head{align-items:flex-start;flex-direction:column}.form-grid.two,.form-grid.three,.form-grid.four,.dashboard-grid.two,.dashboard-grid.three,.admin-content-grid,.brand-upload-grid,.admin-shortcuts,.feedback-admin-grid,.report-grid,.health-grid,.payment-grid,.three-col{grid-template-columns:1fr}.setting-row{grid-template-columns:1fr!important}.panel{padding:16px}.metric-grid-8{grid-template-columns:1fr}}

/* Phase 4 mobile overflow hardening for review and dashboard content. */
.dashboard-grid,.dashboard-grid>*{min-width:0}
.panel,.module-card,.lesson-row,.review-facts,.review-facts>*{overflow-wrap:anywhere;word-break:break-word;min-width:0}

/* FIX: honor the hidden state of the chatbot panel */
.chatbot-panel[hidden]{display:none!important}


.chatbot-panel[hidden] {
    display: none !important;
}
/* =========================================================
   UI FUNCTION PATCH 2026-07-23
   Strong light-first design, working modals, portal layouts.
   ========================================================= */
html[data-theme="light"]{
  --navy:#f4f7ff;--navy-2:#eaf0ff;--surface:#ffffff;--surface-2:#f6f8ff;--surface-3:#eaf1ff;
  --text:#0b1736;--muted:#5d6b86;--line:#d7e1f2;--brand-primary:#0878ff;--brand-secondary:#6847f5;
  --success:#0b9f69;--warning:#e38700;--danger:#dc3148;--info:#008fbd;
  --shadow:0 22px 55px rgba(38,70,130,.14)
}
html[data-theme="dark"]{
  --navy:#071127;--navy-2:#0b1935;--surface:#102142;--surface-2:#13294f;--surface-3:#18345e;
  --text:#f7f9ff;--muted:#acbad4;--line:rgba(255,255,255,.13);--brand-primary:#21c8ff;--brand-secondary:#8b64ff;
  --shadow:0 24px 65px rgba(0,0,0,.36)
}
html[data-theme="light"] body{background:linear-gradient(180deg,#f8faff 0%,#eff4ff 42%,#f8faff 100%);color:var(--text)}
html[data-theme="light"] body:before{background:radial-gradient(circle at 7% 8%,rgba(8,120,255,.12),transparent 25%),radial-gradient(circle at 92% 18%,rgba(104,71,245,.11),transparent 25%)}
html[data-theme="light"] .site-header{background:rgba(255,255,255,.94);border-color:#dbe4f3;box-shadow:0 7px 24px rgba(35,65,120,.08)}
html[data-theme="light"] .primary-nav>a{color:#263551}
html[data-theme="light"] .primary-nav>a:hover,html[data-theme="light"] .primary-nav>a.active{background:#e6f5ff;color:#006adf}
html[data-theme="light"] .currency-switch select,html[data-theme="light"] .language-switch,html[data-theme="light"] .theme-toggle{background:#f7f9fe;color:#17233f;border-color:#d4deef}
html[data-theme="light"] .card,html[data-theme="light"] .panel{background:#fff;border-color:#d8e2f1;box-shadow:var(--shadow)}
html[data-theme="light"] .card-flat{background:#fff;border-color:#d8e2f1}
html[data-theme="light"] .app-sidebar{background:#fff;border-color:#d8e2f1;box-shadow:8px 0 30px rgba(34,64,120,.07)}
html[data-theme="light"] .sidebar-nav a{color:#263551}
html[data-theme="light"] .sidebar-nav a:hover,html[data-theme="light"] .sidebar-nav a.active{background:linear-gradient(90deg,#daf4ff,#ece6ff);color:#006adf}
html[data-theme="light"] .sidebar-user{border-color:#d8e2f1}
html[data-theme="light"] .form-stack>label,html[data-theme="light"] .form-grid>label,html[data-theme="light"] .settings-group>label{color:#263551}
html[data-theme="light"] .form-stack input:not([type=checkbox]):not([type=radio]),html[data-theme="light"] .form-stack select,html[data-theme="light"] .form-stack textarea,html[data-theme="light"] .form-grid input:not([type=checkbox]):not([type=radio]),html[data-theme="light"] .form-grid select,html[data-theme="light"] .form-grid textarea,html[data-theme="light"] .setting-row input,html[data-theme="light"] .setting-row select,html[data-theme="light"] .setting-row textarea{background:#f8faff;border-color:#cbd7ea;color:#0b1736}
html[data-theme="light"] .table-wrap th{background:#f2f6fc;color:#55647f}
html[data-theme="light"] .table-wrap td,html[data-theme="light"] .table-wrap th{border-color:#dde5f2}
html[data-theme="light"] .muted,html[data-theme="light"] .help-text{color:#687690}
html[data-theme="light"] .prose p,html[data-theme="light"] .prose li{color:#44526b}
html[data-theme="light"] .site-footer{background:#0b1736;color:#fff}
html[data-theme="light"] .chatbot-panel{background:#fff;color:#0b1736;border-color:#d6e0ef}
html[data-theme="light"] .chatbot-form input{background:#f6f8fd;color:#0b1736;border-color:#ccd8e9}
html[data-theme="light"] .chatbot-close{color:#0b1736}
html[data-theme="light"] .chat-message{background:#edf2fa}
html[data-theme="light"] .chat-message.user{background:#dcf4ff}

.theme-toggle{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.05);color:var(--text);font-size:1rem;transition:.2s ease}
.theme-toggle:hover{transform:translateY(-2px) rotate(8deg);border-color:var(--brand-primary)}
.btn{position:relative;overflow:hidden;isolation:isolate}
.button-ripple{position:absolute;border-radius:999px;background:rgba(255,255,255,.42);transform:scale(0);animation:button-ripple .62s ease-out;pointer-events:none;z-index:-1}
@keyframes button-ripple{to{transform:scale(1);opacity:0}}
.btn.is-loading{opacity:.78;pointer-events:none}
.btn-edit{background:#e6f2ff;border:1px solid #9ec8ff;color:#005bc6}
.btn-success{background:#dff8ed;border:1px solid #79d6ae;color:#08764f}
.btn-warning{background:#fff2d9;border:1px solid #f2c36b;color:#9a5900}
.btn-publish{background:linear-gradient(135deg,#006cff,#6847f5);color:#fff;box-shadow:0 14px 30px rgba(68,78,230,.24)}
html[data-theme="dark"] .btn-edit{background:rgba(18,128,255,.16);border-color:rgba(57,153,255,.48);color:#96ccff}
html[data-theme="dark"] .btn-success{background:rgba(11,159,105,.16);border-color:rgba(58,199,148,.42);color:#93ebc7}
html[data-theme="dark"] .btn-warning{background:rgba(227,135,0,.16);border-color:rgba(255,184,65,.42);color:#ffd28a}

/* Modal and confirmation bubble */
body.modal-open{overflow:hidden}.app-modal[hidden],.confirm-bubble-layer[hidden]{display:none!important}
.app-modal,.confirm-bubble-layer{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px}
.app-modal-backdrop,.confirm-bubble-backdrop{position:absolute;inset:0;background:rgba(6,16,38,.62);backdrop-filter:blur(8px)}
.app-modal-card{position:relative;width:min(760px,100%);max-height:min(88vh,840px);overflow:auto;background:#fff;color:#0b1736;border:1px solid #d4dfef;border-radius:26px;box-shadow:0 35px 90px rgba(3,15,45,.35);animation:modal-pop .25s ease-out}
html[data-theme="dark"] .app-modal-card{background:#0e2041;color:#f7f9ff;border-color:rgba(255,255,255,.14)}
@keyframes modal-pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.app-modal-head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px 18px;border-bottom:1px solid #dce4f0}.app-modal-head h2{margin:2px 0 0}.modal-kicker{color:#0878ff;font-size:.72rem;letter-spacing:.14em;font-weight:900}.modal-close{width:40px;height:40px;border:1px solid #d4dfef;background:#f5f8fd;color:#14213d;border-radius:12px;font-size:1.5rem;line-height:1}.modal-form{padding:24px 26px}.modal-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:8px}.switch-row{display:flex!important;align-items:center;gap:11px}.switch-row input{position:absolute;opacity:0}.switch-ui{width:48px;height:27px;background:#bdc8da;border-radius:999px;position:relative;transition:.2s}.switch-ui:after{content:"";position:absolute;width:21px;height:21px;background:#fff;border-radius:50%;top:3px;inset-inline-start:3px;box-shadow:0 2px 7px rgba(0,0,0,.2);transition:.2s}.switch-row input:checked+.switch-ui{background:#0b9f69}.switch-row input:checked+.switch-ui:after{transform:translateX(21px)}[dir=rtl] .switch-row input:checked+.switch-ui:after{transform:translateX(-21px)}
.confirm-bubble{position:relative;width:min(420px,100%);padding:28px;background:#fff;color:#0b1736;border-radius:24px;text-align:center;box-shadow:0 32px 90px rgba(4,15,40,.36);animation:modal-pop .22s ease-out}.confirm-bubble-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:18px;background:#ffe5e9;color:#c91e39;font-size:1.7rem;font-weight:900}.confirm-bubble h3{margin:0 0 8px}.confirm-bubble p{color:#5c6981}.confirm-bubble-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}

/* Modern users */
.admin-page-title{padding:20px 0 6px}.admin-page-title h1{font-size:clamp(2rem,3.5vw,3.3rem)}.admin-control-panel{padding:0;overflow:hidden}.admin-search-bar{padding:18px;border-bottom:1px solid var(--line)}.search-field{position:relative;display:flex;align-items:center;flex:1;min-width:240px}.search-field input{width:100%;height:48px;border:1px solid #cbd8ea;border-radius:14px;padding-inline:42px 14px;background:#f9fbff;color:#0b1736}.search-icon{position:absolute;inset-inline-start:15px;color:#0878ff;font-size:1.25rem}.result-count{margin-inline-start:auto;background:#edf3ff;color:#315078;border-radius:999px;padding:7px 12px;font-size:.82rem;font-weight:800}.modern-table-wrap{border:0;border-radius:0}.modern-table tbody tr{transition:.18s}.modern-table tbody tr:hover{background:#f4f8ff}.user-cell{display:flex;align-items:center;gap:11px}.user-cell small{display:block;color:#6a7890}.id-chip{display:inline-flex;padding:5px 9px;border-radius:9px;background:#eef3fb;color:#50617c;font-weight:800}.role-pill{display:inline-flex;padding:6px 10px;border-radius:999px;font-weight:800;font-size:.78rem;background:#e8f4ff;color:#0068d5}.role-owner{background:#efe8ff;color:#5935c9}.role-backup_admin{background:#e5f8f4;color:#08745d}.role-teacher{background:#fff0da;color:#965600}.role-reviewer{background:#e7edff;color:#3b52c7}.role-student{background:#e3f7ff;color:#00769a}.status-dot{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.82rem}.status-dot i{width:9px;height:9px;border-radius:50%}.status-dot.is-on{color:#08764f}.status-dot.is-on i{background:#15b77d;box-shadow:0 0 0 4px rgba(21,183,125,.14)}.status-dot.is-off{color:#b52e43}.status-dot.is-off i{background:#e34a60;box-shadow:0 0 0 4px rgba(227,74,96,.13)}.action-cluster{min-width:190px}

/* Admin course command cards */
.course-admin-grid{display:grid;gap:18px}.course-admin-card{background:#fff;border:1px solid #d7e1ef;border-inline-start:6px solid #8aa0c4;border-radius:22px;padding:22px;box-shadow:0 16px 40px rgba(34,62,115,.1)}
html[data-theme="dark"] .course-admin-card{background:#0e2041;border-color:rgba(255,255,255,.14)}
.status-border-draft{border-inline-start-color:#8a98ad}.status-border-in_review{border-inline-start-color:#e29212}.status-border-needs_revision{border-inline-start-color:#e3485d}.status-border-approved{border-inline-start-color:#0b9f69}.status-border-published{border-inline-start-color:#0878ff}.status-border-suspended{border-inline-start-color:#db6b00}.status-border-archived{border-inline-start-color:#6d788b}
.course-admin-main{display:flex;gap:16px;align-items:flex-start}.course-admin-id{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#edf3ff;color:#36557e;font-weight:900;flex:0 0 auto}.course-admin-title{flex:1;min-width:0}.course-title-line{display:flex;align-items:center;gap:12px;justify-content:space-between}.course-title-line h2{margin:0;font-size:1.25rem}.course-admin-title>p{margin:3px 0 11px;color:#7a879c}.course-admin-facts{display:flex;flex-wrap:wrap;gap:8px}.course-admin-facts>span{padding:5px 9px;border-radius:9px;background:#f1f5fb;color:#475974;font-size:.8rem}.price-chip{background:#e6f5ff!important;color:#0067cf!important;font-weight:900}.workflow-pill{display:inline-flex;padding:6px 11px;border-radius:999px;font-size:.77rem;font-weight:900;white-space:nowrap}.status-draft{background:#edf1f6;color:#596579}.status-in_review{background:#fff0d5;color:#9d5b00}.status-needs_revision{background:#ffe5e9;color:#b9273e}.status-approved{background:#dff7ed;color:#08764f}.status-published{background:#e2f0ff;color:#0066d5}.status-suspended{background:#fff0da;color:#a25c00}.status-archived{background:#e9edf3;color:#596579}.course-primary-actions{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0}.course-workflow-box{border-top:1px dashed #ccd8e8;padding-top:16px}.reviewer-assign-form{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px;align-items:end;margin-bottom:14px}.reviewer-assign-form label{display:grid;gap:6px;color:#4d5e78;font-size:.82rem;font-weight:800}.reviewer-assign-form select{height:44px;border:1px solid #cbd7e8;background:#f8faff;color:#17233e;border-radius:12px;padding:0 11px}.workflow-actions{display:flex;gap:8px;flex-wrap:wrap}.workflow-actions form{display:inline-flex}

/* Bold hero and portals */
.hero-reimagined{min-height:700px;display:flex;align-items:center;background:linear-gradient(135deg,#f8fbff 0%,#eef3ff 55%,#f7f4ff 100%);position:relative}.hero-reimagined .hero-grid{position:relative;z-index:2}.hero-copy h1{font-size:clamp(3rem,6vw,6rem);line-height:.98;color:#0b1736}.hero-lead{font-size:1.2rem;color:#42516c}.hero-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.8}.hero-orb-one{width:360px;height:360px;top:-130px;inset-inline-start:-120px;background:radial-gradient(circle,#b9eaff,transparent 70%)}.hero-orb-two{width:420px;height:420px;bottom:-170px;inset-inline-end:-100px;background:radial-gradient(circle,#d8cfff,transparent 70%)}.hero-proof-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.hero-proof-row span{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #ced9ea;background:#fff;border-radius:12px;color:#43516b;font-size:.82rem}.hero-proof-row b{color:#0878ff}.hero-visual-stage{position:relative}.hero-visual-card{position:relative;padding:14px;background:#fff;border-radius:34px;border:1px solid #d8e1ef;box-shadow:0 35px 80px rgba(36,62,118,.2);transform:rotate(-1.2deg)}.hero-visual-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:24px}.hero-floating-card{position:absolute;background:#fff;border:1px solid #d5e0ef;border-radius:16px;padding:12px 14px;box-shadow:0 17px 36px rgba(24,52,105,.18);display:grid;gap:2px}.hero-floating-card small{color:#68758d}.hero-floating-a{inset-inline-start:-34px;bottom:34px}.hero-floating-b{inset-inline-end:-26px;top:34px}.mini-progress{width:110px;height:7px;border-radius:999px;background:#e4eaf3;overflow:hidden;margin-top:6px}.mini-progress i{display:block;width:78%;height:100%;background:linear-gradient(90deg,#0878ff,#6847f5)}.campaign-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;border-radius:22px;background:linear-gradient(120deg,#0878ff,#6847f5);color:#fff;box-shadow:0 18px 42px rgba(60,65,205,.25)}.campaign-banner h2,.campaign-banner p{margin:2px 0}.campaign-banner>div>span{font-size:.75rem;font-weight:900;letter-spacing:.12em}.centered-head{justify-content:center;text-align:center}.centered-head p{margin-inline:auto}.learning-gates-section{background:#fff}.learning-gates-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.learning-gate{min-height:280px;padding:20px;border-radius:24px;border:1px solid #d5e0ef;background:linear-gradient(160deg,#fff,#f4f7ff);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:.25s;box-shadow:0 12px 30px rgba(40,67,120,.08)}.learning-gate:before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;top:-80px;inset-inline-end:-70px;background:rgba(8,120,255,.11)}.learning-gate:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(39,67,126,.17);border-color:#8bbcff}.gate-number{position:absolute;top:16px;inset-inline-end:18px;color:#7c8aa0;font-weight:900}.gate-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#0b1736;color:#fff;font-size:1.5rem;margin-bottom:34px}.learning-gate h3{font-size:1.25rem;margin:0 0 7px;color:#0b1736}.learning-gate p{color:#61708a;margin:0}.learning-gate footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;color:#0878ff}.gate-2 .gate-icon{background:#6847f5}.gate-3 .gate-icon{background:#00a3bd}.gate-4 .gate-icon{background:#e26b16}.impact-strip{background:#0b1736;color:#fff}.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.impact-item{padding:24px;border-inline-end:1px solid rgba(255,255,255,.14)}.impact-item>span{color:#6fd6ff;font-size:.75rem}.impact-item strong{font-size:2.3rem;display:block}.impact-item p{margin:0;color:#b6c1d3}.featured-stage{background:#f3f6fc}.course-grid-bold .course-card{background:#fff;border:1px solid #d6e0ee;box-shadow:0 17px 40px rgba(35,62,112,.11);transition:.25s}.course-grid-bold .course-card:hover{transform:translateY(-7px);box-shadow:0 27px 55px rgba(35,62,112,.18)}.services-preview-section{background:#0b1736;color:#fff}.services-preview-section .section-head p{color:#b7c2d4}.service-preview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.service-preview-tile{min-height:265px;padding:20px;border:1px solid rgba(255,255,255,.16);border-radius:23px;display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.025));transition:.25s}.service-preview-tile:hover{transform:translateY(-7px);border-color:#60ccff;background:rgba(255,255,255,.1)}.service-preview-icon{font-size:1.7rem;color:#70dcff}.service-preview-index{align-self:flex-end;color:#7e8da7;font-weight:900}.service-preview-tile h3{font-size:1.2rem}.service-preview-tile p{color:#b9c4d6}.service-preview-tile b{margin-top:auto;color:#7bddff}.tile-2 .service-preview-icon{color:#b296ff}.tile-3 .service-preview-icon{color:#5ce0b1}.tile-4 .service-preview-icon{color:#ffc46b}.why-bold-section{background:#fff}.why-bold-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start}.why-bold-copy h2{font-size:clamp(2.3rem,4vw,4rem)}.why-bold-list{display:grid;gap:10px}.why-bold-list article{display:flex;gap:16px;align-items:center;padding:17px;border-bottom:1px solid #dce4ef}.why-bold-list span{color:#0878ff;font-weight:900}.why-bold-list strong{font-size:1.05rem}.testimonial-card-bold{border-top:5px solid #0878ff}.faq-bold-section{background:#f3f6fc}.final-cta-card{position:relative;overflow:hidden;padding:46px;border-radius:30px;background:linear-gradient(120deg,#0878ff,#6847f5);color:#fff;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;box-shadow:0 28px 60px rgba(60,70,220,.28)}.final-cta-card h2{font-size:clamp(2rem,4vw,3.7rem);margin:6px 0}.final-cta-card p{color:#e7ecff}.final-cta-actions{display:grid;gap:10px}.cta-spark{position:absolute;font-size:12rem;opacity:.09;inset-inline-end:10%;top:-75px}

/* Course portal page */
.courses-portal-hero{padding:80px 0 45px;background:linear-gradient(145deg,#0b1736,#142858);color:#fff}.courses-portal-copy{max-width:850px;margin:30px 0}.courses-portal-copy h1{font-size:clamp(2.7rem,5vw,5.4rem);line-height:1.02;margin:0 0 16px}.courses-portal-copy p{color:#c2ccdc;font-size:1.12rem}.course-category-portals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.category-portal{min-height:108px;border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:15px;color:#fff;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);transition:.22s}.category-portal:hover,.category-portal.active{transform:translateY(-5px);background:#fff;color:#0b1736}.category-portal>span{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#0878ff;color:#fff;font-weight:900}.category-portal div{flex:1}.category-portal strong,.category-portal small{display:block}.category-portal small{opacity:.7}.filters-drawer{background:#fff;border:1px solid #d6e0ee;border-radius:20px;box-shadow:0 14px 36px rgba(35,62,112,.1);margin-bottom:34px}.filters-drawer>summary{list-style:none;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#0b1736;font-weight:900}.filters-drawer>summary::-webkit-details-marker{display:none}.filters-drawer>summary small{font-weight:500;color:#67758d}.filters-panel{padding:20px;border-top:1px solid #dbe3ef}.filters-panel input,.filters-panel select{background:#f8faff!important;color:#0b1736!important;border-color:#cbd7e8!important}.results-heading{margin:14px 0 24px}.results-heading h2{font-size:clamp(1.8rem,3vw,3rem);margin:0}

/* Services universe */
.services-universe-hero{position:relative;overflow:hidden;padding:90px 0;background:#071127;color:#fff}.services-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent)}.services-universe-grid{position:relative;display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:center}.services-universe-copy h1{font-size:clamp(3rem,5.5vw,5.8rem);line-height:1.02;margin:12px 0 20px}.services-universe-copy>p{font-size:1.15rem;color:#bdc8da;max-width:740px}.services-visual-shell{position:relative;padding:14px;border-radius:32px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}.services-visual-shell img{border-radius:23px;width:100%;aspect-ratio:4/3;object-fit:cover}.service-visual-tag{position:absolute;padding:8px 12px;background:#fff;color:#0b1736;border-radius:11px;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.22)}.tag-a{top:32px;inset-inline-start:-25px}.tag-b{bottom:32px;inset-inline-end:-25px}.tag-c{top:48%;inset-inline-end:-40px;background:#70dcff}.service-map-section{background:#f4f7fd}.service-category-block{margin-bottom:48px}.service-category-block>header{display:flex;align-items:center;gap:13px;margin-bottom:18px}.service-category-block>header>span{font-size:1.35rem;font-weight:900}.service-category-block>header i{height:1px;background:#ccd8e9;flex:1}.service-category-block>header small{color:#68758c}.service-universe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.service-universe-card{min-height:310px;padding:22px;border-radius:24px;background:#fff;border:1px solid #d7e1ef;display:flex;flex-direction:column;box-shadow:0 13px 35px rgba(34,62,112,.09);transition:.24s}.service-universe-card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(34,62,112,.16)}.service-card-top{display:flex;justify-content:space-between}.service-universe-icon{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;background:#e4f2ff;color:#0878ff;font-size:1.5rem}.service-sequence{color:#8794aa;font-weight:900}.service-universe-card h3{font-size:1.3rem}.service-universe-card p{color:#62718a}.service-duration{font-size:.8rem;color:#3e5678}.service-universe-card footer{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-top:18px;border-top:1px solid #e0e7f1}.service-universe-card footer a:first-child{color:#0878ff;font-weight:900}.service-contact-link{color:#52637c}.service-tone-2 .service-universe-icon{background:#eee9ff;color:#6847f5}.service-tone-3 .service-universe-icon{background:#dff8ef;color:#0b8f64}.service-tone-4 .service-universe-icon{background:#fff1dc;color:#c86d00}.service-tone-5 .service-universe-icon{background:#ffe7ed;color:#cf2845}.service-process-section{background:#fff}.service-process-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px}.service-process-grid h2{font-size:clamp(2rem,4vw,4rem)}.service-process-grid ol{list-style:none;padding:0;margin:0;display:grid;gap:8px}.service-process-grid li{display:flex;gap:18px;padding:20px;border-bottom:1px solid #dce4ef}.service-process-grid li>b{color:#0878ff}.service-process-grid li strong{font-size:1.1rem}.service-process-grid li p{margin:4px 0;color:#65738b}

/* Reviewer */
.reviewer-hero-head{padding:20px 0}.reviewer-account-card{display:flex;align-items:center;gap:11px;padding:13px 16px;background:#0b1736;color:#fff;border-radius:17px}.reviewer-account-card>span{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#0b9f69}.reviewer-account-card small{display:block;color:#b9c4d6}.review-metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}.review-metric{display:flex;align-items:center;gap:15px;padding:20px;border-radius:20px;background:#fff;border:1px solid #d7e1ef;box-shadow:0 12px 30px rgba(35,62,112,.08)}.review-metric>span{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.3rem}.metric-review>span{background:#fff0d5;color:#a15d00}.metric-revision>span{background:#ffe6ea;color:#b9273e}.metric-approved>span{background:#dff7ed;color:#08764f}.review-metric strong{font-size:1.8rem;display:block}.review-metric small{color:#637189}.review-queue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.review-queue-card{background:#fff;border:1px solid #d7e1ef;border-inline-start:6px solid #e29212;border-radius:22px;padding:20px;box-shadow:0 14px 36px rgba(35,62,112,.09)}.review-queue-card header,.review-queue-card footer{display:flex;justify-content:space-between;align-items:center;gap:12px}.review-queue-card h2{margin:18px 0 8px}.review-queue-card p{color:#66748b}.review-id{color:#8996aa;font-weight:900}.review-course-facts{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.review-course-facts span{padding:6px 9px;background:#f0f4fa;border-radius:9px;font-size:.8rem}.review-workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px}.review-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}.review-summary-grid article{padding:13px;background:#f3f6fb;border-radius:13px}.review-summary-grid span,.review-summary-grid strong{display:block}.review-summary-grid span{color:#6d7a90;font-size:.77rem}.review-section-title{display:flex;gap:14px;align-items:flex-start;margin:28px 0 14px}.review-section-title>span{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#0b1736;color:#fff;font-weight:900}.review-section-title h2,.review-section-title p{margin:0}.review-section-title p{color:#69768c}.reviewer-module{background:#fff}.reviewer-module>header{display:flex;justify-content:space-between;align-items:center}.reviewer-module h3{margin:3px 0}.reviewer-lesson-row{background:#f8faff;border-radius:12px;margin-top:7px;border:1px solid #e0e7f1}.lesson-play{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#e3f2ff;color:#0878ff}.assessment-review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.assessment-review-card{padding:15px;border:1px solid #dce4ef;border-radius:14px}.assessment-review-card h3{margin:10px 0 4px}.question-review-list{display:grid;gap:8px;margin-top:18px}.question-review-list article{display:flex;gap:12px;padding:12px;background:#f5f8fc;border-radius:12px}.question-review-list small{display:block;color:#6b7890}.review-check-list{display:grid;gap:8px}.review-check-list label{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid #d8e2ef;border-radius:12px;cursor:pointer}.review-check-list input{position:absolute;opacity:0}.review-check-list label>span{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:#edf2f9;color:transparent}.review-check-list input:checked+span{background:#0b9f69;color:#fff}.decision-card{border-top:6px solid #6847f5}

@media(max-width:1100px){.learning-gates-grid,.course-category-portals,.service-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.services-universe-grid,.why-bold-grid,.service-process-grid,.review-workspace-grid{grid-template-columns:1fr}.service-universe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.review-decision-panel .sticky-panel{position:static}.hero-floating-a{inset-inline-start:10px}.hero-floating-b{inset-inline-end:10px}}
@media(max-width:720px){.hero-reimagined{min-height:auto}.hero-copy h1,.services-universe-copy h1,.courses-portal-copy h1{font-size:2.6rem}.learning-gates-grid,.course-category-portals,.service-preview-grid,.service-universe-grid,.impact-grid,.review-metric-grid,.review-queue-grid,.review-summary-grid,.assessment-review-grid{grid-template-columns:1fr}.impact-item{border-inline-end:0;border-bottom:1px solid rgba(255,255,255,.14)}.final-cta-card{grid-template-columns:1fr;padding:28px}.reviewer-assign-form{grid-template-columns:1fr}.course-admin-main{flex-direction:column}.course-title-line{align-items:flex-start;flex-direction:column}.services-universe-hero{padding:60px 0}.services-universe-grid{gap:30px}.service-visual-tag{position:static;display:inline-block;margin:7px 4px 0}.app-modal-card{border-radius:20px}.modal-form,.app-modal-head{padding:18px}.form-grid.two{grid-template-columns:1fr}.header-actions .theme-toggle{display:grid}.confirm-bubble-actions{flex-direction:column}.reviewer-account-card{width:100%}}

/* =========================================================
   ALL IN AI — NEOMORPHISM THEME OVERRIDE
   Single-file visual layer. Upload as assets/css/app.css
   ========================================================= */
:root{
  --neo-bg:#e9eef7;
  --neo-surface:#e9eef7;
  --neo-surface-2:#f2f5fb;
  --neo-text:#14213d;
  --neo-muted:#65728a;
  --neo-primary:#1976ff;
  --neo-secondary:#6c4cff;
  --neo-success:#0f9d72;
  --neo-warning:#d98200;
  --neo-danger:#d83a52;
  --neo-light-shadow:rgba(255,255,255,.95);
  --neo-dark-shadow:rgba(153,168,195,.55);
  --neo-shadow-raised:14px 14px 30px var(--neo-dark-shadow),-14px -14px 30px var(--neo-light-shadow);
  --neo-shadow-soft:8px 8px 18px rgba(153,168,195,.42),-8px -8px 18px rgba(255,255,255,.92);
  --neo-shadow-pressed:inset 7px 7px 15px rgba(153,168,195,.48),inset -7px -7px 15px rgba(255,255,255,.9);
  --neo-radius:24px;
  --neo-radius-sm:16px;
}

html[data-theme="light"],html:not([data-theme]){
  --navy:var(--neo-bg);
  --navy-2:#e3e9f3;
  --surface:var(--neo-surface);
  --surface-2:var(--neo-surface-2);
  --surface-3:#dde5f1;
  --text:var(--neo-text);
  --muted:var(--neo-muted);
  --line:rgba(118,136,166,.18);
  --brand-primary:var(--neo-primary);
  --brand-secondary:var(--neo-secondary);
  --success:var(--neo-success);
  --warning:var(--neo-warning);
  --danger:var(--neo-danger);
  --shadow:var(--neo-shadow-raised);
}

html[data-theme="dark"]{
  --neo-bg:#141c2d;
  --neo-surface:#141c2d;
  --neo-surface-2:#192338;
  --neo-text:#edf3ff;
  --neo-muted:#9eabc1;
  --neo-light-shadow:rgba(39,52,77,.78);
  --neo-dark-shadow:rgba(3,8,18,.72);
  --neo-shadow-raised:13px 13px 28px var(--neo-dark-shadow),-13px -13px 28px var(--neo-light-shadow);
  --neo-shadow-soft:8px 8px 18px rgba(3,8,18,.65),-8px -8px 18px rgba(39,52,77,.66);
  --neo-shadow-pressed:inset 7px 7px 15px rgba(3,8,18,.72),inset -7px -7px 15px rgba(39,52,77,.7);
  --navy:var(--neo-bg);
  --navy-2:#101827;
  --surface:var(--neo-surface);
  --surface-2:var(--neo-surface-2);
  --surface-3:#202d46;
  --text:var(--neo-text);
  --muted:var(--neo-muted);
  --line:rgba(255,255,255,.075);
  --shadow:var(--neo-shadow-raised);
}

html[data-theme="light"] body,html:not([data-theme]) body,
html[data-theme="dark"] body{
  background:var(--neo-bg)!important;
  color:var(--text);
}

body:before{
  background:
    radial-gradient(circle at 12% 8%,rgba(25,118,255,.09),transparent 28%),
    radial-gradient(circle at 88% 10%,rgba(108,76,255,.08),transparent 30%)!important;
}

/* Header and navigation */
.site-header{
  background:var(--neo-surface)!important;
  border:0!important;
  box-shadow:0 7px 20px rgba(111,128,160,.18)!important;
  backdrop-filter:none!important;
}
.primary-nav>a,.sidebar-nav a,.mobile-auth-links a{
  border-radius:14px!important;
  transition:transform .2s ease,box-shadow .2s ease,color .2s ease!important;
}
.primary-nav>a:hover,.primary-nav>a.active,.sidebar-nav a:hover,.sidebar-nav a.active{
  background:var(--neo-surface)!important;
  color:var(--brand-primary)!important;
  box-shadow:var(--neo-shadow-pressed)!important;
}
.app-sidebar{
  background:var(--neo-surface)!important;
  border:0!important;
  box-shadow:8px 0 22px rgba(111,128,160,.16)!important;
}
html[dir="rtl"] .app-sidebar{box-shadow:-8px 0 22px rgba(111,128,160,.16)!important}

/* Universal raised surfaces */
.card,.panel,.course-card,.service-card,.testimonial-card,.feature-card,.stat-card,
.metric-card,.payment-card,.report-card,.grading-card,.question-card,.module-card,
.admin-course-card,.review-card,.reviewer-course-card,.portal-card,.gateway-card,
.modal-card,.chatbot-panel,.cta-panel,.checkout-card,.auth-card,.profile-card{
  background:var(--neo-surface)!important;
  border:0!important;
  border-radius:var(--neo-radius)!important;
  box-shadow:var(--neo-shadow-raised)!important;
}

.card-flat,.glass,.form-section,.compact-list li,.admin-shortcuts a,
.feedback-admin-grid article,.content-note,.quiz-instructions,.quiz-callout{
  background:var(--neo-surface)!important;
  border:0!important;
  border-radius:var(--neo-radius-sm)!important;
  box-shadow:var(--neo-shadow-soft)!important;
  backdrop-filter:none!important;
}

/* Buttons: raised at rest, pressed on click */
.btn,.icon-btn,.avatar-button,.mobile-menu-button,.chatbot-close,
.table-link,.currency-switch select,.language-switch,.theme-toggle{
  border:0!important;
  border-radius:16px!important;
  background:var(--neo-surface)!important;
  color:var(--text)!important;
  box-shadow:var(--neo-shadow-soft)!important;
  transition:transform .18s ease,box-shadow .18s ease,color .18s ease,background .18s ease!important;
}
.btn:hover,.icon-btn:hover,.avatar-button:hover,.mobile-menu-button:hover,
.table-link:hover,.theme-toggle:hover{
  transform:translateY(-2px)!important;
  color:var(--brand-primary)!important;
}
.btn:active,.icon-btn:active,.avatar-button:active,.mobile-menu-button:active,
.table-link:active,.theme-toggle:active{
  transform:translateY(0)!important;
  box-shadow:var(--neo-shadow-pressed)!important;
}
.btn-primary,.btn-secondary{
  color:#fff!important;
  background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))!important;
  box-shadow:8px 8px 18px rgba(100,89,201,.28),-7px -7px 16px rgba(255,255,255,.75)!important;
}
html[data-theme="dark"] .btn-primary,html[data-theme="dark"] .btn-secondary{
  box-shadow:8px 8px 18px rgba(0,0,0,.55),-7px -7px 16px rgba(41,55,82,.55)!important;
}
.btn-danger{color:var(--danger)!important}
.btn-outline,.btn-ghost,.btn-light{background:var(--neo-surface)!important;color:var(--text)!important}

/* Inputs: pressed/inset effect */
input:not([type="checkbox"]):not([type="radio"]),select,textarea,
.form-stack input:not([type=checkbox]):not([type=radio]),.form-stack select,.form-stack textarea,
.form-grid input:not([type=checkbox]):not([type=radio]),.form-grid select,.form-grid textarea,
.setting-row input,.setting-row select,.setting-row textarea{
  background:var(--neo-surface)!important;
  color:var(--text)!important;
  border:0!important;
  border-radius:15px!important;
  box-shadow:var(--neo-shadow-pressed)!important;
}
input::placeholder,textarea::placeholder{color:var(--muted)!important;opacity:.8}
input:focus,select:focus,textarea:focus{
  outline:0!important;
  box-shadow:var(--neo-shadow-pressed),0 0 0 3px rgba(25,118,255,.14)!important;
}

/* Tables */
.table-wrap,.data-table-wrap{
  background:var(--neo-surface)!important;
  border:0!important;
  border-radius:22px!important;
  box-shadow:var(--neo-shadow-raised)!important;
  padding:10px;
}
.table-wrap th,.data-table th{
  background:transparent!important;
  color:var(--muted)!important;
  border-bottom:1px solid rgba(118,136,166,.14)!important;
}
.table-wrap td,.data-table td{border-bottom:1px solid rgba(118,136,166,.12)!important}
.table-wrap tbody tr,.data-table tbody tr{transition:box-shadow .18s ease,transform .18s ease}
.table-wrap tbody tr:hover,.data-table tbody tr:hover{
  background:transparent!important;
  box-shadow:inset 4px 4px 10px rgba(153,168,195,.22),inset -4px -4px 10px rgba(255,255,255,.55)!important;
}
html[data-theme="dark"] .table-wrap tbody tr:hover,html[data-theme="dark"] .data-table tbody tr:hover{
  box-shadow:inset 4px 4px 10px rgba(3,8,18,.55),inset -4px -4px 10px rgba(39,52,77,.5)!important;
}

/* Course and service imagery */
.course-thumb,.service-visual,.hero-media img,.hero-media video,.hero-media iframe,.video-frame{
  border:0!important;
  border-radius:24px!important;
  box-shadow:var(--neo-shadow-soft)!important;
}
.course-card:hover,.service-card:hover,.gateway-card:hover,.portal-card:hover{
  transform:translateY(-6px)!important;
  box-shadow:18px 18px 36px var(--neo-dark-shadow),-18px -18px 36px var(--neo-light-shadow)!important;
}

/* Hero */
.hero{padding-top:76px!important}
.hero h1,.hero-title{color:var(--text)!important;text-shadow:none!important}
.gradient-text{
  background:linear-gradient(120deg,var(--brand-primary),var(--brand-secondary))!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.hero-points span,.badge{
  background:var(--neo-surface)!important;
  color:var(--text)!important;
  border:0!important;
  box-shadow:var(--neo-shadow-soft)!important;
}

/* Status colors remain readable */
.badge.success,.flash-success{color:var(--success)!important}
.badge.warning,.flash-warning{color:var(--warning)!important}
.badge.danger,.flash-error{color:var(--danger)!important}
.flash,.notice-box,.form-errors{
  background:var(--neo-surface)!important;
  border:0!important;
  box-shadow:var(--neo-shadow-soft)!important;
}

/* Modals and floating widgets */
.modal-backdrop{background:rgba(18,30,55,.38)!important;backdrop-filter:blur(8px)!important}
.chatbot-panel{overflow:hidden}
.chatbot-panel[hidden]{display:none!important}
.chatbot-launcher,.floating-whatsapp{
  border:0!important;
  box-shadow:var(--neo-shadow-raised)!important;
}
.chatbot-messages,.chatbot-form{
  background:var(--neo-surface)!important;
  border-color:rgba(118,136,166,.12)!important;
}
.chat-message.assistant{
  background:var(--neo-surface)!important;
  color:var(--text)!important;
  box-shadow:var(--neo-shadow-soft)!important;
}
.chat-message.user{
  background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))!important;
  color:#fff!important;
}

/* Footer */
.site-footer{
  background:var(--neo-surface)!important;
  border:0!important;
  box-shadow:0 -8px 24px rgba(111,128,160,.12)!important;
}

/* Accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(25,118,255,.35)!important;
  outline-offset:3px!important;
}

/* Mobile tuning */
@media(max-width:900px){
  .site-header{box-shadow:0 5px 16px rgba(111,128,160,.14)!important}
  .app-sidebar{box-shadow:none!important}
  .card,.panel,.course-card,.service-card,.modal-card,.chatbot-panel{border-radius:20px!important}
  .hero{padding-top:40px!important}
}

@media(prefers-reduced-motion:reduce){
  .course-card:hover,.service-card:hover,.gateway-card:hover,.portal-card:hover,.btn:hover{transform:none!important}
}

/* =========================================================
   USER MANAGEMENT - NEOMORPHISM
   ========================================================= */

:root {
    --user-bg: #eef3fb;
    --user-surface: #eef3fb;
    --user-text: #0b1736;
    --user-muted: #65728b;

    --user-blue: #0878ff;
    --user-purple: #6847f5;
    --user-green: #0b9f69;
    --user-orange: #ed8a16;
    --user-red: #dc3148;

    --neo-dark: rgba(154, 170, 191, 0.52);
    --neo-light: rgba(255, 255, 255, 0.96);
}

[data-theme="dark"] {
    --user-bg: #111a2d;
    --user-surface: #151f35;
    --user-text: #f7f9ff;
    --user-muted: #9ba8c3;

    --neo-dark: rgba(0, 0, 0, 0.46);
    --neo-light: rgba(45, 59, 88, 0.34);
}

.user-management-page {
    min-height: 100vh;
    background: var(--user-bg);
    color: var(--user-text);
}

.user-page-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    padding: 32px;
    margin-bottom: 28px;

    border-radius: 30px;
    background: var(--user-surface);

    box-shadow:
        15px 15px 32px var(--neo-dark),
        -15px -15px 32px var(--neo-light);
}

.user-page-hero h1 {
    margin: 6px 0;
    color: var(--user-text);
    font-size: clamp(32px, 4vw, 50px);
}

.user-page-hero p {
    margin: 0;
    color: var(--user-muted);
    font-size: 17px;
}

.user-add-button {
    min-width: 190px;
    min-height: 58px;

    border: 0;
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--user-blue),
            var(--user-purple)
        );

    box-shadow:
        9px 9px 19px rgba(8, 120, 255, 0.25),
        -7px -7px 17px var(--neo-light);
}

.user-stat-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
    margin-bottom: 28px;
}

.user-stat-card {
    position: relative;
    overflow: hidden;

    padding: 24px;
    min-height: 145px;

    border-radius: 25px;
    background: var(--user-surface);

    box-shadow:
        11px 11px 24px var(--neo-dark),
        -11px -11px 24px var(--neo-light);
}

.user-stat-card::after {
    content: "";

    position: absolute;
    top: -25px;
    inset-inline-end: -25px;

    width: 95px;
    height: 95px;

    border-radius: 50%;
    background: currentColor;
    opacity: 0.13;
}

.user-stat-card span,
.user-stat-card small {
    display: block;
    color: var(--user-muted);
}

.user-stat-card strong {
    display: block;
    margin: 7px 0;

    color: currentColor;
    font-size: 42px;
}

.user-stat-card--blue {
    color: var(--user-blue);
}

.user-stat-card--green {
    color: var(--user-green);
}

.user-stat-card--purple {
    color: var(--user-purple);
}

.user-stat-card--orange {
    color: var(--user-orange);
}

.user-management-panel {
    padding: 28px;

    border-radius: 30px;
    background: var(--user-surface);

    box-shadow:
        16px 16px 34px var(--neo-dark),
        -16px -16px 34px var(--neo-light);
}

.user-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 25px;
}

.user-search-field {
    display: flex;
    align-items: center;
    gap: 10px;

    flex: 1;
    min-height: 55px;
    padding: 0 18px;

    border-radius: 18px;
    background: var(--user-surface);

    box-shadow:
        inset 7px 7px 15px var(--neo-dark),
        inset -7px -7px 15px var(--neo-light);
}

.user-search-field input {
    width: 100%;

    border: 0 !important;
    outline: 0;

    color: var(--user-text);
    background: transparent !important;
    box-shadow: none !important;
}

.user-results-count {
    color: var(--user-muted);
    white-space: nowrap;
}

.user-card-list {
    display: grid;
    gap: 18px;
}

.user-account-card {
    display: grid;

    grid-template-columns:
        minmax(280px, 1.5fr)
        minmax(210px, 0.7fr)
        auto;

    align-items: center;
    gap: 22px;

    padding: 22px;
    border-radius: 24px;

    background: var(--user-surface);

    box-shadow:
        9px 9px 20px var(--neo-dark),
        -9px -9px 20px var(--neo-light);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.user-account-card:hover {
    transform: translateY(-4px);

    box-shadow:
        13px 13px 27px var(--neo-dark),
        -13px -13px 27px var(--neo-light);
}

.user-account-main,
.user-account-meta,
.user-account-actions,
.user-name-line {
    display: flex;
    align-items: center;
}

.user-account-main {
    gap: 16px;
}

.user-account-meta {
    gap: 10px;
    flex-wrap: wrap;
}

.user-account-actions {
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.user-name-line {
    gap: 10px;
    flex-wrap: wrap;
}

.user-avatar {
    display: grid;
    place-items: center;

    width: 62px;
    height: 62px;
    flex: 0 0 62px;

    border-radius: 20px;

    color: #ffffff;
    font-weight: 900;
    font-size: 20px;

    background:
        linear-gradient(
            135deg,
            var(--user-blue),
            var(--user-purple)
        );

    box-shadow:
        7px 7px 15px rgba(70, 82, 120, 0.30),
        -6px -6px 14px var(--neo-light);
}

.user-account-identity h3 {
    margin: 0;
    color: var(--user-text);
}

.user-account-identity p,
.user-account-identity small {
    display: block;
    margin: 3px 0 0;
    color: var(--user-muted);
}

.user-id-chip,
.user-role-badge,
.user-status-badge,
.owner-protected-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 12px;
    min-height: 34px;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 800;
}

.user-id-chip {
    color: var(--user-blue);
    background: #dcecff;
}

.user-role-badge {
    color: #ffffff;
}

.user-role-badge--owner {
    background: #17213a;
}

.user-role-badge--backup_admin {
    background: var(--user-purple);
}

.user-role-badge--teacher {
    background: var(--user-orange);
}

.user-role-badge--reviewer {
    background: #1b74d8;
}

.user-role-badge--student {
    background: var(--user-green);
}

.user-status-badge {
    color: var(--user-text);
    background: var(--user-surface);

    box-shadow:
        inset 4px 4px 9px var(--neo-dark),
        inset -4px -4px 9px var(--neo-light);
}

.user-status-badge i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.user-status-badge.is-active i {
    background: var(--user-green);

    box-shadow:
        0 0 0 5px rgba(11, 159, 105, 0.15);
}

.user-status-badge.is-disabled i {
    background: var(--user-red);

    box-shadow:
        0 0 0 5px rgba(220, 49, 72, 0.15);
}

.btn-edit-user,
.btn-disable-user {
    min-height: 44px;

    border: 0;
    border-radius: 15px;

    font-weight: 900;
}

.btn-edit-user {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--user-blue),
            #399cff
        );
}

.btn-disable-user {
    color: var(--user-red);
    background: var(--user-surface);

    box-shadow:
        7px 7px 15px var(--neo-dark),
        -7px -7px 15px var(--neo-light);
}

.owner-protected-label {
    color: var(--user-purple);
    background: #ece7ff;
}

.user-modal[hidden],
.app-confirm-layer[hidden] {
    display: none !important;
}

body.modal-open {
    overflow: hidden;
}

.user-modal,
.app-confirm-layer {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: grid;
    place-items: center;

    padding: 20px;
}

.user-modal__backdrop,
.app-confirm-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(8, 16, 36, 0.62);
    backdrop-filter: blur(12px);
}

.user-modal__card,
.app-confirm-card {
    position: relative;

    width: min(760px, 100%);
    max-height: calc(100vh - 40px);

    overflow: auto;

    border-radius: 32px;

    color: var(--user-text);
    background: var(--user-surface);

    box-shadow:
        22px 22px 55px rgba(5, 14, 34, 0.38),
        -12px -12px 30px rgba(255, 255, 255, 0.28);
}

.user-modal__card {
    opacity: 0;
    transform: translateY(22px) scale(0.97);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.user-modal.is-visible .user-modal__card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.user-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 28px 30px 18px;
}

.user-modal__header h2 {
    margin: 5px 0 7px;
    font-size: 30px;
}

.user-modal__header p {
    margin: 0;
    color: var(--user-muted);
}

.user-modal__close {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    border: 0;
    border-radius: 15px;

    color: var(--user-text);
    background: var(--user-surface);

    box-shadow:
        6px 6px 14px var(--neo-dark),
        -6px -6px 14px var(--neo-light);

    font-size: 28px;
    cursor: pointer;
}

.user-edit-form {
    padding: 10px 30px 30px;
}

.user-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.user-form-field span,
.user-form-field small {
    display: block;
}

.user-form-field span {
    margin-bottom: 8px;

    color: var(--user-text);
    font-weight: 900;
}

.user-form-field small {
    margin-top: 7px;
    color: var(--user-muted);
}

.user-form-field input,
.user-form-field select {
    width: 100%;
    min-height: 52px;

    padding: 0 16px;

    border: 0 !important;
    border-radius: 16px;
    outline: 0;

    color: var(--user-text);
    background: var(--user-surface) !important;

    box-shadow:
        inset 6px 6px 13px var(--neo-dark),
        inset -6px -6px 13px var(--neo-light) !important;
}

.user-form-field input:focus,
.user-form-field select:focus {
    box-shadow:
        inset 5px 5px 12px var(--neo-dark),
        inset -5px -5px 12px var(--neo-light),
        0 0 0 4px rgba(8, 120, 255, 0.17) !important;
}

.user-active-switch {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 22px 0;
    padding: 18px;

    border-radius: 18px;
    cursor: pointer;

    background: var(--user-surface);

    box-shadow:
        inset 5px 5px 12px var(--neo-dark),
        inset -5px -5px 12px var(--neo-light);
}

.user-active-switch input {
    position: absolute;
    opacity: 0;
}

.user-active-switch__control {
    position: relative;

    width: 56px;
    height: 30px;
    flex: 0 0 56px;

    border-radius: 999px;
    background: #9da9bc;

    transition: 0.2s ease;
}

.user-active-switch__control i {
    position: absolute;

    top: 4px;
    inset-inline-start: 4px;

    width: 22px;
    height: 22px;

    border-radius: 50%;
    background: #ffffff;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.22);

    transition: 0.2s ease;
}

.user-active-switch input:checked
+ .user-active-switch__control {
    background: var(--user-green);
}

html[dir="rtl"]
.user-active-switch input:checked
+ .user-active-switch__control i {
    transform: translateX(-26px);
}

html[dir="ltr"]
.user-active-switch input:checked
+ .user-active-switch__control i {
    transform: translateX(26px);
}

.user-active-switch b,
.user-active-switch small {
    display: block;
}

.user-active-switch small {
    margin-top: 3px;
    color: var(--user-muted);
}

.user-modal__actions,
.app-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.app-confirm-card {
    width: min(430px, 100%);
    padding: 32px;

    text-align: center;
}

.app-confirm-icon {
    display: grid;
    place-items: center;

    width: 70px;
    height: 70px;

    margin: 0 auto 16px;

    border-radius: 24px;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--user-red),
            #ff6a7b
        );

    font-size: 34px;
    font-weight: 900;
}

.app-confirm-card p {
    color: var(--user-muted);
}

.app-confirm-actions {
    justify-content: center;
    margin-top: 22px;
}

.app-toast-stack {
    position: fixed;

    inset-inline-start: 24px;
    bottom: 24px;

    z-index: 100020;

    display: grid;
    gap: 10px;
}

.app-toast {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 280px;
    max-width: 420px;

    padding: 15px 18px;

    border-radius: 17px;

    color: var(--user-text);
    background: var(--user-surface);

    box-shadow:
        10px 10px 24px var(--neo-dark),
        -8px -8px 20px var(--neo-light);

    opacity: 0;
    transform: translateY(20px);

    transition: 0.22s ease;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.app-toast > span {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 12px;

    color: #ffffff;
    background: var(--user-green);
}

.app-toast--error > span {
    background: var(--user-red);
}

.app-toast p {
    margin: 0;
}

.btn,
button,
[role="button"] {
    position: relative;
    overflow: hidden;
}

.button-ripple {
    position: absolute;
    z-index: 0;

    border-radius: 50%;

    pointer-events: none;

    background:
        rgba(255, 255, 255, 0.38);

    transform: scale(0);

    animation:
        buttonRipple 0.65s ease-out;
}

@keyframes buttonRipple {
    to {
        transform: scale(1);
        opacity: 0;
    }
}

.is-loading {
    opacity: 0.72;
    pointer-events: none;
}

@media (max-width: 1050px) {
    .user-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .user-account-card {
        grid-template-columns: 1fr;
    }

    .user-account-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .user-page-hero,
    .user-search-bar,
    .user-modal__actions,
    .app-confirm-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .user-page-hero {
        padding: 23px;
    }

    .user-add-button {
        width: 100%;
    }

    .user-stat-grid {
        grid-template-columns: 1fr;
    }

    .user-management-panel {
        padding: 16px;
    }

    .user-account-card {
        padding: 18px;
    }

    .user-account-meta,
    .user-account-actions {
        justify-content: flex-start;
    }

    .user-form-grid {
        grid-template-columns: 1fr;
    }

    .user-modal__header,
    .user-edit-form {
        padding-inline: 20px;
    }

    .user-modal__actions .btn,
    .app-confirm-actions .btn {
        width: 100%;
    }
}

/* حماية صفحات الدروس من النسخ السهل ومحاولات الالتقاط */
.lesson-page[data-protected-page] {
  -webkit-user-select: none;
  user-select: none;
}

.lesson-page[data-protected-page] img,
.lesson-page[data-protected-page] video {
  -webkit-user-drag: none;
}

.secure-video-shell {
  overflow: hidden;
  border-radius: var(--radius);
  background: #020617;
}

.secure-video-shell.is-obscured iframe,
.secure-video-shell.is-obscured video {
  visibility: hidden;
}

.video-blackout {
  position: absolute;
  inset: 0;
  z-index: 20;

  display: grid;
  place-items: center;

  padding: 24px;

  background: #020617;
  color: #fff;

  text-align: center;
  font-weight: 800;
}

.video-blackout[hidden] {
  display: none !important;
}

/* =========================================================
   Student lesson video — mobile and fullscreen fix
   ========================================================= */

.lesson-main {
    min-width: 0;
}

.secure-video-shell {
    width: 100%;
    overflow: visible;
    background: transparent;
    border-radius: 0;
}

.secure-video-stage {
    position: relative;

    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #000;
    border-radius: 18px;
}

.secure-video-stage video,
.secure-video-stage iframe {
    display: block;

    width: 100%;
    height: 100%;
    max-width: 100%;

    border: 0;
    background: #000;

    object-fit: contain;
}

.secure-video-stage iframe {
    position: absolute;
    inset: 0;
}

.secure-video-stage .moving-watermark {
    padding: 20px;

    text-align: center;
    overflow-wrap: anywhere;
}

.video-fullscreen-btn {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 15;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 42px;
    padding: 8px 13px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;

    background: rgba(0, 0, 0, 0.72);
    color: #fff;

    font-weight: 800;
    cursor: pointer;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.video-fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

.video-fullscreen-btn span {
    font-size: 22px;
    line-height: 1;
}

.secure-video-stage:fullscreen,
.secure-video-stage:-webkit-full-screen,
.secure-video-stage.is-video-expanded {
    width: 100vw;
    height: 100vh;
    height: 100dvh;

    max-width: none;
    aspect-ratio: auto;

    background: #000;
    border-radius: 0;
}

.secure-video-stage.is-video-expanded {
    position: fixed;
    inset: 0;
    z-index: 99999;
}

.secure-video-stage:fullscreen video,
.secure-video-stage:fullscreen iframe,
.secure-video-stage:-webkit-full-screen video,
.secure-video-stage:-webkit-full-screen iframe,
.secure-video-stage.is-video-expanded video,
.secure-video-stage.is-video-expanded iframe {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

body.video-expanded {
    overflow: hidden;
}

@media (max-width: 720px) {
    .lesson-page .container {
        width: calc(100% - 20px);
    }

    .secure-video-stage {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }

    .video-fullscreen-btn {
        top: 8px;
        inset-inline-end: 8px;

        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
    }

    .video-fullscreen-btn b {
        display: none;
    }
}

/* =========================================================
   MOBILE LESSON FIX ONLY — Desktop is not affected
   ========================================================= */

@media (max-width: 640px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .app-shell,
    .app-workspace,
    .main-content,
    .lesson-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .lesson-page > .container.lesson-layout {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 16px 12px 90px !important;
    }

    .lesson-main,
    .lesson-sidebar {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .breadcrumbs {
        width: 100%;
        max-width: 100%;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lesson-title {
        width: 100%;
        max-width: 100%;
    }

    .lesson-title h1 {
        width: 100%;
        max-width: 100%;

        margin: 8px 0 10px;

        font-size: 1.55rem !important;
        line-height: 1.45 !important;

        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .lesson-title p {
        width: 100%;
        max-width: 100%;

        margin: 0 0 14px;

        white-space: normal;
        overflow-wrap: anywhere;
    }

    .secure-video-shell {
        width: 100% !important;
        max-width: 100% !important;

        overflow: visible !important;

        background: transparent !important;
        border-radius: 12px !important;
    }

    .secure-video-stage {
        position: relative;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        aspect-ratio: 4 / 3 !important;

        overflow: hidden;

        background: #000;
        border-radius: 12px;
    }

    .secure-video-stage video,
    .secure-video-stage iframe,
    .course-intro-video iframe {
        position: absolute;
        inset: 0;

        display: block;

        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        border: 0;

        background: #000;
        object-fit: contain;
    }

    .video-fullscreen-btn {
        top: 8px !important;
        inset-inline-end: 8px !important;
        inset-inline-start: auto !important;

        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;

        padding: 0 !important;

        border-radius: 9px !important;
    }

    .video-fullscreen-btn strong {
        display: none;
    }

    .video-protection-note {
        width: 100%;
        max-width: 100%;

        margin-top: 8px;
        padding-inline: 2px;

        font-size: 0.72rem;
        line-height: 1.5;

        white-space: normal;
        overflow-wrap: anywhere;
    }

    .lesson-content {
        width: 100%;
        max-width: 100%;

        overflow-wrap: anywhere;
    }

    .lesson-progress-panel {
        display: grid !important;
        gap: 10px;

        width: 100%;
        max-width: 100%;

        margin-top: 16px;
    }

    .lesson-progress-panel > div:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;

        flex-wrap: wrap;
    }

    .lesson-progress-panel .progress {
        width: 100%;
        max-width: 100%;
    }

    .lesson-progress-panel .btn {
        width: 100%;

        white-space: normal;
        text-align: center;
    }

    .lesson-sidebar {
        position: static !important;
        margin-top: 18px;
    }

    .lesson-sidebar .panel {
        width: 100%;
        max-width: 100%;

        padding: 14px !important;
    }

    .resource-list,
    .resource-list a,
    .resource-locked {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .resource-list strong,
    .resource-list small {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Fullscreen fallback for mobile browsers */

    .secure-video-stage.is-video-expanded {
        position: fixed !important;
        inset: 0 !important;
        z-index: 99999 !important;

        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: none !important;

        aspect-ratio: auto !important;
        border-radius: 0 !important;

        background: #000;
    }

    .secure-video-stage.is-video-expanded video,
    .secure-video-stage.is-video-expanded iframe {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain;
    }

    /* WhatsApp at bottom, chatbot above it */

    .floating-whatsapp {
        position: fixed !important;

        right: 12px !important;
        left: auto !important;
        bottom: 16px !important;

        z-index: 9990 !important;

        width: 48px !important;
        height: 48px !important;

        padding: 0 !important;
        justify-content: center !important;
    }

    .floating-whatsapp b {
        display: none !important;
    }

    .chatbot {
        position: fixed !important;

        right: 12px !important;
        left: auto !important;
        bottom: 76px !important;

        z-index: 9991 !important;
    }

    .chatbot-launcher {
        width: 48px !important;
        height: 48px !important;

        padding: 0 !important;
        justify-content: center !important;
    }

    .chatbot-launcher span {
        display: none !important;
    }

    .chatbot-panel {
        right: 0 !important;
        left: auto !important;

        width: calc(100vw - 24px) !important;
        max-width: 390px !important;
        max-height: 70vh !important;
    }
}
/* =========================================================
   LIGHT MODE — FULL WHITE DESIGN + BLACK TEXT
   Dark mode is not affected
   ========================================================= */

html[data-theme="light"] {
    color-scheme: light;

    --app-font:
        Inter,
        "IBM Plex Sans Arabic",
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif;

    --light-background: #ffffff;
    --light-text: #000000;
    --light-border: #e5e7eb;
}

/* الصفحة الأساسية */

html[data-theme="light"],
html[data-theme="light"] body {
    background: #ffffff !important;
    color: #000000 !important;

    font-family: var(--app-font) !important;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.7;
}

/* جميع أجزاء الموقع */

html[data-theme="light"] .site-header,
html[data-theme="light"] .app-shell,
html[data-theme="light"] .app-sidebar,
html[data-theme="light"] .app-workspace,
html[data-theme="light"] .main-content,
html[data-theme="light"] .lesson-page,
html[data-theme="light"] .lesson-layout,
html[data-theme="light"] .lesson-main,
html[data-theme="light"] .lesson-sidebar,
html[data-theme="light"] .site-footer {
    background: #ffffff !important;
    color: #000000 !important;
}

/* البطاقات والأقسام */

html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .lesson-title,
html[data-theme="light"] .lesson-content,
html[data-theme="light"] .lesson-progress-panel,
html[data-theme="light"] .resource-list,
html[data-theme="light"] .resource-list > *,
html[data-theme="light"] .resource-locked,
html[data-theme="light"] .quiz-callout,
html[data-theme="light"] .sidebar-user,
html[data-theme="light"] .announcement {
    background: #ffffff !important;
    color: #000000 !important;

    border-color: #e5e7eb !important;
    box-shadow: none !important;
}

/* جميع النصوص */

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] p,
html[data-theme="light"] span,
html[data-theme="light"] strong,
html[data-theme="light"] b,
html[data-theme="light"] small,
html[data-theme="light"] label,
html[data-theme="light"] li,
html[data-theme="light"] td,
html[data-theme="light"] th,
html[data-theme="light"] .muted,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .video-protection-note,
html[data-theme="light"] .breadcrumbs {
    color: #000000 !important;
}

/* أحجام عناوين متجاوبة */

html[data-theme="light"] h1 {
    font-size: clamp(1.65rem, 4vw, 2.5rem) !important;
    line-height: 1.35 !important;
    font-weight: 750 !important;
}

html[data-theme="light"] h2 {
    font-size: clamp(1.3rem, 3vw, 1.8rem) !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] h3 {
    font-size: clamp(1.05rem, 2.5vw, 1.35rem) !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] p,
html[data-theme="light"] .lesson-content,
html[data-theme="light"] .video-protection-note {
    font-size: clamp(0.9rem, 2vw, 1rem) !important;
}

/* الروابط */

html[data-theme="light"] a,
html[data-theme="light"] .breadcrumbs a,
html[data-theme="light"] .primary-nav a,
html[data-theme="light"] .sidebar-nav a {
    color: #000000 !important;
}

html[data-theme="light"] a:hover,
html[data-theme="light"] .primary-nav a:hover,
html[data-theme="light"] .sidebar-nav a:hover {
    color: #000000 !important;
}

/* القائمة الجانبية */

html[data-theme="light"] .sidebar-nav a,
html[data-theme="light"] .sidebar-logout,
html[data-theme="light"] .sidebar-logout button {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #e5e7eb !important;
}

html[data-theme="light"] .sidebar-nav a.active {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}

/* الهيدر والقائمة */

html[data-theme="light"] .site-header,
html[data-theme="light"] .primary-nav,
html[data-theme="light"] .mobile-auth-links {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #e5e7eb !important;
}

html[data-theme="light"] .brand,
html[data-theme="light"] .brand b,
html[data-theme="light"] .brand small {
    color: #000000 !important;
}

/* الأزرار — أبيض مع خط أسود */

html[data-theme="light"] .btn,
html[data-theme="light"] button:not(.video-fullscreen-btn),
html[data-theme="light"] .icon-btn,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .avatar-button {
    background: #ffffff !important;
    color: #000000 !important;

    border: 1px solid #000000 !important;
    box-shadow: none !important;
}

html[data-theme="light"] .btn:hover,
html[data-theme="light"] button:not(.video-fullscreen-btn):hover {
    background: #f8f8f8 !important;
    color: #000000 !important;
}

/* الحقول */

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: #ffffff !important;
    color: #000000 !important;

    border: 1px solid #d1d5db !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #000000 !important;
    opacity: 0.6;
}

/* شريط التقدم */

html[data-theme="light"] .progress {
    background: #e5e7eb !important;
}

html[data-theme="light"] .progress span,
html[data-theme="light"] [data-progress-bar] {
    background: #000000 !important;
}

/* الفوتر */

html[data-theme="light"] .site-footer,
html[data-theme="light"] .footer-bottom {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #e5e7eb !important;
}

/* الشات في الوضع النهاري */

html[data-theme="light"] .chatbot-panel,
html[data-theme="light"] .chatbot-panel header,
html[data-theme="light"] .chatbot-messages,
html[data-theme="light"] .chat-message {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #e5e7eb !important;
}

/* يبقى مشغل الفيديو أسود حتى يظهر الفيديو بشكل صحيح */

html[data-theme="light"] .secure-video-stage,
html[data-theme="light"] .secure-video-stage video,
html[data-theme="light"] .secure-video-stage iframe,
html[data-theme="light"] .video-blackout {
    background: #000000 !important;
}

/* زر تكبير الفيديو يبقى واضحًا فوق الفيديو */

html[data-theme="light"] .video-fullscreen-btn {
    background: rgba(0, 0, 0, 0.82) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

html[data-theme="light"] .video-fullscreen-btn span,
html[data-theme="light"] .video-fullscreen-btn strong {
    color: #ffffff !important;
}

/* ضبط الخط على الهاتف */

@media (max-width: 640px) {
    html[data-theme="light"],
    html[data-theme="light"] body {
        font-size: 15px !important;
    }

    html[data-theme="light"] .lesson-title h1 {
        font-size: 1.55rem !important;
        line-height: 1.45 !important;
    }

    html[data-theme="light"] .lesson-content,
    html[data-theme="light"] .lesson-progress-panel,
    html[data-theme="light"] .lesson-sidebar .panel {
        background: #ffffff !important;
        color: #000000 !important;
    }
}
/* =========================================================
   LIGHT MODE — HOME STATS AND SERVICES WHITE FIX
   ========================================================= */

html[data-theme="light"] .impact-strip,
html[data-theme="light"] .impact-strip .container,
html[data-theme="light"] .impact-grid,
html[data-theme="light"] .impact-item {
    background: #ffffff !important;
    color: #000000 !important;
}

html[data-theme="light"] .impact-item {
    border-color: #e5e7eb !important;
}

html[data-theme="light"] .impact-item span,
html[data-theme="light"] .impact-item strong,
html[data-theme="light"] .impact-item p {
    color: #000000 !important;
}

/* قسم الخدمات */

html[data-theme="light"] .services-preview-section,
html[data-theme="light"] .services-preview-section > .container,
html[data-theme="light"] .services-preview-section .section-head,
html[data-theme="light"] .service-preview-grid {
    background: #ffffff !important;
    color: #000000 !important;
}

html[data-theme="light"] .services-preview-section .section-head h2,
html[data-theme="light"] .services-preview-section .section-head p,
html[data-theme="light"] .services-preview-section .eyebrow {
    color: #000000 !important;
}

/* بطاقات الخدمات */

html[data-theme="light"] .service-preview-tile,
html[data-theme="light"] .service-preview-tile:hover,
html[data-theme="light"] .service-preview-tile.tile-1,
html[data-theme="light"] .service-preview-tile.tile-2,
html[data-theme="light"] .service-preview-tile.tile-3,
html[data-theme="light"] .service-preview-tile.tile-4 {
    background: #ffffff !important;
    background-image: none !important;

    color: #000000 !important;

    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}

html[data-theme="light"] .service-preview-tile h3,
html[data-theme="light"] .service-preview-tile p,
html[data-theme="light"] .service-preview-tile b,
html[data-theme="light"] .service-preview-tile span,
html[data-theme="light"] .service-preview-icon,
html[data-theme="light"] .service-preview-index {
    color: #000000 !important;
}
/* =========================================================
   DARK MODE — ALL BACKGROUNDS DARK + ALL TEXT WHITE
   Light mode is not affected
   ========================================================= */

html[data-theme="dark"] {
    color-scheme: dark;

    --dark-bg: #0b1220;
    --dark-surface: #101a2d;
    --dark-surface-2: #16233a;
    --dark-border: rgba(255, 255, 255, 0.10);
    --dark-text: #ffffff;
    --dark-muted: rgba(255, 255, 255, 0.82);
}

/* الصفحة الأساسية */

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* الحاويات والأقسام الرئيسية */

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .app-sidebar,
html[data-theme="dark"] .app-workspace,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .lesson-page,
html[data-theme="dark"] .lesson-layout,
html[data-theme="dark"] .lesson-main,
html[data-theme="dark"] .lesson-sidebar,
html[data-theme="dark"] section,
html[data-theme="dark"] article,
html[data-theme="dark"] aside {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* البطاقات والصناديق */

html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .lesson-title,
html[data-theme="dark"] .lesson-content,
html[data-theme="dark"] .lesson-progress-panel,
html[data-theme="dark"] .quiz-callout,
html[data-theme="dark"] .resource-list,
html[data-theme="dark"] .resource-list > *,
html[data-theme="dark"] .resource-locked,
html[data-theme="dark"] .sidebar-user,
html[data-theme="dark"] .announcement,
html[data-theme="dark"] .course-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .faq-card,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .timeline-card,
html[data-theme="dark"] .content-block,
html[data-theme="dark"] .empty-state {
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
    box-shadow: none !important;
}

/* الأقسام التي ظهرت عندك بالصور */

html[data-theme="dark"] .impact-strip,
html[data-theme="dark"] .impact-strip .container,
html[data-theme="dark"] .impact-grid,
html[data-theme="dark"] .impact-item,
html[data-theme="dark"] .services-preview-section,
html[data-theme="dark"] .services-preview-section > .container,
html[data-theme="dark"] .service-preview-grid,
html[data-theme="dark"] .service-preview-tile,
html[data-theme="dark"] .service-preview-tile:hover,
html[data-theme="dark"] .service-preview-tile.tile-1,
html[data-theme="dark"] .service-preview-tile.tile-2,
html[data-theme="dark"] .service-preview-tile.tile-3,
html[data-theme="dark"] .service-preview-tile.tile-4,
html[data-theme="dark"] .faq-section,
html[data-theme="dark"] .faq-list,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .before-start-section,
html[data-theme="dark"] .steps-section,
html[data-theme="dark"] .steps-list,
html[data-theme="dark"] .step-item {
    background: var(--dark-surface) !important;
    background-image: none !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
    box-shadow: none !important;
}

/* النصوص */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] small,
html[data-theme="dark"] label,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .breadcrumbs,
html[data-theme="dark"] .video-protection-note,
html[data-theme="dark"] .service-preview-index,
html[data-theme="dark"] .service-preview-icon,
html[data-theme="dark"] .impact-item p,
html[data-theme="dark"] .impact-item span,
html[data-theme="dark"] .impact-item strong,
html[data-theme="dark"] .section-head h2,
html[data-theme="dark"] .section-head p,
html[data-theme="dark"] .faq-item p,
html[data-theme="dark"] .step-item p {
    color: var(--dark-text) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .breadcrumbs,
html[data-theme="dark"] .video-protection-note {
    color: var(--dark-muted) !important;
}

/* الروابط */

html[data-theme="dark"] a,
html[data-theme="dark"] .breadcrumbs a,
html[data-theme="dark"] .primary-nav a,
html[data-theme="dark"] .sidebar-nav a,
html[data-theme="dark"] .service-preview-tile a {
    color: #ffffff !important;
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] .primary-nav a:hover,
html[data-theme="dark"] .sidebar-nav a:hover {
    color: #ffffff !important;
}

/* الهيدر والفوتر */

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .primary-nav,
html[data-theme="dark"] .mobile-auth-links,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .brand b,
html[data-theme="dark"] .brand small,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .footer-brand,
html[data-theme="dark"] .footer-grid > div {
    background: var(--dark-bg) !important;
    color: #ffffff !important;
    border-color: var(--dark-border) !important;
}

/* القائمة الجانبية */

html[data-theme="dark"] .sidebar-nav a,
html[data-theme="dark"] .sidebar-logout,
html[data-theme="dark"] .sidebar-logout button {
    background: var(--dark-surface) !important;
    color: #ffffff !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] .sidebar-nav a.active {
    background: var(--dark-surface-2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
}

/* الأزرار */

html[data-theme="dark"] .btn,
html[data-theme="dark"] button:not(.video-fullscreen-btn),
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .avatar-button {
    background: var(--dark-surface) !important;
    color: #ffffff !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] button:not(.video-fullscreen-btn):hover,
html[data-theme="dark"] .icon-btn:hover {
    background: var(--dark-surface-2) !important;
    color: #ffffff !important;
}

/* الحقول */

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--dark-surface) !important;
    color: #ffffff !important;
    border: 1px solid var(--dark-border) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: rgba(255,255,255,0.65) !important;
    opacity: 1;
}

/* الجداول والخطوط الفاصلة */

html[data-theme="dark"] hr,
html[data-theme="dark"] .progress,
html[data-theme="dark"] .divider,
html[data-theme="dark"] .lesson-progress-panel .progress {
    background-color: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.10) !important;
}

html[data-theme="dark"] .progress span,
html[data-theme="dark"] [data-progress-bar] {
    background: #ffffff !important;
}

/* FAQ / Accordion */

html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-header,
html[data-theme="dark"] .accordion-body,
html[data-theme="dark"] .faq-question,
html[data-theme="dark"] .faq-answer {
    background: var(--dark-surface) !important;
    color: #ffffff !important;
    border-color: var(--dark-border) !important;
}

/* الشات */

html[data-theme="dark"] .chatbot,
html[data-theme="dark"] .chatbot-panel,
html[data-theme="dark"] .chatbot-panel header,
html[data-theme="dark"] .chatbot-messages,
html[data-theme="dark"] .chat-message,
html[data-theme="dark"] .chatbot-form {
    background: var(--dark-surface) !important;
    color: #ffffff !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] .chatbot-launcher {
    background: var(--dark-surface) !important;
    color: #ffffff !important;
    border: 1px solid var(--dark-border) !important;
}

/* واتساب */

html[data-theme="dark"] .floating-whatsapp {
    background: var(--dark-surface) !important;
    color: #ffffff !important;
    border: 1px solid var(--dark-border) !important;
}

html[data-theme="dark"] .floating-whatsapp span,
html[data-theme="dark"] .floating-whatsapp b {
    color: #ffffff !important;
}

/* الفيديو يظل أسود */

html[data-theme="dark"] .secure-video-stage,
html[data-theme="dark"] .secure-video-stage video,
html[data-theme="dark"] .secure-video-stage iframe,
html[data-theme="dark"] .video-blackout {
    background: #000000 !important;
}

html[data-theme="dark"] .video-fullscreen-btn {
    background: rgba(0, 0, 0, 0.82) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.45) !important;
}

html[data-theme="dark"] .video-fullscreen-btn span,
html[data-theme="dark"] .video-fullscreen-btn strong {
    color: #ffffff !important;
}
/* =========================================================
   DARK MODE — FIX WHITE CARDS WITH INVISIBLE TEXT
   ========================================================= */

/* قسم بوابات التعلم */

html[data-theme="dark"] .learning-gates-section,
html[data-theme="dark"] .learning-gates-section > .container,
html[data-theme="dark"] .learning-gates-grid {
    background: #0b1220 !important;
}

html[data-theme="dark"] .learning-gate,
html[data-theme="dark"] .learning-gate:hover {
    background: #101a2d !important;
    background-image: none !important;

    color: #ffffff !important;

    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .learning-gate::before {
    background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .learning-gate h3,
html[data-theme="dark"] .learning-gate p,
html[data-theme="dark"] .learning-gate footer,
html[data-theme="dark"] .learning-gate footer b,
html[data-theme="dark"] .learning-gate footer span {
    color: #ffffff !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .learning-gate p,
html[data-theme="dark"] .gate-number {
    color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"] .learning-gate footer {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* واجهة الصفحة الرئيسية والصورة */

html[data-theme="dark"] .hero-reimagined,
html[data-theme="dark"] .hero-reimagined > .container {
    background: #0b1220 !important;
    background-image: none !important;
}

html[data-theme="dark"] .hero-copy h1,
html[data-theme="dark"] .hero-copy p,
html[data-theme="dark"] .hero-lead {
    color: #ffffff !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .hero-visual-card {
    background: #101a2d !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
}

/* الصناديق الصغيرة فوق صورة الهيرو */

html[data-theme="dark"] .hero-floating-card {
    background: #16233a !important;
    color: #ffffff !important;

    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .hero-floating-card strong,
html[data-theme="dark"] .hero-floating-card small,
html[data-theme="dark"] .hero-floating-card span {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* المربعات الثلاثة أسفل أزرار الهيرو */

html[data-theme="dark"] .hero-proof-row span {
    background: #101a2d !important;
    color: #ffffff !important;

    border-color: rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="dark"] .hero-proof-row span b {
    color: #73d9ff !important;
}

/* شريط التقدم داخل الصندوق الصغير */

html[data-theme="dark"] .mini-progress {
    background: rgba(255, 255, 255, 0.16) !important;
}

/* أي زر أبيض داخل الوضع الليلي */

html[data-theme="dark"] .btn-light {
    background: #16233a !important;
    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="dark"] .btn-light:hover {
    background: #1d2d49 !important;
    color: #ffffff !important;
}
/* =========================================================
   LIGHT MODE — TESTIMONIALS TEXT VISIBILITY
   ========================================================= */

html[data-theme="light"] .testimonial-grid {
    background: #ffffff !important;
}

html[data-theme="light"] .testimonial-card,
html[data-theme="light"] .testimonial-card-bold {
    background: #ffffff !important;
    color: #000000 !important;

    border: 1px solid #e5e7eb !important;
    border-top: 5px solid #0878ff !important;

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07) !important;
}

/* نص رأي العميل */

html[data-theme="light"] .testimonial-card blockquote,
html[data-theme="light"] .testimonial-card-bold blockquote {
    margin: 0 0 18px !important;

    color: #000000 !important;
    opacity: 1 !important;

    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.8 !important;
}

/* الاسم والصفة */

html[data-theme="light"] .testimonial-person,
html[data-theme="light"] .testimonial-person div,
html[data-theme="light"] .testimonial-person strong {
    color: #000000 !important;
    opacity: 1 !important;
}

html[data-theme="light"] .testimonial-person strong {
    font-weight: 800 !important;
}

html[data-theme="light"] .testimonial-person small {
    color: #374151 !important;
    opacity: 1 !important;
}

/* التقييم يبقى ذهبيًا وواضحًا */

html[data-theme="light"] .testimonial-card .rating,
html[data-theme="light"] .testimonial-card-bold .rating {
    color: #f59e0b !important;
    opacity: 1 !important;
}

/* صورة أو حرف العميل */

html[data-theme="light"] .testimonial-person .avatar {
    color: #ffffff !important;
    opacity: 1 !important;
}
/* =========================================================
   DARK MODE — COURSE CATEGORIES + FILTERS
   ========================================================= */

/* بطاقات التصنيفات: لا تتحول للأبيض عند المرور أو الاختيار */

html[data-theme="dark"] .category-portal,
html[data-theme="dark"] .category-portal:hover,
html[data-theme="dark"] .category-portal:focus,
html[data-theme="dark"] .category-portal:focus-visible,
html[data-theme="dark"] .category-portal.active {
    background: #162033 !important;
    background-image: none !important;

    color: #ffffff !important;

    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;

    transform: none !important;
}

html[data-theme="dark"] .category-portal:hover,
html[data-theme="dark"] .category-portal.active {
    background: #1b2941 !important;
    border-color: #0878ff !important;
}

html[data-theme="dark"] .category-portal strong,
html[data-theme="dark"] .category-portal small,
html[data-theme="dark"] .category-portal b {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* صندوق الفلاتر الكبير */

html[data-theme="dark"] .filters-drawer {
    background: #101a2d !important;
    color: #ffffff !important;

    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
}

/* رأس صندوق الفلاتر */

html[data-theme="dark"] .filters-drawer > summary {
    background: #101a2d !important;
    color: #ffffff !important;

    border-radius: 20px !important;
}

html[data-theme="dark"] .filters-drawer[open] > summary {
    border-radius: 20px 20px 0 0 !important;
}

html[data-theme="dark"] .filters-drawer > summary span,
html[data-theme="dark"] .filters-drawer > summary small {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* محتوى الفلاتر */

html[data-theme="dark"] .filters-panel {
    background: #101a2d !important;
    color: #ffffff !important;

    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

/* أسماء الحقول */

html[data-theme="dark"] .filters-panel .field,
html[data-theme="dark"] .filters-panel .field label {
    color: #ffffff !important;
}

/* حقول البحث والقوائم */

html[data-theme="dark"] .filters-panel input,
html[data-theme="dark"] .filters-panel select {
    background: #0b1526 !important;
    color: #ffffff !important;

    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .filters-panel input::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .filters-panel select option {
    background: #0b1526 !important;
    color: #ffffff !important;
}

/* عند الضغط داخل الحقل */

html[data-theme="dark"] .filters-panel input:focus,
html[data-theme="dark"] .filters-panel select:focus {
    background: #101d32 !important;
    color: #ffffff !important;

    border-color: #0878ff !important;
    outline: none !important;
}

/* عدد النتائج */

html[data-theme="dark"] .filters-panel .result-count {
    background: #16233a !important;
    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
/* =========================================================
   LIGHT MODE — COURSE PORTALS PAGE WHITE BACKGROUND
   ========================================================= */

html[data-theme="light"] .course-portals-page,
html[data-theme="light"] .course-portals-page > .container,
html[data-theme="light"] .category-portals-section,
html[data-theme="light"] .category-portals-section > .container,
html[data-theme="light"] .category-portals-grid,
html[data-theme="light"] .category-portals-hero,
html[data-theme="light"] .category-portals-hero .container {
    background: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
}

/* العناوين والنصوص داخل الصفحة */

html[data-theme="light"] .category-portals-hero h1,
html[data-theme="light"] .category-portals-hero p,
html[data-theme="light"] .category-portals-hero .eyebrow,
html[data-theme="light"] .category-portals-hero .breadcrumbs,
html[data-theme="light"] .category-portals-hero .breadcrumbs a,
html[data-theme="light"] .category-portals-section h1,
html[data-theme="light"] .category-portals-section h2,
html[data-theme="light"] .category-portals-section h3,
html[data-theme="light"] .category-portals-section p,
html[data-theme="light"] .category-portals-section span,
html[data-theme="light"] .category-portals-section small,
html[data-theme="light"] .category-portals-section strong {
    color: #000000 !important;
    opacity: 1 !important;
}

/* بطاقات البوابات */

html[data-theme="light"] .category-portal,
html[data-theme="light"] .category-portal:hover,
html[data-theme="light"] .category-portal:focus,
html[data-theme="light"] .category-portal:focus-visible,
html[data-theme="light"] .category-portal.active {
    background: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;

    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .category-portal strong,
html[data-theme="light"] .category-portal b,
html[data-theme="light"] .category-portal p,
html[data-theme="light"] .category-portal small,
html[data-theme="light"] .category-portal span {
    color: #000000 !important;
    opacity: 1 !important;
}

/* الرقم الأزرق يظل كما هو */

html[data-theme="light"] .category-portal .count-badge,
html[data-theme="light"] .category-portal .portal-index,
html[data-theme="light"] .category-portal .portal-badge {
    color: #ffffff !important;
}

/* إذا كان عندك بلوك أبيض/داكن فوق الشبكة */

html[data-theme="light"] .filters-drawer,
html[data-theme="light"] .filters-drawer > summary,
html[data-theme="light"] .filters-panel {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #e5e7eb !important;
}
/* =========================================================
   FINAL LIGHT MODE FIX — COURSES PAGE BACKGROUND
   ========================================================= */

html[data-theme="light"] body.authenticated,
html[data-theme="light"] body.authenticated .app-shell,
html[data-theme="light"] body.authenticated .app-workspace,
html[data-theme="light"] body.authenticated main#main-content,
html[data-theme="light"] body.authenticated main#main-content > section,
html[data-theme="light"] body.authenticated main#main-content > div,
html[data-theme="light"] body.authenticated .courses-page,
html[data-theme="light"] body.authenticated .course-portals-page,
html[data-theme="light"] body.authenticated .category-portals-page,
html[data-theme="light"] body.authenticated .category-portals-section,
html[data-theme="light"] body.authenticated .category-portals-hero,
html[data-theme="light"] body.authenticated .category-portals-grid {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
}

/* إزالة أي خلفية داكنة من العناصر الوهمية */

html[data-theme="light"] body.authenticated main#main-content::before,
html[data-theme="light"] body.authenticated main#main-content::after,
html[data-theme="light"] body.authenticated main#main-content > section::before,
html[data-theme="light"] body.authenticated main#main-content > section::after,
html[data-theme="light"] body.authenticated .category-portals-section::before,
html[data-theme="light"] body.authenticated .category-portals-section::after,
html[data-theme="light"] body.authenticated .category-portals-hero::before,
html[data-theme="light"] body.authenticated .category-portals-hero::after {
    background: transparent !important;
    background-image: none !important;
}

/* نصوص صفحة بوابات الكورسات */

html[data-theme="light"] body.authenticated main#main-content h1,
html[data-theme="light"] body.authenticated main#main-content h2,
html[data-theme="light"] body.authenticated main#main-content h3,
html[data-theme="light"] body.authenticated main#main-content p,
html[data-theme="light"] body.authenticated main#main-content span,
html[data-theme="light"] body.authenticated main#main-content small,
html[data-theme="light"] body.authenticated main#main-content strong,
html[data-theme="light"] body.authenticated main#main-content a,
html[data-theme="light"] body.authenticated main#main-content .breadcrumbs {
    color: #000000 !important;
    opacity: 1 !important;
}

/* البطاقات تبقى بيضاء */

html[data-theme="light"] body.authenticated .category-portal,
html[data-theme="light"] body.authenticated .category-portal:hover,
html[data-theme="light"] body.authenticated .category-portal:focus,
html[data-theme="light"] body.authenticated .category-portal.active {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    border-color: #dfe3ea !important;
}
/* =========================================================
   LIGHT MODE — COURSES + SERVICES PAGES WHITE BACKGROUND
   ========================================================= */

/* الخلفية العامة للصفحات المطلوبة */
html[data-theme="light"] .course-portals-page,
html[data-theme="light"] .category-portals-page,
html[data-theme="light"] .category-portals-section,
html[data-theme="light"] .category-portals-hero,
html[data-theme="light"] .services-page,
html[data-theme="light"] .services-hero,
html[data-theme="light"] .services-overview,
html[data-theme="light"] .services-map-section,
html[data-theme="light"] .services-grid-section,
html[data-theme="light"] .service-path-section,
html[data-theme="light"] .service-hero-section,
html[data-theme="light"] .hero-reimagined,
html[data-theme="light"] .hero-reimagined > .container,
html[data-theme="light"] .course-portals-page > .container,
html[data-theme="light"] .category-portals-page > .container,
html[data-theme="light"] .category-portals-section > .container,
html[data-theme="light"] .category-portals-hero > .container,
html[data-theme="light"] .services-page > .container,
html[data-theme="light"] .services-hero > .container,
html[data-theme="light"] .services-overview > .container,
html[data-theme="light"] .services-map-section > .container,
html[data-theme="light"] .services-grid-section > .container,
html[data-theme="light"] .service-path-section > .container,
html[data-theme="light"] .service-hero-section > .container {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
}

/* أي طبقات أو أوفرلاي أو pseudo-elements */
html[data-theme="light"] .course-portals-page::before,
html[data-theme="light"] .course-portals-page::after,
html[data-theme="light"] .category-portals-page::before,
html[data-theme="light"] .category-portals-page::after,
html[data-theme="light"] .category-portals-section::before,
html[data-theme="light"] .category-portals-section::after,
html[data-theme="light"] .category-portals-hero::before,
html[data-theme="light"] .category-portals-hero::after,
html[data-theme="light"] .services-page::before,
html[data-theme="light"] .services-page::after,
html[data-theme="light"] .services-hero::before,
html[data-theme="light"] .services-hero::after,
html[data-theme="light"] .services-overview::before,
html[data-theme="light"] .services-overview::after,
html[data-theme="light"] .services-map-section::before,
html[data-theme="light"] .services-map-section::after,
html[data-theme="light"] .services-grid-section::before,
html[data-theme="light"] .services-grid-section::after,
html[data-theme="light"] .service-path-section::before,
html[data-theme="light"] .service-path-section::after,
html[data-theme="light"] .service-hero-section::before,
html[data-theme="light"] .service-hero-section::after,
html[data-theme="light"] .hero-reimagined::before,
html[data-theme="light"] .hero-reimagined::after {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* النصوص داخل هالصفحات */
html[data-theme="light"] .course-portals-page h1,
html[data-theme="light"] .course-portals-page h2,
html[data-theme="light"] .course-portals-page h3,
html[data-theme="light"] .course-portals-page p,
html[data-theme="light"] .course-portals-page span,
html[data-theme="light"] .course-portals-page small,
html[data-theme="light"] .course-portals-page strong,
html[data-theme="light"] .course-portals-page a,
html[data-theme="light"] .category-portals-page h1,
html[data-theme="light"] .category-portals-page h2,
html[data-theme="light"] .category-portals-page h3,
html[data-theme="light"] .category-portals-page p,
html[data-theme="light"] .category-portals-page span,
html[data-theme="light"] .category-portals-page small,
html[data-theme="light"] .category-portals-page strong,
html[data-theme="light"] .category-portals-page a,
html[data-theme="light"] .services-page h1,
html[data-theme="light"] .services-page h2,
html[data-theme="light"] .services-page h3,
html[data-theme="light"] .services-page p,
html[data-theme="light"] .services-page span,
html[data-theme="light"] .services-page small,
html[data-theme="light"] .services-page strong,
html[data-theme="light"] .services-page a,
html[data-theme="light"] .services-hero h1,
html[data-theme="light"] .services-hero h2,
html[data-theme="light"] .services-hero h3,
html[data-theme="light"] .services-hero p,
html[data-theme="light"] .services-hero span,
html[data-theme="light"] .services-hero small,
html[data-theme="light"] .services-hero strong,
html[data-theme="light"] .services-hero a,
html[data-theme="light"] .hero-reimagined h1,
html[data-theme="light"] .hero-reimagined h2,
html[data-theme="light"] .hero-reimagined h3,
html[data-theme="light"] .hero-reimagined p,
html[data-theme="light"] .hero-reimagined span,
html[data-theme="light"] .hero-reimagined small,
html[data-theme="light"] .hero-reimagined strong,
html[data-theme="light"] .hero-reimagined a {
    color: #000000 !important;
    opacity: 1 !important;
}

/* بطاقات بوابات الكورسات تبقى بيضاء */
html[data-theme="light"] .category-portal,
html[data-theme="light"] .category-portal:hover,
html[data-theme="light"] .category-portal:focus,
html[data-theme="light"] .category-portal:focus-visible,
html[data-theme="light"] .category-portal.active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06) !important;
}

/* بطاقات/بلوكات الخدمات */
html[data-theme="light"] .service-card,
html[data-theme="light"] .service-tile,
html[data-theme="light"] .service-box,
html[data-theme="light"] .service-path-card,
html[data-theme="light"] .service-preview-tile,
html[data-theme="light"] .service-preview-tile:hover,
html[data-theme="light"] .hero-visual-card,
html[data-theme="light"] .hero-floating-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06) !important;
}

/* لو في خلفية شبكية في قسم الخدمات */
html[data-theme="light"] .services-hero,
html[data-theme="light"] .services-page,
html[data-theme="light"] .service-path-section,
html[data-theme="light"] .hero-reimagined {
    background-image: none !important;
}

/* الأزرار داخل هالأقسام */
html[data-theme="light"] .services-page .btn,
html[data-theme="light"] .services-hero .btn,
html[data-theme="light"] .course-portals-page .btn,
html[data-theme="light"] .category-portals-page .btn {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}
/* =========================================================
   FINAL LIGHT MODE FIX — COURSES AND SERVICES ROUTES
   ========================================================= */

/* خلفية صفحة الكورسات */

html[data-theme="light"] body.page-courses,
html[data-theme="light"] body.page-courses .app-shell,
html[data-theme="light"] body.page-courses .app-workspace,
html[data-theme="light"] body.page-courses main#main-content,
html[data-theme="light"] body.page-courses main#main-content > *,
html[data-theme="light"] body.page-courses main#main-content section,
html[data-theme="light"] body.page-courses main#main-content section > .container {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
}

/* خلفية صفحة الخدمات */

html[data-theme="light"] body.page-services,
html[data-theme="light"] body.page-services .app-shell,
html[data-theme="light"] body.page-services .app-workspace,
html[data-theme="light"] body.page-services main#main-content,
html[data-theme="light"] body.page-services main#main-content > *,
html[data-theme="light"] body.page-services main#main-content section,
html[data-theme="light"] body.page-services main#main-content section > .container {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
}

/* إزالة أي طبقة داكنة وهمية */

html[data-theme="light"] body.page-courses main#main-content::before,
html[data-theme="light"] body.page-courses main#main-content::after,
html[data-theme="light"] body.page-courses main#main-content section::before,
html[data-theme="light"] body.page-courses main#main-content section::after,
html[data-theme="light"] body.page-services main#main-content::before,
html[data-theme="light"] body.page-services main#main-content::after,
html[data-theme="light"] body.page-services main#main-content section::before,
html[data-theme="light"] body.page-services main#main-content section::after {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* النصوص تصبح سوداء */

html[data-theme="light"] body.page-courses main#main-content h1,
html[data-theme="light"] body.page-courses main#main-content h2,
html[data-theme="light"] body.page-courses main#main-content h3,
html[data-theme="light"] body.page-courses main#main-content p,
html[data-theme="light"] body.page-courses main#main-content small,
html[data-theme="light"] body.page-courses main#main-content strong,
html[data-theme="light"] body.page-courses main#main-content .breadcrumbs,
html[data-theme="light"] body.page-courses main#main-content .breadcrumbs a,
html[data-theme="light"] body.page-services main#main-content h1,
html[data-theme="light"] body.page-services main#main-content h2,
html[data-theme="light"] body.page-services main#main-content h3,
html[data-theme="light"] body.page-services main#main-content p,
html[data-theme="light"] body.page-services main#main-content small,
html[data-theme="light"] body.page-services main#main-content strong,
html[data-theme="light"] body.page-services main#main-content .breadcrumbs,
html[data-theme="light"] body.page-services main#main-content .breadcrumbs a {
    color: #000000 !important;
    opacity: 1 !important;
}

/* بطاقات بوابات الكورسات */

html[data-theme="light"] body.page-courses .category-portal,
html[data-theme="light"] body.page-courses .category-portal:hover,
html[data-theme="light"] body.page-courses .category-portal:focus,
html[data-theme="light"] body.page-courses .category-portal.active {
    background: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    border-color: #dfe3ea !important;
}
/* =========================================================
   DARK MODE — SERVICE CARD SMALL LABELS
   ========================================================= */

html[data-theme="dark"] .services-page .service-card .service-tag,
html[data-theme="dark"] .services-page .service-card .service-label,
html[data-theme="dark"] .services-page .service-card .service-badge,
html[data-theme="dark"] .services-page .service-card .service-chip,
html[data-theme="dark"] .services-page .service-card .tag,
html[data-theme="dark"] .services-page .service-card .label,
html[data-theme="dark"] .services-page .service-card .badge,
html[data-theme="dark"] .services-page .service-card .chip,
html[data-theme="dark"] .services-page .service-card [class*="tag"],
html[data-theme="dark"] .services-page .service-card [class*="label"],
html[data-theme="dark"] .services-page .service-card [class*="badge"],
html[data-theme="dark"] .services-page .service-card [class*="chip"] {
    background: #1c2d46 !important;
    background-image: none !important;

    color: #ffffff !important;
    opacity: 1 !important;

    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .services-page .service-card .service-tag *,
html[data-theme="dark"] .services-page .service-card .service-label *,
html[data-theme="dark"] .services-page .service-card .service-badge *,
html[data-theme="dark"] .services-page .service-card .service-chip *,
html[data-theme="dark"] .services-page .service-card .tag *,
html[data-theme="dark"] .services-page .service-card .label *,
html[data-theme="dark"] .services-page .service-card .badge *,
html[data-theme="dark"] .services-page .service-card .chip *,
html[data-theme="dark"] .services-page .service-card [class*="tag"] *,
html[data-theme="dark"] .services-page .service-card [class*="label"] *,
html[data-theme="dark"] .services-page .service-card [class*="badge"] *,
html[data-theme="dark"] .services-page .service-card [class*="chip"] * {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .services-page .service-card .service-tag,
html[data-theme="dark"] .services-page .service-card .service-label,
html[data-theme="dark"] .services-page .service-card .service-badge,
html[data-theme="dark"] .services-page .service-card .service-chip,
html[data-theme="dark"] .services-page .service-card .tag,
html[data-theme="dark"] .services-page .service-card .label,
html[data-theme="dark"] .services-page .service-card .badge,
html[data-theme="dark"] .services-page .service-card .chip,
html[data-theme="dark"] .services-page .service-card [class*="tag"],
html[data-theme="dark"] .services-page .service-card [class*="label"],
html[data-theme="dark"] .services-page .service-card [class*="badge"],
html[data-theme="dark"] .services-page .service-card [class*="chip"] {
    font-weight: 700 !important;
}
/* =========================================================
   DARK MODE — SERVICE UNIVERSE TITLES
   ========================================================= */

html[data-theme="dark"] .service-universe-card .service-universe-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 130px !important;
    max-width: 190px !important;
    min-height: 64px !important;

    padding: 12px 18px !important;

    color: #08111f !important;
    opacity: 1 !important;

    font-size: clamp(16px, 1.15vw, 18px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-transform: capitalize !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;

    border: 1px solid rgba(8, 17, 31, 0.14) !important;
    border-radius: 18px !important;

    text-shadow: none !important;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="dark"] .service-universe-icon,
html[data-theme="dark"] .service-universe-icon * {
    color: #08111f !important;
    opacity: 1 !important;
}

/* ترتيب أعلى البطاقة بعد تكبير العنوان */

html[data-theme="dark"] .service-universe-card .service-card-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

/* الهاتف */

@media (max-width: 640px) {
    html[data-theme="dark"] .service-universe-card .service-universe-icon {
        min-width: 110px !important;
        max-width: 145px !important;
        min-height: 56px !important;

        padding: 10px 13px !important;

        font-size: 15px !important;
        border-radius: 15px !important;
    }
}
/* =========================================================
   DARK MODE — ADMIN USERS WHITE CHIPS FIX
   ========================================================= */

/* عدد المستخدمين الظاهر */

html[data-theme="dark"] .admin-users-page .result-count {
    background: #16233a !important;
    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* مربعات أرقام المستخدمين */

html[data-theme="dark"] .admin-users-page .id-chip {
    background: #16233a !important;
    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* مربعات الأدوار */

html[data-theme="dark"] .admin-users-page .role-pill,
html[data-theme="dark"] .admin-users-page .role-owner,
html[data-theme="dark"] .admin-users-page .role-backup_admin,
html[data-theme="dark"] .admin-users-page .role-teacher,
html[data-theme="dark"] .admin-users-page .role-reviewer,
html[data-theme="dark"] .admin-users-page .role-student {
    background: #1b2941 !important;
    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* النص داخل المربعات */

html[data-theme="dark"] .admin-users-page .result-count *,
html[data-theme="dark"] .admin-users-page .id-chip *,
html[data-theme="dark"] .admin-users-page .role-pill * {
    color: #ffffff !important;
    opacity: 1 !important;
}
/* =========================================================
   DARK MODE — ADMIN COURSES WHITE CHIPS FIX
   ========================================================= */

/* رقم الكورس: #18، #16... */

html[data-theme="dark"] .admin-courses-page .course-admin-id {
    background: #17233a !important;
    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;
}

/* حالة الكورس: منشور، مسودة، معتمد... */

html[data-theme="dark"] .admin-courses-page .workflow-pill {
    background: #17233a !important;
    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* حالة منشور بلون أخضر داكن خفيف */

html[data-theme="dark"]
.admin-courses-page
.workflow-pill.status-published {
    background: #12382d !important;
    color: #d1fae5 !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
}

/* معلومات المعلم والمدقق والوحدات والدروس والسعر */

html[data-theme="dark"]
.admin-courses-page
.course-admin-facts > span {
    background: #17233a !important;
    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* السعر */

html[data-theme="dark"]
.admin-courses-page
.course-admin-facts .price-chip {
    background: #1b2941 !important;
    color: #ffffff !important;

    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* أي عنصر داخل هذه المربعات */

html[data-theme="dark"] .admin-courses-page .course-admin-id *,
html[data-theme="dark"] .admin-courses-page .workflow-pill *,
html[data-theme="dark"] .admin-courses-page .course-admin-facts > span * {
    color: inherit !important;
    opacity: 1 !important;
}
@media (max-width: 720px) {
    .header-inner {
        position: relative;
        overflow: visible !important;
    }

    .header-actions {
        position: relative !important;
        z-index: 1000 !important;
        overflow: visible !important;
    }

    .currency-switch {
        display: flex !important;
        position: relative !important;
        z-index: 1001 !important;
        flex: 0 0 auto !important;
        pointer-events: auto !important;
    }

    .currency-switch select {
        display: block !important;
        width: 92px !important;
        min-width: 92px !important;
        height: 40px !important;
        padding-inline: 9px 26px !important;
        border-radius: 11px !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        -webkit-appearance: menulist !important;
        appearance: auto !important;
    }
}
/* =========================================================
   DARK MODE — CURRENCY SELECT TEXT
   ========================================================= */

html[data-theme="dark"] .currency-switch select {
    background-color: #101a2d !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
    color-scheme: dark !important;
}

html[data-theme="dark"] .currency-switch select option {
    background-color: #101a2d !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .currency-switch select:focus,
html[data-theme="dark"] .currency-switch select:hover {
    background-color: #16233a !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .currency-switch select option:checked {
    background-color: #1f6feb !important;
    color: #ffffff !important;
}
/* Footer social media icons */

.social-icons {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 18px !important;
}

.social-icons .social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    height: 48px !important;

    padding: 0 !important;
    overflow: hidden !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;

    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}

.social-icons .social-link img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    border-radius: 50% !important;
}

.social-icons .social-link:hover {
    transform: translateY(-3px) scale(1.07) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22) !important;
}
/* =========================================================
   COURSE INTRO VIDEO — MOBILE LOADING AND FULLSCREEN
   ========================================================= */

.course-intro-video {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    background: #020617 !important;
    border-radius: 18px !important;
}

.course-intro-video iframe,
.course-intro-video video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: #020617 !important;
    object-fit: contain !important;
}

.course-intro-video iframe {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.course-intro-video.is-ready iframe {
    opacity: 1;
}

.course-video-loader {
    position: absolute;
    inset: 0;
    z-index: 8;

    display: grid;
    place-items: center;

    overflow: hidden;
    background: #081225;
    pointer-events: none;
}

.course-video-loader[hidden] {
    display: none !important;
}

.course-video-loader > img {
    position: absolute;
    inset: 0;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    opacity: 0.72;
}

.course-video-loader::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2, 6, 23, 0.18),
            rgba(2, 6, 23, 0.78)
        );
}

.course-video-loader-content {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 16px;
    border-radius: 12px;

    background: rgba(2, 6, 23, 0.72);
    color: #ffffff;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.course-video-spinner {
    width: 22px;
    height: 22px;

    border: 3px solid rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: course-video-spin 0.75s linear infinite;
}

@keyframes course-video-spin {
    to {
        transform: rotate(360deg);
    }
}

/*
 * يغطي زر Google Drive الخارجي الموجود أعلى اليمين
 * ويضع مكانه زر التكبير الخاص بالموقع.
 */
.course-intro-fullscreen {
    z-index: 20 !important;
    top: 10px !important;
    inset-inline-end: 10px !important;

    min-width: 46px !important;
    min-height: 46px !important;

    background: rgba(2, 6, 23, 0.88) !important;
    color: #ffffff !important;
}

.course-intro-video:fullscreen,
.course-intro-video:-webkit-full-screen,
.course-intro-video.is-video-expanded {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    max-width: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    background: #000000 !important;
}

.course-intro-video.is-video-expanded {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
}

.course-intro-video:fullscreen iframe,
.course-intro-video:fullscreen video,
.course-intro-video:-webkit-full-screen iframe,
.course-intro-video:-webkit-full-screen video,
.course-intro-video.is-video-expanded iframe,
.course-intro-video.is-video-expanded video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

@media (max-width: 640px) {
    .course-intro-video {
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        border-radius: 16px !important;
    }

    .course-intro-fullscreen {
        top: 8px !important;
        inset-inline-end: 8px !important;

        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;

        padding: 0 !important;
        border-radius: 12px !important;
    }

    .course-intro-fullscreen b {
        display: none !important;
    }

    .course-intro-fullscreen span {
        font-size: 23px !important;
    }

    .course-video-loader-content {
        font-size: 0.88rem;
    }
}
/* بوابات الكورسات — النزول إلى النتائج */

#course-results {
    scroll-margin-top: 110px;
}

@media (max-width: 768px) {
    #course-results {
        scroll-margin-top: 85px;
    }
}

/* =========================================================
   MODIFICATION #2: CHECKOUT PAGE REDESIGN & REORDERING
   ========================================================= */

@media (min-width: 901px) {
    .checkout-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 390px !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
            "timer side"
            "video side"
            "form side"
            "reviews side" !important;
        gap: 28px !important;
        align-items: start !important;
    }

    .checkout-timer-card {
        grid-area: timer !important;
    }

    .checkout-guide {
        grid-area: video !important;
    }

    .checkout-form {
        grid-area: form !important;
    }

    .order-summary {
        grid-area: side !important;
        position: sticky !important;
        top: calc(var(--header-h) + 22px) !important;
    }

    .checkout-reviews {
        grid-area: reviews !important;
    }
    
    .success-state, .notice {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 900px) {
    .checkout-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .order-summary {
        position: static !important;
        width: 100% !important;
    }
}

/* Premium Countdown Timer styling on Checkout */
.checkout-timer-card {
    background: linear-gradient(135deg, rgba(255, 94, 58, 0.08), rgba(255, 42, 95, 0.08)) !important;
    border: 1px solid rgba(255, 94, 58, 0.25) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
}

html[data-theme="light"] .checkout-timer-card {
    background: #fff8f6 !important;
    border-color: #ffd8d0 !important;
}

.checkout-timer-card .eyebrow {
    color: #ff5e3a !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
}

.checkout-timer-card .offer-countdown {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
}

/* Payment Methods Grid */
.payment-methods-checkout {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 14px !important;
}

.payment-method-card {
    border-width: 2px !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: var(--surface-2) !important;
    border-color: var(--line) !important;
}

.payment-method-card:hover {
    border-color: var(--brand-primary) !important;
    opacity: 0.95 !important;
}

.payment-method-card:has(input:checked) {
    border-color: var(--brand-primary) !important;
    background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface)) !important;
    box-shadow: 0 4px 15px rgba(8, 120, 255, 0.15) !important;
}

/* Premium Orange Submit Button (match Stripe/Card Checkout reference image) */
.checkout-submit-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 68px !important;
    background: linear-gradient(135deg, #ff5e3a, #ff2a5f) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 16px !important;
    padding: 14px 28px !important;
    box-shadow: 0 10px 24px rgba(255, 42, 95, 0.28) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: center !important;
}

.checkout-submit-btn:hover {
    transform: translateY(-2.5px) !important;
    box-shadow: 0 14px 32px rgba(255, 42, 95, 0.38) !important;
    filter: brightness(1.05) !important;
}

.checkout-submit-btn:active {
    transform: translateY(-0.5px) !important;
}

.checkout-submit-btn .btn-main-text {
    font-size: 1.32rem !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ffffff !important;
}

.checkout-submit-btn .btn-sub-text {
    font-size: 0.88rem !important;
    opacity: 0.92 !important;
    margin-top: 5px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* =========================================================
   PRINT PROTECTION — hide all content when printing
   ========================================================= */
@media print {
  body {
    display: none !important;
  }
}


/* =========================================================
   HERO VIDEO — فيديو الصفحة الرئيسية
   ========================================================= */

/* حاوية الفيديو تأخذ نفس منطقة hero-visual-stage */
.hero-video-wrap {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* iframe / video يملأ الحاوية بالكامل */
.hero-video-wrap iframe,
.hero-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* زر ملء الشاشة */
.hero-video-wrap .video-fullscreen-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px 8px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}

.hero-video-wrap .video-fullscreen-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* spinner loader */
.hero-video-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface, #13141a);
  z-index: 5;
  transition: opacity 0.4s ease;
}

.hero-video-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--muted, #888);
  font-size: 0.9rem;
}

/* عندما يكون الفيديو موجوداً — الصورة تصغر وتكون زخرفية */
.hero-visual-card-mini {
  margin-top: 12px;
  max-height: 140px;
  overflow: hidden;
  border-radius: 14px;
  position: relative;
}

.hero-visual-card-mini img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 14px;
  opacity: 0.75;
  filter: brightness(0.85);
}

/* البطاقة الطافية في وضع mini */
.hero-visual-card-mini .hero-floating-card {
  font-size: 0.75rem;
  padding: 7px 11px;
}

/* تخطيط hero-visual-stage عند وجود الفيديو: عمود رأسي */
.hero-visual-stage {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* الشاشات الكبيرة: نحافظ على التناسق */
@media (min-width: 900px) {
  .hero-video-wrap {
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  }

  .hero-visual-card-mini {
    max-height: 110px;
  }

  .hero-visual-card-mini img {
    height: 110px;
  }
}

/* الجوال: نسبة 4:3 للفيديو لتوفير مساحة */
@media (max-width: 640px) {
  .hero-video-wrap {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    margin-bottom: 10px;
  }

  .hero-visual-card-mini {
    max-height: 90px;
  }

  .hero-visual-card-mini img {
    height: 90px;
  }
}
/* لون خط القوائم المنسدلة في الوضع الليلي فقط */
html[data-theme="dark"] select,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .form-grid select {
  color: #ffffff !important;
  background: #0b1730 !important;
}

/* عناصر القائمة نفسها */
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
  color: #ffffff !important;
  background: #0b1730 !important;
}

/* العنصر المحدد أو عند المرور */
html[data-theme="dark"] select option:checked,
html[data-theme="dark"] select option:hover,
html[data-theme="dark"] select option:focus {
  color: #ffffff !important;
  background: #1d4ed8 !important;
}
html[data-theme="dark"] * option {
  color: #ffffff !important;
  background: #0b1730 !important;
}