@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800&display=swap');
:root{--blue:#087fd5;--blue-dark:#07558d;--cyan:#22c7e8;--pink:#ff5ca8;--pink-soft:#fff0f8;--ink:#15324b;--muted:#64798b;--surface:#fff;--bg:#f4fbff;--radius:24px;--shadow:0 18px 50px rgba(8,83,141,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:'Noto Sans Thai',system-ui,sans-serif;color:var(--ink);background:linear-gradient(180deg,#f7fcff 0,#eefaff 50%,#fff5fa 100%);min-height:100vh}.skip-link{position:absolute;left:-9999px;top:8px;background:#000;color:#fff;padding:.6rem 1rem;z-index:9999}.skip-link:focus{left:8px}.top-brand{position:relative;overflow:hidden;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.5),transparent 30%),linear-gradient(135deg,#30c7ef,#087fd5 58%,#9b5de5);color:#fff}.top-brand:before,.top-brand:after{content:'✦';position:absolute;color:#ffd4ea;font-size:48px;transform:rotate(12deg)}.top-brand:before{left:8%;top:22%}.top-brand:after{right:8%;bottom:14%}.brand-logo{object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.12));background:rgba(255,255,255,.92);border-radius:50%;padding:6px}.eyebrow{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.9}.brand-title{font-weight:800;font-size:clamp(1.55rem,4vw,2.45rem);margin:.25rem 0}.brand-tagline{font-weight:600;color:#fff}.live-clock{font-size:.9rem;color:#e9f9ff}.sticky-nav{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(8,83,141,.1)}.navbar-brand{font-weight:800;color:var(--blue-dark);display:flex;align-items:center;gap:.45rem}.navbar-brand img{border-radius:12px}.nav-link{font-weight:600;color:var(--ink);border-radius:999px;padding:.6rem .85rem!important}.nav-link:hover,.nav-link:focus{background:#e8f8ff;color:var(--blue)}.admin-menu{color:#b02372}.dropdown-menu{border:0;border-radius:18px;box-shadow:var(--shadow);padding:.6rem;z-index:1100}.dropdown-item{border-radius:12px;padding:.65rem .8rem}.btn{border-radius:999px;font-weight:700;padding:.7rem 1.2rem;border-width:0;transition:.2s transform,.2s box-shadow}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,var(--blue),#176bc6);box-shadow:0 10px 24px rgba(8,127,213,.24)}.btn-light-pink{background:linear-gradient(135deg,#ffe1f0,#fff);color:#a61d65;box-shadow:0 8px 20px rgba(255,92,168,.15)}.btn-danger{background:linear-gradient(135deg,#ef476f,#d9365c)}.hero{padding:clamp(2rem,6vw,5.5rem) 0}.hero-card{border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(235,249,255,.9));box-shadow:var(--shadow);overflow:hidden;border:1px solid rgba(255,255,255,.8)}.hero-copy{padding:clamp(1.5rem,5vw,4.5rem)}.hero h2{font-weight:800;font-size:clamp(2rem,5vw,4rem);line-height:1.18}.gradient-text{background:linear-gradient(90deg,var(--blue),#7b5cd6,var(--pink));-webkit-background-clip:text;color:transparent}.hero-img{width:100%;height:100%;min-height:360px;object-fit:cover}.sticker{display:inline-flex;align-items:center;gap:.4rem;background:var(--pink-soft);color:#a61d65;border:1px solid #ffd2e7;border-radius:999px;padding:.5rem .8rem;font-weight:700}.section-title{font-weight:800;font-size:clamp(1.6rem,4vw,2.45rem)}.soft-card{background:rgba(255,255,255,.95);border:1px solid rgba(8,127,213,.1);border-radius:var(--radius);box-shadow:var(--shadow);height:100%;overflow:hidden}.soft-card .card-body{padding:1.4rem}.module-card img{width:100%;aspect-ratio:16/10;object-fit:cover}.icon-bubble{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,#ddf7ff,#ffe1f0);color:var(--blue);font-size:1.5rem}.stat-card{padding:1.35rem}.stat-value{font-size:2rem;font-weight:800;color:var(--blue-dark)}.auth-page{background:linear-gradient(135deg,#dcf8ff,#eef4ff 45%,#ffe7f3)}.auth-card{background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.8);border-radius:30px;box-shadow:var(--shadow)}.form-control,.form-select{border:1px solid #cce6f2;border-radius:16px;padding:.78rem 1rem}.form-control:focus,.form-select:focus{border-color:var(--cyan);box-shadow:0 0 0 .25rem rgba(34,199,232,.16)}.form-label{font-weight:700}.assessment-step{display:none}.assessment-step.active{display:block}.choice-tile{display:block;border:2px solid #d9edf6;border-radius:18px;padding:1rem;cursor:pointer;transition:.2s;background:#fff}.choice-tile:has(input:checked){border-color:var(--blue);background:#eaf8ff;box-shadow:0 8px 18px rgba(8,127,213,.12)}.score-ring{--score:0;width:190px;height:190px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) calc(var(--score)*1%),#dcecf3 0);position:relative;margin:auto}.score-ring:after{content:'';position:absolute;inset:18px;border-radius:50%;background:#fff}.score-ring-content{position:relative;z-index:1;text-align:center}.score-ring strong{font-size:2.5rem;color:var(--blue-dark)}.timeline{position:relative;padding-left:2rem}.timeline:before{content:'';position:absolute;left:.55rem;top:.6rem;bottom:.6rem;width:3px;background:linear-gradient(var(--cyan),var(--pink));border-radius:4px}.timeline-item{position:relative;margin-bottom:1rem;padding:1rem;border-radius:16px;background:#fff;box-shadow:0 5px 18px rgba(8,83,141,.07)}.timeline-item:before{content:'';position:absolute;left:-1.75rem;top:1.25rem;width:15px;height:15px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 2px var(--cyan)}.table-responsive{border-radius:18px}.table{--bs-table-bg:transparent}.table thead th{background:#e7f8ff;color:var(--blue-dark);border-bottom:0;white-space:nowrap}.badge{border-radius:999px;padding:.5rem .7rem}.site-footer{color:#fff;background:linear-gradient(135deg,#07558d,#087fd5,#7b5cd6)}.footer-logo{max-width:100%;object-fit:contain;filter:brightness(0) invert(1);opacity:.95}.install-app-btn{position:fixed;right:16px;bottom:16px;z-index:1050;border:0;border-radius:999px;padding:.8rem 1rem;color:#fff;background:linear-gradient(135deg,var(--pink),#9b5de5);box-shadow:0 12px 30px rgba(155,93,229,.35);font-weight:700}.manual-nav{position:sticky;top:90px}.manual-section{scroll-margin-top:100px}.alert{border:0;border-radius:18px}.progress{height:12px;border-radius:999px;background:#dfedf3}.progress-bar{background:linear-gradient(90deg,var(--blue),var(--cyan))}.data-card{min-width:0}@media(max-width:991.98px){.brand-logo{width:105px;height:105px}.top-brand:before,.top-brand:after{font-size:28px}.sticky-nav{position:relative}.manual-nav{position:static}.hero-img{min-height:260px}.dropdown-menu{box-shadow:none;background:#f4fbff}}@media(max-width:575.98px){.hero{padding:1.25rem 0}.hero-card{border-radius:22px}.hero-copy{padding:1.35rem}.soft-card{border-radius:20px}.btn{width:100%;margin-bottom:.4rem}.btn-group .btn,.input-group .btn{width:auto;margin:0}.score-ring{width:155px;height:155px}.brand-title{font-size:1.5rem}.navbar-brand span{font-size:.95rem}}
@media print{.site-header,.site-footer,.no-print,.install-app-btn{display:none!important}body{background:#fff;color:#000}.soft-card{box-shadow:none;border:1px solid #bbb;break-inside:avoid}.container{max-width:100%!important}.manual-nav{display:none}.manual-section{break-inside:avoid}a{text-decoration:none;color:#000}}
@media(max-width:575.98px){.row.g-5{--bs-gutter-x:1.5rem}}
.mode-card{cursor:pointer;transition:.25s transform,.25s border-color,.25s box-shadow}.mode-card img{aspect-ratio:16/8;object-fit:cover}.mode-card:has(input:checked){border:3px solid var(--blue);transform:translateY(-4px);box-shadow:0 24px 60px rgba(8,127,213,.22)}.game-shell{position:relative}.game-progress{display:grid;grid-template-columns:repeat(8,1fr);gap:.4rem}.game-progress button{border:0;border-radius:14px;padding:.55rem .2rem;background:#e5f1f6;color:#6b7f8e;font-weight:800}.game-progress button.active{color:#fff;background:linear-gradient(135deg,var(--blue),var(--pink));box-shadow:0 8px 18px rgba(8,127,213,.2)}.game-progress button.done{background:#d9f7ea;color:#08724b}.simulation-stage{min-height:520px}.zone-map{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.zone-card{border:3px solid #d9edf6;background:#fff;border-radius:22px;padding:2rem 1rem;text-align:center;cursor:pointer;font-weight:800;transition:.2s}.zone-card:has(input:checked){border-color:var(--pink);background:#fff0f8;transform:translateY(-4px)}.sensor-gauge{background:linear-gradient(135deg,#eaf9ff,#fff4fa);border-radius:20px;padding:1.25rem}.sensor-number{font-size:2.5rem;font-weight:800;color:var(--blue-dark)}.needle-demo{height:150px;position:relative;display:grid;place-items:end center;border-bottom:5px solid #f2b8a3;border-radius:0 0 18px 18px}.needle-line{width:7px;height:120px;background:linear-gradient(#c7d7df,#087fd5);border-radius:6px;transform-origin:bottom center;transition:.25s transform}.live-dot{width:12px;height:12px;border-radius:50%;background:#f0ad4e;display:inline-block;box-shadow:0 0 0 0 rgba(240,173,78,.7);animation:pulse 1.5s infinite}.live-dot.connected{background:#21b573}@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}.step-kicker{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:800}.game-controls{position:sticky;bottom:12px;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid #d9edf6;border-radius:999px;padding:.6rem;box-shadow:0 12px 30px rgba(8,83,141,.14)}@media(max-width:767.98px){.game-progress{grid-template-columns:repeat(4,1fr)}.simulation-stage{min-height:420px}.zone-map{grid-template-columns:1fr}.game-controls{border-radius:22px}.game-controls .btn{width:auto;flex:1}}