.au-ov[hidden],.au-menu[hidden]{display:none}
.au-ov,.au-menu{--ac:#ffc83a;--ac2:#f59a23;--acg:rgba(255,200,58,.35)}
.au-ov{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;
 background:radial-gradient(ellipse at 50% 30%,rgba(255,180,60,.10),transparent 60%),rgba(6,6,8,.72);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);opacity:0;transition:opacity .2s}
.au-ov.on{opacity:1}
/* การ์ดกระจกมืด ลอยเหนือพื้นหลัง */
.au-box{position:relative;width:100%;max-width:400px;max-height:calc(100vh - 32px);overflow:auto;box-sizing:border-box;padding:32px 28px 26px;border-radius:24px;color:#ece8df;font-family:inherit;
 background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 34%),linear-gradient(180deg,#232326,#18181b);
 border:1px solid rgba(255,255,255,.09);
 box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 -1px 0 rgba(0,0,0,.5) inset,0 2px 4px rgba(0,0,0,.35),0 12px 24px rgba(0,0,0,.4),0 40px 80px rgba(0,0,0,.55),0 0 90px -30px var(--acg);
 transform:translateY(14px) scale(.97);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.au-ov.on .au-box{transform:none}
.au-x{position:absolute;top:18px;right:18px;width:34px;height:34px;padding:0 0 2px;margin:0;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.08);cursor:pointer;color:#a9a59b;font:400 22px/1 inherit;background:rgba(255,255,255,.05);transition:background .15s,color .15s,transform .15s}
.au-x:hover{background:rgba(255,255,255,.12);color:#fff}
.au-x:active{transform:scale(.92)}
.au-ttl{margin:0 0 22px;padding:0 44px 0 0;font-size:24px;line-height:1.25;font-weight:700;letter-spacing:.005em;color:#f6f2e9}
/* แท็บ = สวิตช์แบบเม็ดยา */
.au-tabs{display:flex;gap:4px;margin:0 0 22px;padding:4px;border-radius:14px;background:rgba(0,0,0,.35);box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.06)}
.au-tabs button{flex:1;padding:10px 6px;border-radius:10px;border:0;cursor:pointer;color:#9a968c;font:600 14px/1.2 inherit;background:transparent;transition:color .15s,background .2s,box-shadow .2s}
.au-tabs button:hover{color:#e8e3d8}
.au-tabs button[aria-selected="true"]{color:#fff;background:linear-gradient(180deg,#3c3c41,#2d2d31);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 2px 6px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.05)}
/* ช่องกรอก */
.au-form label{display:block;margin:0 0 14px;font-size:13px;font-weight:600;color:#b4b0a5}
.au-form input{display:block;width:100%;box-sizing:border-box;margin-top:7px;padding:13px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.32);color:#f6f2e9;font:inherit;font-size:16px;font-weight:400;box-shadow:inset 0 2px 5px rgba(0,0,0,.35);transition:border-color .15s,box-shadow .15s,background .15s}
.au-form input:hover{border-color:rgba(255,255,255,.16)}
.au-form input:focus,.au-box input:focus-visible{outline:0;border-color:var(--ac);background:rgba(0,0,0,.42);box-shadow:inset 0 2px 5px rgba(0,0,0,.3),0 0 0 4px rgba(255,200,58,.16)}
.au-pw{position:relative;display:block}
.au-pw input{padding-right:68px}
.au-eye{position:absolute;right:8px;bottom:9px;border:0;background:transparent;color:#a9a59b;font:600 12.5px/1 inherit;padding:8px 10px;cursor:pointer;border-radius:8px;transition:color .15s,background .15s}
.au-eye:hover{color:var(--ac);background:rgba(255,255,255,.06)}
.au-err:empty{display:none}
.au-err{margin:0 0 14px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45;color:#ffb3a8;background:rgba(255,70,50,.10);border:1px solid rgba(255,90,70,.28)}
/* ปุ่มหลัก = ไล่สีอำพัน มีแสงเรือง */
.au-go{position:relative;display:block;width:100%;margin:6px 0 0;padding:14px 16px;border-radius:14px;border:0;cursor:pointer;color:#241a05;font:700 16px/1.2 inherit;letter-spacing:.01em;
 background:linear-gradient(180deg,#ffd45c,#f5a21f);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -2px 0 rgba(150,80,0,.25) inset,0 6px 16px -2px rgba(245,154,35,.45),0 2px 4px rgba(0,0,0,.4);transition:transform .12s,box-shadow .12s,filter .15s}
.au-go:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -2px 0 rgba(150,80,0,.25) inset,0 10px 22px -2px rgba(245,154,35,.55),0 2px 4px rgba(0,0,0,.4)}
.au-go:active{transform:translateY(1px);filter:brightness(.97);box-shadow:0 2px 6px rgba(0,0,0,.45) inset,0 2px 6px -2px rgba(245,154,35,.4)}
.au-go:disabled{cursor:wait;filter:saturate(.5) brightness(.85);transform:none;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.au-or{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:#77736a;font-size:12.5px}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14))}
.au-or::after{background:linear-gradient(270deg,transparent,rgba(255,255,255,.14))}
/* ปุ่ม Google = พื้นขาวสะอาด */
.au-g{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:0;padding:13px 16px;border-radius:14px;border:0;cursor:pointer;color:#2b2b2e;font:600 15px/1.2 inherit;
 background:linear-gradient(180deg,#ffffff,#e9e7e2);box-shadow:0 1px 0 #fff inset,0 -2px 0 rgba(0,0,0,.08) inset,0 6px 14px -4px rgba(0,0,0,.55),0 2px 3px rgba(0,0,0,.3);transition:transform .12s,box-shadow .12s,filter .15s}
.au-g svg{flex:none;width:20px;height:20px}
.au-g:hover{filter:brightness(1.03);transform:translateY(-1px);box-shadow:0 1px 0 #fff inset,0 -2px 0 rgba(0,0,0,.08) inset,0 10px 20px -4px rgba(0,0,0,.6),0 2px 3px rgba(0,0,0,.3)}
.au-g:active{transform:translateY(1px);box-shadow:0 2px 5px rgba(0,0,0,.3) inset}
.au-g:disabled{cursor:wait;filter:brightness(.8);transform:none}
.au-sw{margin:22px 0 0;text-align:center;font-size:13.5px;color:#8d897f}
.au-lk{border:0;background:none;color:var(--ac);font:inherit;font-weight:700;cursor:pointer;padding:2px 4px;border-radius:6px;text-decoration:none;transition:color .15s}
.au-lk:hover{color:#ffe08a;text-decoration:underline;text-underline-offset:3px}
.au-box :focus-visible{outline:0}
.au-box button:focus-visible{box-shadow:0 0 0 3px rgba(255,200,58,.45)}
.au-box .au-go:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.5),0 6px 16px -2px rgba(245,154,35,.45)}
/* เมนูโปรไฟล์ */
.au-menu{position:fixed;z-index:100000;min-width:230px;max-width:min(320px,calc(100vw - 24px));box-sizing:border-box;padding:16px;border-radius:18px;color:#ece8df;
 background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%),linear-gradient(180deg,#232326,#18181b);border:1px solid rgba(255,255,255,.09);
 box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 4px 8px rgba(0,0,0,.35),0 20px 40px rgba(0,0,0,.55)}
.au-mh{padding:0 0 12px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.au-mh b{display:block;font-size:15px;color:#f6f2e9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-mh b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px;vertical-align:1px;background:#3dff7a;box-shadow:0 0 8px 2px rgba(60,255,120,.45)}
.au-mh small{display:block;margin-top:3px;color:#8d897f;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-mo{display:block;width:100%;padding:11px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.09);cursor:pointer;color:#e8e3d8;font:600 14px/1.1 inherit;text-align:center;background:rgba(255,255,255,.05);transition:background .15s,color .15s,transform .1s}
.au-mo:hover{background:rgba(255,90,70,.14);color:#ffb3a8;border-color:rgba(255,90,70,.3)}
.au-mo:active{transform:scale(.98)}
/* รายการเมนูโปรไฟล์ */
.au-menu{padding:12px;min-width:250px;transform-origin:top right;animation:au-pop .16s ease-out}
@keyframes au-pop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.au-menu .au-mh{padding:4px 6px 12px;margin-bottom:8px}
.au-mi{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:10px 10px;margin:0;border:0;border-radius:10px;cursor:pointer;color:#e8e3d8;font:500 14px/1.2 inherit;text-align:left;background:transparent;transition:background .15s,color .15s}
.au-mi svg{flex:none;width:19px;height:19px;color:#a9a59b;transition:color .15s}
.au-mi span{flex:1;min-width:0}
.au-mi:hover,.au-mi:focus-visible{background:rgba(255,200,58,.1);color:#fff;outline:0}
.au-mi:hover svg,.au-mi:focus-visible svg{color:#ffc83a}
.au-mi[data-act="upgrade"] svg{color:#ffc83a}
.au-menu.guest .au-mh b::before{background:#777;box-shadow:none}
.au-menu .au-lg{margin-top:2px;color:#2b1a00;border:0;background:linear-gradient(180deg,#ffe08a,#ffc83a)}
.au-menu .au-lg:hover{background:linear-gradient(180deg,#fff0b0,#ffd45c);color:#2b1a00}
.au-menu .au-mo[hidden]{display:none}
.au-ms{height:1px;margin:6px 4px;background:rgba(255,255,255,.08)}
.au-menu .au-mo{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:2px;padding:10px;font-size:14px}
.au-menu .au-mo svg{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.au-menu{animation:none}.au-mi{transition:none}}
/* ===== ตกแต่งเมนูโปรไฟล์: กระจกฝ้า + มิติหลายชั้น ===== */
.au-menu{width:284px;min-width:284px;padding:10px;border-radius:22px;overflow:hidden;
 background:radial-gradient(120% 80px at 80% 0,rgba(255,200,58,.16),transparent 70%),linear-gradient(180deg,rgba(56,48,42,.94) 0%,rgba(30,25,21,.97) 55%,rgba(21,18,15,.98) 100%);
 -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid rgba(255,255,255,.1);
 box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 -1px 0 rgba(0,0,0,.5) inset,0 0 0 1px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.5),0 36px 80px rgba(0,0,0,.6),0 0 60px -14px rgba(255,200,58,.25)}
.au-menu>*{animation:au-it .34s cubic-bezier(.2,.9,.3,1.1) backwards}
.au-menu>:nth-child(2){animation-delay:.04s}.au-menu>:nth-child(3){animation-delay:.07s}.au-menu>:nth-child(4){animation-delay:.1s}
.au-menu>:nth-child(5){animation-delay:.13s}.au-menu>:nth-child(6){animation-delay:.16s}.au-menu>:nth-child(7){animation-delay:.19s}
.au-menu>:nth-child(n+8){animation-delay:.22s}
@keyframes au-it{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* หัวการ์ดผู้ใช้ */
.au-menu .au-mh{position:relative;display:grid;grid-template-columns:46px 1fr;column-gap:13px;align-items:center;margin:0 0 8px;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.08);
 background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 6px 14px rgba(0,0,0,.3)}
.au-menu .au-mh::before{content:"";grid-row:1/3;width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,200,58,.85);
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffe9a8'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-8 2.2-8 5v1.5c0 .8.7 1.5 1.5 1.5h13c.8 0 1.5-.7 1.5-1.5V19c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E") center 55%/54% no-repeat,linear-gradient(180deg,#55504a,#2a2724);
 box-shadow:0 0 0 3px rgba(255,200,58,.14),0 6px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.au-menu .au-mh::after{content:"";position:absolute;left:46px;top:46px;width:12px;height:12px;border-radius:50%;background:#3dff7a;border:2px solid #241f1b;box-shadow:0 0 8px 2px rgba(60,255,120,.5)}
.au-menu.guest .au-mh::after{background:#8a857b;box-shadow:none}
.au-menu.guest .au-mh::before{border-color:rgba(255,255,255,.22)}
.au-menu .au-mh b{align-self:end;font-size:15.5px;font-weight:700;color:#f8f4ea}
.au-menu .au-mh b::before{display:none}
.au-menu .au-mh small{align-self:start;margin:2px 0 0;font-size:12.5px;color:#a99c8d}
/* รายการเมนู */
.au-menu .au-mi{position:relative;gap:13px;min-height:50px;padding:8px 12px 8px 8px;margin:2px 0;border-radius:14px;border:1px solid transparent;font-size:14.5px;font-weight:600;color:#ece6da;
 transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
.au-menu .au-mi svg{flex:none;width:36px;height:36px;padding:8px;border-radius:11px;color:#ffc83a;
 background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03));box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 -1px 0 rgba(0,0,0,.3) inset,0 3px 8px rgba(0,0,0,.4);
 transition:transform .25s cubic-bezier(.2,.8,.3,1.4),background .18s,color .18s,box-shadow .18s}
.au-menu .au-mi::after{content:"›";flex:none;font-size:20px;line-height:1;color:#fff;opacity:.25;transition:transform .18s,opacity .18s}
.au-menu .au-mi:hover,.au-menu .au-mi:focus-visible{transform:translateX(3px);color:#fff;border-color:rgba(255,255,255,.1);
 background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 8px 18px rgba(0,0,0,.35)}
.au-menu .au-mi:hover svg,.au-menu .au-mi:focus-visible svg{color:#3b2100;transform:scale(1.07) rotate(-4deg);
 background:linear-gradient(180deg,#ffe98a,#ffc83a 55%,#f4a00c);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 -2px 0 rgba(150,80,0,.3) inset,0 6px 14px rgba(245,162,15,.45)}
.au-menu .au-mi:hover::after,.au-menu .au-mi:focus-visible::after{opacity:.7;transform:translateX(2px)}
.au-menu .au-mi:active{transform:translateX(3px) scale(.985);transition-duration:.08s}
.au-menu .au-mi[data-act="settings"]:hover svg{transform:scale(1.07) rotate(60deg)}
.au-menu .au-mi[data-act="upgrade"]{border-color:rgba(255,200,58,.2);background:linear-gradient(180deg,rgba(255,200,58,.14),rgba(255,200,58,.04))}
.au-menu .au-mi[data-act="upgrade"] svg{color:#3b2100;background:linear-gradient(180deg,#ffe98a,#ffc83a 55%,#f4a00c);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 -2px 0 rgba(150,80,0,.3) inset,0 4px 10px rgba(245,162,15,.4)}
.au-menu .au-ms{height:1px;margin:8px 10px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 20%,rgba(255,255,255,.16) 80%,transparent)}
/* ปุ่มล่าง: เข้าสู่ระบบ (ทอง 3 มิติ) / ออกจากระบบ (แดงนุ่ม) */
.au-menu .au-mo,.au-menu .au-lg{min-height:46px;margin:4px 0 0;border-radius:14px;font:700 14.5px/1.2 inherit;letter-spacing:.2px;transition:transform .12s,filter .15s,box-shadow .15s,background .15s}
.au-menu .au-lg{color:#3b2100;border:0;text-shadow:0 1px 0 rgba(255,255,255,.45);
 background:linear-gradient(180deg,#ffe98a,#ffc83a 55%,#f4a00c);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 -3px 0 rgba(150,80,0,.35) inset,0 8px 18px -2px rgba(245,162,15,.5),0 2px 4px rgba(0,0,0,.4)}
.au-menu .au-lg:hover{background:linear-gradient(180deg,#fff0b0,#ffd45c 55%,#f7aa18);color:#3b2100;transform:translateY(-1px);filter:brightness(1.04)}
.au-menu .au-lg:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -1px 0 rgba(150,80,0,.35) inset,0 2px 6px rgba(245,162,15,.4)}
.au-menu .au-mo:not(.au-lg){color:#ffb3a8;border:1px solid rgba(255,90,70,.25);
 background:linear-gradient(180deg,rgba(255,90,70,.16),rgba(255,90,70,.06));box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 4px 10px rgba(0,0,0,.3)}
.au-menu .au-mo:not(.au-lg):hover{color:#fff;border-color:rgba(255,90,70,.5);background:linear-gradient(180deg,#ff5a4a,#c4271a);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(90,0,0,.3) inset,0 8px 18px -2px rgba(229,40,25,.5);transform:translateY(-1px)}
.au-menu .au-mo:not(.au-lg):active{transform:translateY(1px)}
/* ธีมน่ารัก */
body.cute .au-menu{background:radial-gradient(120% 80px at 80% 0,rgba(255,143,199,.28),transparent 70%),linear-gradient(180deg,#4a3a78,#2f2450);border-color:rgba(255,143,199,.45)}
body.cute .au-menu .au-mi:hover svg,body.cute .au-menu .au-mi:focus-visible svg{background:linear-gradient(145deg,#ff8fc7,#b79cff);color:#fff;box-shadow:0 6px 16px rgba(255,143,199,.5)}
body.cute .au-menu .au-mi svg{color:#ffd0ea}
@media(max-width:360px){.au-menu{width:calc(100vw - 16px);min-width:0}}
@media(prefers-reduced-motion:reduce){.au-menu>*{animation:none}.au-menu .au-mi,.au-menu .au-mi svg,.au-menu .au-mo,.au-menu .au-lg{transition:none}.au-menu .au-mi:hover,.au-menu .au-mi:hover svg{transform:none}}
@media(max-width:420px){.au-box{padding:28px 20px 22px;border-radius:20px}.au-ttl{font-size:21px}}
@media(prefers-reduced-motion:reduce){.au-ov,.au-box,.au-go,.au-g,.au-x,.au-tabs button,.au-mo{transition:none}}