@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Quicksand:wght@700&display=swap');
:root{--bg:#f5f1e6;--ink:#23311f;--muted:#64705f;--line:#23311f;--forest:#314b34;--cream:#fffdf4;--sage:#e7ecdc;--gold:#e8bd5b;--shadow:0 10px 0 rgba(35,49,31,.1)}
*{box-sizing:border-box;margin:0;padding:0}body{font-family:Nunito,sans-serif;background:var(--bg);color:var(--ink);padding:16px}button{font:inherit;cursor:pointer}h1,h2,h3{font-family:Quicksand,sans-serif}.topbar{height:76px;display:grid;grid-template-columns:420px 1fr 470px;gap:16px;align-items:center;border-bottom:2px solid var(--line);padding-bottom:14px}.brand{display:flex;align-items:center;gap:14px}.mark{width:52px;height:52px;border:2px solid var(--line);border-radius:15px;display:grid;place-items:center;font:900 24px Quicksand;background:#fbfff4}.brand h1{font-size:26px;line-height:.9}.brand b{color:#4e674a}.brand p{border-left:1px dashed #b8b7a6;padding-left:18px;color:#50614b;font-size:13px;line-height:1.35}nav{justify-self:center;border:2px solid var(--line);border-radius:20px;display:flex;overflow:hidden;background:#fbf8ef}nav button{border:0;border-right:1px solid var(--line);background:transparent;padding:14px 30px;font-weight:900}nav button:last-child{border-right:0}nav .active,nav button:hover{background:var(--forest);color:white}.actions{display:flex;justify-content:flex-end;gap:10px}.actions button{border:2px solid var(--line);background:#fbf8ef;border-radius:999px;padding:10px 14px;font-weight:900}.layout{display:grid;grid-template-columns:320px 1fr;gap:14px;padding-top:14px}.rail{display:flex;flex-direction:column;gap:12px}.card,.metric{background:var(--cream);border:2px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:16px}.focus{background:linear-gradient(180deg,#4f714a,#314b34);color:white}.row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.row button,.prompt button{border:0;background:transparent;font-weight:900}.focus .row button{border:1px solid rgba(255,255,255,.25);border-radius:999px;color:white;padding:6px 12px}.focus h2{margin:14px 0 6px}.focus p{margin-bottom:14px}.bar{height:10px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden}.bar i{display:block;height:100%;background:#fff4d2;width:65%;border-radius:999px}.focus strong{display:block;text-align:right;margin-top:5px}.mission{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;border-top:1px solid #d4d0bf;padding:8px 0}.mission:first-child{border-top:0}.mission i{width:22px;height:22px;border-radius:50%;border:1px solid #aab39e;display:grid;place-items:center;font-style:normal;font-size:12px}.mission b{border:1px solid #9aa48b;border-radius:999px;background:#f5f3e8;padding:4px 8px;font-size:12px}.roster{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;border-top:1px dashed #ccc5ad;padding:7px 0;background:transparent;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left}.roster:first-child{border-top:0}.ava{width:38px;height:38px;border:2px solid var(--line);border-radius:50%;background:#dfe9d4;display:grid;place-items:center}.roster small{display:block;color:#6b7464}.online{width:9px;height:9px;background:#4d7b45;border-radius:50%}.helper{display:flex;align-items:center;gap:14px}.star{width:52px;height:52px;border:2px solid var(--line);border-radius:16px;background:#f1d690;display:grid;place-items:center;font-size:26px}.stage{display:flex;flex-direction:column;gap:12px}.hero{position:relative;background:#2e4831;border:2px solid var(--line);border-radius:26px;padding:16px}.heroInfo{position:absolute;z-index:10;left:26px;top:26px;width:250px;background:rgba(46,72,49,.93);color:white;border:2px solid var(--line);border-radius:18px;padding:16px}.heroInfo p{font-size:13px;margin:8px 0 12px}.heroInfo button{border:1px solid rgba(255,255,255,.3);border-radius:999px;background:transparent;color:white;padding:8px 12px}.room{height:560px;position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(135deg,#f4ead6,#f8f1dc 55%,#e6d4b4);clip-path:polygon(23% 4%,80% 4%,98% 27%,98% 80%,62% 97%,8% 66%,8% 28%)}.wall{position:absolute;background:#f7eedc;border:2px solid rgba(35,49,31,.35)}.left{left:8%;top:5%;width:43%;height:165px;transform:skewY(-29deg);transform-origin:left top}.right{right:3%;top:5%;width:36%;height:180px;transform:skewY(29deg);transform-origin:right top}.floor{position:absolute;inset:130px 80px 24px 116px;background-image:linear-gradient(45deg,rgba(35,49,31,.13) 1px,transparent 1px),linear-gradient(-45deg,rgba(35,49,31,.13) 1px,transparent 1px);background-size:36px 36px;transform:skewY(-26deg);opacity:.6}.prop{position:absolute;z-index:3}.shelf{left:34%;top:10%;font-size:44px}.clock{left:52%;top:8%;font-size:30px}.plant{font-size:34px}.a{left:16%;top:25%}.b{right:10%;top:27%}.sign{right:8%;top:12%;background:#a8763f;color:white;border:2px solid var(--line);border-radius:9px;padding:10px 13px;text-align:center;font-weight:900;transform:rotate(2deg)}.rug{position:absolute;left:49%;top:56%;transform:translate(-50%,-50%);width:126px;height:86px;border:4px solid #d7c8a4;border-radius:50%;display:grid;place-items:center;color:#f8f4e8;font:900 32px Quicksand;background:#b9ab85;z-index:2}.agent{position:absolute;z-index:8;transform:translate(-50%,-50%);background:transparent;border:0;text-align:center;transition:.2s;color:var(--ink)}.agent:hover{transform:translate(-50%,-58%) scale(1.04)}.agentLabel{display:inline-block;background:#fffdf4;border:2px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:900;box-shadow:0 4px 0 rgba(35,49,31,.12);margin-bottom:2px;white-space:nowrap}.agentLabel small{display:block;font-size:11px;color:#596452}.agentBody{position:relative;margin:auto;width:112px;height:112px}.char{position:absolute;left:50%;top:0;transform:translateX(-50%);font-size:50px;z-index:3}.desk{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:112px;height:54px;background:#c7974f;border:2px solid var(--line);border-radius:8px;display:grid;place-items:center;font-size:22px}.desk:after{content:'';position:absolute;left:14px;right:14px;bottom:-17px;height:18px;border-left:3px solid var(--line);border-right:3px solid var(--line)}.prompt{position:absolute;right:5%;bottom:6%;z-index:14;width:min(510px,46%)}.prompt>div{background:#fffdf4;border:2px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:14px;display:grid;grid-template-columns:34px 1fr 48px;gap:10px;align-items:center}.prompt .send{width:44px;height:44px;border-radius:50%;background:var(--forest);color:white;text-align:center}.prompt p{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}.prompt p button{border:2px solid var(--line);background:#fffdf4;border-radius:999px;padding:10px 14px;font-size:12px;color:var(--ink)}.metrics{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr 1.4fr;gap:10px}.metric{min-height:118px;position:relative}.metric h4{margin-bottom:10px}.metric strong{font-size:30px}.ready{display:flex;gap:14px;align-items:center;font-size:32px}.ready>div{font-size:16px}.ready button{margin-top:12px;border:0;background:var(--forest);color:white;border-radius:999px;padding:10px 20px;font-weight:900}.ring{position:absolute;right:16px;bottom:16px;width:62px;height:62px;border-radius:50%;border:8px solid #ced8c2;border-top-color:#4a7c43;display:grid;place-items:center;font-weight:900}.classRow{display:grid;grid-template-columns:42px 1fr auto;gap:8px;align-items:center;padding:5px 0}.classRow button{border:0;border-radius:999px;background:#4d7b45;color:white;font-weight:900;padding:4px 11px}.bottom{display:grid;grid-template-columns:1fr 1fr;gap:12px}.activity{display:grid;grid-template-columns:56px 100px 1fr auto;gap:10px;padding:9px 0;border-top:1px dashed #ccc5ad;align-items:center}.activity:first-child{border-top:0}.activity span,.activity em{color:#63705d;font-style:normal}.xpBadge{border:1px solid #aab39e;border-radius:999px;padding:4px 8px;background:#f6f4e8;font-weight:900}.materials{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mat{border:1px solid #d3ccb8;border-radius:16px;background:#f8f4e7;padding:12px;display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;text-decoration:none;color:var(--ink)}.matIcon{width:42px;height:42px;border-radius:10px;border:2px solid #879678;background:#dfe8d2;display:grid;place-items:center;font-size:24px}.mat small{font-size:10px;color:#6b7464;font-weight:900}.mat strong{display:block}.mat em{font-style:normal;color:#6b7464;font-size:12px}#backdrop{position:fixed;inset:0;background:rgba(21,29,18,.55);opacity:0;visibility:hidden;transition:.2s;z-index:40}#backdrop.show{opacity:1;visibility:visible}#modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-45%) scale(.98);opacity:0;visibility:hidden;transition:.2s;z-index:50;width:min(960px,94vw);max-height:86vh;overflow:auto;background:var(--cream);border:2px solid var(--line);border-radius:28px;box-shadow:0 30px 90px rgba(0,0,0,.25);padding:18px}#modal.show{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}#modal header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d7d0bd;padding-bottom:12px;margin-bottom:14px}#modal header button{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:#fbf8ef}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}.modalCard{border:2px solid var(--line);border-radius:18px;background:#fbf8ef;padding:16px}.badge{display:inline-block;border:1px solid #c1a45c;background:#f4e6bd;border-radius:999px;padding:5px 9px;font-weight:900;margin:4px 0}.modalCard button,#modal input,#modal textarea,#modal select{border:2px solid var(--line);background:#fffdf4;border-radius:999px;padding:9px 14px;font-weight:900;margin:4px;color:var(--ink)}.modalCard button.primary{background:var(--forest);color:white}#modal input,#modal textarea,#modal select{width:100%;border-color:#9aa48b;border-radius:14px;margin:6px 0}#modal textarea{min-height:110px}.mProgress{height:10px;border-radius:999px;background:#dfe2d1;overflow:hidden;margin:10px 0}.mProgress i{display:block;height:100%;background:#4c7a43}#drawer{position:fixed;top:0;right:0;height:100vh;width:min(440px,100vw);background:#fffdf4;border-left:2px solid var(--line);box-shadow:-18px 0 60px rgba(0,0,0,.18);transform:translateX(100%);transition:.24s;z-index:60;display:flex;flex-direction:column}#drawer.show{transform:translateX(0)}#drawer header{display:grid;grid-template-columns:48px 1fr 42px;gap:10px;align-items:center;padding:16px;border-bottom:1px solid #d7d0bd}#drawerIcon{width:46px;height:46px;border:2px solid var(--line);border-radius:50%;background:#dfe8d2;display:grid;place-items:center;font-size:23px}#drawer header button{border:2px solid var(--line);border-radius:50%;background:#fbf8ef}#messages{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#f7f1e4}.msg{max-width:90%;border:2px solid var(--line);border-radius:18px;padding:12px;line-height:1.45}.msg.agent{align-self:flex-start;background:#fffdf4}.msg.user{align-self:flex-end;background:#314b34;color:white}#chips{padding:10px 16px;display:flex;gap:8px;flex-wrap:wrap}#chips button{border:1px solid #9aa48b;border-radius:999px;background:#fffdf4;padding:8px 10px;font-size:13px;font-weight:800}#drawer footer{padding:14px;border-top:1px solid #d7d0bd;display:grid;grid-template-columns:1fr 80px;gap:8px}#drawer input{border:2px solid #9aa48b;border-radius:16px;padding:12px}#drawer footer button{border:0;background:var(--forest);color:white;border-radius:16px;font-weight:900}.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-20px);opacity:0;transition:.2s;background:#fffdf4;border:2px solid var(--line);border-radius:999px;box-shadow:var(--shadow);padding:10px 16px;z-index:100;font-weight:900}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@media(max-width:1180px){.topbar{height:auto;grid-template-columns:1fr}.layout{grid-template-columns:1fr}.rail{display:grid;grid-template-columns:repeat(2,1fr)}.metrics{grid-template-columns:repeat(2,1fr)}.bottom{grid-template-columns:1fr}}@media(max-width:760px){body{padding:10px}.brand p{display:none}nav{width:100%;overflow:auto}.layout,.rail,.metrics{grid-template-columns:1fr}.room{height:640px;clip-path:none}.heroInfo{position:relative;left:auto;top:auto;width:auto;margin-bottom:12px}.prompt{left:12px;right:12px;bottom:12px;width:auto}.materials{grid-template-columns:1fr}.activity{grid-template-columns:1fr}.agent{width:96px!important}}


/* === v11.1 Asset-based room and character layer === */
.room{
  background:#2f4631;
}
.studioBgAsset{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.fallbackRoom .studioBgAsset{
  display:none;
}
.fallbackRoom .wall,
.fallbackRoom .floor,
.fallbackRoom .prop,
.fallbackRoom .rug{
  display:block;
}
.room:not(.fallbackRoom) .wall,
.room:not(.fallbackRoom) .floor,
.room:not(.fallbackRoom) .prop,
.room:not(.fallbackRoom) .rug{
  opacity:.95;
}
.assetAgent{
  z-index:12;
}
.assetAgent .agentBody{
  width:150px;
  height:160px;
}
.agentImg{
  display:block;
  width:100%;
  max-height:160px;
  object-fit:contain;
  filter:drop-shadow(0 18px 20px rgba(35,49,31,.28));
  transition:.2s ease;
}
.assetAgent:hover .agentImg{
  transform:translateY(-5px);
}
.agentFallback{
  display:none;
  position:relative;
  margin:auto;
  width:112px;
  height:112px;
}
.noAgentImage .agentFallback{
  display:grid;
}
.noAgentImage .agentImg{
  display:none;
}
.assetAgent .agentLabel{
  position:relative;
  z-index:3;
}
@media(max-width:760px){
  .assetAgent .agentBody{
    width:104px;
    height:116px;
  }
  .agentImg{
    max-height:116px;
  }
}

/* === v12.3 Studio proportion fixes === */
.hero{
  padding:16px;
}
.topbar{
  height:auto;
  grid-template-columns:minmax(360px,420px) minmax(420px,1fr) auto;
}
.actions{
  flex-wrap:wrap;
  align-items:center;
}
.actions button{
  white-space:nowrap;
}
.room{
  height:auto;
  min-height:0;
  aspect-ratio:1672/941;
  clip-path:none;
}
.studioBgAsset{
  object-fit:cover;
  object-position:center center;
}
.prompt{
  right:24px;
  bottom:24px;
  width:min(390px,32vw);
  min-width:300px;
}
.prompt>div{
  grid-template-columns:28px minmax(0,1fr) 40px;
  gap:8px;
  min-height:54px;
  padding:8px;
  border-radius:999px;
}
.prompt>div>b{
  display:none;
}
.prompt>div>button:not(.send){
  grid-column:2;
  min-width:0;
  overflow:hidden;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.prompt .send{
  width:40px;
  height:40px;
  grid-column:3;
}
.prompt p{
  display:none;
}
.roleBadge,
.adminAction{
  min-width:92px;
}
.roleBadge{
  background:#eef4e5!important;
}
.roleBadge.isAdmin,
.adminAction.isAdmin{
  background:#314b34!important;
  color:#fff!important;
}
.adminAction{
  background:#fff3cf!important;
}
.drawerClose{
  position:absolute;
  left:-18px;
  top:14px;
  z-index:3;
  width:38px;
  height:38px;
  border:2px solid var(--line);
  border-radius:50%;
  background:#fffdf4;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
}
#drawer header button{
  display:none;
}
#messages .msg.agent{
  position:static;
  transform:none;
  z-index:auto;
  border:2px solid var(--line);
  text-align:left;
  transition:none;
}
#messages .msg.agent:hover{
  transform:none;
}
.agentIntro{
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(6px);
  z-index:16;
  width:190px;
  padding:9px 11px;
  border:2px solid var(--line);
  border-radius:14px;
  background:#fffdf4;
  box-shadow:0 8px 0 rgba(35,49,31,.12);
  color:var(--ink);
  font-size:12px;
  font-weight:800;
  line-height:1.25;
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
}
.assetAgent:hover,
.assetAgent:focus-visible{
  z-index:20;
}
.assetAgent:hover .agentIntro,
.assetAgent:focus-visible .agentIntro{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.agentImg{
  background:transparent;
}
/* ensure agent layer sits above the video backdrop */
#agentLayer{position:relative;z-index:12}

/* video backdrop sits inside .room, behind agents but above static studio bg */
.room .videoBackdrop{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}
.room .videoBackdrop .videoBox{width:90%;max-width:1000px;height:60%;aspect-ratio:16/9;pointer-events:auto}
.room .videoBackdrop .videoPlaceholder{padding:28px;border-radius:12px}
.room .videoBackdrop iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:12px;display:none;z-index:2}
.room .videoBackdrop .videoBox{position:relative}
.room .videoBackdrop .videoBox .videoPoster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px;z-index:1;pointer-events:none;filter:brightness(0.98)}
.room .videoBackdrop .videoBox .videoPlaceholder{position:relative;z-index:3;pointer-events:auto}
.room .videoBackdrop .videoBox.hasVideo iframe{display:block}
.room .videoBackdrop .videoBox.hasVideo .videoPlaceholder{display:none}
.room .videoBackdrop .videoBox.hasVideo .videoPoster{display:none}

