:root {
  --paper:#f6f5fb; --paper-strong:#fff; --paper-subtle:#f0edff; --ink:#2e2b44;
  --dim:#79758d; --faint:#9792aa; --line:#e5e1f0; --line-strong:#cec7e2;
  --gold:#6858c7; --gold-deep:#2f296d; --gold-fill:#6858c7; --gold-wash:#f0edff;
  --jade:#3f8066; --jade-wash:#e6f6ef; --danger:#a55267;
  --sans:'Noto Sans SC',system-ui,sans-serif; --serif:'Noto Serif SC',serif; --display:'Ma Shan Zheng','STKaiti','KaiTi',serif;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { background:var(--paper); }
body { min-width:320px; margin:0; color:var(--ink); background:radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--gold) 10%,transparent),transparent 32rem),var(--paper); font-family:var(--sans); }
button,input { font:inherit; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
.account-settings-main { width:min(680px,calc(100% - 40px)); margin:0 auto; padding:32px 0 104px; }
.account-settings-back { display:inline-flex; align-items:center; gap:5px; min-height:44px; padding:7px 11px; border:1px solid var(--line); border-radius:999px; color:var(--dim); background:color-mix(in srgb,var(--paper-strong) 82%,transparent); font-size:12px; font-weight:600; text-decoration:none; }
.account-settings-back span { margin-top:-2px; font-size:20px; line-height:1; }
.account-settings-heading { margin:22px 2px 24px; }
.account-settings-heading p { margin:0 0 4px; color:var(--gold-deep); font-size:11.5px; font-weight:700; letter-spacing:1.8px; }
.account-settings-heading h1 { margin:0; font:400 48px/1.08 var(--display); letter-spacing:5px; }
.account-settings-heading>span { display:block; margin-top:7px; color:var(--dim); font:12px/1.65 var(--serif); }
.account-settings-identity { min-height:92px; display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:14px; padding:17px 19px; border:1px solid rgba(65,104,70,.2); border-radius:22px; background:linear-gradient(135deg,var(--jade-wash),var(--paper-strong)); box-shadow:0 10px 28px rgba(63,51,34,.045); }
.account-settings-avatar { width:54px; height:54px; display:grid; place-items:center; border-radius:17px; color:#fff; background:var(--jade); font:700 19px/1 var(--serif); }
.account-settings-identity-copy { min-width:0; display:grid; gap:3px; }
.account-settings-identity-copy small { color:var(--jade); font-size:11.5px; font-weight:700; letter-spacing:.8px; }
.account-settings-identity-copy b { overflow:hidden; font-size:14.5px; text-overflow:ellipsis; white-space:nowrap; }
.account-settings-identity-copy em { overflow:hidden; color:var(--dim); font-size:11.5px; font-style:normal; line-height:1.55; text-overflow:ellipsis; white-space:nowrap; }
.account-settings-identity>a { min-height:44px; display:inline-flex; align-items:center; padding:8px 12px; border:1px solid rgba(65,104,70,.24); border-radius:999px; color:var(--jade); background:var(--paper-strong); font-size:12px; font-weight:700; text-decoration:none; }
.account-settings-group { margin-top:18px; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--paper-strong) 92%,transparent); box-shadow:0 8px 22px rgba(63,51,34,.04); }
.account-settings-group>h2 { margin:0; padding:15px 18px 7px; color:var(--faint); font-size:11.5px; font-weight:700; letter-spacing:1.2px; }
.account-settings-row { width:calc(100% - 18px); min-height:70px; display:grid; grid-template-columns:42px minmax(0,1fr) auto 10px; align-items:center; gap:12px; margin-left:18px; padding:11px 18px 11px 0; border:0; color:inherit; background:transparent; text-align:left; text-decoration:none; cursor:pointer; }
.account-settings-row+.account-settings-row { border-top:1px solid var(--line); }
.account-settings-row:hover:not(:disabled),.account-settings-row:focus-visible { outline:0; background:color-mix(in srgb,var(--gold-wash) 50%,transparent); }
.account-settings-row:disabled { cursor:default; }
.account-settings-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--gold-fill); font:700 12px/1 var(--serif); }
.account-settings-icon.is-email { background:#507998; }
.account-settings-icon.is-phone { background:#4f8a67; }
.account-settings-icon.is-password { background:#77628f; }
.account-settings-icon.is-sync { background:#3f8066; }
.account-settings-icon.is-records { background:#6858c7; }
.account-settings-icon.is-recharge { background:#917548; }
.account-settings-identity-copy em:empty { display:none; }
.account-settings-row-copy { min-width:0; display:grid; gap:4px; }
.account-settings-row-copy b { font-size:12.5px; }
.account-settings-row-copy small { overflow:hidden; color:var(--faint); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
.account-settings-row-meta { max-width:170px; overflow:hidden; color:var(--faint); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
.account-settings-row.is-bound .account-settings-row-meta { color:var(--jade); }
.account-settings-row>i { width:8px; height:8px; border-top:1.5px solid var(--faint); border-right:1.5px solid var(--faint); transform:rotate(45deg); }
.account-settings-row:disabled:not(.is-bound)>i { opacity:.28; }
.account-settings-status { min-height:1.7em; margin:14px 4px 0; color:var(--dim); font-size:11.5px; line-height:1.65; }
.account-settings-status[data-kind='success'],.account-settings-dialog-status[data-kind='success'] { color:var(--jade); }
.account-settings-status[data-kind='error'],.account-settings-dialog-status[data-kind='error'] { color:var(--danger); }
.account-settings-status[data-kind='busy'],.account-settings-dialog-status[data-kind='busy'] { color:var(--gold-deep); }
.account-session-settings { margin-top:38px; padding:18px 2px 0; border-top:1px solid var(--line); text-align:center; }
.account-session-settings>h2 { margin:0 0 13px; color:var(--faint); font-size:11.5px; letter-spacing:1.2px; }
.account-logout { min-width:160px; min-height:44px; padding:9px 18px; border:1px solid var(--line); border-radius:999px; color:var(--dim); background:var(--paper-strong); font-size:12px; font-weight:600; cursor:pointer; }
.account-session-settings>p { margin:9px 0 0; color:var(--faint); font-size:11.5px; }
.account-danger-settings { margin-top:24px; text-align:left; }
.account-danger-settings>summary { width:max-content; min-height:44px; display:flex; align-items:center; margin:0 auto; padding:8px 10px; color:var(--faint); font-size:11.5px; cursor:pointer; list-style:none; }
.account-danger-settings>summary::-webkit-details-marker { display:none; }
.account-danger-settings>div { margin-top:8px; padding:16px; border:1px solid color-mix(in srgb,var(--danger) 24%,var(--line)); border-radius:15px; background:color-mix(in srgb,var(--danger) 5%,var(--paper-strong)); }
.account-danger-settings b { color:var(--danger); font-size:11px; }
.account-danger-settings p { margin:7px 0 12px; color:var(--dim); font-size:11.5px; line-height:1.7; }
.account-danger-settings button { min-height:44px; padding:8px 12px; border:1px solid color-mix(in srgb,var(--danger) 35%,var(--line)); border-radius:10px; color:var(--danger); background:var(--paper-strong); font-size:11.5px; font-weight:700; cursor:pointer; }
.account-settings-dialog { width:min(430px,calc(100% - 28px)); max-height:min(88vh,720px); max-height:min(88dvh,720px); max-height:min(var(--tianji-visual-viewport-88-height,88dvh),720px); padding:0; overflow:visible; border:0; border-radius:23px; color:var(--ink); background:transparent; }
.account-settings-dialog::backdrop { background:rgba(28,27,34,.58); backdrop-filter:blur(4px); }
.account-settings-dialog-surface { position:relative; display:grid; gap:12px; max-height:min(88vh,720px); max-height:min(88dvh,720px); max-height:min(var(--tianji-visual-viewport-88-height,88dvh),720px); padding:25px 22px max(22px,env(safe-area-inset-bottom,0px)); overflow-y:auto; border:1px solid var(--line); border-radius:23px; background:var(--paper-strong); box-shadow:0 24px 72px rgba(25,22,36,.25); }
.account-settings-dialog-surface>p:first-of-type { margin:0; color:var(--gold-deep); font-size:11.5px; font-weight:700; letter-spacing:1.4px; }
.account-settings-dialog h2 { margin:-5px 0 0; font:700 22px/1.4 var(--serif); }
.account-settings-dialog h2+span { color:var(--dim); font-size:11.5px; line-height:1.65; }
.account-settings-dialog-close { position:absolute; top:7px; right:8px; width:44px; height:44px; border:0; color:var(--faint); background:transparent; font-size:24px; cursor:pointer; }
.account-settings-field { display:grid; gap:6px; }
.account-settings-field>span { color:var(--dim); font-size:12px; font-weight:600; }
.account-settings-field input { width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:12px; outline:0; color:var(--ink); background:var(--paper-strong); font-size:13px; }
.account-settings-field input:focus { border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 12%,transparent); }
.account-settings-primary { min-height:44px; padding:9px 14px; border:0; border-radius:12px; color:#fff; background:var(--gold-fill); font-size:12px; font-weight:700; cursor:pointer; }
.account-settings-primary:disabled { opacity:.55; cursor:wait; }
.account-settings-code-fields { display:grid; gap:12px; }
.account-settings-dialog-note { margin:0; color:var(--faint); font-size:11.5px; line-height:1.65; }
.account-settings-dialog-status { min-height:1.6em; margin:0; color:var(--dim); font-size:11.5px; line-height:1.6; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid color-mix(in srgb,var(--gold) 34%,transparent); outline-offset:2px; }
@media(max-width:620px) {
  .account-settings-main { width:calc(100% - 22px); padding:22px 0 116px; }
  .account-settings-heading { margin:17px 2px 20px; }
  .account-settings-heading h1 { font-size:42px; }
  .account-settings-identity { grid-template-columns:50px minmax(0,1fr) auto; gap:11px; padding:14px; border-radius:19px; }
  .account-settings-avatar { width:48px; height:48px; border-radius:15px; }
  .account-settings-group { border-radius:18px; }
  .account-settings-row { min-height:68px; grid-template-columns:40px minmax(0,1fr) auto 9px; gap:10px; margin-left:14px; padding-right:14px; }
  .account-settings-row-meta { max-width:118px; }
  .account-settings-dialog { width:calc(100% - 22px); }
  .account-settings-field input { font-size:16px; }
}
@media(max-width:390px) {
  .account-settings-identity-copy b { font-size:13px; }
  .account-settings-row { grid-template-columns:38px minmax(0,1fr) 9px; }
  .account-settings-icon { width:38px; height:38px; }
  .account-settings-row-meta { grid-column:2; justify-self:start; max-width:100%; margin-top:-2px; }
  .account-settings-row>i { grid-column:3; grid-row:1 / span 2; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
