:root{
  --g900:#3b0764;--g800:#4c1d95;--g700:#5b21b6;--g600:#6d28d9;
  --g500:#7c3aed;--g400:#a78bfa;--g300:#c4b5fd;--g200:#ddd6fe;--g100:#ede9fe;--g50:#f5f3ff;
  --w:#fff;--s50:#f9fafb;--s100:#f3f4f6;--s200:#e5e7eb;--s300:#d1d5db;
  --s400:#9ca3af;--s500:#6b7280;--s600:#4b5563;--s700:#374151;--s800:#1f2937;--s900:#111827;
  --red:#ef4444;--red50:#fef2f2;--amber:#f59e0b;--amber50:#fffbeb;
  --blue:#3b82f6;--blue50:#eff6ff;--purple:#7c3aed;--purple50:#f5f3ff;
  /* theme tokens */
  --bg-page:#faf5ff;--bg-card:#fff;--bg-topbar:#fff;--bg-sidebar:#fff;
  --border-card:#ede9fe;--text-main:#1f2937;--text-sub:#6b7280;
  --input-bg:#fff;--input-border:#e5e7eb;
  --shadow-card:0 2px 12px rgba(109,40,217,.06);
  /* aliases used by projections_admin modal */
  --bg:#faf5ff;--bg-input:#fff;--border:#ede9fe;
  --text:#1f2937;--muted:#9ca3af;--accent:#7c3aed;
  --accent-light:#f5f3ff;
}

/* ── Safari / iOS Fixes ── */
:root { --vh: 1vh; }
* { -webkit-tap-highlight-color: transparent; }
input, select, textarea, button {
  -webkit-appearance: none;
  appearance: none;
}
/* Fix input zoom on iOS (font-size must be >= 16px when focused) */
@media (hover: none) and (pointer: coarse) {
  input:not([type="range"]):focus,
  select:focus,
  textarea:focus {
    font-size: 16px !important;
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;max-width:100%;height:100%;}
html,body{height:100%;font-family:'Sarabun',sans-serif;background:var(--s50);color:var(--s900);overflow:hidden;max-width:100%;width:100%;}
body.login-active{overflow:hidden;position:fixed;width:100%;}
img.emoji{height:1em;width:1em;margin:0 .05em 0 .1em;vertical-align:-0.1em;display:inline-block}

/* ═══ LOGIN — PK-Style 2026 ═══ */

body.login-active{ overflow:hidden; position:fixed; width:100%; }

/* ── full-screen bg ── */
#ls{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  padding:1.5rem;
  font-family:'Sarabun',sans-serif;
  background:linear-gradient(135deg,#ede9fe 0%,#f3e8ff 30%,#fce7f3 65%,#e0e7ff 100%);
  background-size:400% 400%;
  animation:bgShift 14s ease infinite;
}
@keyframes bgShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

#ls-particles{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%;}

/* floating bg blobs */
.ls-blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0;opacity:.5;animation:floatBlob 9s ease-in-out infinite alternate;}
.ls-blob1{width:clamp(200px,28vw,360px);height:clamp(200px,28vw,360px);top:-80px;left:-80px;background:radial-gradient(circle,rgba(196,181,253,.8) 0%,rgba(167,139,250,.2) 65%,transparent 80%);animation-duration:10s;}
.ls-blob2{width:clamp(160px,22vw,280px);height:clamp(160px,22vw,280px);bottom:-60px;right:-60px;background:radial-gradient(circle,rgba(251,182,206,.8) 0%,rgba(249,168,212,.2) 65%,transparent 80%);animation-duration:7s;animation-direction:alternate-reverse;}
.ls-blob3{width:clamp(90px,12vw,160px);height:clamp(90px,12vw,160px);top:18%;right:8%;background:radial-gradient(circle,rgba(216,180,254,.55) 0%,transparent 70%);animation-duration:12s;}
.ls-blob1::after{content:none;}
@keyframes floatBlob{0%{transform:translate(0,0) scale(1);}100%{transform:translate(18px,14px) scale(1.07);}}

/* sparkles */
.ls-sparkle{position:absolute;pointer-events:none;z-index:2;font-size:1rem;animation:sparkleFly linear infinite;opacity:0;}
@keyframes sparkleFly{0%{opacity:0;transform:translateY(0) scale(0) rotate(0deg);}20%{opacity:1;transform:translateY(-20px) scale(1) rotate(45deg);}80%{opacity:.7;transform:translateY(-80px) scale(.8) rotate(180deg);}100%{opacity:0;transform:translateY(-120px) scale(0) rotate(270deg);}}

/* hide legacy ::before/::after */
#ls::before{display:none;}
#ls::after{display:none;}

