:root{--theme-primary:#0D6EFD;--theme-primary-dark:#0B3D91;--theme-primary-navy:#082A5E;--theme-primary-light:#EAF3FF;--theme-gradient:linear-gradient(135deg,#082A5E 0%,#0B3D91 55%,#0A58CA 100%);--theme-overlay:rgba(8,42,94,.72);--theme-footer-bg:#082A5E;--theme-button-gradient:linear-gradient(135deg,#082A5E 0%,#0B3D91 56%,#0A58CA 100%);--font-cairo:'Cairo',sans-serif;--font-inter:'Inter',sans-serif;--background:0 0% 97%;--foreground:222 47% 11%;--card:0 0% 100%;--card-foreground:222 47% 11%;--popover:0 0% 100%;--popover-foreground:222 47% 11%;--primary:216 98% 52%;--primary-foreground:0 0% 100%;--secondary:0 0% 94%;--secondary-foreground:222 47% 20%;--muted:0 0% 94%;--muted-foreground:215 16% 47%;--accent:35 92% 50%;--accent-foreground:0 0% 100%;--destructive:0 72% 51%;--border:0 0% 88%;--input:0 0% 88%;--ring:216 98% 52%;--chart-1:216 98% 52%;--chart-2:204 94% 58%;--chart-3:35 92% 50%;--chart-4:340 65% 55%;--chart-5:200 70% 50%;--radius:.75rem;--sidebar-background:0 0% 100%;--sidebar-foreground:222 47% 11%;--sidebar-primary:216 98% 52%;--sidebar-primary-foreground:0 0% 100%;--sidebar-accent:0 0% 95%;--sidebar-border:0 0% 90%;--success:152 60% 40%;--warning:38 92% 50%;--hero-bg:218 84% 20%;--shadow-sm:0 1px 3px rgba(0,0,0,.07);--shadow-md:0 4px 6px rgba(0,0,0,.10);--shadow-lg:0 10px 15px rgba(0,0,0,.10);--shadow-xl:0 24px 65px rgba(8, 42, 94,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-cairo);direction:rtl;-webkit-font-smoothing:antialiased}body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 12% 5%,hsl(var(--accent)/.08),transparent 28%),radial-gradient(circle at 88% 0,hsl(var(--primary)/.09),transparent 32%)}body.ltr{direction:ltr;font-family:var(--font-inter),var(--font-cairo),sans-serif}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}button,input,select,textarea{font-family:inherit}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:hsl(var(--muted-foreground)/.25);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:hsl(var(--muted-foreground)/.4)}
.container{width:min(1280px,92vw);margin-inline:auto}.page-shell{min-height:100vh;background:hsl(var(--background))}.muted{color:hsl(var(--muted-foreground))}.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:hsl(var(--primary)/.10);color:hsl(var(--primary));border:1px solid hsl(var(--primary)/.18);font-size:12px;font-weight:800}.badge.gold{background:hsl(var(--accent)/.14);color:#8a5200;border-color:hsl(var(--accent)/.25)}.badge.red{background:#fee2e2;color:#dc2626;border-color:#fecaca}.badge.green{background:#dcfce7;color:#15803d;border-color:#bbf7d0}.btn{border:1px solid transparent;border-radius:12px;padding:10px 16px;font-weight:800;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;white-space:nowrap}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}.btn-accent{background:hsl(var(--accent));color:#0B3D91}.btn-outline{background:white;color:hsl(var(--primary));border-color:hsl(var(--border))}.btn-ghost{background:hsl(var(--muted));color:hsl(var(--primary))}.btn-sm{padding:7px 12px;min-height:34px;font-size:13px}.input,.select,textarea{height:42px;border:1px solid hsl(var(--input));background:white;border-radius:12px;padding:0 12px;color:hsl(var(--foreground));outline:none}.input:focus,.select:focus,textarea:focus{border-color:hsl(var(--ring)/.35);box-shadow:0 0 0 3px hsl(var(--ring)/.12)}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.section{padding:72px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}.section-head h2,.hero h1,.page-title h1{letter-spacing:-.02em}.section-head h2{font-size:34px;line-height:1.2;margin:0;font-weight:900}.grid{display:grid;gap:20px}.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:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:18px;box-shadow:var(--shadow-sm);padding:20px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:hsl(var(--primary)/.18)}.card h3{margin:0 0 8px;font-size:17px}.iconbox{width:52px;height:52px;border-radius:18px;background:hsl(var(--primary)/.10);display:grid;place-items:center;color:hsl(var(--primary));font-size:24px}.iconbox.gold{background:hsl(var(--accent)/.14);color:#b45309}.progress{height:9px;background:hsl(var(--muted));border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--chart-2)));animation:growBar 1s ease both}.line-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.topnav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border-bottom:1px solid hsl(var(--border));box-shadow:var(--shadow-sm)}.nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-weight:900}.logo{width:44px;height:44px;border-radius:14px;background:hsl(var(--primary));color:white;display:grid;place-items:center;font-size:21px;box-shadow:0 10px 22px rgba(8, 42, 94,.22)}.nav-links{display:flex;align-items:center;gap:16px;color:hsl(var(--muted-foreground));font-weight:700}.nav-links a:hover{color:hsl(var(--primary))}.nav-links .active{color:hsl(var(--primary))}
.hero{position:relative;min-height:88vh;overflow:hidden;display:flex;align-items:center;color:white}.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(to left,rgba(8, 42, 94,.97) 45%,rgba(8, 42, 94,.75) 75%,rgba(8, 42, 94,.40) 100%);z-index:1}.hero:after{content:'';position:absolute;inset:0;z-index:1;opacity:.045;background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:40px 40px}.hero-content{position:relative;z-index:2;width:min(620px,92vw);margin-inline-start:calc((100vw - min(1280px,92vw))/2);padding-block:80px}.hero h1{font-size:clamp(42px,6vw,72px);font-weight:900;line-height:1.08;margin:18px 0}.hero h1 span{display:block;color:hsl(var(--accent))}.hero p{font-size:18px;line-height:1.9;color:rgba(255,255,255,.78);margin:0 0 28px}.hero-search{display:flex;max-width:520px;margin:0 0 26px}.hero-search .input{height:50px;border:0;box-shadow:var(--shadow-lg);border-radius:0 14px 14px 0;flex:1}.hero-search .btn{border-radius:14px 0 0 14px;min-height:50px}.hero-stats{display:flex;flex-wrap:wrap;gap:12px}.hero-stat{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(6px)}.hero-stat b{font-size:15px}.hero-stat span{font-size:12px;color:rgba(255,255,255,.62)}
.course-card{overflow:hidden;padding:0;border:0}.course-thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,hsl(var(--primary)/.20),hsl(var(--accent)/.20));overflow:hidden}.course-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}.course-card:hover .course-thumb img{transform:scale(1.06)}.course-thumb:after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62),transparent 55%);opacity:0;transition:opacity .25s}.course-card:hover .course-thumb:after{opacity:1}.course-badges{position:absolute;top:12px;right:12px;display:flex;gap:7px;z-index:2}.course-discount{position:absolute;top:12px;left:12px;z-index:2}.course-body{padding:16px}.course-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.course-title{font-size:15px;font-weight:900;line-height:1.6;margin:0 0 4px;min-height:46px}.course-instructor{font-size:12px;color:hsl(var(--muted-foreground));margin-bottom:12px}.course-stats{display:flex;gap:13px;color:hsl(var(--muted-foreground));font-size:12px;border-bottom:1px solid hsl(var(--border));padding-bottom:12px}.price{font-size:19px;font-weight:900;padding-top:10px}.old-price{font-size:13px;text-decoration:line-through;color:hsl(var(--muted-foreground));font-weight:600;margin-inline-start:6px}.free{color:#0B3D91}.catalog-hero{position:relative;padding:62px 0;border-bottom:1px solid hsl(var(--border));overflow:hidden;color:white}.catalog-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.catalog-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8, 42, 94,.88),rgba(8, 42, 94,.75));z-index:1}.catalog-hero .container{position:relative;z-index:2}.filter-panel{margin-top:16px;padding:18px;background:#fff;border:1px solid hsl(var(--border));border-radius:20px;color:hsl(var(--foreground));box-shadow:var(--shadow-lg)}
.catalog-filter-card{position:relative;margin-bottom:24px;padding:1.25rem;border:1px solid rgba(8, 42, 94,.12);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.94));box-shadow:0 22px 55px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);overflow:hidden}.catalog-filter-card:before{content:'';position:absolute;inset-inline:1.25rem;top:0;height:3px;border-radius:0 0 999px 999px;background:linear-gradient(90deg,#0B3D91,#f59e0b)}.catalog-filter-grid{position:relative;display:grid;grid-template-columns:1.35fr repeat(3,minmax(0,1fr));gap:1rem;align-items:end}.catalog-filter-field{min-width:0;display:grid;gap:.45rem}.catalog-filter-field>span{color:#64748b;font-size:.82rem;font-weight:900}.catalog-filter-field .input,.catalog-filter-field .select{width:100%;height:3.2rem;border-color:#dbe3ea;border-radius:14px;background:#fff;color:#111827;font-size:.92rem;font-weight:750;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);transition:border-color .18s ease,box-shadow .18s ease}.catalog-filter-field .input:hover,.catalog-filter-field .select:hover{border-color:rgba(8, 42, 94,.28)}.catalog-filter-field .input:focus,.catalog-filter-field .select:focus{border-color:rgba(8, 42, 94,.55);box-shadow:0 0 0 4px rgba(8, 42, 94,.10)}.catalog-filter-search .input{padding-inline-start:1rem}.catalog-filter-footer{position:relative;display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-top:1rem}.catalog-filter-sort{width:min(18rem,100%)}.catalog-filter-actions{display:flex;align-items:center;justify-content:flex-end;gap:.65rem;flex-wrap:wrap}.catalog-filter-actions .btn-primary{min-height:3rem;padding-inline:1.15rem;border-radius:14px;box-shadow:0 14px 30px rgba(8, 42, 94,.18)}.catalog-filter-actions .btn-outline{min-height:2.75rem;border-radius:13px;background:#fff}.catalog-filter-actions svg{width:1.25rem;height:1.25rem}@media(max-width:1020px){.catalog-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-filter-search{grid-column:1/-1}.catalog-filter-footer{align-items:stretch}.catalog-filter-actions{align-self:end}}@media(max-width:640px){.catalog-filter-card{padding:1rem;border-radius:16px}.catalog-filter-grid{grid-template-columns:1fr;gap:.85rem}.catalog-filter-footer{display:grid;grid-template-columns:1fr;gap:.85rem}.catalog-filter-sort{width:100%}.catalog-filter-actions{display:grid;grid-template-columns:1fr}.catalog-filter-actions .btn{width:100%;justify-content:center}.catalog-filter-field .input,.catalog-filter-field .select{height:3rem}}
.dashboard{min-height:100vh;background:#f9fafb}.sidebar{position:fixed;right:0;top:0;bottom:0;width:256px;background:hsl(var(--sidebar-background));border-left:1px solid hsl(var(--sidebar-border));z-index:50;box-shadow:var(--shadow-sm);transition:width .25s ease,transform .25s ease;display:flex;flex-direction:column}.body-ltr .sidebar{right:auto;left:0;border-left:0;border-right:1px solid hsl(var(--sidebar-border))}.side-head{height:72px;padding:15px 18px;border-bottom:1px solid hsl(var(--border));display:flex;align-items:center;gap:12px}.side-role{margin:14px 16px 6px;padding:10px 12px;border-radius:13px;background:hsl(var(--muted));color:hsl(var(--primary));font-size:13px;font-weight:900}.side-nav{padding:8px 10px 18px;overflow:auto;flex:1}.side-nav a{display:flex;align-items:center;gap:11px;padding:10px 13px;margin:4px 0;border-radius:12px;color:hsl(var(--muted-foreground));font-size:14px;font-weight:800;transition:all .18s ease}.side-nav a:hover,.side-nav a.active{background:hsl(var(--primary));color:white;box-shadow:0 10px 22px rgba(8, 42, 94,.13)}.main{margin-right:256px;transition:margin .25s ease}.body-ltr .main{margin-right:0;margin-left:256px}.topbar{height:64px;background:rgba(255,255,255,.90);backdrop-filter:blur(14px);border-bottom:1px solid hsl(var(--border));display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:20;box-shadow:var(--shadow-sm)}.content{padding:24px}.page-title h1{margin:0 0 4px;font-size:30px;font-weight:900}.metric{position:relative;overflow:hidden}.metric:after{content:'';position:absolute;left:-32px;top:-32px;width:110px;height:110px;border-radius:999px;background:hsl(var(--accent)/.12)}.metric .num{font-size:30px;font-weight:900;color:hsl(var(--primary));position:relative;z-index:1}.hero-banner{position:relative;height:190px;border-radius:22px;overflow:hidden;display:flex;align-items:center;padding:24px;background:hsl(var(--primary));color:white}.hero-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}.hero-banner div{position:relative;z-index:1}.table{width:100%;border-collapse:separate;border-spacing:0 10px}.table th{font-size:12px;color:hsl(var(--muted-foreground));text-align:right;font-weight:800}.table td{background:white;padding:13px;border-block:1px solid hsl(var(--border));font-size:14px}.table td:first-child{border-right:1px solid hsl(var(--border));border-radius:0 14px 14px 0}.table td:last-child{border-left:1px solid hsl(var(--border));border-radius:14px 0 0 14px}.chart{height:230px;display:flex;align-items:end;gap:12px;padding:14px;border-radius:18px;background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid hsl(var(--border))}.bar{flex:1;min-width:18px;border-radius:12px 12px 0 0;background:linear-gradient(180deg,hsl(var(--primary)),hsl(var(--chart-2)));animation:growBar .9s ease both}.message{display:flex;gap:10px;align-items:flex-start}.avatar{width:38px;height:38px;border-radius:999px;background:hsl(var(--primary));color:white;display:grid;place-items:center;font-weight:900;flex:0 0 auto}.bubble{background:white;border:1px solid hsl(var(--border));border-radius:18px;padding:12px;box-shadow:var(--shadow-sm);max-width:660px}.bubble.me{background:hsl(var(--primary));color:white}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.day{min-height:70px;background:white;border:1px solid hsl(var(--border));border-radius:14px;padding:8px;font-size:12px}.day.has{border-color:hsl(var(--primary)/.22);background:hsl(var(--primary)/.04)}.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}.modal.show{display:flex}.modal-box{width:min(720px,94vw);max-height:84vh;overflow:auto;background:white;border-radius:24px;padding:24px;box-shadow:var(--shadow-xl);animation:pop .25s ease both}.toast{position:fixed;bottom:20px;left:20px;background:hsl(var(--primary));color:white;border-radius:14px;padding:14px 18px;display:none;z-index:120;box-shadow:var(--shadow-xl)}.toast.show{display:block;animation:slide .3s}.fade-up{animation:fadeUp .55s ease both}.slide-in{animation:slideIn .35s ease both}.quiz-option{display:block;width:100%;text-align:right;margin:10px 0;padding:14px 15px;border:1px solid hsl(var(--border));border-radius:14px;background:white;cursor:pointer;transition:.18s}.quiz-option:hover{border-color:hsl(var(--primary)/.35);transform:translateX(-3px)}.quiz-option.correct{background:#EAF3FF;border-color:#0D6EFD}.quiz-option.wrong{background:#fef2f2;border-color:#ef4444}.footer{background:hsl(var(--primary));color:white;padding:44px 0}.footer .muted{color:rgba(255,255,255,.7)}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes slideIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}@keyframes slide{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes growBar{from{height:0;width:0}}
@media(max-width:1020px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}.sidebar{transform:translateX(100%)}.sidebar.open{transform:none}.main,.body-ltr .main{margin:0}.nav-links{display:none}.hero-content{margin-inline:auto}.hero{min-height:76vh}}@media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.section-head{display:block}.content{padding:16px}.hero h1{font-size:36px}.hero-search{display:block}.hero-search .input,.hero-search .btn{border-radius:14px;width:100%;margin-bottom:8px}.topbar{padding:0 14px}.calendar-grid{grid-template-columns:repeat(2,1fr)}}


/* V4 exact imitation patch from uploaded Base44 React source */
:root{--imc-green:#0B3D91;--imc-amber:#f59e0b;--imc-page:#f7f7f7;--imc-soft:#f3f4f6;}
.card,.btn,.input,.select,.sidebar,.topbar{border-color:hsl(var(--border));}
.topbar{height:64px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);}
.sidebar{width:256px;background:#fff;border-left:1px solid #f3f4f6;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.side-head{height:73px;padding:16px;border-bottom:1px solid #f3f4f6}.side-head .logo{width:40px;height:40px;border-radius:12px;background:#0B3D91}.side-role{margin:12px 16px;padding:8px 12px;background:#f9fafb;border:1px solid #f3f4f6;border-radius:10px;color:#0B3D91;font-size:12px;font-weight:700}.side-nav a{min-height:42px;border-radius:12px;font-size:14px;color:#6b7280}.side-nav a:hover{background:#f9fafb;color:#111827}.side-nav a.active{background:#0B3D91;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.main{margin-right:256px}.content{padding:24px}.page-title h1{font-size:22px;font-weight:900;margin:0;color:#111827}.page-title p{font-size:13px;margin:.2rem 0 0}.hero-banner{border-radius:24px;min-height:220px;padding:32px;box-shadow:0 24px 70px rgba(8, 42, 94,.18)}
.hero .badge{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.20);backdrop-filter:blur(6px)}.hero h1{font-size:clamp(44px,5.4vw,72px)}.hero-search .input{padding-right:42px}.hero-search{filter:drop-shadow(0 14px 26px rgba(0,0,0,.18))}
.card{border-radius:16px}.course-card{border-radius:18px;box-shadow:0 1px 3px rgba(0,0,0,.07)}.course-title{letter-spacing:-.01em}.course-stats svg{width:13px;height:13px;vertical-align:-2px}.badge{font-weight:800}.metric .num{font-size:30px;line-height:1;font-weight:900;color:#0B3D91}.chart{height:220px;background:linear-gradient(180deg,#fff,#f9fafb);border:1px solid #eee;border-radius:18px;display:flex;align-items:end;gap:12px;padding:20px}.chart .bar{flex:1;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#0B3D91,#4DA3FF);animation:growBar 1s ease both}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.day{min-height:92px;border:1px solid #eee;border-radius:16px;background:#fff;padding:12px}.day.has{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.06)}.message{display:flex;gap:12px;align-items:flex-start}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#0B3D91;color:#fff;font-weight:900}.bubble{background:#fff;border:1px solid #eee;border-radius:18px 4px 18px 18px;padding:12px 14px;max-width:640px}.bubble.me{background:#0B3D91;color:#fff;border-color:#0B3D91}.quiz-option{display:block;width:100%;border:1px solid #e5e7eb;background:#fff;border-radius:14px;padding:12px;margin:8px 0;text-align:right}.quiz-option.correct{border-color:#22c55e;background:#dcfce7}.quiz-option.wrong{border-color:#ef4444;background:#fee2e2}
@keyframes floatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}.iconbox{animation:floatSoft 5.5s ease-in-out infinite}.fade-up{animation:fadeUp .55s ease both}@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes growBar{from{width:0;transform:scaleY(.1)}to{transform:scaleY(1)}}@keyframes pulse{50%{opacity:.35}}
@media(max-width:1024px){.sidebar{transform:translateX(100%)}.main{margin-right:0}.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.hero{min-height:760px}.hero-content{margin-inline:auto}.hero-search{display:block}.hero-search .input,.hero-search .btn{width:100%;border-radius:14px;margin-bottom:8px}.nav-links{display:none}}


/* V5 deeper visual match: Base44/shadcn exact-feel refinements */
:root{--ring-soft:0 0 0 3px rgba(8, 42, 94,.12);--tw-shadow:0 1px 2px 0 rgb(0 0 0/.05);--tw-shadow-lg:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1)}
body{font-size:14px;line-height:1.55;background:#f9fafb;color:#111827}.muted{color:#6b7280}.page-shell{background:#f9fafb}.content{animation:fadeUp .35s ease both}.topbar{position:sticky;top:0;z-index:30;height:64px;border-bottom:1px solid #e5e7eb}.page-title h1{font-size:22px}.page-title p{font-size:12.5px;color:#6b7280}.sidebar{position:fixed;right:0;top:0;bottom:0;overflow:auto}.side-nav{padding:8px 12px 18px}.side-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:3px 0}.side-nav svg{width:18px;height:18px}.side-head b{font-size:15px}.btn{box-shadow:var(--tw-shadow);font-size:13px}.btn-primary{background:#0B3D91}.btn-primary:hover{background:#082A5E}.btn-outline{border-color:#e5e7eb}.card{background:#fff;border-color:#e5e7eb;border-radius:16px;box-shadow:var(--tw-shadow)}.card:hover{box-shadow:var(--tw-shadow-lg);transform:translateY(-2px)}.input,.select,textarea{border-color:#e5e7eb}.input:focus,.select:focus,textarea:focus{box-shadow:var(--ring-soft);border-color:#0B3D91}.badge{font-size:11px;padding:4px 9px}.hero-banner{position:relative;overflow:hidden;color:#fff;display:flex;align-items:center}.hero-banner:before{content:'';position:absolute;inset:0;background:linear-gradient(to left,rgba(8, 42, 94,.94),rgba(8, 42, 94,.58));z-index:1}.hero-banner>div{position:relative;z-index:2}.hero-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;z-index:0}.hero-banner .badge{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.35);color:#fff}.metric{position:relative;overflow:hidden}.metric:after{content:'';position:absolute;left:-30px;top:-30px;width:95px;height:95px;border-radius:999px;background:rgba(245,158,11,.08)}.metric .num{font-size:29px}.table{width:100%;border-collapse:separate;border-spacing:0 8px}.table th{font-size:12px;color:#6b7280;text-align:right;font-weight:800;padding:4px 12px}.table td{background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee;padding:12px}.table td:first-child{border-radius:0 14px 14px 0;border-right:1px solid #eee}.table td:last-child{border-radius:14px 0 0 14px;border-left:1px solid #eee}.tabbar{display:flex;gap:8px;background:#f3f4f6;border-radius:14px;padding:4px}.tab{border:0;background:transparent;padding:8px 12px;border-radius:11px;font-weight:800;cursor:pointer}.tab.active{background:#fff;color:#0B3D91;box-shadow:var(--tw-shadow)}.panel{display:none}.panel.active{display:block;animation:fadeUp .25s ease}.action-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.mini-list{display:grid;gap:10px}.mini-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid #eee;border-radius:14px;background:#fff}.mini-item:hover{border-color:rgba(8, 42, 94,.24);background:#f8fbff}.timeline{border-right:2px dashed #e5e7eb;margin-right:12px;padding-right:22px}.timeline .event{position:relative;margin:0 0 16px}.timeline .event:before{content:'';position:absolute;right:-30px;top:5px;width:13px;height:13px;background:#0B3D91;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #0B3D91}.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.kanban-col{background:#f3f4f6;border-radius:18px;padding:12px}.kanban-col h3{font-size:14px;margin:0 0 10px}.status-dot{width:8px;height:8px;border-radius:999px;background:#22c55e;display:inline-block}.skeleton{background:linear-gradient(90deg,#f3f4f6,#fff,#f3f4f6);background-size:200% 100%;animation:shimmer 1.4s linear infinite}.drawer{position:fixed;inset:0;display:none;background:rgba(0,0,0,.35);z-index:90}.drawer.show{display:block}.drawer-panel{position:absolute;left:0;top:0;bottom:0;width:min(420px,92vw);background:white;padding:22px;box-shadow:var(--shadow-xl);animation:drawerIn .25s}.body-ltr .sidebar{right:auto;left:0;border-left:0;border-right:1px solid #eee}.body-ltr .main{margin-right:0;margin-left:256px}.body-ltr .table th{text-align:left}.body-ltr .hero:before{background:linear-gradient(to right,rgba(8, 42, 94,.97) 45%,rgba(8, 42, 94,.75),rgba(8, 42, 94,.40))}
@keyframes shimmer{to{background-position:-200% 0}}@keyframes drawerIn{from{transform:translateX(-25px);opacity:.7}to{transform:none;opacity:1}}
@media(max-width:900px){.kanban{grid-template-columns:1fr}.body-ltr .main{margin-left:0}.sidebar{z-index:60}.topbar{right:0}.table{font-size:12px}.table td{padding:10px 8px}}


/* V6 tool-based refinement: matched against uploaded React/Vite source + compiled Tailwind CSS */
:root{--primary-real:#0B3D91;--accent-real:#f59e0b;--page-real:#f9fafb;--border-real:#e5e7eb;--muted-real:#6b7280;--text-real:#111827;--radius-real:12px}.dashboard{min-height:100vh;background:#f9fafb}.sidebar{width:256px;background:#fff;border-left:1px solid #f3f4f6;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:width .3s ease,transform .3s ease}.side-head{display:flex;align-items:center;gap:12px;height:73px;padding:16px;border-bottom:1px solid #f3f4f6}.side-head .logo{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:#0B3D91;color:#fff;box-shadow:none;font-weight:900}.side-head b{font-size:14px;color:#1f2937;line-height:1.2}.side-role{display:flex;align-items:center;gap:8px;margin:12px 16px;padding:8px 12px;border-radius:10px;background:#f9fafb;border:1px solid #f3f4f6;color:#0B3D91;font-size:12px;font-weight:700}.side-nav{padding:8px 12px;max-height:calc(100vh - 150px);overflow:auto}.side-nav a{min-height:42px;margin:2px 0;padding:10px 12px;border-radius:12px;color:#6b7280;font-size:14px;font-weight:600;transition:all .2s ease}.side-nav a:hover{background:#f9fafb;color:#111827;transform:none;box-shadow:none}.side-nav a.active{background:#0B3D91;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}.side-nav svg{width:20px;height:20px;stroke-width:2}.main{margin-right:256px;transition:margin .3s ease}.topbar{height:64px;background:#fff;border-bottom:1px solid #f3f4f6;box-shadow:0 1px 2px rgba(0,0,0,.04);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:20}.content{padding:24px}.page-title h1{font-size:22px;line-height:1.3;color:#111827;font-weight:800}.page-title p{font-size:12.5px;color:#9ca3af}.btn{height:36px;min-height:36px;padding:0 14px;border-radius:12px;font-size:13px;font-weight:700;box-shadow:none}.btn-primary{background:#0B3D91;color:#fff}.btn-primary:hover{background:#082A5E;transform:translateY(-1px)}.btn-outline{border:1px solid #e5e7eb;background:#fff;color:#374151}.input,.select,textarea{border:1px solid #e5e7eb;background:#f9fafb;border-radius:12px;font-size:14px}.input:focus,.select:focus,textarea:focus{background:#fff;border-color:#0B3D91;box-shadow:0 0 0 3px rgba(8, 42, 94,.12)}.card{border:1px solid #e5e7eb;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04);padding:20px}.card:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px rgb(0 0 0/.08),0 4px 6px -4px rgb(0 0 0/.08)}.hero-banner{min-height:220px;border-radius:24px;padding:32px;background:#0B3D91;box-shadow:0 24px 65px rgba(8, 42, 94,.18)}.hero-banner h1{font-size:30px;font-weight:900}.badge{border-radius:999px;font-size:11px;font-weight:800;padding:4px 9px}.badge.gold{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.25);color:#92400e}.metric .num{font-size:30px;font-weight:900;color:#0B3D91}.progress{height:8px;background:#f3f4f6}.progress span{background:linear-gradient(90deg,#0B3D91,#4DA3FF)}.course-card img,.card img{border-radius:14px}.modal{backdrop-filter:blur(6px)}.modal-box{border-radius:24px;border:1px solid #eee}.toast{border-radius:16px}.chart .bar{background:linear-gradient(180deg,#0B3D91,#4DA3FF)}.table th{color:#6b7280;font-size:12px}.table td{font-size:14px}.calendar-grid .day{border-radius:16px}.fade-up{animation:fadeUp .45s cubic-bezier(.22,1,.36,1) both}.card:nth-child(2){animation-delay:.04s}.card:nth-child(3){animation-delay:.08s}.card:nth-child(4){animation-delay:.12s}@media(max-width:1024px){.main{margin-right:0}.sidebar{z-index:60}}@media(max-width:640px){.topbar{height:auto;min-height:64px;padding:12px 16px}.content{padding:16px}.hero-banner{padding:22px;min-height:200px}.hero-banner h1{font-size:24px}}


/* === V7 exact student clone pages: profile, rating, calendar, live sessions === */
.student-perfect-page{max-width:none}.react-page-header{margin-bottom:24px}.react-page-header h2{font-size:1.875rem;line-height:2.25rem;font-weight:800;margin:0;color:#0B3D91;letter-spacing:-.025em}.react-page-header p{margin:.35rem 0 0;color:#6b7280;font-size:.875rem}.clone-card{background:white;border:1px solid hsl(var(--border));border-radius:18px;box-shadow:var(--shadow-sm);padding:1.25rem;transition:all .22s ease}.clone-card:hover{transform:none;box-shadow:var(--shadow-md)}.clone-hero-blue{position:relative;overflow:hidden;border-radius:1rem;background:linear-gradient(135deg,#0B3D91 0%,#4DA3FF 100%);padding:1.5rem;display:flex;gap:1.25rem;align-items:center;margin-bottom:1.25rem}.clone-hero-blue .pattern{position:absolute;inset:0;opacity:.1;background-image:radial-gradient(circle,white 1px,transparent 1px);background-size:24px 24px}.profile-avatar{position:relative;width:4rem;height:4rem;border-radius:1rem;background:rgba(255,255,255,.15);display:grid;place-items:center;font-size:1.875rem;flex-shrink:0}.profile-info{position:relative;flex:1}.profile-info h2{color:white;font-size:1.25rem;font-weight:900;margin:0}.profile-info p{color:rgba(255,255,255,.6);font-size:.875rem;margin:.2rem 0}.profile-info small{color:rgba(255,255,255,.4);font-size:.75rem}.profile-stats{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem}.profile-stats div{background:rgba(255,255,255,.10);border-radius:.75rem;padding:.75rem;text-align:center;min-width:78px}.profile-stats b{display:block;color:#f59e0b;font-size:1.125rem;line-height:1.5rem;font-weight:900}.profile-stats span{color:rgba(255,255,255,.5);font-size:10px}.clone-grid-main{display:grid;grid-template-columns:2fr 1fr;gap:1.25rem}.clone-stack{display:flex;flex-direction:column;gap:1rem}.card-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:1rem}.card-title-row h3,.clone-card>h3{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:800;margin:0;color:#111827}.card-title-row svg,.clone-card h3 svg{width:1rem;height:1rem;color:hsl(var(--primary))}.ghost-link,.small-link{display:inline-flex;align-items:center;gap:.25rem;padding:.35rem .55rem;border-radius:.6rem;color:#0B3D91;font-size:.75rem;font-weight:700}.ghost-link:hover,.small-link:hover{background:#f3f4f6}.ghost-link svg{width:.75rem;height:.75rem}.course-progress-list,.diploma-list{display:flex;flex-direction:column;gap:.75rem}.progress-row,.diploma-row{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:.75rem;background:#f9fafb}.diploma-row{border:1px solid #e5e7eb;background:white}.diploma-row:hover{background:#f9fafb}.row-icon{width:2rem;height:2rem;border-radius:.5rem;background:rgba(8, 42, 94,.1);display:grid;place-items:center;flex-shrink:0}.row-icon svg{width:1rem;height:1rem;color:#0B3D91}.progress-row>div,.diploma-row>div:nth-child(2){flex:1;min-width:0}.progress-row b,.diploma-row b{font-size:.875rem;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-row em{font-size:.75rem;color:#6b7280;font-style:normal}.mini-progress{height:.375rem;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:.35rem}.mini-progress i{display:block;height:100%;background:#0D6EFD;border-radius:999px}.diploma-row p{margin:.2rem 0 0;color:#6b7280;font-size:.75rem;display:flex;align-items:center;gap:.25rem}.diploma-row p svg{width:.75rem;height:.75rem}.gpa{text-align:center;flex:0 0 auto!important}.gpa b{color:#0B3D91;font-weight:900}.gpa span{font-size:10px;color:#6b7280}.cert-chips{display:flex;flex-wrap:wrap;gap:.5rem}.cert-chips span{display:inline-flex;align-items:center;gap:.25rem;border-radius:999px;background:#fffbeb;color:#b45309;font-size:.75rem;padding:.35rem .65rem;font-weight:700}.cert-chips svg{width:.75rem;height:.75rem}.side-card{padding:1rem}.event-list-mini{display:flex;flex-direction:column;gap:.5rem}.event-mini{display:flex;align-items:flex-start;gap:.5rem;border-radius:.5rem;background:#f9fafb;padding:.5rem}.event-mini time{width:2.5rem;flex-shrink:0;background:rgba(8, 42, 94,.1);border-radius:.5rem;text-align:center;padding:.25rem}.event-mini time b{font-size:.75rem;color:#0B3D91;display:block}.event-mini time small{font-size:9px;color:#6b7280}.event-mini b{font-size:.75rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.type{display:inline-flex;align-items:center;gap:.25rem;border-radius:999px;padding:.18rem .45rem;font-size:9px;font-weight:700;margin-top:.125rem;border:0}.type svg{width:.75rem;height:.75rem}.type-live{background:#dcfce7;color:#047857}.type-exam{background:#fee2e2;color:#b91c1c}.type-assign{background:#fef3c7;color:#b45309}.type-seminar{background:#f3e8ff;color:#7e22ce}.type-workshop{background:#cffafe;color:#0e7490}.achievement-row{display:flex;align-items:center;justify-content:space-between;margin:.75rem 0}.achievement-row span{font-size:.75rem;color:#6b7280}.achievement-row b{font-size:.875rem;font-weight:900}.blue-accent{color:#0D6EFD}.blue{color:#2563eb}.amber{color:#d97706}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.quick-grid a{display:block;text-align:center;border:1px solid #e5e7eb;background:white;border-radius:.75rem;padding:.75rem;box-shadow:var(--shadow-sm)}.quick-grid svg{width:1.25rem;height:1.25rem;color:#0B3D91;margin:0 auto .25rem}.quick-grid b{font-size:.75rem}.rate-hero{height:7rem;position:relative;display:flex;align-items:center;border-radius:1rem;overflow:hidden;background:#0B3D91;margin-bottom:1.5rem}.rate-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}.rate-hero div{position:relative;display:flex;align-items:center;gap:1.25rem;padding:0 1.5rem}.rate-hero svg{width:2.25rem;height:2.25rem;color:#f59e0b;fill:#f59e0b}.rate-hero h3{color:white;font-size:1.125rem;margin:0;font-weight:900}.rate-hero p{color:rgba(255,255,255,.6);font-size:.875rem;margin:.15rem 0 0}.rating-title{margin-bottom:1rem!important}.rating-title svg{color:#0D6EFD!important}.submitted-ratings{display:flex;flex-direction:column;gap:.5rem}.submitted-rating{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:.75rem;background:#f9fafb;border:1px solid #e5e7eb}.submitted-rating>span{width:2.25rem;height:2.25rem;border-radius:.5rem;background:rgba(8, 42, 94,.1);display:grid;place-items:center}.submitted-rating>span svg{width:1rem;height:1rem;color:#0B3D91}.submitted-rating div:nth-child(2){flex:1;min-width:0}.submitted-rating b{font-size:.875rem}.submitted-rating p{font-size:.75rem;color:#6b7280;margin:.1rem 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tiny-stars{color:#f59e0b;letter-spacing:1px;font-size:.875rem}.rate-section{margin-top:1.5rem}.rate-section h3{font-weight:800;margin:0 0 1rem}.ratable-list{display:flex;flex-direction:column;gap:.75rem}.ratable-card{display:flex;align-items:center;gap:.75rem;background:white;border:1px solid #e5e7eb;border-radius:18px;padding:1rem;box-shadow:var(--shadow-sm);transition:.2s}.ratable-card:hover{box-shadow:var(--shadow-md)}.ratable-card.rated{opacity:.6}.video-icon{width:2.5rem;height:2.5rem;border-radius:.75rem;background:#eff6ff;display:grid;place-items:center;flex-shrink:0}.video-icon svg{width:1.25rem;height:1.25rem;color:#2563eb}.ratable-card>div:nth-child(2){flex:1;min-width:0}.ratable-card h4{font-size:.875rem;font-weight:800;margin:0}.ratable-card p{font-size:.75rem;color:#6b7280;margin:.2rem 0 0}.done-badge{display:inline-flex;align-items:center;gap:.25rem;background:#dcfce7;color:#047857;border-radius:999px;padding:.35rem .7rem;font-size:.75rem;font-weight:800}.done-badge svg{width:.75rem;height:.75rem}.clone-dialog{position:fixed;inset:0;background:rgba(0,0,0,.42);display:none;align-items:center;justify-content:center;z-index:100;padding:18px}.clone-dialog.show{display:flex}.clone-dialog-card{max-width:28rem;width:100%;background:white;border-radius:1rem;padding:1.5rem;box-shadow:var(--shadow-xl);animation:dialogIn .18s ease both}.clone-dialog-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.clone-dialog-head h3{font-size:1.125rem;margin:0;font-weight:900}.clone-dialog-head p{font-size:.875rem;color:#6b7280;margin:.2rem 0 0}.icon-btn{border:0;background:transparent;border-radius:.75rem;width:2.25rem;height:2.25rem;display:inline-grid;place-items:center;cursor:pointer;color:#374151}.icon-btn:hover{background:#f3f4f6}.rating-form{display:flex;flex-direction:column;gap:1.1rem;margin-top:1rem}.star-field label,.textarea-label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.5rem}.main-rating{border-top:1px solid #e5e7eb;padding-top:.75rem}.stars{display:flex;gap:.25rem;align-items:center}.stars button{border:0;background:transparent;padding:0;cursor:pointer;transition:transform .18s}.stars button:hover{transform:scale(1.12)}.stars svg{width:1.75rem;height:1.75rem;color:#e5e7eb;fill:#e5e7eb;transition:.18s}.stars button.active svg,.stars button.hover svg{color:#f59e0b;fill:#f59e0b}.rating-form textarea{width:100%;border:1px solid #e5e7eb;border-radius:.75rem;padding:.75rem;resize:none;min-height:84px}.dialog-actions{display:flex;gap:.5rem;justify-content:flex-end}.calendar-legend{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}.calendar-legend .type{font-size:11px;padding:.35rem .6rem}.calendar-layout{display:grid;grid-template-columns:2fr 1fr;gap:1.25rem}.calendar-card{padding:1.25rem}.calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}.calendar-head h2{font-size:1rem;font-weight:900;margin:0}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.5rem}.weekdays span{text-align:center;color:#6b7280;font-size:11px;font-weight:800;padding:.25rem}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}.calendar-day{position:relative;min-height:52px;border:0;background:white;border-radius:.75rem;padding:.375rem;text-align:center;display:flex;flex-direction:column;align-items:center;transition:.16s;cursor:pointer}.calendar-day:hover{background:#f9fafb}.calendar-day.today{background:rgba(8, 42, 94,.10)}.calendar-day.today b{color:#0B3D91}.calendar-day.selected{background:#0B3D91;color:white}.calendar-day b{font-size:.75rem;color:#374151}.calendar-day.selected b{color:white}.day-dots{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;margin-top:3px}.day-dots i{width:6px;height:6px;border-radius:999px;background:#6b7280}.day-dots .live{background:#0B3D91}.day-dots .exam{background:#ef4444}.day-dots .assign{background:#f59e0b}.day-dots .seminar{background:#8b5cf6}.selected-events{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid #e5e7eb}.selected-events h3{font-size:.875rem;font-weight:800;margin:0 0 .75rem}.day-event{display:flex;align-items:center;gap:.75rem;border-radius:.75rem;padding:.75rem;background:#EAF3FF;cursor:pointer}.day-event>svg{width:1rem;height:1rem;color:#0B3D91;flex-shrink:0}.day-event div{flex:1}.day-event b{font-size:.875rem}.day-event p{font-size:.75rem;color:#6b7280;margin:.15rem 0 0}.upcoming-card h3{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:800;margin:0 0 1rem}.upcoming-card h3 svg{width:1rem;height:1rem;color:#0B3D91}.upcoming-list{display:flex;flex-direction:column;gap:.5rem}.upcoming-list>div{display:flex;align-items:center;gap:.5rem;border-radius:.75rem;padding:.625rem;background:#f9fafb;cursor:pointer}.upcoming-list>div:hover{opacity:.8}.upcoming-list time{width:2.5rem;text-align:center;flex-shrink:0}.upcoming-list time b{font-size:.75rem;font-weight:900;color:#0B3D91}.upcoming-list time small{display:block;font-size:10px;color:#6b7280}.upcoming-list div div{flex:1;min-width:0}.upcoming-list b{font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.upcoming-list em{background:#fee2e2;color:#b91c1c;border-radius:999px;font-size:9px;font-style:normal;font-weight:800;padding:.2rem .45rem;flex-shrink:0}.event-dialog{position:fixed;inset:0;background:rgba(0,0,0,.42);display:none;align-items:center;justify-content:center;z-index:99;padding:18px}.event-dialog.show{display:flex}.event-dialog>div{width:100%;max-width:24rem;background:white;border-radius:1rem;padding:1.5rem;box-shadow:var(--shadow-xl);animation:dialogIn .18s ease both}.event-detail-body{display:flex;flex-direction:column;gap:.75rem;margin-top:.8rem}.event-detail-body p{font-size:.875rem;color:#374151;margin:0;display:flex;gap:.5rem;align-items:center}.event-detail-body p svg{width:1rem;height:1rem;color:#6b7280}.live-list-section{margin-bottom:2rem}.live-list-section h2{font-size:1.125rem;font-weight:800;margin:0 0 1rem}.muted-title{color:#6b7280!important}.live-session-list{display:grid;gap:1rem}.live-card{background:white;border:1px solid #e5e7eb;border-radius:18px;padding:1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;box-shadow:var(--shadow-sm);transition:.2s}.live-card:hover{box-shadow:var(--shadow-md)}.live-card.live-now{border-right:4px solid #ef4444}.live-main{display:flex;align-items:flex-start;gap:1rem}.live-icon{width:3rem;height:3rem;border-radius:.75rem;background:rgba(239,68,68,.1);display:grid;place-items:center;flex-shrink:0}.live-icon svg{width:1.5rem;height:1.5rem;color:#ef4444}.live-title-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;flex-wrap:wrap}.live-title-row h3{font-weight:800;margin:0}.live-main p{font-size:.875rem;color:#6b7280;margin:0}.status-badge{display:inline-flex;align-items:center;border-radius:999px;padding:.25rem .55rem;border:1px solid transparent;font-size:.75rem;font-weight:800}.status-scheduled{background:rgba(59,130,246,.1);color:#2563eb;border-color:rgba(59,130,246,.2)}.status-live{background:rgba(239,68,68,.1);color:#ef4444;border-color:rgba(239,68,68,.2)}.status-completed{background:#f3f4f6;color:#6b7280}.status-cancelled{background:rgba(220,38,38,.1);color:#dc2626}.live-meta{display:flex;align-items:center;gap:1rem;margin-top:.5rem;color:#6b7280;font-size:.75rem;flex-wrap:wrap}.live-meta span{display:flex;align-items:center;gap:.25rem}.live-meta svg{width:.75rem;height:.75rem}@keyframes dialogIn{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}@media(max-width:1024px){.clone-grid-main,.calendar-layout{grid-template-columns:1fr}.profile-stats{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.clone-hero-blue{flex-direction:column;align-items:flex-start}.profile-stats{grid-template-columns:repeat(2,1fr);width:100%}.ratable-card,.live-card{align-items:flex-start;flex-direction:column}.calendar-day{min-height:44px}.dialog-actions{flex-direction:column}.dialog-actions .btn{width:100%}}
/* MVC session actions */
.session-logout {
  display: inline-flex;
  margin: 0;
}

.session-logout button {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.96);
}

.session-logout-portal,
.session-logout-public {
  position: static;
  z-index: auto;
}

body > .session-logout-portal,
body > .session-logout-public {
  margin: 1rem;
}

.session-logout-portal button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.topnav .topnav-menu .toolbar .session-logout-public,
.topbar .session-logout-portal.is-in-topbar {
  position: static;
  z-index: auto;
  margin: 0;
}

.topnav .topnav-menu .toolbar .session-logout-public button,
.topbar .session-logout-portal.is-in-topbar button {
  box-shadow: none;
}

.topbar {
  gap: 1rem;
}

.topbar.titleless-topbar {
  justify-content: flex-end;
}

.topbar .page-title {
  flex: 1 1 auto;
  min-width: 0;
}

.topbar .page-title h1,
.topbar .page-title p {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar > .toolbar {
  flex: 0 0 auto;
  max-width: min(100%, 38rem);
  min-width: 0;
  justify-content: flex-end;
}

.topbar > .toolbar > *,
.topbar > .toolbar .btn,
.topbar > .toolbar button,
.topbar > .toolbar a {
  flex: 0 0 auto;
  white-space: nowrap;
}

.topbar .session-logout-portal.is-in-topbar button {
  height: 36px;
  min-height: 36px;
}

.admin-organizations-topbar {
  height: auto;
  min-height: 64px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-organizations-topbar .page-title {
  order: 1;
  flex: 1 1 18rem;
}

.admin-organizations-topbar > .portal-actions-toolbar {
  order: 3;
  flex: 0 0 auto;
}

.topbar > .admin-topbar-filter {
  order: 2;
  flex: 0 1 30rem;
  max-width: min(100%, 30rem);
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

.admin-topbar-filter .input {
  flex: 1 1 12rem;
  width: auto;
  min-width: 0 !important;
}

.admin-topbar-filter .select {
  flex: 0 0 10rem;
  width: auto;
  min-width: 9rem !important;
}

.admin-topbar-filter .btn {
  flex: 0 0 auto;
  min-width: 5.75rem;
}

@media (max-width: 900px) {
  .admin-organizations-topbar {
    align-items: stretch;
  }

  .admin-organizations-topbar .page-title {
    flex-basis: 100%;
  }

  .topbar > .admin-topbar-filter {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .topbar > .admin-topbar-filter {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .admin-topbar-filter .input,
  .admin-topbar-filter .select,
  .admin-topbar-filter .btn {
    width: 100%;
    min-width: 0 !important;
  }
}

/* Accessibility certification fixes: Lighthouse requires at least 4.5:1 contrast. */
.course-instructor,
.course-stats,
.course-stats span,
.old-price {
  color: #4b5563;
}

.footer .muted,
.hero-banner .muted,
.clone-hero-blue .muted,
[style*="--primary"] .muted,
[style*="hsl(var(--primary))"] .muted {
  color: rgba(255, 255, 255, 0.88) !important;
}

@media (max-width: 768px) {
  .topbar {
    height: auto;
    min-height: 64px;
    flex-direction: column;
    align-items: stretch;
    padding-block: 12px;
  }

  .topbar .page-title {
    width: 100%;
  }

  .topbar .page-title h1,
  .topbar .page-title p {
    white-space: normal;
  }

  .topbar > .toolbar {
    max-width: 100%;
    width: 100%;
    justify-content: stretch;
  }

  .topbar > .toolbar > *,
  .topbar > .toolbar .btn,
  .topbar > .toolbar button,
  .topbar > .toolbar a {
    flex: 1 1 auto;
  }

  .topnav .topnav-menu .toolbar .session-logout-public,
  .topnav .topnav-menu .toolbar .session-logout-public button {
    width: 100%;
  }
}

/* Responsive portal remediation */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.dashboard,
.dashboard-main,
.main,
.content,
.card,
.panel,
.clone-card,
.inst-card,
.v8-card,
.v9-card,
.v9-table-card {
  min-width: 0;
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
  border: 0;
  background: rgba(15, 23, 42, 0.42);
  cursor: pointer;
}

body.sidebar-open {
  overflow: hidden;
}

body.sidebar-open .sidebar-backdrop {
  display: block;
}

body.sidebar-open .sidebar {
  display: flex !important;
  transform: translateX(0) !important;
}

.portal-sidebar-toggle {
  display: none;
}

.table-responsive,
.table-wrap,
.inst-table-wrap,
.v9-table-wrap,
.v11-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.table-responsive > table,
.table-wrap > table,
.v9-table,
.inst-table,
.v11-table table {
  width: 100%;
  min-width: 680px;
}

.table-responsive > table.table,
.table-wrap > table.table {
  width: max-content;
  min-width: 100%;
}

.table th,
.table td {
  vertical-align: middle;
  word-break: normal;
  overflow-wrap: normal;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.table th {
  min-width: 6.5rem;
}

.table td {
  min-width: 5.5rem;
}

.table .badge,
.table label,
.table .btn {
  white-space: nowrap;
}

.toolbar label {
  min-width: 0;
}

.toolbar > .muted {
  flex: 1 1 18rem;
  min-width: min(18rem, 100%);
}

.table td form.toolbar {
  width: max-content;
  max-width: none;
}

.table td form.toolbar :is(.input, .select, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea) {
  flex: 0 0 auto;
}

.toolbar,
.button-row,
.inst-actions,
.v8-actions,
.v8-searchbar,
.inst-filterbar,
.catalog-search-row {
  min-width: 0;
}

.toolbar > *,
.button-row > *,
.inst-actions > *,
.v8-actions > *,
.v8-searchbar > *,
.inst-filterbar > *,
.catalog-search-row > * {
  max-width: 100%;
}

.toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.toolbar select,
.toolbar textarea,
.v8-searchbar input,
.v8-searchbar select,
.inst-filterbar input,
.inst-filterbar select,
.catalog-search-row input {
  min-width: min(12rem, 100%) !important;
}

@media (max-width: 1024px) {
  .sidebar {
    z-index: 60 !important;
    max-width: min(20rem, 86vw);
    transform: translateX(100%) !important;
  }

  .body-ltr .sidebar,
  body.ltr .sidebar {
    transform: translateX(-100%) !important;
  }

  .main,
  .body-ltr .main,
  body.ltr .main {
    margin-inline: 0 !important;
  }

  body > .portal-sidebar-toggle {
    position: fixed;
    top: max(0.8rem, env(safe-area-inset-top));
    left: max(0.8rem, env(safe-area-inset-left));
    right: auto;
    z-index: 120;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    background: transparent;
    color: #000;
    box-shadow: none;
  }

  body.sidebar-open > .portal-sidebar-toggle {
    background: transparent;
    box-shadow: none;
  }

  body > .portal-sidebar-toggle svg {
    width: 1.85rem;
    height: 1.85rem;
  }

  .icon-btn,
  .portal-sidebar-toggle {
    display: inline-grid;
  }
}

@media (max-width: 420px) {
  .topbar,
  .page-header,
  .panel-head,
  .v8-card-head,
  .inst-page-head,
  .v11-in-head {
    align-items: stretch;
    gap: 0.75rem;
  }

  .toolbar,
  form.toolbar,
  .button-row,
  .v8-searchbar,
  .inst-filterbar,
  .catalog-search-row {
    align-items: stretch !important;
    flex-direction: column;
    width: 100%;
  }

  .toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .toolbar select,
  .toolbar textarea,
  .toolbar .btn,
  .button-row .btn,
  .v8-searchbar input,
  .v8-searchbar select,
  .v8-searchbar .btn,
  .inst-filterbar input,
  .inst-filterbar select,
  .inst-filterbar .inst-btn,
  .catalog-search-row input,
  .catalog-search-row .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* UI parity hardening shared by converted Razor pages. */
img {
  max-width: 100%;
}

.hero img,
.hero-banner img,
.catalog-hero img,
.course-thumb img,
.rate-hero img,
.v9-source-hero img,
.v11-hero img,
.inst-hero img,
.live-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-thumb,
.hero-banner,
.catalog-hero,
.v9-source-hero,
.inst-hero,
.rate-hero {
  background: linear-gradient(135deg, #0B3D91, #4DA3FF);
}

.btn,
.v8-btn,
.inst-btn,
.icon-btn,
button,
[role="button"] {
  touch-action: manipulation;
}

.btn,
.v8-btn,
.inst-btn,
.icon-btn {
  min-height: 44px;
}

.btn-sm,
.v8-btn.sm,
.inst-btn.sm {
  min-height: 38px;
}

.card,
.course-card,
.v8-card,
.v9-card,
.v9-table-card,
.inst-card,
.clone-card {
  overflow-wrap: anywhere;
}

.card h1,
.card h2,
.card h3,
.v8-card h1,
.v8-card h2,
.v8-card h3,
.inst-card h1,
.inst-card h2,
.inst-card h3 {
  letter-spacing: 0;
}

.table-responsive,
.table-wrap,
.v9-table-wrap,
.inst-table-wrap {
  border-radius: 16px;
}

.table-responsive:focus-within,
.table-wrap:focus-within,
.v9-table-wrap:focus-within,
.inst-table-wrap:focus-within {
  outline: 3px solid rgba(8, 42, 94, 0.16);
  outline-offset: 2px;
}

form .field-validation-error,
form .validation-message,
form [data-valmsg-for] {
  display: block;
  margin-top: 0.35rem;
  color: #b91c1c;
  font-size: 0.82rem;
}

.validation-summary.validation-summary-valid,
.field-validation-valid {
  display: none;
}

.validation-summary.validation-summary-errors,
.validation-summary:not(.validation-summary-valid):has(ul li),
.validation-summary-card.validation-summary-errors {
  position: relative;
  display: block;
  padding: 1rem 1.1rem 1rem 1rem;
  border: 1px solid #fecaca;
  border-inline-start: 0.35rem solid #dc2626;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(254, 242, 242, 0.92)),
    #fef2f2;
  color: #7f1d1d;
  box-shadow: 0 14px 32px rgba(127, 29, 29, 0.08);
}

.validation-summary.validation-summary-errors::before,
.validation-summary-card.validation-summary-errors::before {
  content: "تنبيه";
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  margin-bottom: 0.55rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: #fee2e2;
  color: #991b1b;
  font-size: 0.78rem;
  font-weight: 900;
}

.validation-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.validation-summary li {
  position: relative;
  margin: 0.35rem 0 0;
  padding-inline-start: 1.15rem;
  color: #7f1d1d;
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.75;
  unicode-bidi: plaintext;
}

.validation-summary li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.15rem;
  top: 0.72em;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: #dc2626;
}

.field-validation-error,
form [data-valmsg-for].field-validation-error {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.38rem;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  margin-top: 0.45rem;
  padding: 0.35rem 0.55rem;
  border-radius: 10px;
  background: #fff1f2;
  color: #be123c;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.6;
  unicode-bidi: plaintext;
}

.field-validation-error::before,
form [data-valmsg-for].field-validation-error::before {
  content: "!";
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  display: inline-grid;
  place-items: center;
  margin-top: 0.08rem;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
}

.settings-form,
.profile-form,
.message-composer {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 980px;
}

.settings-form > .grid,
.profile-form > .grid,
.message-composer > .grid {
  width: 100%;
}

.settings-form label,
.profile-form label,
.message-composer label,
.dialog label {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
  color: #334155;
  font-weight: 800;
  line-height: 1.5;
}

.settings-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.settings-form select,
.settings-form textarea,
.profile-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.profile-form select,
.profile-form textarea,
.message-composer input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.message-composer select,
.message-composer textarea,
.dialog input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.dialog select,
.dialog textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  color: #111827;
  padding: 0.65rem 0.78rem;
  font-size: 0.92rem;
  outline: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.settings-form textarea,
.profile-form textarea,
.message-composer textarea,
.dialog textarea {
  min-height: 112px;
  resize: vertical;
}

.settings-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.settings-form select:focus,
.settings-form textarea:focus,
.profile-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.profile-form select:focus,
.profile-form textarea:focus,
.message-composer input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.message-composer select:focus,
.message-composer textarea:focus,
.dialog input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.dialog select:focus,
.dialog textarea:focus {
  border-color: #0B3D91;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(8, 42, 94, 0.12);
}

.settings-form label:has(> input[type="checkbox"]),
.settings-form label:has(> input[type="radio"]),
.profile-form label:has(> input[type="checkbox"]),
.profile-form label:has(> input[type="radio"]),
.message-composer label:has(> input[type="checkbox"]),
.message-composer label:has(> input[type="radio"]),
.check-row {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  width: fit-content;
  max-width: 100%;
}

.settings-form input[type="checkbox"],
.settings-form input[type="radio"],
.profile-form input[type="checkbox"],
.profile-form input[type="radio"],
.message-composer input[type="checkbox"],
.message-composer input[type="radio"],
.check-row input[type="checkbox"],
.check-row input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  min-width: 1.05rem;
  accent-color: #0B3D91;
}

/* Data-entry usability pass for MVC/Razor forms. */
.settings-form,
.profile-form,
.message-composer {
  gap: 1.1rem;
  max-width: 1080px;
}

.settings-form > .grid,
.profile-form > .grid,
.message-composer > .grid,
.card > form.grid:not(.toolbar) > .grid {
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.9rem !important;
}

.settings-form label:not(.check-row):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
.profile-form label:not(.check-row):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
.message-composer label:not(.check-row):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
.dialog label:not(.check-row):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  padding: 0.85rem;
  border: 1px solid #edf2f7;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #fbfcfd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.settings-form label:not(.check-row):focus-within,
.profile-form label:not(.check-row):focus-within,
.message-composer label:not(.check-row):focus-within,
.dialog label:not(.check-row):focus-within {
  border-color: rgba(8, 42, 94, 0.28);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(8, 42, 94, 0.08);
}

.settings-form :is(input, select, textarea)::placeholder,
.profile-form :is(input, select, textarea)::placeholder,
.message-composer :is(input, select, textarea)::placeholder,
.card > form.grid:not(.toolbar) :is(.input, .select, input, select, textarea)::placeholder {
  color: #9ca3af;
}

.settings-form label > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.profile-form label > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.message-composer label > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.dialog label > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  margin-top: 0.1rem;
}

.settings-form label:has(input[readonly]),
.profile-form label:has(input[readonly]),
.message-composer label:has(input[readonly]),
.dialog label:has(input[readonly]) {
  background: #f8fafc;
}

.settings-form > .toolbar:last-child,
.profile-form > .toolbar:last-child {
  position: sticky;
  bottom: 0.75rem;
  z-index: 4;
  margin-top: 0.25rem;
  padding: 0.75rem;
  border: 1px solid rgba(229, 231, 235, 0.92);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(17, 24, 39, 0.08);
  backdrop-filter: blur(12px);
}

.message-composer > .toolbar:last-child {
  padding-top: 0.8rem;
  border-top: 1px solid #eef2f7;
}

.card > form.grid:not(.toolbar) {
  align-items: start;
  gap: 0.9rem !important;
}

.card > form.grid:not(.toolbar) .grid {
  gap: 0.85rem !important;
}

.card > form.grid:not(.toolbar) :is(.input, .select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px;
}

.card > form.grid:not(.toolbar) textarea {
  min-height: 96px;
  resize: vertical;
}

.card > form.grid:not(.toolbar) :is(.input, .select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus {
  border-color: rgba(8, 42, 94, 0.38);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(8, 42, 94, 0.1);
}

.card > form.grid:not(.toolbar) > .btn:last-child,
.card > form.grid:not(.toolbar) > button.btn:last-child {
  justify-self: start;
  min-width: 10rem;
}

.card > .toolbar > form.toolbar:has(.input, .select, textarea) {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 0.75rem !important;
  align-items: end;
  padding: 0.9rem;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  background: #f8fafc;
}

.card > .toolbar > form.toolbar:has(.input, .select, textarea) :is(.input, .select, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px;
}

.card > .toolbar > form.toolbar:has(.input, .select, textarea) label.toolbar {
  min-height: 44px;
  margin: 0;
  padding: 0 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.card > .toolbar > form.toolbar:has(.input, .select, textarea) .btn {
  align-self: stretch;
}

@media (max-width: 640px) {
  .settings-form > .toolbar:last-child,
  .profile-form > .toolbar:last-child {
    position: static;
    align-items: stretch;
  }

  .settings-form > .toolbar:last-child .btn,
  .profile-form > .toolbar:last-child .btn,
  .card > form.grid:not(.toolbar) > .btn:last-child,
  .card > form.grid:not(.toolbar) > button.btn:last-child,
  .card > .toolbar > form.toolbar:has(.input, .select, textarea) .btn {
    width: 100%;
  }
}

.entry-card {
  padding: clamp(1rem, 2vw, 1.35rem);
}

.entry-card:hover,
.diploma-create-card:hover {
  transform: none;
}

.entry-section {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2.2vw, 1.25rem);
  border: 1px solid #eef2f7;
  border-radius: 18px;
  background: #fff;
}

.entry-section + .entry-section {
  margin-top: 0.15rem;
}

.entry-section-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}

.entry-section-head > span {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(8, 42, 94, 0.08);
  color: #0B3D91;
}

.entry-section-head svg {
  width: 1.18rem;
  height: 1.18rem;
}

.entry-section-head h2,
.entry-section-head h3 {
  margin: 0;
  color: #111827;
  font-size: 1rem;
  font-weight: 950;
}

.entry-section-head p {
  margin: 0.2rem 0 0;
  line-height: 1.7;
}

.course-image-uploader {
  display: grid;
  grid-template-columns: minmax(13rem, 0.36fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.course-image-preview {
  min-height: 12rem;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #f8fafc;
}

.course-image-preview img {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  display: block;
  object-fit: cover;
}

.file-drop {
  min-height: 12rem !important;
  display: grid !important;
  place-items: center;
  gap: 0.55rem !important;
  padding: 1.25rem !important;
  border: 1px dashed rgba(8, 42, 94, 0.28) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #f8fafc, #ffffff) !important;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.file-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-drop > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: #0B3D91;
  font-weight: 900;
}

.file-drop small {
  color: #6b7280;
  font-weight: 750;
}

.file-drop:hover,
.file-drop:focus-within {
  border-color: #0B5ED7 !important;
  background: #EAF3FF !important;
}

.entry-toggle-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.entry-switch {
  min-height: 50px;
  align-self: end;
  padding: 0.85rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #f8fafc;
}

.dashboard .metric .num {
  width: 100%;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.dashboard .metric small {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
}

.diploma-create-card {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.diploma-create-card .btn {
  justify-self: start;
}

.diploma-manager-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 1.25rem;
}

/* Opaque sticky surfaces avoid repeatedly blurring the long list during scroll. */
.diploma-manager-shell .topbar,
.diploma-manager-shell .diploma-workflow-tabs {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.diploma-manager-page > .card,
.diploma-workspace > .card,
.diploma-metrics > .metric,
.diploma-form-card {
  transform: none !important;
}

.diploma-manager-page .card {
  text-align: start;
}

.diploma-manager-page .status-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  border-radius: 14px;
  transform: none;
}

.diploma-manager-page .status-card svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
}

.diploma-manager-page .status-card.success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #047857;
}

.diploma-manager-page .status-card.danger {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.diploma-workflow-tabs {
  position: sticky;
  top: 76px;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.65rem;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(12px);
}

.diploma-workflow-tab {
  min-width: 0;
  min-height: 3.15rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #f9fafb;
  color: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 900;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.diploma-workflow-tab svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.diploma-workflow-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diploma-workflow-tab small {
  min-width: 1.65rem;
  height: 1.65rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: #0B3D91;
  font-size: 0.74rem;
  font-weight: 950;
}

.diploma-workflow-tab.active {
  background: #0B3D91;
  border-color: #0B3D91;
  color: #fff;
  box-shadow: 0 12px 24px rgba(8, 42, 94, 0.18);
}

.diploma-workflow-tab:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.32);
  outline-offset: 2px;
}

.diploma-tab-hint {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1rem;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 0.86rem;
  font-weight: 800;
}

.diploma-tab-hint svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.diploma-tab-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 1rem;
}

.diploma-tab-panel > .card {
  min-width: 0;
  overflow: hidden;
}

.diploma-tab-panel[hidden] {
  display: none !important;
}

.diploma-workspace > .diploma-tab-panel {
  grid-column: 1 / -1;
}

.diploma-kit-form {
  margin: 0;
}

.diploma-kit-item-form {
  margin-top: 18px;
}

.diploma-content-form,
.diploma-kit-form,
.diploma-kit-item-form {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #e6edf3;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.diploma-content-form h4,
.diploma-kit-form h4,
.diploma-kit-item-form h4 {
  margin: 0;
  color: #111827;
  font-size: 0.98rem;
  font-weight: 950;
}

.diploma-content-form .btn,
.diploma-kit-form .btn,
.diploma-kit-item-form .btn {
  justify-self: start;
}

.diploma-upload-drop {
  min-height: 7rem;
  position: relative;
  display: grid !important;
  place-items: center;
  gap: 0.4rem !important;
  padding: 1rem !important;
  border: 1px dashed rgba(8, 42, 94, 0.3) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 244, 0.62)) !important;
  text-align: center;
  cursor: pointer;
}

.diploma-upload-drop.compact {
  min-height: 5.75rem;
}

.diploma-upload-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.diploma-upload-drop > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: #0B3D91;
  font-weight: 950;
}

.diploma-upload-drop svg {
  width: 1.15rem;
  height: 1.15rem;
}

.diploma-upload-drop small {
  max-width: 28rem;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.65;
}

.diploma-upload-drop:hover,
.diploma-upload-drop:focus-within {
  border-color: #0B5ED7 !important;
  background: #EAF3FF !important;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.08);
}

.diploma-manager-page input[type="number"],
.diploma-manager-page input[type="datetime-local"],
.diploma-manager-page input[name*="Code"],
.diploma-manager-page input[name*="Url"],
.diploma-manager-page input[name*="URL"],
.diploma-manager-page input[name*="Uuid"],
.diploma-manager-page input[name*="UUID"],
.diploma-manager-page input[name*="MeetingId"],
.diploma-manager-page input[name*="Passcode"],
.diploma-manager-page input[name*="Version"],
.diploma-manager-page input[name*="FileName"],
.diploma-manager-page input[name*="ItemType"],
.diploma-manager-page input[name*="Visibility"] {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}

@media (max-width: 768px) {
  .diploma-workflow-tabs {
    top: 0.75rem;
    grid-template-columns: 1fr;
    position: static;
  }

  .diploma-workflow-tab {
    justify-content: space-between;
    padding-inline: 0.85rem;
  }

  .diploma-tab-hint {
    align-items: flex-start;
  }

  .diploma-workspace {
    grid-template-columns: 1fr;
  }
}

.diploma-metrics,
.diploma-workspace {
  margin-top: 0;
}

.diploma-metrics {
  align-items: stretch;
}

.diploma-metrics .metric {
  min-height: 8.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: start;
}

.diploma-metrics .metric p,
.diploma-metrics .metric .num {
  position: relative;
  z-index: 1;
}

.diploma-metrics .metric p {
  margin-inline-start: auto;
  margin-top: 0;
  margin-bottom: 0.4rem;
  text-align: end;
}

.diploma-metrics .metric .num {
  align-self: stretch;
  margin-inline: 0;
  text-align: center;
}

.diploma-filter-form {
  max-width: none;
  grid-template-columns: minmax(13rem, 1fr) minmax(10rem, 0.62fr) auto;
  align-items: end;
  gap: 0.75rem;
}

.diploma-filter-form label,
.diploma-assignment-form label,
.diploma-entry-form label {
  min-width: 0;
}

.diploma-filter-form .select2-container,
.diploma-assignment-form .select2-container,
.diploma-entry-form .select2-container {
  width: 100% !important;
  min-width: 0;
}

.diploma-filter-form .btn,
.diploma-assignment-form .btn {
  align-self: end;
  min-width: 7.5rem;
}

.diploma-filter-form label {
  padding: 0.72rem 0.78rem !important;
  border-color: #e2e8f0 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.diploma-filter-form label > span {
  color: #334155;
  font-size: 0.78rem;
  font-weight: 900;
}

.diploma-filter-form :is(.input, .select),
.diploma-filter-form .select2-container--default .select2-selection--single {
  min-height: 2.55rem;
  border-color: #dfe7ef;
  background: #f8fafc;
}

.diploma-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.diploma-section-filter.diploma-date-filter {
  grid-template-columns: minmax(15rem, 2fr) repeat(2, minmax(10rem, 1fr)) auto;
}

.diploma-date-filter-error {
  grid-column: 1 / -1;
  color: #b42318;
}

@media (max-width: 1000px) {
  .diploma-section-filter.diploma-date-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .diploma-section-filter.diploma-date-filter {
    grid-template-columns: minmax(0, 1fr);
  }
}

.diploma-section-filter {
  grid-template-columns: minmax(15rem, 24rem) auto;
  justify-content: start;
  margin: 0 0 1rem;
  padding: 0.8rem;
  border: 1px solid #e5edf5;
  border-radius: 14px;
  background: #f8fafc;
}

.diploma-assignment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 0.85rem;
}

.diploma-assignment-form .validation-summary,
.diploma-assignment-form .muted {
  grid-column: 1 / -1;
}

.diploma-manager-page {
  direction: rtl;
  text-align: right;
}

.diploma-manager-page .card-title-row,
.diploma-manager-page .toolbar,
.diploma-manager-page .diploma-meta,
.diploma-manager-page .diploma-actions,
.diploma-manager-page .pagination-bar {
  direction: rtl;
}

.diploma-manager-page .settings-form label,
.diploma-manager-page .settings-form h3,
.diploma-manager-page .settings-form h4 {
  text-align: start;
}

.diploma-manager-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  text-align: start;
  padding-inline: 0 1.8rem;
}

.diploma-manager-page .select2-container--default .select2-selection--single .select2-selection__arrow {
  left: auto;
  right: auto;
  inset-inline-start: auto;
  inset-inline-end: 0.75rem;
}

.diploma-subjects-workspace {
  display: grid;
  gap: 1rem;
  width: 100%;
}

.diploma-subject-create-card,
.diploma-subject-list-card {
  width: 100%;
  max-width: none;
  transform: none !important;
}

.diploma-subject-create-card {
  position: relative;
  padding: 0;
  border-color: rgba(8, 42, 94, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.94));
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.subject-create-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-bottom: 1px solid rgba(226, 232, 240, 0.78);
  background:
    linear-gradient(135deg, rgba(8, 42, 94, 0.06), rgba(245, 158, 11, 0.05) 46%, rgba(248, 250, 252, 0.88));
}

.subject-create-hero-icon {
  width: 2.9rem;
  height: 2.9rem;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: #0B3D91;
  color: #fff;
  box-shadow: 0 14px 28px rgba(8, 42, 94, 0.2);
}

.subject-create-hero-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.subject-create-hero h3,
.diploma-subject-list-card h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 950;
  color: #111827;
}

.subject-create-hero p {
  margin: 0.25rem 0 0;
}

.subject-create-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 2.3rem;
  padding: 0 0.78rem;
  border: 1px solid rgba(8, 42, 94, 0.12);
  border-radius: 999px;
  background: #fff;
  color: #0B3D91;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.subject-create-badge svg {
  width: 0.95rem;
  height: 0.95rem;
}

