:root{--primary:#2878d0;--primary-dark:#175ca8;--primary-soft:#eaf4ff;--pink:#f4a9c2;--pink-soft:#fff0f5;--purple:#8068d8;--green:#2aa980;--navy:#13233f;--text:#25334d;--muted:#6e7d94;--surface:#fff;--bg:#f6f9fd;--line:#e6edf6;--radius:22px;--radius-sm:14px;--shadow:0 16px 50px rgba(32,70,117,.11);--shadow-sm:0 8px 24px rgba(32,70,117,.08);--font:'Prompt',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.7}a{text-decoration:none}.tsw-navbar{background:rgba(255,255,255,.94);border-bottom:1px solid rgba(230,237,246,.85);backdrop-filter:blur(14px);padding:.8rem 0}.navbar-brand{display:flex;align-items:center;gap:.75rem;color:var(--navy)!important}.brand-mark{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--primary),#65a9ed);box-shadow:0 10px 24px rgba(40,120,208,.25);font-size:1.3rem}.brand-copy{display:flex;flex-direction:column;line-height:1.25}.brand-copy strong{font-size:1rem}.brand-copy small{font-size:.69rem;color:var(--muted);letter-spacing:.03em}.tsw-navbar .navbar-nav{gap:.15rem}.tsw-navbar .nav-link{color:#536279!important;font-size:.86rem;font-weight:500;border-radius:12px;padding:.62rem .62rem!important;display:flex;align-items:center;gap:.35rem;white-space:nowrap}.tsw-navbar .nav-link:hover,.tsw-navbar .nav-link.active{color:var(--primary)!important;background:var(--primary-soft)}.nav-login{margin-left:.5rem}.navbar-toggler{border:0;width:44px;height:44px;border-radius:12px;background:var(--primary-soft);color:var(--primary);font-size:1.6rem;padding:0}.navbar-toggler:focus{box-shadow:none}.btn{border-radius:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:.25s ease}.btn-tsw-primary{background:linear-gradient(135deg,var(--primary),#458fdc);border:0;color:#fff;padding:.7rem 1.2rem;box-shadow:0 10px 22px rgba(40,120,208,.22)}.btn-tsw-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 28px rgba(40,120,208,.28)}.btn-tsw-soft{background:#fff;border:1px solid var(--line);color:var(--navy);padding:.7rem 1.2rem;box-shadow:var(--shadow-sm)}.btn-tsw-soft:hover{color:var(--primary);border-color:#cfe4fb;transform:translateY(-2px)}.hero-section{position:relative;overflow:hidden;padding:6.5rem 0 7rem;background:linear-gradient(145deg,#eef7ff 0%,#fff 48%,#fff0f6 100%)}.hero-section:after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(to bottom,transparent,var(--bg))}.hero-orb{position:absolute;border-radius:50%;filter:blur(1px);opacity:.55}.hero-orb-one{width:370px;height:370px;background:#d7ebff;right:-100px;top:-130px}.hero-orb-two{width:240px;height:240px;background:#ffe1eb;left:-100px;bottom:-40px}.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:700;letter-spacing:.12em;color:var(--primary);text-transform:uppercase}.eyebrow{padding:.45rem .8rem;background:rgba(255,255,255,.86);border:1px solid #dceaf8;border-radius:999px;letter-spacing:.04em;text-transform:none}.hero-title{font-size:clamp(2.7rem,5vw,4.8rem);font-weight:700;line-height:1.12;color:var(--navy);margin:1.2rem 0 .9rem}.hero-title span{background:linear-gradient(90deg,var(--primary),var(--purple),#d96b9b);-webkit-background-clip:text;color:transparent}.hero-name{font-size:1.35rem;font-weight:600;color:#3b4c67;margin-bottom:.65rem}.hero-description{font-size:1.04rem;color:var(--muted);max-width:680px;margin-bottom:1.7rem}.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}.hero-actions .btn{min-height:52px;padding:.8rem 1.35rem}.hero-trust{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;margin-top:1.45rem;color:#63738a;font-size:.85rem}.hero-trust i{color:var(--green);margin-right:.3rem}.profile-showcase{position:relative;max-width:430px;margin:auto}.profile-card{position:relative;z-index:2;text-align:center;padding:2.2rem 1.8rem;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.95);border-radius:34px;box-shadow:0 30px 70px rgba(35,75,125,.18);backdrop-filter:blur(14px)}.profile-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;background:#eef7ff;color:var(--primary);font-size:.78rem;font-weight:600;border-radius:999px}.profile-avatar{width:170px;height:170px;margin:1.3rem auto;border-radius:50%;display:grid;place-items:center;font-size:5.2rem;color:#fff;background:linear-gradient(145deg,#66afe9,var(--primary) 55%,var(--purple));border:9px solid #fff;box-shadow:0 18px 42px rgba(40,120,208,.22)}.profile-card h2{font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:.35rem}.profile-card p{font-size:.9rem;color:var(--muted);margin-bottom:1rem}.profile-school{display:inline-flex;align-items:center;gap:.45rem;color:#54647b;font-size:.83rem;padding:.5rem .75rem;background:#f5f8fc;border-radius:12px}.floating-card{position:absolute;z-index:3;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow-sm);padding:.7rem .9rem;display:flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:600;color:var(--navy)}.floating-card i{font-size:1.15rem;color:var(--primary)}.floating-card-one{left:-38px;top:25%}.floating-card-two{right:-25px;bottom:14%}.stats-section{position:relative;z-index:4;margin-top:-2.7rem}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.stat-card{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.15rem;box-shadow:var(--shadow-sm);transition:.25s}.stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.stat-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:1.25rem}.stat-card strong{display:block;font-size:1.45rem;line-height:1.1;color:var(--navy)}.stat-card span{font-size:.79rem;color:var(--muted)}.stat-blue .stat-icon{background:#eaf4ff;color:var(--primary)}.stat-pink .stat-icon{background:var(--pink-soft);color:#d4618d}.stat-purple .stat-icon{background:#f0edff;color:var(--purple)}.stat-green .stat-icon{background:#eaf9f4;color:var(--green)}.content-section{padding:5rem 0}.section-tinted{background:#edf5fc}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:1.2rem;margin-bottom:1.7rem}.section-heading h2,.about-content h2,.contact-card h2{font-size:clamp(1.65rem,3vw,2.15rem);font-weight:700;color:var(--navy);margin:.25rem 0}.section-heading p,.about-content p,.contact-card p{color:var(--muted);margin:0}.section-heading.compact{align-items:center}.section-heading.compact h2{font-size:1.55rem}.text-link{color:var(--primary);font-weight:600;white-space:nowrap}.text-link:hover{color:var(--primary-dark)}.empty-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:2rem;display:flex;align-items:center;gap:1.3rem}.empty-course{background:linear-gradient(120deg,#fff,#f4f9ff)}.empty-illustration{min-width:76px;width:76px;height:76px;border-radius:22px;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary);font-size:2rem}.empty-card h3,.empty-mini h3,.highlight-card h3{font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:.25rem}.empty-card p,.empty-mini p,.highlight-card p{color:var(--muted);margin:0}.empty-card .btn{margin-left:auto}.feature-panel,.highlight-card{height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.7rem}.empty-mini{display:flex;align-items:center;gap:1rem;min-height:170px}.mini-icon{width:60px;height:60px;border-radius:18px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:1.5rem}.highlight-card{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--navy),#243f6d);color:#fff}.highlight-card:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.07);right:-45px;top:-45px}.highlight-icon{width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.13);display:grid;place-items:center;font-size:1.55rem;margin-bottom:1.2rem}.highlight-card h3{color:#fff;font-size:1.3rem}.highlight-card p{color:#cdd8e8;max-width:350px;margin-bottom:1.2rem}.highlight-card a{color:#fff;font-weight:600}.gallery-placeholder{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:1rem;min-height:280px}.gallery-tile{position:relative;overflow:hidden;border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;color:#fff;font-weight:600;box-shadow:var(--shadow-sm);transition:.3s}.gallery-tile:hover{transform:translateY(-5px)}.gallery-tile i{font-size:2.2rem}.tile-a{background:linear-gradient(145deg,#4a9ce5,#246fbd)}.tile-b{background:linear-gradient(145deg,#f2a6bf,#d96591)}.tile-c{background:linear-gradient(145deg,#9885e8,#6852c2)}.about-section{padding:1rem 0 5rem}.about-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.7rem;background:#fff;border:1px solid var(--line);border-radius:28px;padding:2.2rem;box-shadow:var(--shadow)}.about-icon{width:92px;height:92px;border-radius:26px;background:linear-gradient(145deg,var(--primary-soft),#f3edff);display:grid;place-items:center;font-size:2.4rem;color:var(--primary)}.about-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.about-tags span{padding:.38rem .7rem;border-radius:999px;background:#f3f7fb;color:#59708c;font-size:.75rem;font-weight:500}.contact-strip{padding:0 0 5rem}.contact-card{border-radius:28px;padding:2.2rem;background:linear-gradient(135deg,#eaf4ff,#fff1f6);border:1px solid #dfeaf6;display:flex;justify-content:space-between;align-items:center;gap:2rem}.contact-actions{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}.contact-actions a,.contact-actions span{display:flex;align-items:center;gap:.55rem;color:var(--navy);font-size:.88rem;background:rgba(255,255,255,.7);padding:.55rem .75rem;border-radius:11px}.site-footer{background:var(--navy);color:#d7e1ef;padding:4rem 0 1.5rem}.footer-grid{display:grid;grid-template-columns:1.7fr .8fr 1fr;gap:3rem}.footer-brand{display:flex;gap:1rem}.footer-mark{flex:0 0 auto}.footer-brand h3{font-size:1.05rem;color:#fff;margin-bottom:.45rem}.footer-brand p{font-size:.86rem;color:#9fb0c8;max-width:430px}.site-footer h4{font-size:.92rem;color:#fff;margin-bottom:1rem}.footer-links,.footer-contact{display:flex;flex-direction:column;gap:.58rem}.footer-links a,.footer-contact a,.footer-contact span{font-size:.82rem;color:#aebdd1}.footer-links a:hover,.footer-contact a:hover{color:#fff}.footer-contact i{margin-right:.45rem}.footer-bottom{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;color:#8498b4;font-size:.75rem}.tsw-card{background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);border:1px solid var(--line)}.tsw-empty-state{text-align:center;padding:3rem 1rem;color:var(--muted)}.tsw-empty-state i{font-size:2.5rem;margin-bottom:.75rem;display:block}.tsw-sidebar{background:var(--navy);min-height:100vh;color:#fff}.tsw-sidebar .nav-link{color:#cdd7e8;border-radius:10px;margin:2px 8px;padding:.65rem 1rem}.tsw-sidebar .nav-link:hover,.tsw-sidebar .nav-link.active{background:rgba(255,255,255,.12);color:#fff!important}.tsw-topbar{background:#fff;box-shadow:var(--shadow-sm)}.tsw-login-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#d9ecff,#ffe3ec)}.tsw-login-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2.5rem;max-width:430px;width:100%}@media(max-width:1199px){.tsw-navbar .navbar-collapse{padding:1rem 0}.tsw-navbar .nav-link{padding:.65rem .8rem!important}.nav-login{margin:.5rem 0 0}.nav-login .btn{width:100%}}@media(max-width:991px){.hero-section{padding:4.7rem 0 6rem}.profile-showcase{margin-top:1rem}.stats-grid{grid-template-columns:repeat(2,1fr)}.gallery-placeholder{grid-template-columns:1fr 1fr}.tile-a{grid-column:1/-1;min-height:210px}.about-card{grid-template-columns:auto 1fr}.about-card>.btn{grid-column:2}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}@media(max-width:767px){.brand-copy small{display:none}.hero-title{font-size:2.65rem}.hero-trust{display:grid;gap:.5rem}.floating-card{display:none}.stats-grid{grid-template-columns:1fr 1fr}.stat-card{padding:.9rem;gap:.7rem}.stat-icon{width:42px;height:42px}.section-heading{align-items:flex-start;flex-direction:column}.empty-card{align-items:flex-start;flex-direction:column}.empty-card .btn{margin-left:0}.gallery-placeholder{grid-template-columns:1fr}.tile-a{grid-column:auto}.gallery-tile{min-height:170px}.about-card{grid-template-columns:1fr;text-align:center}.about-icon{margin:auto}.about-card>.btn{grid-column:auto;justify-self:center}.about-tags{justify-content:center}.contact-card{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{flex-direction:column;gap:.35rem}.content-section{padding:3.7rem 0}}@media(max-width:480px){.hero-actions{display:grid}.hero-actions .btn{width:100%}.stats-grid{grid-template-columns:1fr}.profile-card{padding:1.7rem 1.2rem}.profile-avatar{width:145px;height:145px;font-size:4.4rem}.about-card,.contact-card{padding:1.5rem}.navbar-brand{max-width:75%}}

/* ===== Full Phase 0-1 UI Redesign ===== */
:root{--app-navy:#172554;--app-blue:#2563eb;--app-sky:#eaf4ff;--app-pink:#ec4899;--app-purple:#7c3aed;--app-green:#10b981;--app-bg:#f5f8fc;--app-text:#152238;--app-muted:#718096;--app-line:#e6edf5;--app-radius:24px;--app-shadow:0 18px 45px rgba(30,64,175,.09)}
body{font-family:'Prompt',sans-serif;color:var(--app-text)}
.app-shell{background:var(--app-bg);min-height:100vh}.app-layout{display:flex;min-height:100vh}.app-sidebar{width:280px;flex:0 0 280px;background:linear-gradient(180deg,#172554 0%,#1e3a8a 100%);position:sticky;top:0;height:100vh;overflow-y:auto}.app-offcanvas{width:280px!important;background:linear-gradient(180deg,#172554,#1e3a8a);border:0}.app-main{min-width:0;flex:1}.app-content{padding:30px;max-width:1600px;margin:0 auto}.app-flash{padding:0 30px}.sidebar-inner{min-height:100%;padding:24px 18px;color:#fff;display:flex;flex-direction:column}.sidebar-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;padding:0 8px 22px}.sidebar-logo{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#60a5fa,#f9a8d4);display:grid;place-items:center;font-size:1.25rem;box-shadow:0 10px 22px rgba(0,0,0,.18)}.sidebar-brand strong,.sidebar-brand small{display:block}.sidebar-brand strong{font-size:1.04rem}.sidebar-brand small{font-size:.72rem;color:#bfdbfe}.sidebar-profile{display:flex;gap:11px;align-items:center;background:rgba(255,255,255,.09);padding:13px 14px;border-radius:17px;margin-bottom:25px}.profile-dot{width:10px;height:10px;background:#34d399;border-radius:99px;box-shadow:0 0 0 5px rgba(52,211,153,.13)}.sidebar-profile small,.sidebar-profile strong{display:block}.sidebar-profile small{color:#bfdbfe;font-size:.68rem}.sidebar-profile strong{font-size:.84rem}.sidebar-section{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#93c5fd;padding:12px 12px 7px}.sidebar-nav{display:grid;gap:5px}.sidebar-nav a{color:#dbeafe;text-decoration:none;display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;font-size:.86rem;transition:.2s}.sidebar-nav a i{width:21px;font-size:1.02rem}.sidebar-nav a:hover,.sidebar-nav a.active{background:rgba(255,255,255,.14);color:#fff;transform:translateX(3px)}.sidebar-nav a.active{box-shadow:inset 3px 0 #f9a8d4}.sidebar-footer{margin-top:auto;display:flex;gap:10px;align-items:center;padding:18px 12px 4px;color:#dbeafe;font-size:.77rem}.sidebar-footer i{font-size:1.35rem;color:#f9a8d4}.sidebar-footer small{color:#93c5fd}.app-topbar{height:80px;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--app-line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:50}.topbar-eyebrow{font-size:.66rem;color:var(--app-muted);text-transform:uppercase;letter-spacing:.08em}.topbar-title{font-weight:600;font-size:.95rem}.topbar-actions{display:flex;align-items:center;gap:12px}.topbar-menu,.topbar-icon{border:0;background:#eef5ff;width:40px;height:40px;border-radius:13px;place-items:center;color:var(--app-blue)}.topbar-menu{display:grid;font-size:1.4rem}.user-chip{display:flex;align-items:center;gap:9px;background:#f7f9fc;border:1px solid var(--app-line);padding:6px 11px 6px 7px;border-radius:16px}.user-avatar{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,#dbeafe,#fce7f3);display:grid;place-items:center;color:var(--app-blue)}.user-chip small,.user-chip strong{display:block;line-height:1.25}.user-chip small{font-size:.6rem;color:var(--app-muted)}.user-chip strong{font-size:.75rem}.logout-btn{border:0;background:#fff1f2;color:#e11d48;border-radius:13px;padding:10px 13px;font-size:.78rem}.dashboard-hero{border-radius:28px;padding:34px 38px;color:#fff;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative;margin-bottom:24px;box-shadow:var(--app-shadow)}.dashboard-hero-admin{background:linear-gradient(135deg,#1e3a8a,#2563eb)}.dashboard-hero-teacher{background:linear-gradient(135deg,#2563eb,#7c3aed)}.dashboard-hero-student{background:linear-gradient(135deg,#0284c7,#14b8a6)}.dashboard-kicker{font-size:.74rem;background:rgba(255,255,255,.16);padding:7px 11px;border-radius:99px;display:inline-block}.dashboard-hero h1{font-size:clamp(1.65rem,3vw,2.35rem);margin:13px 0 8px;font-weight:700}.dashboard-hero p{max-width:650px;color:rgba(255,255,255,.82);margin:0}.hero-orb{width:120px;height:120px;border-radius:40px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:3.1rem;transform:rotate(8deg)}.hero-buttons{display:flex;gap:10px;margin-top:20px}.hero-buttons a{padding:10px 15px;border-radius:13px;text-decoration:none;font-size:.8rem;font-weight:600}.hero-btn-primary{background:#fff;color:var(--app-blue)}.hero-btn-soft{background:rgba(255,255,255,.14);color:#fff}.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:24px}.metric-grid-four{grid-template-columns:repeat(4,minmax(0,1fr))}.metric-card{background:#fff;border:1px solid var(--app-line);border-radius:22px;padding:20px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;box-shadow:0 10px 28px rgba(15,23,42,.05);position:relative;overflow:hidden}.metric-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:1.25rem}.metric-card strong,.metric-card span{display:block}.metric-card strong{font-size:1.65rem;line-height:1}.metric-card div span{font-size:.75rem;color:var(--app-muted);margin-top:5px}.metric-card em{grid-column:1/-1;font-style:normal;font-size:.65rem;color:#94a3b8}.metric-blue .metric-icon{background:#eaf2ff;color:#2563eb}.metric-purple .metric-icon{background:#f1eafe;color:#7c3aed}.metric-pink .metric-icon{background:#fff0f7;color:#ec4899}.metric-green .metric-icon{background:#e9fbf4;color:#10b981}.dashboard-grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:24px}.panel-card,.quick-actions,.student-tip{background:#fff;border:1px solid var(--app-line);border-radius:24px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.panel-card{padding:22px}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.panel-header>div{display:flex;align-items:center;gap:10px}.panel-icon{width:36px;height:36px;border-radius:12px;background:#eef5ff;color:var(--app-blue);display:grid;place-items:center}.panel-header h2,.quick-actions h2{font-size:1rem;margin:0;font-weight:600}.panel-header a{font-size:.72rem;color:var(--app-blue);text-decoration:none}.empty-modern{text-align:center;padding:32px 15px;display:flex;align-items:center;flex-direction:column}.empty-modern>i{font-size:2rem;color:#93c5fd;background:#eff6ff;width:64px;height:64px;border-radius:22px;display:grid;place-items:center;margin-bottom:12px}.empty-modern strong{font-size:.9rem}.empty-modern span{font-size:.73rem;color:var(--app-muted);margin-top:5px}.empty-action{margin-top:13px;background:#eff6ff;color:var(--app-blue);border-radius:11px;padding:8px 13px;text-decoration:none;font-size:.72rem}.modern-table{width:100%;font-size:.75rem}.modern-table th{color:#94a3b8;font-weight:500;padding:10px;border-bottom:1px solid var(--app-line)}.modern-table td{padding:12px 10px;border-bottom:1px solid #f1f5f9}.table-avatar{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:10px;background:#eef5ff;color:var(--app-blue);margin-right:7px}.status-pill{padding:5px 8px;border-radius:99px;font-size:.65rem}.status-success{background:#e8faf2;color:#059669}.status-locked{background:#fff7ed;color:#ea580c}.status-failed{background:#fff1f2;color:#e11d48}.timeline-list,.task-list{display:grid;gap:13px}.timeline-item,.task-list>div{display:flex;gap:12px;padding:12px;border-radius:15px;background:#f8fafc}.timeline-item>span{width:9px;height:9px;background:var(--app-blue);border-radius:99px;margin-top:5px}.timeline-item strong,.task-list strong{font-size:.78rem}.timeline-item p,.task-list small{font-size:.69rem;color:var(--app-muted);margin:3px 0}.timeline-item small{font-size:.63rem;color:#94a3b8}.task-check{width:32px;height:32px;border-radius:11px;background:#eafaf4;color:#10b981;display:grid;place-items:center}.quick-actions{padding:22px}.quick-actions header p{font-size:.72rem;color:var(--app-muted);margin:4px 0 16px}.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.quick-grid a{display:flex;align-items:center;gap:10px;padding:14px;background:#f8fafc;border-radius:16px;text-decoration:none;color:var(--app-text);font-size:.75rem;transition:.2s}.quick-grid a:hover{background:#eef5ff;transform:translateY(-2px)}.quick-grid i{color:var(--app-blue);font-size:1.05rem}.student-tip{padding:20px;display:flex;gap:14px;align-items:center}.student-tip>span{width:48px;height:48px;border-radius:16px;background:#fff7ed;color:#f59e0b;display:grid;place-items:center;font-size:1.2rem}.student-tip strong{font-size:.85rem}.student-tip p{font-size:.72rem;color:var(--app-muted);margin:4px 0 0}
.auth-page{min-height:100vh;background:#f4f8fd}.auth-shell{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}.auth-visual{background:linear-gradient(145deg,#1e3a8a,#2563eb 55%,#7c3aed);color:#fff;padding:50px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.auth-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;position:relative;z-index:2}.auth-brand span{width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:1.25rem}.auth-copy{position:relative;z-index:2;max-width:650px}.auth-badge{font-size:.72rem;background:rgba(255,255,255,.14);padding:7px 11px;border-radius:99px}.auth-copy h1{font-size:clamp(2rem,4vw,3.45rem);line-height:1.2;margin:20px 0}.auth-copy p{color:rgba(255,255,255,.78);max-width:580px}.auth-features{display:flex;gap:15px;flex-wrap:wrap;margin-top:25px}.auth-features span{font-size:.73rem}.auth-features i{color:#86efac}.auth-shape{position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}.auth-shape-one{width:380px;height:380px;right:-120px;top:-100px}.auth-shape-two{width:250px;height:250px;left:-80px;bottom:-90px}.auth-form-area{display:grid;place-items:center;padding:35px}.auth-card{width:min(430px,100%);background:#fff;border:1px solid var(--app-line);border-radius:28px;padding:36px;box-shadow:var(--app-shadow)}.auth-card-head p{font-size:.7rem;color:var(--app-blue);font-weight:600;margin:0 0 4px}.auth-card-head h2{font-size:1.65rem;margin:0 0 6px}.auth-card-head>span{font-size:.73rem;color:var(--app-muted)}.auth-mobile-logo{display:none!important}.auth-label{font-size:.73rem;font-weight:500;margin:18px 0 7px}.auth-input{border:1px solid var(--app-line);border-radius:15px;display:flex;align-items:center;padding:0 13px;transition:.2s}.auth-input:focus-within{border-color:#93c5fd;box-shadow:0 0 0 4px #eff6ff}.auth-input>i{color:#94a3b8}.auth-input input{border:0;outline:0;padding:12px;width:100%;font-family:inherit;font-size:.8rem}.auth-input button{border:0;background:transparent;color:#94a3b8}.auth-options{display:flex;justify-content:space-between;align-items:center;font-size:.69rem;margin:14px 0 18px}.auth-options a,.auth-back{color:var(--app-blue);text-decoration:none}.auth-submit{width:100%;border:0;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border-radius:15px;padding:13px;font-family:inherit;font-weight:600;display:flex;justify-content:center;gap:9px}.auth-back{display:block;text-align:center;font-size:.7rem;margin-top:20px}.auth-alert{padding:10px 12px;border-radius:12px;font-size:.72rem;margin-top:14px}.auth-alert-danger{background:#fff1f2;color:#be123c}.auth-alert-success{background:#ecfdf5;color:#047857}
.error-page{min-height:100vh;background:radial-gradient(circle at 20% 20%,#eaf4ff,transparent 35%),radial-gradient(circle at 80% 70%,#fce7f3,transparent 38%),#f8fafc;display:grid;place-items:center;padding:25px}.error-card{width:min(540px,100%);background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border:1px solid #fff;border-radius:32px;padding:42px;text-align:center;box-shadow:var(--app-shadow)}.error-icon{width:82px;height:82px;border-radius:28px;background:#eaf2ff;color:#2563eb;display:grid;place-items:center;font-size:2rem;margin:0 auto 10px}.error-danger{background:#fff1f2;color:#e11d48}.error-code{font-size:4.2rem;font-weight:700;line-height:1;background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;color:transparent}.error-card h1{font-size:1.3rem;margin:12px 0}.error-card p{font-size:.78rem;color:var(--app-muted);max-width:420px;margin:0 auto 22px}.error-actions{display:flex;justify-content:center;gap:10px}.error-actions a,.error-actions button{border:0;border-radius:13px;padding:10px 15px;text-decoration:none;font-family:inherit;font-size:.75rem}.error-primary{background:#2563eb;color:#fff}.error-actions button{background:#eef2f7;color:var(--app-text)}
@media(max-width:1100px){.metric-grid-four{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:991px){.app-content{padding:22px}.app-flash{padding:0 22px}.app-topbar{padding:0 20px}.auth-shell{grid-template-columns:1fr}.auth-visual{display:none}.auth-form-area{min-height:100vh}.auth-mobile-logo{display:grid!important;width:52px;height:52px;border-radius:17px;background:#eef5ff;color:#2563eb;place-items:center;font-size:1.4rem;margin-bottom:20px}}
@media(max-width:767px){.dashboard-hero{padding:26px}.hero-orb{display:none}.metric-grid,.metric-grid-four,.dashboard-grid-two{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr 1fr}.user-chip span:last-child{display:none}.app-content{padding:16px}.dashboard-hero p{font-size:.78rem}.hero-buttons{flex-wrap:wrap}.auth-card{padding:27px 22px}.error-card{padding:32px 22px}.error-actions{flex-direction:column}.error-actions a,.error-actions button{width:100%}}

/* ===== Complete system modules ===== */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}.page-head h1{font-size:1.75rem;font-weight:700;color:var(--navy);margin:.35rem 0}.page-head p{color:var(--muted);margin:0}.page-kicker{font-size:.74rem;color:var(--primary);font-weight:600;display:flex;gap:.4rem;align-items:center}.module-card,.form-card{padding:22px}.module-table{font-size:.78rem}.module-table th{font-weight:600;color:#64748b;background:#f8fafc}.form-card .form-control{border:1px solid var(--line);border-radius:13px;min-height:44px;font-size:.82rem}.form-card textarea.form-control{min-height:auto}.form-actions{display:flex;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.public-page-hero{padding:5.5rem 0 3.6rem;background:linear-gradient(135deg,#eef7ff,#fff 52%,#fff0f6)}.public-page-hero h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;color:var(--navy);margin:.8rem 0}.public-page-hero p{color:var(--muted)}.public-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.public-item-card,.student-data-card,.contact-form-card,.article-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);padding:24px}.public-item-card{display:flex;gap:16px;transition:.25s}.public-item-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.public-item-icon,.student-data-icon{width:48px;height:48px;border-radius:15px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:1.2rem;flex:none}.public-item-card h3,.student-data-card h3{font-size:1rem;font-weight:600;color:var(--navy);margin:.25rem 0}.public-item-card p,.student-data-card p{font-size:.78rem;color:var(--muted);margin:0}.item-meta,.student-data-card small{font-size:.68rem;color:#94a3b8}.contact-form-card{max-width:850px;margin:auto}.article-card{max-width:900px;margin:auto}.article-card h2{font-size:1.25rem;margin-top:1rem}.student-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.student-data-card{display:flex;gap:15px}.student-data-card small{display:block;margin-top:8px}.empty-icon{width:58px;height:58px;border-radius:18px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:1.35rem;flex:none}
@media(max-width:991px){.public-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:767px){.page-head{align-items:flex-start;flex-direction:column}.public-grid,.student-card-grid{grid-template-columns:1fr}.public-page-hero{padding:4rem 0 2.8rem}}

/* PROFILE_CARD_PHOTO_START */

.profile-card {
    will-change: transform;
}

.profile-card:hover {
    box-shadow: 0 24px 55px rgba(22, 59, 101, 0.18) !important;
}

.profile-avatar.profile-avatar-photo {
    width: 220px !important;
    height: 220px !important;
    margin: 28px auto !important;
    padding: 0 !important;
    border: 10px solid #ffffff !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #eef5ff !important;
    box-shadow: 0 16px 38px rgba(22, 59, 101, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.profile-avatar.profile-avatar-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    border-radius: 50% !important;
    transform: scale(1.28) !important;
    transition: transform 0.35s ease !important;
}

/* ซูมเพิ่มเล็กน้อยเมื่อชี้เมาส์ */
.profile-card:hover .profile-avatar-photo img {
    transform: scale(1.34) !important;
}

@media (max-width: 767px) {
    .profile-avatar.profile-avatar-photo {
        width: 180px !important;
        height: 180px !important;
    }

    .profile-avatar.profile-avatar-photo img {
        transform: scale(1.24) !important;
        object-position: center 18% !important;
    }

    .profile-card:hover .profile-avatar-photo img {
        transform: scale(1.28) !important;
    }
}

/* PROFILE_CARD_PHOTO_END */

/* FOOTER_FINAL_CENTER_START */

.site-footer .footer-bottom {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 36px !important;
    padding-top: 24px !important;
    text-align: center !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.site-footer .footer-bottom span {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
}

@media (max-width: 767px) {
    .site-footer .footer-bottom {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* FOOTER_FINAL_CENTER_END */

/* ===== Teacher Brand Theme (ทุกหน้า) ===== */
:root {
    --primary: #163B65;
    --secondary: #2F80ED;
    --accent: #D8A928;
    --info: #56CCF2;
    --background: #F4F7FB;
    --surface: #FFFFFF;
    --text-primary: #1E293B;
    --text-secondary: #64748B;
    --border: #E2E8F0;
    --success: #16A34A;
    --warning: #F59E0B;
    --danger: #DC2626;

    /* Legacy aliases สำหรับ component เดิม */
    --primary-dark: #0f2844;
    --primary-soft: #e8f2fc;
    --navy: var(--primary);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
    --bg: var(--background);
    --line: var(--border);
    --green: var(--success);
    --radius: 14px;
    --radius-sm: 14px;
    --shadow: 0 4px 16px rgba(22, 59, 101, 0.08);
    --shadow-sm: 0 4px 16px rgba(22, 59, 101, 0.08);
    --pink: #f4a9c2;
    --pink-soft: #fff0f5;
    --pink-accent: #d4618d;
    --purple: #8068d8;
    --purple-soft: #f0edff;
    --green-soft: #eaf9f4;

    --app-navy: var(--primary);
    --app-blue: var(--secondary);
    --app-sky: var(--primary-soft);
    --app-bg: var(--background);
    --app-text: var(--text-primary);
    --app-muted: var(--text-secondary);
    --app-line: var(--border);
    --app-radius: var(--radius);
    --app-shadow: var(--shadow);
    --font-ui: "Prompt", "Sarabun", "Noto Sans Thai", "Leelawadee UI", "Thonburi", "Tahoma", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "Sarabun", "Prompt", "Noto Sans Thai", "Leelawadee UI", "Thonburi", "Tahoma", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    background: var(--background) !important;
    color: var(--text-primary) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
button, .btn, .nav-link, .navbar-brand,
.sidebar, .page-kicker, .section-kicker, .eyebrow {
    font-family: var(--font-ui);
}

p, li, td, th, label, .form-control, .form-select, textarea, input, select {
    font-family: var(--font-body);
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

.bi {
    display: inline-block;
    line-height: 1;
    vertical-align: -0.125em;
}

/* Navbar & Footer */
.navbar,
.footer,
.tsw-navbar,
.site-footer {
    background: var(--primary) !important;
    color: #FFFFFF !important;
}

.tsw-navbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: none !important;
}

.navbar-brand,
.navbar-brand *,
.brand-copy strong {
    color: #FFFFFF !important;
}

.brand-copy small {
    color: rgba(255, 255, 255, 0.78) !important;
}

.brand-mark,
.sidebar-logo {
    background: linear-gradient(135deg, var(--secondary), var(--info)) !important;
    box-shadow: 0 10px 24px rgba(47, 128, 237, 0.28) !important;
}

.tsw-navbar .nav-link,
.navbar .nav-link {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600 !important;
}

.tsw-navbar .nav-link:hover,
.tsw-navbar .nav-link:focus,
.tsw-navbar .nav-link.active,
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--primary) !important;
    background: #FFFFFF !important;
}

.tsw-navbar .nav-link:hover *,
.tsw-navbar .nav-link.active * {
    color: var(--primary) !important;
}

.navbar-toggler,
.topbar-menu {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
}

.site-footer h3,
.site-footer h4,
.footer-brand h3,
.footer-links a:hover,
.footer-contact a:hover {
    color: #FFFFFF !important;
}

.footer-brand p,
.footer-links a,
.footer-contact a,
.footer-contact span,
.footer-bottom,
.footer-bottom span {
    color: rgba(255, 255, 255, 0.72) !important;
}

.footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.14) !important;
}

/* Cards ทุกประเภท */
.card,
.panel-card,
.metric-card,
.stat-card,
.empty-card,
.public-item-card,
.student-data-card,
.contact-form-card,
.article-card,
.feature-panel,
.form-card,
.module-card,
.quick-actions,
.student-tip,
.auth-card,
.error-card,
.profile-card,
.about-card,
.tsw-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(22, 59, 101, 0.08) !important;
}

.highlight-card {
    background: linear-gradient(145deg, var(--primary), #1e4d7a) !important;
    border: 0 !important;
}

/* ปุ่มหลัก */
.btn-primary,
.btn-tsw-primary,
.auth-submit,
.error-primary,
.error-actions .btn-tsw-primary,
.app-shell .btn-primary {
    background: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 20px rgba(47, 128, 237, 0.22) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-tsw-primary:hover,
.auth-submit:hover,
.error-primary:hover,
.app-shell .btn-primary:hover {
    background: #256FD1 !important;
    border-color: #256FD1 !important;
    color: #FFFFFF !important;
}

.btn-accent,
.btn-tsw-accent {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #FFFFFF !important;
}

.btn-accent:hover,
.btn-accent:focus,
.btn-tsw-accent:hover {
    background: #BF921F !important;
    border-color: #BF921F !important;
    color: #FFFFFF !important;
}

.btn-tsw-soft,
.btn-light,
.app-shell .btn-light {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

.btn-tsw-soft:hover,
.btn-light:hover {
    color: var(--secondary) !important;
    border-color: #b9d4f5 !important;
    background: var(--primary-soft) !important;
}

.app-shell .btn-outline-primary {
    color: var(--secondary) !important;
    border-color: #b9d4f5 !important;
    background: var(--surface) !important;
}

/* ข้อความและลิงก์เน้น */
.text-link,
.page-kicker,
.section-kicker,
.eyebrow,
.panel-header a,
.quick-grid i,
.auth-card-head p,
.auth-options a,
.auth-back {
    color: var(--secondary) !important;
}

.hero-title,
.page-head h1,
.section-heading h2,
.public-page-hero h1 {
    color: var(--primary) !important;
}

/* ข้อความ gradient ใน hero — ต้อง clip ให้ติดตัวอักษร ไม่ใช่กล่องสีทึบ */
.hero-title span {
    display: inline !important;
    background: linear-gradient(90deg, var(--secondary), var(--info)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.error-code {
    display: inline-block;
    background: linear-gradient(90deg, var(--secondary), var(--info)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* แก้ class hero-orb ชนกันระหว่างหน้าแรกกับ dashboard */
.hero-section .hero-orb {
    position: absolute !important;
    width: auto !important;
    height: auto !important;
    border-radius: 50% !important;
    filter: blur(1px) !important;
    opacity: 0.55 !important;
    display: block !important;
    transform: none !important;
    background: transparent !important;
    font-size: inherit !important;
}

.hero-section .hero-orb-one {
    width: 370px !important;
    height: 370px !important;
    background: #d7ebff !important;
    right: -100px !important;
    top: -130px !important;
}

.hero-section .hero-orb-two {
    width: 240px !important;
    height: 240px !important;
    background: #ffe1eb !important;
    left: -100px !important;
    bottom: -40px !important;
}

.dashboard-hero .hero-orb {
    width: 120px !important;
    height: 120px !important;
    border-radius: 40px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 3.1rem !important;
    transform: rotate(8deg) !important;
    position: relative !important;
    filter: none !important;
    opacity: 1 !important;
}

.eyebrow {
    color: var(--secondary) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid var(--border) !important;
}

.profile-badge {
    color: var(--secondary) !important;
    background: var(--primary-soft) !important;
}

.floating-card i {
    color: var(--secondary) !important;
}

.hero-section,
.public-page-hero {
    background: linear-gradient(145deg, var(--primary-soft) 0%, var(--surface) 52%, #f8fbff 100%) !important;
}

.stat-blue .stat-icon,
.public-item-icon,
.empty-icon,
.empty-illustration,
.panel-icon,
.metric-blue .metric-icon,
.empty-modern > i {
    background: var(--primary-soft) !important;
    color: var(--secondary) !important;
}

/* Sidebar พอร์ทัล — gradient สดใส (Theme A) */
.app-shell {
    background: linear-gradient(180deg, #eef6ff 0%, var(--background) 240px, var(--background) 100%) !important;
    color: var(--text-primary) !important;
}

.app-sidebar,
.app-offcanvas {
    background: linear-gradient(180deg, #163B65 0%, #1e4d7a 42%, #2563eb 100%) !important;
    border-right: none !important;
    box-shadow: 4px 0 28px rgba(22, 59, 101, 0.22) !important;
}

.sidebar-inner {
    color: #fff !important;
}

.sidebar-brand {
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding-bottom: 20px !important;
    margin-bottom: 6px;
}

.sidebar-brand strong {
    color: #fff !important;
}

.sidebar-brand small,
.sidebar-section {
    color: #93c5fd !important;
}

.sidebar-nav a {
    color: #dbeafe !important;
}

.sidebar-nav a i {
    color: #bfdbfe !important;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

.sidebar-nav a.active {
    box-shadow: inset 3px 0 #f9a8d4 !important;
    font-weight: 600;
}

.sidebar-logo {
    background: linear-gradient(135deg, #60a5fa, #f9a8d4) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2) !important;
}

.app-topbar {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
}

.topbar-title {
    color: var(--primary) !important;
    font-weight: 700 !important;
}

.topbar-icon,
.topbar-menu {
    background: linear-gradient(135deg, #eff6ff, #eef2ff) !important;
    color: var(--secondary) !important;
}

.user-avatar {
    background: linear-gradient(135deg, #dbeafe, #fce7f3) !important;
    color: var(--secondary) !important;
}

.dashboard-hero-admin {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
}

.dashboard-hero-teacher {
    background: linear-gradient(135deg, var(--secondary), var(--info)) !important;
}

.dashboard-hero-student {
    background: linear-gradient(135deg, var(--secondary), var(--success)) !important;
}

.hero-btn-primary {
    color: var(--secondary) !important;
}

.auth-page {
    background: var(--background) !important;
}

.auth-visual {
    background: linear-gradient(145deg, var(--primary), var(--secondary) 55%, var(--info)) !important;
}

.auth-input:focus-within {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 4px var(--primary-soft) !important;
}

.error-page {
    background: radial-gradient(circle at 20% 20%, var(--primary-soft), transparent 35%),
                radial-gradient(circle at 80% 70%, #eef6ff, transparent 38%),
                var(--background) !important;
}

.error-icon {
    background: var(--primary-soft) !important;
    color: var(--secondary) !important;
}

.contact-form-card .form-control,
.form-card .form-control,
.form-card .form-select {
    border: 1px solid var(--border);
    border-radius: 13px;
    min-height: 44px;
    font-size: 0.82rem;
}

.contact-form-card .form-control:focus,
.form-card .form-control:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

/* CARD_HOVER_LIFT — เอฟเฟกต์เด้งเหมือน Teacher Portfolio */
.card,
.panel-card,
.metric-card,
.stat-card,
.empty-card,
.public-item-card,
.student-data-card,
.contact-form-card,
.article-card,
.feature-panel,
.form-card,
.module-card,
.quick-actions,
.student-tip,
.auth-card,
.error-card,
.profile-card,
.about-card,
.tsw-card,
.gallery-tile {
    transition: transform 0.28s ease, box-shadow 0.28s ease !important;
    will-change: transform;
}

.card:hover,
.panel-card:hover,
.metric-card:hover,
.stat-card:hover,
.empty-card:hover,
.public-item-card:hover,
.student-data-card:hover,
.contact-form-card:hover,
.article-card:hover,
.feature-panel:hover,
.form-card:hover,
.module-card:hover,
.quick-actions:hover,
.student-tip:hover,
.auth-card:hover,
.error-card:hover,
.profile-card:hover,
.about-card:hover,
.tsw-card:hover,
.gallery-tile:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 24px 55px rgba(22, 59, 101, 0.18) !important;
}

/* highlight-card พื้นเข้ม — ไม่ใช้ hover lift */
.highlight-card {
    transition: none !important;
}

.highlight-card:hover {
    transform: none !important;
}

@media (max-width: 767px) {
    body {
        font-size: 15px;
    }

    h1 {
        font-size: clamp(1.85rem, 8vw, 2.7rem);
        line-height: 1.2;
    }

    h2 {
        font-size: clamp(1.45rem, 6vw, 2rem);
    }

    h3 {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }

    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .btn {
        white-space: normal;
    }

    .tsw-navbar .navbar-collapse {
        background: var(--primary);
        padding-bottom: 1rem;
    }

    .card:hover,
    .panel-card:hover,
    .metric-card:hover,
    .stat-card:hover,
    .empty-card:hover,
    .public-item-card:hover,
    .student-data-card:hover,
    .contact-form-card:hover,
    .article-card:hover,
    .feature-panel:hover,
    .form-card:hover,
    .module-card:hover,
    .quick-actions:hover,
    .student-tip:hover,
    .auth-card:hover,
    .error-card:hover,
    .profile-card:hover,
    .about-card:hover,
    .tsw-card:hover,
    .gallery-tile:hover {
        transform: translateY(-5px) !important;
    }
}

/* ===== Portfolio Pages ===== */
.page-portfolio .tsw-navbar {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.portfolio-hero {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 3rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #fff 50%, #fdf2f8 100%);
}

.portfolio-hero::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(167, 139, 250, 0.12);
    right: -80px;
    top: -100px;
}

.portfolio-hero::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 158, 199, 0.15);
    left: -60px;
    bottom: -80px;
}

.portfolio-hero .container { position: relative; z-index: 1; }

.portfolio-hero h1 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 700;
    color: var(--primary) !important;
    margin: 0.6rem 0;
}

.portfolio-hero p { color: var(--text-secondary); max-width: 620px; margin: 0; }

.portfolio-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.6rem;
}

.portfolio-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border);
    transition: 0.2s;
    text-decoration: none;
}

.portfolio-nav a:hover,
.portfolio-nav a.active {
    color: var(--primary) !important;
    background: var(--primary-soft) !important;
    border-color: #b9d4f5;
    transform: translateY(-1px);
}

.portfolio-feature-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: -2rem 0 2.5rem;
    position: relative;
    z-index: 2;
}

.portfolio-feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1.2rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    text-decoration: none;
    color: inherit;
}

.portfolio-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 55px rgba(22, 59, 101, 0.18);
    color: inherit;
}

.portfolio-feature-card i {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    margin: 0 auto 0.7rem;
}

.portfolio-feature-card strong {
    display: block;
    font-size: 0.85rem;
    color: var(--primary);
    margin-bottom: 0.2rem;
}

.portfolio-feature-card span {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.pf-blue i { background: var(--primary-soft); color: var(--secondary); }
.pf-pink i { background: var(--pink-soft); color: var(--pink-accent); }
.pf-purple i { background: var(--purple-soft); color: var(--purple); }
.pf-green i { background: var(--green-soft); color: var(--success); }

.portfolio-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.8rem;
    align-items: start;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.portfolio-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.portfolio-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 55px rgba(22, 59, 101, 0.18);
}

.portfolio-item-cover {
    height: 140px;
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    color: #fff;
}

.portfolio-item-cover.cover-blue { background: linear-gradient(135deg, #93c5fd, var(--secondary)); }
.portfolio-item-cover.cover-pink { background: linear-gradient(135deg, #fbcfe8, var(--pink-accent)); }
.portfolio-item-cover.cover-purple { background: linear-gradient(135deg, #c4b5fd, var(--purple)); }
.portfolio-item-cover.cover-green { background: linear-gradient(135deg, #6ee7b7, var(--success)); }

.portfolio-item-cover-image {
    height: 180px;
    background: #f1f5f9;
    overflow: hidden;
}

.portfolio-item-cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.portfolio-item-actions {
    margin-top: 0.85rem;
}

.portfolio-grid-drive .portfolio-item-body p:last-of-type {
    margin-bottom: 0;
}

.portfolio-item-body .item-sub {
    font-size: 0.82rem;
}

.portfolio-item-body { padding: 1.2rem 1.3rem 1.4rem; }

.portfolio-item-body .item-meta {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.portfolio-item-body h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0.35rem 0 0.5rem;
}

.portfolio-item-body p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.portfolio-sidebar { display: grid; gap: 1.2rem; }

.portfolio-motto {
    background: linear-gradient(145deg, #fff, #f5f3ff);
    border: 2px solid #e9d5ff;
    border-radius: 22px;
    padding: 1.5rem;
    text-align: center;
}

.portfolio-motto i {
    font-size: 1.6rem;
    color: var(--purple);
    margin-bottom: 0.6rem;
    display: block;
}

.portfolio-motto blockquote {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
    line-height: 1.65;
}

.portfolio-motto cite {
    display: block;
    margin-top: 0.8rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-style: normal;
}

.portfolio-contact-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 1.3rem;
    box-shadow: var(--shadow-sm);
}

.portfolio-contact-card h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.9rem;
}

.portfolio-contact-card a,
.portfolio-contact-card span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.55rem;
    text-decoration: none;
}

.portfolio-contact-card i { color: var(--secondary); }

.portfolio-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

.portfolio-hub-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 1.6rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.portfolio-hub-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 55px rgba(22, 59, 101, 0.18);
    color: inherit;
}

.portfolio-hub-card i {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
}

.portfolio-hub-card i.pf-blue { background: var(--primary-soft); color: var(--secondary); }
.portfolio-hub-card i.pf-pink { background: var(--pink-soft); color: var(--pink-accent); }
.portfolio-hub-card i.pf-purple { background: var(--purple-soft); color: var(--purple); }
.portfolio-hub-card i.pf-green { background: var(--green-soft); color: var(--success); }

.portfolio-hub-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}

.portfolio-hub-card p {
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin: 0;
    flex: 1;
}

.portfolio-hub-card .hub-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--secondary) !important;
}

/* Portfolio Hub — หน้า /portfolio แบบใหม่ */
.portfolio-hero-hub {
    padding: 4rem 0 2.5rem;
}

.portfolio-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.portfolio-hero-orb-one {
    width: 280px;
    height: 280px;
    right: 5%;
    top: 10%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%);
}

.portfolio-hero-orb-two {
    width: 220px;
    height: 220px;
    left: 8%;
    bottom: 5%;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.18), transparent 70%);
}

.portfolio-hero-hub-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.portfolio-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.25rem;
}

.portfolio-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.portfolio-hero-stat {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 18px;
    padding: 1.1rem 0.9rem;
    text-align: center;
    box-shadow: 0 12px 32px rgba(22, 59, 101, 0.08);
    backdrop-filter: blur(8px);
}

.portfolio-hero-stat strong {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
}

.portfolio-hero-stat span {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 4px;
    display: block;
}

.portfolio-hub-section {
    padding-top: 2rem;
}

.portfolio-hub-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(140px, auto);
    gap: 16px;
}

.portfolio-hub-card-v2 {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border-radius: 22px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.portfolio-hub-card-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.28s;
    pointer-events: none;
}

.portfolio-hub-card-v2.accent-blue::before { background: linear-gradient(145deg, rgba(37, 99, 235, 0.06), transparent 60%); }
.portfolio-hub-card-v2.accent-pink::before { background: linear-gradient(145deg, rgba(236, 72, 153, 0.07), transparent 60%); }
.portfolio-hub-card-v2.accent-purple::before { background: linear-gradient(145deg, rgba(139, 92, 246, 0.07), transparent 60%); }
.portfolio-hub-card-v2.accent-green::before { background: linear-gradient(145deg, rgba(16, 185, 129, 0.07), transparent 60%); }

.portfolio-hub-card-v2:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(22, 59, 101, 0.14);
    color: inherit;
}

.portfolio-hub-card-v2:hover::before { opacity: 1; }

.portfolio-hub-card-v2.is-featured {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 280px;
}

.portfolio-hub-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.portfolio-hub-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}

.portfolio-hub-card-icon.pf-blue { background: var(--primary-soft); color: var(--secondary); }
.portfolio-hub-card-icon.pf-pink { background: var(--pink-soft); color: var(--pink-accent); }
.portfolio-hub-card-icon.pf-purple { background: var(--purple-soft); color: var(--purple); }
.portfolio-hub-card-icon.pf-green { background: var(--green-soft); color: var(--success); }

.portfolio-hub-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--secondary);
    white-space: nowrap;
}

.portfolio-hub-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 12px 0 10px;
    position: relative;
    z-index: 1;
    flex: 1;
    align-content: end;
}

.portfolio-hub-preview img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.portfolio-hub-card-body {
    position: relative;
    z-index: 1;
    margin-top: auto;
}

.portfolio-hub-card-v2.is-featured .portfolio-hub-card-body {
    padding-top: 8px;
}

.portfolio-hub-card-v2 h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 6px;
}

.portfolio-hub-card-v2.is-featured h3 {
    font-size: 1.2rem;
}

.portfolio-hub-card-v2 p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0 0 10px;
    line-height: 1.55;
}

.hub-link-v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--secondary);
    transition: gap 0.2s;
}

.portfolio-hub-card-v2:hover .hub-link-v2 {
    gap: 10px;
}

.portfolio-hub-featured-head {
    margin-top: 3rem;
}

.portfolio-empty {
    grid-column: 1 / -1;
    background: var(--surface);
    border: 1px dashed #cbd5e1;
    border-radius: 22px;
    padding: 3rem 2rem;
    text-align: center;
}

.portfolio-empty i {
    font-size: 2.5rem;
    color: var(--purple);
    background: var(--purple-soft);
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
}

.portfolio-empty h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 0.4rem; }
.portfolio-empty p { color: var(--text-secondary); font-size: 0.85rem; margin: 0; }

@media (max-width: 991px) {
    .portfolio-feature-strip { grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; }
    .portfolio-layout { grid-template-columns: 1fr; }
    .portfolio-hub-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-hero-hub-inner { grid-template-columns: 1fr; }
    .portfolio-hub-bento { grid-template-columns: repeat(2, 1fr); }
    .portfolio-hub-card-v2.is-featured { grid-column: span 2; grid-row: span 1; min-height: 0; }
}

@media (max-width: 767px) {
    .portfolio-hero { padding: 4rem 0 2.5rem; }
    .portfolio-grid,
    .portfolio-hub-grid { grid-template-columns: 1fr; }
    .portfolio-feature-strip { grid-template-columns: 1fr 1fr; }
    .portfolio-hero-stats { grid-template-columns: 1fr; }
    .portfolio-hub-bento { grid-template-columns: 1fr; }
    .portfolio-hub-card-v2.is-featured { grid-column: span 1; }
    .portfolio-hub-preview { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Auth Page — ตัวอักษรใหญ่ อ่านง่าย รองรับทุกเครื่อง ===== */
.auth-page,
.auth-page input,
.auth-page button,
.auth-page label,
.auth-page a {
    font-family: var(--font-body);
}

.auth-page h1,
.auth-page h2,
.auth-page .auth-brand strong,
.auth-page .auth-submit {
    font-family: var(--font-ui);
}

.auth-brand strong {
    font-size: 1.05rem;
}

.auth-badge {
    font-size: 0.82rem !important;
    padding: 8px 13px !important;
}

.auth-copy h1 {
    font-size: clamp(2.1rem, 4.5vw, 3.6rem) !important;
    line-height: 1.25 !important;
}

.auth-copy p {
    font-size: 1.02rem !important;
    line-height: 1.75 !important;
}

.auth-features span {
    font-size: 0.9rem !important;
}

.auth-card {
    padding: 2.2rem 2rem !important;
}

.auth-card-head p {
    font-size: 0.88rem !important;
}

.auth-card-head h2 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.35rem !important;
}

.auth-card-head > span {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
}

.auth-label {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    margin: 1.25rem 0 0.55rem !important;
}

.auth-input {
    min-height: 52px !important;
    border-radius: 14px !important;
}

.auth-input input {
    font-size: 1rem !important;
    padding: 14px 10px !important;
}

.auth-input input::placeholder {
    font-size: 0.95rem !important;
    color: #94a3b8;
}

.auth-input > i,
.auth-input button {
    font-size: 1.1rem !important;
}

.auth-options {
    font-size: 0.88rem !important;
    margin: 1rem 0 1.35rem !important;
}

.auth-options label span {
    font-size: 0.88rem !important;
}

.auth-submit {
    font-size: 1rem !important;
    min-height: 52px !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
}

.auth-back {
    font-size: 0.9rem !important;
    margin-top: 1.35rem !important;
}

.auth-alert {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    padding: 12px 14px !important;
}

@media (max-width: 991px) {
    .auth-form-area {
        padding: 28px 20px !important;
    }

    .auth-card {
        width: min(480px, 100%) !important;
        padding: 2rem 1.6rem !important;
    }

    .auth-card-head h2 {
        font-size: 1.85rem !important;
    }
}

@media (max-width: 767px) {
    .auth-card-head h2 {
        font-size: 1.7rem !important;
    }

    .auth-label,
    .auth-input input,
    .auth-options,
    .auth-submit,
    .auth-back {
        font-size: 0.95rem !important;
    }

    .auth-input input {
        font-size: 16px !important; /* ป้องกัน iOS zoom ตอน focus */
    }
}

.student-assignment-card {
    align-items: flex-start;
}

.student-assignment-body {
    flex: 1;
    min-width: 0;
}

.student-assignment-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.student-assignment-head h3 {
    margin: 0;
}

.assignment-status-badge {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.assignment-status-badge.is-pending {
    background: #fef3c7;
    color: #92400e;
}

.assignment-status-badge.is-submitted {
    background: #dbeafe;
    color: #1d4ed8;
}

.assignment-status-badge.is-graded {
    background: #dcfce7;
    color: #166534;
}

.assignment-status-badge.is-returned {
    background: #fee2e2;
    color: #b91c1c;
}

.assignment-status-badge.is-late {
    background: #ffedd5;
    color: #c2410c;
}

.assignment-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.assignment-subject {
    color: var(--muted);
    font-size: 0.78rem;
    margin-bottom: 4px;
}

.assignment-due {
    display: block;
    margin-top: 8px;
    color: var(--muted);
}

.assignment-submission-box {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8fbff;
    border: 1px solid var(--line);
}

.assignment-submission-box strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--navy);
    margin-bottom: 8px;
}

.assignment-submission-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    font-size: 0.78rem;
    color: var(--text);
}

.assignment-submission-meta li + li {
    margin-top: 4px;
}

.assignment-file-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
}

