/* ===== ธีมสีฟ้า–ขาว ===== */
:root{
  --brand:#1e5bb8; --brand-dark:#123f86; --brand-light:#e8f1ff; --brand-soft:#f4f8ff;
  --sky:#3fa3ff; --ink:#1f2d3d; --muted:#6b7c93; --line:#dbe7f8;
  --ok:#1a8f4d; --bad:#d64545; --warn:#e8a317;
  --bs-primary:#1e5bb8; --bs-primary-rgb:30,91,184;
  --bs-link-color:#1e5bb8; --bs-link-hover-color:#123f86;
  --bs-body-font-family:'Sarabun',system-ui,sans-serif;
}
body{background:var(--brand-soft);color:var(--ink);font-size:16.5px;}
h1,h2,h3,h4,h5,.brand-text,.page-title{font-family:'Prompt','Sarabun',sans-serif;}
.btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand-dark);--bs-btn-hover-border-color:var(--brand-dark);--bs-btn-active-bg:var(--brand-dark);}
.btn-outline-primary{--bs-btn-color:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand);}
.text-primary{color:var(--brand)!important}.bg-primary{background-color:var(--brand)!important}
.text-bg-primary{background-color:var(--brand)!important}
.form-control:focus,.form-select:focus{border-color:#7fb2ff;box-shadow:0 0 0 .2rem rgba(30,91,184,.15)}

/* Navbar */
.app-navbar{background:linear-gradient(90deg,var(--brand-dark),var(--brand) 60%,#2f7be0);box-shadow:0 2px 12px rgba(18,63,134,.25)}
.app-navbar .nav-link{white-space:nowrap;color:rgba(255,255,255,.85);border-radius:8px;padding:.45rem .8rem!important;margin:0 2px}
.app-navbar .nav-link:hover,.app-navbar .nav-link.active{background:rgba(255,255,255,.16);color:#fff}
.brand-mark{width:36px;height:36px;border-radius:10px;background:#fff;color:var(--brand);display:grid;place-items:center;font-size:1.2rem}
.brand-text{font-size:1.05rem;letter-spacing:.2px}
.app-footer{color:var(--muted);border-top:1px solid var(--line);background:#fff}

/* Cards */
.card{border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 10px rgba(30,91,184,.05)}
.card-header{background:#fff;border-bottom:1px solid var(--line);font-weight:600;border-radius:14px 14px 0 0!important}
.page-title{font-size:1.5rem;color:var(--brand-dark);margin-bottom:.25rem}
.page-sub{color:var(--muted);margin-bottom:1.25rem}
.stat-card{padding:1.1rem 1.25rem;border-radius:14px;background:#fff;border:1px solid var(--line);display:flex;gap:1rem;align-items:center;height:100%}
.stat-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;background:var(--brand-light);color:var(--brand);flex-shrink:0}
.stat-icon.ok{background:#e4f6ec;color:var(--ok)}.stat-icon.bad{background:#fdeaea;color:var(--bad)}.stat-icon.warn{background:#fff4dc;color:#b97f00}
.stat-num{font-size:1.7rem;font-weight:700;line-height:1.1;font-family:'Prompt',sans-serif}
.stat-label{color:var(--muted);font-size:.9rem}

/* Tables */
.table{--bs-table-striped-bg:#f6f9ff}
.table thead th{background:var(--brand);color:#fff;font-weight:500;border-color:var(--brand);white-space:nowrap}
.table-blue thead th{background:var(--brand)}
.table td{vertical-align:middle}

/* Auth pages */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-hero{background:linear-gradient(150deg,var(--brand-dark) 0%,var(--brand) 55%,var(--sky) 100%);color:#fff;padding:3.5rem;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.auth-hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.07);right:-120px;bottom:-140px}
.auth-hero h1{font-size:2rem;line-height:1.35;font-weight:600}
.auth-hero .lead{opacity:.9}
.auth-hero .feat{display:flex;gap:.75rem;align-items:flex-start;margin:.6rem 0}
.auth-hero .feat i{font-size:1.3rem;background:rgba(255,255,255,.15);border-radius:10px;padding:.35rem .55rem}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:2rem;background:#fff}
.auth-box{width:100%;max-width:440px}
.auth-box h2{color:var(--brand-dark);font-size:1.6rem}
@media(max-width:992px){.auth-wrap{grid-template-columns:1fr}.auth-hero{padding:2rem}.auth-hero h1{font-size:1.4rem}.auth-hero .feats{display:none}}

/* Episode tiles */
.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.ep-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;transition:.15s;position:relative}
.ep-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(30,91,184,.1)}
.ep-no{width:46px;height:46px;border-radius:12px;background:var(--brand-light);color:var(--brand);display:grid;place-items:center;font-weight:700;font-family:'Prompt';font-size:1.15rem}
.ep-card.passed .ep-no{background:#e4f6ec;color:var(--ok)}
.ep-card.failed .ep-no{background:#fdeaea;color:var(--bad)}
.ep-card.locked{opacity:.6}
.ep-title{font-weight:600;line-height:1.35;min-height:2.7em}

/* Passage & questions */
.passage{background:#fff;border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:12px;padding:1.4rem 1.6rem;font-size:1.12rem;line-height:1.95}
.passage p{text-indent:2.2em;margin-bottom:.8rem}
.passage img{max-width:100%;border-radius:8px;border:1px solid var(--line)}
.q-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.3rem;margin-bottom:1rem}
.q-head{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:.75rem}
.q-num{background:var(--brand);color:#fff;border-radius:10px;min-width:36px;height:36px;display:grid;place-items:center;font-weight:700}
.choice{display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;margin-bottom:.45rem;cursor:pointer;transition:.12s}
.choice:hover{background:var(--brand-soft);border-color:#9cc3ff}
.choice input{margin-top:.35rem}
.choice:has(input:checked){background:var(--brand-light);border-color:var(--brand)}
.section-tag{display:inline-block;background:var(--brand-light);color:var(--brand-dark);border-radius:999px;padding:.2rem .8rem;font-size:.85rem;font-weight:600}
.ans-correct{border-color:#9fdab8!important;background:#effaf3!important}
.ans-wrong{border-color:#f2b8b8!important;background:#fff4f4!important}
.sticky-passage{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow:auto}

/* Matrix */
.matrix td,.matrix th{text-align:center;padding:.35rem .4rem!important;font-size:.88rem}
.matrix td.name{text-align:left;white-space:nowrap}
.cell-pass{background:#dff4e7!important;color:var(--ok);font-weight:600}
.cell-fail{background:#fde4e4!important;color:var(--bad);font-weight:600}
.cell-none{color:#b5c2d3}
.legend-dot{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:middle}

.badge{font-weight:500}
.help-box{background:var(--brand-soft);border:1px dashed #9cc3ff;border-radius:12px;padding:1rem}
.small-muted{color:var(--muted);font-size:.88rem}
@media print{.app-navbar,.app-footer,.no-print{display:none!important}body{background:#fff}}

/* Guest pages (สมัคร/ลืมรหัสผ่าน) */
.guest-bg{min-height:100vh;background:linear-gradient(160deg,var(--brand-dark),var(--brand) 50%,#d9eaff 50.1%,#f4f8ff);padding:2rem 1rem}
.guest-card{max-width:760px;margin:0 auto;background:#fff;border-radius:18px;box-shadow:0 12px 40px rgba(18,63,134,.18);padding:2rem}
.guest-card.narrow{max-width:520px}
.guest-head{color:#fff;text-align:center;margin-bottom:1.25rem}
.guest-head .brand-mark{margin:0 auto .5rem;width:52px;height:52px;font-size:1.6rem}