/* account.css —— 由 account.html 内联样式外置（内容原样） */

:root{color-scheme:dark;--bg:oklch(0.14 0.012 250);--bg-glow:oklch(0.3 0.06 200);--bg-deep:oklch(0.12 0.012 250);--surface:oklch(0.185 0.015 250);--surface2:oklch(0.235 0.02 250);--line:oklch(0.3 0.02 250);--line-strong:oklch(0.4 0.03 250);--text:oklch(0.965 0.008 250);--text-dim:oklch(0.74 0.02 250);--muted:oklch(0.66 0.02 250);--accent:oklch(0.8 0.12 185);--accent2:oklch(0.7 0.15 160);--accent-soft:oklch(0.8 0.12 185/.16);--ink:oklch(0.15 0.04 185);--ink-dim:oklch(0.2 0.05 185);--danger:oklch(0.72 0.17 25);--r:14px;--rs:9px;--sh:0 24px 60px -28px oklch(0 0 0/.75)}
*{box-sizing:border-box}
body{margin:0;font-family:"Microsoft YaHei","微软雅黑","PingFang SC","Noto Sans CJK SC","Hiragino Sans GB","Segoe UI",sans-serif;color:var(--text);background:radial-gradient(1200px 820px at 16% -10%,oklch(0.34 0.07 196/.55) 0%,transparent 58%),radial-gradient(1000px 720px at 92% 0%,oklch(0.3 0.05 260/.38) 0%,transparent 55%),linear-gradient(180deg,oklch(0.165 0.012 250),var(--bg));min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 28px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent2),var(--accent));display:flex;align-items:center;justify-content:center}
.brand .logo svg{width:20px;height:20px;fill:var(--ink)}
.brand h1{font-size:17px;margin:0;font-weight:700;letter-spacing:.5px}
.brand .sub{font-size:11px;color:var(--text-dim);letter-spacing:2px}
.backbtn{padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);color:var(--text-dim);font-size:13px;cursor:pointer;transition:.15s}
.backbtn:hover{color:var(--accent);border-color:var(--accent)}
.wrap{max-width:1100px;margin:0 auto;padding:34px 24px 70px}
header{text-align:center;padding:20px 0 26px}
.eyebrow{font-size:12px;letter-spacing:6px;color:var(--muted);text-transform:uppercase;margin-bottom:12px}
header h1{font-size:clamp(26px,4vw,38px);font-weight:800;margin:0;letter-spacing:1px}
header h1 .grad{background:linear-gradient(92deg,var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
header .sub{color:var(--text-dim);font-size:14px;margin:12px 0 0}
.card{background:linear-gradient(180deg,var(--surface2),var(--surface)) padding-box,linear-gradient(180deg,oklch(0.45 .035 250/.5),oklch(0.26 .02 250)) border-box;border:1px solid transparent;border-radius:var(--r);box-shadow:0 24px 60px -28px oklch(0 0 0/.75),inset 0 1px 0 oklch(0.6 .03 250/.16);padding:30px;max-width:900px;margin:0 auto}
.tabs{display:flex;gap:8px;justify-content:center;margin-bottom:26px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px;max-width:360px;margin-left:auto;margin-right:auto}
.tab{flex:1;text-align:center;padding:10px 0;border:none;background:transparent;color:var(--muted);font-size:14px;border-radius:999px;cursor:pointer;transition:.18s}
.tab.on{background:linear-gradient(120deg,var(--accent2),var(--accent));color:var(--ink);font-weight:700}
.form{display:grid;gap:15px;max-width:420px;margin:0 auto}
.field label{font-size:13px;color:var(--text-dim);display:block;margin-bottom:7px}
.input,select,input{width:100%;padding:12px 14px;border-radius:var(--rs);border:1px solid var(--line);background:var(--surface2);color:var(--text);font-size:14px;outline:none;transition:.15s;font-family:inherit}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px oklch(0.8 .12 185/.2)}
.field .hint{font-size:12px;color:var(--muted);margin-top:6px}
.btn{background:linear-gradient(120deg,var(--accent2),var(--accent));color:var(--ink);padding:12px 18px;border:none;border-radius:var(--rs);font-size:14.5px;font-weight:700;cursor:pointer;transition:.18s;width:100%;box-shadow:0 10px 28px -12px var(--accent)}
.btn:hover{filter:brightness(1.06);box-shadow:0 14px 34px -12px var(--accent)}
.btn.ghost{background:var(--surface2);color:var(--text-dim);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{color:var(--accent);border-color:var(--accent)}
.links{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:2px}
.links a{color:var(--accent)}
.agree{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim);cursor:pointer}
.agree input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.mode-switch{text-align:center;font-size:12.5px;color:var(--muted);margin-top:16px}
.mode-switch a{color:var(--accent)}
/* profile */
.profile-head{display:flex;align-items:center;gap:18px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.avatar{width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:var(--ink);flex:none}
.pinfo h2{margin:0;font-size:19px}
.pinfo .pid{color:var(--text-dim);font-size:13px;margin-top:3px}
.badges{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.badge{font-size:11px;padding:4px 10px;border-radius:20px;background:oklch(0.3 .02 250/.55);color:var(--text-dim);border:1px solid var(--line)}
.badge.gold{background:linear-gradient(120deg,oklch(0.75 .14 90),oklch(0.8 .1 70));color:#3a2a00}
.ptabs{display:flex;gap:8px;margin:22px 0 18px;flex-wrap:wrap}
.ptab{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);color:var(--text-dim);font-size:13px;cursor:pointer;transition:.15s}
.ptab.on{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:700}
.panel{display:none}
.panel.on{display:block}
.usage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px}
.stat{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.stat .k{font-size:12.5px;color:var(--text-dim)}
.stat .v{font-size:26px;font-weight:800;color:var(--accent);margin-top:6px}
.stat .bar{height:8px;border-radius:8px;background:oklch(0.28 .02 250/.6);margin-top:12px;overflow:hidden}
.stat .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:8px}
.fav-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.fav{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:14px}
.fav .ft{font-weight:700;color:var(--accent);font-size:13px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav .fp{font-size:12.5px;color:var(--text-dim);line-height:1.6;height:52px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fav .row{display:flex;gap:8px;margin-top:12px}
.fav .row button{flex:1;padding:7px;border-radius:8px;font-size:12px;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--text-dim)}
.fav .row button:hover{color:var(--accent);border-color:var(--accent)}
.fav .fc{height:118px;overflow:hidden;border-radius:8px;margin-bottom:8px;background:#0d1420}
.fav .fc img{width:100%;height:100%;object-fit:cover;display:block}
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--surface2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238aa0b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center/14px;border:1px solid var(--line);color:var(--text);border-radius:var(--rs);padding:12px 34px 12px 14px;font-size:14px;outline:none;cursor:pointer}
.sel{position:relative}.sel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface2);border:1px solid var(--line);color:var(--text);padding:11px 14px;border-radius:var(--rs);cursor:pointer;font-size:14px;text-align:left}
.sel-btn:hover{border-color:var(--accent)}.sel-btn .txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sel-btn .cv{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);flex:none;margin-top:-4px}.sel.open .sel-btn .cv{transform:rotate(-135deg);margin-top:3px}
.sel-pop{position:absolute;top:100%;left:0;right:0;z-index:90;background:var(--surface2);border:1px solid var(--line);border-radius:var(--rs);padding:6px;max-height:220px;overflow:auto;display:none;box-shadow:0 20px 40px -16px rgba(0,0,0,.7)}
.sel.open .sel-pop{display:block}.sel-pop li{list-style:none;padding:10px 12px;border-radius:7px;cursor:pointer;font-size:13.5px;color:var(--text);margin:1px 0}.sel-pop li:hover{background:rgba(64,224,199,.12)}.sel-pop li.on{background:var(--accent);color:#06231f;font-weight:700}
.pref{display:grid;gap:14px;max-width:420px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.toggle-row .lbl{font-size:13.5px}
.toggle-row .lbl small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.sw{position:relative;width:46px;height:26px;flex:none}
.sw input{opacity:0;width:0;height:0}
.sw i{position:absolute;inset:0;background:oklch(0.32 .02 250/.7);border-radius:20px;transition:.2s;cursor:pointer}
.sw i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#dfe9e8;transition:.2s}
.sw input:checked+i{background:linear-gradient(120deg,var(--accent2),var(--accent))}
.sw input:checked+i::after{transform:translateX(20px)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--accent);color:var(--ink);padding:10px 22px;border-radius:30px;font-size:13.5px;font-weight:600;box-shadow:0 12px 30px -10px var(--accent);opacity:0;pointer-events:none;transition:.25s;z-index:999}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.hidden{display:none!important}
@media(max-width:640px){.wrap{padding:20px 16px 50px}.topbar{padding:16px}.card{padding:22px}}

.fread{position:fixed;inset:0;z-index:460;display:none;align-items:center;justify-content:center;padding:20px}
.fread.show{display:flex}
.fread .fb{position:absolute;inset:0;background:oklch(0 0 0/.66);backdrop-filter:blur(3px)}
.fread .fc{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);max-width:680px;width:100%;max-height:84vh;display:flex;flex-direction:column;padding:18px}
.fread .fh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.fread .fh h3{margin:0;font-size:15px;font-weight:700;color:var(--accent);flex:1}
.fread .fx{background:var(--surface2);border:1px solid var(--line);color:var(--muted);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:18px;line-height:1;flex:none}
.fread .fpz{font-size:13.5px;line-height:1.8;color:var(--text);white-space:pre-wrap;overflow:auto;flex:1;font-family:inherit}
.fread .ff{display:flex;gap:10px;margin-top:14px;justify-content:flex-end}