/* ── MAIN WRAPPER ── */
.ls-wrap{
  position:relative;z-index:10;
  display:flex;align-items:stretch;
  width:min(1080px,calc(100vw - 3rem));
  height:min(660px,calc(var(--vh,1vh)*90));
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 8px 48px rgba(109,40,217,.13),0 32px 80px rgba(109,40,217,.09);
  animation:wrapIn .85s cubic-bezier(.22,1,.36,1) both;
}
@keyframes wrapIn{from{opacity:0;transform:translateY(36px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ── LEFT — FORM CARD ── */
.ls-card{
  flex:0 0 min(400px,45%);
  background:#fff;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:2.4rem 2.4rem 1.8rem;
  position:relative;overflow:hidden;
  border-right:1px solid rgba(221,214,254,.4);
}

/* card subtle top accent */
.ls-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#7c3aed,#a855f7,#c084fc);
}

/* card header */
.ls-card-header{display:flex;align-items:center;gap:12px;margin-bottom:2rem;animation:itemIn .6s cubic-bezier(.22,1,.36,1) .05s both;}
.ls-card-logo{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,#6d28d9,#a855f7);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;
  box-shadow:0 4px 14px rgba(109,40,217,.25);
  flex-shrink:0;overflow:hidden;
}
.ls-card-logo img{width:100%;height:100%;object-fit:cover;border-radius:12px;}
.ls-card-logo-text{font-size:1.2rem;line-height:1;}
.ls-card-brand{display:flex;flex-direction:column;}
.ls-card-brand-name{font-family:'Sarabun',sans-serif;font-size:.95rem;font-weight:700;color:#3b0764;letter-spacing:-.01em;}
.ls-card-brand-sub{font-size:.72rem;color:#a78bfa;font-weight:400;}

/* platform badge */
.ls-platform-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:#f5f3ff;border:1px solid #ddd6fe;
  border-radius:100px;padding:.3rem .85rem;
  margin-bottom:1.2rem;
  font-size:.72rem;color:#7c3aed;font-weight:600;
  animation:itemIn .6s cubic-bezier(.22,1,.36,1) .1s both;
  width:fit-content;
}
.ls-platform-badge svg{width:12px;height:12px;stroke:#7c3aed;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}

/* main heading */
.ls-card-title{
  font-family:'Noto Sans Thai',sans-serif;
  font-size:1.65rem;font-weight:700;
  color:#1f2937;line-height:1.25;
  margin-bottom:.5rem;
  animation:itemIn .6s cubic-bezier(.22,1,.36,1) .12s both;
}
.ls-card-desc{
  font-size:.8rem;color:#9ca3af;line-height:1.6;
  margin-bottom:1.6rem;
  animation:itemIn .6s cubic-bezier(.22,1,.36,1) .16s both;
}

/* error */
.errmsg{
  display:none;align-items:center;gap:8px;
  background:#fef2f2;border:1px solid #fecaca;
  color:#dc2626;padding:.6rem .85rem;border-radius:10px;
  font-size:.78rem;margin-bottom:.9rem;
  animation:shake .4s cubic-bezier(.36,.07,.19,.97);
}
.errmsg.show{display:flex;}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
@keyframes cardShake{10%,90%{transform:translateX(-3px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}

/* ── FIELD LABELS above input ── */
.lc-field-group{margin-bottom:.95rem;animation:itemIn .6s cubic-bezier(.22,1,.36,1) .22s both;}
.lc-field-group:nth-child(2){animation-delay:.28s;}
.lc-field-group-label{
  font-size:.74rem;font-weight:600;color:#6b7280;
  margin-bottom:.4rem;display:flex;align-items:center;gap:6px;
  letter-spacing:.02em;
}
.lc-field-group-label svg{width:13px;height:13px;stroke:#a78bfa;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* floating label fields */
.lc-field{position:relative;margin-bottom:0;}
.lc-field label{
  position:absolute;
  left:42px;top:50%;transform:translateY(-50%);
  font-size:.85rem;color:#c4b5fd;
  transition:all .22s cubic-bezier(.22,1,.36,1);
  pointer-events:none;z-index:2;font-weight:500;
}
.lc-field.focused label,.lc-field.filled label{
  top:9px;transform:translateY(0);
  font-size:.6rem;font-weight:700;color:#7c3aed;letter-spacing:.04em;text-transform:uppercase;
}
.lc-field input{
  width:100%;
  padding:1.25rem 2.8rem .45rem 2.6rem;
  border:1.5px solid #e9e3fc;
  border-radius:12px;
  font-family:'Sarabun',sans-serif;font-size:.9rem;
  color:#1f2937;background:#faf8ff;
  outline:none;transition:all .22s;appearance:none;
}
.lc-field.focused input{
  border-color:#a78bfa;background:#fff;
  box-shadow:0 0 0 3px rgba(167,139,250,.14);
}
.lc-field.filled input{border-color:#ddd6fe;background:#fff;}
.lc-field input::placeholder{color:transparent;}
.lc-field-ic{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;
  stroke:#c4b5fd;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .2s;z-index:2;pointer-events:none;
}
.lc-field.focused .lc-field-ic{stroke:#7c3aed;}
.lc-eye{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;display:flex;align-items:center;padding:4px;
  color:#c4b5fd;transition:color .2s;z-index:2;
}
.lc-eye:hover{color:#7c3aed;}
.lc-eye svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.lc-strength{height:2px;background:#ede9fe;border-radius:2px;margin-top:4px;overflow:hidden;}
.lc-strength-bar{height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,#7c3aed,#a78bfa);transition:width .4s ease;}

/* typewriter cursor */
.lc-cursor{display:inline-block;width:2px;height:1em;background:linear-gradient(135deg,#7c3aed,#a855f7);margin-left:2px;vertical-align:middle;animation:blink .7s step-end infinite;border-radius:1px;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}

/* opts row */
.lc-opts{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:1.2rem;
  animation:itemIn .6s cubic-bezier(.22,1,.36,1) .34s both;
}
.lc-rem{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;}
.lc-rem-box{
  width:16px;height:16px;border-radius:5px;
  border:1.5px solid #ddd6fe;background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
}
.lc-rem-box svg{width:9px;height:9px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s;}
.lc-rem input{display:none;}
.lc-rem input:checked ~ .lc-rem-box{background:#7c3aed;border-color:#7c3aed;}
.lc-rem input:checked ~ .lc-rem-box svg{opacity:1;}
.lc-rem span{font-size:.76rem;color:#9ca3af;}
.lc-forgot{font-size:.76rem;color:#7c3aed;text-decoration:none;font-weight:600;position:relative;}
.lc-forgot::after{content:'';position:absolute;bottom:-1px;left:0;width:0;height:1px;background:#7c3aed;transition:width .2s;}
.lc-forgot:hover::after{width:100%;}

/* LOGIN BUTTON */
.btnl{
  position:relative;overflow:hidden;
  width:100%;padding:.88rem;border:none;
  border-radius:12px;
  background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%);
  color:#fff;font-family:'Sarabun',sans-serif;
  font-size:.92rem;font-weight:600;
  cursor:pointer;letter-spacing:.02em;
  transition:all .3s cubic-bezier(.22,1,.36,1);
  box-shadow:0 4px 18px rgba(124,58,237,.32);
  display:flex;align-items:center;justify-content:center;gap:8px;
  animation:itemIn .6s cubic-bezier(.22,1,.36,1) .38s both;
}
.btnl::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  animation:btnShimmer 3s ease-in-out 1s infinite;
}
@keyframes btnShimmer{0%{left:-60%;}100%{left:160%;}}
.btnl:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(124,58,237,.42);}
.btnl:active{transform:translateY(0);}
.btnl .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);transform:scale(0);animation:rippleAnim .6s linear;pointer-events:none;}
@keyframes rippleAnim{to{transform:scale(4);opacity:0;}}
.sp{width:17px;height:17px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite;display:none;flex-shrink:0;}
.btnl.ld{pointer-events:none;opacity:.85;}
.btnl.ld .sp{display:block;}
.btnl.ld .blt{display:none;}
@keyframes spin{to{transform:rotate(360deg);}}

/* forgot hint */
.ls-forgot-hint{font-size:.72rem;color:#c4b5fd;text-align:center;margin-top:.7rem;animation:itemIn .6s cubic-bezier(.22,1,.36,1) .42s both;}

/* progress */
.lc-progress{width:100%;height:3px;background:#ede9fe;border-radius:3px;margin-top:.8rem;overflow:hidden;display:none;}
.lc-progress.show{display:block;}
.lc-progress-bar{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#7c3aed,#a78bfa,#7c3aed);background-size:200% 100%;animation:progressFill 1.5s ease forwards, shimmer 1s linear infinite;}
@keyframes progressFill{from{width:0;}to{width:100%;}}
@keyframes shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}

/* success overlay */
.lc-success-overlay{
  position:absolute;inset:0;z-index:20;
  background:rgba(255,255,255,.97);
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;
}
.lc-success-overlay.show{display:flex;animation:fadeInOver .4s ease both;}
@keyframes fadeInOver{from{opacity:0;}to{opacity:1;}}
.lc-success-check{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  display:flex;align-items:center;justify-content:center;
  animation:checkPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes checkPop{from{transform:scale(0);}to{transform:scale(1);}}
.lc-success-check svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.lc-success-text{font-family:'Sarabun',sans-serif;font-size:1rem;font-weight:700;color:#7c3aed;}

/* feature pills */
.ls-pills{
  display:flex;gap:.5rem;flex-wrap:nowrap;
  animation:itemIn .6s cubic-bezier(.22,1,.36,1) .5s both;
  padding-top:1.2rem;border-top:1px solid #f3f0ff;
}
.ls-pill{
  display:flex;align-items:center;gap:4px;
  background:#f5f3ff;border:1px solid #ede9fe;
  border-radius:100px;padding:.18rem .55rem;
  font-size:.6rem;color:#7c3aed;font-weight:600;
  white-space:nowrap;
}
.ls-pill svg{width:9px;height:9px;stroke:#7c3aed;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}

/* hide old elements */
.lc{display:none;}
.lc-logo,.lc-logo-badge,.lc-status-bar,.lc-wave,.lc-div,.lc-stats,.lc-heading,.lc-sub,.lc-footer,.lc-welcome{display:none;}

/* ── RIGHT — NEWS PANEL ── */
.ls-news-panel{
  flex:1;
  background:#faf8ff;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* news topbar */
.ls-news-topbar{
  display:flex;align-items:center;gap:8px;
  padding:.9rem 1.4rem;
  border-bottom:1px solid #ede9fe;
  background:#fff;
}
.ls-news-topbar svg{width:15px;height:15px;stroke:#7c3aed;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ls-news-topbar span{font-size:.8rem;font-weight:600;color:#5b21b6;}

/* news scroll area */
.ls-news-body{
  flex:1;overflow-y:auto;padding:1.2rem;
  display:flex;flex-direction:column;gap:1rem;
  scrollbar-width:thin;scrollbar-color:#ddd6fe transparent;
}
.ls-news-body::-webkit-scrollbar{width:4px;}
.ls-news-body::-webkit-scrollbar-thumb{background:#ddd6fe;border-radius:4px;}

/* news card */
.ls-news-card{
  background:#fff;border-radius:16px;overflow:hidden;
  border:1px solid #ede9fe;
  animation:itemIn .7s cubic-bezier(.22,1,.36,1) both;
}
.ls-news-card:nth-child(1){animation-delay:.1s;}
.ls-news-card:nth-child(2){animation-delay:.2s;}
.ls-news-card:nth-child(3){animation-delay:.3s;}

.ls-news-banner{
  width:100%;height:160px;object-fit:cover;
  background:linear-gradient(135deg,#7c3aed,#a855f7,#c084fc);
  display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;
  overflow:hidden;
}
.ls-news-banner img{width:100%;height:100%;object-fit:cover;}

.ls-news-body-inner{padding:1rem 1.1rem;}
.ls-news-tag{
  display:inline-block;
  background:#f5f3ff;border:1px solid #ddd6fe;
  border-radius:100px;padding:.2rem .65rem;
  font-size:.65rem;color:#7c3aed;font-weight:700;
  margin-bottom:.55rem;letter-spacing:.04em;
}
.ls-news-title{
  font-family:'Noto Sans Thai',sans-serif;
  font-size:1.05rem;font-weight:700;
  color:#1f2937;line-height:1.35;
  margin-bottom:.4rem;
}
.ls-news-sub{font-size:.76rem;color:#9ca3af;line-height:1.5;}
.ls-news-date{
  font-size:.68rem;color:#c4b5fd;margin-top:.6rem;
  display:flex;align-items:center;gap:4px;
}
.ls-news-date svg{width:11px;height:11px;stroke:#c4b5fd;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* notice card (no image) */
.ls-notice-card{
  background:#fff;border-radius:14px;
  border:1px solid #ede9fe;padding:1rem 1.1rem;
  display:flex;gap:.9rem;align-items:flex-start;
  animation:itemIn .7s cubic-bezier(.22,1,.36,1) .25s both;
}
.ls-notice-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#ede9fe,#ddd6fe);
  display:flex;align-items:center;justify-content:center;
}
.ls-notice-body{}
.ls-notice-title{font-size:.82rem;font-weight:700;color:#3b0764;margin-bottom:.25rem;}
.ls-notice-sub{font-size:.74rem;color:#9ca3af;line-height:1.5;}

@keyframes itemIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

/* ── MOBILE ── */
@media(max-width:700px){
  #ls{padding:.75rem;}
  .ls-wrap{
    flex-direction:column;
    width:calc(100vw - 1.5rem);
    height:calc(var(--vh,1vh)*92);
    border-radius:22px;
    overflow-y:auto;
  }
  .ls-card{flex:none;padding:1.8rem 1.6rem 1.4rem;border-right:none;border-bottom:1px solid rgba(221,214,254,.4);}
  .ls-news-panel{flex:1;}
  .ls-news-banner{height:120px;}
  .ls-card-title{font-size:1.4rem;}
}
@media(min-width:701px) and (max-width:920px){
  .ls-card{flex:0 0 340px;padding:2rem 1.8rem;}
  .ls-card-title{font-size:1.4rem;}
}


/* ═══ SHELL ═══ */
#app{display:none;height:100vh;height:calc(var(--vh,1vh)*100);max-height:100vh;max-height:calc(var(--vh,1vh)*100);overflow:hidden;flex-direction:column}
#app.show{display:flex}

/* TOPBAR */
.topbar{height:60px;background:#fff;border-bottom:1.5px solid #ede9fe;display:flex;align-items:center;padding:0 1.8rem;gap:1rem;flex-shrink:0;box-shadow:0 1px 8px rgba(109,40,217,.06);z-index:10}
.tb-logo{display:flex;align-items:center;gap:10px}
.tb-ic{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#3b0764,#7c3aed);display:flex;align-items:center;justify-content:center;font-size:.95rem;box-shadow:0 3px 10px rgba(109,40,217,.25)}
.tb-name{font-family:'Noto Serif Thai',serif;font-size:.83rem;font-weight:700;line-height:1.25;background:linear-gradient(135deg,#3b0764,#6d28d9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tb-name span{display:block;font-family:'Sarabun',sans-serif;font-size:.67rem;color:var(--s400);font-weight:400;-webkit-text-fill-color:var(--s400)}
.tb-div{width:1px;height:28px;background:#ede9fe;margin:0 .3rem}
.tb-nav{display:flex;gap:.1rem;overflow:visible;}
.tnav{display:flex;align-items:center;gap:5px;padding:.38rem .9rem;border-radius:9px;font-size:.82rem;color:var(--s400);cursor:pointer;border:none;background:none;font-family:'Sarabun',sans-serif;transition:all .2s;white-space:nowrap}
.tnav:hover{background:#f5f3ff;color:#4c1d95}
.tnav.on{background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#4c1d95;font-weight:700;box-shadow:0 2px 8px rgba(109,40,217,.12)}
.tb-r{display:flex;align-items:center;gap:.75rem;margin-left:auto}
.tb-user{display:flex;align-items:center;gap:8px;background:#f5f3ff;border:1.5px solid #ede9fe;padding:.3rem .9rem .3rem .45rem;border-radius:100px;font-size:.79rem;color:#4c1d95;font-weight:600}
.uav{width:27px;height:27px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#3b0764);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff;font-weight:700;box-shadow:0 2px 6px rgba(109,40,217,.3)}
/* ═══ USER DROPDOWN ═══ */
.tb-user-wrap{position:relative}
.tb-user{display:flex;align-items:center;gap:8px;background:#f5f3ff;border:1.5px solid #ede9fe;padding:.3rem .9rem .3rem .45rem;border-radius:100px;font-size:.79rem;color:#4c1d95;font-weight:600;transition:all .2s;user-select:none}
.tb-user:hover{background:#ede9fe;border-color:#ddd6fe}
.user-dd{
  position:absolute;top:calc(100% + 10px);right:0;
  background:#fff;border:1.5px solid #ede9fe;
  border-radius:16px;box-shadow:0 8px 32px rgba(109,40,217,.15),0 2px 8px rgba(0,0,0,.08);
  min-width:220px;z-index:500;
  opacity:0;transform:translateY(-8px) scale(.97);
  pointer-events:none;transition:all .2s cubic-bezier(.22,1,.36,1);
}
.user-dd.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.user-dd-head{display:flex;align-items:center;gap:10px;padding:1rem 1rem .75rem}
.user-dd-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#3b0764);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#fff;font-weight:700;flex-shrink:0;overflow:hidden}
.user-dd-name{font-size:.88rem;font-weight:700;color:var(--s800);line-height:1.2}
.user-dd-role{font-size:.72rem;color:var(--s400);margin-top:2px}
.user-dd-divider{height:1px;background:#f5f3ff;margin:.1rem 0}
.user-dd-item{display:flex;align-items:center;gap:10px;width:100%;padding:.65rem 1rem;border:none;background:none;font-family:'Sarabun',sans-serif;font-size:.83rem;color:var(--s700);cursor:pointer;transition:all .15s;text-align:left}
.user-dd-item:hover{background:#f5f3ff;color:#4c1d95}
.user-dd-item.danger{color:var(--red)}
.user-dd-item.danger:hover{background:#fef2f2}
.user-dd-item span{font-size:.9rem;width:18px;text-align:center}

/* ═══ PROFILE MODAL ═══ */
.profile-modal{display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);align-items:center;justify-content:center}
.profile-modal.open{display:flex}
.profile-box{background:#fff;border-radius:20px;width:380px;max-width:calc(100vw - 2rem);box-shadow:0 24px 64px rgba(0,0,0,.15);overflow:hidden}
.profile-box-head{background:linear-gradient(135deg,#3b0764,#7c3aed);padding:1.4rem 1.5rem;display:flex;align-items:center;gap:12px}
.profile-box-av{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff;font-weight:700;overflow:hidden;flex-shrink:0;cursor:pointer;position:relative}
.profile-box-av:hover::after{content:'📷';position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;font-size:1.2rem;border-radius:50%}
.profile-box-title{font-family:'Noto Serif Thai',serif;font-size:1rem;font-weight:700;color:#fff}
.profile-box-sub{font-size:.72rem;color:rgba(255,255,255,.75);margin-top:2px}
.profile-box-body{padding:1.2rem 1.5rem}
.profile-field{margin-bottom:1rem}
.profile-field label{display:block;font-size:.75rem;font-weight:700;color:var(--s500);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem}
.profile-field input{width:100%;padding:.55rem .85rem;border:1.5px solid var(--s200);border-radius:10px;font-family:'Sarabun',sans-serif;font-size:.88rem;color:var(--s800);outline:none;transition:border-color .2s}
.profile-field input:focus{border-color:var(--g500)}
.profile-photo-btn{display:flex;align-items:center;gap:8px;padding:.55rem .85rem;border:1.5px dashed var(--g300);border-radius:10px;background:#f5f3ff;color:var(--g700);font-family:'Sarabun',sans-serif;font-size:.83rem;font-weight:600;cursor:pointer;width:100%;justify-content:center;transition:all .2s}
.profile-photo-btn:hover{background:#ede9fe;border-color:var(--g500)}
.profile-box-footer{display:flex;gap:.75rem;padding:0 1.5rem 1.2rem}
.profile-save-btn{flex:1;padding:.65rem;border-radius:10px;border:none;background:linear-gradient(135deg,#6d28d9,#7c3aed);color:#fff;font-family:'Sarabun',sans-serif;font-size:.88rem;font-weight:700;cursor:pointer;transition:all .2s}
.profile-save-btn:hover{opacity:.9}
.profile-cancel-btn{padding:.65rem 1.2rem;border-radius:10px;border:1.5px solid var(--s200);background:#fff;color:var(--s600);font-family:'Sarabun',sans-serif;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s}
.profile-cancel-btn:hover{background:var(--s100)}

.content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.5rem 2rem;background:#faf5ff}
.page{display:none}.page.on{display:block}
.content.qc-active{overflow:hidden!important;padding:0!important;display:flex!important;flex-direction:column!important;}
.content.qc-active #pg-qc.on{flex:1!important;height:auto!important;}
.pg-head{margin-bottom:1.5rem}
.pg-title{font-family:'Noto Serif Thai',serif;font-size:1.5rem;font-weight:900;color:var(--s900);margin-bottom:.2rem}
.pg-sub{font-size:.83rem;color:var(--s400)}

/* ═══ DASHBOARD ═══ */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
.sc{background:#fff;border-radius:16px;padding:1.2rem 1.4rem;border:1px solid var(--s100);transition:all .25s;cursor:default}
.sc:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.07)}
.sc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.8rem}
.sc-ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.ic-g{background:var(--g50)}.ic-b{background:var(--blue50)}.ic-a{background:var(--amber50)}.ic-p{background:var(--purple50)}.ic-r{background:var(--red50)}
.sc-num{font-family:'Noto Serif Thai',serif;font-size:1.9rem;font-weight:900;color:var(--s900);line-height:1}
.sc-lbl{font-size:.77rem;color:var(--s500);margin-top:3px}
.sc-trend{font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:100px}
.trend-g{background:var(--g50);color:var(--g700)}.trend-a{background:var(--amber50);color:#92400e}.trend-r{background:var(--red50);color:var(--red)}

.dash-row{display:grid;gap:1.2rem;margin-bottom:1.2rem}
.dash-row.c2{grid-template-columns:1fr 1fr}
.dash-row.c3{grid-template-columns:2fr 1fr}
.card{background:#fff;border-radius:16px;border:1px solid var(--s100);overflow:hidden}
.ch{padding:1rem 1.2rem;border-bottom:1px solid var(--s100);display:flex;align-items:center;justify-content:space-between}
.ch .ct{font-weight:700;font-size:.88rem;color:var(--s900)}
.ch .cs{font-size:.75rem;color:var(--s400)}
.cb{padding:1.2rem}
.chart-wrap{position:relative;height:200px}

/* Activity list */
.act-list{position:absolute;inset:0;overflow:hidden;box-sizing:border-box;}
.act-list::-webkit-scrollbar{display:none}
.act-feed-track{display:flex;flex-direction:column;gap:.5rem;position:absolute;left:.8rem;right:.8rem;top:0;box-sizing:border-box;will-change:transform;padding:.6rem 0;}
.act-row{
  display:flex;align-items:center;gap:12px;
  padding:.75rem .9rem;border-radius:14px;
  background:#fff;
  border:1px solid var(--s100);
  border-left-width:4px;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
  transition:box-shadow .2s,transform .2s;
  flex-shrink:0;
}
.act-row:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);transform:translateX(2px)}
.act-row.dot-g{border-left-color:#7c3aed}
.act-row.dot-b{border-left-color:#3b82f6}
.act-row.dot-a{border-left-color:#f59e0b}
.act-row.dot-r{border-left-color:#ef4444}
.act-row.dot-p{border-left-color:#8b5cf6}
.act-icon{
  width:44px;height:44px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.act-icon.g{background:linear-gradient(135deg,#f5f3ff,#ddd6fe)}
.act-icon.b{background:linear-gradient(135deg,#eff6ff,#bfdbfe)}
.act-icon.a{background:linear-gradient(135deg,#fffbeb,#fde68a)}
.act-icon.r{background:linear-gradient(135deg,#fef2f2,#fecaca)}
.act-icon.p{background:linear-gradient(135deg,#f5f3ff,#ddd6fe)}
.act-body{flex:1;min-width:0}
.act-text{font-size:.83rem;color:var(--s900);font-weight:700;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-sub{font-size:.72rem;color:var(--s400);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.act-sub::before{content:'👤';font-size:.65rem}
.act-time{font-size:.68rem;color:var(--s400);flex-shrink:0;white-space:nowrap}
.act-badge{font-size:.68rem;font-weight:700;padding:4px 10px;border-radius:100px;flex-shrink:0;display:flex;align-items:center;gap:3px;transition:box-shadow .2s}
.act-badge::before{content:'✓ '}
.act-badge.g{background:#dcfce7;color:#15803d;box-shadow:0 0 8px rgba(124,58,237,.4)}
.act-badge.b{background:#dbeafe;color:#1d4ed8;box-shadow:0 0 8px rgba(59,130,246,.4)}
.act-badge.a{background:#fef9c3;color:#a16207;box-shadow:0 0 8px rgba(245,158,11,.4)}
.act-badge.r{background:#fee2e2;color:#dc2626;box-shadow:0 0 8px rgba(239,68,68,.4)}
.act-badge.p{background:#ede9fe;color:#6d28d9;box-shadow:0 0 8px rgba(139,92,246,.4)}

/* Today schedule */
.today-sched{display:flex;flex-direction:column;gap:.5rem}
.ts-row{display:flex;align-items:center;gap:10px;padding:.55rem .7rem;border-radius:10px;background:var(--s50);border:1px solid var(--s100)}
.ts-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0}
.ts-name{font-size:.82rem;font-weight:600;color:var(--s900);flex:1}
.ts-shift{font-size:.72rem;color:var(--s500)}
.badge{display:inline-flex;padding:3px 9px;border-radius:100px;font-size:.7rem;font-weight:600}
.bg{background:var(--g50);color:var(--g700)}.bb{background:var(--blue50);color:#1d4ed8}.ba{background:var(--amber50);color:#92400e}.br{background:var(--red50);color:var(--red)}.bp{background:var(--purple50);color:#5b21b6}

/* Appt today */
.appt-mini{display:flex;flex-direction:column;gap:.5rem}
.am-row{display:flex;align-items:center;gap:10px;padding:.55rem .7rem;border-radius:10px;background:var(--s50)}
.am-time{font-size:.75rem;font-weight:700;color:var(--g700);width:52px;flex-shrink:0}
.am-info{flex:1}
.am-name{font-size:.82rem;font-weight:600;color:var(--s900)}
.am-type{font-size:.72rem;color:var(--s400)}

/* ═══ DASHBOARD REDESIGN 2025 — White/Mint Clean ═══ */

/* ── Banner / Hero ── */
/* ── Dashboard Banner animated ── */
.dash-banner{
  position:relative;overflow:hidden;
  background:#fff;
  border:1.5px solid #ede9fe;
  border-radius:24px;
  padding:0;
  margin-bottom:1.4rem;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:stretch;
  box-shadow:0 1px 3px rgba(109,40,217,.06),0 8px 32px rgba(109,40,217,.07);
}
/* floating orbs behind banner left */
.dash-banner::before{
  content:'';position:absolute;top:-80px;left:-80px;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.08),transparent 70%);
  animation:orbFloat1 7s ease-in-out infinite;pointer-events:none;z-index:1;
}
.dash-banner::after{
  content:'';position:absolute;bottom:-60px;left:35%;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(167,139,250,.07),transparent 70%);
  animation:orbFloat2 9s ease-in-out infinite;pointer-events:none;z-index:1;
}
@keyframes orbFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,15px) scale(1.12)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-25px,-18px) scale(1.15)}}
.dash-banner-left{
  padding:1.8rem 2.2rem;
  position:relative;z-index:2;
}
.dash-banner-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,#f5f3ff,#ede9fe);
  border:1px solid #ddd6fe;border-radius:100px;
  padding:.22rem .85rem;font-size:.7rem;font-weight:800;
  color:#4c1d95;letter-spacing:.07em;text-transform:uppercase;
  margin-bottom:.9rem;
}
.dash-banner-eyebrow svg{width:10px;height:10px;fill:#7c3aed}
.dash-banner-title{
  font-family:'Noto Serif Thai',serif;
  font-size:2rem;font-weight:900;
  background:linear-gradient(135deg,#3b0764 0%,#6d28d9 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;line-height:1.15;margin-bottom:.35rem;
}
.dash-banner-date{font-size:.84rem;color:var(--s400);font-weight:400}
.dash-banner-right{
  background:linear-gradient(270deg,#3b0764,#5b21b6,#7c3aed,#5b21b6,#3b0764);
  background-size:300% 300%;
  animation:bannerGrad 6s ease infinite;
  min-width:200px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:1.8rem 2.2rem;
  position:relative;overflow:hidden;border-radius:0 22px 22px 0;
}
@keyframes bannerGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.dash-banner-right::before{
  content:'';position:absolute;top:-40px;right:-40px;
  width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,.07);pointer-events:none;
  animation:orbFloat1 5s ease-in-out infinite;
}
.dash-banner-right::after{
  content:'';position:absolute;bottom:-50px;left:-30px;
  width:120px;height:120px;border-radius:50%;
  background:rgba(255,255,255,.05);pointer-events:none;
  animation:orbFloat2 7s ease-in-out infinite;
}
.dash-banner-clock{
  font-family:'Noto Serif Thai',serif;
  font-size:2.5rem;font-weight:900;color:#fff;
  line-height:1;letter-spacing:.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.2);
}
.dash-banner-clock-lbl{font-size:.68rem;color:rgba(255,255,255,.6);margin-top:.35rem;letter-spacing:.04em}

/* ── Stat Ring Cards ── */
.dash-metric-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.2rem;
}
.dmc{
  background:#fff;border:1.5px solid #ede9fe;
  border-radius:20px;padding:1.3rem 1.4rem;
  display:flex;flex-direction:column;gap:.3rem;
  position:relative;overflow:hidden;
  transition:box-shadow .3s,transform .3s,border-color .3s;
  cursor:default;
}
.dmc:hover{
  box-shadow:0 12px 36px rgba(109,40,217,.18);
  transform:translateY(-4px) scale(1.01);border-color:#c4b5fd;
}
/* shimmer sweep on hover */
.dmc::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(167,139,250,.12) 50%,transparent 60%);
  background-size:200% 100%;background-position:200% 0;
  transition:background-position .5s ease;pointer-events:none;border-radius:20px;
}
.dmc:hover::after{background-position:-200% 0;}
.dmc::before{
  content:'';position:absolute;bottom:-18px;right:-18px;
  width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.1),transparent 70%);
  pointer-events:none;
}
.dmc-icon{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;margin-bottom:.5rem;flex-shrink:0;
}
.dmc-icon.green{background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#4c1d95}
.dmc-icon.teal{background:linear-gradient(135deg,#f5f3ff,#ede9fe);color:#5b21b6}
.dmc-icon.emerald{background:linear-gradient(135deg,#ede9fe,#c4b5fd);color:#5b21b6}
.dmc-icon.sage{background:linear-gradient(135deg,#f5f3ff,#ede9fe);color:#6d28d9}
.dmc-num{
  font-family:'Noto Serif Thai',serif;
  font-size:2.1rem;font-weight:900;color:#3b0764;line-height:1;
}
.dmc-label{font-size:.74rem;color:var(--s400);font-weight:500;margin-top:2px}
.dmc-bar-track{height:3px;background:#f5f3ff;border-radius:4px;margin-top:.9rem;overflow:hidden}
.dmc-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#7c3aed,#6d28d9);transition:width .8s cubic-bezier(.22,1,.36,1)}
.dmc-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.68rem;font-weight:700;padding:.15rem .55rem;border-radius:100px;
}
.dmc-badge.g{background:#ede9fe;color:#4c1d95}
.dmc-badge.b{background:#dbeafe;color:#1e40af}
.dmc-badge.p{background:#ede9fe;color:#4c1d95}
.dmc-badge.a{background:#fef3c7;color:#92400e}

/* ── Dashboard Body Grid ── */
.dash-body{display:grid;grid-template-columns:1fr 340px;gap:1.2rem;margin-bottom:1.2rem;align-items:start}
.dash-body-main{display:flex;flex-direction:column;gap:1.2rem}
.dash-body-side{display:flex;flex-direction:column;gap:1.2rem}

/* ── Panel Cards ── */
.dpanel{
  background:#fff;border:1.5px solid #ede9fe;
  border-radius:20px;overflow:hidden;
  box-shadow:0 1px 4px rgba(109,40,217,.04);
  transition:box-shadow .3s,border-color .3s;
}
.dpanel:hover{
  box-shadow:0 8px 28px rgba(109,40,217,.10);
  border-color:#ddd6fe;
}
.dpanel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.3rem;
  border-bottom:1px solid #f5f3ff;
}
.dpanel-title{
  display:flex;align-items:center;gap:8px;
  font-size:.88rem;font-weight:700;color:#3b0764;
}
.dpanel-title-dot{
  width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  box-shadow:0 0 0 3px rgba(124,58,237,.15);
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(124,58,237,.15)}
  50%{box-shadow:0 0 0 6px rgba(124,58,237,.08)}
}
.dpanel-action{
  font-size:.73rem;color:var(--g600);font-weight:700;
  background:var(--g50);border:1px solid var(--g200);
  border-radius:8px;padding:.22rem .7rem;cursor:pointer;
  transition:all .2s;
}
.dpanel-action:hover{background:var(--g600);color:#fff}
.dpanel-body{padding:1rem 1.3rem}

/* ── Team List (new style) ── */
.dteam-item{
  display:flex;align-items:center;gap:10px;
  padding:.55rem .4rem;
  border-bottom:1px solid #f5f3ff;
  transition:background .2s,transform .2s,padding-left .2s;
  border-radius:8px;margin:0 -.4rem;
}
.dteam-item:last-child{border:none}
.dteam-item:hover{background:#f5f3ff;padding-left:.9rem;}
.dteam-av{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;color:#fff;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  overflow:hidden;
}
.dteam-info{flex:1;min-width:0}
.dteam-name{font-size:.83rem;font-weight:600;color:#1a2e22;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dteam-spec{font-size:.7rem;color:var(--s400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.dteam-role{
  font-size:.65rem;font-weight:800;padding:2px 8px;
  border-radius:100px;flex-shrink:0;white-space:nowrap;
}
.dteam-role.rad{background:#ede9fe;color:#4c1d95}
.dteam-role.tec{background:#dbeafe;color:#1e40af}
.dteam-role.adm{background:#ede9fe;color:#4c1d95}

/* ── Activity Feed ── */
.dact-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:.55rem 0;border-bottom:1px solid #f5f3ff;
}
.dact-item:last-child{border:none}
.dact-line{display:flex;flex-direction:column;align-items:center;gap:0;flex-shrink:0}
.dact-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  box-shadow:0 0 0 3px rgba(124,58,237,.15);
  margin-top:3px;
  animation:dotPulse 2.5s ease-in-out infinite;
}
.dact-dot.ref{background:linear-gradient(135deg,#a78bfa,#7c3aed);box-shadow:0 0 0 3px rgba(124,58,237,.15);animation-delay:.4s}
.dact-dot.con{background:linear-gradient(135deg,#c4b5fd,#8b5cf6);box-shadow:0 0 0 3px rgba(139,92,246,.15);animation-delay:.8s}
.dact-text{font-size:.8rem;color:#374151;line-height:1.5;flex:1}
.dact-time{font-size:.68rem;color:var(--s400);white-space:nowrap;flex-shrink:0;padding-top:3px}

/* ── Position Breakdown (new) ── */
.dpos-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.dpos-item{
  display:flex;align-items:center;gap:10px;
  background:#f5f3ff;border:1px solid #ede9fe;
  border-radius:12px;padding:.7rem .85rem;
  transition:all .25s;cursor:default;
}
.dpos-item:hover{background:#ede9fe;border-color:#c4b5fd;transform:translateY(-3px);box-shadow:0 6px 18px rgba(109,40,217,.12)}
.dpos-icon{
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;flex-shrink:0;
}
.dpos-count{
  font-family:'Noto Serif Thai',serif;
  font-size:1.35rem;font-weight:900;color:#3b0764;line-height:1;
}
.dpos-label{font-size:.68rem;color:var(--s500);margin-top:1px;line-height:1.3}

@media(max-width:767px){
  .dpos-grid{grid-template-columns:1fr;gap:.5rem}
  .dpos-item{padding:.6rem .85rem}
  .dpos-label{font-size:.75rem}
}

/* ── Mini Donut Ring ── */
.dash-donut-wrap{display:flex;align-items:center;justify-content:center;padding:.5rem 0}
.dash-ring-svg{filter:drop-shadow(0 4px 8px rgba(109,40,217,.15))}
.dash-ring-center-label{
  font-family:'Noto Serif Thai',serif;
  font-size:1.45rem;font-weight:900;color:#3b0764;
  line-height:1;
}
.dash-ring-center-sub{font-size:.65rem;color:var(--s400)}

/* ── Quick Counts Sidebar ── */
.dash-quick-grid{display:flex;flex-direction:column;gap:.6rem}
.dash-quick-item{
  display:flex;align-items:center;gap:10px;
  background:#f5f3ff;border:1px solid #ede9fe;
  border-radius:12px;padding:.65rem 1rem;
  transition:all .25s;cursor:default;
}
.dash-quick-item:hover{background:#ede9fe;border-color:#c4b5fd;transform:translateX(4px);box-shadow:0 4px 14px rgba(109,40,217,.1)}
.dash-quick-bar-wrap{flex:1;display:flex;flex-direction:column;gap:3px}
.dash-quick-label{font-size:.74rem;font-weight:600;color:#1a2e22}
.dash-quick-track{height:4px;background:#ede9fe;border-radius:4px;overflow:hidden}
.dash-quick-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#7c3aed,#6d28d9);transition:width 1s cubic-bezier(.22,1,.36,1)}
.dash-quick-num{font-family:'Noto Serif Thai',serif;font-size:1.2rem;font-weight:900;color:#3b0764;flex-shrink:0;min-width:24px;text-align:right}

/* animation */
.dmc,.dpanel{animation:dashIn .6s cubic-bezier(.22,1,.36,1) var(--dd,0s) both}
@keyframes dashIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
/* number count-up pop */
.dmc-num{
  font-family:'Noto Serif Thai',serif;
  font-size:2.1rem;font-weight:900;color:#3b0764;line-height:1;
  animation:numPop .7s cubic-bezier(.34,1.56,.64,1) var(--dd,0s) both;
}
@keyframes numPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
/* trend badges in metric */
.trend-b{background:var(--blue50);color:#1d4ed8}
.trend-p{background:var(--purple50);color:#5b21b6}
/* back-compat for cs-link */
.cs-link{
  font-size:.75rem;color:var(--g600);font-weight:700;
  background:var(--g50);border:1px solid var(--g200);
  border-radius:8px;padding:.25rem .7rem;cursor:pointer;transition:all .2s;
}
.cs-link:hover{background:var(--g600);color:#fff}
/* back-compat sc-anim */
.sc-anim{animation:scIn .5s cubic-bezier(.22,1,.36,1) var(--d,0s) both}
@keyframes scIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.sc-bar{height:3px;background:var(--s100);border-radius:3px;margin-top:.9rem;overflow:hidden}
.sc-bar-fill{height:100%;border-radius:3px;transition:width .6s ease}
/* old pos-card compat */
.pos-grid{display:none}
/* old team compat */
.dash-team-item{display:none}

/* ═══ STAFF ═══ */
.btnadd{display:flex;align-items:center;gap:6px;background:var(--g600);color:#fff;border:none;padding:.5rem 1.1rem;border-radius:10px;font-family:'Sarabun',sans-serif;font-size:.83rem;font-weight:600;cursor:pointer;transition:all .2s;margin-left:auto}
.btnadd:hover{background:var(--g700);transform:translateY(-1px)}

/* ── STAFF PAGE REDESIGN ── */
/* Hero Banner */
.staff-hero{
  background:linear-gradient(270deg,#4c1d95,#6d28d9,#7c3aed,#a855f7,#7c3aed,#6d28d9,#4c1d95);
  background-size:400% 400%;
  animation:heroGradient 8s ease infinite;
  border-radius:20px;padding:1.8rem 2rem;margin-bottom:1.5rem;
  display:flex;align-items:center;justify-content:space-between;
  position:relative;overflow:hidden;
}
@keyframes heroGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.staff-hero::before{
  content:'';position:absolute;top:-60px;right:-60px;
  width:260px;height:260px;border-radius:50%;
  background:rgba(255,255,255,.07);
  animation:heroBlob1 6s ease-in-out infinite;
}
.staff-hero::after{
  content:'';position:absolute;bottom:-80px;left:30%;
  width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.05);
  animation:heroBlob2 8s ease-in-out infinite;
}
@keyframes heroBlob1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-30px,20px) scale(1.15)}
}
@keyframes heroBlob2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-25px) scale(1.2)}
}
.staff-hero-left{position:relative;z-index:1}
.staff-hero-title{font-family:'Noto Serif Thai',serif;font-size:1.45rem;font-weight:900;color:#fff;margin-bottom:.3rem}
.staff-hero-sub{font-size:.82rem;color:rgba(255,255,255,.65)}
.staff-hero-stats{display:flex;gap:1.5rem;position:relative;z-index:1}
.staff-hero-stat{text-align:center}
.staff-hero-stat-num{font-family:'Noto Serif Thai',serif;font-size:2rem;font-weight:900;color:#fff;line-height:1}
.staff-hero-stat-lbl{font-size:.7rem;color:rgba(255,255,255,.6);margin-top:2px}
.staff-hero-div{width:1px;background:rgba(255,255,255,.2);margin:0 .3rem}

/* Toolbar */
.staff-toolbar2{
  display:flex;align-items:center;gap:.75rem;margin-bottom:1.2rem;flex-wrap:wrap;
  background:#fff;border-radius:14px;border:1px solid var(--s100);
  padding:.75rem 1rem;
}
@keyframes staffBarFlow{
  0%{background-position:0% 0%}
  100%{background-position:200% 0%}
}
.staff-search2{display:flex;align-items:center;gap:8px;background:var(--s50);border:1.5px solid var(--s200);border-radius:10px;padding:.45rem 1rem;flex:1;min-width:180px;transition:all .2s;}
.staff-search2:focus-within{border-color:var(--g400);background:#fff;box-shadow:0 0 0 3px rgba(124,58,237,.08)}
.staff-search2 input{border:none;outline:none;font-family:'Sarabun',sans-serif;font-size:.84rem;color:var(--s900);background:transparent;width:100%}
.staff-search2 input::placeholder{color:var(--s400)}
.staff-filter2{padding:.45rem .9rem;border:1.5px solid var(--s200);border-radius:10px;font-family:'Sarabun',sans-serif;font-size:.82rem;color:var(--s700);background:var(--s50);outline:none;cursor:pointer;transition:all .2s}
.staff-filter2:focus{border-color:var(--g400);background:#fff}
.staff-view-btn{width:36px;height:36px;border:1.5px solid var(--s200);border-radius:9px;background:var(--s50);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:all .2s;color:var(--s400)}
.staff-view-btn:hover{border-color:var(--g300);color:var(--g700)}

/* ── PROJECTIONS PAGE ── */
.prjp-search-wrap{display:flex;align-items:center;background:#fff;border:1.5px solid #ede9fe;border-radius:10px;overflow:hidden}
.prjp-search{padding:.45rem 1rem;border:none;outline:none;font-family:'Sarabun',sans-serif;font-size:.84rem;color:#374151;background:transparent;width:240px}
.prjp-search:focus{box-shadow:0 0 0 3px rgba(124,58,237,.08)}
.prjp-clear-btn{padding:.42rem .9rem;border:1.5px solid #fecaca;border-radius:10px;background:#fef2f2;color:#dc2626;font-family:'Sarabun',sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s}
.prjp-clear-btn:hover{background:#fee2e2}
.prjp-tabs{display:flex;gap:.5rem;margin-bottom:.8rem;flex-wrap:wrap}
.prjp-tab{display:flex;align-items:center;gap:.4rem;padding:.55rem 1.2rem;border:1.5px solid #ede9fe;border-radius:12px;background:#fff;font-family:'Sarabun',sans-serif;font-size:.85rem;font-weight:700;color:#6b7280;cursor:pointer;transition:all .18s}
.prjp-tab:hover{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe}
.prjp-tab.active{background:linear-gradient(135deg,#5b21b6,#7c3aed);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(109,40,217,.3)}
.prjp-tab-ic{font-size:1rem}
.prjp-tab-cnt{background:rgba(255,255,255,.2);color:rgba(255,255,255,.9);font-size:.68rem;font-weight:700;padding:.1rem .4rem;border-radius:20px;min-width:18px;text-align:center}
.prjp-tab:not(.active) .prjp-tab-cnt{background:#f5f3ff;color:#6b7280}
.prjp-stats-bar{display:flex;gap:1rem;align-items:center;font-size:.78rem;color:#6b7280;margin-bottom:.9rem;padding:.5rem .9rem;background:#fff;border-radius:10px;border:1px solid #ede9fe}
.prjp-content{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.prjp-group-card{background:#fff;border:1.5px solid #ede9fe;border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(109,40,217,.06)}
.prjp-group-hd{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1rem;background:linear-gradient(90deg,#f5f3ff,#f5f3ff);border-bottom:1px solid #ede9fe;cursor:pointer;user-select:none}
.prjp-group-name{font-size:.82rem;font-weight:800;color:#4c1d95}
.prjp-group-meta{display:flex;align-items:center;gap:.5rem}
.prjp-group-total{font-size:.68rem;color:#6b7280}
.prjp-group-toggle{font-size:.7rem;color:#9ca3af;transition:transform .2s}
.prjp-group-hd.collapsed .prjp-group-toggle{transform:rotate(-90deg)}
.prjp-group-body{padding:.3rem .5rem .6rem;max-height:260px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ddd6fe transparent}
.prjp-group-body::-webkit-scrollbar{width:4px}
.prjp-group-body::-webkit-scrollbar-track{background:transparent}
.prjp-group-body::-webkit-scrollbar-thumb{background:#ddd6fe;border-radius:4px}
/* ── Proj Picker Button & Modal ── */
.pick-proj-btn{display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem;background:linear-gradient(135deg,#f5f3ff,#ede9fe);border:1.5px solid #ddd6fe;border-radius:10px;color:#4c1d95;font-size:.82rem;font-weight:700;cursor:pointer;font-family:'Sarabun',sans-serif;transition:all .17s;width:100%;box-sizing:border-box}
.pick-proj-btn:hover{background:linear-gradient(135deg,#ede9fe,#ddd6fe);border-color:#6d28d9}
#pp-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px)}
#pp-modal.open{display:flex;animation:prjpFadeIn .18s ease}
.pp-box{background:#fff;border-radius:20px;width:100%;max-width:600px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.2);overflow:hidden;animation:prjpSlideUp .2s ease}
.pp-hd{background:linear-gradient(135deg,#3b0764,#6d28d9);padding:1rem 1.2rem;display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}
.pp-hd-title{color:#fff;font-size:1rem;font-weight:800;font-family:'Noto Serif Thai',serif}
.pp-hd-sub{color:rgba(255,255,255,.75);font-size:.72rem;margin-top:.1rem}
.pp-close{background:rgba(255,255,255,.15);border:none;color:#fff;width:28px;height:28px;border-radius:50%;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .14s;flex-shrink:0;margin-left:.5rem}
.pp-close:hover{background:rgba(255,255,255,.3)}
.pp-search-wrap{padding:.65rem 1rem .35rem;flex-shrink:0;border-bottom:1px solid #ede9fe}
.pp-search{width:100%;padding:.5rem .8rem;border:1.5px solid #ede9fe;border-radius:10px;font-family:'Sarabun',sans-serif;font-size:.85rem;outline:none;box-sizing:border-box}
.pp-search:focus{border-color:#6d28d9}
.pp-tabs{display:flex;gap:.4rem;padding:.5rem 1rem .3rem;flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.pp-tab{padding:.35rem .9rem;border-radius:20px;border:1.5px solid #ede9fe;background:#faf5ff;font-size:.78rem;font-weight:700;color:#6b7280;cursor:pointer;white-space:nowrap;transition:all .15s;font-family:'Sarabun',sans-serif}
.pp-tab.active{background:linear-gradient(135deg,#5b21b6,#7c3aed);color:#fff;border-color:transparent}
.pp-body{flex:1;overflow-y:auto;padding:.5rem .8rem .8rem;-webkit-overflow-scrolling:touch}
.pp-group{margin-bottom:.6rem}
.pp-group-hd{font-size:.72rem;font-weight:800;color:#6d28d9;padding:.3rem .4rem;background:#f5f3ff;border-radius:6px;margin-bottom:.2rem;letter-spacing:.03em}
.pp-item{display:flex;align-items:center;gap:.6rem;padding:.38rem .5rem;border-radius:8px;cursor:pointer;transition:background .12s}
.pp-item:hover{background:#f5f3ff}
.pp-item.selected{background:#ede9fe}
.pp-chk{width:16px;height:16px;border:2px solid #ddd6fe;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.65rem;background:#fff;transition:all .14s}
.pp-item.selected .pp-chk{background:#6d28d9;border-color:#6d28d9;color:#fff}
.pp-item-th{font-size:.82rem;font-weight:600;color:#1a2e22}
.pp-item-en{font-size:.7rem;color:#6b7280}
.pp-footer{border-top:1.5px solid #ede9fe;padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:#faf5ff}
.pp-sel-info{font-size:.78rem;color:#6d28d9;font-weight:700}
.pp-sel-badge{background:#ede9fe;padding:.1rem .5rem;border-radius:20px;margin-left:.3rem}
.pp-confirm{background:linear-gradient(135deg,#5b21b6,#7c3aed);color:#fff;border:none;border-radius:10px;padding:.55rem 1.4rem;font-size:.85rem;font-weight:700;cursor:pointer;font-family:'Sarabun',sans-serif;transition:opacity .15s}
.pp-confirm:hover{opacity:.9}
.pp-empty{text-align:center;padding:2rem;color:#9ca3af;font-size:.85rem}
@media(max-width:500px){.pp-box{border-radius:16px 16px 0 0;max-height:93vh;position:fixed;bottom:0;left:0;right:0;max-width:100%}#pp-modal{align-items:flex-end;padding:0}}
.prjp-group-body.hidden{display:none}
.prjp-row{display:flex;align-items:flex-start;gap:.55rem;padding:.42rem .5rem;border-radius:8px;transition:background .12s;cursor:pointer}
.prjp-row:hover{background:#f5f3ff}
/* ── Positioning Modal ── */
#prjp-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(3px)}
#prjp-modal.open{display:flex;animation:prjpFadeIn .18s ease}
@keyframes prjpFadeIn{from{opacity:0}to{opacity:1}}
.prjp-mbox{background:#fff;border-radius:20px;width:100%;max-width:540px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.18);overflow:hidden;animation:prjpSlideUp .2s ease}
@keyframes prjpSlideUp{from{transform:translateY(22px);opacity:0}to{transform:translateY(0);opacity:1}}
.prjp-mhd{background:linear-gradient(135deg,#3b0764 0%,#6d28d9 100%);padding:1.1rem 1.3rem .9rem;position:relative;flex-shrink:0}
.prjp-mhd-type{font-size:.65rem;font-weight:700;color:rgba(255,255,255,.65);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.2rem}
.prjp-mhd-th{font-size:1.1rem;font-weight:800;color:#fff;line-height:1.25;font-family:'Noto Serif Thai',serif}
.prjp-mhd-en{font-size:.78rem;color:rgba(255,255,255,.75);margin-top:.15rem}
.prjp-mclose{position:absolute;top:.8rem;right:.9rem;background:rgba(255,255,255,.15);border:none;color:#fff;width:28px;height:28px;border-radius:50%;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .14s}
.prjp-mclose:hover{background:rgba(255,255,255,.3)}
.prjp-mbody{overflow-y:auto;padding:1.1rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;-webkit-overflow-scrolling:touch}
.prjp-mno-info{text-align:center;color:#9ca3af;padding:2rem 1rem;font-size:.88rem}
.prjp-mno-info span{font-size:2rem;display:block;margin-bottom:.5rem}
.prjp-msec{display:flex;flex-direction:column;gap:.45rem}
.prjp-msec-title{font-size:.68rem;font-weight:800;color:#6d28d9;letter-spacing:.06em;text-transform:uppercase;border-bottom:1.5px solid #ede9fe;padding-bottom:.3rem}
.prjp-mrow{display:flex;gap:.6rem;align-items:flex-start;padding:.35rem 0;border-bottom:1px solid #f5f3ff}
.prjp-mrow:last-child{border-bottom:none}
.prjp-mlabel{font-size:.72rem;font-weight:700;color:#6b7280;min-width:100px;flex-shrink:0;padding-top:.05rem}
.prjp-mval{font-size:.8rem;color:#1a2e22;line-height:1.5;font-weight:500}
.prjp-mnote{background:#f5f3ff;border-left:3px solid #7c3aed;border-radius:0 8px 8px 0;padding:.55rem .8rem;font-size:.78rem;color:#4c1d95;line-height:1.55}
.prjp-mchip{display:inline-flex;align-items:center;gap:.3rem;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:20px;padding:.15rem .55rem;font-size:.72rem;font-weight:600;color:#4c1d95;margin:.15rem .1rem}
.prjp-mimg-placeholder{background:linear-gradient(135deg,#f5f3ff,#f5f3ff);border:1.5px dashed #ddd6fe;border-radius:12px;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#6b7280;font-size:.78rem;gap:.4rem}

/* ── projection image gallery ── */
.prjp-img-section{display:flex;flex-direction:column;gap:.6rem}
.prjp-img-title{font-size:.68rem;font-weight:800;color:#6d28d9;letter-spacing:.06em;text-transform:uppercase;border-bottom:1.5px solid #ede9fe;padding-bottom:.3rem}
.prjp-img-grid{display:flex;flex-direction:row;gap:10px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.prjp-img-grid::-webkit-scrollbar{height:4px}
.prjp-img-grid::-webkit-scrollbar-track{background:#f3f0ff;border-radius:4px}
.prjp-img-grid::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:4px}
.prjp-img-grid.prjp-img-count-1,.prjp-img-grid.prjp-img-count-2,.prjp-img-grid.prjp-img-count-3,.prjp-img-grid.prjp-img-count-4{display:flex}
.prjp-img-wrap{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;flex-shrink:0;height:180px;background:#1a1a2e;scroll-snap-align:start;box-shadow:0 4px 16px rgba(0,0,0,.15);border:2px solid rgba(196,181,253,.3);transition:transform .2s,box-shadow .2s,border-color .2s}
.prjp-img-wrap:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(109,40,217,.25);border-color:#a78bfa}
.prjp-img-wrap img{height:100%;width:auto;display:block;object-fit:contain;background:#1a1a2e}
.prjp-img-overlay{position:absolute;inset:0;background:rgba(109,40,217,0);display:flex;align-items:center;justify-content:center;font-size:1.4rem;opacity:0;transition:.22s}
.prjp-img-wrap:hover .prjp-img-overlay{background:rgba(109,40,217,.3);opacity:1}

/* ── lightbox ── */
#prjp-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center}
#prjp-lightbox.open{display:flex}
.prjp-lb-bg{position:absolute;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(6px)}
.prjp-lb-box{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;max-width:95vw;max-height:95vh}
.prjp-lb-box img{max-width:min(800px,90vw);max-height:85vh;border-radius:12px;object-fit:contain;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.prjp-lb-close{position:fixed;top:16px;right:16px;background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s;z-index:2}
.prjp-lb-close:hover{background:rgba(255,255,255,.3)}
.prjp-lb-prev,.prjp-lb-next{background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:50%;width:46px;height:46px;font-size:1.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s;flex-shrink:0}
.prjp-lb-prev:hover,.prjp-lb-next:hover{background:rgba(255,255,255,.28)}
.prjp-lb-counter{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);color:#fff;border-radius:20px;padding:.3rem .9rem;font-size:.82rem;font-weight:600}
@media(max-width:500px){.prjp-mbox{border-radius:16px 16px 0 0;max-width:100%;max-height:92vh;position:fixed;bottom:0;left:0;right:0}#prjp-modal{align-items:flex-end;padding:0}}
.prjp-row:hover .prjp-rp-btn{opacity:1}
.prjp-rp-btn{font-size:.78rem;text-decoration:none;opacity:0;flex-shrink:0;padding:.1rem .3rem;border-radius:5px;background:#f5f3ff;border:1px solid #ede9fe;transition:all .15s;margin-top:1px}
.prjp-rp-btn:hover{background:#ede9fe;opacity:1!important}

.prjp-dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#6d28d9,#7c3aed);flex-shrink:0;margin-top:5px}
.prjp-th{font-size:.82rem;color:#374151;font-weight:600;line-height:1.3}
.prjp-en{font-size:.68rem;color:#9ca3af;margin-top:1px}
.prjp-empty{grid-column:1/-1;text-align:center;padding:3rem;color:#9ca3af;font-size:.9rem}
@media(max-width:700px){.prjp-content{grid-template-columns:1fr}.prjp-search{width:180px}}

/* ═══ ADMIN PANEL ═══ */
/* ═══════════════════════════════════════
   ADMIN PANEL v3 — Full Green Redesign
═══════════════════════════════════════ */
#pg-admin{background:linear-gradient(150deg,#faf5ff 0%,#f5f3ff 60%,#faf5ff 100%);min-height:100%;}
.adm-wrap{padding:1.4rem 1.2rem 8rem;max-width:1200px;margin:0 auto}

/* Hero */
.adm-hero{position:relative;border-radius:24px;overflow:hidden;margin-bottom:1.8rem;min-height:150px;isolation:isolate}
.adm-hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#3b0764 0%,#5b21b6 45%,#6d28d9 75%,#7c3aed 100%)}
.adm-hero-orb1{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.3),transparent 70%);top:-100px;right:-40px;pointer-events:none}
.adm-hero-orb2{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(196,181,253,.25),transparent 70%);bottom:-60px;left:20%;pointer-events:none}
.adm-hero-orb3{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);top:10px;left:40%;pointer-events:none}
.adm-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px}
.adm-hero-inner{position:relative;z-index:1;padding:1.8rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.2rem}
.adm-hero-left{display:flex;align-items:center;gap:1.3rem}
.adm-hero-icon{width:62px;height:62px;border-radius:20px;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:1.8rem;box-shadow:0 8px 32px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.25);animation:admIconFloat 4s ease-in-out infinite}
@keyframes admIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.adm-hero-eyebrow{font-size:.66rem;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.3rem}
.adm-hero-title{font-size:1.55rem;font-weight:900;color:#fff;font-family:'Noto Serif Thai',serif;line-height:1.2;text-shadow:0 2px 12px rgba(0,0,0,.2)}
.adm-hero-sub{font-size:.77rem;color:rgba(255,255,255,.65);margin-top:.2rem;letter-spacing:.01em}
.adm-hero-chips{display:flex;gap:.8rem;flex-wrap:wrap}
.adm-hero-chip{background:rgba(255,255,255,.13);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:.55rem 1rem;text-align:center;min-width:68px;cursor:default;transition:all .2s}
.adm-hero-chip:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.adm-hero-chip-num{font-size:1.25rem;font-weight:900;color:#fff;font-family:'Noto Serif Thai',serif;display:block;line-height:1}
.adm-hero-chip-lbl{font-size:.6rem;color:rgba(255,255,255,.6);margin-top:.2rem;display:block}

/* Layout */
.adm-layout{display:grid;grid-template-columns:210px 1fr;gap:1.2rem;align-items:start}

/* Sidebar */
.adm-sidebar{background:#fff;border-radius:20px;border:1.5px solid var(--border-card);box-shadow:var(--shadow-card);overflow:clip;position:sticky;top:.8rem}
.adm-sidebar-hd{background:linear-gradient(135deg,var(--g800),var(--g600));padding:.85rem 1.1rem;display:flex;align-items:center;gap:.6rem}
.adm-sidebar-hd-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)}
.adm-sidebar-hd-title{font-size:.72rem;font-weight:800;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.08em}
.adm-nav{padding:.5rem}
.adm-nav-item{display:flex;align-items:center;gap:.7rem;padding:.68rem .95rem;border-radius:12px;cursor:pointer;font-family:'Sarabun',sans-serif;font-size:.83rem;font-weight:700;color:var(--s500);border:none;background:transparent;width:100%;text-align:left;transition:all .18s;position:relative}
.adm-nav-item:hover:not(.active){background:var(--g50);color:var(--g700)}
.adm-nav-item.active{color:#fff;background:linear-gradient(135deg,var(--g700),var(--g500));box-shadow:0 4px 16px rgba(109,40,217,.28)}
.adm-nav-ic{font-size:.95rem;width:18px;text-align:center;flex-shrink:0}
.adm-nav-txt{flex:1}
.adm-nav-count{font-size:.62rem;font-weight:800;padding:.1rem .42rem;border-radius:100px;min-width:18px;text-align:center;background:var(--g100);color:var(--g800);transition:all .18s}
.adm-nav-item.active .adm-nav-count{background:rgba(255,255,255,.28);color:#fff}
.adm-nav-sep{height:1px;background:var(--s100);margin:.4rem .6rem}

/* Main panels */
.adm-main{min-width:0}
.adm-panel{display:none;flex-direction:column;gap:1.1rem;animation:admIn .22s ease both}
.adm-panel.active{display:flex}
@keyframes admIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Section card */
.adm-sec{background:#fff;border-radius:18px;border:1.5px solid var(--border-card);box-shadow:var(--shadow-card);overflow:hidden}
.adm-sec-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;padding:1rem 1.3rem;border-bottom:1.5px solid var(--s100);background:linear-gradient(90deg,#fafffd,#fff)}
.adm-sec-hd-l{display:flex;align-items:center;gap:.7rem}
.adm-sec-hd-ic{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--g400),var(--g600));display:flex;align-items:center;justify-content:center;font-size:.9rem;box-shadow:0 3px 10px rgba(109,40,217,.2);flex-shrink:0}
.adm-sec-hd-title{font-size:.92rem;font-weight:800;color:var(--s800)}
.adm-sec-hd-sub{font-size:.71rem;color:var(--s400);margin-top:.08rem}
.adm-sec-body{padding:1.2rem 1.3rem}

/* Stats row */
.adm-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.adm-kpi{background:#fff;border-radius:16px;border:1.5px solid var(--border-card);padding:.9rem 1rem;display:flex;align-items:center;gap:.75rem;box-shadow:var(--shadow-card);transition:all .22s;overflow:hidden;position:relative}
.adm-kpi::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--g50),transparent 60%);opacity:0;transition:opacity .2s;pointer-events:none}
.adm-kpi:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(109,40,217,.13)}
.adm-kpi:hover::after{opacity:1}
.adm-kpi-ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.adm-kpi-ic.g{background:linear-gradient(135deg,var(--g400),var(--g600));box-shadow:0 4px 12px rgba(109,40,217,.25)}
.adm-kpi-ic.b{background:linear-gradient(135deg,#60a5fa,#2563eb);box-shadow:0 4px 12px rgba(37,99,235,.22)}
.adm-kpi-ic.a{background:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 4px 12px rgba(217,119,6,.22)}
.adm-kpi-ic.p{background:linear-gradient(135deg,#c084fc,#7c3aed);box-shadow:0 4px 12px rgba(124,58,237,.22)}
.adm-kpi-num{font-size:1.5rem;font-weight:900;color:var(--s900);font-family:'Noto Serif Thai',serif;line-height:1;position:relative;z-index:1}
.adm-kpi-lbl{font-size:.68rem;color:var(--s400);margin-top:.18rem;position:relative;z-index:1}

/* User grid */
.adm-user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:.85rem}
.adm-uc{background:#fff;border-radius:16px;border:1.5px solid var(--border-card);padding:1rem 1.1rem 1rem 1.2rem;display:flex;align-items:center;gap:.85rem;box-shadow:var(--shadow-card);transition:all .22s;position:relative;overflow:hidden}
.adm-uc-bar{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px}
.adm-uc-bar.g{background:linear-gradient(180deg,var(--g400),var(--g600))}
.adm-uc-bar.a{background:linear-gradient(180deg,#a78bfa,#7c3aed)}
.adm-uc-bar.b{background:linear-gradient(180deg,#c4b5fd,#7c3aed)}
.adm-uc:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(109,40,217,.1)}
.adm-uc-av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--g400),var(--g700));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:1.05rem;flex-shrink:0;overflow:hidden;border:2.5px solid var(--g100);box-shadow:0 3px 10px rgba(109,40,217,.18)}
.adm-uc-info{flex:1;min-width:0}
.adm-uc-name{font-size:.87rem;font-weight:800;color:var(--s800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.4rem}
.adm-uc-self{font-size:.6rem;background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;padding:.1rem .42rem;border-radius:5px;font-weight:800;flex-shrink:0}
.adm-uc-meta{display:flex;align-items:center;gap:.35rem;margin-top:.25rem;flex-wrap:wrap}
.adm-uc-user{font-size:.68rem;color:var(--s400);background:var(--s50);padding:.08rem .4rem;border-radius:4px;font-family:monospace;border:1px solid var(--s100)}
.adm-uc-btns{display:flex;gap:.3rem;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.adm-ub2{padding:.3rem .65rem;border-radius:7px;font-family:'Sarabun',sans-serif;font-size:.7rem;font-weight:800;cursor:pointer;transition:all .14s;display:inline-flex;align-items:center;gap:.25rem;border:1.5px solid transparent;white-space:nowrap}
.adm-ub2.g{color:var(--g700);border-color:var(--g200);background:var(--g50)}.adm-ub2.g:hover{background:var(--g100);transform:translateY(-1px);box-shadow:0 3px 8px rgba(109,40,217,.15)}
.adm-ub2.y{color:#6d28d9;border-color:#ddd6fe;background:#f5f3ff}.adm-ub2.y:hover{background:#ede9fe;transform:translateY(-1px)}
.adm-ub2.r{color:#dc2626;border-color:#fecaca;background:#fef2f2}.adm-ub2.r:hover{background:#fee2e2;transform:translateY(-1px)}
.adm-role-badge{display:inline-flex;align-items:center;padding:.15rem .55rem;border-radius:100px;font-size:.62rem;font-weight:800}
.adm-role-badge.adm{background:linear-gradient(90deg,#ede9fe,#ddd6fe);color:#4c1d95;border:1px solid #c4b5fd}
.adm-role-badge.rad{background:var(--g50);color:var(--g800);border:1px solid var(--g200)}
.adm-role-badge.tec{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe}

/* Toolbar */
.adm-toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.adm-search{flex:1;min-width:160px;padding:.55rem .9rem .55rem 2.3rem;border:1.5px solid var(--s200);border-radius:10px;font-family:'Sarabun',sans-serif;font-size:.84rem;outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%239ca3af' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat .75rem center;transition:all .2s}
.adm-search:focus{border-color:var(--g500);box-shadow:0 0 0 3px rgba(124,58,237,.1);background-color:#fcfffe}
.adm-filter{padding:.55rem .85rem;border:1.5px solid var(--s200);border-radius:10px;font-family:'Sarabun',sans-serif;font-size:.82rem;outline:none;background:#fff;cursor:pointer;transition:border .2s}
.adm-filter:focus{border-color:var(--g500)}

/* Buttons */
.adm-btn{padding:.55rem 1.05rem;border-radius:10px;border:none;font-family:'Sarabun',sans-serif;font-size:.83rem;font-weight:700;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.adm-btn.green{background:linear-gradient(135deg,var(--g600),var(--g500));color:#fff;box-shadow:0 3px 10px rgba(109,40,217,.2)}.adm-btn.green:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(109,40,217,.3)}
.adm-btn.outline{background:#fff;border:1.5px solid var(--s200);color:var(--s700)}.adm-btn.outline:hover{background:var(--s50);border-color:var(--s300)}
.adm-btn.outline-g{background:#fff;border:1.5px solid var(--g300);color:var(--g700)}.adm-btn.outline-g:hover{background:var(--g50)}
.adm-btn.red{background:#fef2f2;border:1.5px solid #fecaca;color:#dc2626}.adm-btn.red:hover{background:#fee2e2}
.adm-btn.red-s{background:linear-gradient(135deg,#f87171,#dc2626);color:#fff;border:none;box-shadow:0 3px 10px rgba(220,38,38,.2)}.adm-btn.red-s:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(220,38,38,.3)}
.adm-btn.sm{padding:.38rem .78rem;font-size:.76rem;border-radius:8px}

/* Inputs */
.adm-input{width:100%;padding:.6rem .9rem;border:1.5px solid var(--s200);border-radius:10px;font-family:'Sarabun',sans-serif;font-size:.85rem;outline:none;background:#fff;color:var(--s900);transition:all .2s}
.adm-input:focus{border-color:var(--g500);box-shadow:0 0 0 3px rgba(124,58,237,.1);background:#fafffe}
select.adm-input{cursor:pointer}
.adm-lbl{font-size:.74rem;font-weight:700;color:var(--s600);display:block;margin-bottom:.3rem}

/* Settings grid */
.adm-set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.adm-set-card{background:#fff;border-radius:16px;border:1.5px solid var(--border-card);padding:1.2rem;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:.85rem;transition:box-shadow .2s}
.adm-set-card:hover{box-shadow:0 6px 24px rgba(109,40,217,.09)}
.adm-set-hd{display:flex;align-items:center;gap:.7rem}
.adm-set-ic{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--g50),var(--g100));border:1.5px solid var(--g200);display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0}
.adm-set-title{font-size:.87rem;font-weight:800;color:var(--s800)}
.adm-set-sub{font-size:.72rem;color:var(--s400);line-height:1.55;margin-top:-.3rem}

/* Misc */
.adm-info-row{display:flex;align-items:center;justify-content:space-between;padding:.42rem 0;border-bottom:1px solid var(--s100);font-size:.79rem;color:var(--s600)}
.adm-info-row:last-child{border:none}
.adm-badge-g{background:var(--g50);color:var(--g700);padding:.18rem .62rem;border-radius:100px;font-size:.68rem;font-weight:800;border:1px solid var(--g200)}
.adm-badge-b{background:#eff6ff;color:#1d4ed8;padding:.18rem .62rem;border-radius:100px;font-size:.68rem;font-weight:800;border:1px solid #bfdbfe}
.adm-warn{background:#fffbeb;border:1.5px solid #fde68a;border-radius:10px;padding:.6rem .9rem;font-size:.77rem;color:#92400e;line-height:1.6}
.adm-logo-drop{width:100%;aspect-ratio:16/7;border:2px dashed var(--g300);border-radius:12px;background:var(--g50);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;transition:all .2s;overflow:hidden;font-size:2rem}
.adm-logo-drop:hover{border-color:var(--g500);background:var(--g100)}
.adm-logo-drop.has-img{border-style:solid;background:#fff;padding:6px}
.adm-logo-drop img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}

/* Data grid */
.adm-data-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:1rem}
.adm-bk{background:#fff;border-radius:16px;border:1.5px solid var(--border-card);padding:1.2rem;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:.7rem;transition:box-shadow .2s}
.adm-bk:hover{box-shadow:0 6px 24px rgba(109,40,217,.09)}
.adm-bk-em{font-size:2rem}.adm-bk-title{font-size:.88rem;font-weight:800;color:var(--s800)}.adm-bk-sub{font-size:.72rem;color:var(--s400);line-height:1.55}
.adm-bk-acts{display:flex;flex-direction:column;gap:.45rem;margin-top:.2rem}
.adm-progress{height:5px;border-radius:3px;background:var(--s100);overflow:hidden;margin:.1rem 0}
.adm-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--g500),var(--g300));transition:width 1.2s cubic-bezier(.22,1,.36,1);width:0}

/* Logs */
.adm-log-ftrs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.85rem}
.adm-log-ftr{padding:.3rem .78rem;border-radius:8px;border:1.5px solid var(--s200);background:#fff;font-family:'Sarabun',sans-serif;font-size:.74rem;font-weight:700;cursor:pointer;transition:all .14s;color:var(--s500)}
.adm-log-ftr.on{background:linear-gradient(135deg,var(--g600),var(--g500));border-color:transparent;color:#fff;box-shadow:0 3px 10px rgba(109,40,217,.2)}
.adm-logs{display:flex;flex-direction:column;gap:.45rem;max-height:480px;overflow-y:auto;padding-right:.1rem}
.adm-logs::-webkit-scrollbar{width:3px}.adm-logs::-webkit-scrollbar-thumb{background:var(--g300);border-radius:2px}
.adm-log{display:flex;align-items:flex-start;gap:.8rem;padding:.78rem 1rem;background:#fff;border-radius:12px;border:1.5px solid var(--border-card);transition:border-color .15s;animation:admLogAnim .2s ease both}
@keyframes admLogAnim{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.adm-log:hover{border-color:var(--g300)}
.adm-log-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.adm-log-ic.li{background:var(--g50);border:1.5px solid var(--g200)}
.adm-log-ic.lo{background:#fef2f2;border:1.5px solid #fecaca}
.adm-log-ic.ad{background:#fffbeb;border:1.5px solid #fde68a}
.adm-log-ic.df{background:var(--s50);border:1.5px solid var(--s100)}
.adm-log-body{flex:1;min-width:0}
.adm-log-title{font-size:.83rem;font-weight:700;color:var(--s800)}
.adm-log-sub{font-size:.72rem;color:var(--s400);margin-top:.12rem}
.adm-log-time{font-size:.68rem;color:var(--s500);white-space:nowrap;flex-shrink:0;background:var(--s50);padding:.14rem .48rem;border-radius:6px;border:1px solid var(--s100);align-self:flex-start}

/* Modals */
.adm-modal-ov{display:none;position:fixed;inset:0;background:rgba(4,120,87,.12);backdrop-filter:blur(6px);z-index:3000;align-items:center;justify-content:center;padding:1rem}
.adm-modal-ov.open{display:flex;animation:admFadeIn .2s ease}
@keyframes admFadeIn{from{opacity:0}to{opacity:1}}
.adm-modal{background:#fff;border-radius:22px;width:min(500px,96vw);box-shadow:0 24px 60px rgba(0,0,0,.18),0 0 0 1px rgba(109,40,217,.08);overflow:hidden;animation:admSlide .25s cubic-bezier(.22,1,.36,1)}
@keyframes admSlide{from{transform:translateY(28px) scale(.97);opacity:.5}to{transform:translateY(0) scale(1);opacity:1}}
.adm-modal-hd{background:linear-gradient(135deg,var(--g800),var(--g600));padding:1.2rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.adm-modal-title{font-size:.95rem;font-weight:800;color:#fff;display:flex;align-items:center;gap:.5rem}
.adm-modal-x{background:rgba(255,255,255,.18);border:none;border-radius:50%;width:30px;height:30px;cursor:pointer;color:#fff;font-size:.95rem;display:flex;align-items:center;justify-content:center;transition:background .15s}
.adm-modal-x:hover{background:rgba(255,255,255,.32)}
.adm-modal-body{padding:1.5rem;display:flex;flex-direction:column;gap:.9rem}
.adm-modal-foot{padding:.8rem 1.5rem 1.3rem;display:flex;gap:.6rem}

/* Confirm */
.adm-cf-box{background:#fff;border-radius:20px;width:min(370px,96vw);padding:1.8rem;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.22);animation:admSlide .25s cubic-bezier(.22,1,.36,1)}
.adm-cf-icon{font-size:3rem;display:block;margin-bottom:.7rem;animation:admBounce .4s cubic-bezier(.22,1,.36,1) .1s both}
@keyframes admBounce{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.adm-cf-title{font-size:1.05rem;font-weight:800;color:var(--s900);margin-bottom:.35rem}
.adm-cf-msg{font-size:.83rem;color:var(--s500);line-height:1.7;margin-bottom:1.2rem}
.adm-cf-btns{display:flex;gap:.6rem}

/* Toast */
#adm-toast{position:fixed;bottom:1.8rem;left:50%;transform:translateX(-50%) translateY(16px);background:linear-gradient(135deg,var(--g900),var(--g700));color:#fff;padding:.68rem 1.4rem;border-radius:100px;font-family:'Sarabun',sans-serif;font-size:.87rem;font-weight:700;z-index:9999;opacity:0;transition:all .32s cubic-bezier(.22,1,.36,1);pointer-events:none;white-space:nowrap;display:flex;align-items:center;gap:.55rem;box-shadow:0 8px 28px rgba(109,40,217,.35),0 0 0 1.5px rgba(255,255,255,.1);max-width:88vw}
#adm-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Responsive */
@media(max-width:860px){.adm-layout{grid-template-columns:1fr}.adm-sidebar{position:static}.adm-nav{display:flex;flex-wrap:wrap;gap:.3rem;padding:.5rem}.adm-nav-item{width:auto;flex:1;min-width:90px;justify-content:center;font-size:.76rem;padding:.48rem .6rem}.adm-sidebar-hd{display:none}.adm-nav-sep,.adm-nav-count{display:none}}
@media(max-width:600px){.adm-kpi-row{grid-template-columns:repeat(2,1fr)}.adm-user-grid{grid-template-columns:1fr}.adm-set-grid,.adm-data-grid{grid-template-columns:1fr}.adm-hero-chips{display:none}.adm-hero-title{font-size:1.2rem}.adm-kpi-num{font-size:1.2rem}}

.staff-main-layout{display:flex;gap:1.2rem;align-items:flex-start}
.staff-view-btn.on{background:var(--g600);border-color:var(--g600);color:#fff;box-shadow:0 3px 10px rgba(109,40,217,.3)}

/* ── CARD GRID (default) ── */
.sgrid2{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1rem;
}
.scard2{
  background:#fff;border-radius:18px;
  border:1px solid var(--s100);
  overflow:hidden;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  cursor:default;
  position:relative;
  display:flex;flex-direction:column;
}
.scard2:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 48px rgba(109,40,217,.13);
  border-color:var(--g300);
}
/* top colored strip */
.scard2-strip{
  height:6px;
  background:linear-gradient(90deg,#7c3aed,#a78bfa,#6d28d9,#c4b5fd,#7c3aed);
  background-size:200% 100%;
  animation:staffBarFlow 2s linear infinite;
}
.scard2-strip.radio{background:linear-gradient(90deg,#7c3aed,#a78bfa,#6d28d9,#c4b5fd,#7c3aed);background-size:200% 100%;animation:staffBarFlow 2s linear infinite;}
.scard2-strip.adm{background:linear-gradient(90deg,#7c3aed,#a78bfa,#6d28d9,#c4b5fd,#7c3aed);background-size:200% 100%;animation:staffBarFlow 2s linear infinite;}

.scard2-body{padding:1.4rem 1.2rem 1rem;flex:1;}
/* avatar circle */
.scard2-av-wrap{display:flex;align-items:flex-end;gap:.9rem;margin-bottom:.9rem}
.scard2-av{
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:900;color:#fff;
  flex-shrink:0;font-family:'Noto Serif Thai',serif;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  position:relative;overflow:hidden;
}
.scard2-av::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
}
.scard2-av.c1{background:linear-gradient(145deg,#7c3aed,#4c1d95)}
.scard2-av.c2{background:linear-gradient(145deg,#7c3aed,#4c1d95)}
.scard2-av.c3{background:linear-gradient(145deg,#7c3aed,#4c1d95)}
.scard2-av.c4{background:linear-gradient(145deg,#7c3aed,#4c1d95)}
.scard2-av.c5{background:linear-gradient(145deg,#7c3aed,#4c1d95)}
.scard2-av.c6{background:linear-gradient(145deg,#7c3aed,#4c1d95)}
.scard2-av.c7{background:linear-gradient(145deg,#7c3aed,#4c1d95)}
.scard2-av.c8{background:linear-gradient(145deg,#7c3aed,#4c1d95)}
/* online dot */
.scard2-av-dot{
  width:11px;height:11px;border-radius:50%;
  background:#22c55e;border:2px solid #fff;
  position:absolute;bottom:1px;right:1px;
}
.scard2-id{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--g50);border:1px solid var(--g200);
  border-radius:6px;padding:2px 8px;
  font-size:.68rem;font-weight:700;color:var(--g700);
  font-family:monospace;
  margin-bottom:.5rem;
}
.scard2-name{
  font-weight:800;font-size:.95rem;color:var(--s900);
  line-height:1.3;margin-bottom:.2rem;
}
.scard2-pos{
  font-size:.75rem;color:var(--s500);font-weight:500;
  line-height:1.4;
}
.scard2-tel{
  font-size:.75rem;color:var(--g700);font-weight:600;
  margin-top:.3rem;display:flex;align-items:center;gap:3px;
}
.scard2-footer{
  display:flex;gap:.55rem;padding:.85rem 1.2rem 1rem;
  border-top:1px solid var(--s100);margin-top:auto;
  width:100%;box-sizing:border-box;
}
.scard2-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  padding:.45rem .5rem;border-radius:999px;font-family:'Sarabun',sans-serif;
  font-size:.8rem;font-weight:700;cursor:pointer;transition:all .18s;
  min-width:80px;box-sizing:border-box;border:none;
}
.scard2-btn:not(.del){
  background:#ede9fe;color:#6d28d9;
}
.scard2-btn:not(.del):hover{background:#ddd6fe;}
.scard2-btn.del{
  background:#fff1f2;color:#e11d48;
}
.scard2-btn.del:hover{background:#ffe4e6;}

/* srow2 list-view */
.srow2{
  display:flex;align-items:center;gap:1rem;
  background:#fff;border:1px solid var(--s100);border-radius:14px;
  padding:.85rem 1.2rem;margin-bottom:.55rem;
  animation:fadeUp .3s ease both;
  transition:box-shadow .2s,border-color .2s;
}
.srow2:hover{border-color:var(--g300);box-shadow:0 4px 16px rgba(109,40,217,.08);}
.srow2-num{
  font-size:.75rem;font-weight:700;color:var(--s300);
  min-width:20px;text-align:center;
}
.srow2-av{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(145deg,#7c3aed,#4c1d95);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:800;color:#fff;
  font-family:'Noto Serif Thai',serif;
}
.srow2-info{flex:1;min-width:0;}
.srow2-name{font-size:.9rem;font-weight:700;color:var(--s900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.srow2-pos{font-size:.75rem;color:var(--s500);margin-top:2px;}
.srow2-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:600;
  background:#ede9fe;color:#6d28d9;white-space:nowrap;flex-shrink:0;
}
.srow2-actions{display:flex;gap:.45rem;flex-shrink:0;}

/* srow2 list-view buttons */
.srow2-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.3rem;
  padding:.4rem .85rem;border-radius:999px;font-family:'Sarabun',sans-serif;
  font-size:.78rem;font-weight:700;cursor:pointer;transition:all .18s;border:none;
}
.srow2-btn:not(.del){background:#ede9fe;color:#6d28d9;}
.srow2-btn:not(.del):hover{background:#ddd6fe;}
.srow2-btn.del{background:#fff1f2;color:#e11d48;}
.srow2-btn.del:hover{background:#ffe4e6;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ═══ MODAL ═══ */
.mover{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.mover.show{display:flex}
.modal{background:#fff;border-radius:20px;width:480px;max-width:95vw;box-shadow:0 24px 60px rgba(0,0,0,.2);overflow:hidden;animation:mup .3s ease both}
@keyframes mup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.mh{padding:1.2rem 1.5rem;border-bottom:1px solid var(--s100);display:flex;align-items:center;justify-content:space-between}
.mh h3{font-family:'Noto Serif Thai',serif;font-weight:700;font-size:1rem;color:var(--s900)}
.mclose{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--s400);padding:2px;transition:color .2s}
.mclose:hover{color:var(--s900)}
.mb{padding:1.5rem}
.mfg{margin-bottom:1rem}
.mfg label{display:block;font-size:.78rem;font-weight:600;color:var(--s700);margin-bottom:.4rem}
.mfg input,.mfg select,.mfg textarea{width:100%;padding:.65rem 1rem;border:1.5px solid var(--s200);border-radius:9px;font-family:'Sarabun',sans-serif;font-size:.85rem;color:var(--s900);background:var(--s50);outline:none;transition:all .2s}
.mfg input:focus,.mfg select:focus,.mfg textarea:focus{border-color:var(--g400);background:#fff}
.mfg textarea{resize:vertical;min-height:72px}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.mf{padding:1rem 1.5rem;border-top:1px solid var(--s100);display:flex;justify-content:flex-end;gap:.6rem}
.mbtn{padding:.6rem 1.4rem;border-radius:9px;font-family:'Sarabun',sans-serif;font-size:.83rem;font-weight:600;cursor:pointer;transition:all .2s;border:none}
.mbtn.can{background:var(--s100);color:var(--s600)}.mbtn.can:hover{background:var(--s200)}
.mbtn.sav{background:var(--g600);color:#fff}.mbtn.sav:hover{background:var(--g700)}
.mbtn.dan{background:var(--red);color:#fff}.mbtn.dan:hover{opacity:.85}

/* TOAST */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;background:var(--s900);color:#fff;padding:.75rem 1.2rem;border-radius:12px;font-size:.83rem;font-weight:500;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.2);transform:translateY(80px);opacity:0;transition:all .35s cubic-bezier(.34,1.56,.64,1)}
.toast.show{transform:translateY(0);opacity:1}

@media(max-width:1000px){.stats-row{grid-template-columns:1fr 1fr}.dash-row.c2,.dash-row.c3{grid-template-columns:1fr}.content{padding:1rem}}
@media(max-width:640px){.stats-row{grid-template-columns:1fr 1fr}.topbar{padding:0 .8rem}.tnav span{display:none}.tb-name{display:none}}

/* ═══ RESPONSIVE — Mobile / Tablet / Desktop ═══ */

/* Hamburger button */
.ham-btn{display:none;flex-direction:column;justify-content:center;align-items:center;width:38px;height:38px;border:none;background:var(--g50);border-radius:9px;cursor:pointer;gap:5px;flex-shrink:0;transition:all .2s}
.ham-btn:hover{background:var(--g100)}
.ham-line{width:18px;height:2px;background:var(--g700);border-radius:2px;transition:all .3s}

/* Mobile drawer overlay */
.mob-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:199;backdrop-filter:blur(2px)}
.mob-nav-overlay.open{display:block}

/* Mobile nav drawer */
.mob-nav{position:fixed;top:0;left:-280px;width:280px;height:100vh;height:calc(var(--vh,1vh)*100);background:#fff;z-index:200;display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,0,0,.12);transition:left .3s cubic-bezier(.22,1,.36,1);overflow-y:auto}
.mob-nav.open{left:0}
.mob-nav-head{background:linear-gradient(135deg,#3b0764,#7c3aed);padding:1.4rem 1.2rem;display:flex;align-items:center;gap:10px}
.mob-nav-logo{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.mob-nav-title{font-family:'Noto Serif Thai',serif;font-size:.9rem;font-weight:700;color:#fff;line-height:1.3}
.mob-nav-title span{display:block;font-family:'Sarabun',sans-serif;font-size:.68rem;color:rgba(255,255,255,.75);font-weight:400}
.mob-nav-body{padding:.8rem .6rem;flex:1}
.mob-nav-item{display:flex;align-items:center;gap:10px;padding:.75rem 1rem;border-radius:10px;font-size:.88rem;color:var(--s600);cursor:pointer;border:none;background:none;font-family:'Sarabun',sans-serif;width:100%;text-align:left;transition:all .2s;font-weight:500}
.mob-nav-item:hover{background:var(--g50);color:var(--g700)}
.mob-nav-item.on{background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#4c1d95;font-weight:700}
.mob-nav-foot{padding:.8rem 1.2rem;border-top:1px solid var(--s100)}
.mob-nav-user{display:flex;align-items:center;gap:10px;margin-bottom:.7rem}
.mob-nav-uav{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#3b0764);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#fff;font-weight:700;flex-shrink:0}
.mob-nav-uname{font-size:.82rem;font-weight:700;color:var(--s700)}
.mob-nav-logout{width:100%;padding:.6rem;border-radius:9px;border:1.5px solid #fecaca;background:#fff;color:var(--red);font-family:'Sarabun',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s}
.mob-nav-logout:hover{background:var(--red50)}

/* ── Tablet (768px–1024px) ── */
@media(max-width:1024px){
  .dash-body{grid-template-columns:1fr}
  .dash-body-side{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .dash-metric-row{grid-template-columns:repeat(2,1fr)}
  .ref-layout{grid-template-columns:1fr}
  .consent-layout{grid-template-columns:1fr}
  .consent-panel{position:static}
  .staff-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── Mobile (max 767px) ── */
@media(max-width:767px){
  /* topbar */
  .topbar{padding:0 1rem;height:56px}
  .tb-nav{display:none}
  .tb-name{display:none}
  .tb-div{display:none}
  .tb-user span{display:none}
  .btnout{display:none}
  .ham-btn{display:flex}

  /* content */
  .content{padding:.75rem}

  /* dashboard banner — stack vertically */
  .dash-banner{
    grid-template-columns:1fr;
    border-radius:16px;
    margin-bottom:1rem;
  }
  .dash-banner-left{padding:1.2rem 1.2rem .9rem}
  .dash-banner-eyebrow{font-size:.65rem;padding:.18rem .7rem}
  .dash-banner-title{font-size:1.35rem}
  .dash-banner-right{
    border-radius:0 0 14px 14px;
    flex-direction:row;
    justify-content:space-between;
    padding:.9rem 1.2rem;
    min-width:unset;
  }
  .dash-banner-clock{font-size:1.8rem}
  .dash-banner-clock-lbl{font-size:.63rem;text-align:right;max-width:120px}

  /* metric cards */
  .dash-metric-row{grid-template-columns:repeat(2,1fr);gap:.6rem;margin-bottom:.9rem}
  .dmc{padding:.9rem 1rem}
  .dmc-num{font-size:1.55rem}
  .dmc-label{font-size:.72rem}

  /* dashboard body */
  .dash-body{grid-template-columns:1fr}
  .dash-body-side{display:flex;flex-direction:column}

  /* stats */
  .stats-row{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .sc-num{font-size:1.5rem}
  .stats-main-grid{grid-template-columns:1fr}
  .stats-summary-grid{grid-template-columns:repeat(2,1fr);}
  .stats-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .stats-table-wrap table{min-width:700px}
  .stats-filter-row{flex-wrap:wrap;gap:.5rem}
  .stats-filter-row select,.stats-filter-row input{flex:1;min-width:120px}

  /* referral */
  .ref-layout{grid-template-columns:1fr;gap:1rem}
  .ref-panel{position:static}
  .exam-grid{grid-template-columns:repeat(2,1fr)}

  /* consent */
  .consent-layout{grid-template-columns:1fr;gap:1rem}
  .consent-panel{position:static}

  /* staff */
  .staff-grid{grid-template-columns:1fr}
  .staff-card{flex-direction:row;gap:.8rem;align-items:center;text-align:left}
  .staff-card-photo{width:54px;height:54px;font-size:1.1rem}
  .staff-card-actions{flex-direction:row;justify-content:flex-start;gap:.5rem;margin-top:.6rem}

  /* modal */
  .modal-box{width:calc(100vw - 2rem);max-height:90vh;overflow-y:auto;margin:1rem}
  #doc-modal-bg .modal-box{width:calc(100vw - 1rem);padding:.8rem}

  /* page title */
  .pg-title{font-size:1.2rem}

  /* toast */
  .toast{right:.8rem;left:.8rem;bottom:1rem}
}

/* ── Small mobile (max 400px) ── */
@media(max-width:400px){
  .dash-metric-row{grid-template-columns:1fr 1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .exam-grid{grid-template-columns:1fr 1fr}
  .tnav{padding:.3rem .5rem;font-size:.75rem}
}

/* ═══ CONSENT ═══ */
.consent-layout{display:grid;grid-template-columns:340px 1fr;gap:1.5rem;align-items:start}
.consent-panel{background:#fff;border-radius:16px;border:1px solid var(--s100);overflow:visible;position:sticky;top:1rem}
.consent-panel-hd{background:linear-gradient(135deg,var(--g700),var(--g500));padding:1rem 1.2rem;display:flex;align-items:center;gap:10px}
.consent-panel-hd h3{font-family:'Noto Serif Thai',serif;font-size:.95rem;font-weight:700;color:#fff}
.consent-panel-ic{width:32px;height:32px;background:rgba(255,255,255,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem}
.consent-section{padding:1rem 1.2rem;border-bottom:1px solid var(--s100)}
.consent-section:last-child{border:none}
.consent-sec-hd{display:flex;align-items:center;gap:7px;margin-bottom:.85rem}
.consent-sec-ic{width:24px;height:24px;background:var(--g50);border-radius:6px;border:1px solid var(--g200);display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0}
.consent-sec-lbl{font-size:.7rem;font-weight:800;color:var(--g700);text-transform:uppercase;letter-spacing:.07em}
.consent-fg{margin-bottom:.85rem}
.consent-fg:last-child{margin-bottom:0}
.consent-fg label{display:block;font-size:.77rem;font-weight:700;color:var(--s600);margin-bottom:.35rem}
.consent-fg input,.consent-fg select,.consent-fg textarea{width:100%;padding:.6rem .85rem;border:1.5px solid var(--s200);border-radius:8px;font-family:'Sarabun',sans-serif;font-size:.85rem;color:var(--s900);background:var(--s50);outline:none;transition:all .2s}
.consent-fg input:focus,.consent-fg select:focus,.consent-fg textarea:focus{border-color:var(--g500);background:#fff;box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.consent-fg textarea{resize:vertical;min-height:70px;line-height:1.6}
.consent-row2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.consent-btns{display:flex;gap:.6rem;padding:1rem 1.2rem;border-top:1px solid var(--s100);background:var(--s50)}
.consent-btn{flex:1;padding:.65rem;border-radius:10px;border:none;font-family:'Sarabun',sans-serif;font-size:.84rem;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}
.consent-btn.clr{background:#fff;border:1.5px solid var(--s200);color:var(--s600)}.consent-btn.clr:hover{background:var(--s100)}
.consent-btn.prt{background:linear-gradient(135deg,var(--g600),var(--g500));color:#fff;box-shadow:0 4px 12px rgba(109,40,217,.2)}.consent-btn.prt:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(109,40,217,.3)}

/* ═══ STATS PAGE ═══ */
.stats-summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;margin-bottom:1.8rem}

.stats-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.2rem}
.stats-table-wrap{overflow-x:auto}
.stats-table{width:100%;border-collapse:collapse;font-size:.83rem}
.stats-table th{background:var(--g50);color:var(--g800);font-weight:700;padding:.6rem .9rem;text-align:left;border-bottom:2px solid var(--g200);white-space:nowrap}
.stats-table td{padding:.55rem .9rem;border-bottom:1px solid var(--s100);color:var(--s700)}
.stats-table tr:last-child td{border-bottom:none}
.stats-table tr:hover td{background:var(--s50)}
.stats-badge{display:inline-block;padding:.15rem .55rem;border-radius:20px;font-size:.72rem;font-weight:700}
.stats-badge.g{background:var(--g100);color:var(--g700)}
.stats-badge.b{background:var(--blue50);color:var(--blue)}
.stats-badge.a{background:var(--amber50);color:var(--amber)}
.stats-badge.p{background:var(--purple50);color:var(--purple)}
.stats-badge.r{background:var(--red50);color:var(--red)}

.log-entry{display:flex;align-items:flex-start;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--s100)}
.log-entry:last-child{border:none}
.log-dot{width:8px;height:8px;border-radius:50%;background:var(--g500);flex-shrink:0;margin-top:5px}
.log-dot.ref{background:var(--blue)}
.log-dot.con{background:var(--purple)}
.log-time{font-size:.72rem;color:var(--s400);white-space:nowrap}
.log-text{font-size:.82rem;color:var(--s700);line-height:1.5}

@media(max-width:900px){.stats-summary-grid{grid-template-columns:repeat(3,1fr)}.stats-main-grid{grid-template-columns:1fr}}

/* custom dropdown */
.cdd{position:relative;width:100%}
.cdd-sel{width:100%;padding:.6rem .85rem;border:1.5px solid var(--s200);border-radius:8px;font-family:'Sarabun',sans-serif;font-size:.85rem;color:var(--s900);background:var(--s50);cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none}
.cdd-sel:after{content:'▾';font-size:.8rem;color:var(--s400);transition:.2s}
.cdd-sel.open:after{transform:rotate(180deg)}
.cdd-list{position:absolute;bottom:calc(100% + 4px);top:auto;left:0;right:0;background:#fff;border:1.5px solid var(--s200);border-radius:10px;box-shadow:0 -8px 24px rgba(0,0,0,.12);z-index:9999;max-height:220px;overflow-y:auto;display:none}
.cdd-list.open{display:block}
.cdd-item{padding:.55rem .85rem;font-size:.85rem;color:var(--s700);cursor:pointer;font-family:'Sarabun',sans-serif}
.cdd-item:hover{background:var(--g50);color:var(--g700)}
.cdd-item.selected{background:var(--g100);color:var(--g800);font-weight:600}
/* image modal */
.img-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .2s ease}
.img-modal{background:#fff;border-radius:20px;width:min(820px,96vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.img-modal-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.3rem;border-bottom:1px solid var(--s100)}
.img-modal-title{font-weight:700;font-size:1rem;color:var(--s900)}
.img-modal-close{background:var(--s100);border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}
.img-modal-body{padding:1.2rem;overflow-y:auto;flex:1}
.img-upload-zone{border:2px dashed var(--s300);border-radius:12px;padding:2rem;text-align:center;cursor:pointer;transition:.2s;margin-bottom:1rem}
.img-upload-zone:hover{border-color:var(--g500);background:var(--g50)}
.img-upload-zone p{color:var(--s400);font-size:.85rem;margin-top:.4rem}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;margin-top:.75rem}
.img-thumb{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--s100);cursor:pointer}
.img-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.2s}
.img-thumb:hover img{opacity:.85}
.img-thumb-del{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:50%;width:22px;height:22px;font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.img-thumb-name{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:.65rem;padding:.3rem .4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.img-fullview{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:3000;display:flex;align-items:center;justify-content:center;padding:1rem}
.img-fullview img{max-width:100%;max-height:90vh;border-radius:8px;object-fit:contain}
.img-fullview-close{position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:1.2rem;cursor:pointer}
.img-count-badge{display:inline-flex;align-items:center;gap:3px;background:var(--g100);color:var(--g700);border-radius:20px;padding:.1rem .45rem;font-size:.7rem;font-weight:700;cursor:pointer;margin-left:4px}
.img-count-badge:hover{background:var(--g200)}
/* ═══ STATS PAGE ═══ */
.stats-summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;margin-bottom:1.8rem}

/* ── Beautiful stat-box redesign ── */
.stat-box{
  position:relative;overflow:hidden;
  background:#fff;border-radius:20px;
  border:1.5px solid rgba(109,40,217,.1);
  padding:1.4rem 1.5rem 1.2rem;
  display:flex;flex-direction:column;gap:.25rem;
  box-shadow:0 4px 20px rgba(109,40,217,.07);
}
/* shimmer bar at top */
.stat-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#7c3aed,#a78bfa,#c084fc,#a78bfa,#7c3aed);
  border-radius:20px 20px 0 0;
}
/* decorative circle */
.stat-box::after{
  content:'';position:absolute;top:-28px;right:-28px;
  width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(167,139,250,.18),transparent 70%);
  pointer-events:none;
}
/* all variants unified to purple */
.stat-box.blue::before,.stat-box.purple::before,.stat-box.amber::before{background:linear-gradient(90deg,#7c3aed,#a78bfa,#c084fc,#a78bfa,#7c3aed)}
.stat-box.blue::after,.stat-box.purple::after,.stat-box.amber::after{background:radial-gradient(circle,rgba(167,139,250,.18),transparent 70%)}

.stat-box-ic{
  font-size:1.9rem;margin-bottom:.35rem;
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,rgba(167,139,250,.15),rgba(129,140,248,.1));
  box-shadow:0 2px 8px rgba(109,40,217,.1);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.stat-box.blue .stat-box-ic,.stat-box.purple .stat-box-ic,.stat-box.amber .stat-box-ic{background:linear-gradient(135deg,rgba(167,139,250,.15),rgba(129,140,248,.1))}

.stat-box-num{
  font-size:2.4rem;font-weight:900;
  background:linear-gradient(135deg,#4c1d95,#6d28d9);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;line-height:1.05;letter-spacing:-.02em;
}
.stat-box.blue .stat-box-num,.stat-box.purple .stat-box-num,.stat-box.amber .stat-box-num{background:linear-gradient(135deg,#4c1d95,#6d28d9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.stat-box-lbl{font-size:.8rem;color:var(--s400);font-weight:700;letter-spacing:.03em;margin-top:.1rem}

.stats-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.2rem}
.stats-table-wrap{overflow-x:auto}
.stats-table{width:100%;border-collapse:collapse;font-size:.83rem}
.stats-table th{background:var(--g50);color:var(--g800);font-weight:700;padding:.6rem .9rem;text-align:left;border-bottom:2px solid var(--g200);white-space:nowrap}
.stats-table td{padding:.55rem .9rem;border-bottom:1px solid var(--s100);color:var(--s700)}
.stats-table tr:last-child td{border-bottom:none}
.stats-table tr:hover td{background:var(--s50)}
.stats-badge{display:inline-block;padding:.15rem .55rem;border-radius:20px;font-size:.72rem;font-weight:700}
.stats-badge.g{background:var(--g100);color:var(--g700)}
.stats-badge.b{background:var(--blue50);color:var(--blue)}
.stats-badge.p{background:var(--purple50);color:var(--purple)}
@media(max-width:900px){.stats-summary-grid{grid-template-columns:repeat(3,1fr)}.stats-main-grid{grid-template-columns:1fr}}
/* A4 consent preview */
.consent-preview{display:flex;flex-direction:column;gap:.85rem;align-items:center}
.consent-prev-badge{background:var(--g50);border:1px solid var(--g200);color:var(--g700);font-size:.75rem;font-weight:600;padding:.5rem 1rem;border-radius:10px;text-align:center}
.consent-a4-wrap{background:#d1d5db;border-radius:8px;padding:20px;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;}
#us-appt-a4-wrap{overflow:hidden;}
.consent-a4-paper{width:210mm;height:297mm;background:#fff;margin:0 auto;box-shadow:0 4px 32px rgba(0,0,0,.25);font-family:'Sarabun',sans-serif;color:#000;overflow:hidden;position:relative;}
#us-a4{height:297mm;overflow:hidden;}

@media(max-width:767px){
  /* ซ่อน A4 preview บนมือถือ */
  .ref-preview, .consent-preview { display:none !important; }
  /* form เต็มหน้าจอ */
  .ref-layout, .consent-layout { grid-template-columns:1fr !important; }
  .ref-panel, .consent-panel { position:static !important; width:100% !important; }
}

@media(max-width:1000px){.consent-layout{grid-template-columns:1fr}}

/* ═══ REFERRAL ═══ */
.ref-layout{display:grid;grid-template-columns:300px 1fr;gap:1.5rem;align-items:start}
.ref-panel{background:#fff;border-radius:16px;border:1px solid var(--s100);overflow:visible;position:sticky;top:1rem}
.ref-panel-hd{background:linear-gradient(135deg,var(--g700),var(--g500));padding:1rem 1.2rem;display:flex;align-items:center;gap:10px}
.ref-panel-hd h3{font-family:'Noto Serif Thai',serif;font-size:.95rem;font-weight:700;color:#fff}
.ref-panel-ic{width:32px;height:32px;background:rgba(255,255,255,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem}
.ref-section{padding:1rem 1.2rem;border-bottom:1px solid var(--s100)}
.ref-section:last-child{border:none}
.ref-sec-hd{display:flex;align-items:center;gap:7px;margin-bottom:.85rem}
.ref-sec-ic{width:24px;height:24px;background:var(--g50);border-radius:6px;border:1px solid var(--g200);display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0}
.ref-sec-lbl{font-size:.7rem;font-weight:800;color:var(--g700);text-transform:uppercase;letter-spacing:.07em}
.ref-fg{margin-bottom:.85rem}
.ref-fg:last-child{margin-bottom:0}
.ref-fg label{display:block;font-size:.77rem;font-weight:700;color:var(--s600);margin-bottom:.35rem}
.ref-fg input,.ref-fg select,.ref-fg textarea{width:100%;padding:.6rem .85rem;border:1.5px solid var(--s200);border-radius:8px;font-family:'Sarabun',sans-serif;font-size:.85rem;color:var(--s900);background:var(--s50);outline:none;transition:all .2s}
.ref-fg input:focus,.ref-fg select:focus,.ref-fg textarea:focus{border-color:var(--g500);background:#fff;box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.ref-fg input[readonly]{background:var(--g50);color:var(--g700);font-weight:700;cursor:default;text-align:center}
.ref-ro{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.exam-dd{position:relative}
.exam-trigger{display:flex;align-items:center;justify-content:space-between;padding:.6rem .85rem;background:#fff;border:1.5px solid var(--s200);border-radius:8px;cursor:pointer;font-size:.82rem;color:var(--s700);user-select:none;transition:all .2s;min-height:38px}
.exam-trigger:hover,.exam-trigger.open{border-color:var(--g500)}
.exam-trigger.open{border-radius:8px 8px 0 0}
.exam-tags{display:flex;flex-wrap:wrap;gap:3px;flex:1}
.exam-placeholder{color:var(--s400);font-size:.82rem}
.exam-arr{font-size:.6rem;color:var(--s400);transition:transform .2s;flex-shrink:0;margin-left:4px}
.exam-trigger.open .exam-arr{transform:rotate(180deg)}
.exam-etag{background:var(--g600);color:#fff;border-radius:4px;padding:2px 7px;font-size:.7rem;font-weight:700}
.exam-opts{display:none;flex-direction:column;border:1.5px solid var(--g500);border-top:none;border-radius:0 0 8px 8px;background:#fff;box-shadow:0 6px 20px rgba(109,40,217,.15);z-index:50;position:relative}
.exam-opts.open{display:flex}
.exam-opt{display:flex;align-items:center;gap:10px;padding:.6rem 1rem;cursor:pointer;font-size:.85rem;color:var(--s700);border-bottom:1px solid var(--s100);transition:background .15s}
.exam-opt:last-child{border:none}
.exam-opt:hover{background:var(--g50)}
.exam-opt.on{background:var(--g50);color:var(--g700);font-weight:700}
.exam-chk{width:16px;height:16px;border:2px solid var(--s300);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0;transition:all .15s}
.exam-opt.on .exam-chk{background:#000;border-color:#000;color:#fff}
.ref-oth{display:none;margin-top:.5rem}
.ref-btns{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:1rem 1.2rem;border-top:1px solid var(--s100)}
.ref-btn{padding:.65rem;border-radius:9px;font-family:'Sarabun',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s}
.ref-btn.clr{background:var(--s100);color:var(--s600)}.ref-btn.clr:hover{background:var(--s200)}
.ref-btn.prt{background:linear-gradient(135deg,var(--g600),var(--g500));color:#fff;box-shadow:0 4px 12px rgba(109,40,217,.25)}.ref-btn.prt:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(109,40,217,.35)}

/* A4 Preview */
.ref-preview{display:flex;flex-direction:column;gap:.85rem;align-items:center}
.prev-badge{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--s200);border-radius:100px;padding:.35rem 1rem;font-size:.75rem;font-weight:600;color:var(--g700);align-self:center}
.a4-wrap{background:#d1d5db;border-radius:8px;padding:20px;display:flex;align-items:flex-start;justify-content:center;}
#r-a4{width:210mm;min-height:160mm;background:#fff;box-shadow:0 4px 32px rgba(0,0,0,.25);display:flex;flex-direction:column;font-family:'Sarabun',sans-serif;overflow:hidden;}
#r-a4 div, #r-a4 span, #r-a4 p{color:#000;font-family:'Sarabun',sans-serif;}
/* ล้าง class เก่าที่อาจมีพื้นเขียว */
#r-a4 .a4-rh,#r-a4 .a4-rsub,#r-a4 .a4-ft,#r-a4 .a4-sn,#r-a4 .a4-exam-hd{background:#fff !important;color:#000 !important;}
#r-a4 .a4-ei.on .a4-bx{background:#fff !important;border-color:#444 !important;color:#000 !important;}

/* Inside A4 document */
.a4-hd{text-align:center;padding:10px 10px 6px;border-bottom:2px solid #000}
.a4-hd-title{font-size:.72rem;font-weight:900;color:#000;line-height:1.4;font-family:'Noto Serif Thai',serif}
.a4-hd-sub{font-size:.53rem;color:#000;margin-top:2px}
.a4-body{display:grid;grid-template-columns:1fr 1fr;flex:1}
.a4-left{border-right:1px solid #999;display:flex;flex-direction:column;padding:4px 0}
.a4-right{display:flex;flex-direction:column}
.a4-irow{display:flex;align-items:flex-end;padding:2px 7px;gap:4px;border-bottom:1px solid #ccc;margin:1px 5px}
.a4-ilbl{font-size:.5rem;font-weight:700;color:#000;white-space:nowrap;flex-shrink:0;padding-bottom:2px}
.a4-ival{font-size:.6rem;font-weight:700;color:#000;flex:1;padding-bottom:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a4-plbl{font-size:.5rem;color:#000;padding:3px 7px 0;font-weight:600}
.a4-pval{margin:1px 7px 3px;border-bottom:1px solid #000;min-height:13px;font-size:.6rem;font-weight:700;color:#000;padding:1px 0;text-align:center}
.a4-exam-hd{background:#000;color:#fff;font-weight:800;padding:2px 7px;font-size:.54rem;margin-top:3px}
.a4-exam-grid{display:grid;grid-template-columns:1fr 1fr;padding:3px 7px;gap:1px}
.a4-ei{display:flex;align-items:center;gap:4px;font-size:.54rem;padding:1px 0;color:#000}
.a4-bx{width:9px;height:9px;border:1.5px solid #666;border-radius:1px;display:flex;align-items:center;justify-content:center;font-size:7px;flex-shrink:0}
.a4-ei.on .a4-bx{background:#fff;border-color:#444;color:#000;font-weight:900}
.a4-eo{padding:1px 7px 3px;display:flex;align-items:flex-end;gap:3px;font-size:.52rem}
.a4-eo-line{flex:1;border-bottom:1px solid #ccc;min-height:11px;font-weight:700;color:#000;font-size:.55rem}
.a4-sender{margin:4px 5px;border:1px solid #999;border-radius:2px;padding:4px;text-align:center}
.a4-sender-lbl{font-size:.5rem;color:#000;font-weight:600}
.a4-sender-val{font-size:.62rem;font-weight:900;color:#000;margin:2px 0}
.a4-sender-sub{font-size:.48rem;color:#000}
.a4-rh{background:#000;color:#fff;font-weight:800;padding:3px 8px;font-size:.56rem}
.a4-rsub{font-size:.48rem;color:#fff;background:#444;padding:2px 8px}
.a4-steps{padding:4px 8px;display:flex;flex-direction:column;gap:3px;flex:1}
.a4-step{display:flex;gap:5px;align-items:flex-start}
.a4-sn{width:13px;height:13px;background:#000;color:#fff;border-radius:50%;font-size:.5rem;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.a4-st{font-size:.53rem;color:#000;line-height:1.4;font-weight:500}
.a4-ft{background:#f5f5f5;border-top:1px solid #bbb;padding:4px 8px;font-size:.5rem;color:#000;font-weight:600;text-align:center}
}
/* ══ QC REPEAT RATE ══ */
/* ═══ QC PAGE ═══ */
#pg-qc{padding:0!important;}
#pg-qc.on{
  display:flex!important;
  flex-direction:column!important;
  flex:1!important;
  overflow:hidden!important;
  min-height:0!important;
}
#pg-qc .qc-body{
  display:flex;
  flex:1;
  min-height:0;
  overflow:hidden;
  position:relative;
}

/* ── Sidebar / Drawer ── */
#pg-qc .qc-drawer{
  width:264px;flex-shrink:0;
  background:#fff;
  border-right:1px solid #ede9fe;
  overflow-y:auto;display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  position:relative;z-index:10;
}
#pg-qc .qc-drawer::before{display:none;}
/* custom minimal scrollbar */
#pg-qc .qc-drawer::-webkit-scrollbar{width:0px;}
#pg-qc .qc-drawer::-webkit-scrollbar-track{background:transparent;}
#pg-qc .qc-drawer::-webkit-scrollbar-thumb{background:transparent;}
@media(max-width:899px){
  #pg-qc .qc-drawer{
    position:absolute;top:0;left:0;bottom:0;
    transform:translateX(-100%);
    box-shadow:8px 0 32px rgba(109,40,217,.12);
    z-index:60;
  }
  #pg-qc .qc-drawer.open{transform:translateX(0);}
}
#pg-qc .qc-drawer-overlay{
  display:none;position:absolute;inset:0;
  background:rgba(109,40,217,.18);z-index:50;
}
#pg-qc .qc-drawer-overlay.show{display:block;}

/* Drawer header */
#pg-qc .qc-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 16px 14px;
  border-bottom:1px solid #f3f0ff;
  flex-shrink:0;
}
#pg-qc .qc-drawer-title{
  font-size:13px;font-weight:700;color:#3b0764;
  font-family:'Space Grotesk','Sarabun',sans-serif;
  display:flex;align-items:center;gap:9px;
}
#pg-qc .qc-drawer-title-icon{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:#f5f3ff;border:1px solid #ede9fe;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
#pg-qc .qc-drawer-close{
  width:28px;height:28px;border-radius:8px;border:none;
  background:#f9f8ff;border:1px solid #ede9fe;color:#9ca3af;
  font-size:13px;cursor:pointer;
  display:none;align-items:center;justify-content:center;transition:all .18s;
}
#pg-qc .qc-drawer-close:hover{background:#f0ecff;color:#6d28d9;}
@media(max-width:899px){#pg-qc .qc-drawer-close{display:flex;}}
#pg-qc .qc-drawer-body{
  flex:1;
  overflow-y:scroll;
  scrollbar-width:none;
  padding:16px 14px;
  display:flex;flex-direction:column;gap:16px;
}
#pg-qc .qc-drawer-body::-webkit-scrollbar{display:none;}

/* Section labels */
#pg-qc .qc-section-label{
  font-size:9px;font-weight:700;color:#a78bfa;
  text-transform:uppercase;letter-spacing:2px;
  margin-bottom:6px;display:flex;align-items:center;gap:6px;
}
#pg-qc .qc-section-label::after{
  content:'';flex:1;height:1px;background:#ede9fe;
}

/* Logo box */
#pg-qc .qc-logo-box{
  border:1.5px dashed #ddd6fe;border-radius:12px;
  padding:16px 12px;text-align:center;cursor:pointer;
  background:#faf8ff;transition:all .2s;
}
#pg-qc .qc-logo-box:hover{
  border-color:#a78bfa;background:#f5f0ff;
}
#pg-qc .qc-logo-icon{font-size:24px;opacity:.4;margin-bottom:5px;}
#pg-qc .qc-logo-hint{font-size:10.5px;color:#a78bfa;line-height:1.6;}
#pg-qc .qc-logo-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px;}

/* Fields */
#pg-qc .qc-field{display:flex;flex-direction:column;gap:5px;}
#pg-qc .qc-field label{
  font-size:10px;font-weight:600;
  color:#9ca3af;
  text-transform:uppercase;letter-spacing:.8px;
}
#pg-qc .qc-field input,
#pg-qc .qc-field textarea{
  background:#fff;
  border:1.5px solid #e5e7eb;
  color:#1f2937;border-radius:10px;
  padding:9px 12px;
  font-family:'Sarabun',sans-serif;font-size:12.5px;
  outline:none;transition:all .18s;
}
#pg-qc .qc-field input::placeholder,
#pg-qc .qc-field textarea::placeholder{color:#d1d5db;}
#pg-qc .qc-field input:focus,
#pg-qc .qc-field textarea:focus{
  border-color:#a78bfa;
  box-shadow:0 0 0 3px rgba(167,139,250,.12);
}
#pg-qc .qc-field textarea{resize:none;height:58px;font-size:11.5px;}
#pg-qc .qc-fields-stack{display:flex;flex-direction:column;gap:9px;}

/* Drop zone */
#pg-qc .qc-drop-zone{
  border:1.5px dashed #ddd6fe;border-radius:12px;
  padding:18px 12px;text-align:center;cursor:pointer;
  background:#faf8ff;transition:all .2s;
}
#pg-qc .qc-drop-zone:hover,
#pg-qc .qc-drop-zone.drag{
  border-color:#a78bfa;background:#f5f0ff;
  box-shadow:0 0 0 3px rgba(167,139,250,.1);
}
#pg-qc .qc-drop-zone .dz-icon{font-size:24px;margin-bottom:6px;opacity:.5;}
#pg-qc .qc-drop-zone p{font-size:11.5px;color:#9ca3af;line-height:1.7;}
#pg-qc .qc-drop-zone span{color:#7c3aed;font-weight:600;}

/* File chips */
#pg-qc .qc-chip{
  display:none;align-items:center;gap:7px;
  background:#f5f3ff;border:1px solid #ddd6fe;
  border-radius:8px;padding:6px 10px;
}
#pg-qc .qc-chip.show{display:flex;}
#pg-qc .qc-chip-dot{
  width:6px;height:6px;border-radius:50%;background:#7c3aed;
  flex-shrink:0;animation:chipPulse 2s ease infinite;
}
@keyframes chipPulse{0%,100%{opacity:1;}50%{opacity:.3;}}
#pg-qc .qc-chip-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  flex:1;font-size:11px;color:#5b21b6;font-weight:500;
}

/* Buttons */
#pg-qc .qc-btn{
  width:100%;padding:10px 14px;border-radius:11px;border:none;
  font-family:'Space Grotesk','Sarabun',sans-serif;font-size:13px;font-weight:700;
  cursor:pointer;transition:all .22s;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
#pg-qc .qc-btn-primary{
  background:linear-gradient(135deg,#5b21b6,#7c3aed);color:#fff;
  box-shadow:0 4px 14px rgba(109,40,217,.25);
}
#pg-qc .qc-btn-primary:hover:not(:disabled){
  transform:translateY(-2px);box-shadow:0 8px 20px rgba(109,40,217,.35);
}
#pg-qc .qc-btn-primary:disabled{opacity:.35;cursor:not-allowed;transform:none;}
#pg-qc .qc-btn-amber{
  background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff;
  box-shadow:0 3px 10px rgba(245,158,11,.22);
}
#pg-qc .qc-btn-amber:hover{transform:translateY(-1px);}
#pg-qc .qc-btn-ghost{
  background:#fff;border:1.5px solid #e5e7eb;
  color:#6b7280;
  font-size:11px;font-weight:600;
  padding:6px 10px;width:auto;border-radius:8px;
}
#pg-qc .qc-btn-ghost:hover{background:#f5f3ff;border-color:#c4b5fd;color:#5b21b6;}
#pg-qc .qc-btn-print{
  background:#fff;border:1.5px solid #ede9fe;
  color:#5b21b6;font-size:13px;font-weight:700;
}
#pg-qc .qc-btn-print:hover{background:#f5f3ff;border-color:#c4b5fd;}
#pg-qc .qc-drawer-foot{
  padding:12px 14px;border-top:1px solid #f3f0ff;
  flex-shrink:0;display:flex;flex-direction:column;gap:7px;
  background:#faf8ff;
}

/* ── Main area ── */
#pg-qc .qc-main{
  flex:1;min-width:0;min-height:0;
  display:flex;flex-direction:column;
  overflow:hidden;background:#f9f8ff;
}

/* Topbar */
#pg-qc .qc-topbar{
  background:#fff;
  border-bottom:1.5px solid #ede9fe;
  padding:0 16px;height:54px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;gap:10px;
  box-shadow:0 2px 10px rgba(109,40,217,.05);
}
#pg-qc .qc-topbar-left{display:flex;align-items:center;gap:11px;}
#pg-qc .qc-icon-btn{
  width:36px;height:36px;border-radius:10px;
  border:1.5px solid #ede9fe;
  background:#fff;color:#7c3aed;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .18s;flex-shrink:0;font-size:15px;
}
#pg-qc .qc-icon-btn:hover{background:#f5f3ff;border-color:#c4b5fd;}
#pg-qc .qc-icon-btn.amber{background:#fef3c7;border-color:#fde68a;color:#92400e;}
#pg-qc .qc-icon-btn.amber:hover{background:#fde68a;}
#pg-qc .qc-icon-btn:disabled{opacity:.3;cursor:not-allowed;}
@media(min-width:900px){#pg-qc .qc-icon-btn.settings-btn{display:none;}}
#pg-qc .qc-topbar-icon{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,#f5f3ff,#ede9fe);
  border:1.5px solid #ddd6fe;
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
#pg-qc .qc-title{
  font-family:'Space Grotesk','Sarabun',sans-serif;
  font-size:14.5px;font-weight:700;color:#3b0764;letter-spacing:.2px;
}
#pg-qc .qc-subtitle{font-size:10.5px;color:#c4b5fd;margin-top:1px;}
@media(max-width:600px){#pg-qc .qc-subtitle{display:none;}}
#pg-qc .qc-topbar-actions{display:flex;align-items:center;gap:8px;}
#pg-qc .lang-pill{
  display:flex;border:1.5px solid #ddd6fe;
  border-radius:9px;overflow:hidden;flex-shrink:0;
}
#pg-qc .lang-pill button{
  border:none;padding:5px 11px;
  font-size:11.5px;font-weight:700;cursor:pointer;
  font-family:'Space Grotesk','Sarabun',sans-serif;transition:all .18s;
}

/* Tabbar */
#pg-qc .qc-tabbar{
  background:#fff;
  border-bottom:1.5px solid #ede9fe;
  display:flex;height:62px;flex-shrink:0;
  overflow-x:auto;overflow-y:hidden;
  padding:0 16px;gap:4px;align-items:center;
  box-shadow:0 2px 12px rgba(109,40,217,.04);
}
#pg-qc .qc-tabbar::-webkit-scrollbar{display:none;}
#pg-qc .qc-tab{
  height:42px;padding:0 16px;
  border:none;
  background:transparent;
  color:#9ca3af;
  font-family:'Space Grotesk','Sarabun',sans-serif;
  font-size:13px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  position:relative;
  transition:all .25s cubic-bezier(.22,1,.36,1);
  flex-shrink:0;
  display:flex;align-items:center;gap:9px;
  border-radius:12px;
  letter-spacing:.2px;
}
#pg-qc .qc-tab .tab-num{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;flex-shrink:0;
  background:#f3f4f6;color:#9ca3af;
  transition:all .25s cubic-bezier(.22,1,.36,1);
  border:1.5px solid transparent;
}
#pg-qc .qc-tab .tab-icon{
  font-size:15px;line-height:1;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
#pg-qc .qc-tab-sep{
  width:20px;height:1.5px;flex-shrink:0;
  background:linear-gradient(90deg,#e5e7eb,#ddd6fe,#e5e7eb);
  border-radius:2px;opacity:.6;
}
#pg-qc .qc-tab:hover{
  color:#7c3aed;
  background:linear-gradient(135deg,#faf5ff,#f5f3ff);
}
#pg-qc .qc-tab:hover .tab-num{
  background:#ede9fe;color:#7c3aed;border-color:#ddd6fe;
}
#pg-qc .qc-tab:hover .tab-icon{transform:scale(1.2) rotate(-5deg);}
#pg-qc .qc-tab.on{
  color:#5b21b6;
  background:linear-gradient(135deg,#ede9fe,#f0ecfd);
  box-shadow:0 2px 12px rgba(109,40,217,.14),inset 0 0 0 1.5px #ddd6fe;
}
#pg-qc .qc-tab.on .tab-num{
  background:linear-gradient(135deg,#6d28d9,#a78bfa);
  color:#fff;border-color:transparent;
  box-shadow:0 2px 8px rgba(109,40,217,.35);
}
#pg-qc .qc-tab.on .tab-icon{transform:scale(1.15);}

/* Panels */
#pg-qc .qc-panels{
  flex:1;overflow-y:auto;overflow-x:visible;padding:20px;
}
#pg-qc .qc-panels::-webkit-scrollbar{width:4px;}
#pg-qc .qc-panels::-webkit-scrollbar-track{background:transparent;}
#pg-qc .qc-panels::-webkit-scrollbar-thumb{
  background:#e5e0ff;border-radius:10px;
}
#pg-qc .qc-panels::-webkit-scrollbar-thumb:hover{background:#c4b5fd;}
#pg-qc .panel{display:none;}
#pg-qc .panel.on{display:block;}

/* Empty state */
#pg-qc .qc-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;padding:90px 24px;
}
#pg-qc .qc-empty-icon{font-size:56px;opacity:.2;filter:grayscale(1);}
#pg-qc .qc-empty-title{
  font-family:'Space Grotesk','Sarabun',sans-serif;
  font-size:16px;font-weight:700;color:#7c3aed;
}
#pg-qc .qc-empty-desc{
  font-size:12.5px;color:#a78bfa;
  text-align:center;line-height:1.7;max-width:280px;
}

/* Report header */
#pg-qc .qc-report-hdr{
  background:#fff;border:1.5px solid #ede9fe;
  border-radius:20px;padding:15px 20px;
  display:flex;align-items:center;gap:14px;
  margin-bottom:18px;position:relative;overflow:hidden;
  box-shadow:0 4px 20px rgba(109,40,217,.08);
}
#pg-qc .qc-report-hdr::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#6d28d9,#a78bfa,#e879f9,#a78bfa,#6d28d9);
  background-size:200% 100%;
  animation:qcHdrShimmer 4s linear infinite;
}
@keyframes qcHdrShimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}
#pg-qc .qc-rh-ph{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,#f5f3ff,#ede9fe);
  border:1.5px solid #ddd6fe;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
#pg-qc .qc-rh-logo{
  width:44px;height:44px;border-radius:12px;
  object-fit:contain;border:1.5px solid #ede9fe;background:#fff;
}
#pg-qc .qc-rh-info{flex:1;min-width:0;}
#pg-qc .qc-rh-title{
  font-family:'Space Grotesk','Sarabun',sans-serif;
  font-size:12.5px;font-weight:700;color:#3b0764;
}
#pg-qc .qc-rh-sub{font-size:10.5px;color:#a78bfa;margin-top:2px;}
#pg-qc .qc-rh-badge{
  margin-left:auto;
  background:linear-gradient(135deg,#5b21b6,#7c3aed);
  border-radius:10px;padding:5px 14px;
  font-family:'Space Grotesk','Sarabun',sans-serif;
  font-size:10px;font-weight:700;color:#fff;
  box-shadow:0 3px 10px rgba(109,40,217,.28);
  white-space:nowrap;flex-shrink:0;letter-spacing:.3px;
}

/* KPI cards */
#pg-qc .qc-kpi-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:12px;margin-bottom:18px;
}
@media(min-width:700px){#pg-qc .qc-kpi-grid{grid-template-columns:repeat(4,1fr);}}

/* Card base */
#pg-qc .qc-kpi{
  background:#fff;
  border-radius:18px;
  padding:0;
  position:relative;overflow:hidden;
  border:1px solid var(--kborder);
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 4px 16px var(--ksh);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;
  cursor:default;
  display:flex;flex-direction:column;
}
#pg-qc .qc-kpi:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 6px rgba(0,0,0,.06),0 12px 28px var(--ksh2);
}

/* Color tokens — all purple */
#pg-qc .qc-kpi.kp,
#pg-qc .qc-kpi.ka,
#pg-qc .qc-kpi.kr,
#pg-qc .qc-kpi.kb{
  --kc:#6d28d9;--kc2:#a78bfa;--kbg:#f5f3ff;--kborder:#ede9fe;
  --ksh:rgba(109,40,217,.07);--ksh2:rgba(109,40,217,.16);
  --ktxt:#5b21b6;--klbl:#a78bfa;--ksub:#c4b5fd;
}

/* Top accent bar */
#pg-qc .qc-kpi::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--kc),var(--kc2));
  border-radius:18px 18px 0 0;
}

/* Inner layout */
#pg-qc .qc-kpi-inner{
  padding:18px 18px 16px;
  flex:1;display:flex;flex-direction:column;
  position:relative;z-index:1;
}

/* Icon + label row */
#pg-qc .qc-kpi-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
#pg-qc .qc-kpi-icon{
  width:42px;height:42px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
  background:var(--kbg);
  border:1px solid var(--kborder);
}
#pg-qc .qc-kpi-lbl{
  font-size:10px;font-weight:700;
  color:var(--klbl);
  text-transform:uppercase;letter-spacing:1.5px;
  text-align:right;line-height:1.3;
  max-width:100px;
}

/* Value */
#pg-qc .qc-kpi-val{
  font-family:'Bebas Neue',sans-serif;
  font-size:46px;line-height:1;letter-spacing:1px;
  color:var(--ktxt);
  margin-bottom:8px;
}
#pg-qc .qc-kpi-val.shrink{
  font-family:'Space Grotesk','Sarabun',sans-serif;
  font-size:14px;font-weight:700;line-height:1.5;
  letter-spacing:.3px;
}

/* Sub + bar row */
#pg-qc .qc-kpi-footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:auto;
}
#pg-qc .qc-kpi-sub{
  font-size:10px;color:var(--ksub);
  font-family:'Sarabun',sans-serif;font-weight:500;
}

/* Progress track */
#pg-qc .qc-kpi-track{
  flex:1;height:4px;background:var(--kbg);
  border-radius:10px;overflow:hidden;
  border:1px solid var(--kborder);
}
#pg-qc .qc-kpi-bar{
  height:100%;
  transition:width 1.8s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(90deg,var(--kc),var(--kc2));
  border-radius:10px;
  width:0%;
}

/* Chart cards */
#pg-qc .qc-chart-grid{display:grid;gap:14px;margin-bottom:14px;}
#pg-qc .qc-chart-grid.c2{grid-template-columns:1fr;min-width:0;}
@media(min-width:750px){#pg-qc .qc-chart-grid.c2{grid-template-columns:1.4fr 1fr;}}
#pg-qc .qc-chart-grid.c1{grid-template-columns:1fr;}
#pg-qc .qc-chart-card{
  background:#fff;border-radius:20px;padding:18px;
  box-shadow:0 2px 16px rgba(109,40,217,.07);
  border:1.5px solid #ede9fe;
  position:relative;overflow:hidden;
  transition:box-shadow .25s;
}
#pg-qc .qc-chart-card:hover{box-shadow:0 6px 24px rgba(109,40,217,.11);}
#pg-qc .qc-chart-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.25),transparent);
}
#pg-qc .qc-chart-title{
  font-size:10px;font-weight:700;
  color:#374151;letter-spacing:.5px;
  margin-bottom:14px;display:flex;align-items:center;gap:8px;
  font-family:'Space Grotesk','Sarabun',sans-serif;
}
#pg-qc .qc-chart-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}

/* Pie legend */
#pg-qc .qc-pie-legend-item{display:flex;align-items:center;gap:8px;padding:3px 0;}
#pg-qc .qc-pie-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
#pg-qc .qc-pie-legend-label{flex:1;color:#374151;font-size:11px;font-family:'Sarabun',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#pg-qc .qc-pie-legend-pct{font-size:10px;font-weight:700;color:#7c3aed;font-family:'JetBrains Mono',monospace;flex-shrink:0;}

/* Tables */
#pg-qc .qc-tbl-card{
  background:#fff;border-radius:20px;overflow:hidden;
  margin-bottom:14px;
  border:1.5px solid #ede9fe;
  box-shadow:0 2px 16px rgba(109,40,217,.07);
}
#pg-qc .qc-tbl-hdr{
  padding:13px 18px;
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#f8f5ff,#ede9fe);
  border-bottom:1.5px solid #ede9fe;
}
#pg-qc .qc-tbl-title{
  font-size:10px;font-weight:800;color:#5b21b6;
  text-transform:uppercase;letter-spacing:1.5px;
  font-family:'Space Grotesk','Sarabun',sans-serif;
  display:flex;align-items:center;gap:8px;
}
#pg-qc .qc-tbl-cnt{
  font-size:10px;color:#a78bfa;
  background:#f5f3ff;border:1px solid #ddd6fe;
  border-radius:20px;padding:2px 9px;
  font-family:'JetBrains Mono',monospace;font-weight:600;
}
#pg-qc table{width:100%;border-collapse:collapse;}
#pg-qc th{
  background:#faf8ff;padding:10px 16px;
  font-size:9px;font-weight:800;color:#a78bfa;
  text-transform:uppercase;letter-spacing:1.8px;
  text-align:left;border-bottom:1.5px solid #ede9fe;
  font-family:'Space Grotesk','Sarabun',sans-serif;
}
#pg-qc td{
  padding:10px 16px;font-size:11.5px;
  border-bottom:1px solid #faf5ff;color:#374151;
  transition:background .15s;
}
#pg-qc tr:last-child td{border-bottom:none;}
#pg-qc tr:hover td{background:linear-gradient(90deg,#faf5ff,#f8f5ff);}
#pg-qc .mono{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;}
#pg-qc .pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:20px;
  font-size:9px;font-weight:700;
  font-family:'Space Grotesk','Sarabun',sans-serif;
}
#pg-qc .pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;flex-shrink:0;}
#pg-qc .pill-ok{background:#f5f3ff;color:#5b21b6;border:1px solid #ddd6fe;}
#pg-qc .pill-warn{background:#fef3c7;color:#92400e;border:1px solid #fde68a;}
#pg-qc .pill-fail{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;}

/* QI/CQI */
#pg-qc .qi-verdict{
  border-radius:16px;padding:16px 20px;margin-bottom:16px;
  font-size:14px;font-weight:700;text-align:center;
  font-family:'Space Grotesk','Sarabun',sans-serif;
  position:relative;overflow:hidden;
}
#pg-qc .qi-verdict::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.6),transparent 70%);
  pointer-events:none;
}
#pg-qc .qi-verdict.ok{background:linear-gradient(135deg,#f5f3ff,#ede9fe);border:1.5px solid #c4b5fd;color:#4c1d95;box-shadow:0 4px 14px rgba(109,40,217,.1);}
#pg-qc .qi-verdict.great{background:linear-gradient(135deg,#ede9fe,#ddd6fe);border:1.5px solid #a78bfa;color:#3b0764;box-shadow:0 4px 18px rgba(109,40,217,.16);}
#pg-qc .qi-verdict.fail{background:linear-gradient(135deg,#fee2e2,#fecaca);border:1.5px solid #f87171;color:#7f1d1d;box-shadow:0 4px 14px rgba(239,68,68,.12);}
#pg-qc .qi-points{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
@media(max-width:500px){#pg-qc .qi-points{grid-template-columns:1fr;}}
#pg-qc .qi-point{
  background:#fff;border:1.5px solid #ede9fe;
  border-radius:14px;padding:13px 15px;
  font-size:11.5px;line-height:1.8;color:#374151;
  box-shadow:0 2px 8px rgba(109,40,217,.04);
  transition:box-shadow .2s,transform .2s;
}
#pg-qc .qi-point:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(109,40,217,.08);}
#pg-qc .cqi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:500px){#pg-qc .cqi-grid{grid-template-columns:1fr;}}
#pg-qc .cqi-box{
  border-radius:16px;overflow:hidden;
  border:1.5px solid #ede9fe;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:transform .22s,box-shadow .22s;
}
#pg-qc .cqi-box:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08);}
#pg-qc .cqi-hdr{
  padding:11px 14px;font-size:10.5px;font-weight:800;
  display:flex;align-items:center;gap:7px;
  font-family:'Space Grotesk','Sarabun',sans-serif;
  letter-spacing:.2px;
}
#pg-qc .cqi-hdr.red{background:linear-gradient(135deg,#fee2e2,#fecaca);border-bottom:1.5px solid #fca5a5;color:#991b1b;}
#pg-qc .cqi-hdr.teal{background:linear-gradient(135deg,#f5f3ff,#ede9fe);border-bottom:1.5px solid #ddd6fe;color:#5b21b6;}
#pg-qc .cqi-hdr.blue{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-bottom:1.5px solid #bfdbfe;color:#1e40af;}
#pg-qc .cqi-hdr.orange{background:linear-gradient(135deg,#fef9c3,#fde68a);border-bottom:1.5px solid #fcd34d;color:#92400e;}
#pg-qc .cqi-body{background:#fff;padding:10px 14px;font-size:11px;line-height:2.2;color:#6b7280;}
#pg-qc .cqi-body li{list-style:none;padding-left:14px;position:relative;}
#pg-qc .cqi-body li::before{content:'›';position:absolute;left:2px;color:#a78bfa;font-size:14px;font-weight:700;}
#pg-qc .notes-section{
  background:linear-gradient(135deg,#fffbeb,#fef9c3);
  border:1.5px solid #fde68a;border-radius:16px;
  padding:14px 18px;margin-bottom:14px;
  box-shadow:0 2px 10px rgba(245,158,11,.08);
}
#pg-qc .notes-title{
  font-size:9px;font-weight:800;color:#92400e;
  letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:10px;font-family:'Space Grotesk','Sarabun',sans-serif;
}
#pg-qc .note-line{border-bottom:1px dashed #fcd34d;padding:7px 0;font-size:11.5px;color:#6b7280;min-height:28px;}
#pg-qc .sign-box{
  background:linear-gradient(135deg,#f5f3ff,#ede9fe);
  border:1.5px solid #ddd6fe;border-radius:16px;
  padding:18px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:0 2px 10px rgba(109,40,217,.07);
}
#pg-qc .sign-line{width:155px;border-bottom:2px dashed #c4b5fd;height:32px;}
#pg-qc .sign-name{font-family:'Space Grotesk','Sarabun',sans-serif;font-size:12.5px;font-weight:700;color:#3b0764;}
#pg-qc .sign-date{font-size:10.5px;color:#a78bfa;}
#pg-qc .qc-section-box{
  background:#fff;border-radius:20px;overflow:hidden;
  margin-bottom:16px;border:1.5px solid #ede9fe;
  box-shadow:0 2px 16px rgba(109,40,217,.07);
}
#pg-qc .qc-section-box-hdr{
  padding:13px 18px;
  background:linear-gradient(135deg,#f8f5ff,#ede9fe);
  border-bottom:1.5px solid #e5deff;
  font-size:10px;font-weight:800;color:#5b21b6;
  text-transform:uppercase;letter-spacing:1.5px;
  font-family:'Space Grotesk','Sarabun',sans-serif;
  display:flex;align-items:center;gap:8px;
}
#pg-qc .qc-section-box-body{padding:18px;}

/* Toast */
#pg-qc #qc-toast{
  position:fixed;bottom:22px;right:22px;z-index:9999;
  background:linear-gradient(135deg,#4c1d95,#6d28d9);
  color:#fff;padding:10px 18px;border-radius:13px;
  font-family:'Space Grotesk','Sarabun',sans-serif;font-size:12px;font-weight:600;
  transform:translateY(70px);opacity:0;
  transition:all .32s cubic-bezier(.22,1,.36,1);
  pointer-events:none;box-shadow:0 6px 24px rgba(109,40,217,.42);
}
#pg-qc #qc-toast.show{transform:translateY(0);opacity:1;}

/* lang-pill */
#pg-qc .lang-pill{display:flex;}
#pg-qc .anim-up{animation:qcUp .5s cubic-bezier(.22,1,.36,1) both;}
@keyframes qcUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
#pg-qc .qc-kpi:nth-child(1){animation-delay:.04s;}
#pg-qc .qc-kpi:nth-child(2){animation-delay:.08s;}
#pg-qc .qc-kpi:nth-child(3){animation-delay:.12s;}
#pg-qc .qc-kpi:nth-child(4){animation-delay:.16s;}
@keyframes chipPulse{0%,100%{opacity:1;}50%{opacity:.4;}}


/* ═══════════════════════════════════════════

/* ═══════════════════════════════════════════
   ✨ ENHANCEMENTS — Animation & Hover Effects
   ═══════════════════════════════════════════ */

/* ── Smooth scroll ── */
html { scroll-behavior: smooth; }

/* ── Page fade-in on load ── */


/* ── Topbar scroll shadow ── */
.topbar { transition: box-shadow .3s !important; }
.topbar.scrolled { box-shadow: 0 4px 24px rgba(109,40,217,.13) !important; }

/* ── Top nav buttons hover ── */
}

/* ── stat-box cards (Dashboard top row) ── */
.stat-box {
  transition: transform .28s cubic-bezier(.22,1,.36,1),
              box-shadow .28s cubic-bezier(.22,1,.36,1),
              border-color .28s !important;
  cursor: default;
}
.stat-box:hover {
  transform: translateY(-7px) scale(1.025);
  box-shadow: 0 20px 50px rgba(109,40,217,.2) !important;
  border-color: rgba(167,139,250,.35) !important;
}
.stat-box.blue:hover,.stat-box.purple:hover,.stat-box.amber:hover {
  box-shadow: 0 20px 50px rgba(109,40,217,.2) !important;
  border-color: rgba(167,139,250,.35) !important;
}
.stat-box:hover .stat-box-ic {
  transform: scale(1.18) rotate(-6deg);
}

/* ── stat-box shimmer animation ── */
@keyframes shimmerBar {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.stat-box::before {
  background-size: 200% auto !important;
  animation: shimmerBar 3s linear infinite;
}

/* ── stat-box number ── */
.stat-box-num {
  display: inline-block;
}

/* ── panel cards ── */
.panel {
  transition: transform .22s cubic-bezier(.22,1,.36,1),
              box-shadow .22s !important;
}
.panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(109,40,217,.12) !important;
}

/* ── adm-kpi cards (admin) ── */
.adm-kpi {
  transition: transform .2s cubic-bezier(.22,1,.36,1),
              box-shadow .2s !important;
}
.adm-kpi:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(109,40,217,.15) !important;
}
@keyframes admNumGlow {
  0%,100% { text-shadow:none; }
  50%      { text-shadow:0 0 12px rgba(109,40,217,.4); }
}
.adm-kpi-num { animation: admNumGlow 3s ease-in-out infinite; }

/* ── adm-set-card (settings cards) ── */
.adm-set-card {
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
}
.adm-set-card:hover {
  transform: translateY(-3px);
  border-color: var(--g300) !important;
  box-shadow: 0 8px 24px rgba(109,40,217,.12) !important;
}

/* ── ref-panel (refer page) ── */
.ref-panel {
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s !important;
}
.ref-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(109,40,217,.14) !important;
}

/* ── Buttons — lift & active bounce ── */
.ref-btn, .adm-btn, button[class*="btn"],
.lc-sub, .trp-translate-btn {
  transition: transform .15s, box-shadow .15s, filter .15s !important;
}
.ref-btn:hover, .adm-btn:hover, button[class*="btn"]:hover,
.lc-sub:hover, .trp-translate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(109,40,217,.22);
  filter: brightness(1.06);
}
.ref-btn:active, .adm-btn:active, button[class*="btn"]:active {
  transform: translateY(0) scale(.96);
}

/* ── Input focus glow ── */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(109,40,217,.13),
              0 2px 8px rgba(109,40,217,.07) !important;
  border-color: var(--g400) !important;
  transition: box-shadow .2s, border-color .2s !important;
  outline: none;
}

/* ── stats table rows ── */
.stats-table tbody tr {
  transition: background .15s, transform .12s;
}
.stats-table tbody tr:hover {
  background: var(--g50) !important;
}

/* ── dash-banner clock pulse ── */
@keyframes clockPulse {
  0%,100% { opacity:1; }
  50%      { opacity:.75; }
}
.dash-banner-clock {
  animation: clockPulse 1s step-end infinite;
}

/* ── Modal entrance ── */
@keyframes modalIn {
  from { opacity:0; transform:scale(.94) translateY(12px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.profile-box, .adm-modal > div, .adm-cf-box {
  animation: modalIn .28s cubic-bezier(.22,1,.36,1) both;
}

/* ── lc-stat (login page stats) count glow ── */
.lc-stat-num {
  transition: transform .2s;
}
.lc-stat:hover .lc-stat-num {
  transform: scale(1.15);
  color: var(--g600);
}

/* ── dash-banner fade-in ── */
@keyframes bannerIn {
  from { opacity:0; transform:translateX(-16px); }
  to   { opacity:1; transform:translateX(0); }
}
.dash-banner-left { animation: bannerIn .5s cubic-bezier(.22,1,.36,1) both; }
.dash-banner-right { animation: bannerIn .5s cubic-bezier(.22,1,.36,1) .1s both; }

/* ── trp-lang-chip hover ── */
.trp-lang-chip {
  transition: transform .15s, box-shadow .15s, background .15s !important;
}
.trp-lang-chip:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 14px rgba(109,40,217,.18);
}

/* ── adm-hero-chip hover ── */
.adm-hero-chip {
  transition: transform .15s, box-shadow .15s !important;
}
.adm-hero-chip:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}


/* ═══════════════════════════════════════════════════════
   ✨ EFFECTS PACK — Page transitions, ripple, scroll reveal
   ═══════════════════════════════════════════════════════ */

/* ── Page Transition ── */
.page.on {
  display: block;
  animation: pageEnter .38s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes pageEnter {
  from { opacity:0; transform:translateY(14px) scale(.993); }
  to   { opacity:1; transform:none; }
}

/* ── Topbar scroll shadow ── */
.topbar { transition: box-shadow .3s ease; }
.topbar.scrolled {
  box-shadow: 0 4px 24px rgba(109,40,217,.13) !important;
}

/* ── Card hover lift & glow ── */
.card, .sc, .dash-metric-item {
  transition: transform .22s cubic-bezier(.22,1,.36,1),
              box-shadow .22s ease,
              border-color .22s ease !important;
}
.card:hover, .sc:hover {
  transform: translateY(-3px) scale(1.008);
  box-shadow: 0 8px 28px rgba(109,40,217,.12) !important;
  border-color: #ddd6fe !important;
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s cubic-bezier(.22,1,.36,1),
              transform .5s cubic-bezier(.22,1,.36,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .07s !important; }
.reveal-delay-2 { transition-delay: .14s !important; }
.reveal-delay-3 { transition-delay: .21s !important; }
.reveal-delay-4 { transition-delay: .28s !important; }
.reveal-delay-5 { transition-delay: .35s !important; }

/* ── Ripple on buttons ── */
.ripple-wrap { position: relative; overflow: hidden; }
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: rippleAnim .55s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── Nav button ripple (dark bg) ── */
.tnav { position: relative; }
.tnav .ripple-effect { background: rgba(109,40,217,.18); }

/* ── Stat counter animation ── */
@keyframes countUp {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.sc-num[data-counted] { animation: countUp .5s ease both; }

/* ── Tooltip fade ── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) scale(.9);
  background: #1f2937;
  color: #fff;
  font-size: .7rem;
  padding: .3rem .65rem;
  border-radius: 7px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 9999;
  font-family: 'Sarabun', sans-serif;
}
[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ── Smooth focus ring ── */
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2.5px solid #7c3aed;
  outline-offset: 2px;
  transition: outline-offset .15s;
}

/* ── Pulse badge ── */
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 0 rgba(109,40,217,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(109,40,217,0); }
}
.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #7c3aed;
  animation: pulseDot 1.8s ease infinite;
}


/* ── Active nav — style 1: soft pill + gradient line ── */
.tnav {
  border-radius: 10px !important;
  position: relative;
  overflow: visible !important;
  transition: background .2s, color .2s, box-shadow .2s !important;
}
.tnav:hover {
  background: #f5f3ff !important;
  color: #4c1d95 !important;
}
.tnav.on {
  background: linear-gradient(135deg, #ede9fe, #fce7f3) !important;
  color: #4c1d95 !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}
.tnav.on::after {
  content: '' !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 15% !important;
  width: 70% !important;
  height: 2.5px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, #7c3aed, #db2777) !important;
  box-shadow: 0 1px 6px rgba(124,58,237,.3) !important;
}

/* ── Custom scrollbar — purple style ── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5b21b6, #7c3aed);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4c1d95, #6d28d9);
}
* {
  scrollbar-width: thin;
  scrollbar-color: #6d28d9 transparent;
}

/* DICOM Hospital Dropdown */
.dicom-hosp-item {
  padding: 7px 14px;
  font-family: 'Sarabun', sans-serif;
  font-size: .87rem;
  cursor: pointer;
  color: #333;
  transition: background .12s;
}
.dicom-hosp-item:hover {
  background: var(--g50, #f5f3ff);
  color: var(--g800, #3730a3);
}

/* ══════════════════════════════════════════
   Page Reload Loader
   ══════════════════════════════════════════ */
.rl-overlay{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ede9fe 0%,#f3e8ff 40%,#fce7f3 70%,#e0e7ff 100%);
  background-size:300% 300%;
  animation:rl-bg-shift 3s ease infinite;
  transition:opacity .5s ease, visibility .5s ease;
}
.rl-overlay.rl-hidden{
  opacity:0;visibility:hidden;pointer-events:none;
}
@keyframes rl-bg-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.rl-box{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  animation:rl-pop .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rl-pop{
  from{opacity:0;transform:scale(.85) translateY(12px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.rl-logo-wrap{
  position:relative;width:80px;height:80px;
  display:flex;align-items:center;justify-content:center;
}
.rl-ring{
  position:absolute;inset:0;width:100%;height:100%;
  animation:rl-spin 1.2s cubic-bezier(.6,0,.4,1) infinite;
}
.rl-ring circle{
  animation:rl-dash 1.2s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes rl-spin{
  to{transform:rotate(360deg)}
}
@keyframes rl-dash{
  0%{stroke-dashoffset:160}
  50%{stroke-dashoffset:40}
  100%{stroke-dashoffset:160}
}
.rl-icon{
  display:flex;align-items:center;justify-content:center;
  animation:rl-pulse-icon 1.2s ease infinite;
}
@keyframes rl-pulse-icon{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.9);opacity:.7}
}
.rl-dots{
  display:flex;gap:8px;
}
.rl-dots span{
  width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#c084fc);
  animation:rl-bounce .9s ease infinite;
}
.rl-dots span:nth-child(2){animation-delay:.15s}
.rl-dots span:nth-child(3){animation-delay:.3s}
@keyframes rl-bounce{
  0%,100%{transform:translateY(0);opacity:.5}
  50%{transform:translateY(-8px);opacity:1}
}
.rl-text{
  font-family:'Sarabun',sans-serif;font-size:.88rem;
  color:#6d28d9;font-weight:600;letter-spacing:.02em;
  animation:rl-fade-text 1.5s ease infinite;
}
@keyframes rl-fade-text{
  0%,100%{opacity:.5}
  50%{opacity:1}
}