.diploma-subject-create-form {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 1rem;
  max-width: none;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.diploma-subject-create-form > .validation-summary {
  grid-column: 1 / -1;
}

.subject-form-section {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(13rem, 0.28fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid #e6edf3;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
}

.subject-section-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.subject-section-head > svg {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.55rem;
  border-radius: 12px;
  background: #EAF3FF;
  color: #0B3D91;
}

.subject-section-head h4 {
  margin: 0;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 950;
}

.subject-section-head p {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.6;
}

.diploma-subject-create-form .subject-form-row {
  min-width: 0;
  display: grid;
  gap: 0.8rem;
  align-items: stretch;
}

.diploma-subject-create-form .subject-form-row-primary {
  grid-template-columns: minmax(15rem, 1fr) minmax(18rem, 1.35fr) minmax(11rem, 0.7fr);
}

.diploma-subject-create-form .subject-form-row-secondary {
  grid-template-columns: repeat(2, minmax(14rem, 1fr));
}

.diploma-subject-create-form .subject-field-description {
  grid-column: 1 / -1;
}

.diploma-subject-create-form .subject-form-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(9rem, 0.85fr) minmax(9rem, 0.85fr) minmax(13rem, 1fr) minmax(16rem, 1.25fr);
  gap: 0.8rem;
  align-items: end;
  padding: 1rem;
  border: 1px solid rgba(8, 42, 94, 0.1);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.5), rgba(255, 255, 255, 0.88));
}

