:root{
  --primary:#163A70;
  --primary-2:#285AA6;
  --primary-3:#4F8FEA;
  --primary-dark:#0C2C58;
  --sky:#DDEBFF;
  --sky-2:#EEF5FF;
  --bg:#F4F8FE;
  --card:#FFFFFF;
  --text:#14243C;
  --muted:#6A7890;
  --border:#DCE7F6;
  --success:#29A66A;
  --danger:#DC4C64;
  --warning:#F3AA2C;
  --radius:1.15rem;
  --shadow-sm:0 8px 22px rgba(20,58,112,.08);
  --shadow:0 15px 42px rgba(20,58,112,.12);
  --shadow-lg:0 24px 65px rgba(10,41,84,.18);
  --gradient:linear-gradient(135deg,#163A70 0%,#285AA6 55%,#4F8FEA 100%);
  --gradient-soft:linear-gradient(135deg,#EDF5FF 0%,#FFFFFF 55%,#E6F0FF 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'IBM Plex Sans Thai',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:
    radial-gradient(circle at 8% 4%,rgba(79,143,234,.10),transparent 28%),
    radial-gradient(circle at 92% 16%,rgba(40,90,166,.08),transparent 24%),
    linear-gradient(180deg,#F8FBFF 0%,var(--bg) 42%,#F7FAFF 100%);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}
body:not(.login-page)::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:radial-gradient(rgba(40,90,166,.12) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.24),transparent 42%);
}

::selection{background:#CFE2FF;color:var(--primary-dark)}
a{color:var(--primary-2);text-decoration:none;transition:.2s ease}
a:hover{color:var(--primary-dark)}

.btn{
  border-radius:.85rem;
  font-weight:600;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  --bs-btn-bg:var(--primary);
  --bs-btn-border-color:transparent;
  --bs-btn-hover-bg:#214F91;
  --bs-btn-hover-border-color:transparent;
  --bs-btn-active-bg:#103364;
  background:var(--gradient);
  border:0;
  box-shadow:0 9px 22px rgba(40,90,166,.22);
}
.btn-primary:hover{box-shadow:0 13px 28px rgba(40,90,166,.28)}
.btn-outline-primary{
  --bs-btn-color:var(--primary-2);
  --bs-btn-border-color:#90AFDC;
  --bs-btn-hover-bg:var(--primary-2);
  --bs-btn-hover-border-color:var(--primary-2);
  --bs-btn-hover-color:#fff;
}
.btn-light{box-shadow:0 8px 22px rgba(5,32,68,.09)}

/* ===== Navbar ===== */
.app-navbar{
  background:linear-gradient(110deg,#123766 0%,#1E4D8D 46%,#2F6CC0 100%);
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 32px rgba(10,39,78,.19);
  backdrop-filter:blur(16px);
  z-index:1030;
}
.app-navbar::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
}
.app-navbar .navbar-brand{color:#fff!important;min-width:max-content}
.school-logo-wrap{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.96);
  box-shadow:0 7px 18px rgba(3,25,55,.20);
  padding:4px;
  flex:0 0 auto;
}
.school-logo-wrap img{width:100%;height:100%;object-fit:contain}
.brand-copy{display:flex;flex-direction:column;line-height:1.08}
.brand-copy>span{font-size:1rem;letter-spacing:.01em}
.brand-copy small{font-size:.69rem;font-weight:500;color:rgba(255,255,255,.70);margin-top:4px}
.app-navbar .nav-link{color:rgba(255,255,255,.82)!important;font-weight:500;border-radius:.75rem;padding:.55rem .72rem!important}
.app-navbar .nav-link:hover,.app-navbar .nav-link:focus,.app-navbar .nav-link.show{color:#fff!important;background:rgba(255,255,255,.11)}
.app-navbar .navbar-toggler{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.08)}
.app-navbar .navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(255,255,255,.18)}
.app-navbar .navbar-toggler-icon{filter:invert(1) brightness(2)}
.btn-navbar-icon,.btn-navbar-user,.btn-navbar-ghost{
  color:#fff;border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.10);backdrop-filter:blur(8px)
}
.btn-navbar-icon{width:42px;height:42px;display:grid;place-items:center;padding:0}
.btn-navbar-icon:hover,.btn-navbar-user:hover,.btn-navbar-ghost:hover{color:#fff;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.52)}
.app-navbar .dropdown-menu{border:1px solid #E3ECF8;border-radius:1rem;padding:.5rem;box-shadow:var(--shadow);margin-top:.55rem}
.app-navbar .dropdown-item{border-radius:.7rem;padding:.58rem .75rem}
.app-navbar .dropdown-item:hover{background:#EEF5FF;color:var(--primary)}

/* ===== Hero ===== */
.hero{
  background:linear-gradient(130deg,#11335F 0%,#1D4E8F 45%,#3675CB 100%);
  color:#fff;
  border-radius:0 0 2.3rem 2.3rem;
  position:relative;
  overflow:hidden;
  box-shadow:0 22px 48px rgba(19,59,111,.18);
}
.hero:before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 8% 15%,rgba(255,255,255,.14),transparent 22%),
    radial-gradient(circle at 88% 12%,rgba(116,176,255,.24),transparent 25%),
    linear-gradient(120deg,transparent 35%,rgba(255,255,255,.05));
}
.hero:after{content:"";position:absolute;width:430px;height:430px;border-radius:50%;background:rgba(255,255,255,.065);right:-100px;top:-190px;box-shadow:-155px 265px 0 -65px rgba(255,255,255,.045)}
.hero .container{position:relative;z-index:1}
.hero h1{font-size:clamp(2.2rem,6vw,4.6rem);font-weight:700;line-height:1.02;text-shadow:0 7px 28px rgba(4,31,68,.18)}
.hero .lead{color:rgba(255,255,255,.78)}
.hero .badge{box-shadow:0 7px 20px rgba(6,31,65,.12)}
.glass-card{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 20px 45px rgba(4,30,65,.16)}
.search-hero{box-shadow:0 16px 40px rgba(5,19,39,.16);border-radius:1rem;overflow:hidden}

/* ===== Cards ===== */
.card{
  border:1px solid rgba(45,98,171,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  background:rgba(255,255,255,.97);
}
.card:not(.login-card){transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:not(.login-card):hover{border-color:rgba(40,90,166,.16)}
.item-card{height:100%;transition:.22s ease;overflow:hidden;position:relative}
.item-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#285AA6,#66A8FF);z-index:2;opacity:.9}
.item-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(20,46,85,.15)}
.item-thumb{height:210px;object-fit:cover;background:#E9EEF7}
.placeholder-thumb{height:210px;background:linear-gradient(135deg,#EAF2FD,#F8FBFF);display:grid;place-items:center;color:#86A2C6;font-size:3rem}
.section-title{font-weight:700;color:var(--primary-dark);letter-spacing:-.01em}
.stat-card{overflow:hidden;position:relative}
.stat-card:after{content:"";position:absolute;width:95px;height:95px;border-radius:50%;background:rgba(79,143,234,.07);right:-25px;top:-30px}
.stat-card .icon{width:50px;height:50px;border-radius:15px;background:linear-gradient(145deg,#E6F0FF,#F8FBFF);color:var(--primary);display:grid;place-items:center;font-size:1.4rem;box-shadow:inset 0 0 0 1px rgba(40,90,166,.08)}
.admin-card{border-left:4px solid #285AA6}
.admin-head{background:var(--gradient);color:#fff;border-radius:1.2rem;padding:1.35rem;box-shadow:0 15px 36px rgba(40,90,166,.19)}
.chart-wrap{height:320px;position:relative}

/* ===== Forms ===== */
.form-label{font-weight:600;color:#314765}
.form-control,.form-select{
  min-height:48px;border-radius:.85rem;border:1px solid #D6E2F1;background-color:#fff;color:var(--text);
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease
}
.form-control:hover,.form-select:hover{border-color:#B4C8E5}
.form-control:focus,.form-select:focus,.btn:focus-visible,.nav-link:focus-visible{box-shadow:0 0 0 .25rem rgba(40,90,166,.15);border-color:#4F8FEA}
.input-group>.form-control:first-child{border-radius:.85rem 0 0 .85rem}
.badge{font-weight:600}
.empty-state{padding:3.5rem 1rem;text-align:center;color:var(--muted);background:linear-gradient(145deg,#F8FBFF,#EDF4FE);border-radius:var(--radius);border:1px dashed #BDD0EB}
.empty-state i{font-size:3rem;color:#86A4CC}
.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#E9EEF7}
.avatar-lg{width:110px;height:110px;border-radius:50%;object-fit:cover;background:#E9EEF7}
.gallery-main{width:100%;height:min(470px,55vw);min-height:280px;object-fit:cover;border-radius:1rem;background:#E9EEF7}
.gallery-thumb{width:74px;height:74px;object-fit:cover;border-radius:.75rem;cursor:pointer;border:2px solid transparent;transition:.2s ease}
.gallery-thumb:hover{border-color:var(--secondary);transform:translateY(-2px)}
.timeline{border-left:3px solid #DBE5F3;margin-left:.7rem;padding-left:1.4rem}
.timeline-item{position:relative;margin-bottom:1.5rem}
.timeline-item:before{content:"";position:absolute;left:-1.85rem;top:.3rem;width:.8rem;height:.8rem;border-radius:50%;background:var(--primary-2);box-shadow:0 0 0 5px #E8EFF9}
.claim-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;font-weight:700}
.table>:not(caption)>*>*{vertical-align:middle}
.table thead th{color:#526681;font-size:.86rem;font-weight:600;background:#F7FAFE}
.table-responsive{border-radius:1rem}
.app-alert{border:0;border-radius:1rem;box-shadow:var(--shadow-sm)}

/* ===== Admin ===== */
.admin-sidebar{background:linear-gradient(180deg,#102F5C,#16457D);color:#fff;min-height:calc(100vh - 86px);border-radius:0 1.1rem 1.1rem 0;box-shadow:0 16px 38px rgba(8,41,80,.12)}
.admin-sidebar a{color:#DCE8F8;display:block;padding:.72rem .9rem;border-radius:.75rem;transition:.18s ease}
.admin-sidebar a:hover{background:rgba(255,255,255,.11);color:#fff;transform:translateX(2px)}

/* ===== Footer / Cookie ===== */
.site-footer{background:rgba(255,255,255,.92);border-top:1px solid #E3EBF6;backdrop-filter:blur(12px)}
.footer-school-logo{width:50px;height:50px;object-fit:contain}
.cookie-consent{position:fixed;z-index:1080;left:1rem;right:1rem;bottom:1rem;max-width:720px;margin:auto;background:rgba(255,255,255,.97);border:1px solid #D7E3F2;border-radius:1rem;box-shadow:0 20px 58px rgba(10,33,65,.22);padding:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;backdrop-filter:blur(12px)}
.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:1rem;top:1rem;z-index:2000;background:#fff;padding:.5rem 1rem;border-radius:.5rem;box-shadow:var(--shadow)}

/* =========================================================
   LOGIN PAGE — two photos / crossfade every 5 seconds
   ========================================================= */
body.login-page{background:#092A55;min-height:100vh;overflow:hidden;color:var(--text)}
body.login-page main{min-height:100vh}
.login-background{position:fixed;inset:0;z-index:0;overflow:hidden;background:#092A55}
.login-bg-slide{
  position:absolute;inset:-2%;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:0;transform:scale(1.04);
  transition:opacity 1.45s ease-in-out,transform 7s ease-out;
  will-change:opacity,transform;
}
.login-bg-slide.active{opacity:1;transform:scale(1)}
.login-bg-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,32,67,.86) 0%,rgba(12,49,93,.68) 43%,rgba(8,32,64,.50) 100%)}
.login-bg-overlay:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 20%,rgba(97,165,255,.22),transparent 25%),linear-gradient(180deg,rgba(0,0,0,.04),rgba(4,25,52,.16))}
.login-light-orb{position:absolute;border-radius:50%;filter:blur(8px);opacity:.32}
.login-light-orb-one{width:320px;height:320px;background:#6EAFFF;right:-100px;top:-80px}
.login-light-orb-two{width:260px;height:260px;background:#2D72CE;left:34%;bottom:-110px}
.login-shell{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;padding:28px 0}
.login-container{width:100%;padding-left:clamp(16px,4vw,64px);padding-right:clamp(16px,4vw,64px)}
.login-layout{width:min(1180px,100%);min-height:min(690px,calc(100vh - 56px));border:1px solid rgba(255,255,255,.20);border-radius:28px;overflow:hidden;background:rgba(8,35,70,.18);box-shadow:0 30px 100px rgba(1,15,34,.34);backdrop-filter:blur(3px)}
.login-welcome-panel{position:relative;align-items:flex-end;padding:52px;color:#fff;overflow:hidden}
.login-welcome-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(4,28,60,.18) 58%,rgba(5,27,56,.50) 100%)}
.login-welcome-content{position:relative;z-index:1;max-width:620px}
.login-school-pill{display:inline-flex;align-items:center;padding:.55rem .85rem;border:1px solid rgba(255,255,255,.26);border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(12px);font-size:.88rem;font-weight:600;margin-bottom:20px}
.login-welcome-content h1{font-size:clamp(3rem,5.2vw,5.4rem);line-height:.96;font-weight:700;letter-spacing:-.03em;margin-bottom:22px;text-shadow:0 8px 34px rgba(1,19,43,.35)}
.login-welcome-content h1 span{color:#BFD8FF}
.login-welcome-content>p{font-size:1.08rem;line-height:1.75;color:rgba(255,255,255,.78);max-width:590px;margin-bottom:28px}
.login-feature-grid{display:flex;flex-wrap:wrap;gap:12px}
.login-feature-grid>div{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:10px 13px;backdrop-filter:blur(8px);font-size:.91rem}
.login-feature-grid i{font-size:1.1rem;color:#CBE0FF}
.login-form-column{background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(246,250,255,.91));display:flex;align-items:center;padding:clamp(24px,4vw,48px);backdrop-filter:blur(18px)}
.login-card{width:100%;max-width:440px;margin:auto}
.login-logo-ring{width:104px;height:104px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#EAF2FE);box-shadow:0 15px 38px rgba(30,78,143,.16),inset 0 0 0 1px rgba(40,90,166,.08);padding:8px;transform:rotate(-1deg)}
.login-school-logo{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 7px rgba(20,58,112,.15))}
.login-system-kicker{font-size:.72rem;letter-spacing:.15em;font-weight:700;color:#7991B2;margin-bottom:4px}
.login-title{color:var(--primary-dark);font-size:1.85rem;font-weight:700;margin:0}
.login-subtitle{color:#7C8BA0;margin:5px 0 0}
.login-form .form-label{font-size:.92rem;margin-bottom:.45rem}
.input-icon-wrap{position:relative}
.input-icon-wrap .input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);z-index:2;color:#7590B3;font-size:1.05rem;pointer-events:none}
.input-icon-wrap .form-control{padding-left:44px;min-height:52px;border-radius:14px;background:#F9FBFF;border-color:#D5E2F2}
.input-icon-wrap .form-control:focus{background:#fff}
.password-wrap .form-control{padding-right:48px}
.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:#7289A7;z-index:3;display:grid;place-items:center}
.password-toggle:hover{background:#EAF2FD;color:var(--primary)}
.login-submit{min-height:52px;font-size:1rem;border-radius:14px}
.login-register{min-height:50px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.70)}
.login-divider{display:flex;align-items:center;gap:12px;color:#9AA8BA;font-size:.82rem;margin:18px 0}
.login-divider:before,.login-divider:after{content:"";height:1px;background:#DFE7F2;flex:1}
.login-mini-note{text-align:center;color:#8493A7;font-size:.78rem;margin-top:18px;line-height:1.55}
.login-alert{border:0;border-radius:13px;font-size:.9rem;box-shadow:none}
.login-slide-dots{position:fixed;z-index:4;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:7px}
.login-slide-dots span{width:8px;height:8px;border-radius:10px;background:rgba(255,255,255,.38);transition:.3s ease}
.login-slide-dots span.active{width:25px;background:#fff}

/* ===== Click sparkle ===== */
.click-sparkle{position:fixed;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);animation:sparkle-float 1s cubic-bezier(.17,.67,.27,1) forwards;will-change:transform,opacity;filter:drop-shadow(0 3px 5px rgba(22,58,112,.18));user-select:none}
@keyframes sparkle-float{
  0%{opacity:0;transform:translate(-50%,-45%) scale(.35) rotate(-12deg)}
  18%{opacity:1;transform:translate(-50%,-58%) scale(1.08) rotate(3deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--sparkle-x,0px)),calc(-50% - 82px)) scale(1.25) rotate(18deg)}
}

/* ===== Responsive ===== */
@media(max-width:1199.98px){
  .brand-copy small{display:none}
  .login-welcome-panel{padding:38px}
}
@media(max-width:991.98px){
  .app-navbar .navbar-collapse{padding:1rem 0 .35rem}
  .app-navbar .nav-link{padding:.72rem .8rem!important}
  .nav-actions{align-items:stretch!important}
  .btn-navbar-icon{width:100%}
  .admin-sidebar{min-height:auto;border-radius:1rem;margin-bottom:1rem}
  .login-shell{padding:20px 0}
  .login-layout{min-height:unset;max-width:560px;background:transparent;border:0;box-shadow:none;overflow:visible}
  .login-form-column{border-radius:26px;box-shadow:0 28px 80px rgba(3,25,55,.34);border:1px solid rgba(255,255,255,.46);padding:34px 28px}
  .login-bg-overlay{background:linear-gradient(180deg,rgba(6,31,65,.56),rgba(5,29,61,.74))}
}
@media(max-width:575.98px){
  .hero{border-radius:0 0 1.45rem 1.45rem}
  .item-thumb,.placeholder-thumb{height:180px}
  .cookie-consent{flex-direction:column;align-items:stretch}
  .btn{min-height:42px}
  .gallery-main{height:300px}
  .table-responsive{font-size:.92rem}
  .school-logo-wrap{width:41px;height:41px;border-radius:12px}
  .brand-copy>span{font-size:.93rem}
  .login-container{padding-left:14px;padding-right:14px}
  .login-form-column{padding:25px 19px;border-radius:22px}
  .login-logo-ring{width:88px;height:88px;border-radius:25px}
  .login-title{font-size:1.55rem}
  .login-subtitle{font-size:.9rem}
  .login-slide-dots{bottom:9px}
}
@media(max-height:700px) and (min-width:992px){
  .login-shell{padding:16px 0}
  .login-layout{min-height:calc(100vh - 32px)}
  .login-welcome-panel{padding:35px 42px}
  .login-welcome-content h1{font-size:3.7rem;margin-bottom:14px}
  .login-welcome-content>p{margin-bottom:18px}
  .login-form-column{padding:28px 40px}
  .login-logo-ring{width:84px;height:84px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}