:root{--navy:#022247;--blue:#064a8b;--soft:#a4b3d3;--gold:#c3a138;--bg:#f4f7fb;--text:#26364a;--sidebar-w:265px;--sidebar-collapsed-w:78px}*{box-sizing:border-box}html,body{min-height:100%;font-family:'Kanit',sans-serif;background:var(--bg);color:var(--text)}body{margin:0}.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);background:linear-gradient(160deg,var(--navy),var(--blue));color:#fff;z-index:1040;display:flex;flex-direction:column;transition:.28s ease;box-shadow:8px 0 30px rgba(2,34,71,.14)}.sidebar-brand{height:76px;display:flex;align-items:center;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.12)}.brand-mark{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(195,161,56,.18);color:#f0d36c;font-size:21px;margin-right:12px}.sidebar-brand strong{display:block;font-size:16px}.sidebar-brand small{display:block;color:#cad7e7;font-size:11px;margin-top:2px}.sidebar-nav{padding:18px 12px;flex:1;overflow-y:auto}.sidebar-nav a{display:flex;align-items:center;color:#dce7f3;padding:11px 14px;border-radius:8px;margin-bottom:5px;text-decoration:none;transition:.2s ease}.sidebar-nav a:hover{color:#fff;background:rgba(255,255,255,.11);transform:translateX(3px)}.sidebar-nav a.active{color:#fff;background:rgba(255,255,255,.15);box-shadow:inset 3px 0 0 var(--gold),0 5px 14px rgba(0,0,0,.08);font-weight:500}.sidebar-nav a.active i{color:#f0d36c}.sidebar-nav .danger-link.active{color:#fff;background:rgba(255,255,255,.13)}.sidebar-nav i{width:25px;text-align:center;margin-right:9px}.sidebar-nav .danger-link{color:#ffd1d1}.sidebar-footer-note{padding:16px 20px;font-size:11px;color:#b9cce0;border-top:1px solid rgba(255,255,255,.12)}.main-area{min-height:100vh;min-width:0;margin-left:var(--sidebar-w);display:flex;flex-direction:column;transition:margin-left .28s ease}.top-navbar{height:76px;position:sticky;top:0;z-index:1020;box-shadow:0 2px 18px rgba(30,50,70,.08)}.hamburger{font-size:20px;color:var(--navy)!important}.navbar-title{font-weight:600;color:var(--navy);font-size:18px}.user-mini{align-items:center}.user-mini img,.avatar-placeholder{width:38px;height:38px;border-radius:50%;object-fit:cover;margin-right:9px;border:2px solid #e2e9f2}.avatar-placeholder{display:grid;place-items:center;background:#eef3f8;color:var(--blue)}.user-mini strong,.user-mini small{display:block;line-height:1.15}.user-mini strong{font-size:12px}.user-mini small{font-size:10px;color:#8896a6;margin-top:4px}.content-area{padding:26px;flex:1;min-width:0;width:100%}.app-footer{padding:14px 24px;text-align:center;color:#76869a;background:#fff;border-top:1px solid #e9eef4;font-size:12px}.sidebar-overlay{display:none}.card{border:0;border-radius:10px!important;box-shadow:0 7px 25px rgba(31,62,95,.08)}.card-hover{transition:.22s ease}.card-hover:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(31,62,95,.13)}.page-head{background:linear-gradient(120deg,#fff,#f5f8fc);border-left:4px solid var(--gold);padding:18px 22px;border-radius:9px;margin-bottom:22px;box-shadow:0 6px 20px rgba(31,62,95,.06)}.page-head h1{font-size:22px;color:var(--navy);margin:0 0 5px;font-weight:600}.page-head p{margin:0;color:#75859a;font-size:13px}.stat-card{padding:19px;min-height:116px;position:relative;overflow:hidden}.stat-card .icon{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;background:#eef4fa;color:var(--blue);font-size:20px}.stat-card .number{font-size:29px;font-weight:700;color:var(--navy);line-height:1}.stat-card .label{font-size:12px;color:#7b8a9c;margin-top:7px}.stat-card.gold .icon{background:#faf5e8;color:#ad8b22}.btn{border-radius:7px!important;text-transform:none!important;font-weight:500;box-shadow:none!important;margin:0!important}.btn-primary{background:var(--blue)!important}.btn-deep-navy{background:var(--navy);color:#fff}.btn-deep-navy:hover{color:#fff;background:#031a35}.btn-gold{background:var(--gold);color:#fff}.page-actions,.form-actions,.result-actions,.table-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.page-actions{justify-content:flex-end;margin-bottom:16px}.form-actions{justify-content:flex-end;margin-top:18px}.result-actions{justify-content:center;margin-top:4px}.table-actions{gap:6px;flex-wrap:nowrap}.table-actions .btn-sm{min-width:36px;padding:.375rem .62rem}.stacked-actions{display:flex;flex-direction:column;gap:8px}.stacked-actions .btn{width:100%}.exam-submit-row{gap:12px}.form-control,.custom-select{border-radius:7px!important;border:1px solid #dbe3ec;height:44px}.form-control:focus,.custom-select:focus{border-color:var(--blue);box-shadow:0 0 0 .16rem rgba(6,74,139,.12)}textarea.form-control{height:auto}.form-group label{font-size:12px;font-weight:500;color:#52657b;margin-bottom:7px}.profile-photo{width:118px;height:118px;border-radius:14px;object-fit:cover;border:4px solid #eef3f8}.profile-photo-lg{width:150px;height:150px;border-radius:16px;object-fit:cover}.badge{border-radius:5px;padding:.45em .65em}.exam-question{border-left:4px solid #dce6f2}.question-number{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--navy);color:#fff;margin-right:8px;font-size:13px}.choice-row{display:block;border:1px solid #e1e7ef;border-radius:8px;padding:11px 13px;margin-bottom:9px;cursor:pointer;transition:.2s}.choice-row:hover{border-color:#8caecf;background:#f7fbff}.choice-row input{margin-right:8px}.status-pass{color:#18894b}.status-wait{color:#ba7e10}.auth-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(140deg,rgba(2,34,71,.96),rgba(6,74,139,.91)),url('../certificate/4.jpg') center/cover fixed;padding:25px}.auth-card{width:100%;max-width:530px;background:rgba(255,255,255,.97);border-radius:12px;padding:30px;box-shadow:0 25px 70px rgba(0,0,0,.28);animation:authIn .55s ease}.auth-logo{width:62px;height:62px;border-radius:14px;background:linear-gradient(140deg,var(--navy),var(--blue));color:#fff;display:grid;place-items:center;font-size:27px;margin:0 auto 15px;box-shadow:0 10px 25px rgba(6,74,139,.26)}.auth-card h1{text-align:center;font-size:22px;color:var(--navy);font-weight:600}.auth-card .subtitle{text-align:center;color:#718096;font-size:12px;line-height:1.65;margin-bottom:22px}.auth-footer{text-align:center;font-size:11px;color:#8997a7;margin-top:20px}@keyframes authIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}.photo-preview{width:92px;height:92px;border-radius:10px;object-fit:cover;background:#f1f4f8;display:none;margin:10px auto}.table td,.table th{vertical-align:middle;font-size:12px}.table thead th{color:var(--navy);font-weight:600;border-top:0}.gold-line{height:3px;width:56px;background:var(--gold);border-radius:2px;margin:8px 0 18px}.result-score{font-size:64px;font-weight:700;line-height:1;color:var(--navy)}.result-score small{font-size:24px;color:#8a99a9}.success-glow{box-shadow:0 0 0 6px rgba(31,154,86,.08),0 12px 35px rgba(31,154,86,.12)}.danger-zone{border:1px solid #efcaca!important;background:#fffafa}.admin-note{background:#fff9e9;border-left:4px solid var(--gold);padding:12px 15px;border-radius:6px;font-size:12px}.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed-w);transform:none}.sidebar-collapsed .main-area{margin-left:var(--sidebar-collapsed-w)}.sidebar-collapsed .sidebar-brand{justify-content:center;padding:0}.sidebar-collapsed .sidebar-brand-text{display:none}.sidebar-collapsed .brand-mark{margin-right:0}.sidebar-collapsed .sidebar-nav{padding:18px 9px;overflow:visible}.sidebar-collapsed .sidebar-nav a{position:relative;justify-content:center;padding:12px 0}.sidebar-collapsed .sidebar-nav a:hover{transform:none}.sidebar-collapsed .sidebar-nav a i{width:100%;margin-right:0;font-size:18px}.sidebar-collapsed .sidebar-nav a span{display:none}.sidebar-collapsed .sidebar-nav a::after{content:attr(data-label);position:absolute;left:62px;top:50%;transform:translate(7px,-50%);white-space:nowrap;background:#022247;color:#fff;padding:7px 10px;border-radius:6px;font-size:11px;font-weight:400;box-shadow:0 8px 20px rgba(2,34,71,.22);opacity:0;visibility:hidden;transition:.18s ease;z-index:1080;pointer-events:none}.sidebar-collapsed .sidebar-nav a:hover::after{opacity:1;visibility:visible;transform:translate(0,-50%)}.sidebar-collapsed .sidebar-footer-note{padding:15px 0;text-align:center}.sidebar-collapsed .sidebar-footer-note span{display:none}.sidebar-collapsed .sidebar-footer-note i{margin:0!important;font-size:16px}@media(max-width:991.98px){.sidebar,.sidebar-collapsed .sidebar{width:var(--sidebar-w);transform:translateX(calc(-1 * var(--sidebar-w)))}.main-area,.sidebar-collapsed .main-area{margin-left:0}.sidebar-collapsed .sidebar-brand{justify-content:flex-start;padding:0 22px}.sidebar-collapsed .sidebar-brand-text{display:block}.sidebar-collapsed .brand-mark{margin-right:12px}.sidebar-collapsed .sidebar-nav{padding:18px 12px;overflow-y:auto}.sidebar-collapsed .sidebar-nav a{justify-content:flex-start;padding:11px 14px}.sidebar-collapsed .sidebar-nav a i{width:25px;margin-right:9px;font-size:inherit}.sidebar-collapsed .sidebar-nav a span{display:inline}.sidebar-collapsed .sidebar-nav a::after{display:none}.sidebar-collapsed .sidebar-footer-note{padding:16px 20px;text-align:left}.sidebar-collapsed .sidebar-footer-note span{display:inline}.app-shell.mobile-sidebar-open .sidebar,.sidebar-collapsed.mobile-sidebar-open .sidebar{transform:translateX(0)}.app-shell.mobile-sidebar-open .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1035}.content-area{padding:18px}.top-navbar{height:66px}.page-head h1{font-size:19px}.role-learner .sidebar,.role-learner .sidebar-overlay{display:none!important}.role-learner .hamburger{display:none}.mobile-app-title{display:flex;flex-direction:column;min-width:0;line-height:1.15}.mobile-app-title strong{font-size:13px;color:var(--navy);font-weight:600}.mobile-app-title small{font-size:9px;color:#8b99a9;margin-top:3px;max-width:185px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-learner .content-area{padding-bottom:92px}.role-learner .app-footer{margin-bottom:68px}.mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:1060;display:flex;align-items:stretch;justify-content:space-around;height:68px;padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.98);border-top:1px solid #e2e9f2;box-shadow:0 -7px 24px rgba(2,34,71,.10);backdrop-filter:blur(12px)}.mobile-bottom-nav a{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#7b8a9c;text-decoration:none;font-size:10px;font-weight:500;transition:.18s ease}.mobile-bottom-nav a i{font-size:18px;line-height:1}.mobile-bottom-nav a.active{color:var(--blue)}.mobile-bottom-nav a.active i{color:var(--blue)}.mobile-bottom-nav a.active::before{content:"";position:absolute;top:0;width:34px;height:3px;border-radius:0 0 4px 4px;background:var(--gold)}.mobile-bottom-nav a:active{background:#f4f7fb}.logout-button{min-width:38px}.role-learner .logout-button{padding:.375rem .6rem}.role-learner .logout-label{display:none}.role-learner .logout-button i{margin:0!important}}@media(min-width:992px){.mobile-bottom-nav{display:none!important}}@media(max-width:575.98px){.auth-card{padding:23px 18px}.content-area{padding:14px}.role-learner .content-area{padding-bottom:92px}.stat-card{min-height:104px}.result-score{font-size:54px}.table-responsive{border-radius:8px}.page-head{padding:16px}.page-head p{font-size:12px}.page-actions .btn{width:100%}.form-actions,.result-actions{align-items:stretch;flex-direction:column}.form-actions .btn,.result-actions .btn{width:100%}.table-actions{flex-wrap:wrap}.exam-submit-row{align-items:stretch!important}.exam-submit-row .btn{width:100%}}

/* Layout stability for tables/charts when sidebar width changes */
.card,.table-responsive,.dataTables_wrapper{max-width:100%;min-width:0}
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dataTables_wrapper{width:100%!important}
.dataTables_wrapper .row{margin-left:0;margin-right:0}
.dataTables_wrapper .row>div{padding-left:6px;padding-right:6px}
.dataTables_wrapper table.dataTable{width:100%!important}
.swal2-popup{font-family:'Kanit',sans-serif!important;border-radius:12px!important}
.swal2-title{color:#022247!important}
.swal2-confirm,.swal2-cancel{border-radius:7px!important}


/* ===== Premium Login Branding / Amphawa x fordev22 ===== */
.auth-page{position:relative;overflow-x:hidden}
.auth-card-premium{position:relative;z-index:3;max-width:560px;padding:28px 32px 30px;overflow:hidden;border:1px solid rgba(255,255,255,.72);box-shadow:0 28px 80px rgba(1,22,48,.34),0 0 0 1px rgba(164,179,211,.10);backdrop-filter:blur(12px)}
.auth-card-premium::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--navy),var(--blue),var(--gold),var(--blue),var(--navy))}
.auth-brand-duo{display:flex;align-items:center;justify-content:center;gap:18px;min-height:96px;margin:2px auto 5px}
.auth-brand-logo{display:flex;align-items:center;justify-content:center;background:transparent}
.fordev-logo-wrap{background:transparent!important;box-shadow:none!important;border:none!important}
.fordev-logo-wrap img{display:block;max-width:100%;max-height:100%;object-fit:contain;background:transparent!important;filter:drop-shadow(0 4px 10px rgba(2,34,71,.08))}
.college-logo-wrap{width:88px;height:88px;border-radius:50%;padding:2px;box-shadow:0 5px 18px rgba(2,34,71,.10)}
.college-logo-wrap img{width:100%;height:100%;border-radius:50%;object-fit:contain;display:block}
.fordev-logo-wrap{width:180px;height:76px;padding:4px 0}
.brand-collab-mark{width:32px;height:32px;display:grid;place-items:center;flex:0 0 32px;border:1px solid #dbe4ee;background:#f8fafc;border-radius:50%;color:var(--navy);font-size:20px;font-weight:400;box-shadow:0 4px 12px rgba(2,34,71,.08)}
.auth-brand-caption{text-align:center;font-size:10px;color:#91a0b1;letter-spacing:.02em;margin-top:-3px;margin-bottom:13px}
.auth-brand-caption span{color:var(--gold);font-weight:600;margin:0 4px}
.auth-heading-icon{width:46px;height:46px;border-radius:11px;background:linear-gradient(145deg,var(--navy),var(--blue));color:#fff;display:grid;place-items:center;margin:0 auto 10px;font-size:19px;box-shadow:0 9px 22px rgba(6,74,139,.23)}
.admin-heading-icon{background:linear-gradient(145deg,#031b38,var(--navy))}
.auth-card-premium h1{margin-bottom:5px}
.auth-card-premium .subtitle{margin-bottom:18px}
.auth-input-group .input-group-text{height:44px;min-width:46px;justify-content:center;border:1px solid #dbe3ec;border-right:0;background:#f5f8fb;color:var(--blue);border-radius:7px 0 0 7px!important}
.auth-input-group .form-control{border-left:0;border-radius:0 7px 7px 0!important;padding-left:7px}
.auth-input-group:focus-within .input-group-text{border-color:var(--blue);background:#f1f6fb;color:var(--navy)}
.auth-login-btn{height:46px;margin-top:4px!important;letter-spacing:.01em}
.auth-links a{font-size:12px;font-weight:500;color:var(--blue)}
.auth-links a:hover{color:var(--navy)}

/* Learner login: subtle AI motion only; keeps form readable */
.learner-auth-page{background:linear-gradient(140deg,rgba(2,34,71,.94),rgba(6,74,139,.88)),url('../certificate/4.jpg') center/cover fixed}
.auth-ai-scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ai-orb{position:absolute;border-radius:50%;border:1px solid rgba(164,179,211,.30);box-shadow:0 0 55px rgba(90,163,225,.12),inset 0 0 40px rgba(255,255,255,.05);animation:authOrbFloat 10s ease-in-out infinite}
.orb-one{width:310px;height:310px;left:-95px;top:8%;background:radial-gradient(circle at 58% 45%,rgba(75,165,240,.15),rgba(2,34,71,.02) 62%,transparent 70%)}
.orb-two{width:430px;height:430px;right:-155px;bottom:-90px;animation-delay:-3.5s;background:radial-gradient(circle at 38% 35%,rgba(164,179,211,.13),rgba(6,74,139,.03) 62%,transparent 72%)}
.orb-three{width:150px;height:150px;right:12%;top:9%;animation-delay:-6s;border-color:rgba(195,161,56,.18)}
.ai-grid{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(164,179,211,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(164,179,211,.11) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 85%);animation:authGridShift 18s linear infinite}
.ai-circuit{position:absolute;width:260px;height:110px;opacity:.35;animation:authCircuitFloat 8s ease-in-out infinite}
.ai-circuit::before,.ai-circuit::after,.ai-circuit i{content:"";position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(195,214,234,.75),transparent)}
.ai-circuit::before{top:20px;left:0;width:90%}.ai-circuit::after{top:58px;left:20%;width:76%}.ai-circuit i:nth-child(1){top:88px;left:5%;width:58%}.ai-circuit i:nth-child(2){width:7px;height:7px;border-radius:50%;background:#c3a138;top:17px;left:46%;box-shadow:0 0 10px rgba(195,161,56,.55)}.ai-circuit i:nth-child(3){width:6px;height:6px;border-radius:50%;background:#a4b3d3;top:55px;left:72%}
.circuit-one{left:5%;bottom:9%;transform:rotate(-8deg)}
.circuit-two{right:4%;top:18%;transform:rotate(12deg);animation-delay:-4s}
@keyframes authOrbFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(16px,-18px,0) scale(1.035)}}
@keyframes authGridShift{from{background-position:0 0,0 0}to{background-position:48px 48px,48px 48px}}
@keyframes authCircuitFloat{0%,100%{margin-top:0;opacity:.25}50%{margin-top:-14px;opacity:.48}}

.admin-auth-page{background:linear-gradient(145deg,rgba(2,34,71,.97),rgba(6,74,139,.92)),url('../certificate/4.jpg') center/cover fixed}
.admin-auth-card{max-width:535px}

@media(max-width:575.98px){
  .auth-page{padding:16px 12px;align-items:center}
  .auth-card-premium{padding:22px 17px 23px;border-radius:11px}
  .auth-brand-duo{gap:11px;min-height:86px;margin-top:0}
  .college-logo-wrap{width:76px;height:76px}
  .fordev-logo-wrap{width:155px;height:66px}
  .brand-collab-mark{width:27px;height:27px;flex-basis:27px;font-size:18px}
  .auth-brand-caption{font-size:9px;margin-bottom:11px}
  .auth-heading-icon{width:43px;height:43px;margin-bottom:9px}
  .auth-card-premium h1{font-size:21px}
  .auth-card-premium .subtitle{font-size:11px;line-height:1.55;margin-bottom:17px}
  .learner-auth-page .form-group{margin-bottom:16px}
  .learner-auth-page .form-group label{font-size:13px;margin-bottom:8px}
  .learner-auth-page .auth-input-group .input-group-text{height:54px;min-width:52px;font-size:17px}
  .learner-auth-page .auth-input-group .form-control{height:54px!important;font-size:16px!important;padding:12px 12px 12px 9px}
  .learner-auth-page .auth-input-group .form-control::placeholder{font-size:13px;color:#a1adba}
  .learner-auth-page .auth-login-btn{height:52px;font-size:15px}
  .auth-links{line-height:1.8}
  .auth-footer{margin-top:16px;font-size:10px}
  .orb-one{width:230px;height:230px;left:-120px}.orb-two{width:310px;height:310px;right:-165px}.orb-three{display:none}.ai-circuit{opacity:.2}
}

@media(max-width:360px){
  .auth-brand-duo{gap:7px}.college-logo-wrap{width:68px;height:68px}.fordev-logo-wrap{width:132px}.brand-collab-mark{width:24px;height:24px;flex-basis:24px;font-size:16px}
}

@media(prefers-reduced-motion:reduce){.auth-ai-scene *{animation:none!important}.auth-card{animation:none!important}}