.diploma-subject-create-form .subject-field {
  min-height: 0;
  display: grid;
  gap: 0.45rem;
  padding: 0.78rem 0.85rem !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.diploma-subject-create-form .subject-field-label {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.35;
}

.diploma-subject-create-form .subject-field-label svg {
  width: 0.95rem;
  height: 0.95rem;
  color: #0B3D91;
}

.diploma-subject-create-form [data-valmsg-for] {
  min-height: 1rem;
  font-size: 0.74rem;
  font-weight: 800;
}

.diploma-subject-create-form [data-valmsg-for]:empty {
  display: none;
}

.diploma-subject-create-form textarea {
  min-height: 5.4rem;
  resize: vertical;
}

.diploma-subject-create-form .subject-publish-toggle {
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid rgba(8, 42, 94, 0.14);
  border-radius: 14px;
  background: #fff;
  align-self: stretch;
}

.diploma-subject-create-form .subject-publish-toggle span {
  display: grid;
  gap: 0.12rem;
}

.diploma-subject-create-form .subject-publish-toggle strong {
  color: #111827;
  font-size: 0.9rem;
  font-weight: 950;
}

.diploma-subject-create-form .subject-publish-toggle small {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.45;
}

.diploma-subject-create-form .btn {
  width: 100%;
  min-height: 4.25rem;
  align-self: stretch;
  border-radius: 14px;
  font-size: 0.96rem;
  box-shadow: 0 16px 34px rgba(8, 42, 94, 0.22);
}

.diploma-subject-create-form .input,
.diploma-subject-create-form .select,
.diploma-subject-create-form .select2-container .select2-selection--single {
  min-height: 2.85rem;
  border-radius: 12px;
}

.diploma-subject-create-form .select2-container {
  margin-top: 0;
}

.diploma-subject-create-form .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  border-color: #dbe3ea;
  background: #f8fafc;
}

.diploma-subject-list-card .table {
  table-layout: fixed;
}

.diploma-subject-list-card .table th,
.diploma-subject-list-card .table td {
  text-align: right;
  vertical-align: top;
}

.diploma-subject-list-card .table th:last-child,
.diploma-subject-list-card .table td:last-child {
  width: 7rem;
  text-align: left;
}

.diploma-subject-list-card .table form.diploma-assignment-form {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}

.diploma-subject-list-card .table form.diploma-assignment-form > .grid {
  grid-column: 1 / -1;
}

.diploma-subject-list-card .table form.diploma-assignment-form > .grid:last-of-type {
  grid-template-columns: minmax(9rem, 0.8fr) minmax(0, 2fr);
}

.diploma-subject-list-card .table form.diploma-assignment-form > .btn {
  grid-column: 1 / span 2;
  justify-self: stretch;
}

@media (max-width: 1180px) {
  .subject-form-section {
    grid-template-columns: 1fr;
  }

  .diploma-subject-create-form .subject-form-row-primary,
  .diploma-subject-create-form .subject-form-row-secondary,
  .diploma-subject-create-form .subject-form-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diploma-subject-create-form .subject-form-row-primary label:nth-child(2),
  .diploma-subject-create-form .subject-field-title,
  .diploma-subject-create-form .subject-publish-toggle,
  .diploma-subject-create-form .subject-form-actions .btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .subject-create-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .subject-create-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .diploma-subject-create-form .subject-form-row-primary,
  .diploma-subject-create-form .subject-form-row-secondary,
  .diploma-subject-create-form .subject-form-actions,
  .diploma-subject-list-card .table form.diploma-assignment-form,
  .diploma-subject-list-card .table form.diploma-assignment-form > .grid,
  .diploma-subject-list-card .table form.diploma-assignment-form > .grid:last-of-type {
    grid-template-columns: 1fr;
  }

  .subject-create-hero,
  .subject-form-section,
  .diploma-subject-create-form,
  .diploma-subject-create-form .subject-form-actions {
    padding: 0.9rem;
  }

  .subject-section-head {
    align-items: center;
  }

  .diploma-subject-list-card .table form.diploma-assignment-form > .btn {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }
}

.diploma-form-card {
  max-width: 980px;
}

.diploma-form-actions {
  justify-content: flex-end;
}

.course-form-actions {
  justify-content: flex-end;
}

.diploma-list-card {
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  border-color: #dfe7ef;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.diploma-list-card:hover {
  transform: none;
}

.diploma-list-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
  align-items: end;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid #e5edf5;
  background:
    linear-gradient(135deg, rgba(8, 42, 94, 0.045), rgba(248, 250, 252, 0.92) 48%, rgba(245, 158, 11, 0.045));
}

.diploma-list-card .card-title-row {
  margin-bottom: 0;
}

.diploma-list-card .card-title-row > div {
  min-width: 0;
}

.diploma-list-card .card-title-row p {
  margin: 0.25rem 0 0;
}

.diploma-card-list {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
}

.diploma-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15.5rem, 18rem);
  gap: 1rem;
  align-items: stretch;
  padding: 1rem 1.1rem;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.diploma-item:hover {
  border-color: rgba(8, 42, 94, 0.24);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.diploma-item-main {
  display: flex;
  gap: 0.9rem;
  min-width: 0;
}

.diploma-avatar {
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  background: #edf2ef;
  color: #0B3D91;
}

.diploma-avatar svg {
  width: 1.25rem;
  height: 1.25rem;
}

.diploma-copy {
  min-width: 0;
}

.diploma-instructors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: .65rem;
  font-size: .8rem;
  color: var(--theme-primary-dark, #0B3D91);
}

.diploma-instructors > svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.diploma-instructors-label { font-weight: 800; }

.diploma-instructor-name {
  min-width: 0;
  padding: .2rem .55rem;
  border-radius: 8px;
  background: var(--theme-primary-light, #EAF3FF);
  overflow-wrap: anywhere;
  font-weight: 700;
}

.diploma-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.diploma-title-row h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 950;
  color: #111827;
  overflow-wrap: anywhere;
}

.diploma-copy p {
  margin: 0.35rem 0 0;
  color: #6b7280;
  line-height: 1.7;
  max-width: 62rem;
}

.diploma-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.diploma-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #4b5563;
  font-size: 0.75rem;
  font-weight: 800;
}

.diploma-meta svg {
  width: 0.78rem;
  height: 0.78rem;
  color: #0B3D91;
}

.diploma-item-side {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  min-width: 0;
  padding-inline-start: 1rem;
  border-inline-start: 1px solid #eef2f7;
}

.diploma-course-progress {
  padding: 0.75rem;
  border: 1px solid #BFDBFE;
  border-radius: 14px;
  background: #EAF3FF;
}

.diploma-course-progress > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
}

.diploma-course-progress strong {
  font-size: 1rem;
  color: #0B3D91;
}

.diploma-advance-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: end;
}

.diploma-advance-form label {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.diploma-advance-form label span {
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 800;
}

.diploma-advance-form .input {
  width: 100%;
  min-height: 2.45rem;
  background: #fff;
}

.diploma-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.diploma-actions form {
  margin: 0;
}

.diploma-actions .btn,
.diploma-actions form {
  width: 100%;
}

.diploma-actions .btn {
  min-width: 0;
}

.diploma-list-card > .empty-state.compact {
  margin: 1rem;
}

.diploma-list-card > .pagination-bar {
  padding: 1rem;
  border-top: 1px solid #eef2f7;
  background: #fbfcfd;
}

.empty-state.compact {
  display: grid;
  place-items: center;
  gap: 0.45rem;
  min-height: 12rem;
  padding: 1.5rem;
  border: 1px dashed #d1d5db;
  border-radius: 18px;
  background: #f9fafb;
  text-align: center;
}

.empty-state.compact svg {
  width: 2rem;
  height: 2rem;
  color: #0B3D91;
}

.empty-state.compact p {
  margin: 0;
}

.reference-data-page .section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  text-align: start;
}

.reference-data-page .section-heading h2 {
  margin: 0 0 0.25rem;
  color: #111827;
  font-size: 1.35rem;
  font-weight: 900;
}

.reference-create-card,
.reference-filter-card,
.reference-table-card {
  margin-bottom: 1.1rem;
}

.reference-create-card {
  position: relative;
  overflow: hidden;
  border-color: #dbe7ff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96)),
    radial-gradient(circle at 8% 0, rgba(13, 110, 253, 0.12), transparent 34%);
  box-shadow: 0 18px 42px rgba(8, 42, 94, 0.08);
}

.reference-create-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #0B3D91, #2563eb, #f59e0b);
}

.reference-entry-form,
.reference-filter-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: 0.75rem;
}

.reference-entry-form-with-media {
  grid-template-columns:
    minmax(240px, 1fr)
    minmax(190px, 0.85fr)
    minmax(280px, 1.15fr);
  column-gap: 1rem;
  row-gap: 0.9rem;
}

.reference-entry-form .btn,
.reference-filter-form .btn {
  justify-self: start;
}

.reference-entry-form .input,
.reference-entry-form .select {
  min-height: 48px;
  border-color: #dfe7f3;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.reference-entry-form .input:focus,
.reference-entry-form .select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.reference-entry-form label,
.reference-edit-form label {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.reference-entry-form label > span {
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 800;
  min-height: 1.25rem;
  text-align: start;
}

.reference-entry-form .reference-file-input {
  direction: rtl;
  padding: 0.35rem;
}

.reference-file-input::file-selector-button {
  margin-inline: 0 0.65rem;
  min-height: 36px;
  border: 0;
  border-radius: 0.65rem;
  background: #eef5ff;
  color: #0B3D91;
  cursor: pointer;
  font-weight: 900;
  padding: 0 0.85rem;
}

.reference-file-input:hover::file-selector-button {
  background: #dbeafe;
}

.reference-submit {
  width: 100%;
  min-width: 132px;
  min-height: 48px;
  border-radius: 0.85rem;
  box-shadow: 0 12px 24px rgba(11, 61, 145, 0.22);
}

.reference-filter-form {
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px) auto;
}

.reference-table td {
  vertical-align: middle;
}

.reference-table-card .table-responsive {
  padding-bottom: 0.35rem;
}

.reference-table {
  table-layout: auto;
}

.reference-table th,
.reference-table td {
  white-space: nowrap;
  text-align: right;
}

.reference-table:has(.reference-image-cell) {
  min-width: max(1480px, 100%);
}

.reference-table:has(.reference-image-cell) th:nth-child(1),
.reference-table:has(.reference-image-cell) td:nth-child(1) {
  width: 230px;
  min-width: 230px;
}

.reference-table:has(.reference-image-cell) th:nth-child(2),
.reference-table:has(.reference-image-cell) td:nth-child(2) {
  width: 150px;
  min-width: 150px;
}

.reference-table:has(.reference-image-cell) th:nth-child(3),
.reference-table:has(.reference-image-cell) td:nth-child(3) {
  width: 260px;
  min-width: 260px;
}

.reference-table:has(.reference-image-cell) th:nth-child(4),
.reference-table:has(.reference-image-cell) td:nth-child(4) {
  width: 300px;
  min-width: 300px;
}

.reference-table:has(.reference-image-cell) th:nth-child(5),
.reference-table:has(.reference-image-cell) td:nth-child(5) {
  width: 120px;
  min-width: 120px;
}

.reference-table:has(.reference-image-cell) th:nth-child(6),
.reference-table:has(.reference-image-cell) td:nth-child(6) {
  width: 230px;
  min-width: 230px;
}

.reference-table:has(.reference-image-cell) th:nth-child(7),
.reference-table:has(.reference-image-cell) td:nth-child(7),
.reference-table:has(.reference-image-cell) th:nth-child(8),
.reference-table:has(.reference-image-cell) td:nth-child(8),
.reference-table:has(.reference-image-cell) th:nth-child(9),
.reference-table:has(.reference-image-cell) td:nth-child(9) {
  width: 110px;
  min-width: 110px;
}

.reference-table:has(.reference-image-cell) th:nth-child(10),
.reference-table:has(.reference-image-cell) td:nth-child(10) {
  width: 160px;
  min-width: 160px;
}

.reference-table .input {
  min-width: 150px;
  width: 100%;
}

.latin-identifier {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
  font-family: var(--font-inter), Arial, "Segoe UI", Tahoma, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.reference-table .reference-url-heading,
.reference-table .reference-url-cell {
  min-width: 320px;
  white-space: normal;
}

.reference-table .reference-url-cell .input {
  overflow-wrap: anywhere;
}

.reference-table .reference-file-input {
  min-width: 190px;
  max-width: 100%;
}

.reference-table .select,
.reference-status-select {
  min-width: 180px;
  width: 100%;
}

.reference-image-cell {
  display: grid;
  grid-template-columns: 96px minmax(180px, 1fr);
  align-items: center;
  gap: 0.5rem;
  min-width: 280px;
}

.reference-image-cell img {
  width: 96px;
  height: 64px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  padding: 0.35rem;
}

.reference-edit-form {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.reference-status-select {
  font-weight: 800;
}

.reference-status-select.is-active {
  border-color: #bbf7d0;
  color: #047857;
  background: #f0fdf4;
}

.reference-status-select.is-inactive {
  border-color: #e5e7eb;
  color: #4b5563;
  background: #f8fafc;
}

.reference-status-select.is-active + .select2-container .select2-selection--single {
  border-color: #bbf7d0;
  color: #047857;
  background: #f0fdf4;
}

.reference-status-select.is-inactive + .select2-container .select2-selection--single {
  border-color: #e5e7eb;
  color: #4b5563;
  background: #f8fafc;
}

.reference-status-select.is-active + .select2-container .select2-selection__rendered {
  color: #047857;
  font-weight: 800;
}

.reference-status-select.is-inactive + .select2-container .select2-selection__rendered {
  color: #4b5563;
  font-weight: 800;
}

@media (max-width: 980px) {
  .reference-entry-form-with-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .reference-entry-form-with-media {
    grid-template-columns: 1fr;
  }
}

.checkbox-line {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem !important;
  white-space: nowrap;
}

.checkbox-line.compact {
  font-size: 0.82rem;
}

.reference-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.reference-actions form {
  margin: 0;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding-top: 1rem;
}

.pagination-bar .disabled,
.toolbar .disabled {
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .diploma-list-header {
    grid-template-columns: 1fr;
  }

  .diploma-filter-form,
  .diploma-assignment-form,
  .diploma-item {
    grid-template-columns: 1fr;
  }

  .diploma-item-side {
    padding-inline-start: 0;
    padding-top: 0.85rem;
    border-inline-start: 0;
    border-top: 1px solid #eef2f7;
  }

  .diploma-filter-form .btn,
  .diploma-assignment-form .btn,
  .diploma-actions .btn,
  .diploma-actions form {
    width: 100%;
  }

  .diploma-filter-actions {
    width: 100%;
    flex-direction: column;
  }

  .reference-entry-form,
  .reference-filter-form {
    grid-template-columns: 1fr;
  }

  .reference-entry-form-with-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .reference-entry-form-with-media {
    grid-template-columns: 1fr;
  }

  .diploma-item {
    padding: 0.85rem;
  }

  .diploma-list-header,
  .diploma-card-list {
    padding: 0.85rem;
  }

  .diploma-item-main,
  .diploma-title-row,
  .diploma-course-progress > div:first-child {
    align-items: flex-start;
  }

  .diploma-item-main,
  .diploma-advance-form,
  .diploma-actions,
  .diploma-filter-actions {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .diploma-item-main {
    flex-direction: column;
  }

  .diploma-advance-form .btn {
    width: 100%;
  }

  .reference-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .reference-actions .btn,
  .reference-actions form {
    width: 100%;
  }
}

.kit-attachment-form {
  max-width: none;
  margin-bottom: 1rem;
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  background: #f8fafc;
}

.kit-attachment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: stretch;
}

.kit-attachment-grid label {
  min-width: 0;
}

.kit-wide {
  grid-column: span 2;
}

.kit-full {
  grid-column: 1 / -1;
}

.kit-attachment-drop {
  min-height: 7.75rem;
  display: grid !important;
  place-items: center;
  gap: 0.45rem !important;
  padding: 1rem !important;
  border: 1px dashed rgba(8, 42, 94, 0.3) !important;
  border-radius: 16px !important;
  background: #fff !important;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.kit-attachment-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.kit-attachment-drop > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: #0B3D91;
  font-weight: 950;
}

.kit-attachment-drop small {
  max-width: 32rem;
  color: #6b7280;
  font-weight: 750;
  line-height: 1.7;
}

.kit-attachment-drop:hover,
.kit-attachment-drop:focus-within {
  border-color: #0B5ED7 !important;
  background: #EAF3FF !important;
}

.kit-form-actions {
  justify-content: flex-start;
}

.kit-items-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.kit-edit-form {
  display: grid;
  grid-template-columns: minmax(14rem, 1.4fr) minmax(7rem, 0.4fr) auto auto;
  gap: 0.75rem;
  align-items: end;
  padding: 0.85rem;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  background: #f9fafb;
}

.kit-edit-form label:not(.check-row) {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  color: #374151;
  font-weight: 850;
}

.kit-edit-title {
  min-width: 0;
}

.kit-edit-description {
  grid-column: 1 / 3;
}

.kit-edit-description textarea {
  min-height: 4.5rem;
  padding-top: 0.75rem;
  resize: vertical;
}

.kit-edit-published {
  align-self: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.kit-edit-actions {
  align-self: center;
}

.kit-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
}

.kit-item-main {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-width: 0;
}

.kit-item-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(8, 42, 94, 0.08);
  color: #0B3D91;
}

.kit-item-main strong {
  display: block;
  color: #111827;
  font-size: 0.98rem;
  font-weight: 950;
}

.kit-item-main p {
  margin: 0.2rem 0 0;
  color: #6b7280;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.kit-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.kit-item-meta span {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 0.78rem;
  font-weight: 850;
}

.kit-item-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.kit-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 4.25rem;
  padding: 1rem;
  border: 1px dashed #d1d5db;
  border-radius: 16px;
  background: #f9fafb;
  color: #6b7280;
  font-weight: 850;
  text-align: center;
}

@media (max-width: 980px) {
  .kit-attachment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kit-edit-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kit-edit-description {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .kit-attachment-grid {
    grid-template-columns: 1fr;
  }

  .kit-wide,
  .kit-full {
    grid-column: 1 / -1;
  }

  .kit-item-row {
    align-items: stretch;
    flex-direction: column;
  }

  .kit-item-actions,
  .kit-item-actions .btn,
  .kit-form-actions .btn,
  .kit-edit-actions,
  .kit-edit-actions .btn,
  .kit-edit-published {
    width: 100%;
  }

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

  .kit-edit-description {
    grid-column: 1 / -1;
  }
}

td > .btn + form {
  margin-top: 0.45rem;
}

@media (max-width: 760px) {
  .course-image-uploader {
    grid-template-columns: 1fr;
  }

  .entry-section-head {
    flex-direction: column;
  }

  .diploma-create-card .btn,
  .entry-toggle-grid .check-row {
    width: 100%;
    justify-content: center;
  }
}

.details-list {
  display: grid;
  grid-template-columns: minmax(10rem, 0.36fr) minmax(0, 1fr);
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
}

.details-list dt,
.details-list dd {
  min-width: 0;
  margin: 0;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid #eef2f7;
  line-height: 1.7;
}

.details-list dt {
  background: #f9fafb;
  color: #6b7280;
  font-weight: 850;
}

.details-list dd {
  color: #111827;
  font-weight: 750;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}

.details-list dt:last-of-type,
.details-list dd:last-of-type {
  border-bottom: 0;
}

.details-list + .toolbar {
  justify-content: flex-start;
  margin-top: 1rem;
}

.admin-students-page .student-filter-card {
  margin-bottom: 18px;
  padding: 1.15rem 1.25rem;
}

.admin-students-page .student-filter-form {
  display: grid;
  gap: 1rem;
}

.admin-students-page .student-filter-rows {
  display: grid;
  gap: 0.85rem;
}

.admin-students-page .student-filter-row {
  display: grid;
  gap: 0.8rem;
  align-items: end;
}

.admin-students-page .student-filter-row-primary {
  grid-template-columns: minmax(20rem, 1.35fr) minmax(13rem, 0.85fr) minmax(13rem, 0.85fr);
}

.admin-students-page .student-filter-row-secondary {
  grid-template-columns: minmax(13rem, 0.9fr) minmax(12rem, 0.8fr) minmax(12rem, 0.8fr) auto;
}

.admin-students-page .student-filter-field {
  min-width: 0;
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.admin-students-page .student-filter-field > span {
  color: #4b5563;
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-students-page .student-filter-field .input,
.admin-students-page .student-filter-field .select,
.admin-students-page .student-filter-field .select2-container {
  width: 100% !important;
  min-width: 0;
}

.admin-students-page .student-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  min-width: max-content;
}

.admin-students-page .student-filter-actions .btn {
  min-height: 3.1rem;
}

.admin-students-page .student-export-options {
  border-top: 1px solid #eef2f7;
  padding-top: 0.85rem;
}

.admin-students-page .student-export-options summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #111827;
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.admin-students-page .student-export-options summary::-webkit-details-marker {
  display: none;
}

.admin-students-page .student-export-options summary::marker {
  content: "";
}

.admin-students-page .student-export-options summary > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.admin-students-page .student-export-options summary small {
  color: #6b7280;
  font-size: 0.76rem;
  font-weight: 800;
}

.admin-students-page .student-export-column-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.admin-students-page .student-export-column {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 0.8rem;
  font-weight: 850;
}

.admin-students-page .student-export-column input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  accent-color: #0B3D91;
}

.admin-students-page .student-export-column span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-students-page .students-table-card {
  margin-top: 20px;
  overflow: visible;
}

.admin-students-page .students-table-card .table-responsive {
  overflow: visible;
}

.admin-students-page .students-compact-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed;
}

.admin-students-page .students-compact-table th,
.admin-students-page .students-compact-table td {
  min-width: 0;
  overflow: visible;
}

.admin-students-page .students-compact-table th:nth-child(1) {
  width: 30%;
}

.admin-students-page .students-compact-table th:nth-child(2) {
  width: 22%;
}

.admin-students-page .students-compact-table th:nth-child(3) {
  width: 23%;
}

.admin-students-page .students-compact-table th:nth-child(4) {
  width: 14%;
}

.admin-students-page .students-compact-table th:nth-child(5) {
  width: 11%;
}

.admin-students-page .student-main-cell strong {
  display: block;
  color: #111827;
  font-weight: 950;
}

.admin-students-page .student-main-cell small {
  display: block;
  margin-top: 0.25rem;
  color: #6b7280;
  font-size: 0.78rem;
}

.admin-students-page .student-contact-cell {
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}

.admin-students-page .student-enrollment-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-students-page .student-enrollment-summary span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f9fafb;
  color: #374151;
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-students-page .student-actions-cell {
  position: relative;
  overflow: visible;
  text-align: center;
}

.admin-students-page .student-action-menu {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  z-index: 1;
}

.admin-students-page .student-action-menu[open] {
  z-index: 40;
}

.admin-students-page .student-action-menu.menu-floating .student-action-menu-list {
  position: fixed !important;
  top: var(--action-menu-top, 0) !important;
  left: var(--action-menu-left, 0) !important;
  bottom: auto !important;
  inset-inline: auto !important;
  z-index: 90 !important;
}

.admin-students-page .student-action-menu summary {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #0B3D91;
  cursor: pointer;
  list-style: none;
}

.admin-students-page .student-action-menu summary::-webkit-details-marker {
  display: none;
}

.admin-students-page .student-action-menu summary:hover,
.admin-students-page .student-action-menu[open] summary {
  border-color: rgba(11, 61, 145, 0.28);
  background: #f8fbff;
}

.admin-students-page .student-action-menu-list {
  position: absolute;
  bottom: calc(100% + 0.45rem);
  inset-inline-start: 0;
  inset-inline-end: auto;
  z-index: 45;
  width: min(17rem, calc(100vw - 2rem));
  display: grid;
  gap: 0.25rem;
  padding: 0.45rem;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
  text-align: right;
}

.admin-students-page .student-action-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #1f2937;
  padding: 0.65rem 0.75rem;
  font-weight: 850;
  text-align: right;
  cursor: pointer;
}

.admin-students-page .student-action-menu-item:hover:not(:disabled) {
  background: #f3f7ff;
  color: #0B3D91;
}

.admin-students-page .student-action-menu-item:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.admin-students-page .student-action-menu svg,
.admin-students-page .student-action-menu-item svg {
  width: 1.05rem;
  height: 1.05rem;
}

.admin-audit-logs-page .audit-logs-card {
  overflow: visible;
}

.admin-audit-logs-page .audit-logs-card .table-responsive {
  overflow: visible;
}

.admin-audit-logs-page .content {
  animation: none;
  transform: none;
}

.admin-audit-logs-page .audit-logs-card:hover {
  transform: none;
}

.admin-audit-logs-page .audit-logs-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.admin-audit-logs-page .audit-logs-card .table-responsive > .audit-logs-table.table {
  width: 100%;
  min-width: 0;
}

.admin-audit-logs-page .audit-logs-table th,
.admin-audit-logs-page .audit-logs-table td {
  vertical-align: top;
  overflow-wrap: anywhere;
}

.admin-audit-logs-page .audit-logs-table th:nth-child(1),
.admin-audit-logs-page .audit-logs-table td:nth-child(1) {
  width: 15%;
}

.admin-audit-logs-page .audit-logs-table th:nth-child(2),
.admin-audit-logs-page .audit-logs-table td:nth-child(2) {
  width: 28%;
}

.admin-audit-logs-page .audit-logs-table th:nth-child(3),
.admin-audit-logs-page .audit-logs-table td:nth-child(3) {
  width: 27%;
}

.admin-audit-logs-page .audit-logs-table th:nth-child(4),
.admin-audit-logs-page .audit-logs-table td:nth-child(4) {
  width: 22%;
}

.admin-audit-logs-page .audit-logs-table th:nth-child(5),
.admin-audit-logs-page .audit-logs-table td:nth-child(5) {
  width: 8%;
}

.admin-audit-logs-page .audit-log-main-cell strong,
.admin-audit-logs-page .audit-log-action-cell strong,
.admin-audit-logs-page .audit-log-entity-cell strong,
.admin-audit-logs-page .audit-log-person-cell strong {
  display: block;
  color: #111827;
  line-height: 1.65;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}

.admin-audit-logs-page .audit-log-main-cell small,
.admin-audit-logs-page .audit-log-action-cell small,
.admin-audit-logs-page .audit-log-entity-cell small,
.admin-audit-logs-page .audit-log-person-cell small {
  display: block;
  margin-top: 0.2rem;
  color: #6b7280;
  line-height: 1.6;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}

.admin-audit-logs-page .audit-log-actions-cell {
  position: relative;
  text-align: center;
}

.admin-audit-logs-page .audit-action-menu {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.admin-audit-logs-page .audit-action-menu summary {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #0B3D91;
  cursor: pointer;
  list-style: none;
}

.admin-audit-logs-page .audit-action-menu summary::-webkit-details-marker {
  display: none;
}

.admin-audit-logs-page .audit-action-menu summary:hover,
.admin-audit-logs-page .audit-action-menu[open] summary {
  border-color: rgba(11, 61, 145, 0.28);
  background: #f8fbff;
}

.admin-audit-logs-page .audit-action-menu-list {
  position: fixed;
  top: 5.25rem;
  inset-inline-end: clamp(1rem, 4vw, 3rem);
  z-index: 70;
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 6.5rem);
  display: grid;
  gap: 0.8rem;
  padding: 0.85rem;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  text-align: right;
}

.admin-audit-logs-page .audit-action-section {
  display: grid;
  gap: 0.65rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #eef2f7;
}

.admin-audit-logs-page .audit-action-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.admin-audit-logs-page .audit-action-section h4 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: #111827;
  font-size: 0.9rem;
  font-weight: 900;
}

.admin-audit-logs-page .audit-details-list {
  grid-template-columns: minmax(8.5rem, 0.38fr) minmax(0, 1fr);
  border-radius: 12px;
}

.admin-audit-logs-page .audit-details-list dt,
.admin-audit-logs-page .audit-details-list dd {
  padding: 0.65rem 0.75rem;
  font-size: 0.82rem;
}

.admin-audit-logs-page .audit-action-link {
  justify-content: center;
  width: 100%;
}

.admin-audit-logs-page .audit-action-menu svg,
.admin-audit-logs-page .audit-action-section svg {
  width: 1.05rem;
  height: 1.05rem;
}

@media (max-width: 860px) {
  .admin-audit-logs-page .audit-logs-card {
    padding-inline: 0.9rem;
  }

  .admin-audit-logs-page .audit-logs-card .table-responsive {
    overflow: visible;
  }

  .admin-audit-logs-page .audit-logs-table,
  .admin-audit-logs-page .audit-logs-table thead,
  .admin-audit-logs-page .audit-logs-table tbody,
  .admin-audit-logs-page .audit-logs-table tr,
  .admin-audit-logs-page .audit-logs-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .admin-audit-logs-page .audit-logs-card .table-responsive > .audit-logs-table {
    width: 100%;
    min-width: 0;
  }

  .admin-audit-logs-page .audit-logs-table th:nth-child(n),
  .admin-audit-logs-page .audit-logs-table td:nth-child(n) {
    width: 100%;
  }

  .admin-audit-logs-page .audit-logs-table thead {
    display: none;
  }

  .admin-audit-logs-page .audit-logs-table tbody {
    display: grid;
    gap: 0.8rem;
  }

  .admin-audit-logs-page .audit-logs-table tr {
    display: grid;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    overflow: visible;
  }

  .admin-audit-logs-page .audit-logs-table td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 34%) minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 0;
    border-bottom: 1px solid #eef2f7;
    border-radius: 0;
    text-align: start;
    word-break: break-word;
  }

  .admin-audit-logs-page .audit-logs-table td:last-child {
    border-bottom: 0;
  }

  .admin-audit-logs-page .audit-logs-table td::before {
    content: attr(data-label);
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 950;
  }

  .admin-audit-logs-page .audit-logs-table td[colspan] {
    display: block;
    text-align: center;
  }

  .admin-audit-logs-page .audit-logs-table td[colspan]::before {
    content: none;
  }

  .admin-audit-logs-page .audit-log-actions-cell {
    text-align: start;
  }

  .admin-audit-logs-page .audit-action-menu {
    justify-self: start;
  }

  .admin-audit-logs-page .audit-action-menu-list {
    top: 5rem;
    inset-inline: 1rem;
    width: auto;
    max-height: calc(100vh - 6rem);
  }

  .admin-audit-logs-page .audit-details-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .admin-audit-logs-page .audit-logs-card {
    padding-inline: 0.75rem;
  }

  .admin-audit-logs-page .audit-logs-table td {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

.admin-support-page .support-tickets-card,
.admin-support-page .support-tickets-card .table-responsive {
  overflow: visible;
}

.admin-support-page .content {
  animation: none;
  transform: none !important;
}

.admin-support-page .support-tickets-card:hover {
  transform: none;
}

.admin-support-page .support-ticket-table {
  width: 100%;
  min-width: 64rem;
  table-layout: fixed;
}

.admin-support-page .support-ticket-table th,
.admin-support-page .support-ticket-table td {
  vertical-align: top;
}

.admin-support-page .support-ticket-table th:nth-child(1),
.admin-support-page .support-ticket-table td:nth-child(1) {
  width: 24%;
}

.admin-support-page .support-ticket-table th:nth-child(2),
.admin-support-page .support-ticket-table td:nth-child(2) {
  width: 20%;
}

.admin-support-page .support-ticket-table th:nth-child(3),
.admin-support-page .support-ticket-table td:nth-child(3) {
  width: 11%;
}

.admin-support-page .support-ticket-table th:nth-child(4),
.admin-support-page .support-ticket-table td:nth-child(4) {
  width: 18%;
}

.admin-support-page .support-ticket-table th:nth-child(5),
.admin-support-page .support-ticket-table td:nth-child(5) {
  width: 18%;
}

.admin-support-page .support-ticket-table th:nth-child(6),
.admin-support-page .support-ticket-table td:nth-child(6) {
  width: 9%;
}

.admin-support-page .support-ticket-main-cell strong,
.admin-support-page .support-ticket-person-cell strong {
  display: block;
  color: #111827;
  line-height: 1.65;
}

.admin-support-page .support-ticket-main-cell small,
.admin-support-page .support-ticket-person-cell small,
.admin-support-page .support-activity-list small {
  display: block;
  margin-top: 0.2rem;
  color: #6b7280;
  line-height: 1.6;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}

.admin-support-page .support-status-cell .badge {
  white-space: nowrap;
}

.admin-support-page .support-activity-list {
  display: grid;
  gap: 0.1rem;
}

.admin-support-page .support-actions-cell {
  position: relative;
  text-align: center;
}

.admin-support-page .support-action-menu {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.admin-support-page .support-action-menu summary {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #0B3D91;
  cursor: pointer;
  list-style: none;
}

.admin-support-page .support-action-menu summary::-webkit-details-marker {
  display: none;
}

.admin-support-page .support-action-menu summary:hover,
.admin-support-page .support-action-menu[open] summary {
  border-color: rgba(11, 61, 145, 0.28);
  background: #f8fbff;
}

.admin-support-page .support-action-menu-list {
  position: fixed;
  top: 5.25rem;
  inset-inline-end: clamp(1rem, 4vw, 3rem);
  z-index: 70;
  width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100vh - 6.5rem);
  display: grid;
  gap: 0.8rem;
  padding: 0.85rem;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  text-align: right;
}

.admin-support-page .support-action-section {
  display: grid;
  gap: 0.65rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #eef2f7;
}

.admin-support-page .support-action-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.admin-support-page .support-action-section h4 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: #111827;
  font-size: 0.9rem;
  font-weight: 900;
}

