:root {
    --ink-950: #11152d;
    --ink-900: #171b35;
    --ink-700: #414760;
    --ink-500: #626981;
    --line: rgba(218, 216, 237, .72);
    --purple-700: #5a43d6;
    --purple-600: #6852e5;
    --purple-500: #8067ee;
    --purple-100: #eeebff;
    --blue-600: #3972e8;
    --cyan-500: #31a9d7;
    --green-500: #4ab79c;
    --red-500: #d75b67;
    --glass: rgba(255, 255, 255, .64);
    --glass-strong: rgba(255, 255, 255, .78);
    --glass-border: rgba(255, 255, 255, .88);
    --canvas: #f8f8fc;
    --shadow-sm: 0 12px 34px -18px rgba(45, 36, 101, .25);
    --shadow-lg: 0 28px 70px -30px rgba(75, 53, 168, .34);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink-900);
    background:
        radial-gradient(circle at 78% 4%, rgba(104, 82, 229, .17), transparent 30rem),
        radial-gradient(circle at 24% 94%, rgba(49, 169, 215, .12), transparent 32rem),
        linear-gradient(145deg, #fbfbff 0%, #f5f3fc 48%, #f4f8ff 100%);
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", sans-serif;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 15px;
    line-height: 1.5;
}
button, input, select, textarea { font-family: inherit; font-synthesis: none; }
a { color: inherit; text-decoration: none; }

