/* 用户中心沿用登录页的水晶色阶、切边与水滴材质。 */
.member-theme {
  --color-primary: #4d789b;
  --color-accent: #549f9e;
  --color-text: #304b68;
  --color-muted: #637991;
  --color-soft: #d7eaf36b;
  --color-highlight: #d1e8f3a6;
  --color-chart-track: #afc8de52;
  --member-edge: #ffffffd9;
  --member-inset: #ffffffed;
  --member-line: #a9cadc4d;
  --member-field: linear-gradient(140deg, #ffffff63, #ffffff30);
  --member-surface: linear-gradient(140deg, #ffffffb8, #f0fbff73);
  --member-shadow: inset 1px 2px 2px #ffffffed, inset -1px -2px 3px #c3e5f463, 0 19px 38px -22px #578db44a, 0 6px 12px -7px #5986b338;
}
.member-theme .shell { max-width: 1680px; margin: auto; grid-template-columns: clamp(224px, 17vw, 248px) minmax(0, 1fr); gap: 30px; padding: 28px; }
.member-theme .sidebar { top: 28px; height: calc(100dvh - 56px); padding: 28px 18px 22px; border-radius: 30px; border: 1px solid var(--member-edge); background: var(--member-surface); box-shadow: var(--member-shadow); }
.member-theme .sidebar .brand { padding: 0 12px; }
.member-theme .brand-caption { margin: 10px 0 0 12px; }
.member-theme .nav { margin-top: 32px; gap: 7px; }
.member-theme .nav a { min-height: 48px; padding: 12px 14px; border: 1px solid transparent; border-radius: 15px; color: var(--color-muted); }
.member-theme .nav a.active { color: var(--crystal-button); border-color: var(--member-edge); background: linear-gradient(150deg, var(--crystal-secondary-top), var(--crystal-secondary-bottom)); box-shadow: inset 0 2px 1px var(--member-inset), inset 0 -1px 2px #648dae26, 0 7px 12px -8px #5784a975; }
.member-theme .nav a:hover { color: var(--color-text); }
.member-theme .nav-label { padding: 17px 14px 8px; }
.member-theme .sidebar-foot { padding: 24px 14px 0; }
.member-theme .sidebar-foot small { line-height: 1.9; }
.member-theme .topbar { height: 44px; padding: 0 2px; }
.member-theme .breadcrumb { border: 0; background: none; padding: 0; backdrop-filter: none; gap: 10px; font-size: 12px; }
.member-theme .user-entry { border: 0; background: none; padding: 0; gap: 9px; }
.member-theme .user-symbol { border: 1px solid var(--member-edge); background: var(--member-field); box-shadow: inset 0 1px 1px var(--member-inset); }
.member-theme .content { max-width: none; padding: 22px 0 50px; }
.member-theme .heading { margin-bottom: 28px; min-height: 72px; align-items: center; }
.member-theme .heading h1 { font-size: 30px; letter-spacing: .01em; }
.member-theme .heading p { margin-top: 9px; line-height: 1.8; }
.member-theme .content h1, .member-theme .content h2, .member-theme .brand span, .member-theme dialog h2 {
  color: var(--crystal-ink);
  background: linear-gradient(172deg, var(--crystal-ink) 10%, var(--crystal-reflection) 40%, var(--crystal-ink) 44%, var(--crystal-reflection) 72%, var(--crystal-ink) 94%);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 var(--crystal-text-edge)) drop-shadow(0 2px 1px #5486a526);
}
.member-theme .card, .member-theme dialog { border: 1px solid var(--member-edge); border-radius: 28px; padding: 28px; background: var(--member-surface); box-shadow: var(--member-shadow); }
.member-theme .card::after { content: ''; position: absolute; inset: 4px; width: auto; height: auto; border-radius: 24px; border: 1px solid transparent; border-top-color: #ffffff66; border-right-color: #ffffff4d; box-shadow: inset -1px 0 1px #a1d6ec24; pointer-events: none; }
.member-theme .card.is-tilting { box-shadow: var(--member-shadow), 0 18px 30px -24px #4c789e70; }
.member-theme .grid, .member-theme .stack { gap: 24px; }
.member-theme .card h2 { font-size: 19px; }
.member-theme .card .big { color: var(--crystal-ink); text-shadow: 0 1px 0 var(--crystal-text-edge); }
.member-theme .btn:not(.danger) { border: 1px solid var(--member-edge); border-radius: 13px; color: var(--crystal-button); text-shadow: 0 1px 0 var(--crystal-text-edge); isolation: isolate; }
.member-theme .btn:not(.secondary):not(.ghost):not(.danger) {
  background: linear-gradient(115deg, transparent 25%, #ffffff5c 41%, #ffffff0d 44%, transparent 58%), linear-gradient(180deg, var(--crystal-top), var(--crystal-mid) 49%, var(--crystal-bottom) 51%, #c8dff4b3);
  box-shadow: inset 0 2px 1px var(--member-inset), inset 0 -2px 2px #5c82b447, inset 1px 0 1px #ffffffb8, 0 8px 18px -7px #547ba65c;
  font-weight: 600; min-height: 44px;
}
.member-theme .btn.secondary { background: linear-gradient(155deg, var(--crystal-secondary-top), var(--crystal-secondary-bottom)); box-shadow: inset 0 2px 1px var(--member-inset), inset 0 -2px 2px #658caf26, 0 7px 14px -9px #547aa66b; }
.member-theme .btn:not(.ghost):not(.danger)::before { content: ''; position: absolute; z-index: -1; inset: 2px; border: 1px solid #ffffff40; border-top-color: #ffffffa6; border-radius: 10px; background: linear-gradient(105deg, transparent 22%, #ffffff69 42%, transparent 61%); background-size: 240% 100%; background-position: 100% 0; transition: background-position 550ms var(--ease); pointer-events: none; }
.member-theme .btn:hover::before, .member-theme .btn:focus-visible::before { background-position: 0 0; }
.member-theme .btn:not(.ghost):not(.danger):hover { box-shadow: inset 0 2px 1px var(--member-inset), inset 0 -2px 2px #658caf30, 0 10px 19px -9px #547ba680; }
.member-theme .btn:not(.ghost):not(.danger):active { box-shadow: inset 0 2px 5px #537da433, inset 0 -1px 0 var(--member-edge); }
.member-theme .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; text-shadow: none; }
.member-theme .btn.ghost:hover { background: var(--color-soft); box-shadow: none; }
.member-theme input:not([type=checkbox]), .member-theme select, .member-theme textarea { border: 1px solid var(--member-line); border-radius: 12px; background: var(--member-field); min-height: 48px; box-shadow: inset 0 1px 2px var(--member-inset), 0 1px 0 #ffffff33; }
.member-theme input:focus, .member-theme select:focus, .member-theme textarea:focus { border-color: #88bed6; box-shadow: inset 0 1px 2px var(--member-inset), 0 0 0 3px #a7d6e62c; }
.member-theme .field-actions input { flex: 1; }
.member-theme .field-actions .btn { min-height: 48px; }
.member-theme form { gap: 20px; }
.member-theme form .error-text:empty { display: none; }
.member-theme .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.member-theme .tabs button { border-color: transparent; background: transparent; border-radius: 12px; padding: 9px 18px; color: var(--color-muted); }
.member-theme .tabs button.active { color: var(--crystal-button); border-color: var(--member-edge); background: var(--member-field); box-shadow: inset 0 1px 1px var(--member-inset), 0 5px 12px -9px #557c9a80; }
.member-theme .tabs button:hover { background: var(--color-soft); }
.member-theme .badge { border-radius: 8px; padding: 4px 9px; background: var(--color-soft); font-size: 11px; }
.member-theme .notice { background: var(--member-field); border-color: var(--member-line); border-radius: 14px; color: var(--color-text); padding: 16px 18px; }
.member-theme .table-wrap { padding: 10px 24px; }
.member-theme .table-wrap > h2 { padding-top: 18px; }
.member-theme table { width: 100%; }
.member-theme th { background: transparent; font-size: 12px; color: var(--color-muted); font-weight: 500; }
.member-theme th, .member-theme td { border-color: var(--member-line); padding: 20px 14px; }
.member-theme td { font-size: 13px; }
.member-theme tbody tr:hover { background: var(--color-soft); }
.member-theme .list-item, .member-theme hr, .member-theme .chart-summary, .member-theme .announcement-row { border-color: var(--member-line); }
.member-theme .plan { gap: 20px; padding: 30px; }
.member-theme .plan-period-option { border-color: transparent; border-radius: 12px; background: var(--member-field); box-shadow: inset 0 1px 1px var(--member-inset); }
.member-theme .plan-period-option:hover { border-color: var(--member-edge); }
.member-theme .plan-period-option.active { color: var(--crystal-button); border-color: var(--member-edge); background: linear-gradient(150deg, var(--crystal-secondary-top), var(--crystal-secondary-bottom)); box-shadow: inset 0 2px 1px var(--member-inset), inset 0 -1px 2px #648dae26, 0 7px 12px -8px #5784a975; }
.member-theme .plan.highlight { background: linear-gradient(155deg, #eefaffc9, #d6e9f585); border-color: #ffffff; box-shadow: var(--member-shadow), 0 10px 26px -16px #5f94ba55; }
.member-theme .plan ul { border-color: var(--member-line); gap: 17px; }
.member-theme .plan .big { font-size: 42px; }
.member-theme .code, .member-theme .message { background: var(--member-field); border-color: var(--member-line); }
.member-theme .message.user { background: var(--color-soft); }
.member-theme .article { max-width: 900px; padding: 36px; line-height: 1.9; }
.member-theme dialog { max-width: 540px; }
.member-theme dialog::backdrop { background: #213b5942; backdrop-filter: blur(8px); }

/* 总览：留白欢迎区、横向概况、双栏工作区。 */
.member-theme .dashboard-welcome { min-height: 164px; margin: 0 0 24px; padding: 0 12px 0 2px; position: relative; }
.welcome-copy { position: relative; z-index: 1; }
.welcome-copy > small { display: block; margin-bottom: 10px; font-size: 12px; color: var(--color-muted); }
.member-theme .dashboard-welcome h1 { font-size: 32px; }
.welcome-art { width: 220px; height: 164px; position: relative; flex-shrink: 0; }
.welcome-art img { width: 180px; height: 180px; object-fit: contain; position: absolute; top: -12px; right: 12px; filter: drop-shadow(0 12px 12px #5388a414); }
.welcome-drop { --drop-size: 22px; left: 0; top: 32px; }
.member-theme .bento-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.member-theme .bento-metrics { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.member-theme .bento-metrics .metric { padding: 22px 24px; border-radius: 24px; }
.member-theme .bento-metrics .metric::after { border-radius: 20px; }
.member-theme .bento-metrics .big { font-size: 29px; margin: 9px 0 3px; }
.member-theme .metric-top svg { color: #729bb6; }
.member-theme .usage-card { grid-column: span 7; grid-row: auto; min-height: 365px; padding: 28px; overflow: hidden; }
.member-theme .usage-card h2 { font-size: 22px; margin-top: 3px; }
.member-theme .usage-center { grid-template-columns: minmax(165px, 1fr) minmax(130px, .8fr); gap: 22px; padding: 22px 0; }
.member-theme .usage-orbit { width: 190px; height: 190px; margin: auto; }
.member-theme .usage-orbit::before { background: var(--member-field); box-shadow: inset 0 2px 2px var(--member-inset), inset 0 -7px 14px #6689c318, 0 15px 26px #627aae14; }
.member-theme .ring-value { stroke: #72a4be; }
.member-theme .orbit-value strong { color: var(--crystal-ink); font-size: 37px; text-shadow: 0 1px 0 var(--crystal-text-edge); }
.member-theme .usage-details { gap: 15px; }
.member-theme .usage-details strong { font-size: 23px; }
.member-theme .usage-footer { border-color: var(--member-line); padding-top: 17px; }
.member-theme .subscription-card { grid-column: span 5; display: flex; flex-direction: column; padding: 28px; }
.member-theme .subscription-card p { line-height: 1.9; margin: 0; }
.member-theme .subscription-card .section-head > svg { color: var(--color-primary); width: 20px; }
.subscription-steps { list-style: none; margin: 22px 0 25px; padding: 0; display: grid; gap: 12px; color: var(--color-muted); font-size: 12px; }
.subscription-steps li { display: flex; align-items: center; gap: 10px; }
.subscription-steps span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--member-edge); border-radius: 50%; background: var(--member-field); color: var(--crystal-button); font-size: 10px; }
.member-theme .subscription-actions { margin-top: auto; }
.member-theme .subscription-links .btn { font-size: 12px; }
.member-theme .traffic-card { grid-column: span 7; padding: 28px; }
.member-theme .announcement-card { grid-column: span 5; padding: 28px; }
.member-theme .guide-link { background: transparent; border: 0; border-radius: 0; padding: 8px 0; }
.member-atmosphere { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.member-drop-one { --drop-size: 29px; right: 18px; top: 22%; }
.member-drop-two { --drop-size: 19px; left: 17px; bottom: 21%; }
.member-drop-three { --drop-size: 12px; right: 6%; bottom: 4%; }

[data-theme=dark] .member-theme {
  --color-primary: #a9cde4; --color-accent: #8cc9c4; --color-text: #e1edf9; --color-muted: #adc1d5;
  --color-soft: #5880a32b; --color-highlight: #547c9d4d; --color-chart-track: #6c99ba38;
  --member-edge: #b1d8fa4f; --member-inset: #c8e7ff38; --member-line: #a5cbdf26;
  --member-field: linear-gradient(140deg, #a3c8e51f, #36546c1a);
  --member-surface: linear-gradient(140deg, #35465ebb, #26394d99);
  --member-shadow: inset 1px 2px 2px #c8e7ff38, inset -1px -2px 3px #65a4be20, 0 19px 38px -22px #050d2366;
}
[data-theme=dark] .member-theme .card::after { border-top-color: #c9e6ff29; border-right-color: #c9e6ff20; }
[data-theme=dark] .member-theme .btn:not(.secondary):not(.ghost):not(.danger) { background: linear-gradient(115deg, transparent 25%, #ffffff1f 41%, transparent 58%), linear-gradient(180deg, var(--crystal-top), var(--crystal-mid) 49%, var(--crystal-bottom) 51%, #6499bc7d); box-shadow: inset 0 1px 1px #def3ff7d, inset 0 -2px 2px #1129494d, 0 7px 14px -7px #061327a6; }
[data-theme=dark] .member-theme .btn::before { border-color: #d9f2ff1a; border-top-color: #e0f6ff59; background-image: linear-gradient(105deg, transparent 22%, #c2eaff26 42%, transparent 61%); }
[data-theme=dark] .member-theme .plan.highlight { background: linear-gradient(140deg, #3e5773c7, #284252a6); border-color: #c1e6ff85; }

@media (max-width: 1200px) {
  .member-theme .shell { grid-template-columns: 216px minmax(0, 1fr); gap: 24px; padding: 22px; }
  .member-theme .sidebar { top: 22px; height: calc(100dvh - 44px); padding: 26px 14px 20px; }
  .member-theme .bento-metrics .metric { padding: 20px 18px; }
  .member-theme .usage-card, .member-theme .subscription-card { padding: 24px; }
  .member-theme .usage-orbit { width: 170px; height: 170px; }
  .member-theme .usage-center { gap: 12px; }
}
@media (max-width: 1100px) {
  .member-theme .usage-card, .member-theme .subscription-card { grid-column: 1 / -1; }
  .member-theme .usage-card { min-height: 340px; }
  .member-theme .usage-center { grid-template-columns: 1fr 1fr; }
  .member-theme .usage-orbit { width: 195px; height: 195px; }
  .member-theme .subscription-steps { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .member-theme .subscription-steps li { align-items: start; }
  .member-theme .subscription-steps span { flex: 0 0 22px; }
  .member-theme .traffic-card, .member-theme .announcement-card { grid-column: 1 / -1; }
  .member-theme .content .cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-theme .bento-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .member-theme .shell { grid-template-columns: 200px minmax(0, 1fr); padding: 18px; gap: 20px; }
  .member-theme .sidebar { top: 18px; height: calc(100dvh - 36px); padding: 24px 10px 18px; }
  .member-theme .nav a { gap: 10px; padding: 11px 12px; font-size: 12px; }
  .member-theme .dashboard-welcome { min-height: 150px; padding: 0; }
  .member-theme .dashboard-welcome h1 { font-size: 27px; }
  .welcome-art { width: 125px; height: 150px; }
  .welcome-art img { width: 140px; height: 140px; top: 0; right: -6px; }
  .welcome-drop { display: none; }
  .member-theme .card, .member-theme .plan { padding: 24px; }
  .member-theme .content .cols3 { grid-template-columns: 1fr; }
  .member-theme .grid.cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-theme .subscription-steps { grid-template-columns: 1fr; gap: 12px; }
  .member-theme .table-wrap { padding: 8px 16px; }
}
@media (max-width: 600px) {
  .member-theme .shell { display: block; padding: 0; }
  .member-theme .sidebar { display: none; }
  .member-theme .topbar { height: 66px; padding: 0 20px; }
  .member-theme .content { padding: 10px 18px 40px; }
  .member-theme .heading { gap: 14px; min-height: 64px; margin-bottom: 22px; }
  .member-theme .heading h1 { font-size: 26px; }
  .member-theme .heading p { font-size: 12px; }
  .member-theme .dashboard-welcome { min-height: 150px; gap: 0; margin-bottom: 18px; }
  .member-theme .dashboard-welcome h1 { font-size: 26px; max-width: 195px; line-height: 1.5; }
  .member-theme .dashboard-welcome h1 span { display: block; }
  .member-theme .dashboard-welcome p { max-width: 210px; line-height: 1.8; font-size: 11px; }
  .welcome-copy > small { font-size: 11px; margin-bottom: 6px; }
  .welcome-art { width: 122px; height: 150px; }
  .welcome-art img { width: 134px; height: 150px; right: -3px; }
  .member-theme .card { border-radius: 25px; padding: 22px; }
  .member-theme .card::after { border-radius: 21px; }
  .member-theme .bento-grid, .member-theme .grid, .member-theme .stack { gap: 18px; }
  .member-theme .bento-metrics { gap: 14px; }
  .member-theme .bento-metrics .metric { padding: 18px; border-radius: 22px; }
  .member-theme .bento-metrics .big { font-size: 26px; }
  .member-theme .usage-card { min-height: auto; }
  .member-theme .usage-center { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; padding: 24px 0; }
  .member-theme .usage-orbit { width: min(160px, 100%); height: auto; aspect-ratio: 1; }
  .member-theme .orbit-value strong { font-size: 31px; }
  .member-theme .orbit-value span { font-size: 10px; }
  .member-theme .usage-details strong { font-size: 21px; }
  .member-theme .usage-details small { font-size: 11px; }
  .member-theme .subscription-card .subscription-actions { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .member-theme .subscription-actions .btn { padding: 10px 13px; font-size: 12px; }
  .member-theme .table-wrap { padding: 8px 12px; }
  .member-theme .article { padding: 24px; }
  .member-theme .mobile-nav { border-color: var(--member-edge); background: var(--member-surface); box-shadow: var(--member-shadow); padding: 10px 6px; }
  .member-theme .mobile-nav a { min-width: 54px; border-radius: 13px; padding: 5px 9px; }
  .member-theme .mobile-nav a.active { background: var(--member-field); color: var(--crystal-button); box-shadow: inset 0 1px 1px var(--member-inset); }
  .member-theme .preview { position: relative; right: auto; bottom: auto; width: max-content; margin: 0 18px 116px auto; }
  .member-atmosphere { display: none; }
}
@media (prefers-reduced-motion: reduce) { .member-theme .btn::before { transition: none; } }
@media (forced-colors: active) {
  .member-theme .content h1, .member-theme .content h2, .member-theme .brand span, .member-theme dialog h2 { -webkit-text-fill-color: currentColor; background: none; filter: none; }
}
@supports not (backdrop-filter: blur(1px)) { .member-theme .card, .member-theme .sidebar, .member-theme dialog, .member-theme .mobile-nav { background: var(--color-bg); } }