.assignment-file-link:hover {
    color: var(--primary-dark);
}

.assignment-answer-preview {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0;
    white-space: pre-wrap;
}

.teacher-subject-groups {
    display: grid;
    gap: 20px;
}

.teacher-subject-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.teacher-subject-head h2 {
    margin: 6px 0 4px;
    font-size: 1.25rem;
    color: var(--navy);
}

.teacher-subject-code {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-soft);
    padding: 4px 10px;
    border-radius: 999px;
}

.teacher-subject-head p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.teacher-room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.teacher-room-card {
    display: block;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fbfdff;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.teacher-room-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: #bfdcff;
}

.teacher-room-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.teacher-room-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--navy);
}

.teacher-room-arrow {
    font-size: 1.4rem;
    color: var(--primary);
}

.teacher-room-card h3 {
    font-size: 0.95rem;
    margin: 0 0 12px;
    color: var(--text);
}

.teacher-room-stats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--muted);
}

.teacher-room-stats i {
    color: var(--primary);
    margin-right: 4px;
}

.teacher-course-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.teacher-course-section {
    margin-bottom: 20px;
}

.compact-empty {
    padding: 28px 16px;
}

.teacher-unit-list {
    display: grid;
    gap: 10px;
}

.teacher-unit-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfdff;
}