.admin-support-page .support-details-list {
  grid-template-columns: minmax(8rem, 0.36fr) minmax(0, 1fr);
  border-radius: 12px;
}

.admin-support-page .support-details-list dt,
.admin-support-page .support-details-list dd {
  padding: 0.65rem 0.75rem;
  font-size: 0.82rem;
}

.admin-support-page .support-history-list {
  display: grid;
  gap: 0.65rem;
}

.admin-support-page .support-history-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
}

.admin-support-page .support-history-item.response {
  border-color: rgba(11, 61, 145, 0.16);
  background: #f8fbff;
}

.admin-support-page .support-history-item.internal {
  border-color: rgba(245, 158, 11, 0.22);
  background: #fffbeb;
}

.admin-support-page .support-history-item.attachment {
  border-color: rgba(14, 165, 233, 0.18);
  background: #f0f9ff;
}

.admin-support-page .support-history-item.resolved {
  border-color: rgba(22, 163, 74, 0.18);
  background: #f0fdf4;
}

.admin-support-page .support-history-item.closed {
  border-color: rgba(220, 38, 38, 0.14);
  background: #fef2f2;
}

.admin-support-page .support-history-icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #fff;
  color: #0B3D91;
  border: 1px solid rgba(226, 232, 240, 0.95);
}

.admin-support-page .support-history-content {
  min-width: 0;
  display: grid;
  gap: 0.3rem;
}

.admin-support-page .support-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.admin-support-page .support-history-head strong {
  min-width: 0;
  color: #111827;
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1.5;
}

.admin-support-page .support-history-content small {
  color: #6b7280;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.6;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}

.admin-support-page .support-history-content p {
  margin: 0.15rem 0 0;
  color: #1f2937;
  font-size: 0.84rem;
  line-height: 1.85;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-support-page .support-history-attachment {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.1rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(11, 61, 145, 0.16);
  border-radius: 999px;
  background: #fff;
  color: #0B3D91;
  font-size: 0.78rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.admin-support-page .support-history-attachment span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-support-page .support-history-attachment small {
  color: #64748b;
  white-space: nowrap;
}

.admin-support-page .support-history-attachment.unavailable {
  border-color: rgba(220, 38, 38, 0.18);
  background: #fff7f7;
  color: #991b1b;
}

.admin-support-page .support-history-attachment.unavailable small {
  color: #b91c1c;
}

.admin-support-page .support-attachment-list {
  display: grid;
  gap: 0.6rem;
}

.admin-support-page .support-attachment-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 14px;
  background: #f8fbff;
}

.admin-support-page .support-attachment-icon {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #fff;
  color: #0B3D91;
}

.admin-support-page .support-attachment-body {
  min-width: 0;
  display: grid;
  gap: 0.22rem;
}

.admin-support-page .support-attachment-body strong {
  min-width: 0;
  color: #111827;
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-support-page .support-attachment-body small {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.admin-support-page .support-attachment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.admin-support-page .support-attachment-actions .btn {
  min-height: 2rem;
  padding-inline: 0.65rem;
}

.admin-support-page .support-attachment-actions .disabled {
  pointer-events: none;
  opacity: 0.55;
}

.admin-support-page .support-action-form {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.admin-support-page .support-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}

.admin-support-page .support-action-form .input,
.admin-support-page .support-action-form .select {
  width: 100%;
  min-width: 0;
}

.admin-support-page .support-response-input {
  height: auto;
  min-height: 5.5rem;
  padding: 0.75rem;
  resize: vertical;
}

.admin-support-page .support-action-menu svg,
.admin-support-page .support-action-section svg {
  width: 1.05rem;
  height: 1.05rem;
}

@media (max-width: 760px) {
  .admin-support-page .support-tickets-card .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
  }

  .admin-support-page .support-action-menu-list {
    top: 5rem;
    inset-inline: 1rem;
    width: auto;
    max-height: calc(100vh - 6rem);
  }

  .admin-support-page .support-details-list,
  .admin-support-page .support-attachment-card,
  .admin-support-page .support-action-row {
    grid-template-columns: 1fr;
  }

  .admin-support-page .support-attachment-actions {
    justify-content: stretch;
  }

  .admin-support-page .support-attachment-actions .btn {
    flex: 1 1 8rem;
    justify-content: center;
  }

  .admin-support-page .support-action-form .btn {
    width: 100%;
  }
}

.admin-support-page .support-filter-panel {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 18px;
}

.admin-support-page .support-filter-panel:hover,
.admin-support-page .support-summary-grid .card:hover {
  transform: none;
}

.admin-support-page .support-filter-form {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(11rem, 14rem) auto auto;
  gap: 0.7rem;
  align-items: center;
}

.admin-support-page .support-search-field {
  position: relative;
  min-width: 0;
}

.admin-support-page .support-search-field svg {
  position: absolute;
  inset-inline-start: 0.85rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  color: #64748b;
  transform: translateY(-50%);
  pointer-events: none;
}

.admin-support-page .support-search-field .input {
  width: 100%;
  min-width: 0;
  padding-inline-start: 2.35rem;
}

.admin-support-page .support-status-chips {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.admin-support-page .support-filter-chip {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.72rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.admin-support-page .support-filter-chip.active,
.admin-support-page .support-filter-chip:hover {
  border-color: rgba(11, 61, 145, 0.25);
  background: #eaf3ff;
  color: #0B3D91;
}

.admin-support-page .support-summary-grid {
  margin-top: 0;
}

.admin-support-page .support-queue-section {
  display: grid;
  gap: 0.9rem;
  margin-top: 20px;
}

.admin-support-page .support-queue-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.admin-support-page .support-queue-head h2 {
  margin: 0;
  color: #111827;
  font-size: 1.15rem;
  font-weight: 900;
}

.admin-support-page .support-queue-head p {
  margin: 0.2rem 0 0;
}

.admin-support-page .support-queue-order {
  min-height: 2.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.admin-support-page .support-ticket-list {
  display: grid;
  gap: 0.8rem;
}

.admin-support-page .support-ticket-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-inline-start-width: 0.35rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.admin-support-page .support-ticket-card.urgent {
  border-inline-start-color: #ef4444;
}

.admin-support-page .support-ticket-card.new {
  border-inline-start-color: #0ea5e9;
}

.admin-support-page .support-ticket-card.active {
  border-inline-start-color: #f59e0b;
}

.admin-support-page .support-ticket-card.done {
  border-inline-start-color: #22c55e;
}

.admin-support-page .support-ticket-card-main {
  min-width: 0;
  display: grid;
  gap: 0.65rem;
}

.admin-support-page .support-ticket-priority,
.admin-support-page .support-ticket-title-row,
.admin-support-page .support-ticket-meta,
.admin-support-page .support-ticket-counters,
.admin-support-page .support-ticket-open-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-support-page .support-ticket-priority {
  justify-content: space-between;
}

.admin-support-page .support-ticket-priority span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #0B3D91;
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-support-page .support-ticket-priority small,
.admin-support-page .support-ticket-meta span,
.admin-support-page .support-ticket-counters span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 780;
}

.admin-support-page .support-ticket-meta span,
.admin-support-page .support-ticket-counters span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.admin-support-page .support-ticket-title-row {
  justify-content: space-between;
}

.admin-support-page .support-ticket-title-row h3 {
  min-width: 0;
  margin: 0;
  color: #111827;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.admin-support-page .support-ticket-latest {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #f8fafc;
  color: #1f2937;
  font-size: 0.86rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.admin-support-page .support-ticket-card-actions {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  background: #f8fafc;
}

.admin-support-page .support-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  margin: 0;
}

.admin-support-page .support-inline-form .select,
.admin-support-page .support-inline-form .btn {
  min-width: 0;
}

.admin-support-page .support-ticket-open-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-support-page .support-ticket-open-actions .btn {
  justify-content: center;
}

.admin-support-page .support-empty-state {
  min-height: 12rem;
  display: grid;
  place-items: center;
  gap: 0.35rem;
  padding: 2rem;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  background: #fff;
  color: #64748b;
  text-align: center;
}

.admin-support-page .support-empty-state svg {
  width: 2rem;
  height: 2rem;
  color: #0B3D91;
}

.admin-support-page .support-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.35rem;
}

.admin-support-page .support-pagination span {
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 850;
}

.admin-support-page .support-pagination .disabled {
  pointer-events: none;
  opacity: 0.45;
}

.admin-support-page .support-ticket-modal {
  z-index: 140;
  padding: 1rem;
}

.admin-support-page .support-ticket-modal-box {
  width: min(1180px, calc(100vw - 2rem));
  max-height: min(92vh, 62rem);
  padding: 0;
  overflow: auto;
  border-radius: 22px;
}

.admin-support-page .support-modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.admin-support-page .support-modal-head h2 {
  margin: 0.2rem 0 0;
  color: #111827;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-support-page .support-modal-head p {
  margin: 0.25rem 0 0;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 780;
  overflow-wrap: anywhere;
}

.admin-support-page .support-modal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #0B3D91;
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-support-page .support-modal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 32rem);
  gap: 1rem;
  padding: 1rem;
  align-items: start;
}

.admin-support-page .support-modal-main,
.admin-support-page .support-modal-side {
  min-width: 0;
  display: grid;
  gap: 0.85rem;
}

.admin-support-page .support-modal-section {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
}

.admin-support-page .support-modal-section h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 900;
}

.admin-support-page .support-modal-section:hover {
  transform: none;
}

.admin-support-page .support-modal-ticket-summary {
  background: #f8fafc;
}

.admin-support-page .support-ticket-modal .support-details-list {
  margin: 0;
  background: #fff;
}

.admin-support-page .support-history-attachment-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.admin-support-page .support-ticket-modal .support-attachment-card {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.admin-support-page .support-attachment-preview {
  min-height: 9rem;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.admin-support-page .support-attachment-preview img,
.admin-support-page .support-attachment-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.admin-support-page .support-attachment-preview img {
  object-fit: contain;
}

.admin-support-page .support-attachment-preview.empty {
  min-height: 6rem;
  color: #0B3D91;
}

.admin-support-page .support-attachment-preview.empty svg {
  width: 2rem;
  height: 2rem;
}

.admin-support-page .support-attachment-missing {
  display: grid;
  place-items: center;
  gap: 0.45rem;
  padding: 1rem;
  color: #991b1b;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 850;
}

.admin-support-page .support-attachment-missing svg {
  color: #b91c1c;
}

.admin-support-page .support-ticket-modal .support-action-form .btn,
.admin-support-page .support-ticket-modal .support-action-form .input {
  width: 100%;
}

.admin-support-page .support-ticket-card svg,
.admin-support-page .support-modal-head svg,
.admin-support-page .support-modal-section svg,
.admin-support-page .support-filter-panel svg,
.admin-support-page .support-queue-head svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

@media (max-width: 1100px) {
  .admin-support-page .support-filter-form,
  .admin-support-page .support-ticket-card,
  .admin-support-page .support-modal-layout {
    grid-template-columns: 1fr;
  }

  .admin-support-page .support-filter-form .btn,
  .admin-support-page .support-inline-form .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .admin-support-page .support-queue-head,
  .admin-support-page .support-modal-head,
  .admin-support-page .support-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-support-page .support-ticket-card {
    padding: 0.8rem;
  }

  .admin-support-page .support-inline-form,
  .admin-support-page .support-ticket-open-actions {
    grid-template-columns: 1fr;
  }

  .admin-support-page .support-ticket-modal {
    padding: 0.5rem;
  }

  .admin-support-page .support-ticket-modal-box {
    width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    border-radius: 16px;
  }

  .admin-support-page .support-modal-layout,
  .admin-support-page .support-modal-head {
    padding: 0.8rem;
  }
}

.admin-students-page .student-modal-box {
  width: min(920px, 96vw);
}

.admin-students-page .student-modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
}

.admin-students-page .student-modal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #0B3D91;
  font-size: 0.8rem;
  font-weight: 950;
}

.admin-students-page .student-modal-kicker svg {
  width: 1rem;
  height: 1rem;
}

.admin-students-page .student-modal-section {
  display: grid;
  gap: 0.65rem;
}

.admin-students-page .student-modal-section h4 {
  margin: 0;
  color: #111827;
  font-size: 0.98rem;
  font-weight: 950;
}

.admin-students-page .student-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-students-page .student-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.45rem 0.7rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f9fafb;
  color: #374151;
  font-weight: 800;
}

.admin-students-page .student-diploma-list,
.admin-students-page .student-transfer-list {
  display: grid;
  gap: 0.75rem;
}

.admin-students-page .student-diploma-card,
.admin-students-page .student-transfer-form {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.admin-students-page .student-diploma-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.admin-students-page .student-diploma-card strong,
.admin-students-page .student-transfer-current strong {
  display: block;
  color: #111827;
  font-weight: 950;
}

.admin-students-page .student-diploma-card small,
.admin-students-page .student-transfer-current small {
  display: block;
  margin-top: 0.25rem;
  color: #6b7280;
  font-size: 0.78rem;
  line-height: 1.6;
}

.admin-students-page .student-transfer-current {
  display: grid;
  gap: 0.2rem;
}

.admin-students-page .student-transfer-current > span,
.admin-students-page .student-transfer-form label > span {
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 900;
}

.admin-students-page .student-transfer-form label {
  display: grid;
  gap: 0.4rem;
}

.admin-students-page .student-transfer-form .select {
  width: 100%;
}

.admin-students-page .student-modal-actions {
  justify-content: flex-end;
  margin: 0;
}

.admin-students-page .student-empty-state {
  min-height: 10rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  border: 1px dashed #d1d5db;
  border-radius: 16px;
  background: #f9fafb;
  color: #6b7280;
  text-align: center;
}

.admin-students-page .student-empty-state svg {
  width: 2.25rem;
  height: 2.25rem;
  color: #0B3D91;
}

.admin-students-page .pagination-bar {
  margin-top: 16px;
}

.admin-coupons-page .coupons-table-card {
  max-width: 100%;
  overflow: hidden;
  container-name: coupons-list;
  container-type: inline-size;
}

.admin-coupons-page .coupons-table-card .table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior-inline: contain;
}

.admin-coupons-page .coupons-list-toolbar {
  align-items: flex-start;
  gap: 0.75rem;
}

.admin-coupons-page .coupon-filter-card {
  margin-top: 20px;
  display: grid;
  gap: 1rem;
  border-color: #dbeafe;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.admin-coupons-page .content {
  transform: none !important;
}

.admin-coupons-page .coupon-filter-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.admin-coupons-page .coupon-filter-header h3 {
  margin: 0;
  color: #111827;
  font-size: 1.05rem;
  font-weight: 950;
}

.admin-coupons-page .coupon-filter-header p {
  margin: 0.2rem 0 0;
}

.admin-coupons-page .coupon-filter-form {
  display: grid;
  gap: 0.85rem;
}

.admin-coupons-page .coupon-filter-fields {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(12rem, 16rem) auto;
  align-items: end;
  gap: 0.85rem;
}

.admin-coupons-page .coupon-filter-fields label {
  display: grid;
  gap: 0.4rem;
  color: #374151;
  font-weight: 850;
}

.admin-coupons-page .coupon-export-options {
  border-top: 1px solid #e6eefb;
  padding-top: 0.85rem;
}

.admin-coupons-page .coupon-export-options summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #111827;
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.admin-coupons-page .coupon-export-options summary::-webkit-details-marker {
  display: none;
}

.admin-coupons-page .coupon-export-options summary::marker {
  content: "";
}

.admin-coupons-page .coupon-export-options summary > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.admin-coupons-page .coupon-export-options summary small {
  color: #6b7280;
  font-size: 0.76rem;
  font-weight: 800;
}

.admin-coupons-page .coupon-export-column-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.admin-coupons-page .coupon-export-column {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 0.8rem;
  font-weight: 850;
}

.admin-coupons-page .coupon-export-column input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  accent-color: #0B3D91;
}

.admin-coupons-page .coupon-export-column span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-coupons-page .table-responsive > .coupons-compact-table.table {
  width: 100%;
  min-width: 70rem;
  table-layout: fixed;
}

.admin-coupons-page .coupons-compact-table th:nth-child(1) {
  width: 10%;
}

.admin-coupons-page .coupons-compact-table th:nth-child(2) {
  width: 19%;
}

.admin-coupons-page .coupons-compact-table th:nth-child(3) {
  width: 8%;
}

.admin-coupons-page .coupons-compact-table th:nth-child(4),
.admin-coupons-page .coupons-compact-table th:nth-child(5) {
  width: 12%;
}

.admin-coupons-page .coupons-compact-table th:nth-child(6) {
  width: 11%;
}

.admin-coupons-page .coupons-compact-table th:nth-child(7) {
  width: 12%;
}

.admin-coupons-page .coupons-compact-table th:nth-child(8),
.admin-coupons-page .coupons-compact-table th:nth-child(9) {
  width: 8%;
}

.admin-coupons-page .coupons-compact-table td {
  vertical-align: middle;
}

.admin-coupons-page .coupons-compact-table td small {
  display: block;
  margin-top: 0.25rem;
  color: #6b7280;
  line-height: 1.5;
}

.admin-coupons-page .coupon-actions-cell {
  position: sticky;
  inset-inline-end: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 8px 0 14px -12px rgba(15, 23, 42, 0.55);
  text-align: center;
}

.admin-coupons-page .coupons-compact-table th:last-child {
  position: sticky;
  inset-inline-end: 0;
  z-index: 3;
  background: #f8fafc;
  box-shadow: 8px 0 14px -12px rgba(15, 23, 42, 0.55);
}

.admin-coupons-page .coupon-action-menu {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  z-index: 1;
}

.admin-coupons-page .coupon-action-menu[open] {
  z-index: 40;
}

.admin-coupons-page .coupon-action-menu.menu-floating .coupon-action-menu-list {
  position: fixed !important;
  top: var(--action-menu-top, 0) !important;
  left: var(--action-menu-left, 0) !important;
  bottom: auto !important;
  inset-inline: auto !important;
  z-index: 90 !important;
}

.admin-coupons-page .coupon-action-menu summary {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #0B3D91;
  cursor: pointer;
  list-style: none;
}

.admin-coupons-page .coupon-action-menu-summary-label {
  display: none;
}

.admin-coupons-page .coupon-action-menu summary::-webkit-details-marker {
  display: none;
}

.admin-coupons-page .coupon-action-menu summary:hover,
.admin-coupons-page .coupon-action-menu[open] summary {
  border-color: rgba(11, 61, 145, 0.28);
  background: #f8fbff;
}

.admin-coupons-page .coupon-action-menu-list {
  position: absolute;
  bottom: calc(100% + 0.45rem);
  inset-inline-start: 0;
  inset-inline-end: auto;
  z-index: 45;
  width: min(15rem, calc(100vw - 2rem));
  display: grid;
  gap: 0.25rem;
  padding: 0.45rem;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
  text-align: right;
}

.admin-coupons-page .coupon-action-menu-list form {
  margin: 0;
}

.admin-coupons-page .coupon-action-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #1f2937;
  padding: 0.65rem 0.75rem;
  font-weight: 850;
  text-align: right;
  cursor: pointer;
}

.admin-coupons-page .coupon-action-menu-item:hover {
  background: #f3f7ff;
  color: #0B3D91;
}

.admin-coupons-page .coupon-action-menu-item.is-danger {
  color: #b91c1c;
}

.admin-coupons-page .coupon-action-menu-item.is-danger:hover {
  background: #fff1f2;
  color: #991b1b;
}

.admin-coupons-page .coupon-action-menu svg,
.admin-coupons-page .coupon-action-menu-item svg {
  width: 1.05rem;
  height: 1.05rem;
}

.admin-coupons-page .coupon-modal {
  z-index: 220;
}

.admin-coupons-page .coupon-modal-box {
  width: min(940px, 96vw);
}

.admin-coupons-page .coupon-create-modal {
  --diploma-modal-offset-top: 1rem;
  --diploma-modal-offset-bottom: 1rem;
}

.admin-coupons-page .coupon-create-modal-box {
  width: min(1040px, 96vw);
  max-height: min(calc(100dvh - 7rem), 820px);
}

.admin-coupons-page .coupon-modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
}

.admin-coupons-page .coupon-modal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #0B3D91;
  font-size: 0.8rem;
  font-weight: 950;
}

.admin-coupons-page .coupon-modal-kicker svg {
  width: 1rem;
  height: 1rem;
}

.admin-coupons-page .coupon-modal-section {
  display: grid;
  gap: 0.65rem;
}

.admin-coupons-page .coupon-modal-section h4 {
  margin: 0;
  color: #111827;
  font-size: 0.98rem;
  font-weight: 950;
}

.admin-coupons-page .coupon-details-name {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.admin-coupons-page .coupon-details-name strong {
  color: #111827;
  font-size: 1.1rem;
  font-weight: 950;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-coupons-page .coupon-details-name small {
  color: #6b7280;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-coupons-page .coupon-create-form {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
}

.admin-coupons-page .coupon-form-section {
  display: grid;
  gap: 0.75rem;
}

.admin-coupons-page .coupon-form-section h4 {
  margin: 0;
  color: #111827;
  font-size: 1rem;
  font-weight: 950;
}

.admin-coupons-page .coupon-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.admin-coupons-page .coupon-field {
  min-width: 0;
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.admin-coupons-page .coupon-field > span,
.admin-coupons-page .coupon-check-field > span {
  color: #374151;
  font-weight: 950;
}

.admin-coupons-page .coupon-field .input,
.admin-coupons-page .coupon-field .select,
.admin-coupons-page .coupon-field input,
.admin-coupons-page .coupon-field select,
.admin-coupons-page .coupon-field textarea {
  width: 100%;
  min-width: 0;
}

.admin-coupons-page .coupon-field-full {
  grid-column: 1 / -1;
}

.admin-coupons-page .coupon-check-field {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
}

.admin-coupons-page .coupon-check-field input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: #16a34a;
}

.admin-coupons-page .coupon-create-actions {
  position: sticky;
  bottom: -1.25rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
  padding-top: 0.85rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 28%);
}

.admin-coupons-page .coupon-edit-help {
  margin: -0.25rem 0 0;
  font-size: 0.82rem;
}

.admin-coupons-page .coupon-assignment-list {
  display: grid;
  gap: 0.75rem;
}

.admin-coupons-page .coupon-assignment-card {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.admin-coupons-page .coupon-assignment-card strong {
  display: block;
  color: #111827;
  font-weight: 950;
}

.admin-coupons-page .coupon-assignment-card small {
  display: block;
  margin-top: 0.25rem;
  color: #6b7280;
  font-size: 0.78rem;
  line-height: 1.6;
}

.admin-coupons-page .coupon-empty-state {
  min-height: 10rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  border: 1px dashed #d1d5db;
  border-radius: 16px;
  background: #f9fafb;
  color: #6b7280;
  text-align: center;
}

.admin-coupons-page .coupon-empty-state svg {
  width: 2.25rem;
  height: 2.25rem;
  color: #0B3D91;
}

.admin-coupons-page .coupon-confirm-box {
  width: min(520px, 96vw);
}

.admin-coupons-page .coupon-confirm-copy {
  margin: 0;
  color: #334155;
  line-height: 1.9;
}

.admin-coupons-page .coupon-confirm-code {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-inline: 0.2rem;
  color: #111827;
  word-break: break-word;
}

.admin-coupons-page .coupon-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
}

@container coupons-list (max-width: 64rem) {
  .admin-coupons-page .coupons-table-card .table-responsive {
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .admin-coupons-page .coupons-table-card .table-responsive > .coupons-compact-table.table,
  .admin-coupons-page .coupons-compact-table thead,
  .admin-coupons-page .coupons-compact-table tbody,
  .admin-coupons-page .coupons-compact-table tr,
  .admin-coupons-page .coupons-compact-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .admin-coupons-page .coupons-compact-table thead {
    display: none;
  }

  .admin-coupons-page .coupons-compact-table tbody {
    display: grid;
    gap: 0.8rem;
  }

  .admin-coupons-page .coupons-compact-table tr {
    display: grid;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    overflow: visible;
  }

  .admin-coupons-page .coupons-compact-table td {
    display: grid;
    grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid #eef2f7;
    text-align: start;
    word-break: break-word;
  }

  .admin-coupons-page .coupons-compact-table td:last-child {
    border-bottom: 0;
  }

  .admin-coupons-page .coupons-compact-table td::before {
    content: attr(data-label);
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 950;
  }

  .admin-coupons-page .coupons-compact-table td[colspan] {
    display: block;
    text-align: center;
  }

  .admin-coupons-page .coupons-compact-table td[colspan]::before {
    content: none;
  }

  .admin-coupons-page .coupon-actions-cell {
    position: static;
    inset: auto;
    z-index: auto;
    background: #fff;
    box-shadow: none;
    text-align: start;
  }

  .admin-coupons-page .coupon-action-menu {
    justify-self: start;
  }

  .admin-coupons-page .coupon-action-menu summary {
    width: auto;
    min-width: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding-inline: 0.75rem;
  }

  .admin-coupons-page .coupon-action-menu-summary-label {
    display: inline;
    font-size: 0.8rem;
    font-weight: 900;
  }
}

@media (max-width: 860px) {
  .admin-coupons-page .coupons-table-card {
    padding-inline: 0.9rem;
  }

  .admin-coupons-page .coupon-filter-header {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-coupons-page .coupon-filter-header .btn {
    width: 100%;
    justify-content: center;
  }

  .admin-coupons-page .coupon-filter-fields {
    grid-template-columns: 1fr;
  }

  .admin-coupons-page .coupon-filter-form .btn {
    width: 100%;
    justify-content: center;
  }

  .admin-coupons-page .coupon-export-options summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .admin-coupons-page .coupon-export-column-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-coupons-page .coupon-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-coupons-page .coupon-field-full {
    grid-column: auto;
  }

  .admin-coupons-page .coupons-list-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-coupons-page .coupons-list-toolbar h3,
  .admin-coupons-page .coupons-list-toolbar .muted {
    width: 100%;
  }

  .admin-coupons-page .coupons-table-card .table-responsive {
    overflow: visible;
  }

  .admin-coupons-page .coupons-table-card .table-responsive > .coupons-compact-table.table,
  .admin-coupons-page .coupons-compact-table thead,
  .admin-coupons-page .coupons-compact-table tbody,
  .admin-coupons-page .coupons-compact-table tr,
  .admin-coupons-page .coupons-compact-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .admin-coupons-page .coupons-compact-table thead {
    display: none;
  }

  .admin-coupons-page .coupons-compact-table tbody {
    display: grid;
    gap: 0.8rem;
  }

  .admin-coupons-page .coupons-compact-table tr {
    display: grid;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    overflow: visible;
  }

  .admin-coupons-page .coupons-compact-table td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid #eef2f7;
    text-align: start;
    word-break: break-word;
  }

  .admin-coupons-page .coupons-compact-table td:last-child {
    border-bottom: 0;
  }

  .admin-coupons-page .coupons-compact-table td::before {
    content: attr(data-label);
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 950;
  }

  .admin-coupons-page .coupons-compact-table td[colspan] {
    display: block;
    text-align: center;
  }

  .admin-coupons-page .coupons-compact-table td[colspan]::before {
    content: none;
  }

  .admin-coupons-page .coupon-actions-cell {
    position: static;
    inset: auto;
    z-index: auto;
    box-shadow: none;
    text-align: start;
  }

  .admin-coupons-page .coupon-action-menu {
    justify-self: start;
  }

  .admin-coupons-page .coupon-action-menu summary {
    width: auto;
    min-width: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding-inline: 0.75rem;
  }

  .admin-coupons-page .coupon-action-menu-summary-label {
    display: inline;
    font-size: 0.8rem;
    font-weight: 900;
  }

  .admin-coupons-page .coupon-action-menu-list {
    inset-inline-start: 0;
    inset-inline-end: auto;
  }

  .admin-coupons-page .pagination-bar {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .admin-coupons-page .coupon-modal-box {
    width: min(100%, calc(100vw - 1rem));
    max-height: calc(100dvh - 1rem);
    border-radius: 12px;
  }

  .admin-coupons-page .coupon-create-form {
    padding: 0.9rem;
  }

  .admin-coupons-page .coupon-create-actions {
    position: static;
    padding-top: 0.75rem;
    background: #fff;
  }

  .admin-coupons-page .coupon-create-actions .btn {
    flex: 1 1 8rem;
    justify-content: center;
  }

  .admin-coupons-page .coupon-field,
  .admin-coupons-page .coupon-check-field {
    padding: 0.8rem;
    border-radius: 10px;
  }

  .admin-coupons-page .coupon-modal-body {
    padding: 0.9rem;
  }

  .admin-coupons-page .coupon-assignment-card {
    padding: 0.85rem;
    border-radius: 10px;
  }

  .admin-coupons-page .coupon-confirm-actions .btn {
    flex: 1 1 9rem;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .admin-coupons-page .coupons-table-card {
    padding-inline: 0.75rem;
  }

  .admin-coupons-page .coupons-compact-table td {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .admin-coupons-page .coupon-action-menu {
    justify-self: stretch;
  }

  .admin-coupons-page .coupon-action-menu summary {
    width: 100%;
  }

  .admin-coupons-page .coupon-action-menu-list {
    width: min(100%, calc(100vw - 2rem));
  }

  .admin-coupons-page .pagination-bar .btn {
    flex: 1 1 8rem;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .admin-students-page .student-filter-card {
    padding: 1rem;
  }

  .admin-students-page .student-filter-row,
  .admin-students-page .student-filter-row-primary,
  .admin-students-page .student-filter-row-secondary {
    grid-template-columns: 1fr;
  }

  .admin-students-page .student-filter-actions {
    min-width: 0;
  }

  .admin-students-page .student-filter-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .admin-students-page .student-export-options summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .admin-students-page .student-export-column-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-students-page .students-compact-table th,
  .admin-students-page .students-compact-table td {
    padding-inline: 0.45rem;
    font-size: 0.78rem;
  }

  .admin-students-page .students-compact-table th:nth-child(2),
  .admin-students-page .students-compact-table td:nth-child(2) {
    display: none;
  }

  .admin-students-page .students-compact-table th:nth-child(1) {
    width: 36%;
  }

  .admin-students-page .students-compact-table th:nth-child(3) {
    width: 29%;
  }

  .admin-students-page .students-compact-table th:nth-child(4) {
    width: 18%;
  }

  .admin-students-page .students-compact-table th:nth-child(5) {
    width: 17%;
  }

  .admin-students-page .student-enrollment-summary span {
    padding-inline: 0.4rem;
  }

  .admin-students-page .student-diploma-card {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 721px) and (max-width: 1280px) {
  .admin-students-page .student-filter-row-primary,
  .admin-students-page .student-filter-row-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-students-page .student-filter-actions {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .admin-students-page .student-export-column-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-coupons-page .coupon-export-column-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .details-list {
    grid-template-columns: 1fr;
  }

  .details-list dt {
    padding-bottom: 0.3rem;
    border-bottom: 0;
  }

  .admin-students-page .student-export-column-grid {
    grid-template-columns: 1fr;
  }

  .admin-coupons-page .coupon-export-column-grid {
    grid-template-columns: 1fr;
  }

  .details-list dd {
    padding-top: 0.3rem;
  }
}

.input-validation-error,
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error,
.input.input-validation-error,
.select.input-validation-error,
.academy-required-missing:not(.select2-container) {
  border-color: #fb7185 !important;
  background: #fff7f7 !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12) !important;
}

.input-validation-error:focus,
input.input-validation-error:focus,
select.input-validation-error:focus,
textarea.input-validation-error:focus,
.academy-required-missing:not(.select2-container):focus {
  border-color: #e11d48 !important;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.16) !important;
}

.required-marker {
  color: #dc2626;
  font-weight: 900;
}

.academy-required-missing.select2-container .select2-selection--single,
.academy-required-missing.select2-container .select2-selection--multiple {
  border-color: #fb7185 !important;
  background: #fff7f7 !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12) !important;
}

.password-field {
  position: relative;
  display: block;
  width: 100%;
}

.password-field > input {
  width: 100%;
  padding-inline-end: 3rem !important;
}

.password-field.password-field--icon-left > input {
  padding-left: 3rem !important;
  padding-right: 0.75rem !important;
}

.password-toggle {
  position: absolute;
  top: 50%;
  inset-inline-end: 0.35rem;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  transform: translateY(-50%);
  border: 0;
  border-radius: 0.7rem;
  display: grid;
  place-items: center;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  z-index: 2;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  background: rgba(8, 42, 94, 0.08);
  color: #0B3D91;
}

.password-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.course-detail-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 4.5rem) 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(245, 158, 11, 0.18), transparent 30%),
    linear-gradient(135deg, #0B3D91 0%, #0D6EFD 52%, #082A5E 100%);
  color: #fff;
}

.course-detail-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.8fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.course-detail-copy {
  min-width: 0;
}

.course-detail-breadcrumb,
.course-detail-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  font-weight: 800;
}

.course-detail-breadcrumb svg {
  width: 0.9rem;
  height: 0.9rem;
}

.course-detail-badges,
.course-detail-actions,
.course-detail-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.course-detail-badges {
  margin-top: 1.25rem;
}

.course-detail-copy h1 {
  max-width: 14ch;
  margin: 1rem 0 0.75rem;
  font-size: clamp(2.2rem, 6vw, 4.8rem);
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: 0;
}

.course-detail-copy p {
  max-width: 44rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.9;
}

.course-detail-meta-strip {
  margin-top: 1.4rem;
}

.course-detail-meta-strip span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.86rem;
  font-weight: 800;
}

.course-detail-meta-strip svg {
  width: 1rem;
  height: 1rem;
  color: #fbbf24;
}

.course-detail-actions {
  margin-top: 1.75rem;
}

.course-detail-media-card {
  position: relative;
  overflow: hidden;
  min-height: clamp(20rem, 42vw, 31rem);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.5rem;
  background: #0B3D91;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}

.course-detail-media-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  opacity: 0.9;
}

.course-detail-price {
  position: absolute;
  inset-inline: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  background: rgba(8, 42, 94, 0.86);
  backdrop-filter: blur(14px);
}

.course-detail-price span,
.course-detail-list span {
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 800;
}

.course-detail-price span {
  color: rgba(255, 255, 255, 0.68);
}

.course-detail-price b {
  color: #fbbf24;
  font-size: 1.25rem;
}

.course-detail-section {
  background: #f9fafb;
}

.course-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  gap: 1.5rem;
  align-items: start;
}

.course-detail-main,
.course-detail-list {
  display: grid;
  gap: 1rem;
}

.course-detail-panel,
.course-detail-enroll {
  border: 1px solid #e5e7eb;
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04);
}

.course-detail-panel {
  padding: clamp(1.1rem, 3vw, 1.5rem);
}

.section-head.compact {
  margin-bottom: 1rem;
}

.course-detail-panel p {
  margin: 0;
  color: #374151;
  line-height: 2;
}

.course-detail-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.course-detail-feature-grid div {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #edf0f3;
  border-radius: 1rem;
  background: #f9fafb;
}

.course-detail-feature-grid svg,
.course-detail-list svg {
  width: 1.2rem;
  height: 1.2rem;
  color: #0B3D91;
}

.course-detail-feature-grid b {
  display: block;
  margin-top: 0.65rem;
  color: #111827;
  font-size: 0.95rem;
}

.course-detail-feature-grid span {
  display: block;
  margin-top: 0.35rem;
  color: #6b7280;
  font-size: 0.82rem;
  line-height: 1.7;
}

.course-detail-sidebar {
  position: sticky;
  top: 1rem;
}

.course-detail-enroll {
  padding: 1.2rem;
}

.course-detail-enroll h2 {
  margin: 0 0 1rem;
  color: #111827;
  font-size: 1.1rem;
  font-weight: 900;
}

.course-detail-price-line {
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(8, 42, 94, 0.08), rgba(245, 158, 11, 0.1));
}

.course-detail-price-line span {
  display: block;
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 800;
}

.course-detail-price-line b {
  display: block;
  margin-top: 0.25rem;
  color: #0B3D91;
  font-size: 1.6rem;
  font-weight: 950;
}

.course-detail-list {
  margin: 1rem 0;
}

.course-detail-list div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.course-detail-list div:last-child {
  border-bottom: 0;
}

.course-detail-list b {
  color: #111827;
  font-size: 0.86rem;
}

.course-detail-enroll .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 960px) {
  .course-detail-hero-grid,
  .course-detail-layout,
  .course-detail-feature-grid {
    grid-template-columns: 1fr;
  }

  .course-detail-sidebar {
    position: static;
  }
}

