/* 三个页面（主页、个人主页、房间）共用：按钮、输入框、提示条、登录弹窗、账号入口、头像 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .05); color: var(--fg); border-radius: 999px; padding: 11px 20px; font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; transition: transform .15s, filter .2s, background .2s, background-position .5s; }
.btn:hover:not(:disabled) { background-color: rgba(255, 255, 255, .09); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { cursor: not-allowed; opacity: .45; }
.btn.primary { border: 0; color: #150f1d; background: linear-gradient(115deg, var(--L), var(--V) 50%, var(--R)); background-size: 200% 100%; box-shadow: 0 10px 30px -12px rgba(180, 140, 255, .75); }
.btn.primary:hover:not(:disabled) { background-position: 100% 0; filter: brightness(1.07); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 13px; font-size: 13px; }
input.inp { width: 100%; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); color: var(--fg); font: inherit; outline: none; transition: border-color .2s, box-shadow .2s; }
input.inp:focus { border-color: rgba(180, 140, 255, .6); box-shadow: 0 0 0 3px rgba(180, 140, 255, .15); }
#toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); padding: 10px 18px; border-radius: 999px; background: rgba(30, 26, 40, .96); border: 1px solid var(--line2); color: var(--fg); font-size: 13.5px; opacity: 0; pointer-events: none; transition: .3s; z-index: 100; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.86); } }
@keyframes introIn { from { opacity: 0; } }
/* 头像：客人剪影的上半身，套在一个渐变圆里 */
.ke-av { position: relative; display: inline-block; flex: none; width: var(--s, 28px); height: var(--s, 28px); border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, rgba(var(--L-rgb), .55), rgba(180, 140, 255, .45) 55%, rgba(var(--R-rgb), .5)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 0 14px rgba(180, 140, 255, .35); }
.ke-av::after { content: ''; position: absolute; inset: 0; background: #fff8fc; -webkit-mask: var(--img) no-repeat; mask: var(--img) no-repeat; -webkit-mask-size: var(--ms, 250%) auto; mask-size: var(--ms, 250%) auto; -webkit-mask-position: var(--mx, 50%) 12%; mask-position: var(--mx, 50%) 12%; }

/* ---------- 账号 ---------- */
.corner { display: flex; align-items: center; gap: 10px; }
.acct-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); font-size: 13px; letter-spacing: .06em; color: var(--fg); transition: border-color .25s, background .25s; }
.acct-chip:hover { border-color: rgba(180, 140, 255, .6); background: rgba(180, 140, 255, .1); }
.acct-chip i { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -8px; border-radius: 50%; font-style: normal; font-size: 12px; color: #150f1d; background: linear-gradient(135deg, var(--L), var(--V), var(--R)); }
.acct-pop { position: fixed; z-index: 90; min-width: 170px; padding: 6px; border-radius: 14px; background: rgba(22, 19, 32, .98); border: 1px solid var(--line2); box-shadow: 0 20px 50px -20px #000; animation: pop .2s both; }
.acct-pop small { display: block; padding: 6px 10px 4px; color: var(--fg3); font-size: 11.5px; }
.acct-pop button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--fg); font-size: 13.5px; }
.acct-pop button:hover { background: rgba(255, 255, 255, .07); }
.auth-ov { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; background: rgba(6, 5, 10, .66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: introIn .2s both; }
.auth-ov.out { opacity: 0; transition: opacity .2s; }
.auth { width: min(400px, 100%); display: grid; gap: 16px; padding: 26px 26px 22px; border-radius: 24px; background: rgba(22, 19, 32, .97); border: 1px solid var(--line2); box-shadow: 0 40px 100px -30px #000, 0 0 0 5px rgba(180, 140, 255, .05); animation: pop .3s cubic-bezier(.2, 1.2, .4, 1) both; }
.auth-h { display: grid; justify-items: center; gap: 14px; }
.auth-brand { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-weight: 700; font-size: 34px; letter-spacing: .12em; line-height: 1; }
.auth-h h2 { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 600; }
.auth-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); }
.auth-tabs button { padding: 7px 20px; border: 0; border-radius: 999px; background: none; color: var(--fg3); font-size: 14px; }
.auth-tabs button.on { background: rgba(255, 255, 255, .1); color: var(--fg); }
.auth-f { display: grid; gap: 12px; }
.af { display: grid; gap: 5px; }
.af span { font-size: 12px; letter-spacing: .06em; color: var(--fg2); }
.af .inp { width: 100%; }
.auth-err { margin: 0; font-size: 13px; color: var(--bad); }
.auth-err[hidden] { display: none; }
.auth-f .btn { margin-top: 4px; }
.auth-fine { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--fg3); }
.lnk { border: 0; background: none; padding: 0; color: var(--fg2); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .25); }
.lnk:hover { color: var(--fg); }
.code-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 14px; background: rgba(180, 140, 255, .08); border: 1px dashed rgba(180, 140, 255, .5); }
.code-box code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; letter-spacing: .08em; color: #fff; }
.acct-chip .ke-av { margin-left: -8px; }
.acct-chip span { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.oauth { width: 100%; gap: 10px; background: #fff; color: #1f1f1f; border-color: #fff; font-weight: 600; }
.btn.oauth:hover:not(:disabled) { background: #f1f1f1; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: -4px 0; font-size: 12px; color: var(--fg3); }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line2); }
.save-pre { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 13px; color: var(--fg2); cursor: pointer; }
.save-pre input { accent-color: var(--V); }

/* 进站确认：两行勾选（勾过以后只剩一行小字） */
.consent { display: grid; gap: 6px; margin: 0; font-size: 12px; line-height: 1.5; color: var(--fg2); text-align: left; }
.consent label { display: flex; align-items: flex-start; gap: 9px; padding: 3px 6px; margin: 0 -6px; border-radius: 8px; cursor: pointer; transition: background .2s, box-shadow .2s; }
.consent label:hover { background: rgba(255, 255, 255, .04); }
.consent input { appearance: none; -webkit-appearance: none; flex: none; width: 15px; height: 15px; margin: 1px 0 0; border-radius: 5px; border: 1.5px solid rgba(255, 255, 255, .32); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.consent input:checked { border-color: transparent; background: linear-gradient(115deg, var(--L, #6be3ff), var(--V, #b48cff) 55%, var(--R, #ff7ab8)); }
.consent input:checked::after { content: ''; width: 7px; height: 4px; margin-top: -2px; border: 2px solid #150f1d; border-top: 0; border-right: 0; transform: rotate(-45deg); }
.consent input:focus-visible { outline: 2px solid var(--V, #b48cff); outline-offset: 2px; }
.consent a { color: var(--fg); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 2px; }
.consent a:hover { text-decoration-color: currentColor; }
.consent label.miss { box-shadow: inset 0 0 0 1px rgba(255, 110, 140, .7); background: rgba(255, 110, 140, .08); }
.consent label.miss input { border-color: rgba(255, 130, 160, .9); }
.consent.shake { animation: csShake .42s; }
@keyframes csShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.consent.done { display: block; font-size: 11.5px; letter-spacing: .04em; color: var(--fg3); text-align: center; }
.consent.done a { color: var(--fg3); }
.auth .consent { margin-top: 2px; }
.danger-lnk { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 12px; color: var(--fg3); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.danger-lnk:hover { color: #ff8aa6; }

/* 语言选择（主页、个人主页；房间页的样式在 style.css） */
.lang-pick { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 11px; border-radius: 999px; border: 1px solid var(--line2, rgba(255, 255, 255, .13)); background: rgba(255, 255, 255, .03); font-size: 13px; letter-spacing: 0; color: var(--fg2); cursor: pointer; }
.lang-pick:hover { background: rgba(255, 255, 255, .07); }
.lang-pick select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; outline: none; padding-right: 2px; }
.lang-pick select option { background: #1a1624; color: var(--fg); }

/* Logo：一笔画（圆环 + 弓 + 箭），粉环蓝箭，霓虹光晕；线宽不随大小缩放，用 --lgw 控制 */
.logo { width: var(--lg, 24px); height: var(--lg, 24px); flex: none; display: block; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 calc(var(--lg, 24px) * .16) rgba(180, 140, 255, .55)); }
.logo path { stroke-width: var(--lgw, 2.2px); vector-effect: non-scaling-stroke; }
.logo .lg-l { stroke: #ff6f9f; }
.logo .lg-r { stroke: #5fb0ff; }
.auth-brand .logo { --lg: 30px; --lgw: 2.4px; }