.teacher-unit-item p {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: var(--muted);
}

.teacher-units-by-room {
    display: grid;
    gap: 16px;
}

.teacher-units-room {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 16px;
    background: #fbfdff;
}

.teacher-units-room-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.teacher-units-room-head h3 {
    margin: 6px 0 0;
    font-size: 0.95rem;
}

.teacher-unit-order {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    color: var(--muted);
}

.teacher-unit-meta {
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
}

.teacher-unit-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.teacher-lesson-unit {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

.teacher-lesson-unit:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.teacher-lesson-unit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.teacher-lesson-unit-head h4 {
    margin: 0;
    font-size: 0.88rem;
    color: var(--primary);
}

.teacher-lesson-unit-head h4 i {
    margin-right: 4px;
}

.teacher-assignments-table {
    margin-bottom: 0;
}

/* --- ตรวจงาน / Google Drive preview --- */
.grading-pending-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.82rem;
    font-weight: 600;
}

.grading-count.pending {
    display: inline-block;
    min-width: 1.5rem;
    text-align: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 700;
}

.grading-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
}

.grading-toolbar-left {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.grading-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.grading-student-list {
    display: grid;
    gap: 10px;
}

.grading-student-row {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    background: #fbfdff;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.grading-student-row.is-active,
.grading-student-row:hover {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}

.grading-student-row.no-submission {
    opacity: 0.72;
    cursor: default;
}

.grading-student-main {
    display: grid;
    gap: 10px;
}

.grading-row-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.grading-score-fields {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
}

.grading-score-fields label span {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 4px;
}

.grading-preview-link {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.grading-drive-frame {
    width: 100%;
    min-height: 420px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
}

.grading-drive-thumb {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
    display: block;
}

.grading-drive-thumb-link {
    display: block;
    margin-top: 10px;
}

.grading-drive-thumb-link:hover {
    opacity: 0.92;
}

.grading-preview-stage .grading-drive-frame {
    display: none;
    margin-top: 10px;
}

.grading-preview-stage.is-full-preview .grading-drive-frame {
    display: block;
}

.grading-preview-stage.is-full-preview .grading-drive-thumb {
    display: none;
}

.grading-preview-stage .grading-load-full-preview {
    margin-top: 10px;
}

.grading-preview-hint {
    font-size: 0.82rem;
    margin: 8px 0;
}

.grading-card-toggle-head {
    cursor: pointer;
}

.grading-student-card.is-open .grading-card-toggle .bi-chevron-down {
    transform: rotate(180deg);
}

.grading-card-toggle .bi-chevron-down {
    transition: transform 0.2s ease;
}

.student-preview-frame,
.student-card-preview {
    min-height: 260px;
    margin-top: 10px;
}

.grading-preview-stage {
    min-height: 0;
}

.grading-preview-label {
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 8px;
}

.grading-bottom-bar {
    position: sticky;
    bottom: 12px;
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

#gradingBatchForm.is-saving {
    pointer-events: none;
    opacity: 0.92;
}

.grading-ajax-toast {
    position: sticky;
    top: 12px;
    z-index: 40;
    margin-bottom: 12px;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.grading-ajax-toast.is-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.grading-ajax-toast.is-error {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.grading-ajax-toast.is-info {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}

.grading-student-card.is-saved-flash {
    animation: gradingSavedFlash 1.2s ease;
}

@keyframes gradingSavedFlash {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: none; }
}

.grading-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: gradingSpin 0.6s linear infinite;
    vertical-align: -0.15em;
}

@keyframes gradingSpin {
    to { transform: rotate(360deg); }
}

.student-submit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.student-submit-desc {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
    line-height: 1.6;
}

.student-assignment-actions {
    margin: 12px 0;
}

.assignment-late-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 0.82rem;
}

@media (max-width: 991px) {
    .grading-layout,
    .student-submit-grid {
        grid-template-columns: 1fr;
    }

    .grading-score-fields {
        grid-template-columns: 1fr;
    }

    .grading-room-grid,
    .grading-assignment-grid {
        grid-template-columns: 1fr;
    }

    .grading-student-card-grid {
        grid-template-columns: 1fr;
    }
}

/* --- ตรวจงาน UI แบบการ์ด (ระบบเดิม) --- */
.grading-room-grid,
.grading-assignment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.grading-room-card,
.grading-assignment-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s, box-shadow 0.15s;
}

.grading-room-card:hover,
.grading-assignment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.grading-room-card-head h2 {
    margin: 8px 0 4px;
    font-size: 1.35rem;
}

.grading-room-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 1.2rem;
}