.fav-empty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:13px;padding:40px 0;line-height:1.6}
.fav .row button.del{color:#e08a8a;border-color:oklch(0.72 .17 25/.35)}
.fav .row button.del:hover{color:#ff9b9b;border-color:oklch(0.72 .17 25/.8)}
.ptsbox{margin-top:16px}.ptshead{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px}.ptslist{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:6px}.ptsrow{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px}.ptsrow .r{color:var(--text-dim);flex:1}.ptsrow .d{font-weight:700;flex:none}.ptsrow .d.neg{color:#e08a8a}.ptsrow .d.pos{color:#5bd07a}.ptsrow .b{color:var(--muted);font-size:11px}.pts-empty{color:var(--muted);text-align:center;padding:20px 0}

.legal-mask{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:18px}
.legal-mask.show{display:flex}
.legal-card{background:#fff;color:#1a1a1a;border-radius:14px;max-width:680px;width:100%;max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.legal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #eee;font-size:16px;font-weight:700}
.legal-x{border:none;background:none;font-size:24px;cursor:pointer;color:#888;line-height:1}
.legal-body{padding:16px 20px;overflow:auto;font-size:13.5px;line-height:1.8;color:#333}
.legal-body h3{font-size:15px;margin:14px 0 6px;color:#111}
.legal-body p{margin:6px 0}
.brand .logo{color:var(--ink);font-weight:800;font-size:18px}.brand b{font-size:17px;letter-spacing:.3px}.brand .en{display:block;font-size:10px;letter-spacing:2.6px;color:var(--muted);text-transform:uppercase;margin-top:2px}