@media (max-width: 560px) {
  .course-detail-copy h1 {
    max-width: none;
  }

  .course-detail-actions .btn,
  .course-detail-meta-strip span {
    width: 100%;
    justify-content: center;
  }

  .course-detail-list div {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .course-detail-list b {
    grid-column: 2;
  }
}

.public-diploma-page {
  background: #F8FBFF;
}

.public-diploma-nav {
  background: rgba(255, 255, 255, 0.94);
}

.public-diploma {
  color: #111827;
}

.public-diploma-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: #0B3D91;
  color: #fff;
}

.public-diploma-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.52;
}

.public-diploma-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, rgba(5, 22, 13, 0.98) 0%, rgba(8, 42, 94, 0.9) 46%, rgba(8, 42, 94, 0.58) 100%),
    linear-gradient(to top, rgba(5, 22, 13, 0.82), rgba(5, 22, 13, 0.08) 48%);
}

.public-diploma-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  gap: 2rem;
  align-items: center;
  padding-block: 3.5rem;
}

.public-diploma-hero-copy {
  min-width: 0;
}

.public-diploma-breadcrumb,
.public-diploma-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.82rem;
  font-weight: 850;
}

.public-diploma-breadcrumb svg {
  width: 0.9rem;
  height: 0.9rem;
}

.public-diploma-badges,
.public-diploma-actions,
.public-diploma-stat-strip,
.public-diploma-lesson-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.public-diploma-badges {
  margin-top: 1.35rem;
}

.public-diploma-badges span,
.public-diploma-stat-strip div {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
}

.public-diploma-badges span {
  min-height: 2.2rem;
  padding: 0.4rem 0.72rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.public-diploma-badges .is-open,
.public-diploma-enroll-card > .is-open {
  color: #bbf7d0;
  border-color: rgba(77, 163, 255, 0.34);
}

.public-diploma-badges .is-closed,
.public-diploma-enroll-card > .is-closed {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.34);
}

.public-diploma-badges svg,
.public-diploma-stat-strip svg,
.public-diploma-actions svg {
  width: 1rem;
  height: 1rem;
}

.public-diploma-hero h1 {
  max-width: 16ch;
  margin: 1rem 0 0.85rem;
  font-size: 3.9rem;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: 0;
}

.public-diploma-hero-copy > p {
  max-width: 48rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.1rem;
  line-height: 2;
}

.public-diploma-stat-strip {
  margin-top: 1.55rem;
}

.public-diploma-stat-strip div {
  min-height: 4.7rem;
  min-width: 9.2rem;
  padding: 0.8rem 0.9rem;
  border-radius: 16px;
}

.public-diploma-stat-strip strong,
.public-diploma-stat-strip span {
  display: block;
}

.public-diploma-stat-strip strong {
  color: #fff;
  font-size: 1rem;
  font-weight: 950;
}

.public-diploma-stat-strip span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.75rem;
  font-weight: 800;
}

.public-diploma-stat-strip svg {
  color: #fbbf24;
}

.public-diploma-actions {
  margin-top: 1.7rem;
}

.public-diploma-hero-card {
  min-width: 0;
  display: grid;
  gap: 0.85rem;
  padding: 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.public-diploma-card-kicker,
.public-diploma-hero-card small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
  font-weight: 900;
}

.public-diploma-hero-card > strong {
  color: #fbbf24;
  font-size: 2rem;
  font-weight: 950;
  line-height: 1.25;
}

.public-diploma-hero-card > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.78rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.public-diploma-hero-card span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
  font-weight: 850;
}

.public-diploma-hero-card b {
  color: #fff;
  font-size: 0.92rem;
}

.public-diploma-overview {
  padding: 2rem 0 4rem;
}

.public-diploma-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
  gap: 1.25rem;
  align-items: start;
}

.public-diploma-main {
  min-width: 0;
  display: grid;
  gap: 1.1rem;
}

.public-diploma-panel,
.public-diploma-enroll-card,
.public-diploma-side-card {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.public-diploma-panel {
  padding: 1.25rem;
}

.public-diploma-section-head {
  margin-bottom: 1rem;
}

.public-diploma-section-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.62rem;
  border: 1px solid rgba(8, 42, 94, 0.11);
  border-radius: 999px;
  background: #EAF3FF;
  color: #0B3D91;
  font-size: 0.74rem;
  font-weight: 950;
}

.public-diploma-section-head h2 {
  margin: 0.55rem 0 0;
  color: #111827;
  font-size: 1.45rem;
  font-weight: 950;
  line-height: 1.35;
}

.public-diploma-summary-panel > p,
.public-diploma-richtext,
.public-diploma-richtext p {
  color: #374151;
  font-size: 0.96rem;
  line-height: 2;
}

.public-diploma-summary-panel > p {
  margin: 0;
}

.public-diploma-richtext :is(ul, ol) {
  margin: 0;
  padding-inline-start: 1.25rem;
  color: #374151;
  line-height: 2;
}

.public-diploma-richtext li + li {
  margin-top: 0.35rem;
}

.public-diploma-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

.public-diploma-detail-grid div {
  min-width: 0;
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem;
  border: 1px solid #edf2f7;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.public-diploma-detail-grid svg {
  width: 1.1rem;
  height: 1.1rem;
  color: #0B3D91;
}

.public-diploma-detail-grid span,
.public-diploma-facts dt {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 900;
}

.public-diploma-detail-grid strong,
.public-diploma-facts dd {
  min-width: 0;
  margin: 0;
  color: #111827;
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1.55;
}

.public-diploma-curriculum {
  overflow: hidden;
}

.public-diploma-curriculum-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.public-diploma-curriculum-counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.public-diploma-curriculum-counts span {
  min-height: 2.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 850;
}

.public-diploma-curriculum-counts b {
  color: #0B3D91;
}

.public-diploma-subject-stack {
  display: grid;
  gap: 0.8rem;
}

.public-diploma-subject {
  border: 1px solid #e6edf3;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.public-diploma-subject[open] {
  border-color: rgba(8, 42, 94, 0.2);
  box-shadow: 0 14px 34px rgba(8, 42, 94, 0.08);
}

.public-diploma-subject summary {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
  list-style: none;
}

.public-diploma-subject summary::-webkit-details-marker {
  display: none;
}

.public-diploma-subject-number {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: #0B3D91;
  color: #fff;
  font-weight: 950;
}

.public-diploma-subject h3 {
  margin: 0;
  color: #111827;
  font-size: 1.03rem;
  font-weight: 950;
  line-height: 1.55;
}

.public-diploma-subject summary p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin: 0.28rem 0 0;
}

.public-diploma-subject summary p span {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  padding: 0 0.48rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 850;
}

.public-diploma-subject summary > svg {
  width: 1.1rem;
  height: 1.1rem;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.public-diploma-subject[open] summary > svg {
  transform: rotate(-90deg);
  color: #0B3D91;
}

.public-diploma-subject-body {
  display: grid;
  gap: 1rem;
  padding: 0 1rem 1rem;
}

.public-diploma-subject-description {
  margin: 0;
  padding: 1rem;
  border-radius: 14px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.92rem;
  line-height: 2;
}

.public-diploma-lesson-list {
  display: grid;
  gap: 0.65rem;
}

.public-diploma-lesson {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid #edf2f7;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fbfcfd);
}

.public-diploma-lesson > span {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: #EAF3FF;
  color: #0B3D91;
  font-size: 0.8rem;
  font-weight: 950;
}

.public-diploma-lesson h4 {
  margin: 0;
  color: #111827;
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1.55;
}

.public-diploma-lesson p {
  margin: 0.35rem 0 0;
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.85;
}

.public-diploma-lesson-meta {
  margin-top: 0.55rem;
}

.public-diploma-lesson-meta small {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: 1.7rem;
  padding: 0 0.52rem;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 850;
}

.public-diploma-lesson-meta .is-preview {
  background: #fffbeb;
  color: #b45309;
}

.public-diploma-lesson-meta svg {
  width: 0.82rem;
  height: 0.82rem;
}

.public-diploma-empty {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 1.4rem;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  text-align: center;
}

.public-diploma-empty.compact {
  padding: 1rem;
  justify-items: start;
  text-align: start;
}

.public-diploma-empty svg {
  width: 1.5rem;
  height: 1.5rem;
  color: #0B3D91;
}

.public-diploma-empty strong {
  color: #111827;
}

.public-diploma-empty p {
  margin: 0;
  color: #64748b;
}

.public-diploma-timeline-list {
  display: grid;
  gap: 0.8rem;
}

.public-diploma-timeline-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(7rem, auto);
  gap: 0.75rem;
  align-items: start;
  padding: 0.9rem;
  border: 1px solid #edf2f7;
  border-radius: 14px;
  background: #f8fafc;
}

.public-diploma-timeline-list article > span {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: #0B3D91;
  color: #fff;
}

.public-diploma-timeline-list svg {
  width: 1rem;
  height: 1rem;
}

.public-diploma-timeline-list h3 {
  margin: 0;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 950;
}

.public-diploma-timeline-list p {
  margin: 0.25rem 0 0;
  color: #64748b;
  font-size: 0.84rem;
  line-height: 1.8;
}

.public-diploma-timeline-list strong {
  color: #0B3D91;
  font-size: 0.82rem;
  text-align: end;
}

.public-diploma-sidebar {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 1rem;
}

.public-diploma-enroll-card,
.public-diploma-side-card {
  padding: 1rem;
}

.public-diploma-enroll-card {
  display: grid;
  gap: 0.7rem;
}

.public-diploma-enroll-card > span {
  justify-self: start;
  min-height: 1.8rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.6rem;
  border: 1px solid;
  border-radius: 999px;
  background: #f8fafc;
  font-size: 0.76rem;
  font-weight: 950;
}

.public-diploma-enroll-card h2 {
  margin: 0;
  color: #0B3D91;
  font-size: 1.9rem;
  font-weight: 950;
  line-height: 1.25;
}

.public-diploma-enroll-card p {
  margin: 0;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 800;
}

.public-diploma-enroll-card .btn,
.public-diploma-hero-card .btn {
  width: 100%;
  justify-content: center;
}

.public-diploma-side-card h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 950;
}

.public-diploma-side-card h3 svg {
  width: 1rem;
  height: 1rem;
  color: #0B3D91;
}

.public-diploma-subject-index {
  max-height: 22rem;
  display: grid;
  gap: 0.5rem;
  overflow: auto;
  padding-inline-end: 0.25rem;
}

.public-diploma-subject-index a {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  padding: 0.6rem;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  background: #fff;
}

.public-diploma-subject-index span {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: #EAF3FF;
  color: #0B3D91;
  font-size: 0.74rem;
  font-weight: 950;
}

.public-diploma-subject-index b {
  min-width: 0;
  color: #111827;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-diploma-subject-index small {
  grid-column: 2;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.public-diploma-facts {
  display: grid;
  gap: 0;
  margin: 0;
}

.public-diploma-facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.public-diploma-facts div:last-child {
  border-bottom: 0;
}

@media (max-width: 1080px) {
  .public-diploma-hero-inner,
  .public-diploma-layout,
  .public-diploma-detail-grid {
    grid-template-columns: 1fr;
  }

  .public-diploma-sidebar {
    position: static;
  }

  .public-diploma-subject-index {
    max-height: none;
  }
}

@media (max-width: 680px) {
  .public-diploma-hero {
    min-height: auto;
  }

  .public-diploma-hero-inner {
    gap: 1rem;
    align-items: start;
    padding-block: 1.15rem 1.25rem;
  }

  .public-diploma-breadcrumb {
    display: none;
  }

  .public-diploma-badges {
    margin-top: 0;
    gap: 0.45rem;
  }

  .public-diploma-hero h1 {
    max-width: none;
    margin: 0.8rem 0 0.55rem;
    font-size: 2rem;
    line-height: 1.22;
  }

  .public-diploma-hero-copy > p {
    font-size: 0.92rem;
    line-height: 1.8;
  }

  .public-diploma-stat-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 1rem;
  }

  .public-diploma-stat-strip div,
  .public-diploma-badges span {
    justify-content: flex-start;
  }

  .public-diploma-badges span {
    min-height: 1.85rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
  }

  .public-diploma-stat-strip div {
    width: auto;
    min-width: 0;
    min-height: 4rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: 0.62rem;
    border-radius: 14px;
  }

  .public-diploma-stat-strip svg {
    grid-row: span 2;
  }

  .public-diploma-stat-strip strong,
  .public-diploma-stat-strip span {
    min-width: 0;
  }

  .public-diploma-stat-strip strong {
    font-size: 0.92rem;
    line-height: 1.35;
  }

  .public-diploma-stat-strip span {
    font-size: 0.69rem;
    line-height: 1.45;
  }

  .public-diploma-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .public-diploma-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .public-diploma-hero-card {
    gap: 0.65rem;
    padding: 0.9rem;
    border-radius: 14px;
  }

  .public-diploma-hero-card > strong {
    font-size: 1.45rem;
  }

  .public-diploma-hero-card > div {
    gap: 0.45rem;
    flex-wrap: wrap;
    padding: 0.55rem 0;
  }

  .public-diploma-overview {
    padding: 1rem 0 2.25rem;
  }

  .public-diploma-layout,
  .public-diploma-main {
    gap: 0.8rem;
  }

  .public-diploma-panel,
  .public-diploma-enroll-card,
  .public-diploma-side-card {
    border-radius: 14px;
  }

  .public-diploma-panel {
    padding: 1rem;
  }

  .public-diploma-section-head {
    margin-bottom: 0.75rem;
  }

  .public-diploma-section-head h2 {
    font-size: 1.18rem;
    line-height: 1.45;
  }

  .public-diploma-summary-panel > p,
  .public-diploma-richtext,
  .public-diploma-richtext p {
    font-size: 0.9rem;
    line-height: 1.85;
  }

  .public-diploma-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .public-diploma-detail-grid div {
    padding: 0.72rem;
  }

  .public-diploma-detail-grid strong,
  .public-diploma-facts dd {
    font-size: 0.8rem;
  }

  .public-diploma-curriculum-head,
  .public-diploma-timeline-list article {
    grid-template-columns: 1fr;
  }

  .public-diploma-curriculum-head {
    display: grid;
  }

  .public-diploma-curriculum-counts {
    justify-content: flex-start;
  }

  .public-diploma-subject summary {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.78rem;
  }

  .public-diploma-subject-number {
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 10px;
  }

  .public-diploma-subject h3 {
    font-size: 0.94rem;
    line-height: 1.45;
  }

  .public-diploma-subject-body {
    gap: 0.75rem;
    padding: 0 0.78rem 0.78rem;
  }

  .public-diploma-subject-description,
  .public-diploma-lesson {
    border-radius: 12px;
  }

  .public-diploma-subject-description {
    padding: 0.78rem;
    font-size: 0.86rem;
    line-height: 1.8;
  }

  .public-diploma-lesson {
    gap: 0.6rem;
    padding: 0.75rem;
  }

  .public-diploma-subject summary > svg {
    display: none;
  }

  .public-diploma-timeline-list strong {
    text-align: start;
  }
}

/* Messages page refinement */
.messages-page {
  --msg-panel: #ffffff;
  --msg-border: #e5e7eb;
  --msg-muted: #64748b;
  --msg-primary: #0B3D91;
  --msg-accent: #f59e0b;
}

.messages-page .messages-workspace {
  margin-top: 1.15rem;
  align-items: stretch;
}

.messages-page .messages-layout,
.messages-page .portal-direct-desk {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 12px;
  min-height: calc(100vh - 220px);
  color: #0f172a;
}

.messages-page .messages-summary {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.messages-page .messages-summary div {
  min-height: 5rem;
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.messages-page .messages-summary span,
.messages-page .thread-subject,
.messages-page .empty-inline {
  color: var(--msg-muted);
}

.messages-page .thread-list .empty-inline {
  width: 100%;
  margin: 0;
  padding: 1rem;
  text-align: center;
}

.messages-page .messages-summary strong {
  display: block;
  margin-top: 0.25rem;
  color: #111827;
  font-size: 1.75rem;
  line-height: 1;
}

.messages-page .thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0;
}

.messages-page .thread-head.spaced {
  margin-top: 0.75rem;
}

.messages-page .thread-list {
  display: grid;
  gap: 0;
  padding: 0;
}

.messages-page .thread-person,
.messages-page .thread-subject {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-page .thread-person {
  color: #111827;
  font-weight: 900;
}

.messages-page .msg-thread small {
  display: inline-flex;
  margin-top: 0.45rem;
  padding: 0.16rem 0.52rem;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 900;
}

.messages-page .pager-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 1rem 1rem;
  color: var(--msg-muted);
  font-size: 0.85rem;
}

.messages-page .message-detail {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.messages-page .message-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px;
  background: #f8fafc;
}

.messages-page .message-detail-head span {
  display: block;
  color: var(--msg-primary);
  font-weight: 900;
}

.messages-page .message-participant-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.messages-page .message-participant-link:hover {
  color: #0f4f8a;
}

.messages-page .message-detail-head h2 {
  margin: 0.25rem 0;
  color: #111827;
  font-size: 1.25rem;
}

.messages-page .message-history {
  display: flex;
  flex: 1;
  min-height: 0;
  max-height: none;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  padding: 14px;
  background: #f8fafc;
  scrollbar-gutter: stable;
}

.messages-page .message-row {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.messages-page .message-row.incoming {
  justify-content: flex-start;
}

.messages-page .message-row.outgoing {
  justify-content: flex-end;
}

.messages-page .message-bubble {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  padding: 7px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.messages-page .message-bubble strong {
  display: block;
  margin-bottom: 0;
  color: #111827;
  font-size: 0.8rem;
}

.messages-page .message-bubble p {
  margin: 0;
  color: #1f2937;
}

.messages-page .message-bubble small {
  display: block;
  margin-top: 1px;
  color: #64748b;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
}

.messages-page .message-bubble.outgoing {
  align-self: flex-end;
  border-color: #bfdbfe;
  border-radius: 8px;
  background: #dbeafe;
  color: #0f172a;
}

.messages-page .message-bubble.outgoing strong,
.messages-page .message-bubble.outgoing p {
  color: #0f172a;
}

.messages-page .message-bubble.outgoing small {
  color: #64748b;
}

.messages-page .reply-form,
.messages-page .new-message-form {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
}

.messages-page .reply-form {
  margin-top: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 12px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: none;
}

.messages-page .reply-form label,
.messages-page .new-message-form label {
  color: #111827;
  font-weight: 900;
}

.messages-page .new-message-form h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: #111827;
  font-size: 1rem;
}

.messages-page .portal-support-panel,
.messages-page .portal-support-chat {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.messages-page .portal-support-head,
.messages-page .portal-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.messages-page .portal-support-head h2,
.messages-page .portal-chat-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
}

.messages-page .portal-support-head p,
.messages-page .portal-chat-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

.messages-page .portal-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.messages-page .portal-support-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
}

.messages-page .portal-support-filters input,
.messages-page .new-message-form input,
.messages-page .new-message-form select,
.messages-page .new-message-form textarea,
.messages-page .portal-composer textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  outline: 0;
}

.messages-page .portal-support-filters input,
.messages-page .new-message-form input,
.messages-page .new-message-form select {
  min-height: 38px;
  padding: 8px 10px;
}

.messages-page .new-message-form textarea {
  min-height: 48px;
  max-height: 140px;
  resize: vertical;
  padding: 10px 12px;
}

.messages-page .portal-composer textarea {
  min-height: 40px;
  max-height: 110px;
  resize: vertical;
  padding: 8px 10px;
}

.messages-page .portal-mobile-secondary-btn,
.messages-page .portal-send-btn,
.messages-page .portal-action-btn,
.messages-page .portal-mobile-back-btn,
.messages-page .portal-text-btn {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
}

.messages-page .portal-mobile-secondary-btn,
.messages-page .portal-send-btn,
.messages-page .portal-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  color: #ffffff;
  background: #0b4a84;
}

.messages-page .portal-mobile-secondary-btn {
  min-height: 56px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 16px;
}

.messages-page .portal-support-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.messages-page .portal-conversation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: start;
  min-height: 128px;
  max-height: 128px;
  width: 100%;
  padding: 18px 18px 16px;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
  overflow: hidden;
}

.messages-page .portal-conversation:hover,
.messages-page .portal-conversation.active {
  background: #eff6ff;
}

.messages-page .portal-conversation h3 {
  margin: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-page .portal-conversation-meta,
.messages-page .portal-conversation-preview,
.messages-page .portal-conversation-time {
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

.messages-page .portal-conversation-preview {
  grid-column: 1 / -1;
  overflow: hidden;
  display: -webkit-box;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.messages-page .portal-conversation-meta {
  overflow: hidden;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-page .portal-conversation small {
  grid-column: 1 / -1;
  justify-self: stretch;
  display: block;
  height: 28px;
  overflow: hidden;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 900;
  line-height: 28px;
  text-align: center;
}

.messages-page .portal-thread {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  background: #f8fafc;
}

.messages-page .portal-message.mine {
  justify-content: flex-start;
}

.messages-page .portal-message.theirs {
  justify-content: flex-end;
}

.messages-page .portal-avatar {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0b4a84;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.messages-page .portal-message-card {
  width: fit-content;
  max-width: min(34rem, 58%);
  flex: 0 1 auto;
}

.messages-page .portal-message-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  color: #475569;
  font-size: 11px;
}

.messages-page .portal-message-text {
  white-space: pre-wrap;
}

.messages-page .portal-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border-top: 1px solid #e2e8f0;
}

.messages-page .portal-composer label {
  grid-column: 1 / -1;
}

.messages-page .portal-composer button {
  min-height: 42px;
  align-self: stretch;
}

.messages-page .portal-composer .validation-summary {
  grid-column: 1 / -1;
}

.messages-page .thread-head {
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}

.messages-page .pager-row {
  border-bottom: 1px solid #e2e8f0;
  padding-top: 0.75rem;
  background: #ffffff;
}

.message-modal-open {
  overflow: hidden;
}

.messages-page .message-modal[hidden] {
  display: none;
}

.messages-page .message-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.messages-page .message-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(4px);
}

.messages-page .message-modal-card {
  position: relative;
  z-index: 1;
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(42rem, calc(100dvh - 2rem));
  overflow: auto;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.messages-page .message-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.messages-page .message-modal-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1.1rem;
  font-weight: 900;
}

.messages-page .message-modal-head p {
  margin: 0.25rem 0 0;
  color: #64748b;
  font-size: 0.85rem;
  line-height: 1.7;
}

.messages-page .message-modal-close {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: #e0f2fe;
  color: #0b4a84;
  cursor: pointer;
}

.messages-page .message-modal-form {
  padding: 1rem;
}

.instructor-v12 .messages-page .message-modal-form textarea {
  min-height: 160px;
  height: 160px;
  max-height: none;
}

.messages-page .message-modal-form .validation-summary,
.messages-page .message-field-validation {
  color: #b42318;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.6;
}

.messages-page .message-modal-form .validation-summary:empty,
.messages-page .message-field-validation:empty {
  display: none;
}

.messages-page .message-field-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.messages-page .message-required-label {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding-inline: 0.45rem;
  border-radius: 999px;
  color: #9f1d1d;
  background: #fee2e2;
  font-size: 0.7rem;
  font-weight: 900;
}

.messages-page .message-modal-form .input-validation-error,
.messages-page .message-modal-form :invalid:not(:placeholder-shown) {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.messages-page .message-modal-form button[type="submit"] {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.student-v8 .messages-page .v11-chat {
  grid-template-columns: minmax(18rem, 0.36fr) minmax(0, 1fr);
  min-height: 640px;
}

.instructor-v12 .messages-page .msg-shell {
  grid-template-columns: minmax(19rem, 0.72fr) minmax(0, 1.28fr);
  height: auto;
  min-height: 42rem;
}

.messages-page .message-thread-panel,
.messages-page .message-chat-panel {
  border-color: rgba(15, 23, 42, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.82)),
    var(--msg-panel) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07) !important;
}

.messages-page .message-thread-panel {
  min-height: 0;
}

.messages-page .message-chat-panel {
  min-width: 0;
}

.messages-page .msg-thread,
.messages-page .mini-item,
.messages-page .v11-chat-list a,
.messages-page .v11-chat-list button {
  position: relative;
  border: 1px solid transparent;
  min-width: 0;
  border-radius: 16px;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.messages-page .v11-chat-list a,
.messages-page .v11-chat-list button {
  display: block;
  width: calc(100% - 2rem);
  margin: 0.45rem 1rem;
  padding: 0.95rem 1rem;
  text-align: start;
}

.messages-page .msg-thread:hover,
.messages-page .mini-item:hover,
.messages-page .v11-chat-list a:hover,
.messages-page .v11-chat-list button:hover {
  transform: translateY(-1px);
  border-color: rgba(8, 42, 94, 0.18) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07);
}

.messages-page .msg-thread.active,
.messages-page .mini-item.active,
.messages-page .v11-chat-list a.active,
.messages-page .v11-chat-list button.active {
  border-color: rgba(8, 42, 94, 0.24) !important;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.95), rgba(240, 253, 250, 0.78)) !important;
  box-shadow: inset 4px 0 0 var(--msg-primary), 0 14px 28px rgba(8, 42, 94, 0.08);
}

.messages-page .mini-list,
.messages-page .inst-list,
.messages-page .v11-chat-list {
  scrollbar-gutter: stable;
}

.messages-page .mini-item strong,
.messages-page .msg-thread b,
.messages-page .v11-chat-list b {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #111827;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-page .mini-item p,
.messages-page .msg-thread p,
.messages-page .v11-chat-list span {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--msg-muted) !important;
  line-height: 1.7;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-page .message-chat-panel h3,
.messages-page .message-thread-panel h3 {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.messages-page .msg-body,
.messages-page .v11-bubbles,
.messages-page .message-chat-panel .mini-list {
  border: 1px solid rgba(226, 232, 240, 0.85);
  background:
    radial-gradient(circle at 12% 14%, rgba(245, 158, 11, 0.08), transparent 28%),
    linear-gradient(180deg, #f8fafc, #ffffff);
}

.messages-page .msg-bubble,
.messages-page .v11-bubbles p,
.messages-page .v11-bubbles > .other,
.messages-page .v11-bubbles > .me,
.messages-page .message-chat-panel .mini-item {
  overflow-wrap: anywhere;
  line-height: 1.85;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.messages-page .v11-bubbles > .other,
.messages-page .v11-bubbles > .me {
  max-width: 65%;
  padding: 0.85rem 1rem;
  border-radius: 20px;
  margin: 0;
}

.messages-page .msg-bubble.me,
.messages-page .v11-bubbles .me {
  background: linear-gradient(135deg, #0B3D91, #0A58CA) !important;
  color: #ffffff;
}

.messages-page .msg-bubble small,
.messages-page .v11-chat-window header span,
.messages-page .message-chat-panel small {
  color: var(--msg-muted);
  font-weight: 800;
}

.messages-page form select,
.messages-page form input,
.messages-page form textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid #dbe3ea;
  border-radius: 14px;
  background: #ffffff;
  color: #111827;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.messages-page form textarea {
  min-height: 96px;
  line-height: 1.8;
  resize: vertical;
}

.messages-page form select:focus,
.messages-page form input:focus,
.messages-page form textarea:focus {
  border-color: rgba(8, 42, 94, 0.45);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(8, 42, 94, 0.1);
}

.messages-page .admin-message-workspace {
  grid-template-columns: minmax(19rem, 0.78fr) minmax(0, 1.22fr);
  margin-top: 20px;
  align-items: stretch;
}

.messages-page-admin .message-chat-panel,
.messages-page-admin .message-thread-panel {
  min-height: 34rem;
}

@media (max-width: 1024px) {
  .student-v8 .messages-page .v11-chat,
  .instructor-v12 .messages-page .msg-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .messages-page .admin-message-workspace {
    grid-template-columns: 1fr;
  }

  .messages-page-admin .message-chat-panel,
  .messages-page-admin .message-thread-panel {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .messages-page .message-thread-panel,
  .messages-page .message-chat-panel {
    border-radius: 16px !important;
  }

  .messages-page .messages-metrics {
    gap: 0.85rem;
  }
}

.empty-state,
.v8-empty,
.inst-empty {
  border: 1px dashed #d1d5db;
  border-radius: 18px;
  padding: clamp(1rem, 3vw, 2rem);
  text-align: center;
  background: #fff;
}

.admin-user-form {
  display: grid;
  gap: 1rem;
}

.admin-user-form.compact {
  max-width: 620px;
}

.admin-user-hero {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 22px;
  overflow: hidden;
  color: hsl(var(--primary-foreground));
  background: var(--theme-gradient);
  box-shadow: var(--shadow-xl);
}

.admin-user-hero span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
  color: var(--theme-primary-light);
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-user-hero h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.3;
  font-weight: 950;
}

.admin-user-hero p {
  max-width: 680px;
  margin: 0.45rem 0 0;
  color: var(--theme-primary-light);
  line-height: 1.8;
}

.admin-user-hero-icon {
  width: 4.75rem;
  height: 4.75rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.admin-user-hero-icon svg {
  width: 2.35rem;
  height: 2.35rem;
}

.admin-user-section {
  padding: 0;
  overflow: hidden;
}

.admin-user-section:hover {
  transform: none;
}

.admin-user-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
  background: var(--theme-primary-light);
}

.admin-user-section-head h2 {
  margin: 0;
  color: var(--theme-primary-navy);
  font-size: 1rem;
  font-weight: 900;
}

.admin-user-section-head p {
  margin: 0.25rem 0 0;
  color: var(--theme-primary-dark);
}

.admin-user-section-head > svg {
  width: 2.45rem;
  height: 2.45rem;
  padding: 0.62rem;
  border-radius: 0.9rem;
  color: var(--theme-primary-dark);
  background: hsl(var(--primary) / .08);
}

.admin-user-section-body {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

.admin-user-grid {
  display: grid;
  gap: 1rem;
}

.admin-user-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-user-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-user-field {
  min-width: 0;
  display: grid;
  gap: 0.45rem;
}

.admin-user-field label {
  color: var(--theme-primary-navy);
  font-weight: 850;
}

.admin-user-field .input {
  width: 100%;
  min-height: 44px;
  background: hsl(var(--card));
  caret-color: var(--theme-primary-dark);
}

.admin-user-field .input:focus {
  border-color: var(--theme-primary-dark);
}

.admin-user-field .input.input-validation-error {
  border-color: hsl(var(--destructive));
}

.admin-user-field span[data-valmsg-for] {
  min-height: 1.1rem;
  color: hsl(var(--destructive));
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-user-password {
  max-width: 520px;
}

.admin-user-toggle-grid,
.admin-user-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.admin-user-toggle,
.admin-user-role {
  min-height: 74px;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem;
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--card));
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.admin-user-toggle:hover,
.admin-user-role:hover {
  border-color: var(--theme-primary-dark);
  background: var(--theme-primary-light);
  transform: none;
}

.admin-user-toggle input,
.admin-user-role input {
  width: 1.08rem;
  height: 1.08rem;
  margin-top: 0.2rem;
  flex: 0 0 auto;
  accent-color: var(--theme-primary-dark);
}

.admin-user-toggle:has(input:checked),
.admin-user-role:has(input:checked) {
  border-color: var(--theme-primary-dark);
  background: var(--theme-primary-light);
}

.admin-user-toggle:hover small,
.admin-user-role:hover small,
.admin-user-toggle:has(input:checked) small,
.admin-user-role:has(input:checked) small {
  color: var(--theme-primary-dark);
}

.admin-user-toggle:has(input:focus-visible),
.admin-user-role:has(input:focus-visible) {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}

.admin-user-toggle b,
.admin-user-role b {
  display: block;
  color: var(--theme-primary-navy);
  font-size: 0.9rem;
  font-weight: 900;
}

.admin-user-toggle small,
.admin-user-role small {
  display: block;
  margin-top: 0.2rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.76rem;
  line-height: 1.55;
}

.admin-user-actions {
  position: sticky;
  bottom: 0.8rem;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--card));
  box-shadow: var(--shadow-md);
}

.admin-reset-password {
  max-width: 680px;
}

.admin-reset-password-modal {
  --diploma-modal-offset-top: clamp(2rem, 6vh, 4rem);
}

.admin-reset-password-modal-box {
  width: min(30rem, calc(100vw - 2rem));
}

.admin-reset-password-modal-head {
  padding: 0.95rem 1rem;
}

.admin-reset-password-modal-head p {
  margin: 0.4rem 0 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.6;
}

.admin-reset-password-modal-head p b {
  color: #334155;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.admin-reset-password-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #0B3D91;
  font-size: 0.75rem;
  font-weight: 900;
}

.admin-reset-password-kicker svg {
  width: 0.95rem;
  height: 0.95rem;
}

.admin-reset-password-form {
  gap: 0.75rem;
  overflow-y: auto;
  padding: 1rem;
}

.admin-reset-password-summary {
  margin: 0;
}

.admin-reset-password-note {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #dbeafe;
  border-radius: 13px;
  background: #eff6ff;
  color: #1e3a5f;
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1.5;
}

.admin-reset-password-note svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  margin-top: 0.2rem;
  color: #0B3D91;
}

.admin-password-control {
  position: relative;
}

.admin-password-control .input {
  padding-inline-end: 3.25rem;
}

.admin-password-control input::-ms-reveal,
.admin-password-control input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.admin-password-toggle {
  position: absolute;
  inset-inline-end: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #f1f5f9;
  color: #475569;
  cursor: pointer;
  font: inherit;
}

.admin-password-toggle:hover,
.admin-password-toggle:focus-visible {
  color: #0B3D91;
  background: #e2e8f0;
  outline: none;
}

.admin-password-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(11, 61, 145, 0.14);
}

.admin-password-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
}

.admin-password-icon-hide,
.admin-password-toggle[aria-pressed="true"] .admin-password-icon-show {
  display: none;
}

.admin-password-toggle[aria-pressed="true"] .admin-password-icon-hide {
  display: block;
}

.admin-reset-password-form .admin-user-field > small {
  color: #64748b;
  font-size: 0.75rem;
}