.grading-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.grading-stat-grid.compact {
    margin-top: 12px;
}

.grading-stat-box {
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.grading-stat-box strong {
    display: block;
    font-size: 1.15rem;
    line-height: 1.1;
}

.grading-stat-box span {
    display: block;
    margin-top: 4px;
    font-size: 0.62rem;
    line-height: 1.25;
    color: rgba(15, 23, 42, 0.72);
}

.stat-blue { background: #eff6ff; }
.stat-sky { background: #e0f2fe; }
.stat-green { background: #dcfce7; }
.stat-pink { background: #fce7f3; }
.stat-yellow { background: #fef9c3; }

.grading-room-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.grading-summary-pill {
    padding: 6px 12px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 0.78rem;
    font-weight: 600;
}

.grading-summary-pill.warn { background: #fef9c3; color: #854d0e; }
.grading-summary-pill.ok { background: #dcfce7; color: #166534; }

.grading-subject-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.grading-subject-tab {
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    font-size: 0.82rem;
    font-weight: 600;
}

.grading-subject-tab.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border-color: transparent;
}

.grading-assignment-card h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    line-height: 1.45;
}

.grading-assignment-meta {
    margin: 0;
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.5;
}

.grading-assignment-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #eff6ff, #f8fbff);
}

.grading-banner-kicker {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.grading-assignment-banner h1 {
    margin: 4px 0 10px;
    font-size: 1.35rem;
}

.grading-banner-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.grading-tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #bfdbfe;
    font-size: 0.72rem;
    color: #1d4ed8;
}

.grading-batch-bar {
    margin-bottom: 16px;
}

.grading-batch-bar p {
    margin: 0 0 12px;
    font-size: 0.82rem;
    color: var(--muted);
}

.grading-batch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.grading-section {
    margin-bottom: 18px;
}

.grading-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid var(--line);
    cursor: pointer;
    margin-bottom: 12px;
}

.grading-section-head h2 {
    margin: 0;
    font-size: 0.95rem;
}

.grading-section-pending .grading-section-head {
    background: #fffbeb;
    border-color: #fde68a;
    cursor: default;
}

.grading-section-graded .grading-section-head {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.grading-section-returned .grading-section-head {
    background: #fdf2f8;
    border-color: #fbcfe8;
}

.grading-student-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#grading-grid-pending {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.grading-student-card-inline {
    display: flex;
    flex-direction: column;
}

.grading-card-work {
    padding: 0 14px 10px;
}

.grading-inline-thumb {
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: 10px;
    background: #f8fafc;
}

.grading-inline-thumb-link {
    display: block;
    margin-bottom: 8px;
}

.grading-no-thumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: #f1f5f9;
    color: var(--muted);
    font-size: 0.82rem;
}

.grading-answer-inline {
    max-height: 120px;
    overflow: auto;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.grading-preview-inline {
    margin-top: 8px;
}

.grading-preview-inline .grading-drive-frame {
    min-height: 320px;
}

.grading-student-card-inline .grading-inline-form {
    margin-top: auto;
    padding: 12px 14px 14px;
    border-top: 1px dashed var(--line);
    display: grid;
    gap: 8px;
}

.grading-student-card-inline .grading-inline-form label span {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 600;
}

.grading-student-card-grid.collapsed {
    display: none;
}

.grading-student-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.grading-student-card.is-pending {
    border-color: #fde68a;
    background: #fffdf5;
}

.grading-student-card.is-graded {
    border-color: #bbf7d0;
    background: #fafffb;
}

.grading-student-card.is-returned {
    border-color: #fbcfe8;
    background: #fffafd;
}

.grading-student-card.is-empty {
    opacity: 0.75;
    padding: 14px;
}

.grading-student-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
}

.grading-score-display {
    padding: 0 14px 14px;
    font-size: 0.88rem;
    color: #1d4ed8;
    font-weight: 600;
}

.grading-card-body {
    display: none;
    padding: 0 14px 14px;
    border-top: 1px dashed var(--line);
}

.grading-student-card.is-open .grading-card-body {
    display: block;
    padding-top: 14px;
}

.grading-file-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.btn-success-soft {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.grading-card-frame {
    min-height: 320px;
    margin-bottom: 12px;
}

.grading-inline-form {
    display: grid;
    gap: 10px;
}

.grading-inline-form label span {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 4px;
}

.grading-return-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
}

.grading-answer-text {
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 10px;
}

@media (max-width: 991px) {
    .teacher-course-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .teacher-course-summary {
        grid-template-columns: 1fr;
    }

    .teacher-unit-item {
        grid-template-columns: 1fr;
    }
}

/* --- ตารางคะแนนนักเรียน --- */
.score-table-wrap {
    padding: 0;
    overflow: hidden;
}

.score-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.score-summary-table th,
.score-summary-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.score-summary-table thead th {
    background: #f8fafc;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
}

.score-summary-table tbody tr:hover {
    background: #fafbff;
}

.score-cell {
    font-variant-numeric: tabular-nums;
}

.score-total strong {
    color: #1d4ed8;
}

.score-grade-badge {
    display: inline-block;
    min-width: 36px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 700;
}

.score-result-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #f1f5f9;
    color: var(--muted);
}

.score-result-badge.is-good {
    background: #dcfce7;
    color: #166534;
}

.score-result-badge.is-pass {
    background: #fef9c3;
    color: #854d0e;
}

.score-result-badge.is-fail {
    background: #fee2e2;
    color: #991b1b;
}

.score-table-note {
    margin: 0;
    padding: 12px 16px;
    font-size: 0.78rem;
    color: var(--muted);
    border-top: 1px solid var(--line);
    background: #fafafa;
}

@media (max-width: 991px) {
    .score-table-wrap .table-responsive {
        overflow-x: auto;
    }

    .score-summary-table {
        min-width: 900px;
    }

    .pap5-subject-head {
        flex-direction: column;
    }

    .pap5-subject-summary {
        width: 100%;
    }
}

/* --- ปพ.5 รายชิ้น --- */
.pap5-subject-card {
    margin-bottom: 18px;
    padding: 0;
    overflow: hidden;
}

.pap5-subject-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #eff6ff, #f8fbff);
    border-bottom: 1px solid var(--line);
}

.pap5-subject-code {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-soft);
    padding: 4px 10px;
    border-radius: 999px;
}

