/* SCYW-inspired composition, built for SCKC with original implementation. */
:root{--paper:#fff;--surface:#fff;--ink:#141a1d;--muted:#77797e;--line:#e8e8eb;--soft:#f4f4f5;--navy:#7538b8;--gold:#eee4ff;--blue:#9752cf;--pink:#9c51c7;--radius:16px}html{scroll-behavior:smooth}body{font-family:'Kanit',Tahoma,system-ui,sans-serif;font-size:16px;background:var(--paper);font-weight:400}.wrap{width:min(1180px,calc(100% - 48px))}.icon{height:20px;width:20px;vertical-align:middle;flex-shrink:0}.floating-header{position:sticky;top:15px;width:calc(100% - 64px);max-width:1440px;margin:15px auto 0;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 22px #151a2704;background:color-mix(in srgb,var(--surface) 96%,transparent);z-index:20}.floating-header .header{min-height:64px;padding:12px 24px;display:flex;gap:22px;justify-content:space-between}.brand{gap:12px;white-space:nowrap}.wordmark{font-size:19px;font-weight:700;letter-spacing:-.7px;line-height:1.2;color:var(--ink);font-style:normal}.wordmark>span{color:var(--blue)}.wordmark>em{color:var(--pink);font-style:normal}.school-mark{width:34px;height:34px;object-fit:contain;flex-shrink:0}.school-mark.monogram{display:grid;place-items:center;background:#f5f5f5;color:#54565a;border:1px solid #ddd;border-radius:11px;font-size:13px;font-weight:600;letter-spacing:-1px}.floating-header nav{display:flex;align-items:center;gap:20px;font-size:14px;margin:auto}.floating-header nav>a,.nav-dropdown>summary{display:flex;align-items:center;gap:6px;padding:7px 0;color:var(--ink);font-size:14px;line-height:1.5;font-weight:400;cursor:pointer}.floating-header nav>a.active,.nav-dropdown>summary.active{font-weight:600;color:var(--ink);box-shadow:none}.floating-header nav .icon{width:17px;height:17px}.nav-dropdown{position:relative}.nav-dropdown>summary{list-style:none}.nav-dropdown>summary::-webkit-details-marker{display:none}.nav-dropdown>summary>.icon:last-child{width:13px;height:13px}.dropdown-panel{position:absolute;left:-15px;top:calc(100% + 15px);width:240px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 28px #151a2710;padding:10px}.dropdown-panel>a{display:flex;gap:12px;align-items:center;padding:13px 12px;border-radius:10px;white-space:normal;font-size:14px!important;font-weight:400!important}.dropdown-panel>a:hover{background:var(--soft)}.dropdown-panel>a>.icon{color:var(--navy);width:23px!important;height:23px!important}.header-actions{display:flex;gap:13px;align-items:center}.theme-toggle{border:0;background:none;height:30px;width:30px;padding:4px;color:#77787d;margin:0}.theme-toggle .icon{width:23px;height:23px;fill:currentColor;stroke-width:0}.btn{font-weight:400;border-radius:11px;padding:10px 19px;min-height:40px;border:0;background:var(--navy);color:#fff;box-shadow:none}.btn:hover{transform:none;box-shadow:none;filter:brightness(.98)}.btn.soft,.btn.gold,.login-btn{background:#eee4ff;color:#592b86;border:0}.btn.gold:hover{background:#bddbfc}.login-btn{font-size:13px;padding:7px 16px;min-height:33px;border-radius:9px}.btn.light{background:#f1f1f2;border:0;color:#45454a}.btn.small{min-height:33px;font-size:13px;padding:7px 13px}.btn.danger{background:#f7effd;color:#dc1553}.demo-strip{background:transparent;color:#98999e;border:0;font-size:11px;line-height:1.5;margin-top:10px;padding:0 16px}.reference-hero{min-height:590px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:65px 16px 85px}.hero-emblem{width:60px;height:60px;margin-bottom:33px}.hero-emblem.monogram{font-size:22px;border-radius:17px;border-color:#e0e0e2;background:#fafafa}.reference-hero h1{margin:0 0 9px;line-height:1.2}.reference-hero h1 .wordmark{font-size:48px;letter-spacing:-2px;font-weight:700}.reference-hero p{margin:6px 0 22px;color:var(--ink);font-size:17px}.reference-hero .btn{font-size:16px;padding:9px 20px;min-height:41px}.announcement{border:1px solid var(--line);background:var(--soft);padding:10px 17px;gap:12px;margin-bottom:24px;display:flex;border-radius:12px}.announcement>span{background:#eee4ff;color:#592b86;font-size:12px;padding:2px 9px}.announcement>p{font-size:14px;color:var(--muted)}.group-photo{border:1px solid var(--line);background:#fafbfd;border-radius:17px;height:clamp(220px,30vw,380px);color:var(--ink);box-shadow:0 2px 7px #00000005}.photo-empty{padding:30px;color:var(--muted);border:0;background:transparent}.photo-empty h2{font-size:24px;margin:10px 0 0;color:var(--ink);letter-spacing:0}.photo-empty p{font-size:14px;margin:2px 0 5px}.photo-empty small{color:var(--muted);font-size:12px}.photo-symbol{display:grid;place-items:center;background:#e7f1fd;color:var(--navy);border-radius:16px;width:58px;height:58px;margin:auto}.photo-symbol .icon{width:28px;height:28px}.photo-caption{color:#4f5964;background:linear-gradient(transparent,#edf3facf);font-size:12px;padding:22px 20px 12px}.group-photo:has(img) .photo-caption{color:white;background:linear-gradient(transparent,#111827a6)}.section{padding:34px 0}.section-head h2{font-size:27px;font-weight:600;letter-spacing:-.3px}.section-head p{font-size:14px}.page-head{margin:60px auto 0;padding:32px 30px;text-align:center;background:var(--surface);border:1px solid #d4e5f8;border-radius:17px;box-shadow:0 1px 3px #0002,0 0 0 1px #e1ecf533;min-height:260px}.page-head:after{display:none}.page-head h1{font-size:30px;letter-spacing:-.6px;line-height:1.4;font-weight:700;margin:15px 0 6px}.page-head p{margin:0 auto;color:var(--muted);max-width:850px;font-size:16px}.page-symbol{width:64px;height:64px;background:#e6f1fd;color:#0676ed;border-radius:18px;display:grid;place-items:center;margin:0 auto}.page-symbol .icon{width:30px;height:30px;stroke-width:2.4}.back-home{display:inline-flex;align-items:center;gap:8px;background:#f1f1f2;color:#444;font-size:13px;font-weight:500;margin-top:23px;padding:5px 13px;border-radius:9px}.back-home .icon{width:15px;height:15px}.grid{gap:24px;grid-template-columns:repeat(3,minmax(0,1fr))}.card,.gallery-card,.faq-item{border-radius:17px;border:1px solid #e3e3e6;background:var(--surface);box-shadow:0 2px 5px #00000008;padding:22px}.grid article.card{border-top:1px solid #e3e3e6}.card:hover{box-shadow:0 3px 8px #0000000a}.card h3{font-size:20px;font-weight:600;margin:12px 0 8px}.card .cover{width:100%;margin:0 0 12px;border-radius:12px;object-fit:cover;height:210px}.card p{font-size:15px}.tag{font-size:12px;font-weight:400;border-radius:20px;background:#ddf4e7;color:#267b4e;line-height:1.5;padding:2px 9px}.tag.closed{background:#f1f1f2;color:#777}.meta{font-size:13px;color:var(--muted)}.activity-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.event-card{padding:12px}.event-card .cover{height:auto;aspect-ratio:1/1.2;object-fit:cover;margin:0 0 10px}.event-card h3{font-size:18px}.event-card .tag{display:table;margin:0 auto 12px}.event-card p{font-size:13px;margin:4px 0;line-height:1.5}.event-card .event-date{color:var(--pink);font-weight:500}.event-details>summary{list-style:none;text-align:center;margin-top:13px;width:100%;font-size:14px}.event-details>summary::-webkit-details-marker{display:none}.event-details .prose{font-size:14px;margin-top:15px}.event-details .btn.soft{margin-top:14px;width:100%}.toolbar{margin-bottom:22px}.toolbar input,.toolbar select{background:#f4f4f5;border:0;min-height:42px;border-radius:12px;font-size:14px}.toolbar select{width:250px}.teacher-table{border:1px solid var(--line);box-shadow:0 2px 4px #0001;padding:8px;border-radius:18px}.teacher-table table{border-collapse:separate;border-spacing:0;font-size:14px}.teacher-table th{background:#f4f4f5;color:#777;font-size:13px;font-weight:500;border:0;padding:12px}.teacher-table th:first-child{border-radius:12px 0 0 12px}.teacher-table th:last-child{border-radius:0 12px 12px 0}.teacher-table td{border:0;border-bottom:1px solid var(--line);padding:16px 12px}.teacher-table tr:last-child td{border:0}.teacher-table .empty{border:0;padding:50px 20px}.teacher-table .avatar{width:50px;height:50px}.teacher-detail{text-align:center}.teacher-detail .avatar{width:90px;height:90px;margin:0 auto 20px}.teacher-detail .prose{text-align:left}.empty{border:1px dashed var(--line);color:var(--muted);font-size:15px;background:var(--surface)}.field input,.field textarea,.field select{border:1px solid var(--line);background:var(--soft);box-shadow:none;font-family:inherit}.field span{font-weight:400}.required{color:var(--pink)}.narrow{max-width:760px}.calc-tabs{display:flex;border:1px solid var(--line);padding:4px;border-radius:12px;box-shadow:0 1px 2px #0002;gap:5px;margin-bottom:28px}.calc-tabs button{border:0;border-radius:9px;padding:11px;width:50%;background:transparent;color:var(--muted);font-size:14px}.calc-tabs button[aria-pressed=true]{background:#7538b8;color:white}.calc-result{text-align:center;padding:28px 22px;margin-bottom:18px}.calc-result p{font-size:14px;margin:0 0 10px}.calc-result output{font-size:48px;font-weight:600;color:#7538b8;line-height:1.5;display:block}.calc-result #calc-summary{color:var(--muted);font-size:13px;margin:10px 0}.calc-result small{color:var(--muted);font-size:12px}.calc-row{display:grid;grid-template-columns:24px minmax(0,1fr) 25px;gap:10px;padding:14px;margin:14px 0}.calc-index{background:var(--soft);border-radius:50%;height:24px;width:24px;display:grid;place-items:center;font-size:12px;color:var(--muted)}.calc-row input,.calc-row select{background:var(--soft);border:0;border-radius:9px;padding:8px 11px;font-size:14px}.calc-inputs{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:9px}.calc-inputs label>span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}.remove-row{color:var(--pink);border:0;background:none;font-size:24px;padding:0;align-self:start}.calc-note{font-size:13px;margin-top:25px}.gallery-card{padding:0}.gallery-card>div{padding:20px}.faq-item summary{font-weight:500}.feature{background:var(--soft);color:var(--ink);border-color:var(--line)}footer{background:var(--surface);color:var(--muted);padding:0 0 25px;margin-top:54px}.footer-divider{display:flex;align-items:center;gap:18px;width:min(1180px,calc(100% - 48px));margin:0 auto 38px}.footer-divider>span:not(.school-mark){height:1px;flex:1;background:linear-gradient(90deg,transparent,#c4dfea)}.footer-divider>span:last-child:not(.school-mark){background:linear-gradient(90deg,#e8c7d4,transparent)}.footer-divider .school-mark{width:23px;height:23px;opacity:.35;font-size:9px;border-radius:7px}.footer-columns{display:grid;grid-template-columns:1.5fr .7fr .9fr;gap:65px}.footer-columns .brand{display:flex;align-items:center;margin:0 0 22px}.footer-columns h3{color:var(--ink);font-size:20px;font-weight:600;margin:0 0 21px}.footer-columns p{font-size:14px;line-height:1.8}.footer-columns>div>a:not(.brand){display:flex;align-items:center;gap:12px;font-size:14px;margin:12px 0}.footer-columns p .icon{margin-right:10px}.footer-columns a:hover{color:var(--navy)}.copyright{border-top:1px solid var(--line);text-align:center;font-size:12px;padding-top:20px;margin-top:30px;color:var(--muted)}.admin-nav button.selected{background:#e6f1ff;color:#7538b8;box-shadow:none}.admin-welcome{background:#f7f1fd;color:#152c43;border:1px solid #d7e7fb}.admin-welcome .tag{background:#e0efff;color:#7538b8}.admin-welcome p{color:#687e96}.welcome-monogram{color:#7538b8}.welcome-monogram span{color:#9c51c744}.admin-brand .mark{background:#7538b8;border:0;color:white}.stat-card small{color:#7538b8}.bar-track>div{background:linear-gradient(#298eff,#bfdcfc)}.activity-dot{background:#7538b8}.stat-card:hover{border-color:#9ac8fa}.eyebrow{color:#7538b8}.notice{background:#f7f1fd;color:#325c87;border-color:#cfe2f9}.login-card{text-align:left}#toast{background:#111827}.admin-workspace .toolbar select{background:var(--soft)}
html[data-theme=dark]{--paper:#09090b;--surface:#111114;--ink:#f3f3f4;--muted:#a0a0a7;--line:#2b2b30;--soft:#222226;--navy:#3b96ff}html[data-theme=dark] .floating-header,html[data-theme=dark] nav{background:#111114f5}html[data-theme=dark] .wordmark{color:#f2f2f4}html[data-theme=dark] .school-mark.monogram{background:#242428;border-color:#444;color:#ccc}html[data-theme=dark] .page-head{border-color:#273c54;box-shadow:none}html[data-theme=dark] .page-symbol,html[data-theme=dark] .photo-symbol{background:#122c48;color:#66aeff}html[data-theme=dark] .group-photo{background:#121a23;border-color:var(--line)}html[data-theme=dark] .photo-caption{color:#ccc;background:linear-gradient(transparent,#101721)}html[data-theme=dark] .btn.soft,html[data-theme=dark] .btn.gold,html[data-theme=dark] .login-btn{background:#153a61;color:#9bc9ff}html[data-theme=dark] .btn.light,html[data-theme=dark] .back-home{background:#27272b;color:#d5d5d8}html[data-theme=dark] .card,html[data-theme=dark] .gallery-card,html[data-theme=dark] .faq-item{border-color:var(--line)}html[data-theme=dark] .tag{background:#153627;color:#91dcb5}html[data-theme=dark] .tag.closed{background:var(--soft);color:var(--muted)}html[data-theme=dark] .toolbar input,html[data-theme=dark] .toolbar select,html[data-theme=dark] .teacher-table th{background:var(--soft);color:var(--muted)}html[data-theme=dark] .admin-welcome{background:#112133;color:var(--ink);border-color:#294461}html[data-theme=dark] .admin-nav button.selected{background:#173453;color:#aad2ff}html[data-theme=dark] .btn.danger{background:#3d1423;color:#d9b9ef}html[data-theme=dark] .notice{background:#132c47;color:#bed9f9;border-color:#294d73}html[data-theme=dark] .announcement{background:var(--soft);border-color:var(--line)}html[data-theme=dark] .demo-strip{background:transparent;color:#777}
@media(max-width:1190px){.floating-header{width:calc(100% - 32px)}.floating-header .header{gap:14px;padding:12px 18px}.floating-header nav{gap:13px}.floating-header nav>a,.nav-dropdown>summary{font-size:13px}.wordmark{font-size:17px}.header-actions{gap:8px}.activity-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1051px){.floating-header .menu{display:none}.floating-header nav{position:static;border:0;padding:0;background:transparent;width:auto}.floating-header .header{min-height:64px}.floating-header .brand small{display:none}}
@media(max-width:1050px){.floating-header .menu{display:block;order:3;padding:5px 10px;font-size:13px}.header-actions{margin-left:auto}.floating-header nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);border:1px solid var(--line);padding:15px;border-radius:17px;box-shadow:0 12px 24px #0001}.floating-header nav.open{display:block;max-height:75dvh;overflow:auto}.floating-header nav>a,.nav-dropdown>summary{padding:12px;font-size:14px}.dropdown-panel{position:static;box-shadow:none;width:auto;margin:3px 10px 10px;border-radius:12px;background:var(--soft);padding:5px}.dropdown-panel>a{padding:11px}.page-head{margin-top:40px}.footer-columns{gap:30px}.activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.grid{grid-template-columns:1fr 1fr}.footer-columns{grid-template-columns:1fr 1fr}.footer-columns>div:first-child{grid-column:1/-1}.footer-columns .brand{margin-bottom:15px}.reference-hero{min-height:500px}.reference-hero h1 .wordmark{font-size:43px}.reference-hero p{font-size:15px;max-width:370px}.hero-emblem{margin-bottom:25px}.section-head h2{font-size:24px}.photo-empty h2{font-size:21px}}
@media(max-width:480px){.floating-header{top:10px;margin-top:10px;width:calc(100% - 20px);border-radius:15px}.floating-header .header{padding:10px 12px;gap:10px;min-height:61px}.brand{gap:7px}.school-mark{width:28px;height:28px}.wordmark{font-size:17px}.header-actions{gap:6px}.login-btn{font-size:12px;padding:6px 11px}.theme-toggle{width:25px;height:27px}.theme-toggle .icon{width:21px;height:21px}.wrap{width:calc(100% - 32px)}.reference-hero{min-height:455px;padding:55px 14px 65px}.hero-emblem{width:55px;height:55px}.reference-hero h1 .wordmark{font-size:42px}.reference-hero p{font-size:14px}.page-head{padding:26px 18px;margin-top:30px;min-height:245px}.page-head h1{font-size:26px}.page-head p{font-size:14px}.page-symbol{width:55px;height:55px;border-radius:16px}.page-symbol .icon{width:26px;height:26px}.grid{grid-template-columns:1fr}.activity-grid{grid-template-columns:1fr 1fr;gap:12px}.event-card{padding:10px}.event-card h3{font-size:16px}.event-card p{font-size:12px}.event-card .cover{width:100%;margin:0 0 10px}.event-details>summary{padding:8px 5px;font-size:13px}.group-photo{height:240px}.photo-empty h2{font-size:20px}.photo-empty small{font-size:11px}.section{padding:26px 0}.section-head{align-items:center}.section-head h2{font-size:22px}.section-head p{font-size:12px}.section-head .btn{white-space:nowrap;padding:7px 11px;font-size:12px}.teacher-table .avatar{width:36px;height:36px}.teacher-table th,.teacher-table td{padding:10px 7px;font-size:12px}.teacher-table td:nth-child(2){min-width:130px}.teacher-table td:nth-child(3){min-width:95px}.toolbar select{width:100%}.footer-columns{gap:25px}.footer-columns h3{font-size:17px}.footer-columns>div>a:not(.brand){font-size:13px;gap:7px}.footer-columns p{font-size:13px}.footer-divider{width:calc(100% - 32px);margin-bottom:26px}.card .cover{width:100%;margin:0 0 12px}.calc-row{padding:12px;gap:7px;grid-template-columns:20px minmax(0,1fr) 20px}.calc-inputs{grid-template-columns:1fr 1.5fr}.calc-row input,.calc-row select{font-size:14px;min-height:38px}.calc-result output{font-size:44px}.admin-welcome h2{font-size:24px}.announcement{margin-bottom:18px}.demo-strip{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Honor runtime visibility flags without overriding native HTML hidden. */
[hidden]{display:none!important}
[data-logo]{display:inline-flex;flex-shrink:0}
.footer-divider>[data-logo]{flex:0!important;background:none!important;height:auto!important}