/* Fallback agent wrapper and beacon (static NPC visible before video/dynamic agent) */
.fallbackAgentWrap{position:absolute;left:62%;bottom:auto;top:50%;transform:translateX(-50%) translateY(-50%);z-index:11;cursor:pointer;display:flex;align-items:center;flex-direction:column;gap:8px;pointer-events:auto;transition:transform .22s ease;animation:npcIntro 700ms cubic-bezier(.22,.99,.39,1) 220ms both}
.fallbackAgentWrap.seen .npcBeacon, .fallbackAgentWrap.seen .npcLabel{opacity:0;transform:translateY(8px);pointer-events:none}
.fallbackAgentImg{display:block;max-width:400px;width:24vw;min-width:180px;height:auto;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(10,20,40,.35));transition:transform .22s ease,opacity .18s}
.fallbackAgentImg:hover{transform:translateY(-6px)}
.npcBeacon{width:18px;height:18px;border-radius:50%;background:var(--gold);box-shadow:0 6px 20px rgba(0,0,0,.25),0 0 0 8px rgba(255,210,100,0.08);animation:npcPulse 1.8s infinite;opacity:1}
.npcLabel{font-weight:900;background:rgba(255,255,255,0.96);padding:8px 12px;border-radius:999px;border:1.5px solid var(--line);font-size:13px;color:var(--forest);box-shadow:var(--shadow);opacity:0.98}
@keyframes npcPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.65}100%{transform:scale(1);opacity:1}}
@media(max-width:760px){
  .fallbackAgentWrap{left:50%;bottom:100px}
  .fallbackAgentImg{width:36vw}
  .npcLabel{display:none}
}

/* subtle intro: fade up and slight overshoot then settle */
@keyframes npcIntro{
  0%{opacity:0;transform:translateX(-50%) translateY(calc(-50% + 22px)) scale(.985)}
  60%{opacity:1;transform:translateX(-50%) translateY(calc(-50% - 6px)) scale(1.02)}
  100%{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}
}

@media (prefers-reduced-motion: reduce){
  .fallbackAgentWrap{animation:none !important}
  .npcBeacon{animation:none !important}
}
@media(max-width:1180px){
  .room{
    aspect-ratio:1672/941;
  }
  .prompt{
    width:min(360px,42vw);
  }
}
@media(max-width:760px){
  .room{
    min-height:360px;
    aspect-ratio:4/5;
  }
  .studioBgAsset{
    object-position:center top;
  }
  .prompt{
    left:12px;
    right:12px;
    bottom:12px;
    width:auto;
    min-width:0;
  }
  .prompt p{
    display:none;
  }
  .agentIntro{
    width:160px;
    font-size:11px;
  }
}


/* === v12 Beta Launch Core additions === */
.accessStatus{
  background:#e8f0dd!important;
  color:#314b34;
}
.lessonView{
  display:grid;
  gap:14px;
}
.lessonText{
  background:#fffdf4;
  border:1px solid #d4cbb6;
  border-radius:18px;
  padding:18px;
  line-height:1.7;
  white-space:normal;
}
.lessonView ul{
  padding-left:24px;
  line-height:1.8;
}
.quizQ{
  border-top:1px dashed #cabf9f;
  margin-top:12px;
  padding-top:12px;
}
.adminTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
  border-bottom:1px solid #d7d0bd;
  padding-bottom:12px;
}
.adminRow{
  display:grid;
  grid-template-columns:1.2fr 1.4fr .8fr .8fr auto auto;
  gap:8px;
  align-items:center;
  padding:9px 0;
  border-top:1px dashed #d1c7ad;
}
.adminRow:first-of-type{
  border-top:0;
}
#adminPanelBody label{
  display:block;
  margin-top:12px;
}
#adminPanelBody textarea{
  width:100%;
  border:2px solid #9aa48b;
  border-radius:16px;
  background:#fffdf4;
  padding:12px;
}
@media(max-width:760px){
  .adminRow{
    grid-template-columns:1fr;
    border:1px solid #d1c7ad;
    border-radius:14px;
    padding:12px;
    margin-bottom:8px;
  }
}