.admin-reset-password-actions {
  margin: 0.1rem -1rem -1rem;
  padding: 0.75rem 1rem;
}

.admin-reset-password-actions .btn.is-loading {
  cursor: wait;
  opacity: 0.78;
}

@media (max-width: 560px) {
  .admin-reset-password-modal {
    --diploma-modal-offset-top: 1rem;
    --diploma-modal-offset-bottom: 1rem;
    padding: 0.75rem;
  }

  .admin-reset-password-modal-box {
    width: 100%;
  }

  .admin-reset-password-modal-head,
  .admin-reset-password-form {
    padding-inline: 1rem;
  }

  .admin-reset-password-actions {
    margin-inline: -1rem;
    padding-inline: 1rem;
  }
}

@media (max-width: 768px) {
  .topnav .toolbar,
  .topbar .toolbar,
  .page-title + .toolbar {
    width: 100%;
    justify-content: stretch;
  }

  .topnav .toolbar .btn,
  .topbar .toolbar .btn,
  .page-title + .toolbar .btn {
    flex: 1 1 auto;
  }

  .section {
    padding-block: 44px;
  }

  .section-head h2 {
    font-size: 26px;
  }

  .content {
    padding: 14px;
  }

  .hero-banner,
  .v9-source-hero,
  .inst-hero {
    min-height: 190px;
    border-radius: 18px;
  }

  .course-card,
  .v8-card,
  .inst-card,
  .clone-card {
    border-radius: 16px;
  }

  .admin-user-grid.two,
  .admin-user-grid.three,
  .admin-user-toggle-grid,
  .admin-user-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .nav-inner,
  .topbar,
  .section-head,
  .card-title-row,
  .v8-card-head,
  .inst-page-head,
  .v9-section-title {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-stats,
  .course-stats,
  .live-meta,
  .profile-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero-stat,
  .course-stats span,
  .live-meta span {
    min-width: 0;
  }

  .table-responsive > table,
  .table-wrap > table,
  .v9-table,
  .inst-table {
    min-width: 620px;
  }

  .admin-user-hero,
  .admin-user-section-head,
  .admin-user-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-user-hero-icon {
    width: 3.6rem;
    height: 3.6rem;
  }

  .admin-user-grid.two,
  .admin-user-grid.three,
  .admin-user-toggle-grid,
  .admin-user-role-grid {
    grid-template-columns: 1fr;
  }

  .admin-user-actions {
    position: static;
  }

  .admin-user-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.icon-btn,
.portal-sidebar-toggle,
button[data-close-modal],
button[data-close-rate],
button[data-close-event],
button[aria-label*="إغلاق"] {
  min-width: 2.75rem !important;
  min-height: 2.75rem !important;
}

.catalog-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.catalog-program-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.catalog-program-card:hover {
  transform: translateY(-5px);
  border-color: rgba(8, 42, 94, 0.22);
  box-shadow: 0 26px 70px rgba(8, 42, 94, 0.13), 0 1px 2px rgba(15, 23, 42, 0.05);
}

.catalog-program-media {
  position: relative;
  min-height: 178px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(8, 42, 94, 0.96), rgba(245, 158, 11, 0.24));
}

.catalog-program-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 0.55s ease;
}

.catalog-program-card:hover .catalog-program-media img {
  transform: scale(1.07);
}

.catalog-program-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(5, 22, 13, 0.78), rgba(5, 22, 13, 0.08) 56%, rgba(5, 22, 13, 0.28)),
    radial-gradient(circle at 18% 14%, rgba(245, 158, 11, 0.28), transparent 34%);
}

.catalog-program-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.86);
}

.catalog-program-fallback svg {
  width: 3.4rem;
  height: 3.4rem;
  stroke-width: 1.6;
}

.catalog-program-kind,
.catalog-program-status {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  max-width: calc(100% - 1.75rem);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.catalog-program-kind {
  inset-block-start: 0.85rem;
  inset-inline-start: 0.85rem;
  padding: 0.5rem 0.72rem;
  color: #0B3D91;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.catalog-program-status {
  inset-block-end: 0.9rem;
  inset-inline-start: 0.85rem;
  padding: 0.48rem 0.68rem;
  color: #fff;
  background: rgba(15, 23, 42, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.catalog-program-status.is-open {
  background: rgba(8, 42, 94, 0.88);
}

.catalog-program-status.is-closed {
  background: rgba(100, 116, 139, 0.84);
}

.catalog-program-kind svg,
.catalog-program-status svg {
  width: 0.95rem;
  height: 0.95rem;
}

.catalog-program-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.05rem 1.05rem 0.9rem;
}

.catalog-program-body h3 {
  margin: 0;
  color: #111827;
  font-size: 1.04rem;
  font-weight: 950;
  line-height: 1.55;
  letter-spacing: 0;
}

.catalog-program-body h3 a {
  color: inherit;
}

.catalog-program-body h3 a:hover {
  color: #0B3D91;
}

.catalog-program-body p {
  margin: 0;
  min-height: 3.1rem;
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.catalog-program-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: auto;
}

.catalog-program-facts span {
  min-width: 0;
  min-height: 2.65rem;
  display: flex;
  align-items: center;
  gap: 0.48rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  color: #475569;
  font-size: 0.8rem;
  font-weight: 850;
}

.catalog-program-facts svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: #0B3D91;
}

.catalog-program-instructor {
  min-width: 0;
  min-height: 2.8rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.58rem 0.7rem;
  border: 1px solid rgba(8, 42, 94, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.72), rgba(248, 250, 252, 0.94));
  color: #334155;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.catalog-program-instructor svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: #0B3D91;
}

.catalog-program-instructor span {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 0.73rem;
  font-weight: 900;
  white-space: nowrap;
}

.catalog-program-instructor strong {
  min-width: 0;
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-program-footer {
  display: block;
  padding: 0.95rem 1.05rem 1.05rem;
  border-top: 1px solid rgba(226, 232, 240, 0.72);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.4), rgba(248, 250, 252, 0.9));
}

.catalog-program-price {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

.catalog-program-price span {
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 900;
}

.catalog-program-price strong {
  color: #0B3D91;
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1.2;
}

.catalog-program-action {
  width: 100%;
  min-width: 0;
  min-height: 3.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.62rem 0.72rem 0.62rem 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  background:
    linear-gradient(135deg, #0B3D91, #0A58CA 62%, #0A58CA);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 900;
  box-shadow: 0 15px 34px rgba(8, 42, 94, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.catalog-program-action:hover {
  transform: translateY(-2px);
  color: #fff;
  filter: brightness(1.04);
  box-shadow: 0 18px 40px rgba(8, 42, 94, 0.28);
}

.catalog-program-action-price {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
  text-align: start;
}

.catalog-program-action-price span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
}

.catalog-program-action-price strong {
  max-width: 100%;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.catalog-program-action-label {
  flex: 0 0 auto;
  min-height: 2.28rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0 0.72rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.catalog-program-action svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 1100px) {
  .catalog-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .catalog-card-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .catalog-program-media {
    min-height: 164px;
  }

  .catalog-program-body,
  .catalog-program-footer {
    padding-inline: 0.9rem;
  }
}

@media (max-width: 420px) {
  .catalog-program-facts {
    grid-template-columns: 1fr;
  }

  .catalog-program-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-program-action {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-program-action-label {
    width: 100%;
  }
}

.diploma-panel-card {
  transform: none !important;
  overflow: visible;
}

.diploma-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.diploma-panel-head.compact {
  align-items: center;
  margin-bottom: 0.7rem;
}

.diploma-panel-head h3 {
  margin: 0.2rem 0 0;
  font-size: 1.12rem;
  font-weight: 950;
  color: #111827;
}

.diploma-panel-head p {
  margin: 0.25rem 0 0;
}

.diploma-panel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: #0B3D91;
  font-size: 0.78rem;
  font-weight: 950;
}

.diploma-panel-kicker svg {
  width: 1rem;
  height: 1rem;
}

.diploma-panel-actions,
.diploma-row-actions,
.diploma-modal-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.diploma-content-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.diploma-summary-tile {
  min-width: 0;
  min-height: 5.4rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  padding: 0.9rem;
  color: #111827;
  text-align: right;
  cursor: pointer;
}

.diploma-summary-tile:hover,
.diploma-summary-tile:focus-visible {
  border-color: rgba(8, 42, 94, 0.24);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
  outline: none;
}

.diploma-summary-tile svg {
  width: 2.15rem;
  height: 2.15rem;
  padding: 0.55rem;
  border-radius: 12px;
  background: #EAF3FF;
  color: #0B3D91;
}

.diploma-summary-tile span {
  min-width: 0;
  color: #475569;
  font-size: 0.84rem;
  font-weight: 900;
}

.diploma-summary-tile strong {
  font-size: 1.45rem;
  font-weight: 950;
  color: #111827;
}

.diploma-content-tabs {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 0.35rem;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
}

.diploma-content-tab {
  flex: 0 0 auto;
  min-height: 2.5rem;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #64748b;
  padding: 0 0.85rem;
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
}

.diploma-content-tab.active {
  background: #fff;
  color: #0B3D91;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.diploma-content-panel[hidden] {
  display: none !important;
}

.diploma-management-table {
  min-width: 760px;
}

.diploma-management-table td,
.diploma-management-table th {
  vertical-align: middle;
}

.diploma-management-table td strong,
.diploma-management-table td small {
  display: block;
}

.diploma-management-table td small {
  margin-top: 0.18rem;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.diploma-row-actions {
  justify-content: flex-start;
}

.diploma-row-actions form {
  margin: 0;
}

.btn.danger,
.btn-outline.danger {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fff;
}

.diploma-empty-state {
  min-height: 11rem;
  gap: 0.6rem;
}

.diploma-empty-state > svg {
  width: 2.4rem;
  height: 2.4rem;
  color: #0B3D91;
}

body.diploma-modal-open {
  overflow: hidden;
}

.diploma-modal {
  --diploma-modal-offset-top: clamp(3rem, 5vh, 4rem);
  --diploma-modal-offset-bottom: 1rem;
  align-items: flex-start !important;
  box-sizing: border-box;
  height: 100dvh;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  width: 100%;
}

.diploma-modal-box {
  display: flex;
  flex-direction: column;
  width: min(860px, 96vw);
  max-height: min(calc(100dvh - var(--diploma-modal-offset-top) - var(--diploma-modal-offset-bottom)), 900px);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  direction: rtl;
  text-align: start;
}

.diploma-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #fff, #f8fafc);
}

.diploma-modal-head h3 {
  margin: 0.25rem 0 0;
  color: #111827;
  font-size: 1.12rem;
  font-weight: 950;
}

.diploma-modal-close {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #334155;
  cursor: pointer;
}

.diploma-modal-close svg {
  width: 1.05rem;
  height: 1.05rem;
}

.diploma-modal-form {
  display: flex;
  flex-direction: column;
  max-height: calc(min(calc(100dvh - var(--diploma-modal-offset-top) - var(--diploma-modal-offset-bottom)), 900px) - 5.1rem);
  min-height: 0;
  overflow: hidden;
  padding: 1.25rem;
}

.diploma-modal-form > .grid {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.35rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.diploma-modal-form label:not(.check-row):not(.diploma-upload-drop) {
  display: grid;
  gap: 0.4rem;
  color: #334155;
  font-size: 0.84rem;
  font-weight: 900;
}

.diploma-modal-form .input,
.diploma-modal-form .select,
.diploma-modal-form textarea {
  width: 100%;
}

.diploma-modal .select2-container.select2 {
  width: 100% !important;
  min-width: 0;
}

.diploma-modal .select2-dropdown {
  z-index: 101;
  max-width: min(42rem, calc(100vw - 2rem));
}

.diploma-modal-form textarea {
  min-height: 5.2rem;
  padding-top: 0.7rem;
}

.diploma-modal-wide {
  grid-column: 1 / -1;
}

.diploma-modal-actions {
  flex: 0 0 auto;
  position: static;
  justify-content: flex-end;
  margin: 1rem -1.25rem -1.25rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.diploma-kit-list {
  display: grid;
  gap: 0.85rem;
}

.diploma-kit-card {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.diploma-kit-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.diploma-kit-main strong,
.diploma-kit-item strong {
  display: block;
  color: #111827;
  font-weight: 950;
}

.diploma-kit-main small,
.diploma-kit-item small {
  display: block;
  margin-top: 0.2rem;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.45;
}

.diploma-kit-items {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f1f5f9;
}

.diploma-kit-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #f8fafc;
}

.diploma-kit-item > span {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: #fff;
  color: #0B3D91;
}

.diploma-kit-item svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 980px) {
  .diploma-content-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diploma-panel-head,
  .diploma-panel-head.compact,
  .diploma-kit-main {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .diploma-content-summary,
  .diploma-modal-form > .grid {
    grid-template-columns: 1fr;
  }

  .diploma-panel-actions,
  .diploma-panel-actions .btn,
  .diploma-row-actions,
  .diploma-row-actions .btn,
  .diploma-row-actions form {
    width: 100%;
  }

  .diploma-kit-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

.diploma-kit-item .diploma-row-actions {
    grid-column: 1 / -1;
  }
}

.brand-logos {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.6rem;
  direction: ltr;
}

.brand-logos-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  justify-content: flex-end;
}

.brand-logo {
  display: block;
  max-width: none;
  object-fit: contain;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.brand-logo-effat {
  width: 10rem;
  height: 3.625rem;
  padding: 0.12rem;
  border-radius: 0.65rem;
  object-fit: cover;
  object-position: center;
}

.brand-title {
  font-weight: 900;
  white-space: nowrap;
}

.topnav .nav-inner {
  direction: rtl;
}

.topnav .nav-links,
.topnav .toolbar,
.topnav .brand,
.topnav .brand-logos-link {
  direction: rtl;
}

@media (min-width: 769px) {
  .topnav .toolbar {
    margin-inline-start: auto;
  }

  .topnav .brand-logos-link {
    padding-inline-start: 0.5rem;
  }
}

.side-brand .brand-logos {
  gap: 0.35rem;
}

.side-brand .brand-logo-effat {
  width: 6.5rem;
  height: 2.25rem;
}

@media (max-width: 640px) {
  .brand-logo-effat {
    width: 7.5rem;
    height: 2.875rem;
  }
}

.topnav-menu {
  display: contents;
}

.mobile-menu-toggle {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: #fff;
  color: hsl(var(--primary));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.mobile-menu-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.mobile-menu-toggle .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .topnav .nav-inner {
    height: auto;
    min-height: 4.25rem;
    display: grid;
    grid-template-columns: auto 2.5rem minmax(0, 1fr);
    grid-template-areas:
      "logos toggle brand"
      "menu menu menu";
    align-items: center;
    gap: 0.55rem;
    padding-block: 0.45rem;
    direction: ltr;
  }

  .topnav .brand {
    grid-area: brand;
    justify-self: end;
    min-width: 0;
    max-width: 100%;
    direction: rtl;
  }

  .topnav .brand-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.82rem, 3.7vw, 0.98rem);
    line-height: 1.4;
  }

  .topnav .brand .brand-title {
    display: block;
  }

  .topnav .brand-logos-link {
    grid-area: logos;
    justify-self: start;
    max-width: 100%;
    direction: ltr;
  }

  .topnav .brand-logos {
    gap: 0.35rem;
  }

  .topnav .brand-logo-effat {
    width: 5.25rem;
    height: 2.05rem;
    border-radius: 0.5rem;
  }

  .topnav .mobile-menu-toggle {
    grid-area: toggle;
    display: inline-grid;
    justify-self: center;
  }

  .topnav .topnav-menu {
    grid-area: menu;
    display: none;
    width: 100%;
    padding: 0.55rem;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-md);
    direction: rtl;
  }

  .topnav .topnav-menu.is-open {
    display: grid;
    gap: 0.55rem;
  }

  .topnav .topnav-menu .nav-links {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 0.35rem;
  }

  .topnav .topnav-menu .nav-links a {
    min-height: 2.55rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: hsl(var(--muted) / 0.55);
    color: hsl(var(--foreground));
  }

  .topnav .topnav-menu .nav-links a.active {
    background: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
  }

  .topnav .topnav-menu .toolbar {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 0.5rem;
  }

  .topnav .topnav-menu .toolbar .session-logout-public {
    position: static;
    z-index: auto;
    width: 100%;
  }

  .topnav .topnav-menu .toolbar .session-logout-public button {
    width: 100%;
    box-shadow: none;
  }

  .topnav .topnav-menu .toolbar .btn {
    width: 100%;
    justify-content: center;
  }
}

.mobile-menu-toggle {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.mobile-menu-icon {
  display: grid;
  gap: 0.42rem;
  width: 2.15rem;
}

.mobile-menu-icon span {
  display: block;
  width: 100%;
  height: 0.34rem;
  border-radius: 999px;
  background: #000;
}

.mobile-menu-toggle svg {
  width: 1.85rem;
  height: 1.85rem;
  color: #000;
  stroke-width: 2;
}

.mobile-menu-line-icon {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 768px) {
  .topnav .nav-inner {
    grid-template-columns: 2.5rem auto minmax(0, 1fr);
    grid-template-areas:
      "toggle logos brand";
  }

  .topnav .mobile-menu-toggle {
    justify-self: start;
    position: relative;
    z-index: 90;
  }

  .topnav .brand-logos-link {
    justify-self: start;
  }

  .topnav::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(15, 23, 42, 0.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }

  .topnav.is-mobile-menu-open::before {
    opacity: 1;
  }

  .topnav .topnav-menu {
    position: fixed;
    inset-block: 0;
    right: -21rem;
    z-index: 80;
    display: grid;
    align-content: start;
    width: min(21rem, 86vw);
    height: 100dvh;
    padding: 5.5rem 1rem 1rem;
    border: 0;
    border-left: 1px solid hsl(var(--border));
    border-radius: 0;
    box-shadow: -22px 0 55px rgba(15, 23, 42, 0.18);
    transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
  }

  .topnav .topnav-menu.is-open,
  .topnav .topnav-menu[data-mobile-menu-open="true"] {
    display: grid;
    gap: 0.7rem;
    right: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }
}

/* Shared small-screen containment for static public and portal screens. */
@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .container {
    width: min(100% - 1.5rem, 1280px);
  }

  .section {
    padding-block: 2.75rem;
  }

  .main,
  .content,
  .topbar,
  .toolbar,
  .grid,
  .card,
  .panel,
  .clone-card,
  .diploma-panel,
  .messages-page,
  .messages-card,
  .public-diploma-card,
  .public-diploma-side-card,
  .catalog-program-card,
  .course-card {
    min-width: 0;
  }

  .section-head,
  .card-title-row,
  .diploma-panel-head,
  .messages-page .messages-head,
  .messages-page .thread-head,
  .clone-dialog-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3,
  .grid-2,
  .catalog-program-grid,
  .catalog-grid,
  .clone-grid-main,
  .calendar-layout,
  .calendar-v12,
  .messages-page .messages-workspace,
  .messages-page .messages-layout,
  .public-diploma-layout,
  .course-detail-layout,
  .public-course-layout,
  .v11-chat,
  .v11-cert-layout {
    grid-template-columns: 1fr !important;
  }

  .topbar {
    height: auto;
    min-height: 4rem;
    gap: 0.75rem;
    padding-block: 0.75rem;
  }

  .topbar .toolbar {
    max-width: 100%;
  }

  .table-wrap,
  .table-responsive,
  .v9-table-wrap,
  .inst-table-wrap,
  .diploma-management-table,
  .v11-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap > table,
  .table-responsive > table,
  .v9-table,
  .inst-table,
  .diploma-management-table > table,
  .v11-table table,
  .content > table,
  .card > table,
  .panel > table,
  .diploma-panel > table {
    min-width: min(42rem, 100vw);
  }

  .content > table,
  .card > table,
  .panel > table,
  .diploma-panel > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal,
  .clone-dialog,
  .event-dialog,
  .inst-modal,
  .diploma-modal {
    padding: 0.75rem;
  }

  .modal-box,
  .clone-dialog-card,
  .event-dialog > div,
  .inst-modal-card,
  .diploma-modal-card {
    width: min(100%, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 1.5rem);
    overflow: auto;
    border-radius: 1rem;
  }

  .messages-page .messages-workspace,
  .v8-message-layout,
  .v11-chat,
  .msg-shell {
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  body {
    min-width: 320px;
  }

  .container {
    width: min(100% - 1rem, 1280px);
  }

  .section {
    padding-block: 2rem;
  }

  .content {
    padding: 0.9rem;
  }

  .messages-page .message-modal {
    align-items: end;
    padding: 0.5rem;
  }

  .messages-page .message-modal-card {
    width: 100%;
    max-height: calc(100dvh - 1rem);
    border-radius: 1rem;
  }

  .messages-page .message-modal-head,
  .messages-page .message-modal-form {
    padding: 0.85rem;
  }

  .grid-4,
  .grid-3,
  .grid-2,
  .catalog-program-grid,
  .catalog-grid,
  .clone-grid-main,
  .public-diploma-layout,
  .course-detail-layout,
  .public-course-layout,
  .messages-page .messages-workspace {
    grid-template-columns: 1fr !important;
  }

  .section-head {
    display: grid;
    gap: 0.75rem;
  }

  .section-head h2,
  .page-title h1 {
    font-size: clamp(1.35rem, 7vw, 1.85rem);
    line-height: 1.25;
  }

  .card,
  .clone-card,
  .diploma-panel,
  .messages-card,
  .public-diploma-card,
  .public-diploma-side-card,
  .catalog-filter-card,
  .catalog-program-card,
  .course-card {
    border-radius: 0.9rem;
    padding: 0.9rem;
  }

  .toolbar,
  .catalog-filter-actions,
  .public-diploma-actions,
  .dialog-actions,
  .clone-dialog .dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 0.55rem;
  }

  .content .btn,
  .section .btn,
  .modal .btn,
  .clone-dialog .btn,
  .event-dialog .btn,
  .public-diploma-actions .btn,
  .catalog-filter-actions .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .input,
  .select,
  textarea,
  .catalog-filter-field .input,
  .catalog-filter-field .select {
    width: 100%;
    max-width: 100%;
  }

  .hero-banner,
  .clone-hero-blue,
  .v9-source-hero,
  .v11-student-hero,
  .public-diploma-hero {
    border-radius: 1rem;
  }

  .hero-banner,
  .clone-hero-blue,
  .v9-source-hero {
    min-height: auto;
    padding: 1rem;
  }

  .v9-hero-content,
  .v11-hero-content {
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .v11-certificate {
    min-height: auto;
    padding: 1.2rem;
    border-width: 0.45rem;
    border-radius: 1rem;
  }

  .v11-certificate:before,
  .cert-corner {
    display: none;
  }

  .v11-certificate h1 {
    font-size: clamp(1.55rem, 9vw, 2.2rem);
    line-height: 1.25;
  }

  .v11-certificate h2,
  .v11-certificate h3 {
    font-size: clamp(1.2rem, 6vw, 1.55rem);
    line-height: 1.3;
  }

  .cert-foot {
    display: grid;
    justify-items: center;
    gap: 1rem;
    text-align: center;
  }

  .v11-bubbles p,
  .v11-bubbles > .other,
  .v11-bubbles > .me,
  .v8-bubble,
  .msg-bubble {
    max-width: 92%;
  }

  .v8-chat-input,
  .v11-chat-window footer,
  .msg-compose {
    display: grid;
    grid-template-columns: 1fr;
  }

  .month-grid,
  .month-grid-v12,
  .weekdays {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 0.25rem;
  }

  .calendar-day,
  .day-v12,
  .day {
    min-height: 2.75rem;
    padding: 0.35rem;
    border-radius: 0.55rem;
    font-size: 0.72rem;
  }

  .toast {
    right: 0.75rem;
    left: 0.75rem;
    bottom: 0.75rem;
    width: auto;
  }
}

@media (max-width: 420px) {
  .topbar {
    padding-inline: 0.75rem;
  }

  .content {
    padding-inline: 0.75rem;
  }

  .badge,
  .v8-pill,
  .status-badge,
  .inst-badge {
    white-space: normal;
    text-align: center;
  }
}

/* Dock portal actions into the right sidebar drawer on small screens. */
@media (max-width: 1024px) {
  .dashboard > .main > .topbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start;
    gap: 0.75rem;
    min-height: 4.4rem;
    padding: 0.75rem 1rem 0.75rem 4.5rem !important;
  }

  .body-ltr .dashboard > .main > .topbar,
  body.ltr .dashboard > .main > .topbar {
    padding: 0.75rem 1rem 0.75rem 4.5rem !important;
  }

  .dashboard > .main > .topbar .portal-sidebar-toggle {
    flex: 0 0 2.75rem;
    order: 0;
    margin-top: 0.05rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(11, 61, 145, 0.16);
    background: #EAF3FF;
    color: #0B3D91;
    box-shadow: 0 8px 20px rgba(8, 42, 94, 0.08);
  }

  body.sidebar-open .dashboard > .main > .topbar .portal-sidebar-toggle {
    position: relative;
    z-index: 90;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.2);
  }

  body.sidebar-open .dashboard > .main > .topbar {
    z-index: 95;
  }

  .dashboard > .main > .topbar .page-title {
    flex: 1 1 auto;
    order: 1;
    width: auto !important;
    min-width: 0;
    text-align: right;
  }

  .dashboard > .main > .topbar .page-title h1,
  .dashboard > .main > .topbar .page-title p {
    white-space: normal;
  }

  @media (max-width: 768px) {
    .dashboard > .main > .topbar {
      flex-wrap: wrap;
    }

    .dashboard > .main > .topbar .page-title {
      flex: 1 0 100%;
      order: 2;
      width: 100% !important;
      max-width: 100%;
      min-width: 0;
    }

    .dashboard > .main > .topbar .page-title h1 {
      margin: 0;
      font-size: 1rem;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dashboard > .main > .topbar .page-title p {
      display: none;
    }

    .dashboard > .main > .topbar > .toolbar {
      flex: 1 1 12rem;
      order: 1;
      width: auto !important;
      min-width: 0;
      justify-content: flex-start;
    }
  }

  .dashboard > .sidebar .side-nav {
    padding-bottom: 0.75rem;
  }

  .dashboard > .sidebar .toolbar.is-in-sidebar-menu {
    flex: 0 0 auto;
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: stretch;
    width: auto !important;
    margin: 0 0.75rem 0.9rem;
    padding: 0.85rem 0 0;
    border-top: 1px solid #eef2f7;
    gap: 0.55rem;
  }

  .dashboard > .sidebar .toolbar.is-in-sidebar-menu > *,
  .dashboard > .sidebar .toolbar.is-in-sidebar-menu form,
  .dashboard > .sidebar .toolbar.is-in-sidebar-menu .btn,
  .dashboard > .sidebar .toolbar.is-in-sidebar-menu button,
  .dashboard > .sidebar .toolbar.is-in-sidebar-menu a {
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
  }

  .dashboard > .sidebar .toolbar.is-in-sidebar-menu .btn,
  .dashboard > .sidebar .toolbar.is-in-sidebar-menu button {
    min-height: 2.65rem;
    justify-content: center;
    box-shadow: none;
    white-space: normal;
    text-align: center;
  }

  .dashboard > .sidebar .toolbar.is-in-sidebar-menu .session-logout-portal {
    position: static;
    z-index: auto;
  }

  .dashboard > .sidebar .toolbar.is-in-sidebar-menu .session-logout-portal button {
    height: auto;
    min-height: 2.65rem;
  }
}

/* Blue theme finishing layer */
:root {
  --theme-gradient: linear-gradient(135deg, #082A5E 0%, #0B3D91 55%, #0A58CA 100%);
  --theme-button-gradient: linear-gradient(135deg, #082A5E 0%, #0B3D91 56%, #0A58CA 100%);
  --theme-button-hover: linear-gradient(135deg, #061D42 0%, #082A5E 55%, #0B3D91 100%);
  --theme-focus-ring: #0B3D91;
}

.btn-primary,
.btn.primary,
.catalog-filter-actions .btn-primary,
.v9-continue button,
.v9-diploma-card footer a,
.academy-swal-confirm {
  background: var(--theme-button-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(8, 42, 94, 0.2);
}

.btn-primary:hover,
.btn.primary:hover,
.catalog-filter-actions .btn-primary:hover,
.v9-continue button:hover,
.v9-diploma-card footer a:hover,
.academy-swal-confirm:hover {
  background: var(--theme-button-hover) !important;
  box-shadow: 0 18px 38px rgba(8, 42, 94, 0.28);
}

.btn-primary:focus-visible,
.btn.primary:focus-visible,
.catalog-filter-actions .btn-primary:focus-visible,
.v9-continue button:focus-visible,
.v9-diploma-card footer a:focus-visible,
.academy-swal-confirm:focus-visible {
  outline: 3px solid var(--theme-focus-ring);
  outline-offset: 2px;
}

.footer {
  background: linear-gradient(135deg, #082A5E 0%, #0B3D91 56%, #0D6EFD 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.footer a:hover,
.footer-column a:hover {
  color: #EAF3FF;
}

.footer-brand-row .brand-mark {
  color: #0D6EFD !important;
}

.legal-public-page {
  background: #f7f9fc;
}

.legal-hero {
  position: relative;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  background: linear-gradient(135deg, #082A5E 0%, #0B3D91 58%, #0D6EFD 100%);
  color: #fff;
  overflow: hidden;
}

.legal-hero:before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.legal-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.7fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
}

.legal-hero-copy {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.legal-page-type {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  font-weight: 900;
}

.legal-page-type svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #f59e0b;
}

.legal-hero h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0;
}

.legal-hero p {
  max-width: 57rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 2;
}

.legal-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

.legal-hero-link {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
}

.legal-hero-link:hover {
  background: rgba(255, 255, 255, 0.16);
}

.legal-hero-card {
  display: grid;
  gap: 0.8rem;
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.legal-hero-card span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.88rem;
  font-weight: 900;
}

.legal-hero-card svg {
  width: 1.2rem;
  height: 1.2rem;
  color: #f59e0b;
}

.legal-hero-card strong {
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.85;
}

.legal-section {
  padding: clamp(2.25rem, 5vw, 4.5rem) 0;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 0.32fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}

.legal-toc h2 {
  margin: 0 0 0.5rem;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 900;
}

.legal-toc a {
  display: block;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  color: #4b5563;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.55;
  transition: color 0.18s ease, background 0.18s ease;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
  background: #EAF3FF;
  color: #0B3D91;
}

.legal-document {
  overflow: hidden;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 52px rgba(15, 23, 42, 0.08);
}

.legal-block {
  scroll-margin-top: 6rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  border-bottom: 1px solid #edf2f7;
}

.legal-block-last {
  border-bottom: 0;
}

.legal-block h2 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.9rem;
  color: #111827;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.45;
  font-weight: 900;
}

.legal-block h2 svg {
  width: 1.35rem;
  height: 1.35rem;
  color: #0B3D91;
  flex: 0 0 auto;
}

.legal-block p,
.legal-list {
  color: #4b5563;
  font-size: 1rem;
  line-height: 2;
}

.legal-block p {
  margin: 0;
}

.legal-list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding-inline-start: 1.25rem;
}

.legal-list li::marker {
  color: #0B3D91;
}

.legal-document a {
  color: #0B3D91;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.legal-document a:hover,
.legal-document a:focus-visible {
  color: #0D6EFD;
}

@media (max-width: 980px) {
  .legal-hero-grid,
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
  }
}

@media (max-width: 640px) {
  .legal-hero {
    padding: 2.75rem 0;
  }

  .legal-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .legal-hero-actions .btn {
    width: 100%;
  }

  .legal-block h2 {
    align-items: flex-start;
  }
}

.public-footer {
  padding: 48px 0 30px;
}

.public-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: start;
}

.public-footer-brand {
  display: grid;
  min-width: 0;
  gap: 0.9rem;
  align-content: start;
}

.public-footer .footer-brand-row {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
  width: max-content;
  max-width: 100%;
}

.public-footer .footer-brand-row strong {
  font-size: 1.02rem;
  line-height: 1.5;
}

.public-footer .brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: #fff;
  color: #0B3D91 !important;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.public-footer .brand-mark svg {
  width: 1.25rem;
  height: 1.25rem;
}

.public-footer-brand .muted {
  max-width: 24rem;
  margin: 0;
  line-height: 1.85;
}

.public-footer-column {
  display: grid;
  min-width: 0;
  gap: 0.65rem;
  align-content: start;
}

.public-footer-column h4 {
  margin: 0 0 0.25rem;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 900;
}

.public-footer-column a,
.public-footer-link-button,
.public-footer-bottom a {
  color: #fff;
  font-weight: 750;
  line-height: 1.55;
  transition: color 0.18s ease, transform 0.18s ease;
}

.public-footer-account-form {
  margin: 0;
}

.public-footer-link-button {
  border: 0;
  padding: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  text-align: start;
  cursor: pointer;
}

.public-footer-column a,
.public-footer-link-button {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.public-footer-column a:hover,
.public-footer-column a:focus-visible,
.public-footer-link-button:hover,
.public-footer-link-button:focus-visible,
.public-footer-bottom a:hover,
.public-footer-bottom a:focus-visible {
  color: #fff;
}

.public-footer-column a:hover,
.public-footer-column a:focus-visible,
.public-footer-link-button:hover,
.public-footer-link-button:focus-visible {
  transform: translateX(-3px);
}

.public-footer a:focus-visible,
.public-footer-link-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.42);
  outline-offset: 3px;
  border-radius: 6px;
}

.public-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.92rem;
}

.public-footer-phone {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

@media (max-width: 1020px) {
  .public-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }

  .public-footer-brand {
    grid-column: 1 / -1;
  }

  .public-footer-column {
    gap: .125rem;
  }

  .public-footer-column a,
  .public-footer-link-button {
    min-height: 2.75rem;
  }
}

@media (max-width: 640px) {
  .public-footer {
    padding-block: 2rem 1.5rem;
  }

  .public-footer > .container {
    width: calc(100% - 2rem);
  }

  .public-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }

  .public-footer .footer-brand-row strong {
    font-size: 1rem;
  }

  .public-footer-column a,
  .public-footer-link-button {
    width: 100%;
  }

  .public-footer-help {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .125rem 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }

  .public-footer-help h4 {
    flex-basis: 100%;
  }

  .public-footer-help a {
    width: auto;
  }

  .public-footer-bottom {
    display: grid;
    justify-items: start;
    gap: .5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    font-size: .875rem;
  }

  .public-footer-phone {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

.clone-hero-blue {
  background: var(--theme-gradient) !important;
}

.clone-hero-blue .profile-info p {
  color: rgba(255, 255, 255, 0.88);
}

.clone-hero-blue .profile-info small {
  color: rgba(255, 255, 255, 0.78);
}

.clone-hero-blue .profile-stats span {
  color: rgba(255, 255, 255, 0.84);
}

.catalog-pagination {
  margin-top: 24px;
}

.catalog-pagination .btn-icon-only {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border-radius: 999px;
  gap: 0;
}

.catalog-pagination .btn-icon-only svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Admin library form polish */
.admin-library-page {
  display: grid;
  gap: 1.25rem;
}

.admin-library-page .card:hover {
  transform: none;
}

.library-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.library-metric {
  min-height: 112px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.55rem 0.85rem;
  padding: 1.15rem 1.25rem;
  border-color: rgba(8, 42, 94, 0.1);
  background: linear-gradient(180deg, #fff, #fbfcfd);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.library-metric::after {
  left: -2rem;
  top: -2rem;
  width: 7rem;
  height: 7rem;
  background: rgba(245, 158, 11, 0.11);
}

.library-metric-icon {
  grid-row: span 2;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 0.95rem;
  color: #0B3D91;
  background: rgba(8, 42, 94, 0.08);
}

.library-metric-icon.green {
  color: #047857;
  background: #ecfdf5;
}

.library-metric-icon.gold {
  color: #b45309;
  background: #fffbeb;
}

.library-metric-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.library-metric p,
.library-metric .num {
  position: relative;
  z-index: 1;
  margin: 0;
}

.library-form-card,
.library-list-card {
  margin-top: 0.15rem;
  padding: 0;
  overflow: hidden;
  border-color: rgba(8, 42, 94, 0.12);
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.library-form-card {
  border-color: rgba(13, 110, 253, 0.28);
}

.library-section-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.2rem 1.35rem;
  border-bottom: 1px solid #eef2f7;
  background:
    linear-gradient(90deg, rgba(8, 42, 94, 0.045), transparent 42%),
    linear-gradient(180deg, #fff, #fbfcfd);
}

.library-section-head > span {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0.95rem;
  color: #0B3D91;
  background: rgba(8, 42, 94, 0.08);
}

.library-section-head svg {
  width: 1.25rem;
  height: 1.25rem;
}

.library-section-head h3,
.library-section-head p {
  margin: 0;
}

.library-section-head h3 {
  color: #111827;
  font-size: 1.08rem;
  font-weight: 950;
}

.library-section-head p {
  margin-top: 0.2rem;
  line-height: 1.7;
}

.library-form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.35rem;
}

.library-edit-form {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  background: #f8fafc;
}

.library-field {
  grid-column: span 4;
  min-width: 0;
  display: grid;
  gap: 0.45rem;
  color: #334155;
  font-weight: 850;
}

.library-field-title {
  grid-column: span 8;
}

.library-field-wide {
  grid-column: span 8;
}

.library-field-full {
  grid-column: 1 / -1;
}

.library-field > span {
  color: #1f2937;
  font-size: 0.86rem;
  font-weight: 900;
}

.library-field :is(.input, .select, input, select, textarea) {
  width: 100%;
  min-width: 0 !important;
  min-height: 48px;
  border-color: #dfe7ef;
  border-radius: 14px;
  background: #fff;
  font-size: 0.95rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.library-field textarea.input {
  min-height: 108px;
  padding-block: 0.75rem;
  resize: vertical;
}

.library-field input[type="file"].input {
  display: flex;
  align-items: center;
  padding: 0.55rem;
  color: #64748b;
  background: #f8fafc;
}

.library-field input[type="file"]::file-selector-button {
  margin-inline-end: 0.65rem;
  border: 0;
  border-radius: 10px;
  background: #0B3D91;
  color: #fff;
  padding: 0.5rem 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

.library-field:focus-within > span {
  color: #0B3D91;
}

.library-field :is(.input, .select, input, select, textarea):focus {
  border-color: rgba(8, 42, 94, 0.46);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(8, 42, 94, 0.1);
}

.library-toggle-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.library-toggle {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 15px;
  background: linear-gradient(180deg, #fff, #fbfcfd);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.library-toggle:hover {
  border-color: rgba(8, 42, 94, 0.25);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
  transform: translateY(-1px);
}

.library-toggle input {
  width: 1.12rem;
  height: 1.12rem;
  margin-top: 0.2rem;
  flex: 0 0 auto;
  accent-color: #0B3D91;
}

.library-toggle b {
  display: block;
  color: #111827;
  font-size: 0.92rem;
  font-weight: 900;
}

.library-toggle small {
  display: block;
  margin-top: 0.2rem;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.6;
}

.library-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 0.2rem;
}

.library-actions .btn-primary {
  min-width: 11rem;
  border-color: #0B3D91;
  background: linear-gradient(135deg, #082A5E, #0B3D91);
  color: #fff;
  box-shadow: 0 14px 30px rgba(8, 42, 94, 0.18);
}

.library-actions small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-resource-stack {
  display: grid;
  gap: 1rem;
  padding: 1.35rem;
}

.library-resource-panel {
  padding: 1rem;
  border: 1px solid #e6edf4;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #fbfcfd);
}

.library-resource-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.library-resource-head strong {
  display: block;
  margin-bottom: 0.2rem;
  color: #111827;
  font-size: 1rem;
  font-weight: 950;
}

.library-resource-head .badge {
  margin-top: 0.35rem;
}

.library-resource-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.library-resource-actions form {
  margin: 0;
}

.library-empty {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.library-empty svg {
  width: 2.35rem;
  height: 2.35rem;
  color: #94a3b8;
}

.library-empty p {
  margin: 0;
}

@media (max-width: 1100px) {
  .library-field,
  .library-field-title,
  .library-field-wide {
    grid-column: span 6;
  }
}

@media (max-width: 760px) {
  .library-metrics,
  .library-toggle-row {
    grid-template-columns: 1fr;
  }

  .library-form {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .library-field,
  .library-field-title,
  .library-field-wide,
  .library-field-full,
  .library-toggle-row,
  .library-actions {
    grid-column: 1 / -1;
  }

  .library-section-head,
  .library-resource-head,
  .library-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .library-resource-actions,
  .library-resource-actions form,
  .library-resource-actions .btn,
  .library-actions .btn {
    width: 100%;
  }

  .library-actions {
    justify-content: stretch;
  }
}

.btn:focus-visible,
.btn-outline:focus-visible,
.btn-primary:focus-visible,
.btn-danger:focus-visible,
.v8-btn:focus-visible,
.payment-step-btn:focus-visible,
.payment-chip:focus-visible,
.success-action:focus-visible,
.mashhad-modal button:focus-visible {
  outline: 3px solid var(--theme-focus-ring, #0B3D91);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(8, 42, 94, 0.12);
}

/* Shared money display: render SAR as the Saudi riyal SVG mark instead of text. */
.saudi-riyal-amount,
.saudi-riyal-currency {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: .28em;
  unicode-bidi: isolate;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.saudi-riyal-amount {
  direction: rtl; flex-wrap: nowrap;
}

.saudi-riyal-amount[dir="ltr"] { direction: ltr; }

.saudi-riyal-currency {
  direction: rtl;
}

.saudi-riyal-value {
  display: inline-block; flex: 0 0 auto; white-space: nowrap; overflow-wrap: normal;
  direction: ltr;
  unicode-bidi: isolate;
}

.saudi-riyal-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: .88em;
  height: .88em;
  background: currentColor;
  transform: translateY(.1em);
  -webkit-mask: url('/images/icons/saudi-riyal.svg') center / contain no-repeat;
  mask: url('/images/icons/saudi-riyal.svg') center / contain no-repeat;
}

.saudi-riyal-currency .saudi-riyal-icon {
  width: 1.05em;
  height: 1.05em;
}

/* Collapsible portal sidebar groups */
.portal-side-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.side-nav-group {
  display: grid;
  gap: 2px;
}

.side-nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  text-align: right;
  transition: background .18s ease, color .18s ease;
}

.side-nav-group-toggle:hover,
.side-nav-group.is-expanded > .side-nav-group-toggle {
  background: #f9fafb;
  color: #111827;
}

.side-nav-group.active > .side-nav-group-toggle {
  background: #eef5ff;
  color: #0B3D91;
}

.side-nav-group-toggle > svg:not(.side-nav-group-chevron) {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.side-nav-group-toggle > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.side-nav-group-chevron {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  transition: transform .18s ease;
}

.side-nav-group.is-expanded .side-nav-group-chevron {
  transform: rotate(-90deg);
}

.side-nav-group-items {
  display: grid;
  gap: 2px;
  margin: 2px 28px 8px 0;
}

.body-ltr .side-nav-group-items,
body.ltr .side-nav-group-items {
  margin: 2px 0 8px 28px;
}

.side-nav-group-items[hidden] {
  display: none !important;
}

.side-nav a.side-nav-link {
  min-height: 38px;
  padding: 8px 10px;
  margin: 1px 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

.side-nav a.side-nav-link svg {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
}

.side-nav a.side-nav-link span {
  width: auto;
  min-width: 0;
  display: block;
  overflow-wrap: anywhere;
}

/* Admin student report filters */
.report-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1rem;
}

.student-report-filter-card {
  position: relative;
  overflow: visible;
  padding: 1.25rem;
  border-color: rgba(8, 42, 94, .12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96)),
    linear-gradient(90deg, rgba(8, 42, 94, .05), rgba(245, 158, 11, .05));
  box-shadow: 0 20px 52px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  transform: none !important;
}

.student-report-filter-card::before {
  content: "";
  position: absolute;
  inset-inline: 1.15rem;
  top: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #0B3D91, #0A58CA 56%, #f59e0b);
}

.student-report-filter-card .report-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.15rem;
  align-items: end;
}

.student-report-filter-card label {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .45rem;
  color: #1f2937;
  font-size: .86rem;
  font-weight: 900;
  line-height: 1.45;
  text-align: right;
}

.student-report-filter-card .report-filter-search-field {
  grid-column: span 2;
}

.student-report-filter-card :is(.input, select, input[type="date"], input[type="number"]) {
  width: 100% !important;
  min-width: 0 !important;
  height: 3.05rem;
  border-color: #dfe7ef;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  font-size: .92rem;
  font-weight: 750;
  text-align: right;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.student-report-filter-card .report-filter-search-field .input {
  height: 3.25rem;
  padding-inline: 1rem;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, rgba(8, 42, 94, .18), rgba(245, 158, 11, .18)) border-box;
}

.student-report-filter-card :is(.input, select, input[type="date"], input[type="number"]):hover,
.student-report-filter-card .select2-container--default .select2-selection--single:hover {
  border-color: rgba(8, 42, 94, .3);
}

.student-report-filter-card :is(.input, select, input[type="date"], input[type="number"]):focus,
.student-report-filter-card .select2-container--default.select2-container--focus .select2-selection--single,
.student-report-filter-card .select2-container--default.select2-container--open .select2-selection--single {
  border-color: rgba(8, 42, 94, .55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(8, 42, 94, .1);
}

.student-report-filter-card .select2-container {
  width: 100% !important;
  min-width: 0 !important;
}

.student-report-filter-card .select2-container--default .select2-selection--single {
  height: 3.05rem;
  display: flex;
  align-items: center;
  border-color: #dfe7ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.student-report-filter-card .select2-container--default .select2-selection--single .select2-selection__rendered {
  width: 100%;
  padding-inline: 2.35rem .9rem;
  color: #6b7280;
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: right;
}

.student-report-filter-card .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  inset-inline-start: .78rem;
  inset-inline-end: auto;
  transform: translateY(-50%);
}

.student-report-filter-card .report-filter-actions {
  margin-top: 1rem;
  align-items: center;
  justify-content: flex-start;
  gap: .7rem;
}

.student-report-filter-card .report-filter-actions .btn {
  min-height: 3rem;
  border-radius: 14px;
  padding-inline: 1.15rem;
  font-size: .88rem;
}

.student-report-filter-card .report-filter-actions .btn-primary {
  border-color: #0B3D91;
  background: linear-gradient(135deg, #082A5E, #0B3D91 62%, #0A58CA);
  color: #fff;
  box-shadow: 0 14px 30px rgba(8, 42, 94, .2);
}

.student-report-filter-card .report-filter-actions .btn-outline {
  background: #fff;
}

.student-report-filter-card .report-filter-actions svg {
  width: 1.15rem;
  height: 1.15rem;
}

@media (max-width: 1180px) {
  .student-report-filter-card .report-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-report-filter-card .report-filter-search-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .report-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .report-tabs .btn {
    width: 100%;
  }

  .student-report-filter-card {
    padding: 1rem;
    border-radius: 16px;
  }

  .student-report-filter-card .report-filter-grid {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  .student-report-filter-card .report-filter-search-field,
  .student-report-filter-card label {
    grid-column: 1 / -1;
  }

  .student-report-filter-card .report-filter-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .student-report-filter-card .report-filter-actions .btn {
    width: 100%;
  }
}

.single-student-report-filter-card .single-student-report-actions {
  margin-top: 0;
}

.single-student-report-filter-card .single-student-report-actions .btn {
  min-width: 10.75rem;
}

.student-report-student-card {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .18rem;
  text-align: center;
}

.student-report-student-card .muted {
  width: 100%;
  margin-bottom: .2rem;
}

.student-report-student-name {
  max-width: 100%;
  color: #0B3D91;
  font-size: clamp(.98rem, .7vw + .72rem, 1.18rem) !important;
  font-weight: 850;
  line-height: 1.42;
  white-space: normal;
  overflow-wrap: anywhere;
}

.student-report-student-email {
  max-width: 100%;
  margin-top: .08rem;
  color: #4b5563;
  direction: ltr;
  unicode-bidi: plaintext;
  font-size: .78rem;
  font-weight: 750;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

@media (min-width: 641px) {
  .single-student-report-filter-card .single-student-report-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .single-student-report-filter-card .single-student-report-search-field {
    grid-column: auto;
  }

  .single-student-report-filter-card .single-student-report-actions {
    align-self: end;
    justify-content: flex-start;
  }
}

/* Admin attendance report filters */
.attendance-report-filter-card .attendance-report-search-field {
  grid-column: span 2;
}

.attendance-report-filter-card input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .62;
}

.attendance-report-filter-card input[type="date"]:hover::-webkit-calendar-picker-indicator {
  opacity: .9;
}

@media (max-width: 1180px) {
  .attendance-report-filter-card .attendance-report-search-field {
    grid-column: 1 / -1;
  }
}

/* Admin finance report */
.admin-finance-report-page {
  --finance-navy: #082A5E;
  --finance-blue: #0B3D91;
  --finance-light: #EEF5FF;
  --finance-line: #dfe7ef;
  --finance-amber: #f59e0b;
  --finance-text: #0f172a;
  --finance-muted: #64748b;
}

.admin-finance-report-page .finance-report-content {
  display: grid;
  gap: 1.25rem;
}

.admin-finance-report-page .finance-report-filter-card {
  position: relative;
  overflow: visible;
  padding: 1.25rem;
  border-color: rgba(8, 42, 94, .12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96)),
    linear-gradient(90deg, rgba(8, 42, 94, .05), rgba(245, 158, 11, .05));
  box-shadow: 0 20px 52px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  transform: none !important;
}

.admin-finance-report-page .finance-report-filter-card::before {
  content: "";
  position: absolute;
  inset-inline: 1.15rem;
  top: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--finance-navy), #0A58CA 56%, var(--finance-amber));
}

.admin-finance-report-page .finance-report-filter-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 1.25fr) repeat(4, minmax(10.5rem, 1fr));
  gap: 1rem 1.15rem;
  align-items: end;
}

.admin-finance-report-page .finance-report-filter-card label {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .45rem;
  color: #1f2937;
  font-size: .86rem;
  font-weight: 900;
  line-height: 1.45;
  text-align: right;
}

.admin-finance-report-page .finance-report-filter-card .report-filter-search-field {
  grid-column: span 2;
}

.admin-finance-report-page .finance-report-filter-card :is(.input, select, input[type="date"], input[type="number"]) {
  width: 100% !important;
  min-width: 0 !important;
  height: 3.05rem;
  border-color: var(--finance-line);
  border-radius: 14px;
  background: #fff;
  color: #111827;
  font-size: .92rem;
  font-weight: 750;
  text-align: right;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.admin-finance-report-page .finance-report-filter-card .report-filter-search-field .input {
  height: 3.25rem;
  padding-inline: 1rem;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, rgba(8, 42, 94, .18), rgba(245, 158, 11, .18)) border-box;
}

.admin-finance-report-page .finance-report-filter-card :is(.input, select, input[type="date"], input[type="number"]):hover {
  border-color: rgba(8, 42, 94, .3);
}

.admin-finance-report-page .finance-report-filter-card :is(.input, select, input[type="date"], input[type="number"]):focus {
  border-color: rgba(8, 42, 94, .55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(8, 42, 94, .1);
}

.admin-finance-report-page .finance-report-filter-card input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .62;
}

.admin-finance-report-page .finance-report-filter-card input[type="date"]:hover::-webkit-calendar-picker-indicator {
  opacity: .9;
}

.admin-finance-report-page .finance-report-filter-card .report-filter-actions {
  margin-top: 1rem;
  align-items: center;
  justify-content: flex-start;
  gap: .7rem;
}

.admin-finance-report-page .finance-report-filter-card .report-filter-actions .btn {
  min-height: 3rem;
  border-radius: 14px;
  padding-inline: 1.15rem;
  font-size: .88rem;
}

.admin-finance-report-page .finance-report-filter-card .report-filter-actions .btn-primary {
  border-color: var(--finance-blue);
  background: linear-gradient(135deg, var(--finance-navy), var(--finance-blue) 62%, #0A58CA);
  color: #fff;
  box-shadow: 0 14px 30px rgba(8, 42, 94, .2);
}

.admin-finance-report-page .finance-report-filter-card .report-filter-actions .btn-outline {
  background: #fff;
}

.admin-finance-report-page .finance-report-filter-card .report-filter-actions svg {
  width: 1.15rem;
  height: 1.15rem;
}

.admin-finance-report-page .finance-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.admin-finance-report-page .finance-breakdown-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(17rem, .8fr);
  grid-template-areas:
    "diploma batch"
    "universities batch";
  gap: 1rem;
  align-items: stretch;
}

.admin-finance-report-page .finance-metric {
  min-height: 8.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem;
  border-color: rgba(15, 23, 42, .08);
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .06);
  transform: none !important;
}

.admin-finance-report-page .finance-metric::after {
  display: none;
}

.admin-finance-report-page .finance-metric-icon {
  position: relative;
  z-index: 1;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  background: var(--finance-light);
  color: var(--finance-blue);
}

.admin-finance-report-page .finance-metric-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.admin-finance-report-page .finance-metric > div {
  min-width: 0;
}

.admin-finance-report-page .finance-metric p {
  margin: 0 0 .55rem;
  font-size: .86rem;
  font-weight: 900;
}

.admin-finance-report-page .finance-metric .num {
  font-size: 2rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.admin-finance-report-page .finance-metric small {
  display: block;
  margin-top: .35rem;
  color: var(--finance-muted);
  font-size: .82rem;
  font-weight: 800;
}

.admin-finance-report-page .finance-metric-pending .finance-metric-icon,
.admin-finance-report-page .finance-metric-due .finance-metric-icon {
  background: #f8fafc;
  color: #475569;
}

.admin-finance-report-page .finance-metric-late .finance-metric-icon {
  background: #fff7ed;
  color: #b45309;
}

.admin-finance-report-page .finance-breakdown-card,
.admin-finance-report-page .finance-table-card {
  transform: none !important;
}

.admin-finance-report-page .finance-breakdown-card {
  min-width: 0;
  padding: 1rem;
  border-color: rgba(15, 23, 42, .08);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .05);
}

.admin-finance-report-page .finance-breakdown-diploma {
  grid-area: diploma;
}

.admin-finance-report-page .finance-breakdown-batch {
  grid-area: batch;
}

.admin-finance-report-page .finance-university-card {
  grid-area: universities;
}

.admin-finance-report-page .finance-breakdown-card h3 {
  margin-bottom: .75rem;
  color: var(--finance-text);
  font-size: 1rem;
  font-weight: 950;
}

.admin-finance-report-page .finance-registration-list,
.admin-finance-report-page .finance-university-stats {
  display: grid;
  gap: .7rem;
}

.admin-finance-report-page .finance-registration-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5.75rem, auto) minmax(6.5rem, auto);
  align-items: center;
  gap: .85rem;
  min-height: 4.05rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 15px;
  background: #fff;
}

.admin-finance-report-page .finance-registration-row strong {
  min-width: 0;
  color: var(--finance-text);
  font-size: .95rem;
  font-weight: 950;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.admin-finance-report-page .finance-registration-count {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .25rem;
  min-width: 0;
  color: var(--finance-blue);
  font-size: 1.25rem;
  font-weight: 950;
  white-space: nowrap;
}

.admin-finance-report-page .finance-registration-count small,
.admin-finance-report-page .finance-university-stat small {
  color: var(--finance-muted);
  font-size: .72rem;
  font-weight: 900;
}

.admin-finance-report-page .finance-registration-amount {
  min-width: 0;
  color: #475569;
  font-size: .86rem;
  font-weight: 850;
  text-align: left;
  white-space: nowrap;
}

.admin-finance-report-page .finance-breakdown-batch .finance-registration-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem .75rem;
}

.admin-finance-report-page .finance-breakdown-batch .finance-registration-amount {
  grid-column: 1 / -1;
  text-align: right;
}

.admin-finance-report-page .finance-university-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}

.admin-finance-report-page .finance-university-head h3 {
  margin: 0;
}

.admin-finance-report-page .finance-university-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--finance-light);
  color: var(--finance-blue);
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-finance-report-page .finance-university-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem .75rem;
  padding: .75rem;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 15px;
  background:
    linear-gradient(180deg, #fff, #fbfdff);
}

.admin-finance-report-page .finance-university-stat strong {
  min-width: 0;
  color: var(--finance-text);
  font-size: .88rem;
  font-weight: 950;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.admin-finance-report-page .finance-university-stat span {
  display: inline-flex;
  align-items: baseline;
  gap: .22rem;
  color: var(--finance-blue);
  font-size: 1.05rem;
  font-weight: 950;
  white-space: nowrap;
}

.admin-finance-report-page .finance-university-stat em {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: .8rem;
  font-style: normal;
  font-weight: 850;
}

.admin-finance-report-page .finance-breakdown-empty {
  display: grid;
  place-items: center;
  min-height: 4rem;
  border: 1px dashed rgba(148, 163, 184, .55);
  border-radius: 15px;
  color: var(--finance-muted);
  font-size: .86rem;
  font-weight: 850;
  text-align: center;
}

.admin-finance-report-page .finance-table-card {
  padding: 1.15rem;
  border-color: rgba(15, 23, 42, .08);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .055);
}

.admin-finance-report-page .finance-section-head {
  align-items: center;
  margin-bottom: .9rem;
}

.admin-finance-report-page .finance-section-head h3 {
  margin: 0;
  color: var(--finance-text);
  font-size: 1.05rem;
  font-weight: 950;
}

.admin-finance-report-page .finance-provider-card .finance-section-head {
  justify-content: flex-start;
}

.admin-finance-report-page .finance-section-icon,
.admin-finance-report-page .finance-count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border: 1px solid rgba(8, 42, 94, .12);
  border-radius: 999px;
  background: var(--finance-light);
  color: var(--finance-blue);
  font-size: .78rem;
  font-weight: 900;
}

