/* Wenlian Cloud: a bright workspace in electric blue, violet and crisp white. */
:root { --m-bg:#f5f7ff; --m-sidebar:#ffffff; --m-panel:#ffffff; --m-border:#dce3f3; --m-text:#17233d; --m-muted:#5d6b88; --m-faint:#65718c; --m-active:#eaf0ff; --m-primary:#3861f9; --m-hover:#f0f4ff; --m-radius:16px; }
html[data-theme="dark"] { --m-bg:#0d1428; --m-sidebar:#141e38; --m-panel:#162139; --m-border:#2e3e62; --m-text:#edf2ff; --m-muted:#b1bfd9; --m-faint:#9caac5; --m-active:#25365e; --m-primary:#92adff; --m-hover:#1f2d4a; }
.member-app { min-height:100svh; background:var(--m-bg); color:var(--m-text); font:14px/1.6 Rubik,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
.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; }
.member-app a { color:inherit; text-decoration:none; }
.m-icon { display:block; width:22px; height:22px; flex:0 0 auto; }
.m-main { min-height:100svh; display:flex; flex-direction:column; min-width:0; margin:0; }
.m-app-header { position:sticky; top:0; z-index:15; background:var(--m-sidebar); border-bottom:1px solid var(--m-border); }
.m-topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; max-width:1328px; height:84px; padding:0 40px; margin:0 auto; }
.m-topbar-title,.m-topbar-tools { display:flex; align-items:center; gap:12px; }
.m-brand { display:inline-flex; align-items:center; gap:12px; flex:0 0 auto; color:var(--m-text); white-space:nowrap; }
.m-brand img { width:36px; height:36px; object-fit:contain; }
.m-brand>span { font-size:23px; font-weight:700; line-height:1.2; letter-spacing:.04em; }
.m-brand small { display:block; margin-top:5px; font-size:8px; line-height:1; letter-spacing:.18em; font-weight:600; color:var(--m-muted); }
.m-workspace-label { margin-left:24px; padding-left:26px; border-left:1px solid var(--m-border); color:var(--m-muted); font-size:12px; }
.m-local-mark { padding:4px 10px; border-radius:30px; color:var(--m-muted); background:var(--m-active); font-size:10px; white-space:nowrap; }
.m-icon-button { display:inline-flex; justify-content:center; align-items:center; width:44px; height:44px; padding:10px; border:0; border-radius:10px; color:var(--m-muted); background:transparent; transition:background .18s,color .18s; }
.m-icon-button:hover { background:var(--m-hover); color:var(--m-text); }
.m-top-menu { position:relative; }
.m-account-button { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:2px 0 2px 10px; border:0; background:transparent; color:var(--m-text); }
.m-account-button>span:not(.m-avatar) { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.m-account-button>.m-icon { width:14px; height:14px; transform:rotate(90deg); color:var(--m-muted); }
.m-avatar { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:46px; height:46px; border-radius:50%; color:var(--m-primary); background:var(--m-active); border:1px solid var(--m-border); }
.m-avatar .m-icon { width:24px; height:24px; }
.m-account-button .m-avatar { width:34px; height:34px; }
.m-account-button .m-avatar .m-icon { width:17px; height:17px; }
.m-dropdown { position:absolute; top:52px; right:0; z-index:25; min-width:160px; padding:6px; border:1px solid var(--m-border); border-radius:12px; background:var(--m-panel); box-shadow:0 16px 40px #17233d12; color:var(--m-text); }
.m-dropdown button,.m-dropdown a { display:block; width:100%; min-height:44px; padding:10px 12px; border:0; border-radius:8px; background:transparent; text-align:left; white-space:nowrap; color:inherit; }
.m-dropdown button:hover,.m-dropdown a:hover { background:var(--m-hover); }
.m-sidebar { width:100%; background:var(--m-sidebar); border-top:1px solid var(--m-border); }
.m-nav { display:flex; align-items:center; gap:clamp(8px,1.6vw,24px); max-width:1328px; margin:0 auto; padding:0 40px; }
.m-nav-group { display:contents; }
.m-nav-group h2,.m-drawer-heading,.m-user-card,.m-mobile-nav-toggle { display:none; }
.m-nav-link { display:inline-flex; align-items:center; gap:7px; min-height:56px; padding:0 5px; border-bottom:2px solid transparent; color:var(--m-muted)!important; font-size:13px; font-weight:500; white-space:nowrap; transition:color .18s,border-color .18s; }
.m-nav-link .m-icon { width:18px; height:18px; }
.m-nav-link:hover { color:var(--m-text)!important; border-color:var(--m-border); }
.m-nav-link.is-active { color:var(--m-primary)!important; border-color:var(--m-primary); font-weight:650; }
.m-content { width:100%; max-width:1328px; margin:0 auto; padding:44px 40px 64px; flex:1; }
.m-page-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:30px; }
.m-eyebrow { display:block; color:var(--m-muted); font-size:10px; line-height:1.5; letter-spacing:.12em; font-weight:600; }
.m-page-heading h1 { font-size:clamp(28px,3.4vw,42px); line-height:1.3; font-weight:550; letter-spacing:-.04em; margin-top:9px; overflow-wrap:anywhere; }
.m-page-heading p { margin-top:10px; color:var(--m-muted); font-size:13px; }
.m-heading-dot { color:var(--m-primary); }
.m-heading-help { display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; min-height:44px; padding:10px 15px; border:1px solid var(--m-border); border-radius:10px; background:var(--m-panel); font-size:12px; transition:border-color .18s; }
.m-heading-help:hover { border-color:var(--m-primary); }
.m-heading-help .m-icon { width:17px; height:17px; color:var(--m-primary); }
.member-app .m-announcements { margin-bottom:24px; }
.member-app .m-announcement-bar { min-height:56px; padding:6px 16px; border:1px solid var(--m-border); border-radius:10px; box-shadow:none; background:var(--m-panel); }
.member-app .m-announcement-label { color:var(--m-primary); font-size:12px; padding-right:15px; border-right:1px solid var(--m-border); }
.member-app .m-announcement-item,.member-app .m-announcement-item strong,.member-app .m-announcement-item span { font-size:12px; }
.member-app .m-announcement-pause { min-height:44px; min-width:44px; border:0; color:var(--m-muted); font-size:10px; }
.member-app .m-announcement-pause:hover { background:var(--m-hover); }
.member-app .m-announcements .m-api-pagination { padding:10px 0 0; }
.member-app .m-subscription { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); position:relative; isolation:isolate; overflow:hidden; min-height:326px; height:auto; padding:0; border:1px solid #2444bc; border-radius:18px; color:#ffffff; background:#294edb; }
.m-sub-overview { padding:clamp(26px,3vw,40px); }
.m-sub-topline { display:flex; align-items:center; gap:18px; }
.m-sub-label { color:#e2e9ff; font-size:10px; font-weight:600; letter-spacing:.12em; }
.m-sub-status { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; color:#edfbff; border:1px solid #769cff; border-radius:20px; background:#1e43bc; font-size:10px; }
.m-sub-status i { display:block; width:5px; height:5px; border-radius:50%; background:#38e0ff; }
.m-sub-status.is-inactive { color:#fff3d6; border-color:#d89841; background:#69500f; }
.m-sub-status.is-inactive i { background:#ffd574; }
.member-app .m-subscription h2 { font-size:clamp(25px,3vw,34px); font-weight:550; line-height:1.35; letter-spacing:-.04em; max-width:none; margin:20px 0 7px; overflow-wrap:anywhere; }
.m-sub-description { color:#e2e9ff; font-size:12px; }
.m-sub-details { display:flex; gap:36px; margin-top:24px; }
.m-sub-details>div { display:grid; gap:3px; }
.m-sub-details span { font-size:10px; color:#e2e9ff; }
.m-sub-details strong { font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; }
.member-app .m-sub-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; max-width:none; margin-top:26px; }
.member-app .m-renew-button { position:static; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; height:auto; min-width:0; padding:9px 12px; border:1px solid #96afff; border-radius:8px; color:#ffffff; background:transparent; font-size:11px; font-weight:500; transition:background .18s,transform .18s; }
.member-app .m-renew-button:hover { background:#315cef; transform:translateY(-1px); }
.member-app .m-renew-primary { color:#2345bf; background:#ffffff; border-color:#ffffff; padding-right:14px; padding-left:14px; }
.member-app .m-renew-primary:hover { color:#2345bf; background:#ecf1ff; }
.member-app .m-renew-reset { border-color:transparent; color:#e2e9ff; padding-right:0; padding-left:0; }
.m-renew-button .m-icon { width:15px; height:15px; }
.m-usage-section { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:26px; border-left:1px solid #ffffff15; background:#2243c0; }
.member-app .m-usage-gauge { position:relative; right:auto; bottom:auto; width:204px; height:204px; border-radius:50%; transform:none; margin:0; background:conic-gradient(from -90deg,#38e0ff var(--usage),#526edf 0); }
.m-usage-gauge::before { content:""; position:absolute; inset:10px; border-radius:50%; background:#2243c0; }
.m-gauge-inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; }
.m-gauge-inner small { color:#e2e9ff; font-size:9px; letter-spacing:.08em; }
.m-gauge-inner>strong { font-size:49px; line-height:1.1; font-weight:400; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.m-gauge-inner strong>span { font-size:22px; margin-left:3px; }
.m-gauge-inner>span { color:#edf2ff; font-size:10px; }
.m-usage-legend { display:flex; gap:20px; color:#e2e9ff; font-size:10px; }
.m-usage-legend>span { display:inline-flex; align-items:center; gap:6px; }
.m-usage-legend i { display:block; width:5px; height:5px; border-radius:50%; background:#38e0ff; }
.m-usage-legend>span:last-child i { background:#91a7fa; }
.m-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:18px 0 38px; }
.m-summary-card { display:flex; align-items:center; gap:15px; min-width:0; min-height:120px; padding:20px 22px; border:1px solid var(--m-border); border-radius:12px; background:var(--m-panel); transition:border-color .18s,transform .18s; }
.m-summary-card:hover { border-color:var(--m-primary); transform:translateY(-2px); }
.m-summary-icon { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:42px; height:42px; border-radius:12px; color:var(--m-primary); background:var(--m-active); }
.m-summary-icon .m-icon { width:19px; height:19px; }
.m-summary-copy { min-width:0; flex:1; display:grid; gap:4px; }
.m-summary-copy>span { color:var(--m-muted); font-size:10px; }
.m-summary-copy strong { font-size:clamp(18px,2vw,22px); line-height:1.4; font-weight:550; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.m-summary-copy small { font-size:9px; color:var(--m-faint); }
.m-summary-card>.m-icon { width:15px; height:15px; color:var(--m-muted); }
.m-section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.m-section-heading h2 { margin-top:5px; font-size:21px; line-height:1.45; font-weight:550; letter-spacing:-.02em; }
.m-client-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:20px; }
.m-client-card { min-width:0; border:1px solid var(--m-border); border-radius:12px; overflow:hidden; background:var(--m-panel); color:var(--m-text); --os-face:var(--m-panel); transition:border-color .18s,transform .18s; }
.m-client-card:hover { border-color:var(--m-primary); transform:translateY(-2px); }
.m-client-info { display:flex; align-items:center; gap:15px; min-height:106px; padding:24px 20px; }
.m-client-info .m-os-icon { width:28px; height:28px; color:var(--m-primary); }
.m-client-info h2 { font-size:16px; line-height:1.4; font-weight:600; }
.m-client-info p { font-size:10px; color:var(--m-muted); margin-top:4px; }
.member-app .m-client-action { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:11px 20px; border-top:1px solid var(--m-border); color:var(--m-muted); background:transparent; font-size:10px; }
.member-app .m-client-action:hover { color:var(--m-primary); background:var(--m-hover); }
.m-client-action .m-icon { width:14px; height:14px; }
.m-tools-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:24px; margin-top:24px; }
.m-panel { padding:28px; border:1px solid var(--m-border); border-radius:var(--m-radius); background:var(--m-panel); box-shadow:0 4px 18px #17233d04; }
.m-panel header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.m-panel h2 { font-size:17px; line-height:1.5; font-weight:550; }
.m-panel header .m-eyebrow+h2 { margin-top:6px; }
.m-quick-import { min-height:238px; margin:0; }
.member-app .m-text-button,.m-dialog .m-text-button { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0; border:0; color:var(--m-primary); background:transparent; font-size:11px; font-weight:500; white-space:nowrap; }
.m-text-button .m-icon { width:15px; height:15px; }
.member-app .m-text-button:hover,.m-dialog .m-text-button:hover { text-decoration:underline; }
.m-import-clients { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:28px; }
.m-import-client { display:flex; align-items:center; flex-direction:column; gap:10px; min-width:0; min-height:76px; padding:8px 2px; border:0; border-radius:9px; background:transparent; color:var(--m-text); transition:background .18s,transform .18s; }
.m-import-client:hover { background:var(--m-hover); transform:translateY(-2px); }
.m-import-client>span { max-width:100%; font-size:9px; line-height:1.4; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.m-client-logo { width:35px; height:35px; object-fit:contain; border-radius:9px; }
.m-subscription-note { margin-top:18px; font-size:10px; color:var(--m-faint); }
.m-invite-promo { position:relative; display:flex; align-items:center; min-height:238px; padding:30px; margin:0; border:1px solid #ddd4ff; border-radius:var(--m-radius); overflow:hidden; background:#f1ebff; color:#422084; }
.m-invite-promo>div { position:relative; z-index:1; max-width:85%; }
.m-invite-promo .m-eyebrow { color:#67508b; }
.m-invite-promo h2 { font-size:23px; line-height:1.4; letter-spacing:-.03em; font-weight:550; margin:13px 0 8px; }
.m-invite-promo p { color:#67508b; font-size:11px; max-width:270px; }
.m-invite-promo a { display:inline-flex; align-items:center; gap:16px; min-height:44px; margin-top:14px; font-size:11px; font-weight:600; }
.m-invite-promo a:hover { text-decoration:underline; }
.m-invite-promo a .m-icon { width:15px; height:15px; }
.m-invite-symbol { position:absolute; width:150px; height:150px; right:-44px; bottom:-30px; color:#a082ed; opacity:.55; }
.m-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; width:calc(100% - 80px); max-width:1248px; margin:0 auto; padding:24px 0; border-top:1px solid var(--m-border); font-size:10px; color:var(--m-faint); }
.m-footer>span:first-child { color:var(--m-muted); font-weight:600; }
.member-app :is(a,button,input,select,textarea):focus-visible,.m-dialog :is(button,a,input,select,textarea):focus-visible { outline:2px solid var(--m-primary); outline-offset:4px; }
.member-app button:active:not(:disabled),.m-dialog button:active:not(:disabled) { transform:scale(.98); }
.member-app button:disabled,.m-dialog button:disabled { opacity:.45; cursor:not-allowed; }
.m-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 17px; border:1px solid var(--m-border); border-radius:9px; background:transparent; color:var(--m-text); font-size:12px; font-weight:550; text-decoration:none; transition:background .18s,border-color .18s,transform .18s; }
.m-button:hover { background:var(--m-hover); border-color:var(--m-primary); transform:translateY(-1px); }
.m-button.m-button-primary { color:#ffffff; background:#3861f9; border-color:#3861f9; }
.m-button.m-button-primary:hover { background:#294bd5; border-color:#294bd5; }
.m-button .m-icon { width:17px; height:17px; }
.m-form-field { display:grid; gap:9px; margin-bottom:20px; }
.m-form-field label { font-size:12px; color:var(--m-text); }
.m-form-field input,.m-form-field textarea,.m-form-field select,.m-input { width:100%; min-width:0; min-height:46px; padding:11px 13px; border:1px solid var(--m-border); border-radius:9px; color:var(--m-text); background:var(--m-bg); font:inherit; transition:border-color .18s; }
.m-form-field :is(input,textarea,select):hover,.m-input:hover { border-color:var(--m-primary); }
.m-form-field :is(input,textarea)::placeholder { color:var(--m-faint); }
.m-form-field textarea { min-height:140px; resize:vertical; }
.m-form-field option { background:var(--m-panel); color:var(--m-text); }
.m-form-field input[type="checkbox"] { width:19px; height:19px; min-height:0; padding:0; accent-color:#3861f9; }
#member-reminder-form>.m-form-field { display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--m-border); font-size:12px; }
.m-form-error { color:var(--error); font-size:12px; }
.m-form-field [aria-invalid="true"] { border-color:var(--error); }
.m-demo-note { color:var(--m-muted); font-size:11px; line-height:1.7; }
.m-table-panel { overflow:hidden; border:1px solid var(--m-border); border-radius:var(--m-radius); background:var(--m-panel); box-shadow:0 4px 18px #17233d04; }
.m-table-wrap { width:100%; overflow-x:auto; }
.m-table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; font-size:12px; }
.m-table th { height:58px; padding:18px 24px; border-bottom:1px solid var(--m-border); background:var(--m-hover); font-weight:500; font-size:11px; color:var(--m-muted); }
.m-table td { padding:21px 24px; border-bottom:1px solid var(--m-border); font-variant-numeric:tabular-nums; }
.m-table tbody tr:last-child td { border-bottom:0; }
.m-table tbody tr:hover { background:color-mix(in srgb,var(--m-hover) 45%,transparent); }
.m-table td small { color:var(--m-muted); font-size:10px; }
.m-table .m-empty-cell { padding:0; }
.m-table-panel .m-table { min-width:620px; }
.m-table-title { padding:22px 28px; }
.m-table-title h2 { margin:0; font-size:16px; font-weight:550; }
.m-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-height:216px; padding:36px 20px; color:var(--m-muted); text-align:center; }
.m-empty>.m-icon { width:44px; height:44px; color:var(--m-faint); stroke-width:1; }
.m-empty>span { font-size:12px; }
.m-state-badge { display:inline-block; padding:3px 9px; border-radius:20px; color:var(--m-primary); background:var(--m-active); font-size:10px; }
.m-plan-center-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.m-plan-center-heading h1 { font-size:16px; font-weight:550; color:var(--m-muted); }
.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:40px; padding:9px 16px; border:0; border-radius:7px; color:var(--m-muted); background:transparent; white-space:nowrap; font-size:12px; }
.m-plan-filters button:hover { color:var(--m-text); background:var(--m-hover); }
.m-plan-filters button.is-active { color:var(--m-primary); background:var(--m-active); font-weight:600; }
.m-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.m-plan-tone-blue { --plan-tone:#3861f9; --plan-button:#3861f9; }
.m-plan-tone-violet { --plan-tone:#7c3aed; --plan-button:#7c3aed; }
.m-plan-tone-amber { --plan-tone:#c45915; --plan-button:#b24b0b; }
.m-plan-tone-slate { --plan-tone:#087fa3; --plan-button:#067697; }
.m-plan-card { display:flex; flex-direction:column; min-width:0; padding:28px; border:1px solid var(--m-border); border-top:3px solid var(--plan-tone); border-radius:14px; background:var(--m-panel); transition:transform .2s,border-color .2s; }
.m-plan-card:hover,.m-plan-card:focus-within { border-color:var(--plan-tone); transform:translateY(-3px); }
.m-plan-kind { display:flex; align-items:center; gap:8px; min-height:22px; margin-bottom:22px; color:var(--m-muted); font-size:10px; }
.m-plan-kind>.m-icon { width:17px; height:17px; color:var(--plan-tone); }
.m-plan-recommend { display:inline-flex; align-items:center; gap:3px; margin-left:auto; padding:3px 7px; border-radius:20px; color:#6d31c4; background:#eee5ff; font-size:9px; }
.m-plan-recommend .m-icon { width:12px; height:12px; }
.m-plan-card h2 { min-height:54px; font-size:22px; font-weight:550; line-height:1.35; overflow-wrap:anywhere; }
.m-plan-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; margin-top:22px; font-variant-numeric:tabular-nums; }
.m-plan-price>strong { font-size:42px; line-height:1.25; font-weight:500; letter-spacing:-.06em; }
.m-plan-price>small { font-size:18px; }
.m-plan-price>span { color:var(--m-muted); font-size:11px; }
.m-plan-card-features { display:grid; gap:12px; margin:25px 0; padding:24px 0 0; border-top:1px solid var(--m-border); list-style:none; color:var(--m-muted); }
.m-plan-card-features li { display:flex; align-items:flex-start; gap:9px; font-size:12px; line-height:1.8; }
.m-plan-card-features .m-icon { width:16px; 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; }
.m-plan-cycle>span { color:var(--m-muted); font-size:10px; }
.m-plan-cycle select { width:100%; min-height:46px; min-width:0; padding:11px 12px; border:1px solid var(--m-border); border-radius:9px; color:var(--m-text); background:var(--m-bg); font:inherit; font-size:12px; }
.m-plan-cycle option { color:var(--m-text); background:var(--m-panel); }
.m-plan-purchase { justify-content:center; min-height:46px; color:#ffffff!important; background:var(--plan-button); border-color:var(--plan-button); }
.m-plan-purchase:hover { color:#fff; background:color-mix(in srgb,var(--plan-button),#000 12%); border-color:var(--plan-button); }
.m-dialog { width:min(550px,calc(100vw - 32px)); max-height:92svh; margin:auto; padding:0; border:1px solid var(--m-border); border-radius:18px; color:var(--m-text); background:var(--m-panel); box-shadow:0 24px 80px #14214830; font:13px/1.7 Rubik,"PingFang SC","Microsoft YaHei",sans-serif; }
.m-dialog::backdrop { background:#101b3566; backdrop-filter:blur(5px); }
.m-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; border-bottom:1px solid var(--m-border); }
.m-dialog-heading h2 { margin:0; font-size:19px; line-height:1.5; font-weight:550; }
.m-dialog-content { padding:24px; max-height:min(66svh,600px); 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; flex-wrap:wrap; gap:10px; padding:18px 24px; border-top:1px solid var(--m-border); }
.m-checkout-dialog { width:min(610px,calc(100vw - 32px)); }
.m-checkout-summary { padding:22px; border:1px solid var(--m-border); border-radius:12px; background:var(--m-bg); }
.m-bill-lines { display:grid; gap:12px; }
.m-bill-lines>div { display:flex; justify-content:space-between; align-items:baseline; gap:24px; }
.m-bill-lines span { color:var(--m-muted); flex:0 0 auto; font-size:11px; }
.m-bill-lines strong { font-size:12px; font-weight:500; text-align:right; overflow-wrap:anywhere; min-width:0; }
.m-bill-total { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:22px; padding-top:20px; border-top:1px solid var(--m-border); }
.m-bill-total>span { color:var(--m-muted); font-size:11px; }
.m-bill-total>strong { color:var(--m-primary); font-size:32px; line-height:1.3; font-weight:500; letter-spacing:-.03em; }
.m-bill-total small { font-size:16px; margin-right:4px; }
.m-checkout-section { margin-top:24px; }
.m-checkout-section h3 { margin:0 0 14px; font-size:13px; font-weight:550; }
.m-checkout-section>label { display:block; margin-bottom:10px; font-size:12px; }
.m-checkout-payments { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:10px; }
.m-choice { display:inline-flex; justify-content:center; align-items:center; gap:9px; min-height:52px; min-width:0; padding:12px; border:1px solid var(--m-border); border-radius:10px; color:var(--m-text); background:var(--m-bg); font:inherit; }
.m-choice:hover { border-color:var(--m-primary); }
.m-choice.is-selected { color:var(--m-primary); border-color:var(--m-primary); background:var(--m-active); }
.m-payment .m-icon { width:22px; height:22px; }
.m-coupon,.m-code-row { display:flex; gap:8px; }
.m-coupon input,.m-code-row input { flex:1; }
.m-coupon .m-button,.m-code-row .m-button { white-space:nowrap; flex:0 0 auto; }
.m-checkout-section+.m-demo-note { margin-top:20px; }
.m-feature-banner { display:flex; align-items:center; justify-content:space-between; min-height:172px; padding:30px; border:1px solid var(--m-border); border-radius:16px; color:var(--m-text); background:var(--m-active); }
.m-feature-banner h1 { font-size:25px; line-height:1.4; font-weight:550; }
.m-feature-banner p { color:var(--m-muted); font-size:12px; margin:6px 0 15px; }
.m-banner-button { color:#ffffff; border-color:#3861f9; background:#3861f9; }
.m-banner-button:hover { color:#fff; border-color:#294bd5; background:#294bd5; }
.m-banner-art { display:none; }
.m-ticket-table,.m-traffic-table { margin-top:24px; }
.m-ticket-content { white-space:pre-wrap; overflow-wrap:anywhere; }
.m-node-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.m-node-card { display:block; min-width:0; min-height:220px; padding:25px; border:1px solid var(--m-border); border-radius:14px; background:var(--m-panel); color:var(--m-text); text-align:left; transition:transform .18s,border-color .18s; }
.m-node-card:hover { border-color:var(--m-primary); transform:translateY(-2px); }
.m-node-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
.m-node-top>.m-icon { width:24px; height:24px; color:var(--m-primary); }
.m-node-status { display:inline-flex; align-items:center; gap:6px; font-size:10px; color:var(--m-primary); }
.m-node-status>span { width:6px; height:6px; border-radius:50%; background:#05b2bb; }
.m-node-card>strong { display:block; font-size:17px; line-height:1.5; font-weight:550; }
.m-node-rate { display:block; margin-top:6px; font-size:11px; color:var(--m-muted); }
.m-node-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:17px; }
.m-node-chips>span { padding:2px 7px; border-radius:5px; color:var(--m-muted); background:var(--m-hover); font-size:9px; }
.m-node-protocol { display:block; margin-top:10px; color:var(--m-faint); font-size:9px; }
.m-knowledge-clients .m-client-grid { margin-top:0; }
.m-knowledge-tabs,.m-password-tabs { display:flex; gap:26px; overflow-x:auto; border-bottom:1px solid var(--m-border); margin:28px 0 24px; }
.m-knowledge-tabs>button,.m-password-tabs>button { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 0 14px; border:0; border-bottom:2px solid transparent; color:var(--m-muted); background:transparent; font-size:12px; white-space:nowrap; }
.m-knowledge-tabs>button.is-active,.m-password-tabs>button.is-active { color:var(--m-primary); border-color:var(--m-primary); }
.m-knowledge-tabs>button>span { min-width:20px; padding:1px 5px; border-radius:5px; background:var(--m-active); text-align:center; font-size:9px; }
.m-knowledge-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.m-knowledge-card { display:flex; flex-direction:column; justify-content:space-between; min-width:0; min-height:125px; padding:24px; border:1px solid var(--m-border); border-radius:14px; background:var(--m-panel); transition:border-color .18s,transform .18s; }
.m-knowledge-card:hover { border-color:var(--m-primary); transform:translateY(-2px); }
.m-knowledge-card h2 { font-size:17px; line-height:1.5; font-weight:550; }
.m-knowledge-card>div { display:flex; justify-content:space-between; gap:12px; margin-top:16px; font-size:10px; color:var(--m-muted); }
.m-knowledge-card time { color:var(--m-faint); }
.m-knowledge-article { max-width:980px; margin:0 auto; padding:36px; }
.m-knowledge-article h1 { font-size:30px; font-weight:550; margin:24px 0 8px; }
.m-knowledge-article .m-rich-html { margin-top:28px; line-height:1.95; }
.m-rich-html h2,.m-rich-html h3 { margin:24px 0 12px; }
.m-rich-html a { color:var(--m-primary); text-decoration:underline; }
.m-rich-html blockquote { margin:24px 0; padding:16px 20px; border-left:3px solid var(--m-primary); background:var(--m-hover); }
.m-invite-page { display:grid; gap:24px; }
.m-commission-panel { background:var(--m-active); }
.m-commission-heading,.m-header-actions { display:flex; align-items:center; gap:10px; }
.m-commission-heading>.m-icon { color:var(--m-primary); }
.m-header-actions .m-button { min-height:40px; padding:8px 14px; font-size:11px; }
.m-commission-balance { display:flex; flex-direction:column; gap:8px; padding:30px 0 26px; }
.m-commission-balance strong { font-size:44px; line-height:1.25; font-weight:500; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.m-commission-balance>span { color:var(--m-muted); font-size:12px; }
.m-referral-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding-top:26px; border-top:1px solid var(--m-border); }
.m-referral-stats>div { display:grid; gap:6px; }
.m-referral-stats>div+div { padding-left:24px; border-left:1px solid var(--m-border); }
.m-referral-stats span { color:var(--m-muted); font-size:10px; }
.m-referral-stats strong { font-size:23px; line-height:1.5; font-weight:550; }
.m-invite-codes .m-sub-center-address { margin-top:20px; padding:14px 0; }
.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:290px; }
.m-wallet-panel header>.m-icon { color:var(--m-primary); }
.m-wallet-total { display:grid; gap:8px; margin-top:24px; }
.m-wallet-total>span { color:var(--m-muted); font-size:11px; }
.m-wallet-total>strong { font-size:36px; line-height:1.3; font-weight:500; letter-spacing:-.04em; }
.m-wallet-balances { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:22px; }
.m-wallet-balances>div { display:grid; gap:4px; }
.m-wallet-balances span { color:var(--m-muted); font-size:10px; }
.m-wallet-balances strong { font-size:16px; font-weight:500; }
.m-wallet-actions { display:flex; gap:10px; margin-top:22px; }
.m-profile-subscription { background:var(--m-active); }
.m-profile-subscription h3 { margin:24px 0 13px; font-size:25px; line-height:1.35; font-weight:550; }
.m-profile-sub-details { display:grid; gap:5px; color:var(--m-muted); font-size:11px; }
.m-profile-usage { display:flex; align-items:center; gap:16px; margin-top:24px; }
.m-small-gauge { display:grid; align-content:center; justify-items:center; flex:0 0 auto; width:74px; height:74px; border:4px solid var(--m-border); border-radius:50%; background:var(--m-panel); }
.m-small-gauge>strong { font-size:19px; line-height:1.3; font-weight:550; }
.m-small-gauge>span { font-size:9px; color:var(--m-muted); }
.m-profile-usage>div:last-child { display:grid; gap:5px; }
.m-profile-usage>div:last-child strong { font-size:14px; font-weight:500; }
.m-profile-usage>div:last-child span { color:var(--m-muted); font-size:11px; }
.m-subscription-center { margin:24px 0; }
.m-sub-center-body { display:flex; align-items:center; gap:32px; margin-top:24px; }
.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:13px; border-bottom:1px solid var(--m-border); }
.m-sub-center-address code { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--m-muted); font-size:11px; }
.m-sub-center-main .m-import-clients { margin:22px 0 14px; }
.m-password-tabs { gap:18px; margin:20px 0 24px; }
.m-password-tabs>button { font-size:11px; }
.m-password-tabs>button>span { font-size:10px; }
.m-avatar-preview { display:flex; align-items:center; flex-direction:column; gap:7px; margin:25px 0 30px; }
.m-avatar-preview>.m-avatar { width:76px; height:76px; margin-bottom:8px; }
.m-avatar-preview>.m-avatar .m-icon { width:36px; height:36px; }
.m-avatar-preview>strong { font-size:19px; font-weight:550; }
.m-avatar-preview>span:not(.m-avatar) { color:var(--m-muted); font-size:11px; }
.m-avatar-panel>.m-demo-note { margin-top:20px; }
.m-traffic-summary h1 { font-size:19px; line-height:1.5; font-weight:550; margin-bottom:26px; }
.m-traffic-used,.m-traffic-values { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:12px; }
.m-traffic-used { margin-bottom:12px; }
.m-traffic-used>span:last-child,.m-traffic-values { color:var(--m-muted); }
.member-app .m-traffic-progress { height:10px; }
.member-app .m-traffic-progress::-webkit-progress-bar { background:var(--m-active); }
.member-app .m-traffic-progress::-webkit-progress-value { background:#3861f9; }
.member-app .m-traffic-progress::-moz-progress-bar { background:#3861f9; }
.m-traffic-values { margin-top:10px; font-size:11px; }
.m-traffic-summary p { margin-top:24px; color:var(--m-muted); font-size:12px; }
.member-app .m-api-pagination { font-size:11px; color:var(--m-muted); }
.m-loading-state { min-height:220px; }
.m-loading-line { display:block; width:70%; height:24px; margin-bottom:14px; border-radius:6px; background:var(--m-active); animation:m-pulse 1.4s ease-in-out infinite; }
.m-loading-line:nth-child(2) { width:45%; height:12px; }
.m-loading-state p { margin-top:25px; color:var(--m-muted); font-size:12px; }
.m-content>* { animation:m-enter .35s ease-out both; }
.m-content>:nth-child(2) { animation-delay:.035s; }
.m-content>:nth-child(3) { animation-delay:.07s; }
.m-content>:nth-child(4) { animation-delay:.1s; }
@keyframes m-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes m-pulse { 50% { opacity:.5; } }
html[data-theme="dark"] .m-invite-promo { color:#efe6ff; border-color:#58417d; background:#30214a; }
html[data-theme="dark"] .m-invite-promo p,html[data-theme="dark"] .m-invite-promo .m-eyebrow { color:#d4c2f0; }
html[data-theme="dark"] .m-plan-price { color:var(--m-text); }
html[data-theme="dark"] .m-plan-tone-blue { --plan-tone:#91adff; }
html[data-theme="dark"] .m-plan-tone-violet { --plan-tone:#ba97ff; }
html[data-theme="dark"] .m-plan-tone-amber { --plan-tone:#ffc28b; }
html[data-theme="dark"] .m-plan-tone-slate { --plan-tone:#6cdef4; }
@media(max-width:1100px) {
 .m-topbar,.m-nav { padding-right:28px; padding-left:28px; }
 .m-nav { justify-content:space-between; gap:6px; }
 .m-nav-link { font-size:12px; gap:5px; }
 .m-nav-link .m-icon { width:16px; height:16px; }
 .m-content { padding:36px 28px 48px; }
 .m-client-info { gap:10px; padding:22px 15px; }
 .m-summary-card { padding:18px; gap:12px; }
 .m-tools-layout { grid-template-columns:1.4fr 1fr; gap:18px; }
 .m-quick-import,.m-invite-promo { padding:24px; }
 .m-import-clients { gap:5px; }
 .m-plan-card { padding:23px; }
 .m-footer { width:calc(100% - 56px); }
}
@media(max-width:1023px) {
 .m-topbar { height:76px; }
 .m-topbar-title { gap:14px; }
 .m-mobile-nav-toggle { display:inline-flex; margin-left:-10px; }
 .m-workspace-label { display:none; }
 .m-sidebar { position:fixed; inset:0 auto 0 0; z-index:25; display:flex; flex-direction:column; width:min(300px,calc(100vw - 48px)); border:0; border-right:1px solid var(--m-border); transform:translateX(-100%); visibility:hidden; transition:transform .2s,visibility .2s; }
 .m-mobile-open .m-sidebar { transform:translateX(0); visibility:visible; }
 .m-drawer-heading { display:flex; align-items:center; justify-content:space-between; padding:22px 18px; border-bottom:1px solid var(--m-border); }
 .m-drawer-heading .m-brand>span { font-size:20px; }
 .m-drawer-heading .m-brand img { width:32px; height:32px; }
 .m-nav { display:block; width:100%; margin:0; padding:20px 16px; flex:1; min-height:0; overflow-y:auto; }
 .m-nav-group { display:block; }
 .m-nav-group+.m-nav-group { margin-top:20px; }
 .m-nav-group h2 { display:block; padding:0 12px; margin-bottom:7px; color:var(--m-faint); font-size:10px; font-weight:500; }
 .m-nav-link { display:flex; min-height:46px; margin-bottom:5px; padding:10px 12px; border:0; border-radius:9px; gap:12px; font-size:13px; }
 .m-nav-link .m-icon { width:19px; height:19px; }
 .m-nav-link.is-active { background:var(--m-active); }
 .m-nav-link:hover { background:var(--m-hover); }
 .m-user-card { display:flex; align-items:center; gap:12px; flex:0 0 auto; min-height:92px; padding:20px; border-top:1px solid var(--m-border); }
 .m-user-card>div { min-width:0; }
 .m-user-card strong { display:block; font-size:13px; font-weight:550; }
 .m-user-card>div>span { display:block; overflow:hidden; text-overflow:ellipsis; color:var(--m-muted); font-size:10px; }
 .m-mobile-scrim { position:fixed; inset:0; z-index:20; border:0; background:#101b3566; backdrop-filter:blur(3px); }
 .m-node-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .m-header-actions { flex-wrap:wrap; }
 .m-profile-top,.m-profile-bottom { gap:18px; }
}
@media(max-width:767px) {
 .member-app .m-text-button { min-height:44px; }
 .m-topbar { height:70px; padding:0 16px; gap:12px; }
 .m-topbar-title { gap:7px; }
 .m-brand { gap:9px; }
 .m-brand>span { font-size:20px; }
 .m-brand img { width:31px; height:31px; }
 .m-brand small { font-size:7px; letter-spacing:.14em; }
 .m-topbar-tools { gap:0; }
 .m-topbar-tools>.m-icon-button,.m-top-menu>.m-icon-button { width:38px; }
 .m-account-button { padding-left:4px; }
 .m-account-button>span:not(.m-avatar),.m-account-button>.m-icon,.m-local-mark { display:none; }
 .m-content { padding:28px 16px 38px; }
 .m-page-heading { gap:12px; align-items:flex-start; margin-bottom:24px; }
 .m-page-heading h1 { font-size:29px; }
 .m-page-heading p { max-width:230px; font-size:11px; }
 .m-eyebrow { font-size:9px; }
 .m-heading-help { min-height:42px; padding:11px; border-radius:50%; }
 .m-heading-help>span { display:none; }
 .member-app .m-announcement-bar { padding:6px 10px; }
 .member-app .m-announcement-label { padding-right:10px; }
 .member-app .m-subscription { grid-template-columns:1fr; min-height:0; border-radius:15px; }
 .m-sub-overview { padding:27px 24px; }
 .member-app .m-subscription h2 { font-size:29px; margin-top:18px; }
 .m-sub-details { gap:30px; margin-top:22px; }
 .member-app .m-sub-actions { gap:9px; margin-top:24px; }
 .member-app .m-renew-button { min-height:44px; font-size:11px; padding:10px 12px; }
 .member-app .m-renew-reset { padding-left:0; border-color:transparent; }
 .m-usage-section { flex-direction:row; gap:24px; justify-content:center; padding:24px; border-top:1px solid #ffffff15; border-left:0; }
 .member-app .m-usage-gauge { width:150px; height:150px; margin:0; transform:none; }
 .m-usage-gauge::before { inset:8px; }
 .m-gauge-inner>strong { font-size:37px; }
 .m-gauge-inner>small { font-size:8px; }
 .m-gauge-inner>span { font-size:9px; }
 .m-usage-legend { flex-direction:column; gap:10px; }
 .m-summary-grid { gap:9px; margin:12px 0 30px; }
 .m-summary-card { display:block; min-height:136px; padding:15px 12px; border-radius:10px; }
 .m-summary-icon { width:28px; height:28px; margin-bottom:10px; border-radius:8px; }
 .m-summary-icon .m-icon { width:15px; height:15px; }
 .m-summary-copy { gap:5px; }
 .m-summary-copy>span { font-size:9px; }
 .m-summary-copy strong { font-size:16px; }
 .m-summary-copy small,.m-summary-card>.m-icon { display:none; }
 .m-section-heading { align-items:flex-end; gap:12px; }
 .m-section-heading h2 { font-size:18px; max-width:200px; }
 .m-section-heading .m-text-button { font-size:10px; }
 .m-client-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:17px; }
 .m-client-info { padding:20px 16px; min-height:94px; }
 .m-client-info .m-os-icon { width:23px; height:23px; }
 .m-client-info h2 { font-size:14px; }
 .m-client-info p { font-size:9px; }
 .member-app .m-client-action { padding:11px 16px; font-size:10px; }
 .m-tools-layout { grid-template-columns:1fr; gap:16px; margin-top:20px; }
 .m-panel,.m-quick-import,.m-invite-promo { padding:23px; }
 .m-panel h2 { font-size:16px; }
 .m-import-clients { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px; }
 .m-import-client>span { font-size:10px; }
 .m-client-logo { width:37px; height:37px; }
 .m-invite-promo { min-height:215px; }
 .m-invite-promo h2 { font-size:23px; }
 .m-footer { flex-wrap:wrap; width:calc(100% - 32px); gap:6px 15px; padding:22px 0; font-size:9px; }
 .m-footer>span:nth-child(2) { flex:1; text-align:right; }
 .m-footer>span:nth-child(3) { width:100%; }
 .m-plan-center-heading { flex-wrap:wrap; gap:12px; }
 .m-plan-center-heading h1 { display:none; }
 .m-plan-filters { width:100%; }
 .m-plan-filters button { flex:1; min-height:40px; padding:9px 10px; font-size:11px; }
 .m-plan-grid { grid-template-columns:1fr; gap:18px; }
 .m-plan-card { padding:26px; }
 .m-plan-card h2 { min-height:0; }
 .m-node-grid,.m-profile-top,.m-profile-bottom,.m-knowledge-list { grid-template-columns:1fr; gap:16px; }
 .m-feature-banner { padding:24px; min-height:180px; }
 .m-feature-banner h1 { font-size:23px; }
 .m-commission-panel header,.m-invite-codes header { flex-wrap:wrap; align-items:flex-start; gap:16px; }
 .m-commission-balance strong { font-size:39px; }
 .m-referral-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
 .m-referral-stats>div+div { border:0; padding-left:0; }
 .m-referral-stats strong { font-size:20px; }
 .m-sub-center-body { flex-direction:column; align-items:flex-start; gap:24px; }
 .m-sub-center-main { width:100%; }
 .m-sub-center-main .m-import-clients { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .m-invite-codes .m-sub-center-address { flex-wrap:wrap; gap:8px 18px; }
 .m-knowledge-article { padding:24px; }
 .m-knowledge-article h1 { font-size:25px; }
 .m-traffic-values { flex-wrap:wrap; gap:4px 15px; }
 .m-dialog-heading { padding:16px 20px; }
 .m-dialog-content { padding:20px; }
 .m-dialog-footer { padding:16px 20px; }
 .m-dialog-footer .m-button { font-size:11px; padding-right:12px; padding-left:12px; }
}
@media(max-width:375px) {
 .m-topbar-tools>.m-icon-button,.m-top-menu>.m-icon-button { width:34px; padding:8px; }
 .m-brand>span { font-size:18px; }
 .m-brand img { width:28px; height:28px; }
 .m-summary-card { padding:13px 9px; }
 .m-summary-copy strong { font-size:14px; }
 .m-client-info { gap:9px; padding:18px 12px; }
 .m-sub-overview { padding:25px 20px; }
}
@media(prefers-reduced-motion:reduce) { .member-app *,.member-app *::before,.member-app *::after,.m-dialog * { animation:none!important; transition-duration:.01ms!important; } }