/* === v12.1 Content Engine additions === */
.lessonTop{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.videoBox{position:relative;width:100%;aspect-ratio:16/9;background:#23311f;border:2px solid #23311f;border-radius:18px;overflow:hidden}
.videoBox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lessonMaterials{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.lessonMaterials button{display:grid;grid-template-columns:42px 1fr;gap:10px;text-align:left;align-items:center;border-radius:18px!important}
.lessonMaterials span{font-size:26px}.lessonMaterials small{display:block;color:#687263;font-weight:700}
.kbPreview{display:grid;gap:8px}
.kbPreview p{border:1px dashed #c9bea4;background:#fffaf0;border-radius:14px;padding:12px}
.pdfFrame{width:100%;min-height:68vh;border:2px solid #23311f;border-radius:18px;background:#f8f4e7}
.readerActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0;
}
.buttonLike{
  display:inline-block;
  border:2px solid var(--line);
  border-radius:999px;
  background:#fffdf4;
  color:var(--ink);
  font-weight:900;
  padding:9px 14px;
  text-decoration:none;
}
.buttonLike.primary{
  background:var(--forest);
  color:#fff;
}
.cmsHint{
  border:1px dashed #b9ae91;
  border-radius:14px;
  background:#fffaf0;
  color:#4f5d49;
  line-height:1.45;
  margin:10px 0;
  padding:10px 12px;
}
.emptyPreview{
  border:2px dashed #8e9b7d;
  border-radius:18px;
  background:#fffdf4;
  padding:42px;
  text-align:center;
}
#contentManagerBody{display:block}
#contentManagerBody input,#contentManagerBody textarea{width:100%;margin:6px 0 10px}


/* === v12.3 GAS integration hardening === */
.adminTabs button{
  margin-bottom:6px;
}
#backendPingResult pre{
  white-space:pre-wrap;
  background:#fffaf0;
  border:1px dashed #c9bea4;
  border-radius:14px;
  padding:12px;
  margin-top:10px;
}
.backendModePill{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:6px 10px;
  border:1px solid #9aa48b;
  border-radius:999px;
  background:#eef4e5;
  font-weight:900;
}


/* === v12.4 Lesson View: Sections, Materials, KB, YouTube === */
.lessonView{display:flex;flex-direction:column;gap:16px}
.lessonTop{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:8px}
.lessonActions{display:flex;gap:8px;flex-wrap:wrap;padding-top:8px;border-top:1px solid #d7d0bd;margin-top:4px}
.lessonActions button{padding:10px 18px;border-radius:999px;font-weight:900}
.lessonActions button.primary{background:var(--forest);color:white;border:0}

.lessonSections{display:flex;flex-direction:column;gap:12px}
.lessonSection{border:2px solid #d4dbc6;border-radius:14px;background:#f8fdf4;padding:14px 16px}
.lessonSection h4{font-size:15px;margin-bottom:10px;color:var(--forest)}
.sectionContent{font-size:14px;line-height:1.7;white-space:pre-line}
.sectionContent .checkYes{color:#2a7}
.sectionContent .checkNo{color:#c33}

.videoBox{aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:2px solid var(--line)}
.videoBox iframe{width:100%;height:100%;border:0}
.noVideo{background:#f0f4eb;border:1px dashed #9aa48b;border-radius:10px;padding:10px 14px;font-size:13px;color:#6b7464;text-align:center}

/* === Studio hero media & modern video placeholder === */
.heroMedia{display:flex;justify-content:center;align-items:center;padding:12px 16px;margin-bottom:12px}
.videoBox#studioVideoBox{max-width:900px;width:100%;background:linear-gradient(180deg,#081426 0%,#132a3f 100%);border-radius:14px;box-shadow:0 20px 40px rgba(3,18,40,.45);overflow:hidden;border:0}
.videoBox#studioVideoBox iframe{display:block;height:100%;width:100%;border:0}
.videoPlaceholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:36px;color:#fff;text-align:center;cursor:pointer}
.videoPlaceholder svg{filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));}
.videoPlaceholder .placeholderText{font-weight:700;opacity:.95}
.videoBox#studioVideoBox:not(.hasVideo) iframe{display:none}
.videoBox#studioVideoBox.hasVideo .videoPlaceholder{display:none}
.videoBox#studioVideoBox .placeholderText{font-size:15px}

@media(max-width:760px){
  .heroMedia{padding:8px}
  .videoBox#studioVideoBox{max-width:100%;border-radius:12px}
  .videoPlaceholder{padding:20px}
  .videoPlaceholder .placeholderText{font-size:13px}
}

.lessonMaterials{display:flex;flex-direction:column;gap:8px}
.materialItem{display:flex;align-items:center;gap:10px;border:1px solid #d4dbc6;border-radius:12px;background:#f8fdf4;padding:10px 14px}
.materialItem>span{font-size:24px}
.materialItem>div{flex:1}
.materialItem button{border:2px solid var(--line);background:#fffdf4;border-radius:999px;padding:6px 12px;font-weight:900;white-space:nowrap}

.kbPreview{display:flex;flex-direction:column;gap:8px}
.kbChunk{border:1px solid #d4dbc6;border-radius:10px;background:#fffdf8;padding:10px 12px;font-size:13px;line-height:1.5}
.kbChunk b{display:block;margin-bottom:4px;color:var(--forest)}
.kbSource{display:block;margin-top:4px;color:#88956b;font-size:11px}
.kbPending{font-size:12px;color:#88956b;background:#f5f7f0;border-radius:8px;padding:6px 10px}

.lessonText{line-height:1.7;font-size:14px;background:#f8fdf4;border-radius:12px;padding:14px;border:1px solid #d4dbc6}

.cmsHint{font-size:13px;color:#6b7464;line-height:1.6;background:#f5f7f0;border-radius:10px;padding:10px 14px;border:1px solid #d4dbc6}
.cmsHint code{background:#e8ecdf;border-radius:4px;padding:2px 5px;font-family:monospace}
.adminTabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.adminTabs button{border:2px solid var(--line);background:#fbf8ef;border-radius:999px;padding:7px 14px;font-weight:900}
.adminTabs button:hover{background:var(--forest);color:white}
.adminRow{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px dashed #ccc5ad;flex-wrap:wrap}
.adminRow:first-child{border-top:0}
.roleBadge{display:none}
.roleBadge.show{display:inline-flex}
.adminAction{display:none}
.adminAction.show{display:inline-flex}
.readerCard{max-width:100%}
.pdfFrame{width:100%;height:600px;border:0;border-radius:12px;margin-top:10px}
.emptyPreview{text-align:center;padding:40px;color:#88956b;background:#f5f7f0;border-radius:12px;margin-top:10px;border:2px dashed #9aa48b}
.quizQ{margin:10px 0}
.quizQ button{display:block;width:100%;text-align:left;margin:4px 0;border-radius:10px}

/* === v12.6 AI Tutor conversation scaffolding === */
.tutorPlan{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0;
}
.tutorPlan span{
  border:1px solid #c1a45c;
  border-radius:999px;
  background:#f4e6bd;
  padding:4px 8px;
  font-size:12px;
  font-weight:900;
}
.sourceContext{
  border-left:3px solid #4d7b45;
  background:#f8f4e7;
  padding:9px 10px;
  margin:8px 0;
}
.sourceContext ul{
  margin:6px 0 0 18px;
}
.sourceContext li{
  margin:4px 0;
}
.msg.typing{
  opacity:.78;
}
#messages .msg.agent{
  align-self:stretch;
  max-width:100%;
  width:auto;
}
#drawer #messages > .msg.agent{
  align-self:stretch!important;
  max-width:100%!important;
  width:100%!important;
}

/* === v12.7 Tutor room navigation / mobile Rule of 3 === */
.roomNav{
  position:absolute;
  top:24px;
  right:24px;
  z-index:18;
  width:min(520px,48vw);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border:2px solid var(--line);
  border-radius:18px;
  background:rgba(255,253,244,.94);
  box-shadow:0 8px 0 rgba(35,49,31,.12);
  padding:10px 12px;
}
.roomNav b{
  display:block;
  font-size:15px;
}
.roomNav span{
  display:block;
  max-width:320px;
  color:#596452;
  font-size:12px;
  line-height:1.35;
}
.roomTabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.roomTabs button{
  border:1px solid #9aa48b;
  border-radius:999px;
  background:#fffdf4;
  color:var(--ink);
  padding:7px 10px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.roomTabs button.active{
  border-color:var(--forest);
  background:var(--forest);
  color:#fff;
}
@media(max-width:760px){
  .room{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:600px;
    padding:10px;
  }
  .roomNav{
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }
  .roomTabs{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:2px;
  }
  #agentLayer{
    position:relative;
    z-index:12;
    display:grid;
    grid-template-columns:repeat(3,minmax(82px,1fr));
    gap:8px;
    min-height:172px;
    margin-top:auto;
    margin-bottom:104px;
  }
  #agentLayer .assetAgent{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    transform:none!important;
  }
  #agentLayer .assetAgent:hover,
  #agentLayer .assetAgent:focus-visible{
    transform:none!important;
  }
  #agentLayer .assetAgent .agentBody{
    width:100%;
    height:96px;
  }
  #agentLayer .agentImg{
    max-height:96px;
  }
  #agentLayer .agentLabel{
    display:block;
    min-height:48px;
    padding:7px 6px;
    white-space:normal;
    line-height:1.1;
  }
}

/* === v12.8 Thai QR manual payment === */
.qrPaymentShell{
  display:grid;
  grid-template-columns:minmax(250px,.9fr) minmax(300px,1.1fr);
  gap:14px;
  align-items:start;
}
.qrPaymentCard{
  border:2px solid var(--line);
  border-radius:18px;
  background:#fbf8ef;
  padding:16px;
}
.qrPaymentTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.qrPaymentTop strong{
  border-radius:999px;
  background:var(--forest);
  color:#fff;
  padding:8px 14px;
  font-size:18px;
  white-space:nowrap;
}
.qrImageFrame{
  min-height:270px;
  border:1px dashed #9aa48b;
  border-radius:16px;
  background:#fff;
  display:grid;
  place-items:center;
  padding:12px;
  overflow:hidden;
}
.qrImageFrame img{
  display:block;
  width:100%;
  max-width:360px;
  height:auto;
  border-radius:14px;
}
.qrImageFrame img[hidden]{
  display:none;
}
.qrMissing{
  display:grid;
  gap:6px;
  text-align:center;
  color:#596452;
}
.qrMissing[hidden]{
  display:none;
}
.qrMissing b{
  color:#9f2424;
}
.qrMissing small,
.qrPaymentStatus{
  display:block;
  color:#596452;
  font-size:13px;
  line-height:1.45;
}
.qrAccountDetails{
  display:grid;
  gap:8px;
  margin:12px 0;
}
.qrAccountDetails div{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:8px;
  border-bottom:1px solid #e2dcc9;
  padding-bottom:8px;
}
.qrAccountDetails dt{
  color:#66705f;
  font-weight:900;
}
.qrAccountDetails dd{
  margin:0;
  word-break:break-word;
  font-weight:800;
}
.qrReviewCard label{
  display:block;
  margin:10px 0;
}
.qrUploadHint{
  display:block;
  margin-top:5px;
  color:#66705f;
  font-size:12px;
  line-height:1.4;
}
.qrProofInput{
  padding:10px;
  background:#fff;
}
.qrPaymentStatus{
  margin:10px 0;
}
.qrPaymentActions,
.adminPaymentActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.qrPaymentCard button,
.adminPaymentActions button{
  border:2px solid var(--line);
  background:#fffdf4;
  border-radius:999px;
  padding:9px 14px;
  font-weight:900;
  margin:4px 0;
  color:var(--ink);
}
.qrPaymentCard button.primary,
.adminPaymentActions button:first-child{
  background:var(--forest);
  color:#fff;
}
.qrPaymentActions button:disabled{
  cursor:wait;
  opacity:.6;
}
.qrPaymentError{
  color:#9f2424;
  font-weight:900;
}
.adminPaymentList{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.adminPaymentCard{
  border:1px solid #d7dfe8;
  border-radius:14px;
  background:#fff;
  padding:14px;
  box-shadow:0 8px 24px rgba(15,35,64,.06);
}
.adminPaymentMain{
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto auto;
  gap:10px;
  align-items:start;
}
.adminPaymentMain b,
.adminPaymentMain small{
  display:block;
}
.adminPaymentMain small,
.adminPaymentMeta,
.adminPaymentProof,
.adminPaymentNote{
  color:#667085;
  font-size:12px;
  line-height:1.45;
}
.adminPaymentMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:8px;
}
.adminPaymentProof,
.adminPaymentNote{
  margin-top:8px;
}
.adminPaymentProof a{
  color:#003873;
  word-break:break-all;
}
.adminPaymentSlip{
  display:grid;
  grid-template-columns:minmax(120px,180px) 1fr;
  gap:10px;
  align-items:center;
  margin-top:6px;
}
.adminPaymentSlip img{
  display:block;
  width:100%;
  max-height:220px;
  object-fit:contain;
  border:1px solid #d7dfe8;
  border-radius:10px;
  background:#fff;
}
.adminPaymentNote{
  background:#f8fbff;
  border:1px solid #e1e7ef;
  border-radius:10px;
  padding:9px 10px;
}
@media(max-width:760px){
  .qrPaymentShell,
  .adminPaymentMain{
    grid-template-columns:1fr;
  }
  .qrPaymentActions button,
  .adminPaymentActions button{
    width:100%;
  }
  .adminPaymentSlip{
    grid-template-columns:1fr;
  }
}

/* === v12.10 Next Steps panel === */
.nextStepsCard{
  background:var(--cream);
  border:2px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:18px 20px;
}
.nextStepsHead{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1.5px solid #d4d0be;
}
.nextStepsHeadIcon{
  width:52px;
  height:52px;
  flex-shrink:0;
  background:linear-gradient(180deg,#eef3e6,#dfe8d2);
  border:2px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-size:22px;
}
.nextStepsHeadIcon svg{
  width:46px;
  height:46px;
  display:block;
  margin-bottom:-4px;
}
.nextStepsSpeech strong{
  display:block;
  font-family:Quicksand,sans-serif;
  font-size:16px;
  font-weight:900;
}
.nextStepsSpeech small{
  color:var(--muted);
  font-size:12px;
}
.nextStepsHead strong{
  display:block;
  font-family:Quicksand,sans-serif;
  font-size:16px;
  font-weight:900;
}
.nextStepsHead small{
  color:var(--muted);
  font-size:12px;
}
.nextStepsList{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.nextStep{
  display:grid;
  grid-template-columns:46px 1fr auto;
  gap:14px;
  align-items:center;
  padding:13px 16px;
  background:#f8f5ec;
  border:1.5px solid #d4d0be;
  border-radius:14px;
  transition:border-color .14s, box-shadow .14s;
}
.nextStep:hover{
  border-color:#7a9a70;
  box-shadow:0 3px 12px rgba(49,75,52,.1);
}
.nextStepIcon{
  width:46px;
  height:46px;
  border-radius:12px;
  border:1.5px solid rgba(35,49,31,.15);
  display:grid;
  place-items:center;
  font-size:22px;
  flex-shrink:0;
}
.nextStepBody strong{
  display:block;
  font-size:14px;
  font-weight:900;
  color:var(--ink);
}
.nextStepBody p{
  font-size:12px;
  color:var(--muted);
  margin:3px 0 0;
  line-height:1.4;
}
.nextStepBtn{
  border:2px solid var(--forest);
  background:var(--forest);
  color:#fff;
  border-radius:999px;
  padding:9px 20px;
  font:900 13px Quicksand,sans-serif;
  white-space:nowrap;
  transition:background .14s;
}

/* === v12.13 onboarding ===
   First-time studio welcome tour, hosted by the AJ.Bank mascot.
   Self-contained overlay injected by src/ui/onboarding.js. Earth-tone:
   cream card, forest headers, gold accent, --line border + --shadow. */
.ajOnbOverlay{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(21,29,18,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
}
.ajOnbOverlay.show{
  opacity:1;
  visibility:visible;
}
.ajOnbCard{
  position:relative;
  width:min(640px,100%);
  max-height:92vh;
  overflow:auto;
  background:var(--cream);
  border:2px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:26px 26px 18px;
  transform:translateY(14px) scale(.98);
  transition:transform .22s ease;
}
.ajOnbOverlay.show .ajOnbCard{
  transform:translateY(0) scale(1);
}
.ajOnbSkip{
  position:absolute;
  top:14px;
  right:16px;
  border:0;
  background:transparent;
  color:var(--muted);
  font:900 13px Nunito,sans-serif;
  text-decoration:underline;
  padding:6px 8px;
}
.ajOnbSkip:hover{
  color:var(--forest);
}
.ajOnbGrid{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:22px;
  align-items:center;
}
.ajOnbArtWrap{
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,var(--sage),#dde6cf);
  border:2px solid var(--line);
  border-radius:20px;
  padding:10px;
}
.ajOnbArt{
  width:140px;
  height:140px;
}
.ajOnbArt svg{
  display:block;
  width:100%;
  height:100%;
}
.ajOnbStepLabel{
  display:inline-block;
  font:900 11px Quicksand,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#a07c1f;
  background:#fbedc6;
  border:1px solid var(--gold);
  border-radius:999px;
  padding:4px 11px;
  margin-bottom:10px;
}
.ajOnbHeading{
  color:var(--forest);
  font-size:24px;
  line-height:1.1;
  margin:0 0 8px;
}
.ajOnbBody{
  color:var(--ink);
  font-size:15px;
  line-height:1.5;
  margin:0 0 14px;
}
.ajOnbFields{
  display:grid;
  gap:12px;
  margin-top:10px;
}
.ajOnbFormGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.ajOnbFormGrid label,
.ajOnbQuestion{
  display:grid;
  gap:7px;
  color:var(--ink);
  font-size:13px;
  font-weight:900;
}
.ajOnbFormGrid input{
  width:100%;
  border:2px solid var(--line);
  border-radius:14px;
  background:#fffdf4;
  color:var(--ink);
  padding:10px 12px;
  font:800 14px Nunito,sans-serif;
}
.ajOnbHint{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.ajOnbChoices{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.ajOnbChoices.single{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.ajOnbChoice{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:8px;
  align-items:center;
  border:1px solid #cfc7ad;
  border-radius:14px;
  background:#fffdf4;
  padding:9px 10px;
  color:var(--ink);
  font-size:12px;
  line-height:1.25;
}
.ajOnbChoice input{
  accent-color:var(--forest);
}
.ajOnbError{
  border:1px solid #d97706;
  border-radius:12px;
  background:#fff4df;
  color:#8a3a00;
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
}
.ajOnbTutorial{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:12px;
  align-items:center;
  border:1px solid #cfc7ad;
  border-radius:16px;
  background:#fffdf4;
  padding:14px;
}
.ajOnbTutorial>span{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#e8f2e2;
  color:var(--forest);
  font:900 20px Quicksand,sans-serif;
}
.ajOnbTutorial strong{
  display:block;
  color:var(--forest);
  font:900 15px Quicksand,sans-serif;
  margin-bottom:4px;
}
.ajOnbTutorial p{
  margin:0;
  color:var(--ink);
  font-size:13px;
  line-height:1.5;
}
.ajGuideTarget{
  position:relative;
  z-index:155!important;
  outline:4px solid #FFD700;
  outline-offset:6px;
  border-radius:18px;
  box-shadow:0 0 0 9999px rgba(8,22,52,.46),0 16px 36px rgba(8,22,52,.28);
}
.ajGuideOverlay{
  position:fixed;
  inset:0;
  z-index:160;
  pointer-events:none;
}
.ajGuideCard{
  position:fixed;
  right:22px;
  bottom:22px;
  width:min(420px,calc(100vw - 32px));
  pointer-events:auto;
  border:2px solid var(--line);
  border-radius:20px;
  background:#fffdf4;
  color:var(--ink);
  box-shadow:0 24px 70px rgba(8,22,52,.28);
  padding:18px;
}
.ajGuideTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.ajGuideCount{
  display:inline-block;
  border:1px solid var(--gold);
  border-radius:999px;
  background:#fff4c7;
  color:#8a6a00;
  padding:4px 10px;
  font:900 11px Quicksand,sans-serif;
}
.ajGuideSkip{
  border:0;
  background:transparent;
  color:var(--muted);
  text-decoration:underline;
  font:900 12px Nunito,sans-serif;
  padding:5px;
}
.ajGuideTitle{
  color:var(--forest);
  font-size:22px;
  line-height:1.15;
  margin:0 0 7px;
}
.ajGuideBody{
  margin:0;
  color:var(--ink);
  font-size:14px;
  line-height:1.55;
}
.ajGuideControls{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:16px;
  padding-top:13px;
  border-top:1px solid #d7d0bd;
}
.ajGuideBack,
.ajGuideNext{
  border-radius:999px;
  padding:10px 16px;
  font:900 13px Quicksand,sans-serif;
}
.ajGuideBack{
  border:2px solid var(--line);
  background:#fbf8ef;
  color:var(--ink);
}
.ajGuideBack:disabled{
  opacity:.45;
}
.ajGuideNext{
  border:2px solid var(--forest);
  background:var(--forest);
  color:#fff;
}
.ajOnbDots{
  display:flex;
  gap:7px;
}
.ajOnbDot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#d4d0be;
  border:1px solid rgba(35,49,31,.2);
  transition:background .14s, transform .14s;
}
.ajOnbDot.on{
  background:var(--gold);
  border-color:#c89a2e;
  transform:scale(1.15);
}
.ajOnbControls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #d7d0bd;
}
.ajOnbBack{
  border:2px solid var(--line);
  background:#fbf8ef;
  color:var(--ink);
  border-radius:999px;
  padding:10px 18px;
  font:900 13px Quicksand,sans-serif;
}
.ajOnbBack:disabled{
  opacity:.4;
  cursor:default;
}
.ajOnbBack:not(:disabled):hover{
  background:var(--sage);
}
.ajOnbNext{
  border:2px solid var(--forest);
  background:var(--forest);
  color:#fff;
  border-radius:999px;
  padding:10px 24px;
  font:900 14px Quicksand,sans-serif;
  transition:background .14s;
}
.ajOnbNext:hover{
  background:#264026;
}
@media(max-width:560px){
  .ajOnbCard{
    padding:22px 18px 16px;
    border-radius:20px;
  }
  .ajOnbGrid{
    grid-template-columns:1fr;
    gap:14px;
    text-align:center;
  }
  .ajOnbArtWrap{
    width:128px;
    margin:0 auto;
  }
  .ajOnbArt{
    width:108px;
    height:108px;
  }
  .ajOnbDots{
    justify-content:center;
  }
  .ajOnbFormGrid,
  .ajOnbChoices,
  .ajOnbChoices.single{
    grid-template-columns:1fr;
    text-align:left;
  }
  .ajOnbHeading{
    font-size:21px;
  }
  .ajOnbBody{
    font-size:14px;
  }
  .ajGuideCard{
    left:12px;
    right:12px;
    bottom:12px;
    width:auto;
    padding:15px;
  }
  .ajGuideTitle{
    font-size:19px;
  }
  .ajGuideBody{
    font-size:13px;
  }
}
.nextStepBtn:hover{
  background:#4a7a4e;
  border-color:#4a7a4e;
}
@media(max-width:760px){
  .nextStep{
    grid-template-columns:40px 1fr;
    grid-template-rows:auto auto;
  }
  .nextStepBtn{
    grid-column:2;
    justify-self:start;
    margin-top:6px;
    padding:7px 16px;
    font-size:12px;
  }
}


/* === v12.13 achievements === */
/* Rail strip: compact horizontal row of earned badge icons */
.achStrip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.achChip{
  width:40px;
  height:40px;
  border:2px solid var(--gold);
  border-radius:50%;
  background:var(--sage);
  display:grid;
  place-items:center;
  font-size:20px;
  box-shadow:0 3px 0 rgba(35,49,31,.12);
  cursor:default;
}
.achEmpty{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

/* Modal summary banner */
.achSummary{
  background:var(--sage);
  border:2px solid var(--line);
  border-radius:16px;
  padding:12px 16px;
  font-weight:800;
  margin-bottom:16px;
  color:var(--ink);
}
.achSummary b{color:var(--forest)}

/* Badge gallery grid — responsive, earth-tone cards */
.achGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;
}
.achCard{
  border:2px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  background:var(--cream);
  padding:16px 14px;
  text-align:center;
  transition:.2s ease;
}
.achCard .achIcon{
  width:64px;
  height:64px;
  margin:0 auto 10px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:34px;
  border:3px solid var(--line);
  background:var(--sage);
}
.achCard strong{
  display:block;
  font-family:Quicksand,sans-serif;
  font-size:15px;
  margin-bottom:6px;
}
.achCard p{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  margin-bottom:10px;
}
.achStatus{
  display:inline-block;
  border-radius:999px;
  padding:4px 12px;
  font-size:11px;
  font-weight:900;
}

/* Earned: full color with a warm gold ring */
.achCard.earned{
  background:#fffaef;
}
.achCard.earned .achIcon{
  border-color:var(--gold);
  background:#fff4d2;
  box-shadow:0 0 0 4px rgba(232,189,91,.35);
}
.achCard.earned .achStatus{
  background:var(--gold);
  color:var(--ink);
  border:1px solid #c1a45c;
}

/* Locked: dimmed + grayscale, description acts as a hint to unlock */
.achCard.locked{
  opacity:.62;
  filter:grayscale(.85);
}
.achCard.locked .achStatus{
  background:#e3e0d3;
  color:var(--muted);
  border:1px solid #c5bfac;
}

@media(max-width:760px){
  .achGrid{
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v12.x.7 — Quest Scholar re-skin (studio ↔ landing ↔ study unification)
   Re-colours the earth-tone studio to the Scholar Blue + Quest Gold brand
   used on landing.html, and switches type to Prompt + Sarabun (loaded via
   <link> in index.html). Appended LAST so it overrides both the base
   custom-property tokens (cascade) and the hardcoded earth-tone hexes in
   the rules above. Layout, element IDs and DOM hooks are unchanged — this
   is a visual-only pass, so dashboard.js keeps working untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* 1 ─ Palette tokens (custom-property cascade: last :root wins) */
:root{
  --bg:#eef3fb;            /* soft cool canvas */
  --ink:#0c2440;           /* deep navy ink */
  --muted:#5a6b82;
  --line:#d3ddee;          /* soft cool border (was heavy dark green) */
  --forest:#003873;        /* PRIMARY → Scholar Blue */
  --cream:#ffffff;         /* clean white cards */
  --sage:#e8f0fb;          /* soft blue tint (avatars, chips) */
  --gold:#ffd700;          /* ACCENT → Quest Gold */
  --shadow:0 10px 26px rgba(0,40,90,.08);  /* soft (was hard offset) */
}

/* 2 ─ Typography → Prompt (headings/labels) + Sarabun (body) */
body{font-family:'Sarabun','Nunito',sans-serif;background:linear-gradient(180deg,#fbfdff,#eef3fb);}
h1,h2,h3,h4{font-family:'Prompt','Quicksand',sans-serif;}
.mark,.rug,.nextStepBtn,.ajOnbHeading,.ajOnbNext,.ajOnbBack,.ajOnbStepLabel,
.nextStepsHead strong,.nextStepsSpeech strong,.achCard strong{
  font-family:'Prompt','Quicksand',sans-serif;
}

/* 3 ─ Brand + top bar */
.mark{background:#fff;color:#003873;box-shadow:inset 0 0 0 2px rgba(255,215,0,.55);}
.brand b{color:#1c4f91;}
.brand p{border-left-color:#cdd9ec;color:var(--muted);}
nav,.actions button,.drawerClose,.agentIntro,.buttonLike{background:#fff;}
nav .active,nav button:hover{background:var(--forest);color:#fff;}
.roleBadge{background:#e8f0fb!important;}
.roleBadge.isAdmin,.adminAction.isAdmin{background:#003873!important;color:#fff!important;}
.adminAction{background:#fff3c4!important;}
.accessStatus{background:#e8f0fb!important;color:#003873;}

/* 4 ─ Today's Focus card */
.focus{background:linear-gradient(160deg,#1c4f91,#003873);}
.bar i{background:var(--gold);}

/* 5 ─ Hero panel + isometric room (cool the warm asset to harmonise) */
.hero{background:linear-gradient(160deg,#003873,#0a2750);}
.heroInfo{background:rgba(0,46,98,.94);}
.room{background:#0a2750;}
.room::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(165deg,rgba(0,42,92,.18),rgba(0,56,115,.04) 60%);}
.sign{background:#003873;color:#fff;border-color:rgba(255,215,0,.6);}
.rug{background:#0a2750;border-color:rgba(255,215,0,.4);color:#fff7d6;}
.desk{background:#2a5db0;}
.roomNav{background:rgba(255,255,255,.95);box-shadow:0 8px 20px rgba(0,40,90,.12);}
.roomTabs button{background:#fff;}
.agentLabel{background:#fff;box-shadow:0 4px 12px rgba(0,40,90,.12);}

/* 6 ─ Missions / roster / helper */
.mission b{background:#eef3fb;border-color:#cdd9ec;}
.mission i{border-color:#bccadf;}
.ava,#drawerIcon{background:#e8f0fb;}
.star{background:#ffe680;}

/* 7 ─ Prompt bar + metrics */
.prompt>div,.prompt p button{background:#fff;}
.ring{border-color:#dbe4f4;border-top-color:#003873;}
.classRow button{background:#003873;}

/* 8 ─ AI tutor drawer + chat */
#messages{background:#eef3fb;}
.msg.agent,#chips button{background:#fff;}
.msg.user{background:#003873;}

/* 9 ─ Modals / badges / progress */
#modal header button,.modalCard,.modalCard button,
#modal input,#modal textarea,#modal select{background:#fff;}
.badge{background:rgba(255,215,0,.18);border-color:#d9b400;color:#6b5200;}
.mProgress i{background:#003873;}

/* 10 ─ Lesson / admin / payment fragments still reachable via modals */
.videoBox{background:#071a33;border-color:#071a33;}
.lessonSection,.materialItem,.kbChunk,.lessonText{background:#f4f8ff;border-color:#d3ddee;}
.lessonSection h4,.kbChunk b{color:#003873;}
.adminTabs button:hover{background:#003873;color:#fff;}
.backendModePill{background:#e8f0fb;}
.qrPaymentCard,.qrImageFrame,.adminPaymentCard{background:#fff;}
.qrPaymentTop strong{background:#003873;}

/* 11 ─ Next-steps panel */
.nextStepsHeadIcon{background:linear-gradient(180deg,#eaf1fc,#dbe7fa);}
.nextStep{background:#f5f8fe;border-color:#dbe4f4;}
.nextStep:hover{border-color:#8fb0e0;box-shadow:0 3px 12px rgba(0,56,115,.1);}
.nextStepBtn:hover{background:#0a2750;border-color:#0a2750;}

/* 12 ─ Onboarding overlay green stragglers */
.ajOnbArtWrap{background:linear-gradient(180deg,var(--sage),#dbe7fa);}
.ajOnbNext:hover{background:#002a5c;}
.ajOnbSkip:hover{color:#003873;}


/* ═══════════════════════════════════════════════════════════════════
   v12.x.8 — Studio stage rebuilt with the landing/study protagonist
   Replaces the green isometric room photo + emoji props with a clean
   Scholar-Blue "stage" featuring the SHARED AJ.Bank protagonist cutout
   (assets/ajbank-poses/AJ.Bank_QuestScholar_Protagonist_Cutout.png — set in
   defaultData.js agents[0].image, also used on landing.html + study.html).
   DOM/JS unchanged: the #agentLayer button, .roomNav, .heroInfo and .prompt
   bar are restyled in place; the green imagery is hidden.
   ═══════════════════════════════════════════════════════════════════ */

/* Hide the earth-tone room photo + CSS-fallback props/walls/floor/rug */
.studioBgAsset,.room .wall,.room .floor,.room .prop,.room .rug{display:none!important;}

/* .hero becomes a bare positioning context; .room is the styled panel */
.hero{background:transparent;border:0;padding:0;box-shadow:none;}
.room{
  background:radial-gradient(125% 100% at 50% -8%, #0e3c75 0%, #003873 46%, #00204a 100%);
  border:1px solid rgba(255,215,0,.2);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 48px rgba(0,28,76,.28);
}
/* Quest-Gold spotlight where AJ.Bank stands (also grounds the character) */
.room::before{
  content:'';position:absolute;left:50%;bottom:-8%;transform:translateX(-50%);
  width:60%;height:78%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center bottom,rgba(255,215,0,.18) 0%,rgba(120,170,255,.08) 44%,transparent 70%);
}
/* Faint dotted grid for a modern "studio" depth (study-page tech feel) */
.room::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1.4px,transparent 1.4px);
  background-size:26px 26px;opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);
}

/* heroInfo — blue glass card, gold edge, top-left */
.heroInfo{
  background:rgba(0,28,70,.82);
  border-color:rgba(255,215,0,.32);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

/* roomNav — compact white "coach" card, top-right (no overlap with character) */
.roomNav{width:min(320px,40vw);}

/* The protagonist: large, centred, standing on the stage floor */
.ajbankAgent{
  left:50%!important;top:auto!important;bottom:0!important;
  transform:translateX(-50%)!important;width:auto!important;z-index:8;
}
.ajbankAgent:hover{transform:translateX(-50%) translateY(-6px)!important;}
.ajbankAgent .agentLabel{display:none;}     /* roomNav already names the coach */
.ajbankAgent .agentBody{
  width:min(26vw,230px);height:min(46vh,400px);
  display:flex;align-items:flex-end;justify-content:center;
}
.ajbankAgent .agentImg{
  width:100%;height:100%;max-height:none;
  object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.42));
}

/* ═══ v12.x.9 — Mobile-first studio (Agent Instruction · Phase 1) ═══
   Root fix: the v12.3 topbar grid (minmax(360px,420px) minmax(420px,1fr) auto)
   forced a ~780px min-width that was never reset for phones, so the layout
   viewport expanded past device-width → horizontal overflow, dead space, and
   floating action buttons. Collapse the top bar to a clean stack and lay the
   room out vertically (coach card → centred protagonist → ask bar). */
@media(max-width:760px){
  html,body{overflow-x:hidden;max-width:100%;}

  /* top bar → vertical stack (kills the 780px min-width that broke mobile) */
  .topbar{display:flex;flex-direction:column;align-items:stretch;gap:10px;grid-template-columns:none;}
  .brand{justify-content:flex-start;}
  nav{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .actions{justify-content:flex-start;flex-wrap:wrap;gap:8px;}

  /* every main grid → single column, never forcing width */
  .layout,.rail,.metrics,.bottom{grid-template-columns:1fr;min-width:0;}

  /* studio room → vertical: coach card, big centred character, ask bar */
  .room{display:flex;flex-direction:column;gap:10px;min-height:0;padding:12px;border-radius:18px;}
  .roomNav{order:0;width:100%;}
  #agentLayer{order:1;display:flex;align-items:flex-end;justify-content:center;min-height:240px;margin:0;position:relative;}
  /* Fallback NPC agent (visible before dynamic agents load) */
  .fallbackAgentWrap{position:absolute!important;left:50%!important;top:auto!important;bottom:60px!important;transform:translateX(-50%)!important;z-index:11!important;}
  .fallbackAgentImg{width:36vw!important;}
  .npcLabel{display:none!important;}
  /* Dynamic tutor agents */
  #agentLayer .ajbankAgent{position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:auto!important;}
  #agentLayer .ajbankAgent:hover{transform:none!important;}
  #agentLayer .ajbankAgent .agentBody{width:auto!important;height:230px!important;}
  #agentLayer .ajbankAgent .agentImg{width:auto!important;height:100%!important;max-height:230px!important;}
  .prompt{order:2;position:static!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;min-width:0!important;}
  .room::after{opacity:.4;}
}

/* RAG related-question follow-ups inside a tutor answer */
.ragRelated{
  display:block;width:100%;text-align:left;
  border:0;background:transparent;color:#003873;
  font:600 13px 'Sarabun','Nunito',sans-serif;
  padding:4px 0;cursor:pointer;line-height:1.4;
}
.ragRelated:hover{color:#0a2750;text-decoration:underline;}
.ragRelated::before{content:'↳ ';color:#d9b400;}


/* ═══════════════════════════════════════════════════════════════════
   v12.x.11 — Minimal studio hero (index.html)
   AJ.Bank protagonist on a muted, looping course-video background with a
   single "เข้าสู่บทเรียน" CTA into study.html. Replaces the full dashboard.
   ═══════════════════════════════════════════════════════════════════ */
.miniTop{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:6px 4px 14px;border-bottom:2px solid var(--line);
}
.miniTop .actions{gap:8px;}

.miniStudio{
  position:relative;overflow:hidden;border-radius:24px;margin-top:14px;
  min-height:calc(100vh - 132px);
  display:flex;align-items:stretch;
  box-shadow:0 18px 48px rgba(0,28,76,.28);
}
/* video background (cover + crop the letterbox of the 16:9 iframe) */
.miniBg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#00204a;}
.miniVideo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;
  border:0;pointer-events:none;
}
.miniTint{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(0,40,90,.55),transparent 60%),
    linear-gradient(115deg,rgba(0,40,90,.92) 0%,rgba(0,44,98,.74) 48%,rgba(0,56,115,.5) 100%);
}

.miniContent{
  position:relative;z-index:1;width:100%;
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  padding:48px clamp(24px,5vw,64px);
}
.miniCopy{max-width:620px;color:#fff;}
.miniKicker{
  display:inline-block;font:700 12px 'Prompt',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:#FFD700;margin-bottom:16px;
}
.miniCopy h1{
  font:700 clamp(30px,5vw,52px)/1.12 'Prompt',sans-serif;
  letter-spacing:-.01em;margin:0 0 16px;text-shadow:0 4px 18px rgba(0,12,40,.4);
}
.miniCopy p{font:400 17px/1.6 'Sarabun',sans-serif;color:#dce6f7;margin:0 0 30px;max-width:520px;}
.miniEnter{
  border:0;border-radius:14px;cursor:pointer;
  background:#FFD700;color:#003873;
  font:700 18px 'Prompt',sans-serif;padding:16px 34px;
  box-shadow:0 10px 28px rgba(255,215,0,.4);
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
}
.miniEnter:hover{background:#ffe84d;transform:translateY(-2px);box-shadow:0 14px 34px rgba(255,215,0,.5);}
.miniEnter:active{transform:translateY(0);}

.miniChar{align-self:end;position:relative;}
.miniChar::before{ /* gold floor glow under the character */
  content:'';position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);
  width:150%;height:40%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,215,0,.22),transparent 70%);
}
.miniChar img{
  position:relative;height:min(74vh,560px);width:auto;display:block;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.45));
}

@media(max-width:900px){
  .miniStudio{min-height:calc(100vh - 150px);}
  .miniContent{grid-template-columns:1fr;text-align:center;padding:36px 22px;}
  .miniCopy{margin:0 auto;}
  .miniCopy p{margin-left:auto;margin-right:auto;}
  .miniChar{display:none;}
}
@media(max-width:560px){
  .miniTop{padding:4px 2px 12px;}
  .miniCopy h1{font-size:28px;}
  .miniEnter{width:100%;}
}


/* ═══════════════════════════════════════════════════════════════════
   v12.x.12 — AI Learning Studio dashboard (index.html)
   Top nav + course sidebar + navy hero with a CLICKABLE AJ.Bank character
   (opens the RAG AI Tutor) + What's Next + Daily Missions + stats.
   ═══════════════════════════════════════════════════════════════════ */
.studioBody{padding:0;background:#eef2f7;color:#13233f;}

body.ajSplashLock{overflow:hidden;}
.ajAppSplash{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:24px;background:
    radial-gradient(circle at 50% 62%,rgba(0,195,255,.3),transparent 31%),
    radial-gradient(circle at 50% 48%,rgba(57,120,255,.18),transparent 24%),
    linear-gradient(180deg,#05142f 0%,#081f49 48%,#020817 100%);
  opacity:0;transition:opacity .28s ease;overflow:hidden;
}
.ajAppSplash::before{
  content:'';position:absolute;inset:-20%;
  background:
    linear-gradient(90deg,rgba(60,187,255,.13) 1px,transparent 1px),
    linear-gradient(0deg,rgba(60,187,255,.08) 1px,transparent 1px);
  background-size:42px 42px;
  transform:perspective(520px) rotateX(62deg) translateY(28%);
  transform-origin:center bottom;
  opacity:.48;
}
.ajAppSplash::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,12,33,.18),rgba(2,8,23,.45));
  pointer-events:none;
}
.ajAppSplash.isReady{opacity:1;}
.ajAppSplash.isLeaving{opacity:0;}
.ajSplashStage{position:relative;z-index:1;display:grid;justify-items:center;gap:18px;}
.ajSplashPhone{
  position:relative;width:min(330px,82vw);aspect-ratio:135/293;border-radius:28px;
  overflow:hidden;background:#061a37;
  box-shadow:0 34px 90px rgba(0,0,0,.46),0 0 70px rgba(0,187,255,.36);
  animation:ajSplashFloat 3.6s ease-in-out infinite;
}
.ajSplashPhone::before{
  content:'';position:absolute;inset:0;z-index:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 36px rgba(255,255,255,.1);
  pointer-events:none;
}
.ajSplashPhone img{width:100%;height:100%;display:block;object-fit:cover;}
.ajSplashEnter{
  border:1px solid rgba(115,219,255,.5);border-radius:999px;background:rgba(4,24,54,.72);
  color:#e8fbff;font:800 14px 'Prompt',sans-serif;letter-spacing:0;padding:11px 22px;
  box-shadow:0 12px 32px rgba(0,0,0,.26);backdrop-filter:blur(10px);
}
.ajSplashEnter:hover{background:rgba(11,68,122,.84);}
@keyframes ajSplashFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion: reduce){
  .ajSplashPhone{animation:none;}
}
@media(max-width:560px){
  .ajAppSplash{padding:18px;}
  .ajSplashPhone{width:min(300px,78vw);}
}

/* Top bar */
.stTop{
  position:sticky;top:0;z-index:40;min-height:70px;
  display:grid;grid-template-columns:minmax(190px,1fr) auto minmax(230px,1fr);align-items:center;gap:18px;
  padding:10px 24px;background:rgba(255,255,255,.96);border-bottom:1px solid #dfe7f1;
  box-shadow:0 8px 26px rgba(15,35,64,.08);backdrop-filter:blur(14px);
}
.stBrand{display:flex;align-items:center;gap:10px;justify-self:start;}
.stBrand .mark{width:40px;height:40px;border-radius:11px;background:#003873;color:#fff;display:grid;place-items:center;font:800 16px 'Prompt';box-shadow:inset 0 0 0 2px rgba(255,215,0,.55),0 5px 14px rgba(0,56,115,.18);}
.stBrand .appLogoMark{overflow:hidden;padding:0;background:#041832;}
.stBrand .appLogoMark img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 47%;}
.stBrandText{display:flex;flex-direction:column;line-height:1.02;}
.stBrand strong{font:800 17px 'Prompt';color:#13233f;}
.stBrand small{font:800 10px 'Prompt';letter-spacing:.12em;text-transform:uppercase;color:#9b7b00;margin-top:3px;}
.stTopNav{display:flex;gap:4px;justify-self:center;align-items:center;background:#f3f6fb;border:1px solid #dce5f0;border-radius:999px;padding:4px;box-shadow:inset 0 1px 2px rgba(15,35,64,.04);}
.stTopNav a{min-width:118px;text-align:center;font:700 13px 'Prompt';color:#4d5f78;cursor:pointer;padding:9px 13px;border-radius:999px;border:0;transition:.15s;white-space:nowrap;text-decoration:none;}
.stTopNav a:hover{color:#003873;background:#fff;}
.stTopNav a.active{background:#003873;color:#fff;box-shadow:0 4px 12px rgba(0,56,115,.22);}
.stTopRight{display:flex;align-items:center;gap:8px;justify-self:end;}
.stIconBtn{width:38px;height:38px;border-radius:12px;border:1px solid #dfe7f1;background:#fff;font-size:15px;color:#5a6b82;cursor:pointer;transition:.15s;}
.stIconBtn:hover{background:#f4f6fa;border-color:#cdd9ec;}
.stAdminBtn{height:40px;padding:0 17px;border-radius:999px;border:1px solid #e7c500;background:#FFD700;font:800 13px 'Prompt',sans-serif;color:#003873;cursor:pointer;white-space:nowrap;transition:.15s;box-shadow:0 6px 16px rgba(255,215,0,.22);}
.stAdminBtn:hover{filter:brightness(1.05);box-shadow:0 2px 10px rgba(255,215,0,.45);}
.stProfile{display:flex;align-items:center;gap:9px;border:1px solid #dfe7f1;background:#fff;border-radius:999px;padding:5px 6px 5px 14px;font:800 13px 'Prompt';color:#13233f;cursor:pointer;max-width:180px;}
.stProfile:hover{background:#f4f6fa;}
.stProfile #profileName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stProfile .stAvatar{width:30px;height:30px;border-radius:50%;background:#003873;color:#fff;display:inline-grid;place-items:center;font-size:14px;overflow:hidden;}
.stProfile .stAvatar svg{width:100%;height:100%;}

/* Shell: sidebar + main */
.stShell{display:grid;grid-template-columns:248px 1fr;min-height:calc(100vh - 70px);max-width:1440px;margin:0 auto;}

/* Sidebar */
.stSidebar{background:#fff;border-right:1px solid #e3e8f0;padding:20px 14px;display:flex;flex-direction:column;gap:14px;}
.stSideHead{padding:4px 8px 10px;}
.stSideHead strong{display:block;font:700 14px 'Prompt';color:#13233f;}
.stSideHead small{font:500 11px 'Sarabun';color:#8a96a8;}
.stResume{
  width:100%;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(90deg,#FFD700,#f5c518);color:#5a4500;
  font:700 13px 'Prompt';padding:12px;box-shadow:0 6px 16px rgba(245,197,24,.32);
  transition:.15s;
}
.stResume:hover{transform:translateY(-1px);box-shadow:0 9px 20px rgba(245,197,24,.42);}
.stCourseNav{display:flex;flex-direction:column;gap:3px;margin-top:4px;}
.stNavItem{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:0;background:transparent;border-radius:10px;cursor:pointer;
  padding:11px 12px;font:600 13.5px 'Sarabun';color:#46566e;transition:.13s;
}
.stNavItem:hover{background:#f4f6fa;color:#003873;}
.stNavItem.active{background:#eaf1fc;color:#003873;font-weight:700;box-shadow:inset 3px 0 0 #FFD700;}
.stNavIc{width:22px;text-align:center;font-size:15px;flex:none;}
.stNavLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stSideFoot{margin-top:auto;display:flex;flex-direction:column;gap:3px;border-top:1px solid #eef2f7;padding-top:12px;}
.stSideFoot button{border:0;background:transparent;text-align:left;padding:9px 12px;border-radius:10px;font:600 13px 'Sarabun';color:#5a6b82;cursor:pointer;}
.stSideFoot button:hover{background:#f4f6fa;color:#003873;}

/* Main */
.stMain{padding:22px clamp(16px,2.4vw,30px);display:flex;flex-direction:column;gap:20px;min-width:0;}

/* Hero */
.stHero{
  position:relative;overflow:hidden;border-radius:20px;
  min-height:clamp(210px,28vh,264px);
  background:linear-gradient(110deg,#0c2a59,#13438a);
  box-shadow:0 14px 36px rgba(11,34,80,.22);
  display:flex;align-items:center;
}
.stHeroScene{position:absolute;inset:0;overflow:hidden;}
.stHeroSceneImg{position:absolute;right:-2%;top:50%;transform:translateY(-50%);height:128%;width:auto;opacity:.9;filter:saturate(.7) brightness(.92) hue-rotate(6deg);}
.stHeroSceneTint{position:absolute;inset:0;background:linear-gradient(100deg,#0c2a59 0%,#0c2a59 34%,rgba(12,42,89,.72) 56%,rgba(12,42,89,.3) 100%);}
.stHeroCopy{position:relative;z-index:2;padding:30px clamp(24px,3vw,42px);max-width:60%;}
.stHeroPill{display:inline-block;font:600 11.5px 'Prompt';letter-spacing:.04em;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 13px;margin-bottom:14px;}
.stHeroCopy h1{font:700 clamp(22px,3vw,32px)/1.18 'Prompt';color:#fff;margin:0 0 6px;text-shadow:0 3px 14px rgba(0,10,40,.35);}
.stHeroSub{font:500 14px 'Sarabun';color:#cfe0fb;margin:0 0 20px;}
.stEnter{border:0;border-radius:12px;cursor:pointer;background:#FFD700;color:#0c2a59;font:700 15px 'Prompt';padding:13px 26px;box-shadow:0 8px 22px rgba(255,215,0,.4);transition:.15s;}
.stEnter:hover{background:#ffe84d;transform:translateY(-1px);}

/* Clickable AJ.Bank character */
.stHeroChar{position:absolute;right:clamp(8px,3vw,46px);bottom:0;z-index:3;cursor:pointer;}
.stHeroChar img{height:clamp(190px,26vh,250px);width:auto;display:block;transform-origin:bottom center;filter:drop-shadow(0 14px 22px rgba(0,0,0,.4));animation:stCharAct 5.5s ease-in-out infinite;}
.stHeroChar:hover img{animation:none;transform:translateY(-6px) scale(1.03);}
/* speech bubble sits to the upper-LEFT of the character (was clipped above it) */
.stCharBubble{
  position:absolute;bottom:56%;right:calc(100% + 6px);
  width:230px;text-align:left;z-index:4;
  background:#fff;color:#13233f;border-radius:14px;border:1px solid #e3e8f0;
  padding:11px 14px;font:600 12.5px/1.45 'Sarabun';
  box-shadow:0 10px 24px rgba(11,34,80,.24);
  transition:opacity .35s ease;
  animation:stBubbleFloat 3s ease-in-out infinite;
}
.stCharBubble.stBubbleFade{opacity:0;}
/* tail points right, toward the character */
.stCharBubble::after{content:'';position:absolute;right:-7px;bottom:18px;width:0;height:0;border:8px solid transparent;border-left-color:#fff;border-right:0;}
@keyframes stBubbleFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
/* character "acts" — gentle idle float with a periodic sway + hop */
@keyframes stCharAct{
  0%,100%{transform:translateY(0) rotate(0deg);}
  18%{transform:translateY(-5px) rotate(-1.2deg);}
  36%{transform:translateY(0) rotate(0deg);}
  54%{transform:translateY(-3px) rotate(1deg);}
  72%{transform:translateY(-10px) rotate(0deg);}
  86%{transform:translateY(0) rotate(0deg);}
}

/* What's Next + Missions grid */
.stGrid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;}
.stCard{background:#fff;border:1px solid #e8ecf3;border-radius:18px;padding:18px 20px;box-shadow:0 6px 18px rgba(11,34,80,.05);}
.stCardHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.stCardHead b{font:700 15px 'Prompt';color:#13233f;}
.stCardHead a{font:600 12.5px 'Prompt';color:#003873;cursor:pointer;}
.stCardHead a:hover{text-decoration:underline;}
.stModuleTag{font:600 11.5px 'Prompt';color:#8a96a8;background:#f4f6fa;border-radius:999px;padding:4px 11px;}

/* What's Next body */
.stNextBody{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;}
.stNextThumb{position:relative;height:96px;border:0;border-radius:13px;cursor:pointer;background:linear-gradient(135deg,#1a4a8a,#0c2a59);background-size:cover;background-position:center;overflow:hidden;}
.stNextThumb::after{content:'';position:absolute;inset:0;background:rgba(8,22,52,.32);}
.stPlay{position:absolute;inset:0;z-index:1;margin:auto;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);color:#003873;display:grid;place-items:center;font-size:15px;}
.stNextInfo{min-width:0;}
.stNextCat{font:700 10.5px 'Prompt';letter-spacing:.06em;color:#9aa6b8;}
.stNextInfo h4{font:700 16px 'Prompt';color:#13233f;margin:3px 0 4px;line-height:1.25;}
.stNextInfo p{font:400 12.5px/1.45 'Sarabun';color:#6b7892;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.stProg{height:7px;border-radius:999px;background:#eef0f4;overflow:hidden;margin-bottom:8px;}
.stProg i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#FFD700,#f5c518);}
.stNextFoot{display:flex;align-items:center;justify-content:space-between;}
.stNextFoot small{font:600 12px 'Prompt';color:#8a96a8;}
.stNextFoot a{font:700 12.5px 'Prompt';color:#003873;cursor:pointer;}
.stNextFoot a:hover{text-decoration:underline;}

/* Daily Missions */
.stMissions #stMissionList{display:flex;flex-direction:column;gap:8px;}
.stMission{display:flex;align-items:center;gap:11px;padding:9px 4px;}
.stMissionNo{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font:800 12px 'Prompt';background:#fff4cc;color:#9a7b00;}
.stMission.done .stMissionNo{background:#d9f3e3;color:#1f8a4c;}
.stMissionText{flex:1;font:600 13px 'Sarabun';color:#46566e;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stMissionPill{font:700 11.5px 'Prompt';color:#5a6b82;background:#f4f6fa;border-radius:999px;padding:4px 10px;flex:none;}
.stMission.done .stMissionPill{background:#d9f3e3;color:#1f8a4c;}

/* Stats */
.stStats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.stStat{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e8ecf3;border-radius:18px;padding:18px 20px;box-shadow:0 6px 18px rgba(11,34,80,.05);}
.stStatIc{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;background:#eaf1fc;flex:none;}
.stStat b{display:block;font:800 24px 'Prompt';color:#13233f;line-height:1;}
.stStat small{font:600 12px 'Sarabun';color:#8a96a8;}

/* Responsive */
@media(max-width:1040px){
  .stShell{grid-template-columns:1fr;}
  .stSidebar{flex-direction:row;flex-wrap:wrap;align-items:center;border-right:0;border-bottom:1px solid #e3e8f0;gap:8px;}
  .stSideHead{flex:1 1 100%;padding-bottom:4px;}
  .stResume{width:auto;}
  .stCourseNav{flex-direction:row;flex-wrap:wrap;}
  .stNavItem{width:auto;}
  .stNavLabel{max-width:140px;}
  .stSideFoot{margin:0 0 0 auto;flex-direction:row;border-top:0;padding-top:0;}
  .stGrid{grid-template-columns:1fr;}
}
@media(max-width:680px){
  .stTop{grid-template-columns:auto 1fr;min-height:auto;padding:10px 14px;row-gap:10px;}
  .stBrand small{display:none;}
  .stTopRight{gap:6px;}
  .stAdminBtn{padding:0 12px;}
  .stProfile{max-width:132px;}
  .stTopNav{order:3;grid-column:1 / -1;justify-self:stretch;overflow-x:auto;max-width:100%;padding:4px;}
  .stTopNav a{min-width:112px;padding:8px 12px;}
  .stHeroCopy{max-width:100%;}
  .stHeroChar{opacity:.28;right:-10px;}
  .stCharBubble{display:none;}
  .stNextBody{grid-template-columns:1fr;}
  .stNextThumb{height:140px;}
  .stStats{grid-template-columns:1fr;}
  .stProfileMatch{display:grid;}
  .stProfileMatch button{justify-self:start;}
}

/* ═══ v12.x.15 — Netflix-style promo rails (buy courses · e-books · ads) ═══ */
.stPromos{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.stPromoIntro{
  margin:8px 0 2px;padding:20px 22px;border:1px solid #dce7f7;border-radius:18px;
  background:linear-gradient(120deg,#f7fbff,#fff9df 58%,#eefbf5);
  box-shadow:0 10px 28px rgba(11,34,80,.08);
}
.stPromoIntro span{display:block;color:#0f766e;font:800 10.5px 'Prompt';letter-spacing:.12em;margin-bottom:6px;}
.stPromoIntro h2{margin:0;color:#13233f;font:800 22px/1.3 'Prompt';}
.stPromoIntro p{margin:5px 0 0;color:#596b80;font:500 13px/1.5 'Sarabun';}
.stProfileMatch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:8px 0 2px;
  padding:16px 18px;
  border:1px solid #dbe7d8;
  border-radius:16px;
  background:linear-gradient(120deg,#f5fff4,#f8fbff);
}
.stProfileMatch span{
  display:block;
  color:#0f766e;
  font:800 10.5px 'Prompt';
  letter-spacing:.12em;
  margin-bottom:5px;
}
.stProfileMatch h2{
  margin:0;
  color:#13233f;
  font:800 18px/1.25 'Prompt';
}
.stProfileMatch p{
  margin:4px 0 0;
  color:#596b80;
  font:500 12.5px/1.45 'Sarabun';
}
.stProfileMatch button{
  flex:none;
  border:1px solid #bfd0bf;
  border-radius:999px;
  background:#fff;
  color:#17431f;
  padding:9px 13px;
  font:800 12px 'Prompt';
}
.stRow{margin-top:8px;}
.stRowHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;}
.stRowHead b{font:700 16px 'Prompt';color:#13233f;}
.stRowHead a{font:600 12.5px 'Prompt';color:#003873;cursor:pointer;white-space:nowrap;}
.stRowHead a:hover{text-decoration:underline;}
.stRail{position:relative;}
.stRailTrack{
  display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;
  padding:6px 2px 14px;scrollbar-width:thin;scrollbar-color:#cdd9ec transparent;
}
.stRailTrack::-webkit-scrollbar{height:8px;}
.stRailTrack::-webkit-scrollbar-thumb{background:#cdd9ec;border-radius:9999px;}
.stRailTrack::-webkit-scrollbar-track{background:transparent;}
.stRailArrow{
  position:absolute;top:calc(50% - 8px);transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border-radius:50%;border:1px solid #e3e8f0;
  background:rgba(255,255,255,.96);box-shadow:0 4px 14px rgba(11,34,80,.2);
  font:700 20px 'Prompt';color:#13233f;cursor:pointer;display:grid;place-items:center;
  transition:.15s;
}
.stRailArrow:hover{background:#fff;transform:translateY(-50%) scale(1.08);}
.stRailArrow.left{left:-10px;}
.stRailArrow.right{right:-10px;}

/* poster card (courses + e-books) */
.stPoster{
  position:relative;flex:0 0 auto;width:218px;height:130px;
  border:0;border-radius:14px;overflow:hidden;cursor:pointer;text-align:left;
  background:#0c2a59 center/cover no-repeat;
  box-shadow:0 6px 16px rgba(11,34,80,.14);transition:transform .18s ease,box-shadow .18s ease;
}
.stPoster:hover{transform:scale(1.045);box-shadow:0 14px 30px rgba(11,34,80,.32);z-index:2;}
.stPosterGrad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,44,.05) 25%,rgba(6,18,44,.9));}
.stPosterTitle{position:absolute;left:13px;right:13px;bottom:11px;z-index:1;color:#fff;font:700 13.5px/1.2 'Prompt';}
.stPosterTitle small{display:block;font:500 10.5px 'Sarabun';color:#cfe0fb;margin-top:3px;letter-spacing:.02em;}
.stPosterLock{position:absolute;top:9px;right:9px;z-index:2;background:rgba(0,0,0,.55);color:#fff;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:13px;}
.stPosterBadge{position:absolute;top:9px;right:9px;z-index:2;background:rgba(255,215,0,.95);color:#0c2a59;font:800 10.5px 'Prompt';padding:3px 9px;border-radius:9999px;}
.stPosterPrice{position:absolute;top:9px;right:9px;z-index:2;background:#FFD700;color:#0c2a59;font:800 12px 'Prompt';padding:3px 10px;border-radius:9999px;}
.stPosterFlag{position:absolute;top:9px;left:9px;z-index:2;background:#e9fff3;color:#007a46;font:800 9.5px 'Prompt';letter-spacing:.04em;padding:4px 9px;border-radius:9999px;box-shadow:0 3px 9px rgba(0,0,0,.14);}
.stEbook{display:grid;place-items:center;}
.stEbookIcon{font-size:46px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));z-index:1;}

/* landscape promo / ad banner */
.stBanner{
  position:relative;flex:0 0 auto;width:340px;height:148px;
  border:0;border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;color:#fff;
  padding:18px 20px;display:flex;flex-direction:column;gap:5px;
  box-shadow:0 6px 16px rgba(11,34,80,.16);transition:transform .18s ease,box-shadow .18s ease;
}
.stBanner:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,34,80,.34);}
.stBannerTag{align-self:flex-start;font:700 10.5px 'Prompt';letter-spacing:.05em;background:rgba(255,255,255,.22);padding:3px 11px;border-radius:9999px;}
.stBannerTitle{font:700 18px 'Prompt';margin-top:4px;}
.stBannerSub{font:400 12.5px/1.4 'Sarabun';color:rgba(255,255,255,.86);flex:1;}
.stBannerCta{font:700 13px 'Prompt';color:#FFD700;}
.stFeatureBanner{background-size:cover!important;background-position:center!important;}
.stFeatureBanner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,16,38,.78),rgba(2,16,38,.26));pointer-events:none;}
.stFeatureBanner>*{position:relative;z-index:1;}
.stFeatureBanner.new .stBannerTag{background:#e9fff3;color:#007a46;}
.stFeatureBanner.hot .stBannerTag{background:#fff0d6;color:#9a4d00;}
.stFeatureBanner.featured .stBannerTag{background:#fff6bf;color:#0b2d5d;}
.stFeatureBanner.deal .stBannerTag{background:#ffe8f1;color:#a11252;}
.stDemandEmpty{
  flex:0 0 min(520px,calc(100vw - 56px));min-height:104px;padding:18px 20px;
  border:1px dashed #c7d5e9;border-radius:14px;background:#f8fbff;color:#50627a;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
}
.stDemandEmpty b{font:700 14px 'Prompt';color:#203a5f;}
.stDemandEmpty span{font:500 12.5px/1.45 'Sarabun';}

.bundlePlanIntro{
  grid-column:1/-1;
  margin-top:12px;
  background:#f8fbff!important;
  border-left:4px solid #003873!important;
}
.bundlePlanIntro p{margin-top:4px;color:#536170;line-height:1.45;}
.bundlePlanGrid{grid-column:1/-1;}
.bundlePlanCard{
  background:#fff!important;
  border-color:#cfdcf0!important;
  box-shadow:0 8px 22px rgba(15,35,64,.06);
}
.bundlePlanTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.bundlePlanTop strong{font:800 15px 'Prompt';color:#003873;}
.bundlePlanCard h3{margin:4px 0 4px;color:#13233f;}
.bundlePlanCard p{color:#536170;font:600 13px/1.45 'Sarabun';margin:0 0 8px;}
.bundlePlanCard ul{margin:8px 0 8px;padding-left:18px;color:#26384f;font:600 12.5px/1.42 'Sarabun';}
.bundlePlanCard small{display:block;color:#77859a;font:700 11.5px/1.4 'Sarabun';margin-bottom:10px;}
.bundlePlanCard button{border-color:#003873!important;color:#003873!important;background:#fff!important;}
.bundlePlanCard button:hover{background:#eaf1fc!important;}

@media(max-width:680px){
  .stPromoIntro{padding:16px 17px;}
  .stPromoIntro h2{font-size:18px;}
  .stPoster{width:170px;height:104px;}
  .stPosterFlag{font-size:8px;padding:3px 7px;}
  .stPosterPrice{font-size:10px;padding:3px 7px;}
  .stBanner{width:280px;height:136px;}
  .stRailArrow{display:none;}
}

/* Admin CMS extensions: user access, expiry, books, and promo bundles */
.adminSectionHead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.adminSectionHead h3{margin:0 0 4px}
.adminSectionHead p{margin:0;color:#5f6c7b;font-size:13px;line-height:1.45}
.adminQuickStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px}
.adminQuickStats div{border:1px solid #d7dfe8;background:#f8fbff;border-radius:12px;padding:12px}
.adminQuickStats b{display:block;color:#0a356d;font:800 22px 'Prompt'}
.adminQuickStats span{display:block;color:#667085;font:700 12px 'Sarabun'}
.adminUserToolbar{display:grid;grid-template-columns:minmax(240px,1.2fr) minmax(130px,.6fr) minmax(150px,.7fr) auto auto;gap:8px;align-items:center;margin:0 0 10px}
.adminUserToolbar input,.adminUserToolbar select{width:100%;border:1px solid #cbd5e1;border-radius:999px;background:#fff;padding:10px 12px;font:700 13px 'Prompt';color:#1f2f45}
.adminUserToolbar button{border:1px solid #cbd5e1;background:#fff;border-radius:999px;padding:10px 13px;font:800 12px 'Prompt';white-space:nowrap;color:#0a356d}
.adminUserToolbar button:hover{background:#eef5ff}
.adminUserList{display:grid;gap:14px}
.adminUserCard{border:1px solid #d7dfe8;background:#fff;border-radius:14px;padding:14px;box-shadow:0 8px 24px rgba(15,35,64,.06)}
.adminUserTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.adminUserTop h4{margin:0;color:#0a356d}
.adminUserTop p{margin:3px 0 0;color:#667085;font-size:12px}
.adminUserTop small{display:block;margin-top:4px;color:#667085;font-size:12px;line-height:1.35}
.adminSimpleManage{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr)) auto;gap:8px;align-items:end;border:1px solid #e1e7ef;background:#f9fbff;border-radius:12px;padding:10px;margin-bottom:10px}
.adminSimpleManage label{font:800 12px 'Prompt';color:#26384f}
.adminSimpleManage input,.adminSimpleManage select{margin-top:4px;width:100%;border:1px solid #cbd5e1;border-radius:10px;background:#fff;padding:9px 10px;font:700 13px 'Prompt'}
.adminSimpleManage button{align-self:end}
.adminStatus{border-radius:999px;padding:5px 10px;font:800 11px 'Prompt';text-transform:uppercase;letter-spacing:.02em;background:#eef2f6;color:#536170}
.adminStatus.ok{background:#e6f6ee;color:#137348}
.adminStatus.bad{background:#fff0ed;color:#b42318}
.adminFormGrid{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:10px;margin-bottom:10px}
.adminFormGrid label,.adminUserCard>label{font:800 12px 'Prompt';color:#26384f}
.adminFormGrid input,.adminFormGrid select,.adminUserCard textarea,.adminInline select{margin-top:4px!important;width:100%!important;border-radius:10px!important;font-weight:600!important}
.adminInline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:end}
.adminAccessDetails{border:1px solid #e1e7ef;border-radius:12px;padding:10px 12px;margin:10px 0;background:#f8fbff}
.adminAccessDetails summary{cursor:pointer;font:800 13px 'Prompt';color:#0a356d}
.adminCheckGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin-top:10px}
.adminCheck{display:flex!important;align-items:flex-start;gap:8px;margin:0!important;padding:8px;border:1px solid #e1e7ef;border-radius:10px;background:#fff;font:700 12px 'Prompt'!important;color:#1f2f45!important}
.adminCheck input{width:auto!important;margin:2px 0 0!important;flex:none}
.adminCheck small{display:block;color:#77859a;font-weight:600;margin-top:2px}
.adminUserActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.adminUserActions .danger,.adminBundleCard .danger{background:#fff0ed!important;border-color:#f2b8ae!important;color:#b42318!important}
.adminBundleList{display:grid;gap:8px;margin-bottom:14px}
.adminBundleCard{display:grid;grid-template-columns:minmax(180px,1fr) auto auto auto auto auto;gap:8px;align-items:center;border:1px solid #dfe7f1;border-radius:12px;background:#fff;padding:10px}
.adminBundleCard b{display:block;color:#0a356d}
.adminBundleCard small{display:block;color:#77859a;font-size:11px}
@media(max-width:860px){
  .adminSectionHead,.adminUserTop{flex-direction:column}
  .adminQuickStats,.adminUserToolbar,.adminSimpleManage,.adminFormGrid,.adminBundleCard{grid-template-columns:1fr}
}

/* ── v12.x.20 Partner brands strip (studio) ─────────────────────── */
.stPartners{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid #e3e8f0;border-radius:16px;
  padding:14px 18px;margin-top:18px;
}
.stPartnersLabel{font:700 11px 'Prompt',sans-serif;letter-spacing:.14em;color:#8a93a6;margin-right:4px;}
.stPartnerCard{display:flex;align-items:center;gap:11px;}
.stPartnerMark{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font:800 15px 'Prompt',sans-serif;flex:0 0 auto;
}
.stPartnerMark.xp{background:#003873;color:#FFD700;box-shadow:inset 0 0 0 2px rgba(255,215,0,.55);}

/* Live sessions and login promotions */
.stLiveSpotlight{display:grid;grid-template-columns:minmax(240px,360px) minmax(0,1fr) auto;gap:24px;align-items:center;margin-top:18px;padding:20px;background:#071b38;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 14px 34px rgba(7,27,56,.18);overflow:hidden}
.stLiveSpotlight[hidden]{display:none}
.stLiveMedia{min-height:190px;border-radius:13px;background:linear-gradient(135deg,#0d4284,#071b38);background-size:cover;background-position:center;display:flex;align-items:flex-end;gap:8px;padding:13px;font:800 11px 'Prompt';letter-spacing:.08em;position:relative;overflow:hidden}
.stLiveMedia:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(3,13,29,.82))}
.stLiveMedia>span{position:relative;z-index:1}.stLivePulse{width:9px;height:9px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 5px rgba(255,59,48,.18)}
.stLiveCopy{min-width:0}.stLiveMeta{display:flex;gap:8px;flex-wrap:wrap}.stLiveMeta span{border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:4px 9px;font:700 10px 'Prompt';letter-spacing:.06em}.stLiveCopy h2{font:700 clamp(19px,2vw,26px)/1.2 'Prompt';margin:9px 0 5px}.stLiveCopy p{color:#cbd9ef;margin:0 0 7px;font:500 13px/1.5 'Sarabun';display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.stLiveCopy small{color:#ffd600;font-weight:700}.stLiveCta,.liveJoinButton,.liveWorkbookButton{border:0;border-radius:10px;background:#ffd600;color:#002c60;padding:12px 17px;font:800 13px 'Prompt';text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}.stLiveCta:hover,.liveJoinButton:hover,.liveWorkbookButton:hover{background:#ffe24d}.liveWorkbookButton{background:#0d4284;color:#fff}.liveWorkbookButton:hover{background:#1458ad}
.liveViewer{display:grid;gap:14px}.liveViewerHead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#536170;font-size:12px}.liveStatusBadge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:#eef2f6;color:#536170;font:800 10px 'Prompt';letter-spacing:.06em}.liveStatusBadge.live{background:#ffe9e6;color:#b42318}.liveStatusBadge.scheduled{background:#e8f0ff;color:#0d4284}.liveStatusBadge.ended,.liveStatusBadge.draft{background:#eef0f2;color:#68717d}.liveEmbed{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#071b38}.liveEmbed iframe{width:100%;height:100%;border:0}.liveExternal{min-height:320px;padding:34px;border-radius:14px;background:#071b38;color:#fff;text-align:center;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end}.liveExternal p{color:#e7eefb}.liveViewer>p{margin:0;color:#536170}.liveSelectedSlot{border:1px solid #d8c174;background:#fff8dc;border-radius:12px;padding:12px 14px;color:#735c00;display:grid;gap:3px}.liveSelectedSlot b{font:800 12px 'Prompt';color:#0d4284}.liveSelectedSlot span{font:800 14px 'Sarabun'}.liveLoginPromo .loginPromoVisual{background-size:cover;background-position:center}.liveLoginPromo .loginPromoVisual b{text-shadow:0 2px 12px rgba(0,0,0,.45)}
.loginPromoCard{display:grid;grid-template-columns:minmax(180px,.72fr) minmax(0,1.28fr);overflow:hidden;border:1px solid #dfe7f1;border-radius:18px;background:#fff}.loginPromoVisual{min-height:320px;background:linear-gradient(145deg,#002c60,#0d4284 62%,#1c5bb0);color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:space-between}.loginPromoVisual span{align-self:flex-start;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:5px 10px;font:800 10px 'Prompt';letter-spacing:.08em}.loginPromoVisual b{color:#ffd600;font:800 clamp(24px,4vw,42px)/1 'Prompt';max-width:220px}.loginPromoCopy{padding:clamp(24px,4vw,42px);display:flex;flex-direction:column;justify-content:center}.loginPromoEyebrow{color:#0d4284;font:800 11px 'Prompt';letter-spacing:.07em}.loginPromoCopy h3{font:800 clamp(22px,3vw,34px)/1.2 'Prompt';color:#071b38;margin:9px 0}.loginPromoCopy p{color:#536170;line-height:1.65;margin:0}.loginPromoMeta,.loginPromoActions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.loginPromoMeta span{border-radius:999px;background:#eef4ff;color:#0d4284;padding:5px 10px;font:800 11px 'Prompt'}.loginPromoActions button{width:auto!important;margin:0!important}
.adminLiveList{display:grid;gap:8px;margin-bottom:16px}.adminLiveCard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;background:#fff;border:1px solid #dfe7f1;border-radius:13px;padding:12px}.adminLiveMain{min-width:0}.adminLiveMain h4{display:inline;margin:0 0 0 8px;color:#0a356d}.adminLiveMain p{margin:5px 0 0;color:#667085;font-size:12px}.adminLiveActions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.adminLiveActions button{width:auto!important;margin:0!important}.adminLiveActions .danger{background:#fff0ed!important;color:#b42318!important;border-color:#f2b8ae!important}.adminMarketingEditor{border:1px solid #dfe7f1;border-radius:14px;background:#f8fbff;padding:14px;margin:14px 0}.adminMarketingEditor summary{cursor:pointer;color:#0a356d;font:800 14px 'Prompt';margin-bottom:12px}.adminToggleRow{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0}.adminToggleRow label{display:flex;gap:7px;align-items:center;font-weight:700}.adminToggleRow input{width:auto!important}.adminEmptyState{border:1px dashed #cbd5e1;border-radius:12px;padding:18px;text-align:center;color:#667085;background:#fff}
.studioBody #modal.show{opacity:1!important;visibility:visible!important;transform:translate(-50%,-50%) scale(1)!important;transition:none}
.studioBody #backdrop.show{opacity:1!important;visibility:visible!important;transition:none}
@media(max-width:820px){.stLiveSpotlight{grid-template-columns:1fr}.stLiveMedia{min-height:160px}.stLiveCta{width:100%}.loginPromoCard{grid-template-columns:1fr}.loginPromoVisual{min-height:150px}.adminLiveCard{grid-template-columns:1fr}.adminLiveActions{justify-content:flex-start}}
.stPartnerMark.ek{background:#FFD700;color:#003873;box-shadow:inset 0 0 0 2px rgba(0,56,115,.30);}
.stPartnerInfo b{display:block;font:700 13.5px 'Prompt',sans-serif;color:#13233f;}
.stPartnerInfo small{display:block;font:500 11px 'Sarabun',sans-serif;color:#5a6b82;}
@media(max-width:760px){
  .stPartners{flex-direction:column;align-items:flex-start;gap:10px;padding:14px;}
}

/* ── v12.x.21 Content protection (deterrent layer) ───────────────── */
html.ajNoSelect, html.ajNoSelect body{-webkit-user-select:none;-moz-user-select:none;user-select:none;}
html.ajNoSelect input, html.ajNoSelect textarea, html.ajNoSelect select,
html.ajNoSelect [contenteditable]{-webkit-user-select:text;user-select:text;}
.ajProtToast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  z-index:99999;background:rgba(12,28,52,.94);color:#fff;
  font:600 13px 'Prompt',sans-serif;padding:10px 20px;border-radius:9999px;
  opacity:0;pointer-events:none;transition:.25s;box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.ajProtToast.show{opacity:1;transform:translateX(-50%) translateY(0);}
/* Print-to-PDF blocked only while protection is active (admin can still print) */
@media print{ html.ajNoSelect body{display:none!important;} }

/* Shield over the YouTube embed's top strip (legacy lesson modal) */
.ajVidShield{position:absolute;top:0;left:0;right:0;height:60px;z-index:5;background:transparent;}

/* Protected legacy reader: relative frame + watermark + Drive pop-out shield */
.ajReaderFrame{position:relative;}
.ajReaderFrame .pdfFrame{display:block;}
.ajDocShield{position:absolute;top:0;right:0;width:64px;height:64px;z-index:6;background:transparent;}
.ajWatermark{
  position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;
  display:flex;flex-wrap:wrap;align-content:space-around;justify-content:space-around;gap:46px;
}
.ajWatermark span{
  transform:rotate(-27deg);font:700 15px 'Prompt',sans-serif;
  color:rgba(0,56,115,.18);white-space:nowrap;letter-spacing:.04em;
  text-shadow:0 0 1px rgba(255,255,255,.5);
}