.workspace {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    overflow: hidden;
}
.workspace::before,
.workspace::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(26px);
}
.workspace::before {
    top: -190px;
    right: 5%;
    background: radial-gradient(circle, rgba(128, 103, 238, .18), rgba(128, 103, 238, 0) 70%);
}
.workspace::after {
    right: 28%;
    bottom: -260px;
    background: radial-gradient(circle, rgba(49, 169, 215, .15), rgba(49, 169, 215, 0) 70%);
}
.sidebar {
    position: sticky;
    z-index: 3;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 26px 20px 22px;
    border-right: 1px solid rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .52);
    box-shadow: 18px 0 50px -34px rgba(45, 36, 101, .3);
    backdrop-filter: blur(28px) saturate(145%);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
}
.brand { display: inline-flex; align-items: center; gap: 11px; padding: 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -.012em; }
.brand-mark {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 30px;
    overflow: hidden;
    border-radius: 9px;
    background: linear-gradient(145deg, #4479ec 2%, #7654ec 55%, #9c72ee 100%);
    box-shadow: 0 7px 16px rgba(104, 82, 229, .22);
}
.brand-mark::before,
.brand-mark::after {
    content: "";
    position: absolute;
    top: 1px;
    width: 8px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    transform: rotate(-36deg);
}
.brand-mark::before { left: 8px; }
.brand-mark::after { right: 7px; opacity: .52; }
.brand-mark span { display: none; }
.avatar { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.68); border-radius: 11px; color: #fff; background: linear-gradient(145deg, #4778eb 5%, #7558e8 58%, #8e6bec 100%); box-shadow: 0 9px 20px -9px rgba(92, 68, 211, .72), inset 0 1px 0 rgba(255,255,255,.24); font-size: 14px; font-weight: 800; }
.account-copy { width: 23px; height: 23px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 7px; color: var(--purple-700); background: transparent; cursor: pointer; transition: border-color .16s, background .16s, transform .16s; }
.account-copy:hover, .account-copy:focus-visible { border-color: #ded9f8; outline: 0; background: #f3f0ff; }
.account-copy:active { transform: scale(.94); }
.account-copy.is-copied { border-color: rgba(74,183,156,.25); background: rgba(226,248,241,.72); }
.account-copy img { width: 13px; height: 13px; display: block; opacity: .68; }
.copy-success-mark { color: #27836c; font-size: 15px; line-height: 1; font-weight: 800; }
.copy-success-label { color: #27836c; font: inherit; font-weight: 700; white-space: nowrap; }
.account-actions { position: absolute; z-index: 25; top: 8px; right: 8px; }
.account-actions summary { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; cursor: pointer; list-style: none; transition: border-color .16s, background .16s; }
.account-actions summary::-webkit-details-marker { display: none; }
.account-actions summary:hover, .account-actions summary:focus-visible { border-color: #ded9f8; outline: 0; background: #f3f0ff; }
.account-actions summary img { width: 12px; height: 12px; display: block; opacity: .62; transition: transform .18s; }
.account-actions[open] summary img { transform: rotate(180deg); }
.account-actions-menu { position: absolute; top: 31px; right: -2px; width: 146px; padding: 6px; border: 1px solid #e2dfed; border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 18px 38px -20px rgba(43,34,91,.48); }
.account-actions-menu button { width: 100%; min-height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; color: #a44955; background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.account-actions-menu button:hover, .account-actions-menu button:focus-visible { outline: 0; background: #fff3f4; }
.account-actions-menu button:disabled { opacity: .55; cursor: default; }
.account-actions-menu button img { width: 14px; height: 14px; opacity: .72; }
.account-actions-menu > small { display: none; padding: 6px 8px 2px; color: var(--red-500); font-size: 10px; line-height: 1.35; }
.account-actions-menu > small:not(:empty) { display: block; }
.side-nav { margin-top: 34px; display: grid; gap: 6px; }
.nav-item { min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 13px; border: 1px solid transparent; border-radius: 12px; color: #4d546d; font-size: 15px; font-weight: 600; line-height: 1.4; transition: color .18s, background .18s, border-color .18s, transform .18s, box-shadow .18s; }
.nav-item:hover { color: var(--purple-700); border-color: rgba(255, 255, 255, .84); background: rgba(255, 255, 255, .46); box-shadow: var(--shadow-sm); transform: translateX(2px); }
.nav-item.active { color: var(--purple-700); border-color: rgba(255, 255, 255, .92); background: linear-gradient(120deg, rgba(238, 235, 255, .86), rgba(255, 255, 255, .58)); box-shadow: 0 10px 25px -18px rgba(90, 67, 214, .7), inset 0 1px 0 #fff; }
.nav-icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; color: currentColor; }
.home-icon::before { content: ""; position: absolute; inset: 4px 2px 1px; border: 1.6px solid currentColor; border-radius: 3px; }
.home-icon::after { content: ""; position: absolute; left: 4px; top: 1px; width: 9px; height: 9px; border-top: 1.6px solid currentColor; border-left: 1.6px solid currentColor; transform: rotate(45deg); }
.apply-icon::before { content: ""; position: absolute; inset: 3px 1px; border: 1.6px solid currentColor; border-radius: 4px; }
.apply-icon::after { content: "+"; position: absolute; right: -2px; bottom: -3px; width: 10px; height: 10px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--purple-600); box-shadow: 0 0 0 2px rgba(255, 255, 255, .82); font-size: 9px; font-weight: 800; line-height: 1; }
.mailbox-icon::before { content: ""; position: absolute; inset: 2px; border: 1.6px solid currentColor; border-radius: 4px; }
.mailbox-icon::after { content: ""; position: absolute; left: 5px; right: 5px; top: 7px; height: 4px; border-bottom: 1.6px solid currentColor; }
.mail-icon::before { content: ""; position: absolute; inset: 3px 1px; border: 1.6px solid currentColor; border-radius: 4px; }
.mail-icon::after { content: ""; position: absolute; left: 3px; top: 5px; width: 10px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
.score-icon::before { content: ""; position: absolute; inset: 2px; border: 1.6px solid currentColor; border-radius: 50%; }
.score-icon::after { content: "积"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; font-weight: 850; }
.back-home { margin-top: auto; padding: 13px; color: var(--ink-500); font-size: 13px; font-weight: 700; line-height: 1.45; }
.back-home:hover { color: var(--purple-700); }

.content { position: relative; z-index: 1; width: 88%; margin: 0 auto; padding: 42px clamp(28px, 5vw, 70px) 70px; }
.content-header { margin-bottom: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.eyebrow { margin: 0 0 8px; color: var(--purple-700); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.content-header h1 { margin: 0; color: var(--ink-950); font-size: clamp(30px, 4vw, 42px); font-weight: 700; letter-spacing: -.015em; }
.top-account-bar { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.top-user-chip { position: relative; min-width: 218px; max-width: 310px; min-height: 52px; padding: 7px 66px 7px 8px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.9); border-radius: 15px; background: rgba(255,255,255,.58); box-shadow: inset 0 1px 0 rgba(255,255,255,.86),0 14px 30px -24px rgba(50,37,116,.55); backdrop-filter: blur(18px); }
.top-user-chip .avatar { width: 34px; height: 34px; border-radius: 10px; }
.top-user-copy { min-width: 0; display: block; }
.top-user-copy small { display: block; color: var(--ink-500); font-size: 10px; line-height: 1.2; }
.top-user-copy strong { display: block; max-width: 146px; margin-top: 3px; overflow: hidden; color: #343a50; font-size: 12px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.top-user-chip > .account-copy { position: absolute; right: 34px; top: 14px; }
.top-user-chip .account-actions { top: 13px; right: 7px; }
.member-badge { flex: 0 0 auto; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .86); border-radius: 999px; color: var(--ink-500); background: rgba(255, 255, 255, .48); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76); backdrop-filter: blur(14px); font-size: 12px; font-weight: 800; line-height: 1.35; }
.member-badge.vip { color: #257e69; background: rgba(226, 248, 241, .7); }
.member-entry { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; border-color: rgba(124,95,224,.24); color: #7055ce; background: linear-gradient(135deg,rgba(255,255,255,.86),rgba(244,239,255,.82)); box-shadow: 0 10px 25px -20px rgba(80,54,174,.7), inset 0 1px 0 #fff; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.member-entry::before { content: "✦"; color: #d39742; font-size: 12px; }
.member-entry:hover { transform: translateY(-1px); border-color: rgba(124,95,224,.42); box-shadow: 0 13px 27px -20px rgba(80,54,174,.82), inset 0 1px 0 #fff; }
.member-entry.vip { color: #79602a; border-color: rgba(213,166,66,.28); background: linear-gradient(135deg,rgba(255,252,239,.94),rgba(247,238,203,.8)); }
.membership-identity.regular { color: #596075; border-color: #dfe1e9; background: rgba(255,255,255,.68); }
.membership-identity.regular::before { color: #8b91a3; }
.membership-identity.expired { color: #777c89; border-color: #d8d9df; background: linear-gradient(135deg,rgba(245,245,247,.94),rgba(226,227,231,.8)); }
.membership-identity.expired::before { color: #a4a7af; }
.membership-identity.vip { color: #76551c; border-color: rgba(223,170,55,.42); background: linear-gradient(120deg,#fff9df,#f7df93 56%,#f1bd58); box-shadow: 0 12px 26px -19px rgba(151,99,19,.74),inset 0 1px 0 rgba(255,255,255,.82); }
.membership-identity.vip::before { color: #a7640b; }

.vip-dialog[hidden] { display: none; }
.vip-dialog { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 22px; }
.vip-dialog-backdrop { position: absolute; inset: 0; background: rgba(29,25,50,.46); backdrop-filter: blur(7px); }
.vip-dialog-card { position: relative; width: min(620px,100%); max-height: min(760px,calc(100vh - 44px)); padding: 28px; overflow: auto; border: 1px solid rgba(255,255,255,.72); border-radius: 24px; color: var(--ink-900); background: linear-gradient(155deg,#fff 0%,#fbf9ff 58%,#fff9ed 100%); box-shadow: 0 34px 85px -38px rgba(35,27,78,.72), inset 0 1px 0 #fff; }
.vip-dialog-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg,#7b61e8,#cb6aa5 58%,#e6aa4e); }
.vip-dialog-close { position: absolute; z-index: 2; top: 17px; right: 17px; width: 32px; height: 32px; border: 1px solid #e3dfef; border-radius: 10px; color: #777b8d; background: rgba(255,255,255,.76); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.vip-dialog-header { display: flex; align-items: center; gap: 16px; padding-right: 35px; }
.vip-crown { width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 18px; color: #fff7d9; background: linear-gradient(145deg,#7356df,#9d59ca 55%,#da9b42); box-shadow: 0 18px 30px -18px rgba(113,72,190,.7); font-size: 13px; font-weight: 850; letter-spacing: .08em; }
.vip-dialog-header small { color: #9b742c; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.vip-dialog-header h2 { margin: 3px 0 0; color: var(--ink-950); font-size: 23px; line-height: 1.25; letter-spacing: -.02em; }
.vip-dialog-header p { margin: 5px 0 0; color: #6d7183; font-size: 12px; }
.vip-current-expire { margin: 18px 0 0; padding: 11px 13px; border: 1px solid #eadfbf; border-radius: 11px; color: #756641; background: rgba(255,249,230,.72); font-size: 12px; }
.vip-current-expire strong { color: #5e4b20; }
.vip-benefits { margin-top: 22px; }
.vip-benefits h3, .vip-purchase-form legend { margin: 0; color: var(--ink-800); font-size: 13px; font-weight: 800; }
.vip-benefits ul { margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; list-style: none; }
.vip-benefits li { min-height: 42px; padding: 9px 11px; display: flex; align-items: center; gap: 8px; border: 1px solid #ebe7f3; border-radius: 11px; color: #575d70; background: rgba(255,255,255,.68); font-size: 11.5px; line-height: 1.4; }
.vip-benefits li i { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #7258da; background: #f0ecff; font-size: 10px; font-style: normal; font-weight: 800; }
.vip-purchase-form { margin-top: 21px; }
.vip-purchase-form fieldset { margin: 0; padding: 0; border: 0; }
.vip-plan-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.vip-plan-grid label { position: relative; cursor: pointer; }
.vip-plan-grid input { position: absolute; opacity: 0; pointer-events: none; }
.vip-plan-grid label > span { min-height: 70px; padding: 11px 9px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #e2dfec; border-radius: 12px; background: rgba(255,255,255,.76); transition: border-color .18s, transform .18s, box-shadow .18s; }
.vip-plan-grid label:hover > span { transform: translateY(-1px); border-color: #c9c1ed; }
.vip-plan-grid input:checked + span { border-color: #927ee8; background: linear-gradient(145deg,#f2efff,#fffaf0); box-shadow: 0 13px 25px -21px rgba(91,63,194,.76); }
.vip-plan-grid strong { color: var(--ink-900); font-size: 14px; }
.vip-plan-grid small { margin-top: 6px; color: #b33c78; font-size: 11px; font-weight: 650; white-space: nowrap; }
.vip-order-summary { margin-top: 15px; padding: 12px 2px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #e9e5f0; color: #737789; font-size: 12px; }
.vip-order-summary b { color: #5f6475; }
.vip-order-summary strong { color: #7254d9; font-size: 14px; }
.vip-submit { width: 100%; min-height: 45px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(110deg,#7159df,#a555be 62%,#d29242); box-shadow: 0 17px 30px -22px rgba(91,54,168,.82); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.vip-submit:disabled { opacity: .55; cursor: default; }
.vip-form-status { min-height: 17px; margin: 8px 0 0; color: #8a4b74; font-size: 11.5px; text-align: center; }
.vip-dialog-open { overflow: hidden; }

.welcome-card {
    position: relative;
    min-width: 0;
    padding: 31px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    color: var(--ink-900);
    background:
        radial-gradient(circle at 88% 18%, rgba(128, 103, 238, .22), transparent 28%),
        radial-gradient(circle at 8% 110%, rgba(57, 114, 232, .12), transparent 33%),
        linear-gradient(125deg, rgba(255, 255, 255, .82), rgba(242, 239, 255, .58));
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .95);
    backdrop-filter: blur(25px) saturate(145%);
    -webkit-backdrop-filter: blur(25px) saturate(145%);
}
.welcome-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: 11%;
    width: 220px;
    height: 180px;
    border-radius: 50%;
    background: rgba(128, 103, 238, .15);
    filter: blur(35px);
    pointer-events: none;
}
.welcome-card::after { content: ""; position: absolute; top: 0; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .98), transparent); }
.welcome-card > * { position: relative; z-index: 1; }
.welcome-card small { color: var(--purple-700); font-size: 12px; font-weight: 720; line-height: 1.45; }
.welcome-card h2 { margin: 7px 0 5px; overflow: hidden; color: transparent; background: linear-gradient(92deg, var(--blue-600), var(--purple-600) 72%); background-clip: text; -webkit-background-clip: text; font-size: clamp(19px, 3vw, 27px); letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.welcome-card p { margin: 0; color: var(--ink-500); font-size: 14px; line-height: 1.55; }
.account-id { flex: 0 0 auto; min-width: 106px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .86); border-radius: 14px; background: rgba(255, 255, 255, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 12px 28px -20px rgba(90, 67, 214, .62); backdrop-filter: blur(14px); }
.account-id span { display: block; color: var(--ink-500); font-size: 12px; line-height: 1.4; }
.account-id strong { display: block; margin-top: 5px; color: var(--purple-700); font-size: 18px; }

.metric-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card {
    position: relative;
    min-width: 0;
    min-height: 132px;
    padding: 21px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 19px;
    background: var(--glass);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(19px) saturate(135%);
    -webkit-backdrop-filter: blur(19px) saturate(135%);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.metric-card::after { content: ""; position: absolute; top: -55px; right: -45px; width: 105px; height: 105px; border-radius: 50%; background: rgba(128, 103, 238, .1); filter: blur(8px); }
.metric-card:nth-child(3)::after { background: rgba(49, 169, 215, .11); }
.metric-card:nth-child(4)::after { background: rgba(74, 183, 156, .12); }
.metric-card:hover { transform: translateY(-3px); background: var(--glass-strong); box-shadow: var(--shadow-lg), inset 0 1px 0 #fff; }
.metric-card > span { position: relative; z-index: 1; display: block; color: var(--ink-500); font-size: 12px; line-height: 1.4; }
.metric-card > strong { position: relative; z-index: 1; display: block; margin: 13px 0 7px; overflow: hidden; color: var(--ink-950); font-size: 25px; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.metric-card > small { position: relative; z-index: 1; display: block; color: var(--ink-500); font-size: 12px; line-height: 1.55; }
.score-card > strong { color: var(--purple-700); }
.recharge-mini { position: absolute; z-index: 2; top: 17px; right: 17px; padding: 6px 10px; border: 1px solid rgba(104,82,229,.18); border-radius: 9px; color: var(--purple-700); background: rgba(238,235,255,.72); font-size: 12px; font-weight: 800; line-height: 1.35; }
.recharge-mini:hover, .panel-action:hover { color: #fff; background: linear-gradient(120deg, var(--blue-600), var(--purple-600)); }

.panel { margin-top: 20px; overflow: hidden; border: 1px solid var(--glass-border); border-radius: 22px; background: rgba(255, 255, 255, .62); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .92); backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter: blur(24px) saturate(135%); }
.page-panel { margin-top: 0; }
.panel-header { min-height: 78px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(218, 216, 237, .62); background: rgba(255, 255, 255, .22); }
.panel-header h2 { margin: 0; color: var(--ink-950); font-size: 18px; letter-spacing: -.02em; }
.panel-header p { margin: 5px 0 0; color: var(--ink-500); font-size: 13px; line-height: 1.5; }
.panel-header > a { color: var(--purple-700); font-size: 13px; font-weight: 750; line-height: 1.4; }
.panel-header > .panel-action { padding: 8px 12px; border: 1px solid rgba(104,82,229,.16); border-radius: 10px; background: rgba(238,235,255,.65); transition: color .18s, background .18s; }
.item-list, .transaction-list { display: grid; }
.mail-item, .transaction-item { min-width: 0; min-height: 68px; padding: 14px 24px; display: flex; align-items: center; gap: 13px; transition: background .16s ease; }
.mail-item:hover, .transaction-item:hover { background: rgba(255, 255, 255, .42); }
.mail-item + .mail-item, .transaction-item + .transaction-item { border-top: 1px solid rgba(225, 224, 239, .68); }
.read-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--purple-500); box-shadow: 0 0 0 4px rgba(128, 103, 238, .12); }
.read-dot.read { background: #b4bdcc; box-shadow: none; }
.item-main { min-width: 0; flex: 1 1 auto; }
.item-main strong, .item-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-main strong { font-size: 14px; line-height: 1.4; }
.item-main span { margin-top: 5px; color: var(--ink-500); font-size: 13px; line-height: 1.45; }
.mail-item time, .transaction-item time { flex: 0 0 auto; color: #747b91; font-size: 12px; line-height: 1.4; }
.status-pill { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; color: #625c7e; background: rgba(238, 235, 255, .62); font-size: 11px; line-height: 1.35; }
.mail-list-columns { min-height: 42px; padding: 0 24px 0 45px; display: grid; grid-template-columns: minmax(240px,1.25fr) minmax(130px,.55fr) 58px 130px 84px; align-items: center; gap: 16px; border-bottom: 1px solid rgba(225,224,239,.68); color: #858a9e; background: rgba(250,249,255,.54); font-size: 11px; font-weight: 750; }
.mail-page-list .mail-item { display: grid; grid-template-columns: 8px minmax(240px,1.25fr) minmax(130px,.55fr) 58px 130px 84px; gap: 16px; }
.mail-page-list .mail-item.is-read .item-main strong, .item-list .mail-item.is-read .item-main strong { color: #464b57; font-weight: 550; }
.mail-page-list .item-main { min-width: 0; }
.mail-keyword { min-width: 0; display: flex; align-items: center; gap: 7px; }
.mail-keyword > strong { min-width: 0; overflow: hidden; color: #5545c6; font-size: 13px; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.mail-keyword > span { color: #acafbb; }
.mail-keyword button { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 1px solid #dedaf4; border-radius: 8px; background: #f8f7ff; cursor: pointer; transition: border-color .16s, background .16s, transform .16s; }
.mail-keyword button:hover, .mail-keyword button:focus-visible { outline: 0; border-color: #bfb6ef; background: #f0edff; }
.mail-keyword button:active { transform: scale(.93); }
.mail-keyword button.is-copied { border-color: rgba(54,166,134,.35); background: #eaf8f3; }
.mail-keyword img { width: 13px; height: 13px; display: block; }
.mail-open-button { min-height: 32px; padding: 0 10px; border: 1px solid rgba(104,82,229,.2); border-radius: 9px; color: var(--purple-700); background: rgba(248,247,255,.86); font: inherit; font-size: 11px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.mail-open-button:hover, .mail-open-button:focus-visible { outline: 0; border-color: #bdb4ee; background: #f1eeff; }

.mail-reader[hidden], .mail-reader-attachments[hidden] { display: none; }
.mail-reader-open { overflow: hidden; }
.mail-reader { position: fixed; z-index: 130; inset: 0; display: grid; place-items: center; padding: 24px; }
.mail-reader-backdrop { position: absolute; inset: 0; border: 0; background: rgba(25,25,48,.34); backdrop-filter: blur(2px); }
.mail-reader-card { position: relative; width: min(100%,860px); max-height: min(88vh,820px); overflow: hidden; display: grid; grid-template-rows: auto auto minmax(180px,1fr) auto auto; border: 1px solid #e2def3; border-radius: 22px; color: var(--ink-900); background: #fff; box-shadow: 0 34px 90px -34px rgba(38,31,91,.55); }
.mail-reader-head { min-height: 76px; padding: 15px 20px; display: grid; grid-template-columns: 42px minmax(0,1fr) 34px; align-items: center; gap: 12px; border-bottom: 1px solid #eceaf4; background: #fcfcff; }
.mail-reader-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: #7463df; font-size: 15px; font-weight: 850; }
.mail-reader-head > div:nth-child(2) { min-width: 0; }
.mail-reader-head span, .mail-reader-head strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-reader-head span { color: #8a8fa1; font-size: 10px; font-weight: 750; letter-spacing: .07em; }
.mail-reader-head strong { margin-top: 3px; font-size: 13px; }
.mail-reader-close { width: 34px; height: 34px; border: 1px solid #e0ddec; border-radius: 10px; color: #676d83; background: #fff; font: inherit; font-size: 21px; line-height: 1; cursor: pointer; }
.mail-reader-summary { padding: 20px 22px; border-bottom: 1px solid #eceaf4; }
.mail-reader-type { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: #6557d4; background: #f0edff; font-size: 10px; font-weight: 750; }
.mail-reader-summary h2 { margin: 10px 0 15px; color: var(--ink-950); font-size: clamp(20px,2.3vw,27px); line-height: 1.3; overflow-wrap: anywhere; }
.mail-reader-summary dl { margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.mail-reader-summary dl div { min-width: 0; padding: 9px 11px; border: 1px solid #eceaf4; border-radius: 10px; background: #fbfbfe; }
.mail-reader-summary dt { color: #9296a6; font-size: 10px; }
.mail-reader-summary dd { margin: 4px 0 0; overflow: hidden; color: #555c73; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.mail-reader-body { min-height: 220px; overflow: auto; background: #fff; }
.mail-reader-loading { min-height: 220px; display: grid; place-content: center; justify-items: center; gap: 12px; color: #777d91; font-size: 12px; }
.mail-reader-loading i { width: 30px; height: 30px; border: 3px solid #e8e5fa; border-top-color: #715ee0; border-radius: 50%; animation: mail-reader-spin .72s linear infinite; }
.mail-reader-frame { width: 100%; min-height: 360px; display: block; border: 0; background: #fff; }
.mail-reader-text { min-height: 220px; box-sizing: border-box; margin: 0; padding: 22px; color: #34384a; font: 13px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-reader-attachments { padding: 16px 22px; border-top: 1px solid #eceaf4; background: #fcfcff; }
.mail-reader-attachments h3 { margin: 0 0 10px; font-size: 12px; }
.mail-reader-attachments h3 span { color: #7667dd; }
.mail-reader-attachments > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.mail-reader-attachments > div > div { min-width: 0; padding: 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #e7e4f1; border-radius: 10px; background: #fff; }
.mail-reader-attachments i { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #6557d4; background: #f0edff; font-size: 10px; font-style: normal; font-weight: 800; }
.mail-reader-attachments strong, .mail-reader-attachments small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-reader-attachments strong { font-size: 11px; }
.mail-reader-attachments small { margin-top: 3px; color: #888da0; font-size: 10px; }
.mail-reader-card > footer { min-height: 56px; padding: 10px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #eceaf4; color: #8a8fa1; background: #fcfcff; font-size: 10px; }
.mail-reader-card > footer button { min-height: 34px; padding: 0 16px; border: 1px solid #7865e4; border-radius: 9px; color: #fff; background: #7865e4; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
@keyframes mail-reader-spin { to { transform: rotate(360deg); } }
.transaction-mark { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .84); border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); }
.transaction-mark.income { background: rgba(226, 248, 241, .76); }
.transaction-mark.expense { background: rgba(255, 235, 238, .76); }
.score-change { flex: 0 0 auto; font-size: 14px; }
.score-change.income { color: #288a72; }
.score-change.expense { color: var(--red-500); }
.empty-state { min-height: 250px; display: grid; place-content: center; justify-items: center; color: var(--ink-500); text-align: center; }
.empty-state::before { content: ""; width: 44px; height: 34px; margin-bottom: 16px; border: 1.7px solid rgba(128, 103, 238, .44); border-radius: 10px; background: rgba(255, 255, 255, .25); box-shadow: inset 0 -8px 0 rgba(238, 235, 255, .62), 0 12px 25px -18px rgba(90, 67, 214, .7); }
.empty-state strong { color: var(--ink-700); font-size: 15px; line-height: 1.4; }
.empty-state span { margin-top: 6px; font-size: 13px; line-height: 1.5; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 17px 22px; text-align: left; white-space: nowrap; }
th { color: var(--ink-500); background: rgba(246, 244, 255, .46); font-size: 12px; font-weight: 750; line-height: 1.4; }
td { border-top: 1px solid rgba(225, 224, 239, .68); color: #4d546d; font-size: 13px; line-height: 1.45; transition: background .16s ease; }
tr:hover td { background: rgba(255, 255, 255, .36); }
td strong { color: var(--ink-900); font-size: 14px; }
.mailbox-open-link { display: inline-flex; min-height: 34px; padding: 0 13px; align-items: center; justify-content: center; border: 1px solid rgba(104,82,229,.2); border-radius: 10px; color: var(--purple-700); background: rgba(246,244,255,.78); font-size: 12px; font-weight: 750; transition: color .18s, border-color .18s, background .18s; }
.mailbox-open-link:hover { border-color: transparent; color: #fff; background: linear-gradient(120deg, var(--blue-600), var(--purple-600)); }
.mailbox-expiry { font-weight: 720; }
.mailbox-expiry.warning { color: #c34a62; }
.mailbox-expiry.healthy { color: #27836c; }
.mailbox-expiry.standard, .mailbox-expiry.permanent { color: #62697c; }
.mailbox-row.expired td, .mailbox-row.expired td strong, .mailbox-row.expired .mailbox-expiry { color: #464b57; background: transparent; }
.mailbox-row.expired:hover td { background: rgba(255,255,255,.36); }
.mailbox-open-disabled { display: inline-flex; min-height: 32px; padding: 0 12px; align-items: center; justify-content: center; border: 1px solid rgba(70, 72, 82, .12); border-radius: 10px; color: #565966; background: rgba(70, 72, 82, .055); font-size: 12px; font-weight: 700; }
.list-tools { min-height: 76px; padding: 14px 24px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.2); }
.list-search { width: min(520px,100%); min-width: 0; flex: 0 1 520px; }
.list-search-control { display: flex; align-items: center; gap: 8px; }
.list-search-field { position: relative; min-width: 0; flex: 1 1 auto; }
.list-search-control input { width: 100%; min-height: 38px; padding: 0 68px 0 13px; border: 1px solid rgba(210,207,231,.86); border-radius: 11px; outline: 0; color: var(--ink-900); background: rgba(255,255,255,.72); font-size: 12.5px; transition: border-color .18s, box-shadow .18s, background .18s; }
.list-search-control input::placeholder { color: #999eae; font-weight: 450; }
.list-search-control input:focus { border-color: rgba(104,82,229,.5); background: #fff; box-shadow: 0 0 0 3px rgba(104,82,229,.08); }
.list-search-control button, .list-search-control a, .list-pagination a, .list-pagination .disabled { min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(104,82,229,.18); border-radius: 9px; white-space: nowrap; font: inherit; font-size: 11.5px; font-weight: 720; }
.list-search-control button { position: absolute; top: 4px; right: 4px; min-height: 30px; padding: 0 13px; border: 0; border-radius: 8px; color: #fff; background: linear-gradient(120deg,var(--blue-600),var(--purple-600)); box-shadow: 0 5px 12px -7px rgba(87,66,210,.72); cursor: pointer; }
.list-search-control a, .list-pagination a { color: var(--purple-700); background: rgba(247,245,255,.78); }
.list-page-summary { margin-right: 4px; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; color: var(--ink-500); font-size: 11.5px; white-space: nowrap; }
.list-page-summary strong { color: var(--ink-900); }
.list-pagination { min-height: 62px; padding: 13px 24px 15px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); }
.list-pagination .disabled { color: #a1a4b1; border-color: rgba(190,190,204,.26); background: rgba(245,245,248,.52); }
.list-page-current { min-width: 82px; color: var(--ink-500); text-align: center; font-size: 11.5px; }
.list-page-current strong { color: var(--ink-900); }

@media (max-width: 980px) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .list-tools { align-items: stretch; }
    .list-search { width: min(520px,100%); flex-basis: auto; }
    .mail-list-columns { display: none; }
    .mail-page-list .mail-item { grid-template-columns: 8px minmax(0,1fr) auto; gap: 9px 12px; }
    .mail-page-list .item-main { grid-column: 2 / -1; }
    .mail-page-list .mail-keyword { grid-column: 2; }
    .mail-page-list .status-pill { grid-column: 3; }
    .mail-page-list time { grid-column: 2; }
    .mail-page-list .mail-open-button { grid-column: 3; grid-row: 3; }
}
@media (max-width: 760px) {
    .workspace { display: block; overflow: visible; }
    .sidebar { position: sticky; z-index: 5; width: 100%; height: auto; padding: 18px 16px 12px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .68); }
    .brand { padding: 0; }
    .back-home { display: none; }
    .side-nav { margin-top: 17px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
    .side-nav::-webkit-scrollbar { display: none; }
    .nav-item { flex: 0 0 auto; min-height: 42px; padding: 0 12px; font-size: 14px; }
    .nav-item:hover { transform: none; }
    .nav-icon { width: 16px; height: 16px; }
    .content { width: 100%; padding: 30px 15px 48px; }
    .content-header { margin-bottom: 22px; }
    .content-header { align-items: flex-start; flex-direction: column; }
    .top-account-bar { width: 100%; justify-content: space-between; }
    .top-user-chip { flex: 1 1 auto; max-width: 360px; }
    .welcome-card { align-items: flex-start; padding: 24px; flex-direction: column; }
    .account-id { width: 100%; }
    .mail-item, .transaction-item { align-items: flex-start; flex-wrap: wrap; padding: 15px 18px; }
    .mail-item time, .transaction-item time { margin-left: 21px; }
    .status-pill { margin-left: 21px; }
    table, thead, tbody, tr, th, td { display: block; }
    thead { display: none; }
    tr { padding: 13px 18px; }
    tr + tr { border-top: 1px solid var(--line); }
    td { min-height: 35px; padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 0; white-space: normal; text-align: right; }
    td::before { content: attr(data-label); flex: 0 0 auto; color: var(--ink-500); font-size: 12px; }
    .list-tools, .list-pagination { padding-left: 16px; padding-right: 16px; }
    .list-search-control { align-items: stretch; }
    .list-pagination { flex-wrap: wrap; justify-content: center; }
    .list-pagination .list-page-summary { width: 100%; margin: 0; justify-content: center; }
    .vip-dialog-card { padding: 23px 19px; border-radius: 20px; }
    .vip-benefits ul { grid-template-columns: 1fr; }
    .vip-plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .mail-reader { padding: 12px; }
    .mail-reader-card { max-height: 94vh; border-radius: 17px; }
    .mail-reader-summary dl { grid-template-columns: 1fr; }
    .mail-reader-frame { min-height: 300px; }
    .mail-reader-attachments > div { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .member-badge { display: none; }
    .member-entry { display: inline-flex; }
    .top-account-bar { align-items: stretch; flex-direction: column-reverse; }
    .top-user-chip { width: 100%; max-width: none; }
    .membership-identity { align-self: flex-end; }
    .metric-grid { grid-template-columns: 1fr; }
    .metric-card { min-height: 112px; }
    .panel-header { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
}