:root{--bay-navy:#0b3d91;--bay-navy-2:#0b2f63;--bay-blue:#176de5;--bay-sky:#5fc8f5;--bay-orange:#ff7a00;--bay-orange-2:#ff9a38;--bay-green:#18b98b;--bay-purple:#7b61e8;--bay-ink:#10284b;--bay-muted:#687f98;--bay-line:#dce8f3;--bay-bg:#f5faff;--bay-card:#fff;--bay-shadow:0 8px 24px rgba(24,65,109,.07);--bay-shadow-lg:0 18px 48px rgba(24,65,109,.12);--bay-r:20px;--bay-r-lg:26px;--motion-fast:140ms;--motion-standard:220ms;--motion-navigation:300ms;--motion-expressive:420ms;--motion-ease:cubic-bezier(.2,.8,.2,1)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Noto Sans Thai","Sarabun","Leelawadee UI","Segoe UI",system-ui,sans-serif;color:var(--bay-ink);background:radial-gradient(circle at 0 0,#eaf7ff 0,transparent 28rem),radial-gradient(circle at 100% 0,#fff4e8 0,transparent 26rem),var(--bay-bg);min-height:100vh}.hidden{display:none!important}button,a,input{font:inherit}button{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(23,109,229,.28);outline-offset:2px}.topbar{position:sticky;top:0;z-index:40;min-height:66px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:0 clamp(16px,2.4vw,34px);background:#fff;border-bottom:1px solid var(--bay-line);box-shadow:0 5px 18px rgba(24,65,109,.05)}.brand{display:flex;align-items:center;gap:10px;color:var(--bay-navy);text-decoration:none;min-width:max-content}.brand img,.brand-mark{width:44px;height:44px}.brand-copy,.brand>span{display:grid;line-height:1.02}.brand strong{font-weight:900;font-size:22px;letter-spacing:-.35px}.brand em{font-style:normal;color:var(--bay-orange)}.brand small{font-size:10px;color:var(--bay-muted);margin-top:4px}.main-nav,.topbar nav{height:66px;display:flex;justify-content:center;align-items:stretch;gap:2px}.nav-item,.nav{position:relative;border:0;background:transparent;padding:0 12px;color:#58728d;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:7px}.nav-item img,.nav img{width:24px;height:24px}.nav-item:hover,.nav-item.active,.nav:hover,.nav.active{color:var(--bay-navy)}.nav-item.active:after,.nav.active:after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--bay-navy)}.status-pill,.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;border:1px solid #dce9f4;background:#f7fbff;color:#60768f;font-size:11px;font-weight:900;white-space:nowrap}.status-pill.online,.pill.ready{background:#ebfaf4;border-color:#c6ebdd;color:#08775a}.status-pill.offline{background:#fff6ea;border-color:#f5dfbd;color:#9a5b15}.panel,.content-section,.login-panel,.student-panel{background:var(--bay-card);border:1px solid var(--bay-line);border-radius:var(--bay-r);box-shadow:var(--bay-shadow)}.section-heading,.panel-head{display:flex;align-items:end;justify-content:space-between;gap:12px}.section-heading h2,.panel-head h2{margin:0;color:var(--bay-navy);font-size:21px;line-height:1.2}.section-kicker,.kicker,.eyebrow{display:block;margin:0 0 4px;color:var(--bay-blue);font-size:10px;font-weight:900;letter-spacing:.25px}.primary,.primary-button,.hero-cta,.publish{border:0;border-radius:14px;background:linear-gradient(135deg,var(--bay-orange),#ff8d2b);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(255,122,0,.18)}.secondary,.soft-button,.soft,.mini,.text-button{border:1px solid #d8e6f2;border-radius:13px;background:#fff;color:var(--bay-navy);font-weight:800;cursor:pointer}.text-button{border:0;background:transparent;color:#1674d6;padding:7px}.ui-icon{width:28px;height:28px;display:block}.ui-icon.small{width:22px;height:22px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media(forced-colors:active){.panel,.content-section,.login-panel,.student-panel,.hero{border:1px solid CanvasText}.primary,.primary-button,.hero-cta,.publish{forced-color-adjust:auto}}
.brand-official{gap:9px}.brand-official>.product-logo{width:92px;height:58px;object-fit:contain;flex:0 0 auto}.brand-official>.school-lockup{display:flex;align-items:center;gap:6px;line-height:1.15}.brand-official>.school-lockup>img{width:27px;height:33px;object-fit:contain;flex:0 0 auto}.brand-official>.school-lockup>small{max-width:135px;margin:0;color:var(--bay-muted);font-size:8px;font-weight:800;line-height:1.25}@media(max-width:700px){.brand-official>.product-logo{width:76px;height:50px}.brand-official>.school-lockup>small{display:none}.brand-official>.school-lockup>img{width:25px;height:30px}}

/* KRUART Premium Interaction Feedback v1 */
:root{
  --kruart-feedback-accent:var(--accent,var(--primary,var(--brand-accent,#ff7a1a)));
  --kruart-feedback-ink:var(--text,var(--ink,#10284b));
  --kruart-feedback-surface:rgba(255,255,255,.92);
}
.kruart-ui-progress{
  position:fixed;z-index:2147483646;top:0;left:0;right:0;height:3px;
  overflow:hidden;pointer-events:none;opacity:0;transition:opacity var(--motion-fast) var(--motion-ease);
}
.kruart-ui-progress>span{
  display:block;width:34%;height:100%;border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--kruart-feedback-accent),transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--kruart-feedback-accent) 55%,transparent);
  transform:translateX(-120%);
}
:root[data-ui-loading="true"] .kruart-ui-progress{opacity:1}
:root[data-ui-loading="true"] .kruart-ui-progress>span{animation:kruart-progress 1.05s cubic-bezier(.4,0,.2,1) infinite}
.kruart-ui-status{
  position:fixed;z-index:2147483647;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;
  display:flex;align-items:center;gap:9px;max-width:min(88vw,360px);
  padding:9px 14px;border:1px solid color-mix(in srgb,var(--kruart-feedback-accent) 18%,#dbe8f4);
  border-radius:999px;background:var(--kruart-feedback-surface);color:var(--kruart-feedback-ink);
  box-shadow:0 12px 36px rgba(16,40,75,.16),0 2px 10px rgba(16,40,75,.08);
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  font:700 13px/1.2 system-ui,-apple-system,"Noto Sans Thai",sans-serif;
  opacity:0;pointer-events:none;transform:translate(-50%,-8px) scale(.98);
  transition:opacity var(--motion-standard) var(--motion-ease),transform var(--motion-standard) var(--motion-ease);
}
:root[data-ui-status="true"] .kruart-ui-status{opacity:1;transform:translate(-50%,0) scale(1)}
.kruart-ui-spinner{
  width:14px;height:14px;flex:0 0 14px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--kruart-feedback-accent) 22%,transparent);
  border-top-color:var(--kruart-feedback-accent);animation:kruart-spin .72s linear infinite;
}
button,a,[role="button"],input[type="submit"],input[type="button"]{
  -webkit-tap-highlight-color:transparent;
}
.kruart-ui-pressed{
  scale:.985;opacity:.92;filter:saturate(.96) brightness(.985);
  transition:scale var(--motion-fast) var(--motion-ease),opacity var(--motion-fast) var(--motion-ease),filter var(--motion-fast) var(--motion-ease)!important;
}
button[data-ui-busy="true"],a[data-ui-busy="true"],[role="button"][data-ui-busy="true"],input[data-ui-busy="true"]{
  position:relative;cursor:progress!important;pointer-events:none;
}
button[data-ui-busy="true"]::after,a[data-ui-busy="true"]::after,[role="button"][data-ui-busy="true"]::after{
  content:"";display:inline-block;width:12px;height:12px;margin-inline-start:8px;vertical-align:-1px;
  border:2px solid color-mix(in srgb,currentColor 24%,transparent);border-top-color:currentColor;border-radius:50%;
  animation:kruart-spin .72s linear infinite;
}
@keyframes kruart-spin{to{transform:rotate(360deg)}}
@keyframes kruart-progress{0%{transform:translateX(-120%)}55%{transform:translateX(155%)}100%{transform:translateX(310%)}}
@media(max-width:560px){
  .kruart-ui-status{top:calc(env(safe-area-inset-top,0px) + 8px);padding:8px 12px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .kruart-ui-progress,.kruart-ui-status,.kruart-ui-pressed{transition:none!important}
  .kruart-ui-progress>span,.kruart-ui-spinner,button[data-ui-busy="true"]::after,a[data-ui-busy="true"]::after,[role="button"][data-ui-busy="true"]::after{animation-duration:1.8s}
}