.pap5-subject-head h2 {
    margin: 6px 0 4px;
    font-size: 1.2rem;
    color: var(--navy);
}

.pap5-subject-head p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.pap5-subject-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pap5-summary-item {
    min-width: 100px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    text-align: center;
}

.pap5-summary-item span {
    display: block;
    font-size: 0.68rem;
    color: var(--muted);
    margin-bottom: 4px;
}

.pap5-summary-item strong {
    font-size: 0.95rem;
}

.pap5-category-block {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.pap5-category-block:last-of-type {
    border-bottom: none;
}

.pap5-category-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 0.92rem;
    color: var(--navy);
}

.pap5-category-total {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
}

.pap5-empty-cat {
    margin: 0;
    font-size: 0.82rem;
    padding: 8px 0;
}

.pap5-item-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.pap5-item-table th,
.pap5-item-table td {
    padding: 10px 12px;
    border: 1px solid var(--line);
    vertical-align: middle;
}

.pap5-item-table thead th {
    background: #f8fafc;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--navy);
}

.pap5-item-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    margin-right: 6px;
    vertical-align: middle;
}

.pap5-item-type.is-assignment {
    background: #dbeafe;
    color: #1d4ed8;
}

.pap5-item-type.is-quiz {
    background: #ede9fe;
    color: #6d28d9;
}