.admin-finance-report-page .finance-section-icon {
  width: 2rem;
  justify-content: center;
}

.admin-finance-report-page .finance-section-icon svg {
  width: 1rem;
  height: 1rem;
}

.admin-finance-report-page .finance-count-pill {
  padding: .25rem .7rem;
}

.admin-finance-report-page .finance-compact-table,
.admin-finance-report-page .finance-due-table {
  border-spacing: 0 .55rem;
}

.admin-finance-report-page .finance-compact-table {
  min-width: 24rem;
}

.admin-finance-report-page .finance-due-table {
  min-width: 68rem;
}

.admin-finance-report-page .finance-compact-table th,
.admin-finance-report-page .finance-due-table th {
  padding-block: .4rem;
  color: var(--finance-muted);
  font-size: .76rem;
  font-weight: 950;
}

.admin-finance-report-page .finance-compact-table td,
.admin-finance-report-page .finance-due-table td {
  padding: .85rem .9rem;
  vertical-align: middle;
  color: var(--finance-text);
  line-height: 1.7;
}

.admin-finance-report-page .finance-compact-table td strong,
.admin-finance-report-page .finance-due-table td strong {
  font-weight: 950;
}

.admin-finance-report-page .finance-due-table .muted {
  display: inline-block;
  margin-top: .1rem;
  font-size: .78rem;
  line-height: 1.6;
}

.admin-finance-report-page .finance-empty-cell {
  color: var(--finance-muted);
  font-weight: 850;
  text-align: center;
}

.admin-finance-report-page .finance-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  border-radius: 999px;
  padding: .25rem .68rem;
  border: 1px solid transparent;
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-finance-report-page .finance-status-pill.is-success {
  border-color: #bbf7d0;
  background: #dcfce7;
  color: #047857;
}

.admin-finance-report-page .finance-status-pill.is-pending,
.admin-finance-report-page .finance-status-pill.is-info {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.admin-finance-report-page .finance-status-pill.is-warning {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.admin-finance-report-page .finance-status-pill.is-muted {
  border-color: #e5e7eb;
  background: #f8fafc;
  color: #475569;
}

.admin-finance-report-page .pager {
  margin-top: .9rem;
}

@media (max-width: 1500px) {
  .admin-finance-report-page .finance-report-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-finance-report-page .finance-report-filter-card .report-filter-search-field {
    grid-column: 1 / -1;
  }

  .admin-finance-report-page .finance-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-finance-report-page .finance-breakdown-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .75fr);
  }
}

@media (max-width: 1180px) {
  .admin-finance-report-page .finance-breakdown-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "diploma"
      "universities"
      "batch";
  }

  .admin-finance-report-page .finance-university-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-finance-report-page .finance-breakdown-batch .finance-registration-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .85rem;
  }

  .admin-finance-report-page .finance-breakdown-batch .finance-registration-amount {
    grid-column: auto;
    text-align: left;
  }
}

@media (max-width: 760px) {
  .admin-finance-report-page .finance-report-filter-card {
    padding: 1rem;
    border-radius: 16px;
  }

  .admin-finance-report-page .finance-report-filter-grid,
  .admin-finance-report-page .finance-metrics-grid,
  .admin-finance-report-page .finance-breakdown-grid {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  .admin-finance-report-page .finance-breakdown-grid {
    grid-template-areas:
      "diploma"
      "universities"
      "batch";
  }

  .admin-finance-report-page .finance-registration-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .admin-finance-report-page .finance-breakdown-batch .finance-registration-row {
    grid-template-columns: 1fr;
  }

  .admin-finance-report-page .finance-university-stats {
    grid-template-columns: 1fr;
  }

  .admin-finance-report-page .finance-registration-count {
    justify-content: flex-start;
  }

  .admin-finance-report-page .finance-registration-amount {
    text-align: right;
  }

  .admin-finance-report-page .finance-report-filter-card .report-filter-search-field,
  .admin-finance-report-page .finance-report-filter-card label {
    grid-column: 1 / -1;
  }

  .admin-finance-report-page .finance-report-filter-card .report-filter-actions,
  .admin-finance-report-page .finance-section-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-finance-report-page .finance-report-filter-card .report-filter-actions .btn {
    width: 100%;
  }

  .admin-finance-report-page .finance-metric {
    min-height: 7.5rem;
  }
}

/* Admin marketing report */
.marketing-report-filter-card {
  position: relative;
  overflow: visible;
  padding: 1.25rem;
  border-color: rgba(8, 42, 94, .12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96)),
    linear-gradient(90deg, rgba(8, 42, 94, .05), rgba(245, 158, 11, .05));
  box-shadow: 0 20px 52px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  transform: none !important;
}

.marketing-report-filter-card::before {
  content: "";
  position: absolute;
  inset-inline: 1.15rem;
  top: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #0B3D91, #0A58CA 56%, #f59e0b);
}

.marketing-report-filter-card .marketing-report-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(11rem, 1fr));
  gap: 1rem 1.15rem;
  align-items: end;
}

.marketing-report-filter-card label {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .45rem;
  color: #1f2937;
  font-size: .86rem;
  font-weight: 900;
  line-height: 1.45;
  text-align: right;
}

.marketing-report-filter-card :is(.input, select, input[type="date"]) {
  width: 100% !important;
  min-width: 0 !important;
  height: 3.05rem;
  border-color: #dfe7ef;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  font-size: .92rem;
  font-weight: 750;
  text-align: right;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.marketing-report-filter-card .report-filter-search-field .input {
  height: 3.25rem;
  padding-inline: 1rem;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, rgba(8, 42, 94, .18), rgba(245, 158, 11, .18)) border-box;
}

.marketing-report-filter-card :is(.input, select, input[type="date"]):hover {
  border-color: rgba(8, 42, 94, .3);
}

.marketing-report-filter-card :is(.input, select, input[type="date"]):focus {
  border-color: rgba(8, 42, 94, .55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(8, 42, 94, .1);
}

.marketing-report-filter-card input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .62;
}

.marketing-report-filter-card input[type="date"]:hover::-webkit-calendar-picker-indicator {
  opacity: .9;
}

.marketing-report-filter-card .report-filter-actions {
  margin-top: 1rem;
  align-items: center;
  justify-content: flex-start;
  gap: .7rem;
}

.marketing-report-filter-card .report-filter-actions .btn {
  min-height: 3rem;
  border-radius: 14px;
  padding-inline: 1.15rem;
  font-size: .88rem;
}

.marketing-report-filter-card .report-filter-actions .btn-primary {
  border-color: #0B3D91;
  background: linear-gradient(135deg, #082A5E, #0B3D91 62%, #0A58CA);
  color: #fff;
  box-shadow: 0 14px 30px rgba(8, 42, 94, .2);
}

.marketing-report-filter-card .report-filter-actions .btn-outline {
  background: #fff;
}

.marketing-report-filter-card .report-filter-actions svg {
  width: 1.15rem;
  height: 1.15rem;
}

@media (max-width: 1180px) {
  .marketing-report-filter-card .marketing-report-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-report-filter-card .report-filter-search-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .marketing-report-filter-card {
    padding: 1rem;
    border-radius: 16px;
  }

  .marketing-report-filter-card .marketing-report-filter-grid {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  .marketing-report-filter-card .report-filter-search-field,
  .marketing-report-filter-card label {
    grid-column: 1 / -1;
  }

  .marketing-report-filter-card .report-filter-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .marketing-report-filter-card .report-filter-actions .btn {
    width: 100%;
  }
}

/* Admin enrollment intake */
.enrollment-intake-page {
  display: grid;
  gap: 1.15rem;
}

.enrollment-intake-topbar .toolbar .btn svg,
.enrollment-intake-page .btn svg,
.intake-modal .btn svg,
.intake-note svg {
  width: 1.1rem;
  height: 1.1rem;
}

.enrollment-intake-action-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(13rem, .55fr) minmax(0, 1.45fr);
  gap: 1.25rem;
  align-items: end;
  overflow: hidden;
  border-color: rgba(8, 42, 94, .12);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 250, 255, .96)),
    linear-gradient(90deg, rgba(8, 42, 94, .08), rgba(245, 158, 11, .08));
  box-shadow: 0 22px 60px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
}

.enrollment-intake-action-card::before {
  content: "";
  position: absolute;
  inset-inline: 1.25rem;
  top: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #0B3D91, #f59e0b, #059669);
}

.enrollment-intake-action-copy,
.enrollment-intake-section-head > div {
  min-width: 0;
}

.intake-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: .4rem;
  color: #0B3D91;
  font-size: .74rem;
  font-weight: 900;
}

.enrollment-intake-action-copy h2,
.enrollment-intake-section-head h2 {
  margin: 0;
  color: #111827;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.35;
}

.intake-student-search,
.intake-request-filter {
  display: grid;
  grid-template-columns: minmax(9.5rem, .7fr) minmax(16rem, 1.3fr) auto;
  gap: .85rem;
  align-items: end;
}

.intake-request-filter {
  grid-template-columns: minmax(16rem, 1fr) minmax(12rem, .34fr) auto;
}

.intake-primary-actions {
  display: flex;
  gap: .65rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.intake-primary-actions .btn {
  min-height: 2.9rem;
}

.intake-field {
  display: grid;
  gap: .45rem;
  min-width: 0;
}

.intake-field[hidden] {
  display: none !important;
}

.intake-field > span {
  color: #4b5563;
  font-size: .82rem;
  font-weight: 850;
}

.intake-field b {
  color: #dc2626;
  font-weight: 900;
}

.intake-field .input,
.intake-field .select,
.intake-request-filter .input,
.intake-request-filter .select {
  width: 100%;
  min-width: 0;
  height: 2.9rem;
  border-color: #dbe3ea;
  border-radius: 14px;
  color: #111827;
  font-weight: 700;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.intake-field .input:hover,
.intake-field .select:hover,
.intake-request-filter .input:hover,
.intake-request-filter .select:hover {
  border-color: rgba(8, 42, 94, .3);
}

.intake-field .input.input-validation-error,
.intake-field .password-field > input.input-validation-error,
.intake-field .input.academy-required-missing,
.intake-field .password-field > input.academy-required-missing {
  border-color: #fb7185 !important;
  background: #fff7f7 !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12) !important;
}

.intake-field .input.input-validation-error:focus,
.intake-field .password-field > input.input-validation-error:focus,
.intake-field .input.academy-required-missing:focus,
.intake-field .password-field > input.academy-required-missing:focus {
  border-color: #e11d48 !important;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.16) !important;
}

.intake-field input[type="password"]::-ms-reveal,
.intake-field input[type="password"]::-ms-clear {
  display: none;
}

.intake-field input[type="password"]::-webkit-credentials-auto-fill-button,
.intake-field input[type="password"]::-webkit-textfield-decoration-container {
  display: none !important;
}

.intake-search-feedback,
.intake-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .25rem;
  border: 1px solid #dbe3ea;
  border-radius: 14px;
  padding: .75rem .9rem;
  font-size: .86rem;
  font-weight: 800;
}

.intake-search-feedback[hidden] {
  display: none;
}

.intake-search-feedback.success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #047857;
}

