/* Account controls: compact, modern, and visually balanced with the PIGY hero. */
.top-actions{gap:10px}
.auth-actions{gap:3px;height:36px;padding:3px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.14);box-shadow:inset 0 1px rgba(255,255,255,.32),0 5px 14px rgba(102,30,71,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.login-button,.signup-button,.logout-button{min-height:30px;padding:0 12px;border:0;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:-.01em}.login-button{min-width:70px;color:#fff;background:transparent}.login-button:hover{background:rgba(255,255,255,.13)}.signup-button{min-width:82px;color:#c83276;background:#fff;box-shadow:0 3px 8px rgba(111,25,70,.14)}.signup-button:hover{background:#fff7fb}.account-chip{height:30px;max-width:135px;padding:2px 8px 2px 3px;border:0;background:transparent;font-size:11px}.account-chip b{width:24px;height:24px;font-size:10px}.logout-button{min-width:42px;padding:0 8px;color:#fff;background:rgba(54,20,43,.18);font-size:10px}.logout-button:hover{background:rgba(54,20,43,.3)}
.ninja-theme-toggle{width:84px;height:40px;border:1.5px solid #718896;box-shadow:inset 0 1px 3px rgba(18,78,120,.3),inset 0 -1px 2px rgba(255,255,255,.72),0 4px 10px rgba(49,72,96,.18)}.ninja-theme-toggle:before{right:-6px;bottom:-5px;width:56px;height:27px}.ninja-theme-toggle:after{right:14px;top:9px;box-shadow:-17px 10px 0 -1px #fff,-7px 22px 0 -1px rgba(255,255,255,.8),10px 15px 0 -1px #fff}.pig-theme-head{left:3px;top:3px;width:34px;height:34px;border-width:1.5px;box-shadow:inset 0 -2px 3px rgba(201,133,0,.22),0 2px 4px rgba(61,80,88,.28)}.pig-theme-head:before{left:7px;top:8px;width:17px;height:14px}.pig-theme-head:after{left:7px;top:5px;width:8px;height:5px}.ninja-theme-toggle[aria-pressed="true"] .pig-theme-head{transform:translateX(44px);box-shadow:0 2px 4px rgba(0,0,0,.34),0 0 0 1px rgba(255,189,226,.5)}.ninja-theme-toggle[aria-pressed="true"] .pig-theme-head:before{left:12px;top:12px;width:10px;height:10px;border-width:1.5px}
.login-button:focus-visible,.signup-button:focus-visible,.logout-button:focus-visible,.ninja-theme-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:680px){.top-actions{gap:7px}.ninja-theme-toggle{width:74px;height:36px}.ninja-theme-toggle:before{width:50px;height:23px}.pig-theme-head{width:30px;height:30px}.pig-theme-head:before{left:6px;top:7px;width:15px;height:12px}.pig-theme-head:after{left:6px;top:4px}.ninja-theme-toggle[aria-pressed="true"] .pig-theme-head{transform:translateX(38px)}.ninja-theme-toggle[aria-pressed="true"] .pig-theme-head:before{left:10px;top:10px;width:9px;height:9px}.auth-actions{height:34px}.login-button,.signup-button{min-height:28px;padding:0 9px;font-size:10px}.login-button{min-width:58px}.signup-button{min-width:68px}.logout-button{min-height:28px}}
@media(max-width:420px){.brand{font-size:21px}.top-actions{gap:5px}.ninja-theme-toggle{width:64px;height:34px}.pig-theme-head{width:28px;height:28px}.ninja-theme-toggle[aria-pressed="true"] .pig-theme-head{transform:translateX(32px)}.auth-actions{gap:2px}.login-button{min-width:49px;padding:0 6px}.signup-button{min-width:61px;padding:0 6px}.account-chip{padding-right:3px}.logout-button{min-width:34px;padding:0 5px;font-size:9px}}

/* รวมกฎจาก reference-ui.css เดิมเข้ามาไว้ที่เดียว (เลิกใช้ @import เพื่อลด cascade ซ้อน) */
.top-actions,.studio-actions,.studio-topbar .studio-actions,.dashboard-actions{display:flex;align-items:center;gap:10px}
.auth-actions{height:38px;padding:3px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(255,255,255,.18)}
.login-button{min-height:30px;border-radius:999px;color:#fff;background:rgba(196,45,111,.38)}
.signup-button{min-height:30px;border-radius:999px;color:#d72b75}
.ninja-theme-toggle{width:76px;height:38px}
.pig-theme-head{width:32px;height:32px}
.ninja-theme-toggle[aria-pressed="true"] .pig-theme-head{transform:translateX(38px)}
/* หน้าสตูดิโอมีพื้นหลังสว่าง ปุ่มบัญชีจึงต้องเปลี่ยนเป็นโทนเข้มเพื่อให้อ่านออก */
.studio-topbar .auth-actions{border-color:var(--pigy-line);background:#fff;box-shadow:0 5px 14px rgba(102,30,71,.08)}
.studio-topbar .login-button{color:#7a5c72;background:transparent}
.studio-topbar .login-button:hover{background:#fdeef6}
.studio-topbar .signup-button{color:#fff;background:linear-gradient(135deg,#fb4c98,#e02f80)}
.studio-topbar .account-chip{color:#5b4458}
.studio-topbar .account-chip b{color:#fff;background:linear-gradient(135deg,#fb4c98,#e02f80)}
.studio-topbar .logout-button{color:#7a5c72;background:#f6ecf2}
.studio-topbar .logout-button:hover{background:#f0dfe9}
body.ninja .studio-topbar .auth-actions{border-color:rgba(255,255,255,.1);background:#2c2d35}
body.ninja .studio-topbar .login-button,body.ninja .studio-topbar .logout-button{color:#e2d5df}
body.ninja .studio-topbar .logout-button{background:rgba(255,255,255,.08)}
body.ninja .studio-topbar .account-chip{color:#f1e8ef}
@media(max-width:640px){.studio-actions{gap:6px}}

/* กล่องเข้าสู่ระบบที่ซ่อนอยู่ (opacity 0) เคยยังรับคลิกอยู่ จึงบังปุ่มกลาง dock จนกดไม่ได้
   ซ่อนจริงด้วย visibility + pointer-events และหน่วง visibility ไว้ให้ตอนปิดยังเห็นอนิเมชันจางหาย */
.auth-dialog{visibility:hidden;pointer-events:none;transition:opacity .24s,transform .3s cubic-bezier(.22,.85,.28,1),visibility 0s linear .3s}
.auth-dialog.show{visibility:visible;pointer-events:auto;transition-delay:0s}
.auth-overlay[hidden]{display:none}
/* label ในกล่องเข้าสู่ระบบตั้ง display:grid ไว้ ซึ่งทับ [hidden] จนช่อง "ชื่อที่แสดง" โผล่ในโหมดเข้าสู่ระบบ */
.auth-dialog [hidden]{display:none}