/* KTB BSS 2027 – front theme */
:root{
  --ktb-deep:#0a3d91;      /* Krungthai navy */
  --ktb-blue:#1aa3e8;      /* sky */
  --ktb-cyan:#00e5ff;      /* neon glow */
  --ktb-ice:#e9f7ff;
  --glass:rgba(255,255,255,.62);
  --glass-brd:rgba(255,255,255,.85);
  --ink:#0b2547;
  --muted:#4d6a8c;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  font-family:'Kanit',system-ui,sans-serif;color:var(--ink);margin:0;
  background:#bfe6ff;
  overflow-x:hidden;
}
/* ---------- Background: blurred KV + circuit grid ---------- */
.bg-kv{position:fixed;inset:0;z-index:-3;background:url(../img/kv-blur.jpg) center/cover no-repeat;filter:blur(14px) saturate(1.2);transform:scale(1.1)}
.bg-veil{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.55),transparent 60%),
  linear-gradient(180deg,rgba(40,160,240,.35),rgba(225,245,255,.75) 70%)}
.bg-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.particles span{position:fixed;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px var(--ktb-cyan);opacity:.8;animation:float 9s linear infinite;z-index:-1}
@keyframes float{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-110vh);opacity:0}}

/* ---------- Layout ---------- */
.wrap{max-width:560px;margin:0 auto;padding:16px 16px 40px}
.hero{border-radius:22px;overflow:hidden;position:relative;
  box-shadow:0 20px 50px -15px rgba(10,61,145,.55),0 0 0 1px rgba(255,255,255,.8) inset}
.hero img{width:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  box-shadow:0 0 0 2px rgba(0,229,255,.6) inset,0 0 30px rgba(0,229,255,.35) inset}

.glass{background:var(--glass);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--glass-brd);border-radius:24px;
  box-shadow:0 25px 60px -20px rgba(10,61,145,.45)}
.panel{margin-top:16px;position:relative;padding:28px 24px 26px}
.panel::before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--ktb-cyan),var(--ktb-blue),transparent);box-shadow:0 0 14px var(--ktb-cyan)}

