@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root { --auth-bg:#070913; --auth-surface:rgba(17,23,43,.9); --auth-line:rgba(157,180,255,.17); --auth-text:#f4f7ff; --auth-muted:#9da9c7; --auth-primary:#8061ff; --auth-cyan:#38d8ff; }
* { box-sizing:border-box; } body { min-width:320px; min-height:100vh; margin:0; color:var(--auth-text); font-family:"Noto Sans Thai","Segoe UI",sans-serif; background:radial-gradient(circle at 10% 4%,rgba(56,216,255,.13),transparent 25rem),radial-gradient(circle at 94% 95%,rgba(128,97,255,.17),transparent 32rem),var(--auth-bg); }
.auth-wrapper { min-height:100vh; display:grid; place-items:center; padding:30px 16px; }.auth-page { width:min(100%,450px); }
.auth-card { position:relative; overflow:hidden; padding:34px; border:1px solid var(--auth-line); border-radius:22px; background:var(--auth-surface); box-shadow:0 28px 80px rgba(0,0,0,.45); backdrop-filter:blur(18px); }
.auth-card::before { position:absolute; top:0; right:16%; left:16%; height:2px; content:""; background:linear-gradient(90deg,transparent,var(--auth-cyan),var(--auth-primary),transparent); }
.auth-logo { display:grid; width:76px; height:76px; margin:0 auto 14px; place-items:center; overflow:hidden; border:1px solid rgba(56,216,255,.5); border-radius:21px; background:linear-gradient(135deg,#1a3159,#211645); box-shadow:0 0 30px rgba(56,216,255,.15); }.auth-logo img { width:100%; height:100%; object-fit:contain; }
.brand-auth { margin-bottom:19px; text-align:center; }.brand-name-auth,.auth-card h2 { font-family:"Chakra Petch","Noto Sans Thai",sans-serif; font-weight:700; }.brand-name-auth { color:#fff; font-size:1.3rem; letter-spacing:.03em; }.brand-sub-auth { color:var(--auth-muted); font-size:.7rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }.auth-card h2 { margin:0 0 20px; color:#fff; font-size:1.35rem; text-align:center; }
.auth-group { margin-bottom:14px; }.auth-group label { display:block; margin-bottom:6px; color:#c6d0ec; font-size:.82rem; font-weight:600; }.auth-group input { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--auth-line); border-radius:10px; outline:0; background:rgba(4,7,16,.62); color:var(--auth-text); transition:.2s ease; }.auth-group input:focus { border-color:var(--auth-primary); box-shadow:0 0 0 4px rgba(128,97,255,.15); }
.auth-btn,.guest-btn { display:flex; width:100%; min-height:44px; align-items:center; justify-content:center; border-radius:10px; font-family:"Chakra Petch","Noto Sans Thai",sans-serif; font-weight:700; transition:.2s ease; }.auth-btn { margin-top:8px; border:1px solid #9177ff; background:linear-gradient(135deg,#8361ff,#5a42dc); color:#fff; cursor:pointer; }.auth-btn:hover,.guest-btn:hover { transform:translateY(-1px); filter:brightness(1.12); color:#fff; }.auth-link { display:block; margin-top:18px; color:#b9aeff; font-size:.87rem; text-align:center; }.auth-divider { display:flex; align-items:center; gap:10px; margin:19px 0; color:var(--auth-muted); font-size:.78rem; }.auth-divider::before,.auth-divider::after { height:1px; flex:1; content:""; background:var(--auth-line); }.auth-card-footer { margin-top:23px; color:#78839f; font-size:.72rem; text-align:center; }

.guest-btn {
    border: 1px solid rgba(56,216,255,.35);
    background: rgba(56,216,255,.08);
    color: #d6f8ff;
    text-decoration: none;
}

.guest-btn:hover,
.guest-btn:focus,
.guest-btn:active {
    color: #fff;
    text-decoration: none;
}

@media(max-width:480px) { .auth-wrapper { padding:16px 12px; }.auth-card { padding:28px 20px; border-radius:18px; } }