:root { --auth-cyan:#31d7ff; --auth-pink:#ff5fbc; }
#auth-modal [hidden] { display:none !important; }
.auth-trigger { min-height:38px; padding:0 15px; border-radius:12px; color:#081018; border:0; background:linear-gradient(90deg,var(--auth-cyan),#8f7dff); font:800 13px system-ui; cursor:pointer; }
.auth-trigger.signed-in { color:#e9e6ef; background:rgba(10,8,17,.72); border:1px solid rgba(255,255,255,.13); }
#auth-modal { position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:16px; background:rgba(2,1,6,.78); backdrop-filter:blur(12px); font-family:system-ui,-apple-system,sans-serif; }
#auth-modal.open { display:grid; }
.auth-card { width:min(430px,100%); padding:25px; color:#f8f5ff; border:1px solid rgba(255,255,255,.13); border-radius:22px; background:#12101b; box-shadow:0 28px 90px #000; }
.auth-head { display:flex; justify-content:space-between; align-items:start; gap:16px; }
.auth-head h2 { margin:0; font-size:24px; } .auth-head p { margin:7px 0 0; color:#9d98ad; font-size:13px; }
.auth-close { border:0; background:transparent; color:#aaa5b6; font-size:25px; cursor:pointer; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:20px 0 16px; padding:4px; border-radius:12px; background:#09080e; }
.auth-tab { height:38px; border:0; border-radius:9px; background:transparent; color:#aaa5b6; font-weight:800; cursor:pointer; }
.auth-tab.active { background:#252132; color:white; }
.auth-form { display:grid; gap:12px; }
.auth-form label { display:grid; gap:6px; color:#c8c4d0; font-size:12px; font-weight:700; }
.auth-form input { width:100%; height:44px; box-sizing:border-box; padding:0 12px; border:1px solid rgba(255,255,255,.13); border-radius:11px; outline:none; color:white; background:#09080e; font:inherit; }
.auth-form input:focus { border-color:var(--auth-cyan); box-shadow:0 0 0 3px rgba(49,215,255,.1); }
.auth-avatar-row { grid-template-columns:58px 1fr; align-items:center; padding:7px; border:1px solid rgba(255,255,255,.1); border-radius:13px; background:#0b0911; cursor:pointer; }
.auth-avatar-preview { width:52px; height:52px; display:grid; place-items:center; overflow:hidden; border-radius:50%; border:1px solid rgba(49,215,255,.35); background:linear-gradient(145deg,#24334c,#4b2149); color:white; font-size:21px; }
.auth-avatar-preview img { width:100%; height:100%; object-fit:cover; }
.auth-avatar-copy strong,.auth-avatar-copy span { display:block; }
.auth-avatar-copy strong { color:#f3effa; font-size:13px; }.auth-avatar-copy span { margin-top:4px; color:#8f8a9b; font-size:10px; font-weight:500; line-height:1.3; }
.auth-avatar-row input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.auth-submit { height:46px; margin-top:3px; border:0; border-radius:12px; color:#061016; background:linear-gradient(90deg,var(--auth-cyan),#8f7dff); font-weight:900; cursor:pointer; }
.auth-status { min-height:19px; margin:12px 0 0; color:#ff8aaa; font-size:12px; }
.auth-account { padding:18px 0 4px; text-align:center; }
.auth-account strong,.auth-account span { display:block; } .auth-account span { margin-top:5px; color:#9d98ad; font-size:13px; }
.auth-logout { margin-top:18px; height:42px; width:100%; border:1px solid rgba(255,255,255,.13); border-radius:11px; color:white; background:transparent; cursor:pointer; }
.auth-social { display:grid; place-items:center; height:44px; margin-top:18px; border-radius:11px; color:#071018; background:linear-gradient(90deg,var(--auth-cyan),#8f7dff); font-size:13px; font-weight:900; text-decoration:none; }
.auth-social + .auth-logout { margin-top:9px; }