@import "https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&family=Sarabun:wght@400;500;600;700&display=swap";:root{--bg-gradient:linear-gradient(135deg, #f8fafc 0%, #ecfdf5 50%, #f0fdf4 100%);--glass-bg:#fffffff5;--glass-card:#fff;--glass-border:#d1fae5e6;--glass-glow:#10b9811a;--primary-color:#059669;--primary-dark:#047857;--primary-gradient:linear-gradient(135deg, #047857 0%, #059669 50%, #10b981 100%);--accent-emerald:#10b981;--accent-teal:#0d9488;--accent-amber:#d97706;--accent-rose:#e11d48;--text-primary:#064e3b;--text-secondary:#334155;--text-muted:#64748b;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-full:9999px}.dark{--bg-gradient:linear-gradient(135deg, #090f14 0%, #062319 50%, #0a111a 100%);--glass-bg:#0f172af0;--glass-card:#0f172a;--glass-border:#10b98138;--glass-glow:#10b98114;--primary-color:#10b981;--primary-dark:#059669;--primary-gradient:linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);--accent-emerald:#34d399;--accent-teal:#14b8a6;--accent-amber:#f59e0b;--accent-rose:#f43f5e;--text-primary:#ecfdf5;--text-secondary:#cbd5e1;--text-muted:#94a3b8}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg-gradient);color:#0f172a;touch-action:manipulation;min-height:100vh;font-family:Prompt,Sarabun,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;transition:background-color .3s,color .3s;overflow-x:hidden}.dark body{background:var(--bg-gradient);color:#f1f5f9}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-family:Prompt,sans-serif;font-weight:600}.glass-panel{background:#fff;border:1px solid #d1fae5e6;transition:border-color .25s,box-shadow .25s,background-color .25s;box-shadow:0 4px 20px -2px #064e3b0d,0 2px 6px -1px #064e3b08}.glass-panel:hover{border-color:#6ee7b7cc;box-shadow:0 12px 28px -4px #10b9811f}.dark .glass-panel{background:#0f172a;border-color:#10b98133;box-shadow:0 4px 20px -2px #00000080,0 2px 6px -1px #0000004d}.dark .glass-panel:hover{border-color:#34d39966;box-shadow:0 12px 28px -4px #10b98126}.container{max-width:1280px;margin:0 auto;padding:2rem 1.5rem}:where(input[type=text],input[type=date],input[type=password],input[type=number],input[type=search],select,textarea){color:#0f172a;border-radius:var(--radius-md);background-color:#fff;border:1px solid #cbd5e1;outline:none;font-size:.95rem;transition:border-color .2s,box-shadow .2s,background-color .2s}:where(input[type=text],input[type=date],input[type=password],input[type=number],input[type=search],select,textarea):focus{border-color:#059669;box-shadow:0 0 0 3px #10b9812e}.dark :where(input[type=text],input[type=date],input[type=password],input[type=number],input[type=search],select,textarea){color:#f8fafc;background-color:#1e293b;border-color:#334155}.dark :where(input[type=text],input[type=date],input[type=password],input[type=number],input[type=search],select,textarea):focus{border-color:#10b981;box-shadow:0 0 0 3px #10b98140}@media (width<=768px){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important}input[type=date]{min-height:36px}}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}select option{color:#0f172a;background:#fff}.dark select option{color:#f8fafc;background:#1e293b}.btn{background:var(--primary-gradient);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.7rem 1.4rem;font-size:.95rem;font-weight:500;transition:all .25s cubic-bezier(.4,0,.2,1);display:inline-flex;box-shadow:0 4px 14px #05966940}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #05966959}.btn:active{transform:translateY(0)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f0fdf4}::-webkit-scrollbar-thumb{background:#a7f3d0;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#6ee7b7}.dark ::-webkit-scrollbar-track{background:#091312}.dark ::-webkit-scrollbar-thumb{background:#064e3b;border-radius:4px}.dark ::-webkit-scrollbar-thumb:hover{background:#059669}.dark .swal2-popup{color:#f1f5f9!important;background:#0f172a!important;border:1px solid #10b98140!important}.dark .swal2-title{color:#f8fafc!important}.dark .swal2-html-container{color:#cbd5e1!important}@media screen{.dark .bg-white:not([class*=dark\:bg-]):not(.no-dark-bg){background-color:#0f172a!important}.dark .bg-slate-50:not([class*=dark\:bg-]){background-color:#0f172abf!important}.dark .bg-slate-100:not([class*=dark\:bg-]){background-color:#1e293bd9!important}.dark .bg-emerald-50:not([class*=dark\:bg-]),.dark .bg-teal-50:not([class*=dark\:bg-]),.dark .bg-green-100:not([class*=dark\:bg-]){background-color:#064e3b59!important}.dark .bg-emerald-100:not([class*=dark\:bg-]),.dark .bg-teal-100:not([class*=dark\:bg-]){background-color:#064e3b8c!important}.dark .bg-amber-50:not([class*=dark\:bg-]),.dark .bg-orange-50:not([class*=dark\:bg-]){background-color:#78350f4d!important}.dark .bg-amber-100:not([class*=dark\:bg-]),.dark .bg-orange-100:not([class*=dark\:bg-]){background-color:#78350f80!important}.dark .bg-rose-50:not([class*=dark\:bg-]),.dark .bg-pink-50:not([class*=dark\:bg-]){background-color:#8813374d!important}.dark .bg-rose-100:not([class*=dark\:bg-]){background-color:#88133780!important}.dark .bg-sky-50:not([class*=dark\:bg-]),.dark .bg-blue-50:not([class*=dark\:bg-]),.dark .bg-cyan-50:not([class*=dark\:bg-]),.dark .bg-indigo-50:not([class*=dark\:bg-]){background-color:#1e3a8a4d!important}.dark .bg-sky-100:not([class*=dark\:bg-]),.dark .bg-blue-100:not([class*=dark\:bg-]),.dark .bg-indigo-100:not([class*=dark\:bg-]){background-color:#1e3a8a80!important}.dark .bg-purple-50:not([class*=dark\:bg-]),.dark .bg-violet-50:not([class*=dark\:bg-]){background-color:#581c874d!important}.dark .bg-purple-100:not([class*=dark\:bg-]),.dark .bg-violet-100:not([class*=dark\:bg-]){background-color:#581c8780!important}.dark .text-slate-900:not([class*=dark\:text-]),.dark .text-slate-800:not([class*=dark\:text-]){color:#f1f5f9!important}.dark .text-slate-700:not([class*=dark\:text-]),.dark .text-slate-600:not([class*=dark\:text-]){color:#cbd5e1!important}.dark .text-slate-500:not([class*=dark\:text-]){color:#94a3b8!important}.dark .text-emerald-950:not([class*=dark\:text-]),.dark .text-emerald-900:not([class*=dark\:text-]),.dark .text-emerald-800:not([class*=dark\:text-]),.dark .text-teal-950:not([class*=dark\:text-]),.dark .text-teal-900:not([class*=dark\:text-]),.dark .text-teal-800:not([class*=dark\:text-]){color:#6ee7b7!important}.dark .text-amber-950:not([class*=dark\:text-]),.dark .text-amber-900:not([class*=dark\:text-]),.dark .text-amber-800:not([class*=dark\:text-]),.dark .text-orange-900:not([class*=dark\:text-]),.dark .text-orange-800:not([class*=dark\:text-]){color:#fcd34d!important}.dark .text-rose-900:not([class*=dark\:text-]),.dark .text-rose-800:not([class*=dark\:text-]),.dark .text-pink-900:not([class*=dark\:text-]){color:#fda4af!important}.dark .text-indigo-950:not([class*=dark\:text-]),.dark .text-indigo-900:not([class*=dark\:text-]),.dark .text-indigo-800:not([class*=dark\:text-]),.dark .text-sky-950:not([class*=dark\:text-]),.dark .text-sky-900:not([class*=dark\:text-]),.dark .text-sky-800:not([class*=dark\:text-]),.dark .text-blue-900:not([class*=dark\:text-]),.dark .text-blue-800:not([class*=dark\:text-]){color:#93c5fd!important}.dark .text-purple-950:not([class*=dark\:text-]),.dark .text-purple-900:not([class*=dark\:text-]),.dark .text-purple-800:not([class*=dark\:text-]),.dark .text-violet-900:not([class*=dark\:text-]){color:#d8b4fe!important}.dark .border-slate-100:not([class*=dark\:border-]),.dark .border-slate-200:not([class*=dark\:border-]),.dark .border-slate-300:not([class*=dark\:border-]){border-color:#334155!important}.dark .border-emerald-100:not([class*=dark\:border-]),.dark .border-emerald-200:not([class*=dark\:border-]),.dark .border-emerald-300:not([class*=dark\:border-]),.dark .border-teal-100:not([class*=dark\:border-]),.dark .border-teal-200:not([class*=dark\:border-]){border-color:#10b98159!important}}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.animate-fade-in{opacity:1;animation:.25s ease-out forwards fadeIn}@media (prefers-reduced-motion:reduce){.animate-fade-in{opacity:1!important;animation:none!important;transform:none!important}}.safe-area-bottom{padding-bottom:max(.5rem, env(safe-area-inset-bottom,0px))!important}.safe-area-x{padding-left:max(.75rem, env(safe-area-inset-left,0px))!important;padding-right:max(.75rem, env(safe-area-inset-right,0px))!important}.safe-area-top{padding-top:max(.5rem, env(safe-area-inset-top,0px))!important}button,a,select,input{touch-action:manipulation}@media (orientation:landscape) and (height<=550px){.mobile-landscape-compact-header{height:3.25rem!important}.mobile-landscape-p-compact{padding-top:.5rem!important;padding-bottom:.75rem!important}.modal-landscape-scroll{max-height:88dvh!important;overflow-y:auto!important}}@media print{body{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;background:#fff!important}.swal2-container,.print-hidden{display:none!important}}.header{text-align:center;margin-bottom:2rem;padding-top:1rem}.logo-container{-webkit-backdrop-filter:blur(20px);background:#0f172a99;border:1px solid #ffffff1f;border-radius:28px;align-items:center;gap:1.5rem;padding:1.25rem 2.5rem;transition:all .3s;display:inline-flex;box-shadow:0 10px 40px #0000004d}.logo-container:hover{border-color:#6366f166;transform:translateY(-3px);box-shadow:0 15px 45px #6366f140}.logo-icon{filter:drop-shadow(0 4px 12px #6366f166);font-size:3rem}.logo-container h1{background:linear-gradient(135deg,#fff 0%,#cbd5e1 50%,#818cf8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:2rem;font-weight:700}.logo-container p{color:#94a3b8;margin:0;font-size:.95rem;font-weight:400}.main-nav{background:#0f172ab3;border:1px solid #ffffff1a;border-radius:20px;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2.5rem;padding:.6rem;display:flex;box-shadow:0 8px 30px #00000040}.nav-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:14px;align-items:center;gap:.6rem;padding:.75rem 1.4rem;font-size:.95rem;font-weight:500;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex}.nav-btn:hover{color:#f8fafc;background:#ffffff14}.nav-btn.active{color:#fff;background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);font-weight:600;box-shadow:0 4px 18px #6366f173}.selection-card{border-radius:20px;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem;padding:2rem;display:grid;position:relative;overflow:hidden}.selection-card:before{content:"";background:linear-gradient(90deg,#6366f1,#8b5cf6,#10b981);height:3px;position:absolute;top:0;left:0;right:0}.form-group{flex-direction:column;gap:.5rem;display:flex}.form-group label{color:#e2e8f0;font-size:.95rem;font-weight:500}.schedule-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.schedule-header h2{color:#fff;font-size:1.4rem}.badge{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:100px;padding:.4rem 1.2rem;font-size:.85rem;font-weight:600;box-shadow:0 4px 12px #6366f14d}.timeline{flex-direction:column;gap:1.25rem;display:flex;position:relative}.timeline:before{content:"";z-index:0;background:#ffffff1a;width:2px;position:absolute;top:20px;bottom:20px;left:20px}.timeline-item{z-index:1;gap:1.25rem;display:flex;position:relative}.period-marker{color:#cbd5e1;background:#0f172a;border:2px solid #ffffff26;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:1rem;font-weight:700;transition:all .3s;display:flex}.timeline-item.active .period-marker{color:#fff;background:linear-gradient(135deg,#6366f1,#4f46e5);border-color:#fff;box-shadow:0 0 0 4px #6366f14d}.period-content{border-radius:18px;flex-grow:1;padding:1.25rem 1.75rem;transition:transform .25s,border-color .25s}.timeline-item.active .period-content:hover{border-color:#6366f166;transform:translate(4px)}.class-info h3{color:#818cf8;margin-bottom:.3rem;font-size:1.25rem}.class-info p{color:#94a3b8;font-size:.95rem}.teachers-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;display:grid}.teacher-card{cursor:pointer;background:#0f172a80;border:1px solid #ffffff1a;border-radius:16px;align-items:center;gap:1rem;padding:1rem 1.25rem;transition:all .25s;display:flex;position:relative}.teacher-card:hover{background:#1e293bd9;border-color:#8b5cf6;transform:translateY(-3px);box-shadow:0 8px 24px #8b5cf633}.teacher-avatar{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.2rem;font-weight:600;display:flex;box-shadow:0 4px 10px #0003}.teacher-name{color:#f8fafc;font-size:.95rem;font-weight:500}.dept-badge{color:#cbd5e1;background:#ffffff14;border-radius:6px;padding:2px 8px;font-size:.75rem}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;display:grid}.stat-card{background:#0f172a99;border:1px solid #ffffff1a;border-radius:20px;align-items:center;gap:1.25rem;padding:1.5rem;display:flex;box-shadow:0 8px 24px #0003}.stat-icon{border-radius:16px;justify-content:center;align-items:center;width:56px;height:56px;display:flex}.stat-value{color:#fff;margin-top:.4rem;font-size:2.2rem;font-weight:700;line-height:1}.flex-row{gap:1rem;display:flex}.flex-1{flex:1}.flex-2{flex:2}.justify-between{justify-content:space-between}.items-center{align-items:center}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mb-4{margin-bottom:1rem}.p-6{padding:1.5rem}.border-t{border-top-style:dashed;border-top-width:1px}.border-glass{border-color:#ffffff1f}.rounded-2xl{border-radius:1.25rem}.text-center{text-align:center}@media (width<=768px){.selection-card{grid-template-columns:1fr}.main-nav{border-radius:16px}.nav-btn{padding:.6rem 1rem;font-size:.85rem}}