.intake-search-feedback.warning,
.intake-note {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.intake-search-feedback.danger {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.enrollment-intake-filter-card,
.enrollment-intake-table-card {
  border-color: rgba(15, 23, 42, .08);
  overflow: visible;
}

.enrollment-intake-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.enrollment-intake-table-card .table-responsive {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: .25rem;
}

.enrollment-intake-table {
  position: relative;
  min-width: 58rem;
}

.enrollment-intake-table tr,
.enrollment-intake-table td {
  overflow: visible;
  vertical-align: middle;
}

.enrollment-intake-table td strong,
.enrollment-intake-table td small {
  display: block;
}

.enrollment-intake-table td small {
  margin-top: .22rem;
  color: #64748b;
  font-size: .78rem;
}

.intake-actions-cell {
  position: relative;
  overflow: visible;
  width: 1%;
  white-space: nowrap;
}

.intake-action-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: .4rem;
}

.intake-action-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid #dbe3ea;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  padding: .45rem .7rem;
  font-size: .76rem;
  font-weight: 850;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.intake-action-chip:hover {
  background: #f8fafc;
  border-color: rgba(8, 42, 94, .22);
  color: #0B3D91;
}

.intake-action-chip.approve {
  border-color: rgba(5, 150, 105, .22);
  color: #047857;
  background: #f0fdf4;
}

.intake-action-chip.approve:hover {
  border-color: rgba(5, 150, 105, .34);
  background: #dcfce7;
  color: #065f46;
}

.intake-action-chip.reject {
  border-color: rgba(220, 38, 38, .2);
  color: #b91c1c;
  background: #fef2f2;
}

.intake-action-chip.reject:hover {
  border-color: rgba(220, 38, 38, .32);
  background: #fee2e2;
  color: #991b1b;
}

.intake-action-chip svg {
  width: .9rem;
  height: .9rem;
}

.intake-action-menu {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.intake-action-menu[open] {
  z-index: 40;
}

.intake-action-menu.menu-floating .intake-action-menu-list {
  position: fixed !important;
  top: var(--action-menu-top, 0) !important;
  left: var(--action-menu-left, 0) !important;
  bottom: auto !important;
  inset-inline: auto !important;
  z-index: 90 !important;
}

.intake-action-menu summary {
  list-style: none;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border: 1px solid #dbe3ea;
  border-radius: 12px;
  background: #fff;
  color: #0B3D91;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.intake-action-menu summary::-webkit-details-marker {
  display: none;
}

.intake-action-menu summary:hover,
.intake-action-menu[open] summary {
  background: #eef5ff;
  border-color: rgba(8, 42, 94, .22);
  box-shadow: 0 14px 26px rgba(15, 23, 42, .08);
}

.intake-action-menu-list {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: auto;
  bottom: calc(100% + .4rem);
  z-index: 5;
  min-width: 11rem;
  display: grid;
  gap: .2rem;
  padding: .4rem;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 40px rgba(15, 23, 42, .12);
}

.intake-action-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #0f172a;
  padding: .7rem .8rem;
  font-size: .82rem;
  font-weight: 850;
  text-align: right;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.intake-action-menu-item:hover {
  background: #f8fafc;
  color: #0B3D91;
}

.intake-action-menu-item.danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.student-action-menu-list[data-academy-floating-panel],
.coupon-action-menu-list[data-academy-floating-panel],
.intake-action-menu-list[data-academy-floating-panel] {
  width: min(17rem, calc(100vw - 2rem));
  display: grid;
  gap: .25rem;
  padding: .45rem;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(15, 23, 42, .16);
  text-align: right;
}

.coupon-action-menu-list[data-academy-floating-panel] {
  width: min(15rem, calc(100vw - 2rem));
}

.intake-action-menu-list[data-academy-floating-panel] {
  min-width: 11rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
}

.student-action-menu-item,
.coupon-action-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #1f2937;
  padding: .65rem .75rem;
  font-weight: 850;
  text-align: right;
  cursor: pointer;
}

.student-action-menu-item:hover:not(:disabled),
.coupon-action-menu-item:hover {
  background: #f3f7ff;
  color: #0B3D91;
}

.coupon-action-menu-item.is-danger {
  color: #b91c1c;
}

.coupon-action-menu-item.is-danger:hover {
  background: #fff1f2;
  color: #991b1b;
}

.support-action-menu-list[data-academy-floating-panel],
.audit-action-menu-list[data-academy-floating-panel] {
  width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  display: grid;
  gap: .8rem;
  padding: .85rem;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
  text-align: right;
}

.audit-action-menu-list[data-academy-floating-panel] {
  width: min(34rem, calc(100vw - 2rem));
}

.support-action-section,
.audit-action-section {
  display: grid;
  gap: .65rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid #eef2f7;
}

.support-action-section:last-child,
.audit-action-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.support-action-section h4,
.audit-action-section h4 {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  color: #111827;
  font-size: .9rem;
  font-weight: 900;
}

.intake-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  border-radius: 999px;
  padding: .22rem .65rem;
  border: 1px solid rgba(8, 42, 94, .14);
  background: #eef5ff;
  color: #0B3D91;
  font-size: .78rem;
  font-weight: 850;
  white-space: nowrap;
}

.intake-empty-state {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #64748b;
  font-weight: 800;
}

.intake-empty-state svg {
  width: 1.25rem;
  height: 1.25rem;
}

.enrollment-intake-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.enrollment-intake-pagination .disabled {
  pointer-events: none;
  opacity: .48;
}

body.modal-open {
  overflow: hidden;
}

.intake-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, .54);
  backdrop-filter: blur(8px);
}

.intake-modal.show {
  display: flex;
}

.intake-modal-card {
  width: min(58rem, 96vw);
  max-height: min(90vh, 54rem);
  overflow: auto;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
  animation: intakeModalIn .18s ease both;
}

.intake-modal-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.35rem 1rem;
  border-bottom: 1px solid #edf2f7;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
}

.intake-modal-head h2 {
  margin: 0;
  color: #111827;
  font-size: 1.25rem;
  font-weight: 900;
}

.intake-student-summary {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1rem 1.35rem 0;
  border: 1px solid rgba(5, 150, 105, .18);
  border-radius: 16px;
  padding: .8rem .9rem;
  background: #f0fdf4;
  color: #065f46;
}

.intake-student-summary[hidden] {
  display: none;
}

.intake-student-summary > svg {
  flex: 0 0 2.35rem;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  padding: .45rem;
  background: #d1fae5;
}

.intake-student-summary strong,
.intake-student-summary span {
  display: block;
}

.intake-student-summary span {
  margin-top: .15rem;
  color: #047857;
  font-size: .8rem;
  direction: ltr;
  text-align: right;
}

.intake-modal-form {
  padding: 1.2rem 1.35rem 1.35rem;
}

.intake-validation-summary {
  margin-bottom: .9rem;
}

.intake-validation-summary.validation-summary-errors {
  margin-bottom: 1rem;
  border-radius: 14px;
}

.intake-validation-summary.validation-summary-errors ul {
  display: grid;
  gap: .35rem;
}

.intake-validation-summary.validation-summary-errors li {
  color: #7f1d1d;
  line-height: 1.7;
}

.intake-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .9rem;
}

.intake-form-grid .intake-field {
  grid-column: span 4;
}

.intake-form-grid .intake-field-wide {
  grid-column: span 6;
}

.intake-file-field .input {
  height: auto;
  min-height: 2.9rem;
  padding: .45rem .5rem;
}

.intake-file-field .input::file-selector-button {
  margin-inline: 0 0.65rem;
  border: 0;
  border-radius: 11px;
  background: #0B3D91;
  color: #fff;
  padding: .55rem .8rem;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.intake-file-field small {
  color: #64748b;
  font-size: .76rem;
  font-weight: 700;
}

.intake-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid #edf2f7;
}

.intake-modal-actions .btn {
  min-width: 8rem;
}

.intake-review-modal-box {
  width: min(70rem, 97vw);
  max-height: min(92vh, 58rem);
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(248, 250, 252, .98)),
    linear-gradient(135deg, rgba(11, 61, 145, .07), rgba(245, 158, 11, .08));
  box-shadow: 0 28px 90px rgba(15, 23, 42, .24);
}

.intake-review-modal-box > .diploma-modal-head {
  flex: 0 0 auto;
}

.intake-review-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: 1.15rem 1.5rem 1.5rem;
  display: grid;
  gap: 1rem;
}

.intake-details-modal-box {
  width: min(78rem, calc(100vw - 2rem));
  max-width: 100%;
  max-height: min(calc(100dvh - var(--diploma-modal-offset-top) - var(--diploma-modal-offset-bottom)), 58rem);
}

.intake-details-modal-box > .diploma-modal-head {
  align-items: center;
  padding: .7rem 1.1rem;
}

.intake-details-modal-box .intake-details-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: .75rem 1.1rem .9rem;
  gap: .65rem;
}

.intake-details-modal-box .intake-details-hero {
  grid-template-columns: minmax(15rem, .75fr) minmax(0, 1.25fr);
  gap: .65rem;
  padding: .65rem;
}

.intake-details-modal-box .intake-details-student-summary {
  gap: .65rem;
  padding: .65rem;
}

.intake-details-modal-box .intake-details-avatar {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 13px;
}

.intake-details-modal-box .intake-details-payment-summary {
  gap: .65rem;
}

.intake-details-modal-box .intake-details-payment-summary > div {
  padding-block: .6rem;
  padding-inline: 2.65rem .75rem;
}

.intake-details-modal-box .intake-details-payment-summary svg {
  inset-inline-start: .85rem;
  top: .78rem;
}

.intake-details-modal-box .intake-details-section {
  gap: .4rem;
}

.intake-details-modal-box .intake-details-grid {
  gap: .65rem;
}

.intake-details-modal-box .intake-details-section h4 {
  font-size: .86rem;
}

.intake-details-modal-box .intake-details-section .intake-detail-card {
  min-height: 4.65rem;
  gap: .18rem;
  padding: .6rem .75rem;
}

.intake-details-modal-box .intake-detail-card strong,
.intake-details-modal-box .intake-detail-card small {
  line-height: 1.45;
}

.intake-details-modal-box .intake-receipt-preview-card {
  gap: .75rem;
  padding: .65rem .8rem;
}

.intake-details-modal-box .intake-receipt-preview-card strong {
  margin-top: .1rem;
  line-height: 1.45;
}

.intake-details-modal-box .intake-review-modal-actions {
  position: sticky;
  bottom: -.9rem;
  z-index: 2;
  margin-inline: -1.1rem;
  padding: .75rem 1.1rem .9rem;
  border-top: 1px solid rgba(226, 232, 240, .95);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -10px 24px rgba(15, 23, 42, .06);
  backdrop-filter: blur(10px);
}

.intake-review-kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #0B3D91;
  font-size: .78rem;
  font-weight: 900;
}

.intake-review-kicker.approve {
  color: #047857;
}

.intake-review-kicker.reject {
  color: #b91c1c;
}

.intake-details-hero {
  display: grid;
  grid-template-columns: minmax(17rem, .88fr) minmax(0, 1.12fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(191, 219, 254, .9);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 246, 255, .92)),
    linear-gradient(90deg, rgba(11, 61, 145, .06), rgba(245, 158, 11, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 16px 34px rgba(15, 23, 42, .06);
}

.intake-details-student-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  padding: .85rem;
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: 16px;
  background: rgba(255, 255, 255, .78);
}

.intake-details-avatar {
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #0B3D91;
  color: #fff;
  box-shadow: 0 14px 28px rgba(11, 61, 145, .22);
}

.intake-details-avatar svg,
.intake-detail-card-icon svg,
.intake-details-payment-summary svg {
  width: 1.15rem;
  height: 1.15rem;
}

.intake-details-student-summary > div,
.intake-details-payment-summary > div {
  min-width: 0;
  display: grid;
  gap: .18rem;
}

.intake-details-student-summary span,
.intake-details-payment-summary span {
  color: #64748b;
  font-size: .76rem;
  font-weight: 900;
}

.intake-details-student-summary strong,
.intake-details-payment-summary strong,
.intake-details-student-summary small,
.intake-details-payment-summary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.intake-details-student-summary strong,
.intake-details-payment-summary strong {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.55;
}

.intake-details-student-summary small,
.intake-details-payment-summary small {
  color: #475569;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.5;
}

.intake-details-payment-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.intake-details-payment-summary > div {
  position: relative;
  padding-block: .85rem;
  padding-inline: 3rem .95rem;
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: 16px;
  background: rgba(255, 255, 255, .84);
}

.intake-details-payment-summary svg {
  position: absolute;
  inset-inline-start: 1rem;
  top: 1rem;
  color: #0B3D91;
}

.intake-details-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin: 0;
}

.intake-details-overview,
.intake-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.intake-details-grid-wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.intake-details-section {
  display: grid;
  gap: 1rem;
}

.intake-details-section h4 {
  margin: 0;
  color: #0f172a;
  font-size: .95rem;
  font-weight: 900;
}

.intake-detail-card {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: .4rem;
  min-width: 0;
  min-height: 7.25rem;
  padding-block: 1rem;
  padding-inline: 3.1rem 1.1rem;
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  text-align: right;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
}

.intake-detail-card.emphasis {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%),
    linear-gradient(90deg, rgba(11, 61, 145, .06), rgba(245, 158, 11, .06));
  border-color: rgba(191, 219, 254, .95);
  min-height: 6.9rem;
}

.intake-detail-card-icon {
  position: absolute;
  inset-inline-start: 1rem;
  top: 1rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #EAF3FF;
  color: #0B3D91;
}

.intake-detail-card > span:not(.intake-detail-card-icon) {
  color: #64748b;
  font-size: .76rem;
  font-weight: 900;
}

.intake-detail-card strong,
.intake-detail-card small {
  min-width: 0;
  color: #0f172a;
  line-height: 1.8;
  overflow-wrap: anywhere;
  text-align: right;
}

.intake-detail-card strong {
  font-size: .95rem;
  font-weight: 900;
}

.intake-detail-card small {
  color: #475569;
  font-size: .8rem;
  font-weight: 800;
}

.intake-receipt-preview-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(191, 219, 254, .95);
  border-radius: 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%),
    linear-gradient(90deg, rgba(11, 61, 145, .06), rgba(5, 150, 105, .07));
  box-shadow: 0 12px 28px rgba(15, 23, 42, .055);
}

.intake-receipt-preview-card > div:first-child {
  min-width: 0;
  text-align: right;
}

.intake-receipt-preview-card span,
.intake-receipt-preview-card strong {
  display: block;
}

.intake-receipt-preview-card span {
  color: #64748b;
  font-size: .78rem;
  font-weight: 900;
}

.intake-receipt-preview-card strong {
  margin-top: .2rem;
  color: #0f172a;
  font-size: .92rem;
  font-weight: 900;
  line-height: 1.8;
}

.intake-receipt-preview-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.intake-details-list > dt,
.intake-details-list > dd {
  margin: 0;
}

.intake-details-list > dt {
  color: #64748b;
  font-size: .78rem;
  font-weight: 900;
}

.intake-details-list > dd {
  padding: .8rem .9rem;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 14px;
  background: #f8fafc;
  color: #0f172a;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.intake-review-modal-actions {
  justify-content: flex-end;
}

.intake-review-form {
  display: grid;
  gap: 1rem;
}

.intake-review-form textarea[name="reviewNotes"] {
  text-align: start;
  unicode-bidi: plaintext;
}

.intake-review-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.intake-review-summary-grid > div {
  display: grid;
  gap: .25rem;
  padding: .85rem .95rem;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 14px;
  background: #f8fafc;
  text-align: left;
}

.intake-review-summary-grid span {
  color: #64748b;
  font-size: .76rem;
  font-weight: 850;
}

.intake-review-summary-grid strong {
  color: #0f172a;
  font-size: .92rem;
  font-weight: 900;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.intake-field .field-validation-error,
.intake-field > span[data-valmsg-for],
.intake-field span.field-validation-error,
.intake-validation-summary,
.intake-validation-summary ul {
  color: #b91c1c;
  font-size: .78rem;
  font-weight: 800;
}

@keyframes intakeModalIn {
  from {
    opacity: 0;
    transform: scale(.97) translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1100px) {
  .enrollment-intake-action-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .intake-student-search,
  .intake-request-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intake-primary-actions,
  .intake-request-filter .btn {
    grid-column: 1 / -1;
  }

  .intake-primary-actions {
    justify-content: stretch;
  }

  .intake-primary-actions .btn {
    flex: 1 1 12rem;
  }
}

@media (max-width: 860px) {
  .intake-form-grid .intake-field,
  .intake-form-grid .intake-field-wide {
    grid-column: span 6;
  }

  .intake-details-hero,
  .intake-details-overview,
  .intake-details-grid-wide,
  .intake-details-grid,
  .intake-details-list,
  .intake-review-summary-grid {
    grid-template-columns: 1fr;
  }

  .intake-details-payment-summary {
    grid-template-columns: 1fr;
  }

  .intake-receipt-preview-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .intake-receipt-preview-actions {
    justify-content: stretch;
  }

  .intake-modal {
    align-items: stretch;
    padding: .75rem;
  }

  .intake-modal-card {
    width: 100%;
    max-height: 100%;
  }
}

@media (max-width: 640px) {
  .enrollment-intake-page {
    gap: .9rem;
  }

  .intake-student-search,
  .intake-request-filter,
  .intake-primary-actions,
  .enrollment-intake-section-head,
  .enrollment-intake-pagination,
  .intake-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

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

  .intake-form-grid .intake-field,
  .intake-form-grid .intake-field-wide {
    grid-column: 1 / -1;
  }

  .intake-modal-head,
  .intake-modal-form {
    padding-inline: 1rem;
  }

  .intake-review-modal-body {
    padding-inline: 1rem;
  }

  .intake-student-summary {
    margin-inline: 1rem;
  }

  .intake-modal-actions .btn,
  .intake-receipt-preview-actions .btn,
  .intake-request-filter .btn,
  .intake-primary-actions .btn {
    width: 100%;
  }
}

.marketing-tools-page .marketing-tools-content {
  display: grid;
  gap: 1.5rem;
}

.marketing-tools-page .marketing-tools-empty-card {
  min-height: 280px;
  display: grid;
  place-items: center;
  gap: 1rem;
  text-align: center;
  padding: 2.5rem 1.5rem;
  border: 1px dashed rgba(11, 61, 145, 0.2);
  background:
    radial-gradient(circle at top, rgba(245, 158, 11, 0.12), transparent 34%),
    linear-gradient(160deg, #ffffff 0%, #f8fbff 100%);
}

.marketing-tools-page .marketing-tools-empty-card h2 {
  margin: 0 0 0.5rem;
  color: #111827;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 950;
}

.marketing-tools-page .marketing-tools-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, #0b3d91 0%, #1f5cbf 100%);
  color: #fff;
  box-shadow: 0 24px 50px rgba(11, 61, 145, 0.24);
}

.marketing-tools-page .marketing-tools-empty-icon svg {
  width: 2rem;
  height: 2rem;
}

.marketing-tools-page .marketing-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 1.35rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid rgba(11, 61, 145, 0.08);
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.2), transparent 28%),
    radial-gradient(circle at bottom right, rgba(11, 61, 145, 0.16), transparent 38%),
    linear-gradient(155deg, #ffffff 0%, #f5f9ff 100%);
}

.marketing-tools-page .marketing-hero-copy {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  min-width: 0;
}

.marketing-tools-page .marketing-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(11, 61, 145, 0.08);
  color: #0b3d91;
  font-size: 0.78rem;
  font-weight: 950;
}

.marketing-tools-page .marketing-hero-copy h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 1000;
  letter-spacing: 0;
}

.marketing-tools-page .marketing-hero-copy p {
  margin: 0;
  color: #1f2937;
  font-size: 1.05rem;
  font-weight: 850;
  line-height: 1.8;
}

.marketing-tools-page .marketing-hero-note {
  width: fit-content;
  max-width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 1rem;
  background: rgba(255, 251, 235, 0.88);
  color: #7c5a10;
  line-height: 1.8;
}

.marketing-tools-page .marketing-usage-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 10rem));
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.marketing-tools-page .marketing-usage-pill {
  display: grid;
  place-items: center;
  gap: 0.25rem;
  min-height: 5.5rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(11, 61, 145, 0.12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.76);
  text-align: center;
}

.marketing-tools-page .marketing-usage-pill span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 900;
}

.marketing-tools-page .marketing-usage-pill strong {
  color: #0b3d91;
  font-size: 1.7rem;
  font-weight: 1000;
  line-height: 1.15;
}

.marketing-tools-page .marketing-copy-stack {
  display: grid;
  gap: 1rem;
  align-content: stretch;
}

.marketing-tools-page .marketing-copy-card {
  width: 100%;
  display: grid;
  gap: 0.75rem;
  padding: 1.05rem 1.1rem;
  border: 1px solid rgba(11, 61, 145, 0.12);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.84);
  color: #111827;
  text-align: right;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.marketing-tools-page .marketing-copy-card:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 61, 145, 0.22);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  background: #fff;
}

.marketing-tools-page .marketing-copy-card.is-copied {
  border-color: rgba(22, 163, 74, 0.28);
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.marketing-tools-page .marketing-copy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #0b3d91;
  font-size: 0.9rem;
  font-weight: 950;
}

.marketing-tools-page .marketing-copy-head svg {
  width: 1rem;
  height: 1rem;
}

.marketing-tools-page .marketing-copy-card strong {
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 1000;
  line-height: 1.5;
  overflow-wrap: anywhere;
  justify-self: start;
  text-align: left;
  width: 100%;
}

.marketing-tools-page .marketing-copy-card-link strong {
  font-size: 0.95rem;
}

.marketing-tools-page .marketing-copy-card small {
  color: #6b7280;
  font-size: 0.84rem;
  line-height: 1.7;
}

.marketing-tools-page .marketing-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.marketing-tools-page .marketing-detail-card {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.marketing-tools-page .marketing-detail-card-wide {
  grid-column: 1 / -1;
}

.marketing-tools-page .marketing-qr-card {
  grid-column: 1 / -1;
}

.marketing-tools-page .marketing-qr-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}

.marketing-tools-page .marketing-qr-frame {
  width: 16.25rem;
  height: 16.25rem;
  display: grid;
  place-items: center;
  padding: 0.7rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}

.marketing-tools-page .marketing-qr-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.marketing-tools-page .marketing-qr-copy {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 0.9rem;
}

.marketing-tools-page .marketing-qr-copy p {
  margin: 0;
  color: #475569;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.8;
}

.marketing-tools-page .marketing-qr-copy .btn svg {
  width: 1rem;
  height: 1rem;
}

.marketing-tools-page .marketing-section-head {
  display: grid;
  gap: 0.45rem;
}

.marketing-tools-page .marketing-section-head h3 {
  margin: 0;
  color: #111827;
  font-size: 1.15rem;
  font-weight: 950;
}

.marketing-tools-page .marketing-detail-list {
  display: grid;
  gap: 0.8rem;
  margin: 0;
}

.marketing-tools-page .marketing-detail-list > div {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem 0.95rem;
  border-radius: 1rem;
  background: #f8fafc;
  border: 1px solid rgba(226, 232, 240, 0.85);
}

.marketing-tools-page .marketing-detail-list dt {
  margin: 0;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 900;
}

.marketing-tools-page .marketing-detail-list dd {
  margin: 0;
  color: #0f172a;
  font-weight: 850;
  line-height: 1.8;
  overflow-wrap: anywhere;
  text-align: left;
}

.marketing-tools-page .marketing-detail-list-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .marketing-tools-page .marketing-hero-card,
  .marketing-tools-page .marketing-details-grid,
  .marketing-tools-page .marketing-qr-body,
  .marketing-tools-page .marketing-detail-list-wide {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .marketing-tools-page .marketing-hero-copy h2 {
    font-size: 1.75rem;
  }

  .marketing-tools-page .marketing-usage-strip {
    grid-template-columns: 1fr;
  }

  .marketing-tools-page .marketing-qr-frame {
    width: min(100%, 16.25rem);
    height: auto;
    aspect-ratio: 1;
  }

  .marketing-tools-page .marketing-qr-copy {
    justify-items: stretch;
  }

  .marketing-tools-page .marketing-copy-card,
  .marketing-tools-page .marketing-detail-card {
    padding: 1rem;
  }
}

/* Admin paid enrollments filters */
.admin-paid-enrollments-page .paid-enrollments-filter-card {
  margin-bottom: 18px;
  overflow: visible;
  padding: 1.1rem;
  border-color: rgba(8, 42, 94, 0.1);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  transform: none !important;
}

.admin-paid-enrollments-page .paid-enrollments-filter-card:hover {
  border-color: rgba(8, 42, 94, 0.16);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.075), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-paid-enrollments-page .paid-enrollments-filter-form {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem;
  flex-wrap: wrap;
  min-width: 0;
}

.admin-paid-enrollments-page .paid-enrollments-filter-form :is(.input, .select) {
  height: 3.15rem;
  border-color: #dbe3ea;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  font-size: 0.92rem;
  font-weight: 750;
  text-align: right;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.admin-paid-enrollments-page .paid-enrollments-filter-form :is(.input, .select):hover {
  border-color: rgba(8, 42, 94, 0.28);
}

.admin-paid-enrollments-page .paid-enrollments-filter-form :is(.input, .select):focus {
  border-color: rgba(8, 42, 94, 0.55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(8, 42, 94, 0.1);
}

.admin-paid-enrollments-page .paid-enrollments-search-input {
  flex: 1 1 34rem;
  width: min(44rem, 100%);
  min-width: min(34rem, 100%) !important;
  padding-inline: 1rem;
}

.admin-paid-enrollments-page .paid-enrollments-search-input::placeholder {
  color: #94a3b8;
  font-weight: 650;
}

.admin-paid-enrollments-page .paid-enrollments-type-select {
  flex: 0 0 15rem;
  width: 15rem;
  min-width: min(15rem, 100%) !important;
  padding-inline: 0.95rem;
}

.admin-paid-enrollments-page .paid-enrollments-diploma-group-select,
.admin-paid-enrollments-page .paid-enrollments-diploma-select {
  flex: 0 1 18rem;
  width: 18rem;
  min-width: min(18rem, 100%) !important;
  padding-inline: 0.95rem;
}

.admin-paid-enrollments-page .paid-enrollments-date-field {
  flex: 0 0 11.5rem;
  width: 11.5rem;
  min-width: min(11.5rem, 100%);
  display: grid;
  gap: 0.35rem;
}

.admin-paid-enrollments-page .paid-enrollments-date-field span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-paid-enrollments-page .paid-enrollments-date-input {
  width: 100%;
  min-width: 0 !important;
}

.admin-paid-enrollments-page .paid-enrollments-date-input::-webkit-calendar-picker-indicator {
  opacity: 0.68;
  cursor: pointer;
}

.admin-paid-enrollments-page .paid-enrollments-date-input:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}

.admin-paid-enrollments-page .paid-enrollments-filter-submit {
  flex: 0 0 auto;
  min-width: 7.5rem;
  min-height: 3.15rem;
  border-radius: 14px;
  padding-inline: 1.2rem;
  box-shadow: 0 12px 24px rgba(8, 42, 94, 0.16);
}

.admin-paid-enrollments-page .paid-enrollments-filter-submit svg {
  width: 1.15rem;
  height: 1.15rem;
}

@media (max-width: 760px) {
  .admin-paid-enrollments-page .paid-enrollments-filter-card {
    padding: 1rem;
  }

  .admin-paid-enrollments-page .paid-enrollments-filter-form {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-paid-enrollments-page .paid-enrollments-search-input,
  .admin-paid-enrollments-page .paid-enrollments-type-select,
  .admin-paid-enrollments-page .paid-enrollments-diploma-group-select,
  .admin-paid-enrollments-page .paid-enrollments-diploma-select,
  .admin-paid-enrollments-page .paid-enrollments-date-field,
  .admin-paid-enrollments-page .paid-enrollments-filter-submit {
    width: 100%;
    min-width: 0 !important;
  }
}

/* Shared collapsible filter sections */
.academy-filter-collapsible {
  min-width: 0;
}

.academy-filter-shell {
  display: grid;
  gap: .75rem;
  margin-bottom: 1rem;
}

.academy-filter-shell > .catalog-filter-card,
.academy-filter-shell > .filter-card,
.academy-filter-shell > .inst-filterbar,
.academy-filter-shell > .v8-searchbar {
  margin-bottom: 0 !important;
}

.academy-filter-header {
  position: relative;
  z-index: 1;
}

.academy-filter-toggle {
  width: 100%;
  min-height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(11, 61, 145, .15);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94)),
    linear-gradient(90deg, rgba(11, 61, 145, .06), rgba(245, 158, 11, .06));
  color: #0f172a;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
  cursor: pointer;
  text-align: right;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.academy-filter-toggle:hover,
.academy-filter-toggle:focus-visible {
  border-color: rgba(11, 61, 145, .28);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .09);
  transform: translateY(-1px);
  outline: none;
}

.academy-filter-toggle-main,
.academy-filter-toggle-action {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.academy-filter-toggle-main {
  gap: .75rem;
}

.academy-filter-icon {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #EAF3FF;
  color: #0B3D91;
}

.academy-filter-icon svg,
.academy-filter-toggle-action svg {
  width: 1.1rem;
  height: 1.1rem;
}

.academy-filter-copy {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

.academy-filter-copy strong {
  color: #0f172a;
  font-size: .98rem;
  font-weight: 900;
  line-height: 1.25;
}

.academy-filter-copy small {
  color: #64748b;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.4;
}

.academy-filter-toggle-action {
  flex: 0 0 auto;
  gap: .45rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  background: #fff;
  color: #0B3D91;
  border: 1px solid rgba(11, 61, 145, .12);
  font-size: .82rem;
  font-weight: 900;
}

.academy-filter-body[hidden] {
  display: none !important;
}

.academy-filter-collapsible.is-collapsed {
  margin-bottom: 1rem;
}

.academy-filter-collapsible.is-collapsed .academy-filter-toggle {
  border-style: dashed;
}

.academy-filter-collapsible.is-expanded .academy-filter-toggle {
  border-color: rgba(11, 61, 145, .25);
}

.card.academy-filter-collapsible > .academy-filter-header:first-child,
.card .academy-filter-header {
  margin-bottom: .85rem;
}

@media (max-width: 640px) {
  .academy-filter-toggle {
    align-items: stretch;
    flex-direction: column;
    padding: .85rem;
  }

  .academy-filter-toggle-action {
    width: 100%;
    justify-content: center;
  }
}

/* Keep every RTL form action bar on the physical left.
   Primary submits stay on the right within the action group. */
html[dir="rtl"] form [class$="-actions"],
html[dir="rtl"] form [class*="-actions "],
html[dir="rtl"] form[class$="-actions"],
html[dir="rtl"] form[class*="-actions "],
html[dir="rtl"] form > .toolbar:last-child {
  justify-content: flex-end !important;
}

html[dir="rtl"] :is(
  form [class$="-actions"],
  form [class*="-actions "],
  form[class$="-actions"],
  form[class*="-actions "],
  form > .toolbar:last-child
) > :is(
  button[type="submit"],
  form:has(button[type="submit"]),
  [class$="-actions"]:has(button[type="submit"]),
  [class*="-actions "]:has(button[type="submit"])
) {
  order: -1;
}

html[dir="rtl"] :is(
  form [class$="-actions"],
  form [class*="-actions "],
  form[class$="-actions"],
  form[class*="-actions "],
  form > .toolbar:last-child
) > :is(
  .btn-primary,
  form:has(.btn-primary),
  [class$="-actions"]:has(.btn-primary),
  [class*="-actions "]:has(.btn-primary)
) {
  order: -2;
}

/* Shared admin data-grid behavior, aligned with LegacyPaidEnrollments. */
.admin-responsive-grid-card {
  min-width: 0;
  max-width: 100%;
  container: admin-responsive-grid / inline-size;
}

.admin-responsive-grid-shell {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.admin-responsive-grid-shell > .admin-responsive-grid-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  table-layout: fixed;
}

.admin-responsive-grid-table th,
.admin-responsive-grid-table td {
  min-width: 0 !important;
  padding: .85rem .7rem;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-responsive-grid-table :is(strong, small, bdi, span, a) {
  min-width: 0;
  max-width: 100%;
}

.admin-grid-primary {
  font-weight: 800;
  color: #0f172a;
}

.admin-grid-breakable {
  overflow-wrap: anywhere;
  word-break: break-word;
  unicode-bidi: plaintext;
}

.admin-grid-actions,
.admin-grid-actions :is(.toolbar, form) {
  min-width: 0;
}

.admin-grid-actions :is(.toolbar, form) {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

.admin-grid-actions .btn {
  justify-content: center;
}

.admin-responsive-grid-empty {
  padding-block: 2rem !important;
  text-align: center;
}

@container admin-responsive-grid (max-width: 72rem) {
  .admin-responsive-grid-table,
  .admin-responsive-grid-table tbody {
    display: block;
    width: 100%;
  }

  .admin-responsive-grid-table colgroup {
    display: none;
  }

  .admin-responsive-grid-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .admin-responsive-grid-table tbody {
    display: grid;
    gap: .8rem;
  }

  .admin-responsive-grid-table tbody > tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .045);
  }

  .admin-responsive-grid-table tbody > tr > td {
    display: block;
    border: 0 !important;
    padding: .78rem;
    text-align: start;
  }

  .admin-responsive-grid-table tbody > tr > td::before {
    display: block;
    margin-bottom: .3rem;
    color: #64748b;
    content: attr(data-label);
    font-size: .72rem;
    font-weight: 900;
  }

  .admin-responsive-grid-table .admin-responsive-grid-empty {
    grid-column: 1 / -1;
  }

  .admin-responsive-grid-table .admin-responsive-grid-empty::before {
    display: none;
  }
}

@container admin-responsive-grid (max-width: 47rem) {
  .admin-responsive-grid-table tbody > tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container admin-responsive-grid (max-width: 31rem) {
  .admin-responsive-grid-table tbody > tr {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-grid-actions :is(.btn, button, select, input) {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-responsive-grid-card *,
  .admin-responsive-grid-card *::before,
  .admin-responsive-grid-card *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Diploma surrender reasons are student-owned review evidence and must remain readable in dense admin tables. */
.admin-v8 .diploma-surrender-student-reason {
    min-width: 12rem;
    margin-top: .55rem;
    padding: .55rem .65rem;
    border: 1px solid #e2e8f0;
    border-radius: .65rem;
    background: #f8fafc;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.7;
}

.admin-v8 .diploma-surrender-student-reason strong,
.admin-v8 .diploma-surrender-student-reason span {
    display: block;
}

/* Preserve the complete Ibn Rushd lockup beside the Effat wordmark. */
.brand-logo-ibnrushd {
    width: 3.125rem;
    height: 3.625rem;
    padding: .12rem;
    border-radius: .5rem;
    object-fit: contain;
}

.side-brand .brand-logo-ibnrushd {
    width: 1.9375rem;
    height: 2.25rem;
}

.topnav .brand-logo {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.topnav .brand-logo-ibnrushd {
    width: 4.5rem;
    height: 5.125rem;
}

.topnav .brand-logo-effat {
    width: 4.5rem;
    height: 5.125rem;
}

.topnav .nav-inner {
    height: auto;
    min-height: 6rem;
    padding-block: .375rem;
}

@media (max-width: 768px) {
    .brand-logo-ibnrushd {
        width: 1.8125rem;
        height: 2.05rem;
    }

    .topnav .brand-logo-ibnrushd {
        width: 3rem;
        height: 3.5rem;
    }

    .topnav .brand-logo-effat {
        width: 3rem;
        height: 3.5rem;
    }

    .topnav .nav-inner {
        min-height: 5rem;
    }

    .topnav .brand-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* Frame the stacked app-listing artwork without modifying its pixels. */
.brand-logo-effat {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.effat-logo-artwork {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width: 200%;
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
}

.side-brand {
    height: auto;
    min-height: 7rem;
    padding: .75rem 1rem;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.side-brand .brand-title {
    max-width: 100%;
    font-size: .875rem;
    line-height: 1.5;
    white-space: normal;
}

.side-brand .brand-logo-effat,
.side-brand .brand-logo-ibnrushd {
    width: 2.5rem;
    height: 2.875rem;
    border: 0;
    box-shadow: none;
}

/* Portal accessibility: bypass repeated navigation without hiding keyboard focus. */
.admin-upcoming-session {
  border-inline-start: 4px solid hsl(var(--primary));
}

.portal-skip-link {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    z-index: 11000;
    padding: .75rem 1rem;
    border-radius: .5rem;
    background: #0b3d91;
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .2em;
    transform: translateY(calc(-100% - 2rem));
}

.portal-skip-link:focus {
    transform: none;
    outline: 3px solid #e9ba55;
    outline-offset: 3px;
    color: #fff;
}

main[tabindex="-1"] {
    scroll-margin-block-start: 6rem;
}

.hero-banner .badge.gold {
    color: #ffdf87;
    background: #17345c;
    font-size: .875rem;
}

@media (prefers-reduced-motion: reduce) {
    .iconbox,
    .content {
        animation: none;
    }
}