.member-app {
  --m-bg: rgba(0, 0, 0, .96);
  --m-sidebar: rgba(31, 31, 31, .88);
  --m-panel: rgba(31, 31, 31, .88);
  --m-border: rgba(66, 66, 66, .3);
  --m-text: #ffffffd9;
  --m-muted: #ffffff73;
  --m-faint: #ffffff4d;
  --m-active: #32618a;
  --m-primary: #3b79af;
  --m-hover: #ffffff0d;
  --m-width: 280px;
  min-height: 100svh;
  background: var(--m-bg);
  color: var(--m-text);
  font-size: 14px;
  line-height: 22px;
}
.member-app h1, .member-app h2, .member-app h3, .member-app p { margin: 0; }
.member-app button, .member-app input, .member-app select, .member-app textarea { font: inherit; }
.member-app button, .member-app a { -webkit-tap-highlight-color: transparent; }
.m-icon { display: block; width: 24px; height: 24px; flex: 0 0 auto; }
.m-sidebar { position: fixed; z-index: 15; top: 0; left: 0; bottom: 0; width: var(--m-width); background: var(--m-sidebar); border-right: 1px solid var(--m-border); display: flex; flex-direction: column; backdrop-filter: blur(20px); transition: width .2s, transform .2s; }
.m-brand { display: flex; align-items: center; justify-content: center; gap: 12px; height: 64px; flex: 0 0 64px; color: #fff; font-family: Rubik, "Microsoft YaHei", sans-serif; font-weight: 700; font-size: 24px; line-height: 32px; white-space: nowrap; }
.m-brand img { object-fit: contain; }
.m-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px 20px; scrollbar-width: thin; scrollbar-color: #ffffff20 transparent; }
.m-nav-group + .m-nav-group { margin-top: 8px; }
.m-nav-group h2 { display: flex; align-items: center; height: 32px; padding: 0 12px; color: var(--m-faint); font-weight: 400; font-size: 14px; line-height: 22px; }
.m-nav-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px; margin-bottom: 8px; border-radius: 6px; color: #ffffffad; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s; }
.m-nav-link:hover { color: #fff; background: #32618a80; }
.m-nav-link.is-active { background: var(--m-active); color: #ffffffd9; }
.m-nav-link .m-icon { width: 24px; height: 24px; }
.m-user-card { display: flex; align-items: center; gap: 12px; min-height: 92px; flex: 0 0 auto; padding: 20px 24px; border-top: 1px solid var(--m-border); }
.m-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 52px; width: 52px; border-radius: 50%; background: linear-gradient(145deg, #729bb9, #2b4f69); color: #e2f2ff; }
.m-avatar .m-icon { width: 30px; height: 30px; }
.m-user-card > div { min-width: 0; }
.m-user-card strong { display: block; font-size: 16px; font-weight: 500; line-height: 24px; }
.m-user-card span:not(.m-avatar) { display: block; color: var(--m-muted); font-size: 12px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; }
.m-main { min-width: 0; margin-left: var(--m-width); transition: margin-left .2s; }
.m-topbar { position: sticky; top: 0; z-index: 12; display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 0 20px; background: var(--m-sidebar); border-bottom: 1px solid var(--m-border); backdrop-filter: blur(28px); }
.m-topbar-title { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 24px; }
.m-topbar-tools { display: flex; align-items: center; gap: 4px; }
.m-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 6px; border-radius: 6px; color: #ffffff9e; background: transparent; transition: background .2s, color .2s; }
.m-icon-button:hover { background: var(--m-hover); color: var(--m-text); }
.m-local-mark { font-size: 11px; color: var(--m-faint); padding-right: 8px; white-space: nowrap; }
.m-top-menu { position: relative; }
.m-dropdown { position: absolute; right: 0; top: 44px; z-index: 20; min-width: 132px; padding: 6px; border-radius: 8px; border: 1px solid var(--m-border); background: var(--m-panel); box-shadow: 0 6px 24px #0005; }
.m-dropdown button, .m-dropdown a { display: block; width: 100%; padding: 10px 12px; text-align: left; white-space: nowrap; border-radius: 4px; background: transparent; }
.m-dropdown button:hover, .m-dropdown a:hover { background: var(--m-hover); }
.m-content { max-width: 1360px; padding: 40px 32px 32px; margin: 0 auto; }
.m-dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.312fr) minmax(0, 1fr); gap: 24px; }
.m-dashboard-left, .m-dashboard-right { min-width: 0; }
.m-subscription { position: relative; isolation: isolate; overflow: hidden; height: 320px; padding: 32px; border-radius: 12px; color: #fff; background: linear-gradient(115deg, #2f668f, #254962 62%, #243746); }
.m-sub-glow { position: absolute; z-index: -1; width: 156px; height: 156px; right: -54px; top: -80px; background: #d9ba61; filter: blur(54px); opacity: .5; }
.m-greeting { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.m-greeting .m-avatar { height: 44px; width: 44px; border: 2px solid #ffffff5c; }
.m-greeting .m-avatar .m-icon { width: 26px; height: 26px; }
.m-greeting h1 { font-size: 24px; line-height: 24px; font-weight: 700; }
.m-greeting > div > span { display: block; margin-top: 4px; font-size: 12px; line-height: 18px; color: #ffffff73; }
.m-sub-label { color: #ffffff73; font-size: 14px; line-height: 22px; }
.m-subscription h2 { position: relative; z-index: 2; font-family: Rubik, "Microsoft YaHei", sans-serif; font-size: 30px; line-height: 38px; font-weight: 600; margin: 2px 0 10px; max-width: 70%; }
.m-sub-details { position: relative; z-index: 2; display: grid; font-size: 14px; line-height: 22px; color: #ffffffad; }
.m-renew-button { position: absolute; z-index: 3; left: 32px; bottom: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 42px; min-width: 124px; padding: 8px 16px; color: #fff; border: 1px solid #ffffff63; border-radius: 8px; background: #ffffff1a; backdrop-filter: blur(12px); transition: background .2s; }
.m-renew-button:hover { background: #ffffff30; }
.m-renew-button .m-icon { width: 18px; height: 18px; }
.m-usage-gauge { position: absolute; bottom: 12px; right: 8px; width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(from 223deg, #77b0e0 0 9%, #ffffff14 9% 74%, transparent 74% 100%); }
.m-usage-gauge::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #28465b; }
.m-gauge-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 10px; }
.m-gauge-inner small { color: #ffffff73; font-size: 12px; line-height: 20px; }
.m-gauge-inner strong { font-family: Rubik, sans-serif; font-weight: 500; font-size: 40px; line-height: 52px; }
.m-gauge-inner strong span { font-size: 18px; }
.m-gauge-inner > span { color: #ffffff73; font-size: 12px; line-height: 20px; }
.m-gauge-tick { position: absolute; width: 5px; height: 19px; background: #fff; border-radius: 6px; top: 120px; left: 13px; transform: rotate(-40deg); }
.m-panel { padding: 24px; border-radius: 12px; background: var(--m-panel); }
.m-panel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m-panel h2 { font-size: 16px; line-height: 24px; font-weight: 700; }
.m-notice { padding: 16px; min-height: 145px; }
.m-notice > header { margin-bottom: 14px; }
.m-notice > header > .m-icon { width: 22px; height: 22px; color: var(--m-muted); }
.m-notice-item { display: block; width: 100%; padding: 12px 16px; border-radius: 16px; text-align: left; color: var(--m-text); background: #243340; transition: background .2s; }
.m-notice-item:hover { background: #2e4354; }
.m-notice-item > span { font-size: 16px; line-height: 24px; font-weight: 500; }
.m-notice-item > p { color: var(--m-muted); font-size: 14px; line-height: 22px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-client-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.m-client-card { border-radius: 12px; overflow: hidden; }
.m-client-info { position: relative; display: flex; align-items: center; gap: 16px; min-height: 140px; padding: 28px 20px; }
.m-client-ios { color: #4c43cbb8; --os-face: #c4bcfa; background: linear-gradient(135deg, #9b84ff33, #333dff80) #fff; }
.m-client-windows { color: #0083e0e0; --os-face: #c0e0f7; background: linear-gradient(135deg, #4e9eef33, #0083e080) #fff; }
.m-client-android { color: #00a76fb8; --os-face: #c4f0d8; background: linear-gradient(135deg, #5be49b33, #00a76f80) #fff; }
.m-client-mac { color: #858585e0; --os-face: #d4d7dc; background: linear-gradient(135deg, #9a9a9a33, #65656580) #fff; }
.m-client-info .m-os-icon { width: 54px; height: 54px; }
.m-client-info h2 { font-family: Rubik, "Microsoft YaHei", sans-serif; font-size: 18px; line-height: 28px; font-weight: 600; }
.m-client-info p { font-size: 14px; line-height: 22px; margin-top: 2px; opacity: .75; }
.m-client-badge { position: absolute; right: 12px; top: 10px; padding: 0 7px; border-radius: 4px; font-size: 11px; line-height: 18px; color: #fff; background: #eb647a; }
.m-client-windows .m-client-badge { background: #239caf; }
.m-client-action { display: flex; align-items: center; justify-content: space-between; padding: 16px; min-height: 56px; color: #6caee6; background: #292930; font-size: 14px; line-height: 24px; transition: background .2s; }
.m-client-action:hover { background: #34343d; }
.m-client-action .m-icon { width: 18px; height: 18px; }
.m-quick-import { min-height: 198px; margin-top: 24px; }
.m-text-button { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: transparent; color: var(--m-primary); font-size: 13px; }
.m-text-button .m-icon { width: 16px; height: 16px; }
.m-text-button:hover { color: #84c6ff; }
.m-import-clients { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.m-import-client { display: flex; align-items: center; flex-direction: column; gap: 8px; padding: 0; background: transparent; color: var(--m-muted); min-width: 0; }
.m-import-client > span:last-child { font-size: 10px; line-height: 16px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-client-logo { display: block; width: 40px; height: 40px; object-fit: contain; border-radius: 10px; }
.m-client-symbol { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: #fff; font-size: 24px; font-weight: 700; box-shadow: 0 3px 12px #0002; }
.m-symbol-purple { background: linear-gradient(140deg, #eaa8f6, #8e62dd); }.m-symbol-blue { background: linear-gradient(140deg, #95d3ff, #3686e8); }.m-symbol-yellow { background: linear-gradient(140deg, #f4d573, #d7a63c); }.m-symbol-orange { background: linear-gradient(140deg, #ffae71, #ea693e); }.m-symbol-pink { background: linear-gradient(140deg, #ffaaa6, #db5492); }.m-symbol-green { background: linear-gradient(140deg, #a1e6b4, #5faf7f); }
.m-subscription-note { font-size: 11px; line-height: 18px; color: var(--m-faint); margin-top: 16px; }
.m-invite-promo { display: flex; align-items: center; justify-content: space-between; position: relative; min-height: 274px; padding: 32px; margin-top: 24px; overflow: hidden; border-radius: 12px; color: #503821; background: linear-gradient(158deg, #ffeacc, #ffba60, #ff7100); }
.m-invite-promo > div:first-child { max-width: 72%; position: relative; z-index: 2; }
.m-invite-promo > div > span { opacity: .75; font-size: 14px; line-height: 22px; }
.m-invite-promo h2 { font-size: 24px; line-height: 32px; margin: 12px 0; font-weight: 700; }
.m-invite-promo p { font-size: 14px; line-height: 22px; color: #674527; }
.m-invite-promo a { display: inline-flex; gap: 12px; align-items: center; padding: 10px 16px; margin-top: 20px; border-radius: 8px; color: #f7e2c9; background: linear-gradient(90deg, #504035, #181818); box-shadow: 0 0 12px #e1a667e0 inset; }
.m-invite-promo a .m-icon { width: 18px; height: 18px; }
.m-invite-gift { position: absolute; right: 0; bottom: 16px; transform: rotate(-15deg); color: #b65116; filter: drop-shadow(8px 10px 4px #8f471033); }
.m-invite-gift .m-icon { height: 145px; width: 145px; stroke-width: 1; }
.m-invite-gift img { width: 180px; height: 180px; object-fit: contain; }
.m-footer { padding: 12px 32px 28px; border-top: 1px solid var(--m-border); background: var(--m-sidebar); font-size: 11px; line-height: 18px; color: var(--m-faint); text-align: center; }
.m-footer > span { padding: 0 8px; }
.m-page-pending { min-height: 240px; }
.m-page-pending h1 { font-size: 24px; line-height: 32px; margin-bottom: 16px; }
.m-page-pending p { color: var(--m-muted); }
.member-app a:focus-visible, .member-app button:focus-visible, .m-dialog button:focus-visible, .member-app input:focus-visible, .member-app select:focus-visible, .m-dialog input:focus-visible, .m-dialog textarea:focus-visible, .m-dialog select:focus-visible { outline: 2px solid #75b9f3; outline-offset: 3px; }
.m-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--m-border, #ffffff24); border-radius: 8px; background: transparent; color: var(--m-text, #ffffffd9); transition: background .18s, border-color .18s; }
.m-button:hover { background: var(--m-hover, #ffffff0d); border-color: var(--m-primary, #4f95cf); }
.m-button-primary { color: #fff; border-color: #4f95cf; background: #32618a; }
.m-button-primary:hover { background: #407cae; }
.m-button:disabled { opacity: .4; cursor: not-allowed; }
.m-button .m-icon { width: 18px; height: 18px; }
.m-dialog { width: min(520px, calc(100vw - 32px)); margin: min(100px, 10vh) auto auto; padding: 0; border: 1px solid #ffffff24; border-radius: 8px; background: #1f1f1f; color: #ffffffd9; box-shadow: 0 24px 70px #0008; font: 14px/22px Rubik, "Microsoft YaHei", sans-serif; }
.m-dialog::backdrop { background: #0009; backdrop-filter: blur(4px); }
.m-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #ffffff17; }
.m-dialog-heading h2 { font-size: 18px; line-height: 28px; font-weight: 600; margin: 0; }
.m-dialog-content { padding: 24px; max-height: min(66vh, 560px); overflow-y: auto; }
.m-dialog-content p { margin: 0 0 16px; }
.m-dialog-content p:last-child { margin-bottom: 0; }
.m-dialog-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid #ffffff17; }
.m-demo-note { color: var(--m-muted, #ffffff73); font-size: 12px; line-height: 20px; }
.m-form-field { display: grid; gap: 8px; margin-bottom: 20px; }
.m-form-field label { color: var(--m-text, #ffffffd9); }
.m-form-field input, .m-form-field textarea, .m-form-field select, .m-input { width: 100%; min-width: 0; min-height: 40px; border: 1px solid var(--m-border, #ffffff24); border-radius: 6px; background: transparent; color: var(--m-text, #ffffffd9); padding: 8px 12px; font: inherit; transition: border-color .2s; }
.m-form-field input:hover, .m-form-field textarea:hover, .m-form-field select:hover { border-color: #4f95cf; }
.m-form-field input::placeholder, .m-form-field textarea::placeholder { color: var(--m-faint, #ffffff4d); }
.m-form-field textarea { resize: vertical; min-height: 140px; }
.m-form-field option { background: #1c1c1c; color: #ffffffd9; }
.m-form-error { color: #f07f87; font-size: 12px; line-height: 18px; }
.m-form-field input[aria-invalid="true"], .m-form-field textarea[aria-invalid="true"] { border-color: #f07f87; }
.m-table-wrap { width: 100%; overflow-x: auto; }
.m-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; font-size: 14px; line-height: 22px; }
.m-table th { height: 54px; padding: 16px; color: var(--m-muted); background: var(--m-hover); font-weight: 500; border-bottom: 1px solid var(--m-border); }
.m-table td { padding: 16px; border-bottom: 1px solid var(--m-border); }
.m-table tr:last-child td { border-bottom: 0; }
.m-plan-center-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.m-plan-center-heading h1 { font-size: 24px; line-height: 32px; font-weight: 600; }
.m-plan-filters { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--m-border); border-radius: 10px; background: var(--m-panel); }
.m-plan-filters button { min-height: 44px; padding: 8px 16px; border-radius: 6px; color: var(--m-muted); background: transparent; white-space: nowrap; transition: color .18s, background .18s; }
.m-plan-filters button:hover { color: var(--m-text); background: var(--m-hover); }
.m-plan-filters button.is-active { color: #fff; background: var(--m-active); }
.m-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.m-plan-tone-blue { --plan-tone: #4f9bd1; --plan-button: #32618a; }
.m-plan-tone-violet { --plan-tone: #a98cf5; --plan-button: #695193; }
.m-plan-tone-amber { --plan-tone: #e9a34d; --plan-button: #845625; }
.m-plan-tone-slate { --plan-tone: #8fabbc; --plan-button: #466070; }
.m-plan-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid color-mix(in srgb, var(--plan-tone) 28%, var(--m-border)); border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--plan-tone) 22%, transparent), transparent 54%) var(--m-panel); transition: border-color .18s, box-shadow .18s; }
.m-plan-card:hover, .m-plan-card:focus-within { border-color: var(--plan-tone); box-shadow: 0 10px 26px #0002; }
.m-plan-kind { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-bottom: 14px; color: var(--plan-tone); font-size: 12px; line-height: 20px; }
.m-plan-kind > .m-icon { width: 20px; height: 20px; }
.m-plan-recommend { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 2px 7px; border-radius: 4px; color: #ffad55; background: #75361255; font-size: 11px; line-height: 20px; }
.m-plan-recommend .m-icon { width: 14px; height: 14px; color: #ff8a3d; stroke-width: 1.8; }
.m-plan-card h2 { min-height: 56px; font-size: 20px; line-height: 28px; font-weight: 600; overflow-wrap: anywhere; }
.m-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-top: 20px; color: var(--plan-tone); font-variant-numeric: tabular-nums; }
.m-plan-price > strong { font: 600 34px/44px Rubik, sans-serif; }
.m-plan-price > small { font-size: 16px; line-height: 24px; }
.m-plan-price > span { font-size: 13px; line-height: 20px; color: var(--m-muted); }
.m-plan-card-features { display: grid; gap: 10px; margin: 24px 0; padding: 24px 0 0; border-top: 1px solid var(--m-border); list-style: none; }
.m-plan-card-features li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 13px; line-height: 22px; color: var(--m-text); }
.m-plan-card-features .m-icon { width: 18px; height: 22px; color: var(--plan-tone); }
.m-plan-card-features li > span { overflow-wrap: anywhere; }
.m-plan-card-footer { display: grid; gap: 16px; margin-top: auto; }
.m-plan-cycle { display: grid; gap: 8px; min-width: 0; }
.m-plan-cycle > span { color: var(--m-muted); font-size: 12px; line-height: 20px; }
.m-plan-cycle select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--plan-tone) 30%, var(--m-border)); border-radius: 8px; background: #0003; color: var(--m-text); font-size: 14px; cursor: pointer; }
.m-plan-cycle option { color: var(--m-text); background: #1f1f1f; }
.m-plan-purchase { justify-content: space-between; min-height: 46px; color: #fff; border-color: var(--plan-tone); background: var(--plan-button); font-weight: 500; }
.m-plan-purchase:hover { border-color: var(--plan-tone); background: color-mix(in srgb, var(--plan-button) 80%, var(--plan-tone)); }
.m-plan-purchase:active { background: var(--plan-button); }
.m-back-arrow { transform: rotate(180deg); }
.m-checkout-dialog { --m-panel: #252525; --m-border: #ffffff24; --m-text: #ffffffd9; --m-muted: #ffffff91; --m-primary: #4f95cf; --m-hover: #ffffff0d; width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 32px); }
.m-checkout-summary { padding: 20px; border: 1px solid var(--m-border); border-radius: 10px; background: var(--m-panel); }
.m-bill-lines { display: grid; gap: 14px; }
.m-bill-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.m-bill-lines > div > span { color: var(--m-muted); white-space: nowrap; }
.m-bill-lines strong { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.m-bill-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--m-border); }
.m-bill-total > span { color: var(--m-muted); }
.m-bill-total > strong { font-size: 30px; line-height: 40px; font-weight: 600; color: var(--m-primary); }
.m-bill-total small { font-size: 16px; margin-right: 4px; }
.m-checkout-section { margin-top: 24px; }
.m-checkout-section h3, .m-checkout-section > label { display: block; margin: 0 0 10px; font-size: 14px; line-height: 22px; font-weight: 500; }
.m-checkout-payments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.m-choice { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; min-width: 0; padding: 12px; border: 1px solid var(--m-border); border-radius: 8px; background: transparent; color: var(--m-text); transition: background .18s, border-color .18s; }
.m-choice:hover { border-color: var(--m-primary); }
.m-choice.is-selected { border-color: var(--m-primary); background: #3b79af33; }
.m-payment .m-icon { height: 26px; width: 26px; }
.m-coupon { display: flex; gap: 8px; }
.m-coupon input { flex: 1; }
.m-coupon .m-button, .m-coupon .m-input, .m-checkout-dialog .m-dialog-footer .m-button { min-height: 44px; }
.m-checkout-section .m-demo-note { margin-top: 8px; }
.m-checkout-section + .m-demo-note { margin-top: 20px; }
html[data-theme="light"] .m-plan-filters button.is-active { color: var(--m-primary); }
html[data-theme="light"] .m-plan-card { background: linear-gradient(145deg, color-mix(in srgb, var(--plan-tone) 13%, transparent), transparent 54%) var(--m-panel); }
html[data-theme="light"] .m-plan-price, html[data-theme="light"] .m-plan-kind { color: var(--plan-button); }
html[data-theme="light"] .m-plan-cycle select, html[data-theme="light"] .m-plan-cycle option { background: #fff; }
html[data-theme="light"] .m-checkout-dialog { --m-panel: #f3f6fa; --m-border: #142a4433; --m-text: #233246; --m-muted: #637184; --m-primary: #397bb1; --m-hover: #193b6410; }
@media (min-width: 1024px) and (max-width: 1200px) { .m-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1023px) { .m-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .m-plan-center-heading { align-items: flex-start; flex-direction: column; gap: 16px; }.m-plan-filters { width: 100%; }.m-plan-filters button { flex: 1; padding: 8px; font-size: 13px; }.m-plan-grid { grid-template-columns: 1fr; gap: 16px; }.m-plan-card { padding: 22px; }.m-plan-card h2 { min-height: 0; font-size: 22px; line-height: 30px; }.m-plan-card-features { font-size: 14px; }.m-checkout-summary { padding: 16px; } }
.m-dialog-price { font-size: 32px; line-height: 40px; font-weight: 700; }
.m-feature-banner { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 138px; padding: 16px 24px; border-radius: 12px; background: var(--m-panel); overflow: hidden; }
.m-feature-banner h1 { font-size: 18px; line-height: 28px; font-weight: 600; }
.m-feature-banner p { color: var(--m-muted); font-size: 14px; line-height: 22px; margin: 2px 0 10px; }
.m-banner-button { min-height: 32px; padding: 4px 16px; border-radius: 18px; color: #fff; background: #3b79af; border-color: #3b79af; }
.m-banner-button:hover { background: #4f95cf; }
.m-banner-art { width: 190px; align-self: stretch; position: relative; display: flex; align-items: center; justify-content: center; color: #d2dcf9; flex: 0 0 auto; }
.m-banner-art > span { position: absolute; width: 150px; height: 105px; border-radius: 48% 52% 30% 70%; background: linear-gradient(140deg, #bea8ee66, #739ec955); transform: rotate(-15deg); }
.m-banner-art .m-icon { position: relative; width: 104px; height: 104px; transform: rotate(-12deg); stroke-width: 1.3; filter: drop-shadow(10px 10px 8px #0004); }
.m-banner-art img { height: 122px; width: 170px; object-fit: contain; }
.m-banner-art-ticket { color: #e8cff6; }
.m-page-demo-note { color: var(--m-faint); font-size: 12px; line-height: 20px; margin: 12px 0 16px !important; }
.m-node-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.m-node-card { display: block; text-align: left; min-width: 0; min-height: 210px; padding: 16px; border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-panel); color: var(--m-text); transition: border-color .3s; }
.m-node-card:hover { border-color: var(--m-primary); }
.m-node-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.m-node-top > .m-icon { width: 26px; height: 26px; color: var(--m-muted); }
.m-node-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; line-height: 18px; color: var(--m-muted); }
.m-node-status > span { width: 8px; height: 8px; border-radius: 50%; background: #4f95cf; }
.m-node-card > strong { display: block; font-size: 16px; line-height: 24px; font-weight: 500; }
.m-node-rate { display: block; margin-top: 4px; color: var(--m-muted); font-size: 12px; line-height: 20px; }
.m-node-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 16px; }
.m-node-chips > span { padding: 1px 6px; border: 1px solid var(--m-border); border-radius: 4px; font-size: 10px; line-height: 18px; color: var(--m-muted); }
.m-node-protocol { display: block; color: var(--m-faint); font-size: 10px; line-height: 18px; margin-top: 8px; }
.m-table-panel { border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-panel); overflow: hidden; }
.m-table .m-empty-cell { padding: 0; }
.m-table .m-empty-cell .m-empty { min-height: 224px; }
.m-table-panel .m-table { min-width: 620px; }
.m-ticket-table { margin-top: 24px; }
.m-ticket-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.m-state-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; background: #3b79af33; color: var(--m-primary); font-size: 12px; line-height: 20px; }
.m-knowledge-clients .m-client-grid { margin-top: 0; }
.m-knowledge-clients .m-client-info { min-height: 150px; }
.m-knowledge-tabs { display: flex; gap: 24px; min-width: 0; overflow-x: auto; padding: 28px 0 16px; border-bottom: 1px solid var(--m-border); margin-bottom: 24px; }
.m-knowledge-tabs > button { display: inline-flex; align-items: center; gap: 8px; padding: 0 0 12px; border-radius: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--m-muted); font-size: 14px; line-height: 22px; white-space: nowrap; }
.m-knowledge-tabs > button.is-active { color: var(--m-primary); border-color: var(--m-primary); }
.m-knowledge-tabs > button > span { padding: 0 6px; min-width: 20px; text-align: center; font-size: 11px; line-height: 18px; border-radius: 4px; background: var(--m-hover); }
.m-knowledge-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.m-knowledge-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 96px; min-width: 0; padding: 20px; border-radius: 12px; background: var(--m-panel); border: 1px solid var(--m-border); transition: border-color .2s; }
.m-knowledge-card:hover { border-color: var(--m-primary); }
.m-knowledge-card h2 { font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.m-knowledge-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--m-muted); font-size: 12px; line-height: 20px; margin-top: 10px; }
.m-knowledge-card time { white-space: nowrap; color: var(--m-faint); }
.m-knowledge-detail { padding: 28px; border-radius: 12px; background: var(--m-panel); }
.m-knowledge-back { margin-bottom: 20px; }
.m-knowledge-detail h1 { font-size: 24px; line-height: 32px; font-weight: 700; }
.m-knowledge-meta { display: flex; gap: 16px; margin-top: 12px; color: var(--m-muted); font-size: 12px; line-height: 20px; }
.m-knowledge-detail blockquote { margin: 28px 0; padding: 16px 20px; border-left: 4px solid var(--m-primary); border-radius: 0 8px 8px 0; background: var(--m-hover); color: var(--m-muted); }
.m-knowledge-detail h2 { margin: 24px 0 12px; font-size: 18px; line-height: 28px; font-weight: 600; }
.m-knowledge-detail p, .m-knowledge-detail li { line-height: 26px; color: var(--m-muted); }
.m-knowledge-detail ol { margin: 12px 0; padding-left: 22px; }
.m-knowledge-detail li + li { margin-top: 8px; }
.m-tutorial-diagram { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 40px 20px; margin: 24px 0; border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-bg); color: var(--m-primary); }
.m-tutorial-diagram > span { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 12px; line-height: 20px; }
.m-tutorial-diagram > span > .m-icon { width: 40px; height: 40px; }
.m-invite-page { display: grid; gap: 24px; }
.m-header-actions { display: flex; gap: 12px; }
.m-header-actions .m-button { min-height: 32px; padding: 4px 16px; }
.m-commission-balance { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 0 24px; }
.m-commission-balance strong { font-size: 36px; line-height: 44px; font-weight: 500; }
.m-commission-balance span { color: var(--m-muted); }
.m-referral-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--m-border); padding-top: 24px; margin-bottom: 20px; }
.m-referral-stats > div { display: flex; flex-direction: column; gap: 8px; }
.m-referral-stats > div + div { border-left: 1px solid var(--m-border); padding-left: 24px; }
.m-referral-stats span { color: var(--m-muted); font-size: 12px; line-height: 20px; }
.m-referral-stats strong { font-size: 22px; line-height: 30px; font-weight: 500; }
.m-table-title { padding: 20px 24px; }
.m-table-title h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.m-invite-codes .m-empty { min-height: 190px; }
.m-profile-top, .m-profile-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.m-wallet-panel, .m-profile-subscription { min-height: 278px; }
.m-wallet-panel header > .m-icon { color: var(--m-muted); }
.m-wallet-total { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.m-wallet-total > span { font-size: 12px; line-height: 20px; color: var(--m-muted); }
.m-wallet-total > strong { font-size: 30px; line-height: 38px; font-weight: 500; }
.m-wallet-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.m-wallet-balances > div { display: flex; flex-direction: column; gap: 6px; }
.m-wallet-balances > div > span { color: var(--m-muted); font-size: 12px; line-height: 20px; }
.m-wallet-balances > div > strong { font-size: 16px; line-height: 24px; font-weight: 500; }
.m-wallet-actions { display: flex; gap: 12px; margin-top: 20px; }
.m-wallet-actions .m-button { min-height: 32px; padding: 4px 16px; }
.m-profile-subscription { position: relative; background: linear-gradient(115deg, #32618a55, transparent) var(--m-panel); }
.m-profile-subscription h3 { font-size: 22px; line-height: 30px; font-weight: 600; margin: 24px 0 10px; }
.m-profile-sub-details { display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 20px; color: var(--m-muted); }
.m-profile-usage { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.m-small-gauge { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%; background: conic-gradient(#4f95cf 0 9%, #ffffff17 9% 100%); }
.m-small-gauge::after { position: absolute; content: ""; z-index: -1; inset: 5px; border-radius: 50%; background: var(--m-panel); }
.m-small-gauge > strong { font-size: 18px; line-height: 24px; font-weight: 500; }
.m-small-gauge > span { font-size: 10px; line-height: 16px; color: var(--m-muted); }
.m-profile-usage > div:last-child { display: flex; flex-direction: column; gap: 4px; }
.m-profile-usage > div:last-child strong { font-size: 14px; line-height: 22px; font-weight: 500; }
.m-profile-usage > div:last-child span { color: var(--m-muted); font-size: 12px; line-height: 20px; }
.m-subscription-center { margin: 24px 0; }
.m-sub-center-body { display: flex; align-items: center; gap: 24px; margin-top: 24px; }
.m-demo-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: 0 0 126px; height: 126px; padding: 12px; border-radius: 8px; background: #fff; color: #1c1c1c; }
.m-demo-qr .m-icon { width: 76px; height: 76px; stroke-width: 1.5; }
.m-demo-qr > span { font-size: 10px; line-height: 16px; color: #56606f; }
.m-sub-center-main { flex: 1; min-width: 0; }
.m-sub-center-address { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--m-border); }
.m-sub-center-address code { min-width: 0; color: var(--m-muted); font-size: 12px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-sub-center-main .m-import-clients { margin-top: 20px; }
.m-password-tabs { display: flex; gap: 20px; margin: 20px 0 24px; border-bottom: 1px solid var(--m-border); overflow-x: auto; }
.m-password-tabs > button { padding: 0 0 12px; border-bottom: 2px solid transparent; background: transparent; color: var(--m-muted); white-space: nowrap; font-size: 14px; line-height: 22px; }
.m-password-tabs > button.is-active { color: var(--m-primary); border-color: var(--m-primary); }
.m-password-tabs > button > span { font-size: 12px; }
.m-password-panel .m-form-field { margin-bottom: 16px; }
.m-password-submit { margin-top: 4px; }
.m-password-panel .m-demo-note { margin-top: 16px; }
.m-code-row { display: flex; gap: 8px; }
.m-code-row input { flex: 1; }
.m-code-row .m-button { white-space: nowrap; flex: 0 0 auto; }
.m-avatar-preview { display: flex; flex-direction: column; align-items: center; margin: 28px 0; }
.m-avatar-preview > .m-avatar { width: 90px; height: 90px; margin-bottom: 16px; }
.m-avatar-preview > .m-avatar .m-icon { width: 54px; height: 54px; }
.m-avatar-preview > strong { font-size: 18px; line-height: 28px; font-weight: 500; }
.m-avatar-preview > span:not(.m-avatar) { color: var(--m-muted); font-size: 12px; line-height: 20px; }
.m-avatar-options { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; }
.m-avatar-option { padding: 4px; border: 2px solid transparent; border-radius: 50%; background: transparent; }
.m-avatar-option.is-selected { border-color: var(--m-primary); }
.m-avatar-option .m-avatar { height: 44px; width: 44px; }
.m-avatar-choice-1 { background: linear-gradient(145deg, #a885dc, #5e4281); }.m-avatar-choice-2 { background: linear-gradient(145deg, #6caa86, #386b50); }.m-avatar-choice-3 { background: linear-gradient(145deg, #c5986d, #83563d); }
.m-avatar-panel > .m-button { display: flex; margin: 0 auto; }
.m-avatar-panel > .m-demo-note { text-align: center; margin-top: 16px; }
.m-traffic-summary { min-height: 208px; }
.m-traffic-summary h1 { font-size: 16px; line-height: 24px; font-weight: 600; margin-bottom: 24px; }
.m-traffic-used, .m-traffic-values { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.m-traffic-used { margin-bottom: 8px; }
.m-traffic-used > span:last-child { color: var(--m-muted); }
.m-traffic-progress { height: 8px; border-radius: 6px; background: var(--m-hover); overflow: hidden; }
.m-traffic-progress > span { display: block; width: 9%; height: 100%; background: var(--m-primary); border-radius: inherit; }
.m-traffic-values { margin-top: 12px; color: var(--m-muted); font-size: 12px; line-height: 20px; }
.m-traffic-summary p { margin-top: 24px; font-weight: 600; color: var(--m-text); font-size: 14px; line-height: 22px; }
.m-traffic-table { margin-top: 24px; }
.m-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 180px; padding: 32px 16px; color: var(--m-muted); text-align: center; }
.m-empty .m-icon { width: 48px; height: 48px; color: var(--m-faint); stroke-width: 1; }
html[data-theme="light"] .m-dialog { background: #fff; color: #233246; border-color: #142a4426; }
html[data-theme="light"] .m-dialog-heading, html[data-theme="light"] .m-dialog-footer { border-color: #142a4417; }
html[data-theme="light"] .m-dialog .m-form-field label, html[data-theme="light"] .m-dialog .m-form-field input, html[data-theme="light"] .m-dialog .m-form-field textarea, html[data-theme="light"] .m-dialog .m-form-field select { color: #233246; border-color: #142a4433; }
html[data-theme="light"] .m-dialog .m-form-field option { background: #fff; color: #233246; }
html[data-theme="light"] .m-dialog .m-form-field input::placeholder, html[data-theme="light"] .m-dialog .m-form-field textarea::placeholder { color: #8a96a5; }
html[data-theme="light"] .m-dialog .m-demo-note { color: #637184; }
html[data-theme="light"] .m-choice { background: #f3f6fa; }
html[data-theme="light"] .m-choice.is-selected { background: #dcecf9; }
.m-is-collapsed { --m-width: 80px; }
.m-is-collapsed .m-brand span, .m-is-collapsed .m-nav-link span, .m-is-collapsed .m-nav-group h2, .m-is-collapsed .m-user-card > div { display: none; }
.m-is-collapsed .m-brand { gap: 0; }
.m-is-collapsed .m-nav-group + .m-nav-group { margin-top: 16px; }
.m-is-collapsed .m-user-card { padding: 20px 12px; }
.m-is-collapsed .m-nav-link { justify-content: center; }
.m-is-collapsed .m-avatar { width: 52px; height: 52px; }
html[data-theme="light"] .member-app { --m-bg: #f3f5f8; --m-sidebar: #fff; --m-panel: #fff; --m-border: #142a4426; --m-text: #233246; --m-muted: #637184; --m-faint: #8a96a5; --m-active: #e1edf8; --m-primary: #397bb1; --m-hover: #193b6410; }
html[data-theme="light"] .m-brand { color: #26374b; }
html[data-theme="light"] .m-nav-link { color: #607084; }
html[data-theme="light"] .m-nav-link.is-active { color: #2c71aa; }
html[data-theme="light"] .m-icon-button { color: #697b91; }
html[data-theme="light"] .m-notice-item { background: #eaf2fa; }
html[data-theme="light"] .m-notice-item:hover { background: #deebf7; }
html[data-theme="light"] .m-client-action { background: #f3f6fa; color: #407da9; }
html[data-theme="light"] .m-client-action:hover { background: #e8f0f7; }
@media (min-width: 1600px) { .m-content { padding: 40px; } }
@media (max-width: 1200px) { .m-client-info { gap: 12px; padding: 24px 16px; }.m-client-info .m-os-icon { width: 42px; height: 42px; }.m-client-info p { font-size: 12px; }.m-usage-gauge { transform: scale(.85); transform-origin: bottom right; }.m-subscription h2 { font-size: 26px; } }
@media (max-width: 1023px) { .member-app { --m-width: 280px; }.m-sidebar { transform: translateX(-100%); visibility: hidden; }.m-mobile-open .m-sidebar { transform: translateX(0); visibility: visible; }.m-main { margin-left: 0; }.m-mobile-scrim { position: fixed; inset: 0; z-index: 14; background: #0009; }.m-content { padding: 24px; }.m-dashboard-columns { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }.m-is-collapsed .m-brand span, .m-is-collapsed .m-nav-link span, .m-is-collapsed .m-nav-group h2, .m-is-collapsed .m-user-card > div { display: block; }.m-is-collapsed .m-brand { gap: 12px; }.m-is-collapsed .m-nav-link { justify-content: flex-start; }.m-is-collapsed .m-user-card { padding: 20px 24px; } }
@media (max-width: 767px) { .m-dashboard-columns { grid-template-columns: 1fr; }.m-dashboard-right { grid-row: 1; }.m-notice { min-height: 140px; }.m-content { padding: 20px 16px; }.m-topbar { padding: 0 12px; }.m-topbar-title { gap: 6px; font-size: 14px; }.m-topbar-tools { gap: 0; }.m-local-mark { display: none; }.m-icon-button { width: 36px; height: 40px; }.m-subscription { margin-top: 0; padding: 24px; }.m-renew-button { left: 24px; bottom: 24px; }.m-subscription h2 { font-size: 26px; }.m-greeting { gap: 12px; }.m-greeting h1 { font-size: 22px; }.m-usage-gauge { right: 4px; bottom: 8px; transform: scale(.78); }.m-gauge-inner strong { font-size: 36px; }.m-client-info { min-height: 140px; gap: 12px; padding: 30px 16px; flex-direction: column; align-items: flex-start; }.m-client-info .m-os-icon { width: 42px; height: 42px; }.m-client-info h2 { font-size: 18px; }.m-client-info p { font-size: 12px; }.m-client-action { padding: 14px 12px; font-size: 12px; }.m-quick-import { padding: 20px; }.m-import-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }.m-quick-import header { align-items: flex-start; }.m-text-button { font-size: 12px; }.m-invite-promo { padding: 24px; }.m-invite-promo h2 { font-size: 22px; }.m-invite-gift .m-icon { width: 110px; height: 110px; }.m-invite-promo > div:first-child { max-width: 76%; }.m-footer { padding: 12px 16px 28px; } }
@media (prefers-reduced-motion: reduce) { .member-app *, .member-app *::before, .member-app *::after { animation: none !important; transition-duration: .01ms !important; } }
@media (max-width: 1100px) { .m-node-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .m-password-tabs { gap: 12px; }.m-password-tabs > button { font-size: 12px; }.m-avatar-options { gap: 8px; } }
@media (max-width: 767px) { .m-profile-top, .m-profile-bottom { grid-template-columns: 1fr; }.m-referral-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }.m-referral-stats > div + div { padding-left: 0; border-left: 0; }.m-commission-panel header, .m-invite-codes header { align-items: flex-start; flex-wrap: wrap; }.m-sub-center-body { flex-direction: column; align-items: flex-start; gap: 20px; }.m-sub-center-main { width: 100%; }.m-sub-center-main .m-import-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); }.m-wallet-panel, .m-profile-subscription { min-height: 278px; }.m-traffic-summary { padding: 20px; }.m-profile-top > .m-panel, .m-profile-bottom > .m-panel { padding: 20px; }.m-subscription-center { padding: 20px; }.m-traffic-values { flex-wrap: wrap; }.m-dialog-footer .m-button { min-height: 36px; } }
@media (max-width: 767px) { .m-knowledge-list { grid-template-columns: 1fr; }.m-knowledge-tabs { gap: 20px; }.m-knowledge-detail { padding: 20px; }.m-knowledge-detail h1 { font-size: 22px; line-height: 30px; }.m-tutorial-diagram { gap: 10px; padding: 32px 12px; }.m-tutorial-diagram > .m-icon { width: 16px; height: 16px; } }
@media (max-width: 767px) { .m-node-grid { grid-template-columns: 1fr; }.m-banner-art { width: 100px; }.m-banner-art .m-icon { width: 78px; height: 78px; }.m-banner-art > span { width: 100px; height: 95px; }.m-feature-banner { padding: 20px; }.m-feature-banner h1 { font-size: 16px; }.m-table-panel .m-table { min-width: 600px; }.m-table-panel .m-empty-cell { white-space: normal; } }
@media (max-width: 767px) { .m-banner-art img { width: 110px; height: 110px; }.m-invite-gift img { width: 150px; height: 150px; } }
@media (max-width: 767px) { .m-dialog-heading { padding: 16px 20px; }.m-dialog-content { padding: 20px; }.m-dialog-footer { padding: 16px 20px; }.m-icon-button { min-height: 44px; } }

/* Member refresh: plan tones, invitation surface and shared panel rhythm. */
.m-table-panel, .m-panel, .m-feature-banner, .m-knowledge-detail { border: 1px solid var(--m-border); box-shadow: 0 12px 28px #00000012; }
.m-commission-panel { position: relative; overflow: hidden; color: #503821; background: linear-gradient(145deg, #ffe8c5 0%, #ffbd68 58%, #f47a25 100%); border-color: #f6a553; }
.m-commission-panel::after { position: absolute; content: ""; width: 190px; height: 190px; right: -70px; top: -80px; border-radius: 50%; background: #fff8e8; opacity: .28; filter: blur(4px); }
.m-commission-panel > * { position: relative; z-index: 1; }
.m-commission-panel header { align-items: center; }
.m-commission-heading { display: inline-flex; align-items: center; gap: 10px; }
.m-commission-heading .m-icon { width: 25px; height: 25px; color: #a64d18; }
.m-commission-panel h2 { color: #503821; }
.m-commission-panel .m-commission-balance { padding-top: 28px; }
.m-commission-panel .m-commission-balance strong { color: #3f2817; }
.m-commission-panel .m-commission-balance span, .m-commission-panel .m-referral-stats span, .m-commission-panel .m-demo-note { color: #714b2a; }
.m-commission-panel .m-referral-stats { border-color: #8f5e2d55; }
.m-commission-panel .m-referral-stats > div + div { border-color: #8f5e2d55; }
.m-invite-purchase-button { color: #fff; background: #4c3525; border-color: #4c3525; box-shadow: 0 6px 16px #6d3f1e33; }
.m-invite-purchase-button:hover { background: #2f241d; border-color: #2f241d; }
.m-invite-codes header, .m-ticket-table + .m-table-panel header { min-height: 28px; }
.m-invite-codes { min-height: 250px; }
.m-invite-codes .m-empty { color: #a7afbb; }
.m-invite-codes { border-color: #f6a55366; background: linear-gradient(145deg, #2b251f, var(--m-panel)); }
.m-invite-codes h2 { color: #f4c187; }
.m-invite-codes .m-empty .m-icon { color: #e89b4b; }
.m-invite-page > .m-table-panel { border-color: #f6a5534d; }
.m-invite-page > .m-table-panel .m-table-title h2 { color: #efbd83; }
.m-ticket-table { margin-top: 20px; }
.m-node-grid { margin-top: 4px; }
html[data-theme="light"] .m-commission-panel { color: #503821; }