.ai-title{font-family:'Orbitron',sans-serif;font-weight:900;letter-spacing:.06em;
  background:linear-gradient(90deg,#0a3d91,#1aa3e8 50%,#0a3d91);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:1.15rem;margin:0}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:500;
  padding:4px 12px;border-radius:999px;background:rgba(10,61,145,.08);color:var(--ktb-deep);border:1px solid rgba(10,61,145,.15)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ktb-cyan);box-shadow:0 0 8px var(--ktb-cyan);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.muted{color:var(--muted)}

/* ---------- Input ---------- */
.id-input{font-family:'Orbitron',sans-serif;font-size:1.6rem;letter-spacing:.3em;text-align:center;
  height:66px;border-radius:16px;border:2px solid rgba(26,163,232,.35);background:rgba(255,255,255,.85);color:var(--ktb-deep)}
.id-input:focus{border-color:var(--ktb-blue);box-shadow:0 0 0 4px rgba(0,229,255,.25),0 0 24px rgba(0,229,255,.35)}
.id-input::placeholder{letter-spacing:.12em;font-size:1rem;font-family:'Kanit';color:#9fb6cf}

.btn-ai{position:relative;overflow:hidden;border:0;border-radius:14px;padding:13px 20px;font-weight:500;font-size:1.05rem;color:#fff;
  background:linear-gradient(135deg,#0a3d91,#1aa3e8);box-shadow:0 10px 25px -8px rgba(26,163,232,.8)}
.btn-ai:hover{color:#fff;filter:brightness(1.08);transform:translateY(-1px)}
.btn-ai::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 3s infinite}
@keyframes shine{0%{left:-60%}60%,100%{left:130%}}
.btn-ghost{border-radius:14px;padding:12px 18px;font-weight:500;border:1.5px solid rgba(10,61,145,.25);background:rgba(255,255,255,.7);color:var(--ktb-deep)}
.btn-ghost:hover{background:#fff;border-color:var(--ktb-blue);color:var(--ktb-deep)}
.btn-decline{border-radius:14px;padding:13px 18px;font-weight:500;border:1.5px solid rgba(220,53,69,.35);background:rgba(255,255,255,.75);color:#c22a3a}
.btn-decline:hover{background:#fff1f2;color:#a61e2d;border-color:#dc3545}
.link-edit{color:var(--ktb-deep);font-weight:500;text-decoration:none;border-bottom:1px dashed rgba(10,61,145,.4)}
.link-edit:hover{color:var(--ktb-blue)}

/* ---------- Profile ---------- */
.avatar{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-size:1.6rem;font-weight:600;color:#fff;
  background:linear-gradient(135deg,#1aa3e8,#0a3d91);box-shadow:0 0 0 3px #fff,0 0 22px rgba(0,229,255,.6)}
.info-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(10,61,145,.15)}
.info-row:last-child{border-bottom:0}
.info-row i{color:var(--ktb-blue);font-size:1.1rem;width:22px}
.info-row .k{color:var(--muted);font-size:.85rem;min-width:88px}
.info-row .v{font-weight:500}
.question{border-radius:18px;padding:18px;background:linear-gradient(135deg,rgba(10,61,145,.92),rgba(26,163,232,.9));color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.4) inset}
.question h5{font-weight:500;margin:0}

/* ---------- QR ---------- */
.qr-frame{position:relative;width:240px;height:240px;margin:22px auto 6px;padding:16px;border-radius:22px;background:#fff;
  box-shadow:0 0 0 2px rgba(0,229,255,.5),0 0 40px rgba(0,229,255,.45),0 18px 40px -12px rgba(10,61,145,.5)}
.qr-frame #qrcode img,.qr-frame #qrcode canvas{width:100%!important;height:100%!important}
.qr-frame .corner{position:absolute;width:26px;height:26px;border:3px solid var(--ktb-blue)}
.qr-frame .c1{top:-8px;left:-8px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.qr-frame .c2{top:-8px;right:-8px;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.qr-frame .c3{bottom:-8px;left:-8px;border-right:0;border-top:0;border-radius:0 0 0 10px}
.qr-frame .c4{bottom:-8px;right:-8px;border-left:0;border-top:0;border-radius:0 0 10px 0}
.qr-note{border-radius:14px;padding:12px 14px;background:rgba(0,229,255,.12);border:1px solid rgba(26,163,232,.35);color:var(--ktb-deep);font-weight:500}
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-weight:500;font-size:.9rem}
.status-ok{background:rgba(25,135,84,.12);color:#157347;border:1px solid rgba(25,135,84,.3)}
.status-no{background:rgba(108,117,125,.12);color:#495057;border:1px solid rgba(108,117,125,.3)}

.thanks-icon{width:96px;height:96px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:2.6rem;color:#fff;
  background:linear-gradient(135deg,#7fd3ff,#1aa3e8);box-shadow:0 0 0 6px rgba(255,255,255,.8),0 0 40px rgba(0,229,255,.55)}

.event-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.event-bar .item{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;background:rgba(10,61,145,.88);color:#fff;font-size:.88rem}
.event-bar .item i{color:var(--ktb-cyan)}

.step{animation:in .45s ease both}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.d-none-step{display:none}

.demo-hint{font-size:.78rem}
.demo-hint code{background:rgba(10,61,145,.08);color:var(--ktb-deep);padding:1px 6px;border-radius:6px;cursor:pointer}

/* SweetAlert2 theme */
.swal2-popup{border-radius:22px!important;font-family:'Kanit'!important;background:rgba(255,255,255,.95)!important}
.swal2-title{color:var(--ktb-deep)!important;font-weight:500!important}
.swal2-confirm{background:linear-gradient(135deg,#0a3d91,#1aa3e8)!important;border-radius:12px!important;padding:10px 26px!important}
.swal2-cancel{border-radius:12px!important;padding:10px 22px!important}
@media(max-width:400px){.id-input{font-size:1.25rem}.panel{padding:24px 18px}}

/* ---- states ---- */
.status-in{background:rgba(13,110,253,.12);color:#0a3d91;border:1px solid rgba(13,110,253,.3)}
.closed-note{font-size:.85rem;border-radius:12px;padding:8px 12px;background:rgba(255,193,7,.15);color:#7a5a00;border:1px solid rgba(255,193,7,.4)}

/* ---- brand header (โลโก้ + ชื่องาน แทน KV) ---- */
.brand{text-align:center;padding:26px 8px 6px}
.brand .ktb-logo{height:58px;width:auto;display:block;margin:0 auto 14px;
  filter:drop-shadow(0 0 1.5px rgba(10,61,145,.9)) drop-shadow(0 3px 8px rgba(10,61,145,.55)) drop-shadow(0 0 20px rgba(0,229,255,.35))}
.brand .ev-title{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;filter:drop-shadow(0 3px 8px rgba(10,61,145,.55))}
.brand .event-logo{max-width:88%;max-height:180px;display:block;margin:0 auto;filter:drop-shadow(0 8px 20px rgba(10,61,145,.35))}
.brand .ev-name{font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.85rem;line-height:1.15;letter-spacing:.04em;margin:0;
  background:linear-gradient(90deg,#0a3d91,#1aa3e8 55%,#0a3d91);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(0,229,255,.45))}
.brand .ev-theme{font-family:'Orbitron',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.2em;color:var(--ktb-blue);margin-top:8px}
@media(max-width:400px){.brand .ev-name{font-size:1.5rem}.brand .ev-theme{font-size:.68rem;letter-spacing:.14em}.brand .ktb-logo{height:50px}}

/* ---- online (MS Teams) ---- */
.type-chip{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;letter-spacing:.14em;padding:3px 12px;border-radius:999px;margin-bottom:8px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45)}
.teams-card{position:relative;margin:4px auto 0;padding:22px 18px 18px;border-radius:20px;color:#fff;
  background:linear-gradient(135deg,#4b53bc,#2b5fd9 55%,#1aa3e8);box-shadow:0 0 0 2px rgba(0,229,255,.45),0 18px 40px -14px rgba(43,95,217,.75)}
.teams-ic{width:64px;height:64px;margin:0 auto 10px;border-radius:18px;display:grid;place-items:center;font-size:2rem;background:rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 0 24px rgba(0,229,255,.5)}
.teams-room{font-size:1.45rem;font-weight:600;line-height:1.3;margin:4px 0 2px}