.pap5-status-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.pap5-status-badge.is-graded { background: #dcfce7; color: #166534; }
.pap5-status-badge.is-pending { background: #fef9c3; color: #854d0e; }
.pap5-status-badge.is-returned { background: #fce7f3; color: #9d174d; }
.pap5-status-badge.is-empty { background: #f1f5f9; color: #64748b; }

.pap5-feedback {
    font-size: 0.78rem;
    color: var(--muted);
    max-width: 200px;
}

.pap5-subtotal-row {
    background: #f8fafc;
}

.pap5-subtotal-row td {
    border-top: 2px solid #cbd5e1;
}

.pap5-grand-total {
    padding: 14px 20px;
    background: #f1f5f9;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-end;
}

.pap5-grand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.pap5-grand-row span {
    color: var(--muted);
}

.score-table-note.standalone-note {
    margin-top: 0;
    border-radius: 12px;
    border: 1px solid var(--line);
}

/* ===== Portal Theme A — Hero ทุกหน้า + UI สดใส ===== */
.app-shell .page-head {
    position: relative;
    overflow: hidden;
    align-items: center !important;
    border-radius: 24px !important;
    padding: 28px 32px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.2) !important;
}

.app-shell-teacher .page-head {
    background: linear-gradient(135deg, #2563eb 0%, #6366f1 52%, #a855f7 100%) !important;
}

.app-shell-student .page-head {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 48%, #14b8a6 100%) !important;
}

.app-shell-admin .page-head {
    background: linear-gradient(135deg, #163B65 0%, #2563eb 100%) !important;
}

.app-shell .page-head::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    right: -70px;
    top: -110px;
    pointer-events: none;
}

.app-shell .page-head::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    left: -30px;
    bottom: -70px;
    pointer-events: none;
}

.app-shell .page-head > div,
.app-shell .page-head > a,
.app-shell .page-head > span,
.app-shell .page-head > form {
    position: relative;
    z-index: 1;
}

.app-shell .page-head h1 {
    color: #fff !important;
    font-size: clamp(1.35rem, 3vw, 1.85rem) !important;
}

.app-shell .page-head p {
    color: rgba(255, 255, 255, 0.84) !important;
}

.app-shell .page-kicker {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
}

.app-shell .page-head .btn-tsw-primary,
.app-shell .page-head .btn-primary {
    background: #fff !important;
    color: var(--secondary) !important;
    border: none !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14) !important;
}

.app-shell .page-head .btn-tsw-primary:hover,
.app-shell .page-head .btn-primary:hover {
    background: #f8fafc !important;
    color: var(--primary) !important;
    transform: translateY(-2px);
}

.app-shell .page-head .btn-tsw-soft,
.app-shell .page-head .btn-light {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.app-shell .page-head .btn-tsw-soft:hover,
.app-shell .page-head .btn-light:hover {
    background: rgba(255, 255, 255, 0.26) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.app-shell .page-head .grading-pending-badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.app-shell .grading-assignment-banner {
    background: linear-gradient(135deg, #2563eb, #6366f1) !important;
    border: none !important;
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.2) !important;
    color: #fff !important;
}

.app-shell .grading-assignment-banner h1,
.app-shell .grading-banner-kicker {
    color: #fff !important;
}

.app-shell .grading-tag {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

.app-shell .empty-modern > i {
    background: linear-gradient(135deg, #dbeafe, #ede9fe) !important;
    color: var(--secondary) !important;
    width: 72px !important;
    height: 72px !important;
    font-size: 2rem !important;
    border-radius: 22px !important;
}

.app-shell .panel-icon,
.app-shell .metric-icon {
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.1);
}

.app-shell .metric-blue .metric-icon {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
}

.app-shell .metric-purple .metric-icon {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe) !important;
}

.app-shell .metric-pink .metric-icon {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8) !important;
}

.app-shell .metric-green .metric-icon {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
}

.app-shell .teacher-subject-code {
    background: linear-gradient(135deg, var(--primary-soft), #eef2ff) !important;
}

.app-shell .grading-subject-tab.active {
    background: linear-gradient(135deg, #2563eb, #6366f1) !important;
}

.app-shell .offcanvas-header {
    background: linear-gradient(180deg, #163B65, #2563eb);
    color: #fff;
}

.app-shell .offcanvas-header .btn-close {
    filter: invert(1);
}

.app-shell .topbar-eyebrow {
    color: var(--secondary) !important;
    font-weight: 700;
}

.app-shell .user-chip {
    background: linear-gradient(135deg, #f8fafc, #eff6ff) !important;
    border-color: #dbeafe !important;
}

/* Dashboard — ลิงก์และรายการ */
.metric-card-link,
.stat-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.metric-card-link:hover,
.stat-card-link:hover {
    transform: translateY(-4px);
}

.dashboard-mini-list {
    display: grid;
    gap: 8px;
}

.dashboard-mini-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: 0.2s;
}

.dashboard-mini-item:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    transform: translateX(3px);
}

.dashboard-mini-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: var(--secondary);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.dashboard-mini-item strong {
    display: block;
    font-size: 0.82rem;
}

.dashboard-mini-item small {
    color: var(--muted);
    font-size: 0.72rem;
}

.dashboard-mini-item > .bi-chevron-right {
    margin-left: auto;
    color: var(--muted);
}

.task-list-link {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 15px;
    background: #f8fafc;
    text-decoration: none;
    color: inherit;
    transition: 0.2s;
}

.task-list-link:hover {
    background: #eff6ff;
}

.task-list-link.is-urgent {
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.timeline-item-link {
    text-decoration: none;
    color: inherit;
    transition: 0.2s;
}

.timeline-item-link:hover {
    background: #eff6ff;
}

.home-article-list {
    display: grid;
    gap: 12px;
}

.home-article-item {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
}

.home-article-item:last-child {
    border-bottom: none;
}

.home-article-item strong {
    display: block;
    font-size: 0.88rem;
    color: var(--navy);
}

.home-article-item p {
    margin: 4px 0;
    font-size: 0.78rem;
    color: var(--muted);
}

.home-article-item small {
    font-size: 0.68rem;
    color: #94a3b8;
}

.gallery-tile-link {
    text-decoration: none;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.gallery-tile-link img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.gallery-tile-link span,
.gallery-tile-link i {
    position: relative;
    z-index: 1;
}

/* หน้ารายวิชาสาธารณะ — จัดกลุ่มตามวิชา */
.public-subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.public-subject-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--shadow-sm);
    transition: 0.25s;
}

.public-subject-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.public-subject-code {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--secondary);
    background: var(--primary-soft);
    padding: 4px 10px;
    border-radius: 999px;
}

.public-subject-card-head h3 {
    margin: 10px 0 6px;
    font-size: 1.1rem;
    color: var(--navy);
}

.public-subject-room-count {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted);
}

.public-subject-desc {
    margin: 12px 0;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.55;
}

.public-classroom-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.public-classroom-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.public-home-rooms {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: var(--muted);
}

.stat-card .stat-sub {
    display: block;
    font-size: 0.68rem;
    font-style: normal;
    color: var(--muted);
    margin-top: 2px;
}

.public-grid-subjects {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

@media (max-width: 767px) {
    .app-shell .page-head {
        padding: 22px 20px !important;
        align-items: flex-start !important;
        flex-direction: column;
    }
}

/* ----- เก็บชั้นเรียนสิ้นภาคเรียน ----- */
.course-view-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.course-view-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--border);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.course-view-tab:hover {
    color: var(--primary);
    border-color: #bfdbfe;
}

.course-view-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: transparent;
}

.course-archived-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
}

.assignment-status-badge.is-archived {
    background: #f3f4f6;
    color: #4b5563;
}

.course-archived-alert {
    margin-bottom: 16px;
}

.page-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.portfolio-drive-sync-panel {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.portfolio-drive-sync {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.portfolio-drive-sync-compact {
    gap: 0;
}

.portfolio-drive-sync-copy strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.portfolio-drive-sync-copy p {
    margin: 0;
    font-size: 0.88rem;
    color: #64748b;
    max-width: 36rem;
}

.portfolio-drive-sync-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #64748b;
}

.portfolio-drive-sync-links a {
    color: var(--secondary);
    text-decoration: none;
    font-weight: 600;
}

.portfolio-drive-sync-links a:hover {
    text-decoration: underline;
}

.teacher-subject-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.teacher-room-card.is-archived {
    opacity: 0.92;
    border-style: dashed;
}

.teacher-room-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
}

/* ----- Gallery สไลด์ (Drive thumbnail, ไม่แสดง iframe) ----- */
.tsw-gallery-carousel {
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
}

.tsw-gallery-carousel.is-compact .tsw-carousel-viewport {
    aspect-ratio: 16 / 9;
    max-height: 420px;
}

.tsw-carousel-viewport {
    position: relative;
    aspect-ratio: 16 / 10;
    max-height: 560px;
    background: linear-gradient(145deg, #eef6ff, #f8fafc);
    overflow: hidden;
}

.tsw-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.tsw-carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.tsw-carousel-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.tsw-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #f1f5f9;
}

.tsw-carousel-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 18px;
    background: linear-gradient(transparent, rgba(15, 23, 42, 0.85));
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tsw-carousel-caption strong {
    font-size: 0.95rem;
}

.tsw-carousel-caption span {
    font-size: 0.82rem;
    opacity: 0.9;
}

.tsw-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--navy);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    display: grid;
    place-items: center;
    z-index: 2;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.tsw-carousel-btn:hover {
    transform: translateY(-50%) scale(1.05);
    background: #fff;
}

