:root { --member-accent:#176f73; --member-accent-hover:#115d61; --member-dark:#173a40; --member-line:#d7e2df; --member-bg:#f1f5f3; --member-muted:#718185; }
body { min-height:100vh; margin:0; background:var(--member-bg); color:#203237; font-family:"Segoe UI Variable","Microsoft YaHei UI","PingFang SC",sans-serif; }
.member-header { background:#fbfcfb; border-bottom:1px solid var(--member-line); }
.back-link { color:#5e7074; font-size:.86rem; }
.member-page { min-height:calc(100vh - 66px); display:grid; place-items:center; padding:42px 20px 64px; }
.login-view { width:min(480px,100%); }
.login-panel { overflow:hidden; border:1px solid #cfddda; border-radius:8px; background:#fff; box-shadow:0 20px 55px rgba(25,66,67,.09); }
.login-heading { position:relative; padding:31px 32px 24px; border-bottom:1px solid var(--member-line); }
.login-heading::before { content:""; position:absolute; top:0; left:32px; width:40px; height:3px; background:var(--member-accent); }
.login-heading > span { color:var(--member-accent); font-size:.8rem; font-weight:600; }
.login-heading h1 { margin:8px 0 7px; color:#1d3338; font-size:1.5rem; line-height:1.3; font-weight:600; letter-spacing:0; text-wrap:balance; }
.login-heading p { margin:0; color:#77868a; font-size:.86rem; line-height:1.7; }
.auth-tabs { height:46px; display:grid; grid-template-columns:1fr 1fr; padding:0 32px; border-bottom:1px solid var(--member-line); }
.auth-tabs button { position:relative; border:0; background:transparent; color:#78878b; font-size:.82rem; cursor:pointer; transition:color .2s ease; }
.auth-tabs button::after { content:""; position:absolute; right:18%; bottom:-1px; left:18%; height:2px; background:var(--member-accent); transform:scaleX(0); transition:transform .2s ease; }
.auth-tabs button:hover { color:#355c60; }
.auth-tabs button.is-active { border-bottom-color:var(--member-accent); color:var(--member-accent); font-weight:600; }
.auth-tabs button.is-active::after { transform:scaleX(1); }
#login-form,#register-form { display:grid; gap:16px; padding:25px 32px 28px; }
#register-form[hidden],#login-form[hidden] { display:none; }
#login-form label,#register-form label { display:grid; gap:7px; color:#526469; font-size:.82rem; }
#login-form input,#register-form input:not([type="checkbox"]) { height:44px; padding:0 12px; border:1px solid #ccd9d7; border-radius:5px; outline:0; background:#fcfdfd; color:#263a3f; font-size:.92rem; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
#login-form input:hover,#register-form input:not([type="checkbox"]):hover { border-color:#aebfbc; }
#login-form input:focus,#register-form input:focus { border-color:#64a09e; box-shadow:0 0 0 3px rgba(23,111,115,.1); }
#login-form > button,#register-form > button { height:44px; border:1px solid #135f63; border-radius:5px; background:var(--member-accent); color:#fff; font-size:.9rem; font-weight:500; cursor:pointer; box-shadow:0 5px 14px rgba(23,111,115,.16); transition:background .2s ease,transform .15s ease,box-shadow .2s ease; }
#login-form > button:hover,#register-form > button:hover { background:var(--member-accent-hover); box-shadow:0 7px 18px rgba(23,111,115,.22); }
#login-form > button:active,#register-form > button:active { transform:translateY(1px); }
#login-form > button:disabled,#register-form > button:disabled { opacity:.6; cursor:wait; }
.register-agreement { grid-template-columns:16px 1fr !important; align-items:center; gap:7px !important; color:#6e7e82 !important; font-size:.76rem !important; }
.register-agreement input { width:14px; height:14px; margin:0; accent-color:var(--member-accent); }
.form-error { min-height:18px; margin:-5px 0 -3px; color:#b3484e; font-size:.78rem; line-height:1.45; }
.login-help { padding:15px 30px 17px; border-top:1px solid var(--member-line); background:#f8faf9; color:#718085; font-size:.76rem; line-height:1.65; }
.login-help strong { color:#456064; font-weight:600; }
.profile-view { width:min(1040px,100%); align-self:start; }
.profile-bar { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.profile-bar span { color:var(--member-accent); font-size:.78rem; font-weight:600; }
.profile-bar h1 { margin:4px 0 0; font-size:1.42rem; font-weight:600; }
.profile-bar p { margin:5px 0 0; color:#7a898c; font-size:.78rem; }
.profile-actions { display:flex; gap:8px; }
.profile-bar button { min-height:36px; padding:0 13px; border:1px solid var(--member-line); border-radius:5px; background:#fff; color:#5c6d71; cursor:pointer; transition:border-color .2s ease,background .2s ease,transform .15s ease; }
.profile-bar button:hover { border-color:#a8bfbc; background:#f7faf9; }
.profile-bar button:active { transform:translateY(1px); }
.benefit-strip { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid var(--member-line); border-radius:6px; background:#fff; box-shadow:0 8px 26px rgba(24,58,62,.045); }
.benefit-strip > div { min-height:100px; display:grid; align-content:center; gap:7px; padding:0 22px; border-right:1px solid var(--member-line); }
.benefit-strip > div:last-child { border-right:0; }
.benefit-strip span { color:#748388; font-size:.78rem; }
.benefit-label { display:flex; align-items:center; gap:6px; }
.benefit-label svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.benefit-strip>div:first-child .benefit-label svg { fill:rgba(23,111,115,.08); }
.benefit-strip strong { color:#233b40; font-size:1.22rem; font-weight:600; font-variant-numeric:tabular-nums; }
.benefit-strip small { color:#7b8b8e; font-size:.7rem; }
.benefit-strip .benefit-primary { position:relative; background:#edf6f3; }
.benefit-strip .benefit-primary::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--member-accent); }
.benefit-strip .benefit-primary strong { color:var(--member-accent); font-size:1.48rem; }
.upgrade-toggle { min-height:27px; display:inline-flex; align-items:center; gap:4px; justify-self:start; margin-top:2px; padding:0 8px; border:1px solid #b9d0cc; border-radius:4px; background:#fff; color:var(--member-accent); font-size:.7rem; cursor:pointer; transition:background .2s ease,border-color .2s ease; }
.upgrade-toggle svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .2s ease; }
.upgrade-toggle[aria-expanded="true"] svg { transform:rotate(90deg); }
.upgrade-toggle:hover { border-color:#7fa9a3; background:#f4f9f7; color:var(--member-accent-hover); }
.upgrade-panel { margin-top:14px; overflow:hidden; border:1px solid #cbdcd8; border-radius:7px; background:#fff; box-shadow:0 10px 30px rgba(24,58,62,.05); }
.upgrade-panel[hidden] { display:none; }
.upgrade-heading { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 18px; border-bottom:1px solid var(--member-line); background:#f8fbfa; }
.upgrade-heading span { color:var(--member-accent); font-size:.72rem; font-weight:600; }
.upgrade-heading h2 { margin:3px 0 2px; color:#274247; font-size:1rem; font-weight:600; }
.upgrade-heading p { margin:0; color:#7a898c; font-size:.74rem; }
.upgrade-heading button { width:32px; height:32px; display:grid; place-items:center; border:1px solid transparent; border-radius:4px; background:transparent; color:#68797d; cursor:pointer; }
.upgrade-heading button:hover { border-color:#d2dfdc; background:#fff; }
.upgrade-heading button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.plan-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.plan-card { position:relative; min-height:216px; display:flex; flex-direction:column; align-items:flex-start; padding:19px 20px 18px; border-right:1px solid var(--member-line); transition:background .2s ease; }
.plan-card:not(.is-current):hover { background:#fbfdfc; }
.plan-card:last-child { border-right:0; }
.plan-card.is-current { background:#f0f7f5; }
.plan-card-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.plan-card-title { display:flex; align-items:center; gap:8px; }
.plan-icon { width:28px; height:28px; display:grid; place-items:center; border:1px solid #d4e1de; border-radius:5px; background:#f7faf9; color:var(--member-accent); }
.plan-icon svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.plan-card h3 { margin:0; color:#294247; font-size:.9rem; font-weight:600; }
.plan-current { padding:2px 6px; border:1px solid #b8d6cf; border-radius:3px; color:var(--member-accent); font-size:.66rem; }
.plan-limit { margin:16px 0 3px; color:#1f4146; font-size:1.42rem; font-weight:600; font-variant-numeric:tabular-nums; }
.plan-limit small { margin-left:3px; color:#748488; font-size:.7rem; font-weight:400; }
.plan-desc { margin:0 0 11px; color:#7a898c; font-size:.73rem; }
.plan-features { display:grid; gap:6px; margin:0 0 15px; padding:0; list-style:none; color:#607276; font-size:.71rem; }
.plan-features li { display:flex; align-items:center; gap:6px; }
.plan-features svg { width:12px; height:12px; fill:none; stroke:var(--member-accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.plan-action { width:100%; min-height:34px; display:inline-flex; align-items:center; justify-content:center; gap:5px; margin-top:auto; padding:0 11px; border:1px solid #9dbdb7; border-radius:4px; background:#fff; color:var(--member-accent); font-size:.75rem; text-decoration:none; transition:background .2s ease,border-color .2s ease; }
.plan-action svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.plan-action:hover { border-color:#7fa9a3; background:#f4f9f7; }
.plan-action.is-disabled { border-color:#d9e3e1; background:#f7f9f8; color:#879497; pointer-events:none; }
.plan-loading { grid-column:1/-1; margin:0; padding:36px; color:#7d8c8f; font-size:.8rem; text-align:center; }
.upgrade-note { min-height:43px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 18px; border-top:1px solid var(--member-line); background:#fafcfb; color:#718185; font-size:.73rem; }
.upgrade-note strong { color:#486468; font-weight:600; }
.account-settings { margin-top:14px; overflow:hidden; border:1px solid var(--member-line); border-radius:6px; background:#fff; box-shadow:0 8px 26px rgba(24,58,62,.035); }
.account-heading { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 18px; border-bottom:1px solid var(--member-line); }
.account-heading h2 { margin:0 0 4px; font-size:.94rem; font-weight:600; }
.account-heading p { margin:0; color:#7b898d; font-size:.75rem; }
.account-heading button { border:0; background:transparent; color:#66777b; cursor:pointer; }
#account-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 18px; padding:18px; }
#account-form label { display:grid; gap:6px; color:#58696d; font-size:.78rem; }
#account-form input { height:38px; padding:0 10px; border:1px solid #d2dddb; border-radius:4px; outline:0; background:#fbfcfc; color:#263a3f; }
#account-form input:focus { border-color:#64a09e; box-shadow:0 0 0 3px rgba(23,111,115,.1); }
.account-message { min-height:18px; margin:0; align-self:center; color:#b44d52; font-size:.76rem; }
.account-message.is-success { color:#237a59; }
#account-save { justify-self:end; min-height:38px; padding:0 15px; border:1px solid #135f63; border-radius:4px; background:var(--member-accent); color:#fff; cursor:pointer; }
#account-save:disabled { opacity:.6; cursor:wait; }
.download-history { margin-top:14px; overflow:hidden; border:1px solid var(--member-line); border-radius:6px; background:#fff; box-shadow:0 8px 26px rgba(24,58,62,.035); }
.history-heading { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid var(--member-line); }
.history-heading h2 { margin:0; font-size:.94rem; font-weight:600; }
.history-heading a { color:var(--member-accent); font-size:.8rem; }
.history-table-wrap { overflow-x:auto; }
table { width:100%; min-width:680px; border-collapse:collapse; }
th,td { height:44px; padding:0 12px; border-bottom:1px solid #e8edec; text-align:left; font-size:.78rem; }
th { background:#f8faf9; color:#68787c; font-weight:600; }
td { color:#45575b; }
td:nth-child(2) { color:var(--member-accent); font-weight:500; }
td a { color:var(--member-accent); }
.history-empty { display:grid; justify-items:center; gap:7px; margin:0; padding:42px 20px 46px; color:#829094; text-align:center; }
.history-empty[hidden] { display:none; }
.history-empty strong { color:#52666a; font-size:.88rem; font-weight:600; }
.history-empty span { font-size:.78rem; }
.history-empty a { margin-top:5px; color:var(--member-accent); font-size:.79rem; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid rgba(23,111,115,.48); outline-offset:2px; }
@media(max-width:720px){.member-page{padding:22px 14px 40px;place-items:start center}.benefit-strip{grid-template-columns:repeat(2,1fr)}.benefit-strip>div:nth-child(2){border-right:0}.benefit-strip>div:nth-child(-n+2){border-bottom:1px solid var(--member-line)}.profile-bar{min-height:82px}.login-heading,#login-form,#register-form,.auth-tabs{padding-left:22px;padding-right:22px}#account-form{grid-template-columns:1fr}.account-heading{padding:12px 15px}.profile-actions{gap:5px}}
@media(max-width:460px){.member-page{padding-top:14px}.login-heading{padding-top:27px;padding-bottom:20px}.login-heading::before{left:22px}.profile-bar{align-items:flex-start;padding:15px 0}.profile-actions{padding-top:3px}.profile-bar button{padding:0 9px;font-size:.76rem}.benefit-strip>div{min-height:88px;padding:0 16px}.benefit-strip .benefit-primary strong{font-size:1.35rem}}
@media(max-width:720px){.plan-options{grid-template-columns:1fr}.plan-card{min-height:205px;border-right:0;border-bottom:1px solid var(--member-line)}.plan-card:last-child{border-bottom:0}.upgrade-heading{align-items:flex-start}.upgrade-note{align-items:flex-start;flex-direction:column;gap:3px;padding-top:11px;padding-bottom:11px}}