:root{--primary:#2563eb;--primary2:#7c3aed;--accent:#14b8a6;--bg:#f4f7fb;--card:#fff;--text:#172033;--muted:#6b7280;--border:#e5e7eb;--danger:#ef4444;--warning:#f59e0b;--success:#16a34a;--sidebar:#111827;--shadow:0 14px 45px rgba(30,41,59,.1)}
*{box-sizing:border-box}html{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text)}body{margin:0;min-height:100vh}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,#111827,#172554);color:#fff;padding:22px 16px;position:fixed;inset:0 auto 0 0;width:260px;z-index:40;overflow:auto}.brand{display:flex;align-items:center;gap:12px;margin:0 8px 28px}.logo{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,#60a5fa,#8b5cf6);box-shadow:0 10px 25px #0004}.brand strong{display:block;font-size:17px}.brand small{color:#b9c5df}.nav-group-title{font-size:10px;letter-spacing:.16em;color:#7182a7;margin:22px 12px 8px}.nav a{display:flex;align-items:center;gap:12px;padding:12px 13px;margin:5px 0;border-radius:12px;color:#cbd5e1;font-weight:600}.nav a:hover,.nav a.active{background:#ffffff17;color:#fff}.nav .ico{width:22px;text-align:center}.main{grid-column:2;min-width:0}.topbar{height:78px;background:#ffffffdd;backdrop-filter:blur(16px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:30}.topbar h2{margin:2px 0;font-size:22px}.topbar small{color:var(--muted)}.top-actions{display:flex;align-items:center;gap:10px}.icon-btn,.ghost-btn,.primary-btn,.danger-btn{border:0;border-radius:11px;padding:10px 15px;font-weight:700}.icon-btn{background:#eef2ff}.ghost-btn{background:#f3f4f6;color:#374151}.primary-btn{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 8px 22px #2563eb30}.danger-btn{background:#fee2e2;color:#b91c1c}.content{padding:28px;max-width:1600px;margin:auto}.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:22px}.page-head h1{font-size:30px;margin:4px 0}.page-head p{color:var(--muted);margin:4px 0}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--primary)}.hero{background:linear-gradient(130deg,#172554,#4338ca 60%,#7c3aed);color:#fff;border-radius:24px;padding:32px;display:grid;grid-template-columns:1.5fr .7fr;gap:24px;box-shadow:var(--shadow);overflow:hidden;position:relative}.hero:after{content:'';position:absolute;width:330px;height:330px;border-radius:50%;background:#ffffff12;right:-90px;top:-120px}.hero h1{font-size:34px;line-height:1.15;margin:10px 0}.hero p{color:#dbeafe}.hero-kpi{z-index:1;align-self:center;background:#ffffff16;border:1px solid #ffffff2e;padding:25px;border-radius:20px}.hero-kpi strong{display:block;font-size:42px;margin:6px 0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:22px 0}.stat,.panel,.course-card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}.stat{padding:20px}.stat span{color:var(--muted);font-size:13px}.stat strong{display:block;font-size:27px;margin:9px 0}.stat small{color:var(--success)}.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}.panel{padding:20px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.panel h3{margin:0}.table-wrap{overflow:auto;border-radius:12px}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--border);font-size:13px}th{color:#64748b;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.badge{display:inline-flex;padding:5px 9px;border-radius:20px;font-size:11px;font-weight:800}.approved,.present,.paid{background:#dcfce7;color:#166534}.pending,.late,.partial{background:#fef3c7;color:#92400e}.rejected,.absent,.unpaid{background:#fee2e2;color:#991b1b}.filters,.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.filters{margin-bottom:18px}.form-grid{margin-bottom:15px}.filters input,.filters select,label input,label select,label textarea{width:100%;border:1px solid var(--border);background:#fff;border-radius:11px;padding:11px 12px;outline:none}.filters input:focus,label input:focus,label select:focus,label textarea:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa22}label{display:block;font-size:12px;font-weight:700;color:#475569}label input,label select,label textarea{margin-top:7px;font-weight:500;color:var(--text)}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.course-card{padding:20px;position:relative;overflow:hidden}.course-card:before{content:'';height:5px;position:absolute;inset:0 0 auto;background:linear-gradient(90deg,var(--primary),var(--primary2))}.course-code{font-size:11px;color:var(--primary);font-weight:800}.course-card h3{font-size:19px}.course-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.course-meta div{background:#f8fafc;padding:11px;border-radius:10px}.course-meta small{display:block;color:var(--muted)}.course-meta strong{font-size:14px}.mobile-bottom{display:none}.menu-btn{display:none}.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;display:grid;place-items:center;font-weight:800}.profile-link{display:flex;align-items:center;gap:9px}.progress{height:9px;background:#e5e7eb;border-radius:99px;overflow:hidden}.progress i{height:100%;display:block;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:99px}.attendance-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.day{min-height:82px;border:1px solid var(--border);border-radius:11px;padding:9px;background:#fff}.day strong{display:block}.day.present-day{background:#ecfdf5;border-color:#86efac}.day.absent-day{background:#fff1f2;border-color:#fda4af}.day.late-day{background:#fffbeb;border-color:#fcd34d}.id-card{width:360px;min-height:570px;border-radius:25px;background:#fff;box-shadow:0 25px 65px #0f172a32;overflow:hidden;margin:auto;border:1px solid #dbeafe}.id-top{height:145px;background:linear-gradient(135deg,#172554,#4f46e5,#7c3aed);color:#fff;padding:24px;text-align:center}.id-photo{width:116px;height:116px;border-radius:50%;background:#e2e8f0;border:7px solid #fff;margin:-58px auto 13px;display:grid;place-items:center;font-size:35px;font-weight:900;color:#334155;position:relative}.id-body{text-align:center;padding:0 28px 24px}.id-body h2{margin:8px}.id-detail{display:grid;grid-template-columns:1fr 1fr;text-align:left;gap:12px;margin-top:20px}.id-detail div{background:#f8fafc;border-radius:10px;padding:10px}.id-detail small{color:var(--muted);display:block}.barcode{margin:22px auto 7px;height:42px;width:220px;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 5px,#111 5px 6px,transparent 6px 9px)}
/* Student */
.student-shell{min-height:100vh;background:radial-gradient(circle at top right,#dbeafe 0,transparent 35%),var(--bg)}.student-sidebar{background:linear-gradient(180deg,#172554,#312e81)}.student-banner{background:linear-gradient(120deg,#172554,#4f46e5 65%,#9333ea);border-radius:25px;color:#fff;padding:30px;display:flex;justify-content:space-between;align-items:center;gap:20px;box-shadow:var(--shadow)}.student-banner h1{font-size:30px;margin:7px 0}.student-avatar{width:92px;height:92px;border-radius:24px;background:#ffffff22;border:1px solid #ffffff42;display:grid;place-items:center;font-size:30px;font-weight:900}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}.quick-card{background:#fff;border:1px solid var(--border);border-radius:17px;padding:18px;transition:.2s}.quick-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.quick-card b{font-size:25px}.quick-card strong{display:block;margin-top:10px}.timeline-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}.timeline-dot{width:11px;height:11px;margin-top:5px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 5px #dbeafe}
.toast{position:fixed;right:22px;bottom:22px;background:#111827;color:#fff;padding:13px 18px;border-radius:11px;z-index:100;opacity:0;transform:translateY(10px);transition:.25s}.toast.show{opacity:1;transform:none}
@media(max-width:1100px){.stats-grid,.quick-grid{grid-template-columns:repeat(2,1fr)}.course-grid{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}.form-grid,.filters{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.layout{display:block}.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.main{grid-column:auto}.menu-btn{display:inline-flex}.topbar{height:68px;padding:0 15px}.profile-link div:last-child{display:none}.content{padding:17px 14px 92px}.hero{grid-template-columns:1fr;padding:24px}.hero h1{font-size:27px}.hero-kpi{display:none}.page-head{align-items:flex-start;flex-direction:column}.page-head h1{font-size:25px}.mobile-bottom{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));background:#111827f2;color:#cbd5e1;border-radius:18px;padding:7px;z-index:50;box-shadow:0 15px 45px #0006;backdrop-filter:blur(14px)}.mobile-bottom a{display:grid;place-items:center;gap:3px;font-size:9px;padding:6px 2px;border-radius:11px}.mobile-bottom a span:first-child{font-size:19px}.mobile-bottom a.active{background:#ffffff1c;color:#fff}.student-banner{padding:22px}.student-avatar{width:68px;height:68px}.attendance-grid{gap:4px}.day{min-height:63px;padding:6px;font-size:11px}}
@media(max-width:560px){.stats-grid,.quick-grid,.course-grid,.form-grid,.filters{grid-template-columns:1fr}.topbar h2{font-size:18px}.topbar small{display:none}.hero h1{font-size:23px}.stat{padding:16px}.student-banner{align-items:flex-start}.student-banner h1{font-size:24px}.student-avatar{display:none}.panel{padding:14px}.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}.attendance-grid{grid-template-columns:repeat(7,52px);overflow:auto;padding-bottom:8px}.id-card{width:min(100%,360px);transform-origin:top center}.page-head .primary-btn{width:100%}}
@media print{.sidebar,.topbar,.mobile-bottom,.no-print,.page-head{display:none!important}.layout,.main{display:block}.content{padding:0}.panel{box-shadow:none;border:0}.id-card{box-shadow:none;margin:0 auto}}


/* ===== Responsive UI v3: creative mobile navigation + device-wide fixes ===== */
html,body{max-width:100%;overflow-x:hidden}.main,.content,.panel,.page-head,.hero,.student-banner{min-width:0}.table-wrap{-webkit-overflow-scrolling:touch;scrollbar-width:thin}.table-wrap:after{content:"Swipe to view more →";display:none;color:var(--muted);font-size:10px;text-align:right;padding:7px 3px 0}.mobile-bottom .nav-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:11px;font-size:18px;line-height:1;transition:.25s ease}.mobile-bottom a{position:relative;isolation:isolate;transition:.25s ease}.mobile-bottom a:active{transform:scale(.94)}
@media(max-width:820px){
 body{padding-bottom:calc(96px + env(safe-area-inset-bottom));background-attachment:fixed}
 body:after{content:"";position:fixed;inset:0;background:rgba(15,23,42,.44);backdrop-filter:blur(2px);z-index:35;opacity:0;pointer-events:none;transition:.25s}
 body.sidebar-open:after{opacity:1;pointer-events:auto}
 .sidebar{width:min(84vw,310px);border-radius:0 24px 24px 0;box-shadow:30px 0 70px rgba(15,23,42,.35);padding-bottom:110px}
 .sidebar.open{transform:translateX(0)}
 .topbar{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));box-shadow:0 8px 30px rgba(15,23,42,.05)}
 .content{padding:18px 14px 112px;width:100%;overflow:hidden}
 .mobile-bottom{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));height:70px;padding:7px 6px;background:rgba(15,23,42,.88);border:1px solid rgba(255,255,255,.13);border-radius:24px;box-shadow:0 18px 55px rgba(15,23,42,.38),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%);overflow:visible}
 .student-mobile-nav{background:linear-gradient(115deg,rgba(23,37,84,.94),rgba(79,70,229,.90),rgba(88,28,135,.92))}
 .admin-mobile-nav{background:linear-gradient(115deg,rgba(15,23,42,.95),rgba(30,58,138,.92),rgba(49,46,129,.91))}
 .mobile-bottom a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;color:#cbd5e1;font-size:9px;font-weight:700;letter-spacing:.01em;padding:4px 1px;border-radius:15px;white-space:nowrap}
 .mobile-bottom a.active:not(.nav-main-action){color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
 .mobile-bottom a.active:not(.nav-main-action):after{content:"";position:absolute;bottom:-3px;width:16px;height:3px;border-radius:99px;background:#93c5fd;box-shadow:0 0 12px #60a5fa}
 .mobile-bottom a:not(.nav-main-action).active .nav-icon{background:rgba(255,255,255,.12);transform:translateY(-1px)}
 .mobile-bottom .nav-main-action{transform:translateY(-19px);color:#fff;overflow:visible}
 .mobile-bottom .nav-main-action .nav-icon{width:55px;height:55px;border-radius:19px;background:linear-gradient(135deg,#38bdf8,#4f46e5 52%,#9333ea);font-size:27px;border:5px solid rgba(244,247,251,.98);box-shadow:0 13px 30px rgba(37,99,235,.45),inset 0 1px 0 rgba(255,255,255,.5)}
 .student-shell .mobile-bottom .nav-main-action .nav-icon{background:linear-gradient(135deg,#22d3ee,#6366f1 55%,#a855f7)}
 .mobile-bottom .nav-main-action span:last-child{margin-top:2px;text-shadow:0 1px 8px rgba(0,0,0,.45)}
 .mobile-bottom .nav-main-action.active .nav-icon{animation:navPulse 2.2s infinite}
 @keyframes navPulse{0%,100%{box-shadow:0 13px 30px rgba(37,99,235,.45),0 0 0 0 rgba(96,165,250,.32)}50%{box-shadow:0 13px 30px rgba(37,99,235,.5),0 0 0 9px rgba(96,165,250,0)}}
 .page-head{margin-bottom:16px}.page-head h1{line-height:1.15}.hero,.student-banner{border-radius:21px}.stats-grid,.quick-grid{gap:12px}.stat,.panel,.course-card,.quick-card{border-radius:16px}.panel{overflow:hidden}
 .table-wrap{margin:0 -2px;padding-bottom:3px}.table-wrap:after{display:block}table{min-width:680px}
 .filters,.form-grid{gap:11px}.form-actions{position:relative}
}
@media(min-width:561px) and (max-width:820px){.content{padding-left:20px;padding-right:20px}.stats-grid,.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid,.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.student-banner{min-height:180px}}
@media(max-width:560px){
 .topbar{height:64px}.topbar h2{max-width:55vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-btn{padding:9px 12px}.content{padding-left:11px;padding-right:11px}.hero{padding:21px 18px}.hero p{font-size:13px}.hero>div>div{display:grid;gap:9px}.hero .primary-btn,.hero .ghost-btn{display:block;text-align:center;margin:0;width:100%}.student-banner{padding:20px 17px;min-height:150px}.student-banner p{font-size:12px}.stats-grid,.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat,.quick-card{padding:14px}.stat strong{font-size:23px}.quick-card b{font-size:21px}.quick-card strong{font-size:13px}.quick-card span{font-size:11px}.course-grid{grid-template-columns:1fr}.panel{padding:13px}.panel-head{gap:10px}.panel-head h3{font-size:16px}.form-grid,.filters{grid-template-columns:1fr}.form-actions{gap:8px}.form-actions button,.form-actions a{min-height:45px}.id-card{width:100%;max-width:350px;min-height:0}.id-top{height:125px;padding:20px}.id-photo{width:100px;height:100px;margin-top:-50px}.id-body{padding:0 18px 20px}.id-detail{gap:8px}.attendance-grid{grid-template-columns:repeat(7,minmax(44px,1fr));width:max-content;min-width:100%}.day{min-width:44px}.mobile-bottom{left:7px;right:7px;border-radius:22px}.mobile-bottom a{font-size:8px}.mobile-bottom .nav-main-action .nav-icon{width:52px;height:52px}.toast{left:12px;right:12px;bottom:102px;text-align:center}
}
@media(max-width:380px){.mobile-bottom{left:5px;right:5px;padding-left:3px;padding-right:3px}.mobile-bottom a{font-size:7.5px}.mobile-bottom .nav-icon{width:28px;height:28px;font-size:16px}.mobile-bottom .nav-main-action .nav-icon{width:49px;height:49px;font-size:24px}.stats-grid,.quick-grid{grid-template-columns:1fr}.topbar h2{font-size:16px}.content{padding-left:8px;padding-right:8px}}
@media(min-width:821px) and (max-width:1200px){.layout{grid-template-columns:230px 1fr}.sidebar{width:230px}.content{padding:24px}.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1600px){.layout{grid-template-columns:280px 1fr}.sidebar{width:280px}.content{max-width:1720px;padding:34px}.stats-grid{gap:22px}.course-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(orientation:landscape) and (max-height:540px) and (max-width:950px){.topbar{height:58px}.content{padding-top:12px;padding-bottom:90px}.mobile-bottom{height:62px;bottom:5px}.mobile-bottom .nav-main-action{transform:translateY(-15px)}.mobile-bottom .nav-main-action .nav-icon{width:46px;height:46px}.sidebar{padding-top:14px}.brand{margin-bottom:14px}.nav a{padding:9px 12px}}
@media(prefers-reduced-motion:reduce){.mobile-bottom .nav-main-action.active .nav-icon{animation:none}.mobile-bottom a,.mobile-bottom .nav-icon,.sidebar,body:after{transition:none}}

/* Approval workflow */
.nav-count,.mobile-badge{margin-left:auto;background:#ef4444;color:#fff;min-width:20px;height:20px;padding:0 6px;border-radius:99px;display:inline-grid;place-items:center;font-size:10px}.mobile-badge{position:absolute;top:1px;right:12px}.approval-filters{grid-template-columns:2fr 1fr 1fr}.doc-count{display:inline-flex;padding:6px 9px;border-radius:99px;background:#fff7ed;color:#9a3412;font-weight:800;font-size:11px}.doc-count.complete{background:#dcfce7;color:#166534}.modal-shell{position:fixed;inset:0;background:#0f172acc;backdrop-filter:blur(8px);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}.modal-shell.show{display:flex}.modal-card{background:#fff;width:min(760px,100%);max-height:90vh;overflow:auto;border-radius:24px;padding:24px;box-shadow:0 30px 100px #0006}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.modal-head h2{margin:4px 0}.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}.review-grid>div{background:#f8fafc;border:1px solid var(--border);padding:13px;border-radius:12px}.review-grid small{display:block;color:var(--muted);margin-bottom:5px}.review-grid strong{display:block}.review-grid .full{grid-column:1/-1}.verify-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 18px}.verify-list label{padding:14px;border:1px solid var(--border);border-radius:12px;background:#f8fafc}.approval-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.status-summary{padding:14px;border-radius:12px;font-weight:800;margin-top:18px}.status-summary.approved{background:#dcfce7}.status-summary.rejected{background:#fee2e2}.public-page{min-height:100vh;padding:30px;background:radial-gradient(circle at top right,#dbeafe,transparent 35%),var(--bg)}.registration-hero,.public-form-card{max-width:1050px;margin:auto}.registration-hero{background:linear-gradient(135deg,#172554,#4338ca,#7c3aed);color:white;padding:34px;border-radius:26px 26px 0 0}.registration-hero h1{font-size:34px;margin:10px 0}.registration-hero p{color:#dbeafe}.reg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:24px}.reg-steps span{padding:10px;border-radius:10px;background:#ffffff16;text-align:center;font-size:12px}.reg-steps .active{background:#fff;color:#1e3a8a;font-weight:800}.public-form-card{border-radius:0 0 26px 26px;padding:28px}.public-form-card h3{margin:25px 0 14px}.full-field{grid-column:1/-1}.document-upload-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.upload-box{border:1px dashed #94a3b8;border-radius:14px;padding:18px;background:#f8fafc}.upload-box b,.upload-box small{display:block;margin-top:6px}.policy-check{margin-top:20px;padding:14px;background:#eff6ff;border-radius:12px}.success-card{text-align:center;padding:40px}.success-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#dcfce7;color:#166534;font-size:36px;margin:auto}.success-card strong{display:block;font-size:26px;color:var(--primary);margin:12px}.modal-open{overflow:hidden}@media(max-width:820px){.approval-filters{grid-template-columns:1fr 1fr}.approval-filters input{grid-column:1/-1}.modal-shell{align-items:flex-end;padding:0}.modal-card{border-radius:24px 24px 0 0;max-height:92vh}.public-page{padding:0}.registration-hero{border-radius:0;padding:25px 18px}.public-form-card{border-radius:0;padding:18px}.reg-steps{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.review-grid,.verify-list,.document-upload-grid{grid-template-columns:1fr}.approval-actions{flex-direction:column-reverse}.approval-actions button{width:100%}.approval-filters{grid-template-columns:1fr}.approval-filters input{grid-column:auto}.registration-hero h1{font-size:27px}.reg-steps{grid-template-columns:1fr 1fr}.approval-stats{grid-template-columns:1fr 1fr}}/* Admin student profile workflow */
.admin-profile-hero{display:flex;align-items:center;gap:22px;padding:28px;border-radius:25px;background:linear-gradient(125deg,#172554,#3730a3 56%,#7c3aed);color:#fff;box-shadow:var(--shadow);overflow:hidden;position:relative}.admin-profile-hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:#ffffff12;right:-60px;top:-120px}.profile-avatar-xl{width:88px;height:88px;border-radius:27px;display:grid;place-items:center;background:linear-gradient(135deg,#38bdf8,#a855f7);font-size:28px;font-weight:900;box-shadow:0 15px 35px #0004;flex:0 0 auto}.profile-hero-main{flex:1;z-index:1}.profile-hero-main h1{margin:5px 0;font-size:30px}.profile-hero-main p{margin:0;color:#dbeafe}.eyebrow.light{color:#bfdbfe}.profile-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.profile-tags span{padding:7px 11px;border-radius:99px;background:#ffffff18;border:1px solid #ffffff24;font-size:12px;font-weight:700}.hero-actions{display:flex;gap:10px;z-index:1}.ghost-light-btn,.primary-light-btn{border:1px solid #ffffff35;border-radius:12px;padding:11px 15px;font-weight:800}.ghost-light-btn{background:#ffffff16}.primary-light-btn{background:#fff;color:#312e81;border-color:#fff}.profile-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);gap:20px}.profile-main-column,.profile-side-column{display:grid;align-content:start;gap:20px}.profile-form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.full-btn{width:100%;margin-top:12px}.student-cell{display:flex;align-items:center;gap:10px}.mini-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#dbeafe,#ede9fe);color:#3730a3;font-weight:900}.table-actions{display:flex;gap:7px;white-space:nowrap}.compact-btn{padding:7px 10px;font-size:11px}.balance-due{color:#dc2626}.balance-clear{color:#16a34a}.document-list{display:grid;gap:10px}.document-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--border);background:#f8fafc;border-radius:13px}.document-row small{display:block;color:var(--muted);margin-top:3px}.doc-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#dcfce7;color:#166534;font-weight:900}.fee-progress-card{padding:14px;border:1px solid var(--border);border-radius:13px;background:#f8fafc;margin-bottom:14px}.fee-progress-card>div:first-child{display:flex;justify-content:space-between;margin-bottom:10px}.small-table table{min-width:360px}
@media(max-width:1100px){.profile-layout{grid-template-columns:1fr}.profile-side-column{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-side-column article:last-child{grid-column:1/-1}.profile-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.admin-profile-hero{align-items:flex-start;padding:21px 17px;flex-wrap:wrap}.profile-avatar-xl{width:68px;height:68px;border-radius:21px}.profile-hero-main{min-width:calc(100% - 100px)}.profile-hero-main h1{font-size:23px}.hero-actions{width:100%}.hero-actions a,.hero-actions button{flex:1;text-align:center}.profile-side-column{grid-template-columns:1fr}.profile-side-column article:last-child{grid-column:auto}.profile-form-grid{grid-template-columns:1fr}.profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.table-actions{flex-direction:column}.table-actions a{text-align:center}}
@media(max-width:380px){.profile-stats{grid-template-columns:1fr}.hero-actions{flex-direction:column}}

/* ===== Premium Animated UI v3 ===== */
body{overflow-x:hidden;background:
 radial-gradient(circle at 8% 8%,rgba(37,99,235,.08),transparent 24%),
 radial-gradient(circle at 92% 12%,rgba(124,58,237,.08),transparent 26%),var(--bg)}
body:before,body:after{content:"";position:fixed;border-radius:50%;filter:blur(2px);pointer-events:none;z-index:-1;animation:ambientFloat 13s ease-in-out infinite}
body:before{width:280px;height:280px;right:-110px;top:18%;background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(168,85,247,.08))}
body:after{width:220px;height:220px;left:-90px;bottom:8%;background:linear-gradient(135deg,rgba(20,184,166,.1),rgba(59,130,246,.07));animation-delay:-5s}
@keyframes ambientFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-22px,0) scale(1.06)}}
.main{animation:pageReveal .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pageReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sidebar{background:linear-gradient(165deg,#0b1220 0%,#172554 52%,#312e81 100%);box-shadow:18px 0 55px rgba(15,23,42,.2)}
.logo{position:relative;overflow:hidden;animation:logoPulse 4s ease-in-out infinite}
.logo:after{content:"";position:absolute;inset:-60% -80%;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.5),transparent 60%);transform:translateX(-60%);animation:logoShine 4.5s ease-in-out infinite}
@keyframes logoPulse{50%{transform:translateY(-2px);box-shadow:0 14px 30px rgba(99,102,241,.42)}}
@keyframes logoShine{0%,55%{transform:translateX(-65%)}80%,100%{transform:translateX(65%)}}
.nav a{position:relative;overflow:hidden;transition:transform .22s ease,background .22s ease,color .22s ease}
.nav a:hover{transform:translateX(4px)}
.nav a.active:before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:99px;background:#60a5fa;box-shadow:0 0 15px #60a5fa}
.topbar{box-shadow:0 8px 30px rgba(15,23,42,.045)}
.hero,.student-banner,.admin-profile-hero{isolation:isolate;background-size:180% 180%;animation:gradientFlow 10s ease infinite}
.hero:before,.student-banner:before,.admin-profile-hero:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08);left:48%;bottom:-120px;animation:orb 8s ease-in-out infinite;z-index:-1}
@keyframes gradientFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes orb{50%{transform:translate(35px,-24px) scale(1.1)}}
.stat,.panel,.course-card,.quick-card{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;will-change:transform}
.stat:hover,.panel:hover,.course-card:hover,.quick-card:hover{transform:translateY(-5px);box-shadow:0 22px 55px rgba(30,41,59,.14);border-color:#c7d2fe}
.stat{position:relative;overflow:hidden}
.stat:after{content:"";position:absolute;inset:auto -25px -45px auto;width:95px;height:95px;border-radius:50%;background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(124,58,237,.06));transition:transform .35s ease}
.stat:hover:after{transform:scale(1.25)}
.stat strong,.hero-kpi strong,.quick-card span{font-variant-numeric:tabular-nums}
.progress i{width:0!important;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.progress i.progress-ready{width:var(--progress-width)!important}
.course-card:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5),transparent 65%);transform:translateX(-120%);transition:transform .65s ease;pointer-events:none}
.course-card:hover:after{transform:translateX(120%)}
.primary-btn,.ghost-btn,.danger-btn,.icon-btn{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.primary-btn:hover,.ghost-btn:hover,.danger-btn:hover,.icon-btn:hover{transform:translateY(-2px)}
.primary-btn:active,.ghost-btn:active,.danger-btn:active,.icon-btn:active{transform:scale(.97)}
.ripple-dot{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:ripple .55s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}
.premium-fab{position:fixed;right:26px;bottom:28px;z-index:72;display:grid;justify-items:end;gap:10px}
.fab-toggle{width:58px;height:58px;border:0;border-radius:19px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:28px;box-shadow:0 18px 40px rgba(79,70,229,.35);transition:.3s ease}
.premium-fab.open .fab-toggle{transform:rotate(45deg);border-radius:50%}
.fab-menu{display:grid;gap:9px;opacity:0;transform:translateY(15px) scale(.92);pointer-events:none;transition:.25s ease}
.premium-fab.open .fab-menu{opacity:1;transform:none;pointer-events:auto}
.fab-menu a{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.75);padding:10px 13px;border-radius:13px;box-shadow:0 12px 30px rgba(15,23,42,.14);font-size:12px;font-weight:800}
.notification-dot{position:absolute;right:4px;top:3px;width:9px;height:9px;background:#ef4444;border:2px solid #fff;border-radius:50%;animation:notifPulse 1.8s infinite}
@keyframes notifPulse{50%{box-shadow:0 0 0 7px rgba(239,68,68,0)}}
.mobile-bottom{background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,41,59,.94));border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 55px rgba(15,23,42,.38);backdrop-filter:blur(20px)}
.mobile-bottom a{color:#94a3b8;transition:.25s ease}
.mobile-bottom a.active{color:#fff}
.mobile-bottom a.active:not(.nav-main-action) .nav-icon{background:linear-gradient(135deg,rgba(59,130,246,.36),rgba(124,58,237,.35));box-shadow:0 7px 18px rgba(59,130,246,.25);transform:translateY(-3px)}
.mobile-bottom .nav-main-action .nav-icon{background:linear-gradient(135deg,#3b82f6,#8b5cf6);box-shadow:0 12px 30px rgba(99,102,241,.45);animation:mainNavFloat 3s ease-in-out infinite}
@keyframes mainNavFloat{50%{transform:translateY(-5px)}}
.stagger-in{opacity:0;transform:translateY(14px);animation:staggerReveal .48s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--delay,0ms)}
@keyframes staggerReveal{to{opacity:1;transform:none}}
.confetti-piece{position:fixed;top:-20px;width:9px;height:15px;z-index:200;pointer-events:none;animation:confettiFall 1.5s ease-in forwards}
@keyframes confettiFall{to{transform:translate(var(--x),105vh) rotate(720deg);opacity:.15}}
.student-banner{position:relative;overflow:hidden;box-shadow:0 22px 55px rgba(67,56,202,.22)}
.quick-card b{display:grid;place-items:center;width:45px;height:45px;border-radius:15px;background:linear-gradient(135deg,#dbeafe,#ede9fe);color:#4338ca;transition:.3s ease}
.quick-card:hover b{transform:rotate(-7deg) scale(1.08)}
.id-card{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;transform-style:preserve-3d}
.id-card:hover{transform:perspective(900px) rotateY(-4deg) rotateX(2deg) translateY(-4px);box-shadow:0 30px 70px rgba(30,41,59,.22)}
.modal-shell.show .modal-card{animation:modalPop .32s cubic-bezier(.2,.8,.2,1)}
@keyframes modalPop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:820px){.premium-fab{right:15px;bottom:102px}.fab-toggle{width:52px;height:52px;border-radius:17px}.stat:hover,.panel:hover,.course-card:hover,.quick-card:hover{transform:none}.content{padding-bottom:108px}.mobile-bottom{animation:mobileNavEnter .55s cubic-bezier(.2,.8,.2,1)}}
@keyframes mobileNavEnter{from{transform:translateY(35px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){body:before,body:after,.logo,.logo:after,.hero,.student-banner,.admin-profile-hero,.fab-toggle,.mobile-bottom .nav-main-action .nav-icon{animation:none}.stagger-in{opacity:1;transform:none;animation:none}}
.online-pay-card{display:grid;grid-template-columns:1.25fr .9fr;gap:28px;padding:30px;border-radius:28px;margin-bottom:24px;background:linear-gradient(135deg,rgba(37,99,235,.13),rgba(124,58,237,.12));border:1px solid rgba(99,102,241,.2);position:relative;overflow:hidden}.online-pay-card:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(99,102,241,.12);right:-90px;top:-110px;filter:blur(4px)}.online-pay-card>*{position:relative;z-index:1}.gateway-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.gateway-badges span{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.7);font-size:12px;font-weight:800}.online-payment-form{background:rgba(255,255,255,.86);padding:20px;border-radius:22px;box-shadow:0 18px 45px rgba(30,41,59,.1)}.online-payment-form label{display:block;font-weight:700;margin-bottom:12px}.online-payment-form input,.online-payment-form select{width:100%;margin-top:7px}.pay-now-btn{width:100%;justify-content:center;min-height:48px}.online-payment-form small{display:block;text-align:center;margin-top:10px;color:#64748b}.reminder-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(10px);display:grid;place-items:center;z-index:9999;padding:18px;opacity:0;transition:.25s}.reminder-overlay.show{opacity:1}.reminder-popup,.notification-center{width:min(460px,100%);background:#fff;border-radius:30px;padding:28px;box-shadow:0 35px 90px rgba(15,23,42,.3);transform:translateY(25px) scale(.96);transition:.3s}.reminder-overlay.show .reminder-popup,.reminder-overlay.show .notification-center{transform:none}.reminder-popup{text-align:center}.reminder-visual{width:76px;height:76px;margin:-5px auto 18px;border-radius:24px;display:grid;place-items:center;font-size:34px;font-weight:900;color:white;background:linear-gradient(135deg,#2563eb,#7c3aed);box-shadow:0 18px 35px rgba(79,70,229,.3);animation:reminderPulse 1.8s infinite}.reminder-popup p{color:#64748b;line-height:1.7}.reminder-due{display:flex;justify-content:space-between;padding:14px 16px;border-radius:16px;background:#fff7ed;margin:18px 0;color:#9a3412}.reminder-actions{display:flex;justify-content:center;gap:10px;margin-top:22px}.notification-center{max-height:min(720px,90vh);overflow:auto}.notification-list{display:grid;gap:10px}.notification-item{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px;border:1px solid #e2e8f0;border-radius:18px}.notification-item.unread{background:#eff6ff;border-color:#bfdbfe}.notification-item p{margin:5px 0;color:#64748b;font-size:13px}.notification-symbol{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#e0e7ff;color:#4338ca;font-weight:900}.reminder-send-btn{border-color:#f59e0b!important;color:#b45309!important}@keyframes reminderPulse{50%{transform:translateY(-5px) scale(1.04)}}@media(max-width:760px){.online-pay-card{grid-template-columns:1fr;padding:20px;border-radius:22px}.online-payment-form{padding:16px}.reminder-popup,.notification-center{border-radius:24px;padding:22px}.reminder-actions{flex-direction:column}.reminder-actions>*{width:100%;justify-content:center}}

/* ===== Ultronyc Creative UI/UX Upgrade v4 ===== */
:root{--glass:rgba(255,255,255,.74);--glass-border:rgba(255,255,255,.62);--soft-shadow:0 20px 60px rgba(15,23,42,.11);--ring:rgba(99,102,241,.18)}
html{scroll-behavior:smooth}body{background:radial-gradient(circle at 10% 0%,rgba(59,130,246,.10),transparent 28%),radial-gradient(circle at 95% 12%,rgba(139,92,246,.10),transparent 30%),var(--bg);transition:background .35s,color .35s}
body.ui-ready .main{animation:pageEnter .52s cubic-bezier(.2,.8,.2,1)}
@keyframes pageEnter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
body:before,body:after{content:"";position:fixed;border-radius:50%;filter:blur(70px);z-index:-1;pointer-events:none;opacity:.45;animation:ambientFloat 12s ease-in-out infinite alternate}
body:before{width:260px;height:260px;background:#60a5fa;left:18%;top:5%}body:after{width:300px;height:300px;background:#c084fc;right:2%;bottom:2%;animation-delay:-5s}
@keyframes ambientFloat{to{transform:translate3d(30px,28px,0) scale(1.1)}}
.sidebar{border-right:1px solid rgba(255,255,255,.08);box-shadow:18px 0 50px rgba(15,23,42,.12);transition:width .3s,transform .3s}.sidebar:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(96,165,250,.18),transparent 30%);pointer-events:none}.sidebar>*{position:relative}.nav a{position:relative;overflow:hidden;transition:.22s}.nav a:before{content:"";position:absolute;inset:7px auto 7px 0;width:3px;border-radius:0 8px 8px 0;background:linear-gradient(#60a5fa,#a78bfa);transform:scaleY(0);transition:.22s}.nav a:hover{transform:translateX(3px)}.nav a.active:before{transform:scaleY(1)}.nav a.active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 9px 25px rgba(0,0,0,.12)}
.logo{position:relative;isolation:isolate}.logo:before{content:"";position:absolute;inset:-5px;border-radius:19px;background:linear-gradient(135deg,#60a5fa,#a78bfa,#2dd4bf);z-index:-1;filter:blur(8px);opacity:.55;animation:logoGlow 3s ease-in-out infinite}.logo:after{content:"";position:absolute;inset:2px;border:1px solid rgba(255,255,255,.38);border-radius:13px}@keyframes logoGlow{50%{opacity:.9;transform:scale(1.05)}}
.topbar{background:rgba(255,255,255,.72);border-color:rgba(226,232,240,.7);box-shadow:0 8px 35px rgba(15,23,42,.045)}.topbar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,#60a5fa,#8b5cf6,#2dd4bf,transparent);background-size:200% 100%;animation:topLine 5s linear infinite;opacity:.65}@keyframes topLine{to{background-position:-200% 0}}
.panel,.stat,.course-card,.quick-card{background:var(--glass);backdrop-filter:blur(20px);border-color:var(--glass-border);box-shadow:var(--soft-shadow)}
.hero,.student-banner{isolation:isolate}.hero:before,.student-banner:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 90deg,transparent,rgba(255,255,255,.16),transparent 28%);animation:heroSweep 8s linear infinite;z-index:-1}.hero:after{filter:blur(2px);animation:heroOrb 7s ease-in-out infinite alternate}@keyframes heroSweep{to{transform:rotate(360deg)}}@keyframes heroOrb{to{transform:translate(-35px,32px) scale(1.14)}}
.stat{min-height:132px}.stat span{font-weight:700}.stat strong{letter-spacing:-.04em}.stat:nth-child(4n+1){--stat-accent:#2563eb}.stat:nth-child(4n+2){--stat-accent:#7c3aed}.stat:nth-child(4n+3){--stat-accent:#0f9f8f}.stat:nth-child(4n+4){--stat-accent:#f59e0b}.stat:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 10px 10px 0;background:var(--stat-accent)}
th{background:rgba(248,250,252,.7);position:sticky;top:0;z-index:1}tbody tr{transition:.2s}tbody tr:hover{background:rgba(239,246,255,.7);transform:scale(1.002)}
.filters,.form-grid{background:rgba(248,250,252,.55);padding:14px;border:1px solid rgba(226,232,240,.75);border-radius:16px}.filters input,.filters select,label input,label select,label textarea{transition:border-color .2s,box-shadow .2s,transform .2s}.filters input:hover,.filters select:hover,label input:hover,label select:hover,label textarea:hover{border-color:#c7d2fe}.filters input:focus,label input:focus,label select:focus,label textarea:focus{transform:translateY(-1px)}
.ui-control{display:inline-grid;place-items:center;width:41px;height:41px;padding:0;border-radius:13px;border:1px solid rgba(99,102,241,.12);background:rgba(238,242,255,.82);color:#3730a3;font-size:18px;box-shadow:0 8px 20px rgba(99,102,241,.08)}
.sidebar-collapse{position:fixed;left:238px;top:92px;z-index:65;width:42px;height:42px;border:5px solid var(--bg);border-radius:50%;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;box-shadow:0 10px 25px rgba(79,70,229,.25);transition:left .3s,transform .2s}.sidebar-collapse:hover{transform:scale(1.07)}
body.sidebar-mini .sidebar{width:84px}body.sidebar-mini .main{margin-left:-176px}body.sidebar-mini .sidebar-collapse{left:62px}body.sidebar-mini .brand div:last-child,body.sidebar-mini .nav a span:not(.ico),body.sidebar-mini .nav-group-title{display:none}body.sidebar-mini .brand{justify-content:center;margin-inline:0}body.sidebar-mini .nav a{justify-content:center;padding-inline:8px}body.sidebar-mini .nav .ico{font-size:19px}
.page-progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,#2563eb,#8b5cf6,#14b8a6);z-index:9999;box-shadow:0 0 16px #6366f1;transition:width .08s linear}
.theme-fade{position:fixed;inset:0;background:var(--bg);z-index:9998;pointer-events:none;animation:themeFade .45s forwards}@keyframes themeFade{to{opacity:0}}
[data-theme="dark"]{--bg:#080d1a;--card:#111827;--text:#e5edf9;--muted:#94a3b8;--border:#243044;--glass:rgba(17,24,39,.78);--glass-border:rgba(148,163,184,.12);--soft-shadow:0 20px 60px rgba(0,0,0,.28)}
[data-theme="dark"] body{background:radial-gradient(circle at 10% 0%,rgba(37,99,235,.18),transparent 30%),radial-gradient(circle at 95% 12%,rgba(124,58,237,.16),transparent 30%),var(--bg)}[data-theme="dark"] .topbar{background:rgba(8,13,26,.75);border-color:#1e293b}[data-theme="dark"] .icon-btn,[data-theme="dark"] .ghost-btn,[data-theme="dark"] .ui-control{background:#172033;color:#dbeafe}[data-theme="dark"] th{background:rgba(15,23,42,.88)}[data-theme="dark"] tbody tr:hover{background:rgba(30,41,59,.72)}[data-theme="dark"] .filters,[data-theme="dark"] .form-grid,[data-theme="dark"] .course-meta div,[data-theme="dark"] .id-detail div{background:rgba(15,23,42,.65)}[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#0f172a!important;color:#e5edf9!important;border-color:#334155!important}[data-theme="dark"] .sidebar-collapse{border-color:var(--bg)}
/* Portal landing */
.portal-page{min-height:100vh;display:grid;place-items:center;padding:32px;overflow:hidden;position:relative;background:linear-gradient(135deg,#071126,#172554 40%,#4c1d95)}.portal-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.7;animation:portalFloat 8s ease-in-out infinite alternate}.portal-orb.one{width:320px;height:320px;left:-90px;top:-70px;background:radial-gradient(circle at 35% 35%,#60a5fa,transparent 66%)}.portal-orb.two{width:390px;height:390px;right:-130px;bottom:-160px;background:radial-gradient(circle at 35% 35%,#c084fc,transparent 66%);animation-delay:-3s}.portal-orb.three{width:120px;height:120px;right:18%;top:12%;background:linear-gradient(135deg,#2dd4bf,#2563eb);filter:blur(18px);animation-delay:-6s}@keyframes portalFloat{to{transform:translate(35px,28px) scale(1.08)}}.portal-shell{width:min(1080px,100%);display:grid;grid-template-columns:1.12fr .88fr;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:34px;overflow:hidden;backdrop-filter:blur(24px);box-shadow:0 40px 110px rgba(0,0,0,.35);position:relative;z-index:1}.portal-showcase{padding:54px;color:#fff;position:relative;overflow:hidden}.portal-showcase:after{content:"";position:absolute;width:240px;height:240px;border:1px solid rgba(255,255,255,.15);border-radius:40%;right:-65px;bottom:-85px;animation:spinSlow 18s linear infinite}@keyframes spinSlow{to{transform:rotate(360deg)}}.portal-showcase h1{font-size:clamp(36px,5vw,62px);line-height:1.03;letter-spacing:-.05em;margin:28px 0 18px}.portal-showcase p{color:#cbd5e1;max-width:570px;line-height:1.75}.portal-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:99px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);font-size:12px;font-weight:800}.portal-pill i{width:8px;height:8px;border-radius:50%;background:#2dd4bf;box-shadow:0 0 0 6px rgba(45,212,191,.13);animation:notifPulse 1.8s infinite}.portal-features{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:34px}.portal-feature{padding:14px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10)}.portal-feature b{display:block;font-size:19px}.portal-feature small{color:#b9c5df}.portal-login{background:rgba(255,255,255,.94);padding:48px;display:flex;flex-direction:column;justify-content:center}.portal-login h2{font-size:30px;margin:24px 0 5px}.portal-login>p{color:#64748b;margin-top:0}.portal-choice{display:grid;gap:12px;margin-top:24px}.portal-choice a{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:13px;padding:14px;border-radius:18px;border:1px solid #e2e8f0;background:#fff;transition:.25s;box-shadow:0 8px 22px rgba(15,23,42,.05)}.portal-choice a:hover{transform:translateY(-3px);border-color:#a5b4fc;box-shadow:0 18px 40px rgba(79,70,229,.14)}.choice-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:21px;background:linear-gradient(135deg,#dbeafe,#ede9fe)}.portal-choice b{display:block}.portal-choice small{color:#64748b}.choice-arrow{font-size:22px;color:#6366f1}.portal-footer{margin-top:24px;text-align:center;color:#94a3b8;font-size:12px}
@media(max-width:900px){.sidebar-collapse{display:none}.portal-shell{grid-template-columns:1fr}.portal-showcase{padding:38px}.portal-login{padding:38px}.portal-features{grid-template-columns:repeat(3,1fr)}body.sidebar-mini .main{margin-left:0}}
@media(max-width:560px){.portal-page{padding:14px}.portal-shell{border-radius:25px}.portal-showcase,.portal-login{padding:26px 21px}.portal-showcase h1{font-size:38px}.portal-features{grid-template-columns:1fr}.portal-choice a{grid-template-columns:44px 1fr auto;padding:12px}.choice-icon{width:42px;height:42px}.page-head .primary-btn,.page-head .ghost-btn{width:100%;text-align:center}.form-actions{position:sticky;bottom:82px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);padding:10px;border-radius:15px;z-index:5}[data-theme="dark"] .form-actions{background:rgba(15,23,42,.92)}}


/* ===== Stable UI Fix v4.1: disable intrusive motion ===== */
.confetti-piece,
.page-progress,
.theme-fade,
.portal-orb,
body::before,
body::after { display:none !important; }

.stagger-in,
body.ui-ready .main,
.mobile-bottom,
.logo,
.logo::before,
.logo::after,
.topbar::after,
.hero::before,
.hero::after,
.student-banner::before,
.student-banner::after,
.admin-profile-hero::before,
.admin-profile-hero::after,
.notification-dot,
.mobile-bottom .nav-main-action .nav-icon,
.reminder-visual {
  animation:none !important;
  transform:none !important;
}

.stagger-in { opacity:1 !important; }
html { scroll-behavior:smooth; }

/* ===== Admin Upgrade v5: Search, reminders, users & role access ===== */
.directory-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 210px 180px auto;gap:12px;align-items:center;margin-bottom:12px}.search-box{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:var(--card);border-radius:14px;padding:0 14px;min-height:46px}.search-box span{font-size:22px;color:#64748b}.search-box input{border:0!important;box-shadow:none!important;background:transparent!important;padding:10px 0!important;width:100%;min-width:0}.search-box.compact{min-height:40px;max-width:260px}.directory-toolbar select{height:46px}.table-summary{display:flex;justify-content:space-between;gap:15px;padding:10px 2px 16px;color:var(--muted);font-size:13px}.table-summary span:first-child{font-weight:800;color:var(--text)}.reminder-btn{border:0;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border-radius:10px;font-weight:800;padding:10px 12px;cursor:pointer;white-space:nowrap}.access-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}.users-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,.75fr);gap:18px;align-items:start}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}.role-list{display:grid;gap:12px}.role-card{border:1px solid var(--border);border-radius:16px;padding:15px;background:rgba(248,250,252,.58);display:grid;grid-template-columns:1fr auto;gap:10px}.role-card p{font-size:13px;color:var(--muted);margin:4px 0}.role-card small{color:var(--muted)}.role-actions{display:flex;gap:7px}.role-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}.role-chips span{font-size:11px;font-weight:700;padding:6px 8px;border-radius:99px;background:#eef2ff;color:#4338ca}.modal-overlay{position:fixed;inset:0;background:rgba(2,6,23,.62);backdrop-filter:blur(5px);z-index:500;display:none;align-items:center;justify-content:center;padding:20px}.modal-overlay.show{display:flex}.app-modal{width:min(720px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:24px;padding:24px;box-shadow:0 35px 100px rgba(0,0,0,.3)}.wide-modal{width:min(900px,100%)}.permission-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}.permission-item{display:flex!important;flex-direction:row!important;align-items:center;gap:11px;padding:13px;border:1px solid var(--border);border-radius:14px;background:rgba(248,250,252,.6)}.permission-item input{width:20px;height:20px}.permission-item span{display:grid}.permission-item small{color:var(--muted)}.access-denied{text-align:center;padding:60px 20px}.access-lock{font-size:52px;margin-bottom:15px}.full{grid-column:1/-1}
[data-theme="dark"] .role-card,[data-theme="dark"] .permission-item{background:rgba(15,23,42,.65)}[data-theme="dark"] .role-chips span{background:#312e81;color:#e0e7ff}
@media(max-width:1100px){.directory-toolbar{grid-template-columns:1fr 1fr}.search-box{grid-column:1/-1}.users-layout{grid-template-columns:1fr}.access-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.directory-panel{padding:14px}.directory-toolbar{grid-template-columns:1fr}.search-box{grid-column:auto}.directory-toolbar select,.directory-toolbar .ghost-btn{width:100%}.table-summary{display:block}.table-summary span{display:block;margin:3px 0}.responsive-table thead{display:none}.responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%}.responsive-table tr{padding:13px;border:1px solid var(--border);border-radius:15px;margin-bottom:12px;background:var(--card)}.responsive-table td{border:0!important;padding:7px 4px!important;display:grid;grid-template-columns:105px minmax(0,1fr);gap:10px;align-items:center}.responsive-table td:before{content:attr(data-label);font-size:11px;font-weight:800;text-transform:uppercase;color:var(--muted)}.responsive-table td:first-child{grid-template-columns:1fr}.responsive-table td:first-child:before{display:none}.responsive-table .table-actions{justify-content:flex-start;flex-wrap:wrap}.access-stats{grid-template-columns:1fr}.permission-grid{grid-template-columns:1fr}.app-modal{padding:18px;border-radius:20px}.panel-title{align-items:flex-start;flex-wrap:wrap}.search-box.compact{max-width:none;width:100%}.role-card{grid-template-columns:1fr}.role-actions{grid-row:2}.role-chips{grid-row:3}.page-head{align-items:stretch}}

/* ===== Creative Login & Logout v5.1 ===== */
.login-page{min-height:100vh;margin:0;background:#07142f;color:#13203b;overflow-x:hidden}.login-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 12% 15%,rgba(61,91,255,.3),transparent 34%),radial-gradient(circle at 82% 80%,rgba(30,211,191,.18),transparent 32%),linear-gradient(135deg,#07142f 0%,#10245c 55%,#111944 100%)}.login-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 92%)}.login-glow{position:absolute;border-radius:50%;filter:blur(4px);opacity:.7}.glow-one{width:360px;height:360px;background:rgba(101,86,255,.18);top:-130px;right:22%}.glow-two{width:420px;height:420px;background:rgba(16,216,184,.1);bottom:-180px;left:10%}.login-shell{position:relative;z-index:2;min-height:100vh;display:grid;grid-template-columns:minmax(420px,1.08fr) minmax(430px,.92fr);max-width:1450px;margin:auto}.login-story{padding:clamp(40px,6vw,92px);display:flex;flex-direction:column;justify-content:space-between;color:white}.login-brand,.mobile-login-brand{display:flex;align-items:center;gap:14px}.login-brand .logo,.mobile-login-brand .logo{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(135deg,#55b9ff,#7954ff);box-shadow:0 14px 35px rgba(62,98,255,.35)}.login-brand strong,.mobile-login-brand strong{display:block;font-size:20px}.login-brand small,.mobile-login-brand small{display:block;color:#a8b7d8;margin-top:3px}.story-copy{max-width:700px;margin:60px 0}.login-kicker{display:inline-flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.06);font-size:12px;font-weight:800;letter-spacing:.13em;color:#cad7ff}.login-kicker i{width:8px;height:8px;border-radius:50%;background:#42e9c5;box-shadow:0 0 18px #42e9c5}.story-copy h1{font-size:clamp(42px,5.3vw,76px);line-height:1.03;letter-spacing:-.055em;margin:25px 0 22px;max-width:850px}.story-copy p{font-size:18px;line-height:1.75;color:#b8c6e4;max-width:670px}.login-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:650px}.login-stats article{padding:20px;border:1px solid rgba(255,255,255,.11);border-radius:20px;background:rgba(255,255,255,.06);backdrop-filter:blur(15px)}.login-stats b{display:block;font-size:24px}.login-stats span{font-size:12px;color:#aebddd}.login-visual-card{display:flex;align-items:center;gap:14px;max-width:530px;padding:16px 18px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(8,22,57,.5);box-shadow:0 20px 55px rgba(0,0,0,.18)}.visual-icon{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#25d3ae;color:#07283a;font-weight:900}.login-visual-card div{flex:1}.login-visual-card b,.login-visual-card small{display:block}.login-visual-card small{color:#99aacc;margin-top:3px}.visual-chip{font-size:10px;letter-spacing:.1em;font-weight:900;color:#47e7c3}.login-panel-wrap{padding:35px;display:grid;place-items:center}.login-card{width:min(100%,520px);padding:clamp(28px,4vw,48px);border-radius:34px;background:rgba(255,255,255,.97);box-shadow:0 40px 100px rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.55)}.mobile-login-brand{display:none;margin-bottom:30px}.login-card h2{font-size:34px;letter-spacing:-.035em;margin:7px 0 8px}.login-subtitle{color:#71809c;margin:0 0 24px}.login-tabs{display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:15px;background:#edf1f8;margin-bottom:25px}.login-tabs button{border:0;background:transparent;padding:12px;border-radius:11px;font:inherit;font-weight:800;color:#71809b;cursor:pointer}.login-tabs button.active{background:#fff;color:#2846d8;box-shadow:0 5px 18px rgba(40,65,140,.12)}.creative-login-form label>span{display:block;font-size:12px;font-weight:800;color:#44516a;margin:0 0 8px}.creative-login-form>label{display:block;margin-bottom:17px}.login-field{display:flex;align-items:center;gap:11px;border:1.5px solid #dae1ec;border-radius:14px;padding:0 14px;background:#fbfcff;transition:.2s}.login-field:focus-within{border-color:#5067ed;box-shadow:0 0 0 4px rgba(80,103,237,.11);background:#fff}.login-field i{font-style:normal;color:#65728c}.login-field input{height:52px;min-width:0;flex:1;border:0;outline:0;background:transparent;font:inherit;color:#19243c}.login-field button{border:0;background:none;color:#4359d5;font-weight:800;cursor:pointer}.login-options{display:flex;align-items:center;justify-content:space-between;color:#7e8aa0;font-size:12px;margin-top:-3px}.remember-check{display:flex!important;align-items:center;gap:7px;margin:0!important}.remember-check span{margin:0!important}.login-error{min-height:21px;color:#d9344d;font-size:12px;font-weight:700;margin:9px 0 3px}.login-submit{width:100%;height:55px;border:0;border-radius:15px;background:linear-gradient(100deg,#2b63e9,#6d37ed);color:#fff;font:inherit;font-weight:900;display:flex;align-items:center;justify-content:center;gap:15px;cursor:pointer;box-shadow:0 15px 30px rgba(75,67,222,.24);transition:.2s}.login-submit:hover{transform:translateY(-2px);box-shadow:0 20px 35px rgba(75,67,222,.3)}.login-submit b{font-size:22px}.login-hint{margin-top:15px;padding:11px 13px;border-radius:12px;background:#f2f6ff;color:#63708b;font-size:12px}.login-divider{display:flex;align-items:center;gap:10px;color:#a0aabc;font-size:11px;margin:20px 0}.login-divider:before,.login-divider:after{content:"";height:1px;background:#e3e7ef;flex:1}.registration-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:#1d2940;border:1px solid #e3e8f1;border-radius:15px;padding:14px;transition:.2s}.registration-link:hover{border-color:#8ca0f5;background:#f8f9ff}.registration-link>span{width:37px;height:37px;border-radius:11px;display:grid;place-items:center;background:#eeeaff;color:#6547e8}.registration-link div{flex:1}.registration-link b,.registration-link small{display:block}.registration-link small{font-size:11px;color:#8490a5;margin-top:3px}.login-card footer{text-align:center;color:#a0aabc;font-size:11px;margin-top:23px}.login-shake{animation:loginShake .38s linear}@keyframes loginShake{25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}.logout-btn{height:45px;padding:0 15px;border:1px solid #e1e6ef;border-radius:14px;background:#fff;color:#c92f45;font:inherit;font-weight:800;display:flex;align-items:center;gap:7px;cursor:pointer;transition:.2s}.logout-btn:hover{background:#fff2f4;border-color:#ffc8d0}.reminder-quick{color:#8a4a00!important;background:#fff7e7!important;border-color:#ffdf9d!important}
@media(max-width:980px){.login-shell{grid-template-columns:1fr}.login-story{display:none}.login-panel-wrap{min-height:100vh;padding:22px}.mobile-login-brand{display:flex}.login-card{border-radius:26px}.login-bg{background:radial-gradient(circle at 20% 10%,rgba(74,100,255,.38),transparent 35%),linear-gradient(145deg,#07142f,#152968)}}
@media(max-width:560px){.login-panel-wrap{padding:12px}.login-card{padding:25px 19px;border-radius:22px}.login-card h2{font-size:29px}.login-tabs button{font-size:12px;padding:11px 7px}.logout-label{display:none}.logout-btn{width:45px;padding:0;justify-content:center}.top-actions{gap:7px}.directory-toolbar{grid-template-columns:1fr!important}.directory-toolbar .search-box{grid-column:1/-1}.table-summary{align-items:flex-start;gap:5px;flex-direction:column}}