.tsw-carousel-prev { left: 12px; }
.tsw-carousel-next { right: 12px; }

.tsw-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px 0;
}

.tsw-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #cbd5e1;
    padding: 0;
    cursor: pointer;
}

.tsw-carousel-dot.is-active {
    background: var(--primary);
    transform: scale(1.2);
}

.tsw-carousel-thumbs {
    display: flex;
    gap: 8px;
    padding: 12px 16px 16px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.tsw-carousel-thumb {
    flex: 0 0 72px;
    height: 52px;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s, border-color 0.2s;
}

.tsw-carousel-thumb.is-active {
    border-color: var(--primary);
    opacity: 1;
}

.tsw-carousel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.gallery-album-card {
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: inherit;
}

.gallery-album-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.gallery-album-cover {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #eaf4ff, #fff0f5);
    overflow: hidden;
}

.gallery-album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-album-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: 2.5rem;
    color: var(--primary);
}

.gallery-album-count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 999px;
}

.gallery-album-body {
    padding: 16px;
}

.gallery-album-date {
    font-size: 0.75rem;
    color: var(--muted);
}

.gallery-album-body h3 {
    font-size: 1.05rem;
    margin: 4px 0 6px;
}

.gallery-album-body p {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0;
}

.gallery-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
    font-size: 0.88rem;
}

