:root{--blue:#0457c8;--deep:#082d77;--barbie:#ff4eb8;--mint:#22c55e;--ink:#13233a}*{letter-spacing:0}body{font-family:"Noto Sans Thai","Segoe UI",Tahoma,sans-serif;color:var(--ink);min-height:100vh;background:#f5fbff;overflow-x:hidden}.mesh-bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 12% 18%,rgba(255,78,184,.22),transparent 28%),radial-gradient(circle at 84% 8%,rgba(0,179,255,.24),transparent 30%),radial-gradient(circle at 75% 82%,rgba(34,197,94,.18),transparent 28%),linear-gradient(135deg,#f7fbff,#e9f7ff 48%,#fff0fb);background-size:140% 140%;animation:mesh 14s ease-in-out infinite alternate}@keyframes mesh{from{background-position:0 0}to{background-position:100% 80%}}.app-header{padding:22px 14px 12px}.top-logo{object-fit:contain;filter:drop-shadow(0 12px 20px rgba(9,74,156,.22))}.app-header h1{max-width:1100px;margin:10px auto 8px;font-weight:800;color:var(--deep);font-size:clamp(1.25rem,2.8vw,2.35rem);line-height:1.25}.clock-pill{display:inline-flex;gap:12px;background:#fff;border:1px solid rgba(4,87,200,.14);box-shadow:0 10px 24px rgba(4,87,200,.12);border-radius:999px;padding:8px 16px;color:#06479e;font-weight:700}.glass-nav{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.8);border-bottom:1px solid rgba(4,87,200,.12)}.app-shell{padding-top:24px;padding-bottom:38px}.panel{background:rgba(255,255,255,.93);border:1px solid rgba(4,87,200,.12);border-radius:8px;box-shadow:0 18px 45px rgba(4,87,200,.12);padding:22px}.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}.hero h2{font-size:clamp(1.8rem,4vw,3.25rem);font-weight:900;color:var(--deep)}.hero-img{width:100%;border-radius:8px;border:1px solid rgba(4,87,200,.14);box-shadow:0 18px 50px rgba(8,45,119,.18)}.btn{border-radius:999px;font-weight:800;padding:.7rem 1.1rem}.btn-primary{background:linear-gradient(135deg,var(--blue),#0096ff);border:0}.btn-pink{background:linear-gradient(135deg,var(--barbie),#ff86d2);color:#fff;border:0}.role-card,.metric-card{border:1px solid rgba(4,87,200,.12);border-radius:8px;background:#fff;padding:18px;height:100%;box-shadow:0 10px 25px rgba(4,87,200,.08)}.role-card:hover{transform:translateY(-3px);transition:.2s}.badge-soft{background:#e8f3ff;color:#07469f;border-radius:999px;padding:7px 12px;font-weight:800}.form-control,.form-select{border-radius:8px;padding:.75rem;border-color:#cfe0f4}.stepper{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.stepper span{background:#e9f4ff;color:#0752b3;border-radius:999px;padding:8px 12px;font-weight:800}.stepper .active{background:#0752b3;color:#fff}.status-success{color:#15803d}.status-warning{color:#b45309}.status-danger{color:#b91c1c}.status-info{color:#0369a1}.status-secondary{color:#475569}.app-footer{padding:16px 14px 34px;color:#0c3d86}.footer-logo{object-fit:contain;max-width:min(300px,90vw)}.sticker{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#e7f9ff;color:#0457c8;font-weight:900;margin-right:8px}.face-box{position:relative;background:#0b1f3a;border-radius:8px;overflow:hidden;min-height:320px;display:grid;place-items:center}.face-box video{width:100%;height:100%;min-height:320px;object-fit:cover}.face-preview{position:absolute;right:12px;bottom:12px;width:110px;height:82px;object-fit:cover;border:3px solid #fff;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.25)}.face-thumb{width:58px;height:58px;object-fit:cover;border-radius:8px;border:2px solid #e8f3ff}.face-photo{width:170px;height:170px;object-fit:cover;border-radius:8px;border:4px solid #e8f3ff}\n@media(max-width:900px){.hero{grid-template-columns:1fr}.panel{padding:16px}.top-logo{width:112px;height:112px}.clock-pill{flex-direction:column;border-radius:8px}}