.gallery-show-hero {
    padding-bottom: 2rem;
}

.gallery-show-date {
    opacity: 0.9;
}

.gallery-page-section {
    padding-top: 2rem;
}

.gallery-home-section {
    padding-top: 3rem;
}

.gallery-home-carousel {
    position: relative;
}

.gallery-home-carousel-viewport {
    overflow: hidden;
    border-radius: 4px;
}

.gallery-home-carousel-track {
    display: flex;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.gallery-home-carousel-random .gallery-home-carousel-page {
    width: 100%;
}

.gallery-home-carousel.is-images-only .gallery-home-card {
    cursor: default;
}

.gallery-home-carousel.is-images-only .gallery-home-card-media {
    border-radius: 20px;
}

.student-works-section .gallery-home-carousel {
    max-width: 100%;
}

.gallery-home-card.is-changing {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
}

.gallery-home-carousel-page {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    min-width: 0;
}

.gallery-home-carousel-page.is-single .gallery-home-card {
    max-width: calc(50% - 9px);
}

.gallery-home-carousel-btn {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--navy);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12);
    display: grid;
    place-items: center;
    z-index: 2;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gallery-home-carousel-btn:hover {
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.16);
}

.gallery-home-carousel-prev { left: -12px; }
.gallery-home-carousel-next { right: -12px; }

.gallery-home-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.gallery-home-carousel-dot {
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 50%;
    padding: 0;
    background: #cbd5e1;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.gallery-home-carousel-dot.is-active {
    background: var(--primary);
    transform: scale(1.25);
}

.gallery-home-card {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: opacity 0.45s ease, transform 0.45s ease, box-shadow 0.22s ease;
}

.gallery-home-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.gallery-home-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, #eef6ff 0%, #f8fafc 50%, #fff0f5 100%);
}

.gallery-home-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.06);
    transition: transform 0.35s ease;
}

.gallery-home-card:hover .gallery-home-card-media img {
    transform: scale(1.1);
}

.gallery-home-card-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: 2.5rem;
    color: var(--primary);
}

.gallery-home-card-caption {
    padding: 14px 16px 16px;
    background: #fff;
}

.gallery-home-card-caption strong {
    display: block;
    font-size: 0.92rem;
    color: var(--navy);
    margin-bottom: 2px;
}

.gallery-home-card-caption span {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
}

@media (max-width: 767px) {
    .gallery-home-carousel-page {
        grid-template-columns: 1fr;
    }
    .gallery-home-carousel-page.is-single .gallery-home-card {
        max-width: 100%;
    }
    .gallery-home-carousel-prev { left: 4px; }
    .gallery-home-carousel-next { right: 4px; }
    .gallery-home-carousel-btn {
        width: 34px;
        height: 34px;
    }
}

/* ----- ผลงานนักเรียน (หน้าสาธารณะ) ----- */
.student-works-section {
    padding-top: 2rem;
}

.student-works-main {
    min-width: 0;
}

.student-works-subject-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.student-works-subject-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    font-size: 0.88rem;
    transition: 0.2s;
}

.student-works-subject-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.student-works-subject-pill .pill-code {
    font-weight: 700;
    color: var(--primary);
}

.student-works-subject-pill em {
    font-style: normal;
    font-size: 0.72rem;
    background: #eff6ff;
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 999px;
}

.student-works-subject-block {
    margin-bottom: 32px;
}

.student-works-subject-head {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid #dbeafe;
}

.student-works-subject-code {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    background: #eff6ff;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 6px;
}

.student-works-subject-head h2 {
    font-size: 1.35rem;
    margin: 0 0 4px;
}

.student-works-subject-head p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.student-works-assignment-block {
    margin-bottom: 28px;
    padding: 18px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.student-works-assignment-head {
    margin-bottom: 14px;
}

.student-works-assignment-head h3 {
    font-size: 1.05rem;
    margin: 0 0 4px;
    color: var(--navy);
}

.student-works-assignment-head p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.student-works-assignment-head i {
    color: var(--primary);
}

/* สไลด์ผลงานนักเรียน — ทีละ 2–3 ภาพ เห็นครบ */
.sw-works-carousel {
    width: 100%;
}

.sw-works-viewport {
    overflow: hidden;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid var(--line);
}

.sw-works-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sw-works-page {
    flex: 0 0 100%;
    display: grid;
    gap: 12px;
    padding: 12px;
    box-sizing: border-box;
}

.sw-works-page.is-double {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sw-works-page.is-triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sw-works-item {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    min-height: 280px;
    max-height: min(520px, 62vh);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sw-works-item img {
    width: 100%;
    height: 100%;
    max-height: min(520px, 62vh);
    object-fit: contain;
    object-position: center;
    display: block;
}

.sw-works-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.sw-works-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: 0.15s;
}

.sw-works-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(1.05);
}

.sw-works-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: min(100%, 360px);
}

.sw-works-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: 0.2s;
}

.sw-works-dot.is-active {
    background: var(--primary);
    transform: scale(1.25);
}

.sw-works-counter {
    font-size: 0.82rem;
    color: var(--muted);
    min-width: 3.5rem;
    text-align: center;
}

@media (max-width: 991px) {
    .sw-works-page.is-triple {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sw-works-item {
        min-height: 220px;
        max-height: min(420px, 50vh);
    }
}

@media (max-width: 575px) {
    .sw-works-page.is-double,
    .sw-works-page.is-triple {
        grid-template-columns: 1fr;
    }
}

.student-works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.student-work-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.student-work-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.student-work-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(145deg, #eef6ff, #f8fafc);
    overflow: hidden;
}

.student-work-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-work-text-preview {
    padding: 16px;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
    height: 100%;
    overflow: hidden;
}

.student-work-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: 2.2rem;
    color: var(--primary);
}

.student-work-score {
    position: absolute;
    right: 10px;
    top: 10px;
    background: rgba(15, 23, 42, 0.82);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

.student-work-body {
    padding: 16px;
}

.student-work-meta {
    font-size: 0.72rem;
    color: var(--muted);
}

.student-work-body h3 {
    font-size: 1rem;
    margin: 6px 0 8px;
}

.student-work-student {
    font-size: 0.85rem;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.student-work-feedback {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0 0 10px;
}

.student-work-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.grading-showcase-toggle {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

.grading-showcase-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.grading-showcase-check input[type="checkbox"] {
    margin-top: 3px;
}

.grading-tag-showcase {
    background: #fef3c7;
    color: #92400e;
}

@media (max-width: 767px) {
    .tsw-carousel-btn {
        width: 36px;
        height: 36px;
    }
    .tsw-carousel-thumbs {
        display: none;
    }
}