:root {
  --cf-bg: #080a0b;
  --cf-surface: #111415;
  --cf-surface-2: #171a1b;
  --cf-surface-3: #1d2122;
  --cf-line: rgba(255, 255, 255, .1);
  --cf-line-strong: rgba(255, 255, 255, .18);
  --cf-ink: #f4f7f6;
  --cf-muted: #919a99;
  --cf-dim: #66706f;
  --cf-accent: #29d8c2;
  --cf-accent-2: #80f2d5;
  --cf-blue: #61d9ff;
  --cf-violet: #a98cff;
  --cf-orange: #ff914f;
  --cf-danger: #ff8c8c;
  --cf-sidebar: 232px;
  --cf-radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.membership-page { margin: 0; min-width: 320px; min-height: 100vh; color: var(--cf-ink); background: var(--cf-bg); font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
body.membership-page::before { position: fixed; z-index: -1; inset: 0; pointer-events: none; content: ""; background: radial-gradient(circle at 60% -10%, rgba(20, 104, 94, .2), transparent 30%), radial-gradient(circle at 90% 30%, rgba(29, 89, 112, .11), transparent 30%); }
.membership-page [hidden] { display: none !important; }
button, select { font: inherit; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
.cf-app { display: flex; min-height: 100vh; }
.cf-sidebar { position: fixed; z-index: 5; top: 0; bottom: 0; left: 0; display: flex; width: var(--cf-sidebar); flex-direction: column; padding: 28px 16px 18px; border-right: 1px solid rgba(255,255,255,.07); background: #0d0f10; }
.cf-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.cf-brand img { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 0 22px rgba(41,216,194,.22); }
.cf-brand span { display: flex; flex-direction: column; gap: 3px; }
.cf-brand small { color: var(--cf-dim); font-size: 7px; font-weight: 700; letter-spacing: .15em; }
.cf-side-nav { display: grid; gap: 28px; margin-top: 54px; }
.cf-nav-group { display: grid; gap: 5px; }
.cf-nav-label { padding: 0 12px 7px; color: #5e6867; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cf-nav-item { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 12px; border-radius: 9px; color: #aab2b1; font-size: 13px; transition: .2s ease; }
.cf-nav-item i { display: grid; width: 18px; place-items: center; color: #778281; font-size: 17px; font-style: normal; }
.cf-nav-item b { margin-left: auto; padding: 2px 5px; border: 1px solid rgba(41,216,194,.35); border-radius: 4px; color: var(--cf-accent); font-size: 8px; letter-spacing: .04em; }
.cf-nav-item:hover { color: #f7fafa; background: rgba(255,255,255,.05); }
.cf-nav-item.active { color: #eafff9; background: rgba(41,216,194,.13); box-shadow: inset 2px 0 var(--cf-accent); }
.cf-nav-item.active i { color: var(--cf-accent); }
.cf-side-callout { position: relative; overflow: hidden; margin-top: auto; padding: 16px 15px; border: 1px solid rgba(41,216,194,.2); border-radius: 14px; background: linear-gradient(140deg, rgba(21, 85, 78, .65), rgba(15, 37, 38, .4)); }
.cf-side-callout::after { position: absolute; right: -22px; bottom: -28px; width: 100px; height: 100px; border: 1px solid rgba(41,216,194,.25); border-radius: 50%; content: ""; }
.cf-side-callout-kicker { color: var(--cf-accent); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.cf-side-callout strong { display: block; margin-top: 9px; font-size: 14px; line-height: 1.5; }
.cf-side-callout p { margin: 8px 0 14px; color: #8ca6a2; font-size: 11px; line-height: 1.6; }
.cf-side-callout a { color: var(--cf-accent-2); font-size: 11px; }
.cf-side-callout a span, .cf-text-link span { margin-left: 4px; }
.cf-side-status { display: flex; align-items: center; gap: 7px; padding: 20px 8px 0; color: #84908e; font-size: 11px; }
.cf-side-status small { margin-left: auto; color: #4f5b5a; font-size: 10px; }
.cf-status-dot, .cf-sync i { width: 6px; height: 6px; border-radius: 50%; background: var(--cf-accent); box-shadow: 0 0 9px var(--cf-accent); }
.cf-main { width: calc(100% - var(--cf-sidebar)); min-height: 100vh; margin-left: var(--cf-sidebar); }
.cf-promo-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 42px; padding: 0 56px; color: #c8fdf2; background: linear-gradient(90deg, #075c60, #0c3d4e 45%, #092b43); font-size: 12px; }
.cf-promo-mark { color: #a9fff0; font-size: 15px; }
.cf-promo-bar strong { color: #fff; }
.cf-promo-sep { color: rgba(255,255,255,.4); }
.cf-promo-bar button { padding: 5px 10px; border: 1px solid rgba(255,255,255,.32); border-radius: 6px; color: #fff; background: rgba(255,255,255,.1); cursor: pointer; font-size: 11px; }
.cf-promo-bar .cf-promo-close { position: absolute; top: 50%; right: 16px; display: grid; width: 32px; height: 32px; padding: 0; place-items: center; transform: translateY(-50%); border: 0; color: rgba(255,255,255,.7); background: transparent; font-size: 20px; line-height: 1; }
.cf-promo-bar .cf-promo-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.cf-promo-bar .cf-promo-close:focus-visible { outline: 2px solid var(--cf-accent-2); outline-offset: 2px; }
.cf-header { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 0 clamp(28px, 4vw, 56px); border-bottom: 1px solid rgba(255,255,255,.065); }
.cf-breadcrumb { display: flex; align-items: center; gap: 10px; color: #7f8a89; font-size: 12px; }
.cf-breadcrumb b { color: #4e5958; font-weight: 400; }
.cf-breadcrumb strong { color: #dce5e3; font-weight: 650; }
.cf-header-actions { display: flex; align-items: center; gap: 10px; }
.cf-credit-pill { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid rgba(41,216,194,.4); border-radius: 9px; color: var(--cf-accent); background: rgba(20, 86, 79, .2); }
.cf-credit-pill span { font-size: 13px; }
.cf-credit-pill strong { color: #dcfff7; font-size: 13px; }
.cf-credit-pill small { color: #81aca5; font-size: 10px; }
.cf-user-select { max-width: 116px; padding: 8px 24px 8px 10px; border: 1px solid var(--cf-line); border-radius: 8px; outline: none; color: #aab5b3; background: #161a1a; font-size: 11px; }
.cf-admin-link { padding: 8px 11px; border: 1px solid var(--cf-line-strong); border-radius: 8px; color: #c9d1d0; font-size: 11px; transition: .2s ease; }
.cf-admin-link:hover { border-color: var(--cf-accent); color: var(--cf-accent-2); }
.cf-admin-link span { margin-left: 4px; color: var(--cf-accent); }
.cf-profile-menu { position: relative; }
.cf-profile-chip { display: flex; align-items: center; gap: 7px; padding-left: 4px; border: 0; outline: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.cf-profile-chip:hover, .cf-profile-chip:focus-visible { color: var(--cf-accent-2); }
.cf-profile-chip > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.cf-profile-chip strong { font-size: 11px; font-weight: 650; }
.cf-profile-chip small { color: #71807d; font-size: 9px; }
.cf-profile-chip > b { color: #7e8c89; font-size: 13px; font-weight: 400; }
.cf-avatar, .cf-account-avatar { display: grid; place-items: center; border: 1px solid rgba(41,216,194,.45); border-radius: 50%; color: #002d27; background: linear-gradient(135deg, #a0f6dd, #2bbcae); font-weight: 850; }
.cf-avatar { width: 31px; height: 31px; font-size: 10px; }
.cf-profile-menu-panel { position: absolute; z-index: 20; top: calc(100% + 10px); right: 0; display: grid; width: 270px; gap: 3px; padding: 9px; border: 1px solid rgba(41,216,194,.24); border-radius: 14px; background: linear-gradient(145deg, rgba(28, 63, 60, .98), rgba(12, 21, 22, .99)); box-shadow: 0 20px 55px rgba(0,0,0,.45); }
.cf-profile-menu-panel[hidden] { display: none; }
.cf-profile-menu-heading { padding: 7px 9px 9px; border-bottom: 1px solid rgba(255,255,255,.1); }
.cf-profile-menu-heading strong { display: block; color: #e6fff8; font-size: 11px; }
.cf-profile-menu-heading small { display: block; margin-top: 4px; color: #7f9691; font-size: 9px; }
.cf-profile-menu-panel a { display: grid; gap: 3px; padding: 9px; border: 1px solid transparent; border-radius: 9px; color: #e0ece9; }
.cf-profile-menu-panel a:hover, .cf-profile-menu-panel a:focus-visible { border-color: rgba(41,216,194,.2); outline: 0; background: rgba(41,216,194,.08); }
.cf-profile-menu-panel a strong { font-size: 11px; font-weight: 650; }
.cf-profile-menu-panel a small { color: #829490; font-size: 9px; line-height: 1.35; }
.cf-content { max-width: 1440px; margin: 0 auto; padding: 34px clamp(28px, 4vw, 56px) 66px; }
.cf-membership-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 28px; overflow: hidden; min-height: 286px; padding: 37px 40px; border: 1px solid rgba(41,216,194,.2); border-radius: 22px; background: linear-gradient(112deg, rgba(15, 56, 54, .92), rgba(16, 29, 32, .98) 62%, rgba(10, 28, 37, .96)); box-shadow: 0 22px 60px rgba(0,0,0,.2); }
.cf-membership-hero::before { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: .25; background-image: linear-gradient(rgba(137, 234, 222, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(137, 234, 222, .08) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, #000, transparent 78%); }
.cf-hero-copy, .cf-account-card { position: relative; z-index: 1; }
.cf-eyebrow { color: var(--cf-accent); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.cf-hero-copy h1 { margin: 13px 0 12px; font-size: clamp(30px, 4vw, 48px); font-weight: 740; letter-spacing: -.045em; line-height: 1.12; }
.cf-hero-copy h1 em { color: #a9ffec; font-style: normal; }
.cf-hero-copy p { max-width: 520px; margin: 0; color: #8da6a2; font-size: 13px; line-height: 1.8; }
.cf-hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 24px; }
.cf-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 39px; padding: 0 17px; border: 1px solid var(--cf-line-strong); border-radius: 9px; color: #dce7e4; background: rgba(255,255,255,.06); cursor: pointer; transition: .2s ease; }
.cf-button:hover { border-color: var(--cf-accent); color: #fff; background: rgba(41,216,194,.13); }
.cf-button.primary { border-color: transparent; color: #052823; background: linear-gradient(110deg, #87f0d7, #2bd1bd); box-shadow: 0 8px 22px rgba(41,216,194,.2); font-weight: 750; }
.cf-button.primary:hover { color: #052823; background: linear-gradient(110deg, #b6ffed, #4ce4ce); }
.cf-text-link { color: #a6b9b6; font-size: 12px; }
.cf-text-link:hover { color: var(--cf-accent-2); }
.cf-account-card { align-self: center; padding: 19px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(4, 16, 16, .5); backdrop-filter: blur(15px); }
.cf-account-heading, .cf-account-id, .cf-current-plan { display: flex; align-items: center; }
.cf-account-heading { justify-content: space-between; color: #90a6a2; font-size: 11px; }
.cf-sync { display: flex; align-items: center; gap: 5px; color: #70d8c3; font-size: 10px; }
.cf-account-id { gap: 10px; margin: 18px 0; }
.cf-account-avatar { width: 39px; height: 39px; font-size: 11px; }
.cf-account-id > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
.cf-account-id strong { font-size: 13px; }
.cf-account-id small { color: #81938f; font-size: 10px; }
.cf-account-more { margin-left: auto; color: #778581; letter-spacing: 2px; }
.cf-current-plan { position: relative; flex-wrap: wrap; gap: 5px 9px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.1); }
.cf-current-label { width: 100%; color: #758681; font-size: 10px; }
.cf-current-plan strong { color: #effffb; font-size: 16px; }
.cf-current-plan > span:nth-of-type(2) { color: #7bc7b8; font-size: 10px; }
.cf-current-plan a { margin-left: auto; color: var(--cf-accent); font-size: 10px; }
.cf-hero-glow { position: absolute; right: 19%; bottom: -110px; width: 260px; height: 260px; border-radius: 50%; background: rgba(32, 196, 176, .12); filter: blur(55px); }
.cf-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 15px; }
.cf-metric-card { position: relative; display: flex; align-items: center; gap: 12px; min-height: 108px; padding: 19px; border: 1px solid var(--cf-line); border-radius: 15px; background: #111516; }
.cf-metric-card > div:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
.cf-metric-card span { color: #8a9794; font-size: 11px; }
.cf-metric-card strong { color: #eef9f6; font-size: 23px; letter-spacing: -.03em; }
.cf-metric-card small { color: #5f6b69; font-size: 10px; }
.cf-metric-main { border-color: rgba(41,216,194,.28); background: linear-gradient(135deg, rgba(19, 71, 65, .5), #111516 65%); }
.cf-metric-icon { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: var(--cf-accent); background: rgba(41,216,194,.12); font-size: 19px; }
.cf-metric-icon.muted { color: #91c8c0; background: rgba(126, 189, 179, .1); }
.cf-metric-icon.violet { color: var(--cf-violet); background: rgba(169,140,255,.12); }
.cf-metric-card > a { margin-left: auto; color: var(--cf-accent); font-size: 11px; }
.cf-metric-card > a span { margin-left: 3px; color: var(--cf-accent); }
.cf-metric-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cf-metric-actions a { color: var(--cf-accent); font-size: 11px; }
.cf-metric-actions a span { margin-left: 3px; color: var(--cf-accent); }
.cf-metric-hint { position: absolute; top: 18px; right: 16px; padding: 4px 6px; border-radius: 5px; color: #73d4c2; background: rgba(41,216,194,.09); font-size: 9px; font-weight: 500; }
.cf-metric-hint.neutral { color: #a898dc; background: rgba(169,140,255,.09); }
.cf-section { margin-top: 48px; scroll-margin-top: 28px; }
.cf-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.cf-section-heading h2 { margin: 7px 0 6px; color: #ecf4f2; font-size: 24px; letter-spacing: -.035em; }
.cf-section-heading p { margin: 0; color: #788583; font-size: 12px; line-height: 1.6; }
.cf-heading-with-actions { align-items: end; }
.cf-billing-controls { display: flex; align-items: center; gap: 12px; }
.cf-tabs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--cf-line); border-radius: 9px; background: #111516; }
.cf-tab { min-width: 75px; padding: 7px 13px; border-radius: 6px; color: #798683; background: transparent; cursor: pointer; font-size: 12px; transition: .2s ease; }
.cf-tab:hover { color: #cfe6e0; }
.cf-tab.active { color: #dffff7; background: rgba(41,216,194,.18); box-shadow: inset 0 0 0 1px rgba(41,216,194,.22); }
.cf-cycle-switch { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--cf-line); border-radius: 9px; background: #111516; }
.cf-cycle-switch button { padding: 7px 10px; border-radius: 6px; color: #7c8986; background: transparent; cursor: pointer; font-size: 11px; }
.cf-cycle-switch button.active { color: #dffff8; background: #283638; }
.cf-cycle-switch b { margin-left: 4px; color: var(--cf-accent); font-size: 9px; font-weight: 600; }
.cf-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cf-card { border: 1px solid var(--cf-line); border-radius: 16px; background: var(--cf-surface); }
.cf-plan { --cf-plan-rgb: 112, 190, 241; --cf-plan-accent: #a5cfe9; position: relative; min-width: 0; overflow: hidden; cursor: pointer; border-color: rgba(var(--cf-plan-rgb),.2); background: radial-gradient(ellipse at 100% 0, rgba(var(--cf-plan-rgb),.09), transparent 47%), linear-gradient(160deg, #162129, #111719 62%); box-shadow: 0 12px 30px rgba(0,0,0,.12); transition: border-color .2s ease, box-shadow .2s ease; }
.cf-plan::before { position: absolute; top: 0; right: 24px; left: 24px; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(var(--cf-plan-rgb),.8), transparent); }
.cf-plan:hover { border-color: rgba(var(--cf-plan-rgb),.42); box-shadow: 0 14px 36px rgba(0,0,0,.2); }
.cf-plan.featured { --cf-plan-rgb: 95, 201, 170; --cf-plan-accent: #a6dec9; border-color: rgba(var(--cf-plan-rgb),.4); background: radial-gradient(ellipse at 100% 0, rgba(127,222,185,.19), transparent 43%), linear-gradient(155deg, #1b2b26, #141d19 65%); box-shadow: inset 0 1px 0 rgba(174,235,210,.09), 0 16px 40px rgba(0,0,0,.14); }
.cf-plan.featured::before { height: 1px; background: linear-gradient(90deg, transparent, rgba(169,235,207,.7), transparent); }
.cf-plan-highlight { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(148,223,192,.22); border-radius: 9px; color: #c0efda; background: linear-gradient(135deg, rgba(139,222,187,.19), rgba(107,191,158,.075)); box-shadow: inset 0 1px 0 rgba(204,255,228,.07); font-size: 11px; font-weight: 500; line-height: 1.4; }
.cf-plan-highlight svg { width: 13px; height: 13px; stroke: #b1ebd0; stroke-width: 1.25; stroke-linejoin: round; }
.cf-plan:focus-visible { outline: 2px solid var(--cf-plan-accent); outline-offset: 4px; }
.cf-plan.is-selected { border-color: rgba(var(--cf-plan-rgb),.7); box-shadow: 0 0 0 1px rgba(var(--cf-plan-rgb),.1), 0 14px 36px rgba(0,0,0,.2); }
.cf-plan.featured.is-selected { border-color: rgba(var(--cf-plan-rgb),.65); box-shadow: 0 0 0 1px rgba(var(--cf-plan-rgb),.1), 0 16px 40px rgba(0,0,0,.17); }
.cf-plan-main { position: relative; padding: 28px 26px 26px; }
.cf-plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 29px; }
.cf-plan-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cf-plan-icon { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 11px; color: var(--cf-plan-accent); background: linear-gradient(145deg, rgba(var(--cf-plan-rgb),.14), rgba(var(--cf-plan-rgb),.035)); }
.cf-plan-icon svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.cf-plan-recommendation { flex: 0 0 auto; padding: 4px 9px; border: 1px solid rgba(var(--cf-plan-rgb),.16); border-radius: 20px; color: var(--cf-plan-accent); background: rgba(var(--cf-plan-rgb),.045); font-size: 10px; font-weight: 400; line-height: 1.5; }
.cf-plan-tagline { margin: 12px 0 26px; color: #93a49c; font-size: 12px; line-height: 1.65; }
.cf-plan-price { display: flex; align-items: baseline; gap: 3px; color: #f2f5f3; font-size: 30px; font-weight: 550; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.25; }
.cf-plan-currency { margin-right: 2px; font-size: 17px; font-weight: 400; letter-spacing: 0; }
.cf-plan-price small { margin-left: 4px; color: #8d9b95; font-size: 12px; font-weight: 400; letter-spacing: 0; }
.cf-plan-price-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; min-height: 23px; margin: 9px 0 24px; color: #8f9e96; font-size: 12px; line-height: 1.7; }
.cf-plan-saving { padding: 1px 6px; border-radius: 5px; color: var(--cf-plan-accent); background: rgba(var(--cf-plan-rgb),.065); font-size: 11px; white-space: nowrap; }
.cf-plan-volume { padding: 20px 0 0; border: 0; border-top: 1px solid rgba(var(--cf-plan-rgb),.14); border-radius: 0; background: transparent; }
.cf-plan-volume:not(.cf-plan-volume-team) { padding: 17px; border: 1px solid rgba(var(--cf-plan-rgb),.085); border-radius: 14px; background: linear-gradient(140deg, rgba(var(--cf-plan-rgb),.045), rgba(255,255,255,.015)); }
.cf-plan-quota { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.cf-plan-volume-label, .cf-plan-credit > span { display: block; color: #a3b4ab; font-size: 12px; line-height: 1.6; }
.cf-plan-volume-number { display: flex; gap: 5px; align-items: baseline; margin-top: 7px; }
.cf-plan-volume strong { color: var(--cf-plan-accent); font-size: 30px; font-weight: 550; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cf-plan-volume strong .cf-plan-estimate-prefix { margin-right: 3px; color: #a3b4ab; font-size: 12px; font-weight: 400; letter-spacing: 0; }
.cf-plan-volume-number > span { color: #a3b4ab; font-size: 12px; }
.cf-plan-credit { padding-left: 10px; }
.cf-plan-credit b { display: block; margin-top: 10px; color: var(--cf-plan-accent); font-size: 22px; font-weight: 550; line-height: 1.3; font-variant-numeric: tabular-nums; }
.cf-plan-volume p { margin: 11px 0 0; color: #a6b9ad; font-size: 12px; line-height: 1.7; }
.cf-plan-volume-team .cf-plan-quota { grid-template-columns: 1fr; }
.cf-plan-volume-team .cf-plan-output { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cf-plan-volume-team .cf-plan-volume-number { margin-top: 0; }
.cf-plan-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; padding-top: 0; }
.cf-plan-breakdown > div { min-width: 0; }
.cf-plan-breakdown > div + div { padding-left: 0; border-left: 0; }
.cf-plan-breakdown span { display: block; color: #a8b9b0; font-size: 12px; line-height: 1.6; }
.cf-plan-breakdown b { display: block; margin-top: 7px; color: #e0eae4; font-size: 22px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
.cf-plan-breakdown small { font-size: 12px; font-weight: 400; }
.cf-plan-breakdown em { display: block; margin-top: 6px; color: #8f9f96; font-size: 12px; font-style: normal; line-height: 1.6; }
.cf-plan-included-points { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 18px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.055); font-size: 12px; line-height: 1.6; }
.cf-plan-included-points span { color: #9bada2; }
.cf-plan-included-points b { color: #c3d4c9; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cf-plan .cf-button { justify-content: center; width: 100%; margin-top: 22px; border-color: rgba(var(--cf-plan-rgb),.2); border-radius: 11px; color: #d8e6ec; background: rgba(var(--cf-plan-rgb),.07); }
.cf-plan .cf-button > span { margin-left: 3px; opacity: .7; }
.cf-plan .cf-button:hover { border-color: var(--cf-plan-accent); color: #f4fcff; background: rgba(var(--cf-plan-rgb),.17); }
.cf-plan .cf-button.primary { border-color: transparent; color: #122e25; background: linear-gradient(110deg, #a1dfc8, #77cdb2); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.cf-plan .cf-button.primary:hover { color: #122e25; background: linear-gradient(110deg, #b7e8d6, #90d9c0); }
.cf-plan.featured .cf-button.primary { background: linear-gradient(110deg, #a9dfca, #86cdb3); box-shadow: 0 5px 18px rgba(var(--cf-plan-rgb),.08); font-weight: 500; }
.cf-plan.featured .cf-button.primary:hover { background: linear-gradient(110deg, #bce9d8, #9bdbc3); }
.cf-plan .cf-button:disabled { opacity: .6; cursor: default; }
.cf-plan-services { display: flex; min-height: 31px; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; padding-top: 12px; color: #8f9e96; font-size: 12px; line-height: 1.7; }
.cf-plan-services > span + span::before { margin-right: 12px; color: #4e6558; content: "·"; }
.cf-plan-features { margin-top: 24px; padding-top: 0; border-top: 0; }
.cf-plan-features h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 16px; color: #b4c3ba; font-size: 12px; font-weight: 400; letter-spacing: .03em; }
.cf-plan-features h3::before { width: 4px; height: 4px; border-radius: 50%; content: ""; background: var(--cf-plan-accent); opacity: .55; }
.cf-plan-features ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.cf-plan-features li { display: flex; align-items: flex-start; gap: 10px; }
.cf-plan-feature-check { flex: 0 0 14px; padding-top: 3px; color: var(--cf-plan-accent); line-height: 1; }
.cf-plan-feature-check svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.cf-plan-features li div { display: grid; gap: 3px; min-width: 0; }
.cf-plan-features b { color: #d3e3da; font-size: 13px; font-weight: 500; line-height: 1.6; }
.cf-plan-features small { color: #8fa197; font-size: 12px; line-height: 1.65; }
.cf-plan.flagship { --cf-plan-rgb: 221, 182, 108; --cf-plan-accent: #e9cc94; border-color: rgba(var(--cf-plan-rgb),.28); background: radial-gradient(ellipse at 100% 0, rgba(var(--cf-plan-rgb),.13), transparent 47%), linear-gradient(160deg, #30291d, #1b1b16 62%); }
.cf-plan.flagship .cf-plan-heading h2, .cf-plan.flagship .cf-plan-price { color: #fff0ca; }
.cf-plan.flagship .cf-plan-tagline, .cf-plan.flagship .cf-plan-price-note, .cf-plan.flagship .cf-plan-volume p { color: #b9ac8c; }
.cf-plan.flagship .cf-plan-volume-label, .cf-plan.flagship .cf-plan-credit > span { color: #c1b596; }
.cf-plan.flagship .cf-plan-features { border-top-color: rgba(var(--cf-plan-rgb),.15); }
.cf-plan.flagship .cf-plan-features b { color: #eadfc6; }
.cf-plan.flagship .cf-plan-features small { color: #ad9f81; }
.cf-plan.flagship .cf-plan-breakdown span { color: #eadfc6; }
.cf-plan.flagship .cf-plan-breakdown b { color: #efe4cf; }
.cf-plan.flagship .cf-plan-breakdown em, .cf-plan.flagship .cf-plan-included-points span { color: #c1b596; }
.cf-plan.flagship .cf-plan-services { color: var(--cf-plan-accent); }
.cf-plan.flagship .cf-button { border-color: transparent; color: #382e1a; background: linear-gradient(110deg, #ecd4a0, #ddbb79); box-shadow: 0 4px 12px rgba(0,0,0,.1); font-weight: 500; }
.cf-plan.flagship .cf-button:hover { color: #382e1a; background: linear-gradient(110deg, #f4dfb5, #e9ca93); }
.cf-creative-bonus { color: var(--cf-plan-accent); }
.cf-plan-common { margin-top: 22px; padding: 23px 26px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.018); }
.cf-plan-common h3 { margin: 0 0 20px; color: #c1d2c7; font-size: 13px; font-weight: 500; }
.cf-plan-common ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 26px; margin: 0; padding: 0; list-style: none; }
.cf-plan-common li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.cf-plan-common li > span { padding-top: 3px; color: #5d9980; font-size: 11px; font-variant-numeric: tabular-nums; }
.cf-plan-common li div { display: grid; gap: 6px; }
.cf-plan-common b { color: #c5d8cc; font-size: 12px; font-weight: 500; }
.cf-plan-common small { color: #8b9f92; font-size: 11px; line-height: 1.6; }
.cf-plan-footnote { margin: 15px 0 0; color: #82998b; font-size: 11px; line-height: 1.8; }
.cf-plan-footnote p { margin: 3px 0; }
.cf-secure-note, .cf-ledger-caption { color: #6c8a84; font-size: 10px; }
.cf-ledger-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px 0; color: #91a49b; font-size: 12px; }
.cf-ledger-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.cf-ledger-page-actions button { min-height: 30px; padding: 0 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; color: #c7d9d1; background: rgba(255,255,255,.035); cursor: pointer; }
.cf-ledger-page-actions button:hover:not(:disabled), .cf-ledger-page-actions button:focus-visible { border-color: rgba(149,221,197,.5); outline: none; color: #c3ecdc; background: rgba(95,201,170,.08); }
.cf-ledger-page-actions button:disabled { opacity: .35; cursor: default; }
.cf-ledger-page-actions [role="status"] { min-width: 72px; text-align: center; font-variant-numeric: tabular-nums; }
.cf-table-wrap { overflow: hidden; border: 1px solid var(--cf-line); border-radius: 13px; background: #111516; }
.cf-table { width: 100%; border-collapse: collapse; }
.cf-table th, .cf-table td { padding: 14px 17px; border-bottom: 1px solid rgba(255,255,255,.065); text-align: left; font-size: 11px; }
.cf-table th { color: #6f7d79; background: rgba(255,255,255,.02); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.cf-table td { color: #b9c6c2; }
.cf-table tr:last-child td { border-bottom: 0; }
.cf-table td:last-child { color: #7ed9c7; }
.cf-empty { padding: 32px !important; color: #6a7774 !important; text-align: center !important; }
.cf-pricing-note { display: flex; align-items: flex-start; gap: 11px; margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(41,216,194,.15); border-radius: 11px; color: #8fa5a0; background: rgba(16, 52, 49, .32); font-size: 11px; }
.cf-pricing-icon { color: var(--cf-accent); font-size: 15px; }
.cf-pricing-note div { display: grid; gap: 5px; }
.cf-pricing-note strong { color: #cfe7e1; font-size: 11px; }
.cf-pricing-note b { color: var(--cf-accent-2); font-weight: 600; }
.cf-test-note { margin: 32px 0 0; color: #56625f; font-size: 10px; text-align: center; }
.cf-toast { position: fixed; right: 25px; bottom: 25px; z-index: 20; max-width: 350px; padding: 12px 15px; border: 1px solid rgba(41,216,194,.35); border-radius: 10px; color: #dffff8; background: #123630; box-shadow: 0 12px 35px rgba(0,0,0,.35); opacity: 0; transform: translateY(8px); transition: .2s ease; pointer-events: none; }
.cf-toast.show { opacity: 1; transform: translateY(0); }
.cf-toast.error { border-color: rgba(255,140,140,.5); color: #ffdada; background: #3a1c1d; }
@media (max-width: 1120px) { .cf-profile-chip { display: flex; padding-left: 0; } .cf-profile-chip > span:nth-child(2), .cf-profile-chip > b { display: none; } .cf-membership-hero { grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); } }
@media (max-width: 900px) { :root { --cf-sidebar: 72px; } .cf-sidebar { padding: 22px 10px 14px; } .cf-brand { justify-content: center; padding: 0; } .cf-brand span, .cf-nav-label, .cf-nav-item span, .cf-nav-item b, .cf-side-callout, .cf-side-status span, .cf-side-status small { display: none; } .cf-side-nav { margin-top: 42px; } .cf-nav-item { justify-content: center; padding: 0; } .cf-nav-item i { font-size: 18px; } .cf-side-status { justify-content: center; padding-top: 20px; } .cf-side-status .cf-status-dot { display: block; } .cf-content { padding-right: 28px; padding-left: 28px; } .cf-breadcrumb { display: none; } .cf-header { justify-content: flex-end; padding: 0 28px; } }
@media (max-width: 720px) { .cf-promo-bar { justify-content: flex-start; gap: 8px; overflow: hidden; white-space: nowrap; font-size: 10px; } .cf-promo-bar > span:nth-of-type(3), .cf-promo-sep { display: none; } .cf-promo-close { right: 10px; } .cf-header { min-height: 66px; padding: 0 17px; } .cf-admin-link { display: none; } .cf-user-select { max-width: 100px; } .cf-content { padding: 22px 17px 45px; } .cf-membership-hero { display: block; padding: 28px 24px 23px; } .cf-account-card { margin-top: 28px; } .cf-metrics, .cf-plan-grid { grid-template-columns: 1fr; } .cf-section { margin-top: 38px; } .cf-heading-with-actions, .cf-section-heading { align-items: flex-start; flex-direction: column; } .cf-billing-controls { width: 100%; justify-content: space-between; } .cf-cycle-switch { margin-left: auto; } .cf-table-wrap { overflow-x: auto; } .cf-table { min-width: 560px; } }
@media (max-width: 460px) { .cf-credit-pill { padding: 7px 9px; } .cf-credit-pill small { display: none; } .cf-hero-copy h1 { font-size: 32px; } .cf-hero-actions { align-items: flex-start; flex-direction: column; gap: 13px; } .cf-metric-card { min-height: 95px; } .cf-billing-controls { align-items: flex-start; flex-direction: column; } .cf-cycle-switch { margin-left: 0; } }


/* Compact member purchase flow */
.cf-membership-hero-compact { grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr); min-height: 232px; padding-top: 31px; padding-bottom: 31px; }
.cf-hero-status { position: relative; z-index: 1; align-self: center; padding: 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(4,16,16,.48); backdrop-filter: blur(15px); }
.cf-hero-status .cf-current-plan { margin-top: 21px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.cf-hero-status .cf-current-plan strong { font-size: 18px; }
.cf-status-link { display: inline-flex; margin-top: 17px; color: var(--cf-accent); font-size: 11px; }
.cf-status-link span { margin-left: 5px; }
.cf-detail-panel { margin-top: 34px; border: 1px solid var(--cf-line); border-radius: 14px; background: #111516; scroll-margin-top: 25px; }
.cf-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px; border-bottom: 1px solid var(--cf-line); }
.cf-detail-header > span:first-child { display: grid; gap: 5px; }
.cf-detail-header strong { color: #e6f3ef; font-size: 15px; letter-spacing: -.02em; }
.cf-detail-header small { color: #71807c; font-size: 11px; }
.cf-detail-body { padding: 17px 18px 18px; }
.cf-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: #c5d5d1; font-size: 12px; }
.cf-ledger-heading { margin-top: 22px; }
.cf-detail-heading em { color: #6e8983; font-size: 10px; font-style: normal; }
@media (max-width: 720px) {
  .cf-membership-hero-compact { padding-top: 28px; padding-bottom: 23px; }
  .cf-hero-status { margin-top: 26px; }
  .cf-detail-header { align-items: flex-start; }
}


/* Membership and points pages use the same navigation rail as the main app. */
.membership-center-page .cf-app { display: block; }
.membership-center-page .membership-side-nav { z-index: 900; }
.membership-center-page .cf-main { width: auto; margin-left: calc(var(--side-nav-width, 96px) + var(--nav-content-gap, 24px)); }
.membership-center-page .cf-header { min-height: 66px; }
.membership-center-page .cf-header { padding-right: 232px; }
.membership-center-page .membership-debug-only[hidden] { display: none; }
.membership-admin-page .global-account-points-chip,
.membership-admin-page [data-account-points],
.membership-admin-page [data-account-points-reserved] { display: none !important; }
.membership-center-page .cf-content { padding-top: 27px; }
.membership-center-page .cf-membership-hero-compact { min-height: 214px; padding: 28px 34px; }
.membership-center-page .cf-hero-copy h1 { font-size: clamp(27px, 3.25vw, 39px); }
.membership-center-page .cf-hero-copy p { font-size: 12px; line-height: 1.65; }
.membership-center-page .cf-section { margin-top: 38px; }
.membership-center-page .cf-section-heading h2 { font-size: 20px; }
.membership-center-page .cf-section-heading p { font-size: 11px; }
.membership-center-page .cf-metric-card { min-height: 96px; padding: 16px; }
.membership-center-page .cf-metric-card strong { font-size: 20px; }
.membership-center-page .cf-plan { padding: 0; border-radius: 20px; }
.membership-center-page .cf-plan h2 { margin: 0; font-size: 18px; font-weight: 550; letter-spacing: -.01em; }
.membership-center-page .cf-plan-price { margin-top: 0; font-size: clamp(24px, 2.3vw, 30px); }
.membership-center-page .cf-plan-list { gap: 11px; margin: 16px 0 22px; color: #d1dfd8; font-size: 11px; line-height: 1.65; }
.membership-center-page .cf-plan .cf-button { min-height: 42px; font-size: 12px; }
.membership-center-page .cf-detail-panel { margin-top: 28px; }
.membership-center-page .cf-table th, .membership-center-page .cf-table td { padding: 11px 14px; font-size: 10px; }
.membership-center-page .cf-button { min-height: 36px; padding: 0 15px; font-size: 11px; }
.membership-admin-page .cf-app { display: block; }
.membership-admin-page .cf-main { width: auto; margin-left: calc(var(--side-nav-width, 96px) + var(--nav-content-gap, 24px)); }
.membership-admin-page .cf-header { padding-right: 232px; }
.cf-business-modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; }
.cf-business-modal[hidden] { display: none; }
.cf-business-dialog { position: relative; width: min(430px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 29px 28px 25px; border: 1px solid rgba(86,239,216,.42); border-radius: 22px; color: var(--cf-ink); background: linear-gradient(145deg, rgba(23,48,46,.98), rgba(12,20,22,.99) 68%); box-shadow: 0 30px 100px rgba(0,0,0,.62), 0 0 0 1px rgba(41,216,194,.08) inset; text-align: center; }
.cf-business-dialog::before { position: absolute; top: -1px; right: 20%; left: 20%; height: 1px; content: ""; background: linear-gradient(90deg, transparent, var(--cf-accent), transparent); box-shadow: 0 0 18px rgba(41,216,194,.8); }
.cf-business-close { position: absolute; top: 14px; right: 15px; display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: #9aaba7; background: rgba(255,255,255,.04); cursor: pointer; font-size: 18px; line-height: 1; transition: .2s ease; }
.cf-business-close:hover, .cf-business-close:focus-visible { border-color: rgba(41,216,194,.5); outline: 0; color: var(--cf-accent-2); background: rgba(41,216,194,.1); }
.cf-business-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--cf-accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.cf-business-kicker i { width: 5px; height: 5px; border-radius: 50%; background: var(--cf-accent); box-shadow: 0 0 10px var(--cf-accent); }
.cf-business-dialog h2 { margin: 10px 25px 8px; font-size: 21px; letter-spacing: -.04em; }
.cf-business-dialog > p { margin: 0 auto; max-width: 285px; color: #91a8a2; font-size: 11px; line-height: 1.7; }
.cf-business-qr-card { margin: 20px auto 14px; padding: 13px 13px 11px; border: 1px solid rgba(41,216,194,.18); border-radius: 16px; background: rgba(4,14,15,.38); box-shadow: 0 16px 35px rgba(0,0,0,.18); }
.cf-business-qr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 3px 10px; text-align: left; }
.cf-business-qr-head strong { color: #dcfff7; font-size: 11px; }
.cf-business-qr-head span { color: #718b85; font-size: 9px; }
.cf-business-qr-wrap { display: grid; width: min(250px, 100%); aspect-ratio: 750 / 958; margin: 0 auto; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 13px; background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.27); }
.cf-business-qr-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cf-business-qr-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #20443d; background: repeating-linear-gradient(45deg, #d8f4ec 0 5px, #f8fffc 5px 10px); font-size: 14px; font-weight: 800; line-height: 1.5; }
.cf-business-qr-placeholder small { color: #4a7770; font-size: 10px; font-weight: 500; }
.cf-business-qr-foot { display: block; margin-top: 9px; color: #718b85; font-size: 9px; }
.cf-business-phone { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; margin: 0 auto 11px; padding: 11px 13px; border: 1px solid rgba(41,216,194,.24); border-radius: 12px; color: var(--cf-ink); background: linear-gradient(100deg, rgba(41,216,194,.11), rgba(41,216,194,.035)); text-align: left; transition: .2s ease; }
.cf-business-phone:hover { border-color: rgba(41,216,194,.55); background: rgba(41,216,194,.14); }
.cf-business-phone-icon { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(41,216,194,.32); border-radius: 9px; color: var(--cf-accent); background: rgba(41,216,194,.1); font-size: 13px; }
.cf-business-phone-copy { display: grid; gap: 3px; }
.cf-business-phone-copy small { color: #7b8c88; font-size: 9px; }
.cf-business-phone-copy strong { color: #dffff7; font-size: 14px; letter-spacing: .06em; }
.cf-business-plan { position: relative; display: grid; gap: 4px; overflow: hidden; padding: 13px 14px 12px 17px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.045); text-align: left; }
.cf-business-plan::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; content: ""; background: var(--cf-accent); box-shadow: 0 0 12px rgba(41,216,194,.65); }
.cf-business-plan span { color: #7b8c88; font-size: 9px; }
.cf-business-plan strong { color: #e3fff7; font-size: 14px; }
.cf-business-plan small { color: var(--cf-accent); font-size: 10px; }
.cf-business-done { width: 100%; min-height: 40px; margin-top: 16px; border-radius: 11px; box-shadow: 0 9px 22px rgba(41,216,194,.18); }
.cf-business-done:disabled { cursor: not-allowed; opacity: .45; }
.cf-terms-modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; }
.cf-terms-modal[hidden] { display: none; }
.cf-terms-dialog { position: relative; display: flex; flex-direction: column; width: min(940px, 100%); height: min(740px, calc(100dvh - 40px)); overflow: hidden; padding: 24px; border: 1px solid rgba(86,239,216,.32); border-radius: 20px; color: var(--cf-ink); background: linear-gradient(145deg, rgba(23,48,46,.98), rgba(12,20,22,.99) 68%); box-shadow: 0 30px 100px rgba(0,0,0,.62); }
.cf-terms-heading { flex-shrink: 0; }
.cf-terms-dialog h2 { margin: 9px 32px 8px 0; font-size: 19px; line-height: 1.5; overflow-wrap: anywhere; }
.cf-terms-meta { min-height: 16px; margin: 0 0 18px; color: #8ea69f; font-size: 11px; }
.cf-terms-layout { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; flex: 1; min-height: 0; }
.cf-terms-nav { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.cf-terms-nav button { flex-shrink: 0; width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; color: #9cb4ae; background: transparent; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.cf-terms-nav button:hover { background: rgba(255,255,255,.04); }
.cf-terms-nav button[aria-selected="true"] { border-color: rgba(41,216,194,.3); color: #a4f9e7; background: rgba(41,216,194,.1); }
.cf-terms-panel { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 20px 0; scrollbar-width: thin; scrollbar-color: #496760 transparent; }
.cf-terms-panel:focus-visible, .cf-terms-dialog button:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: -2px; }
#membership-terms-status { margin: 8px 0 14px; color: #b1c4bf; font-size: 13px; line-height: 1.8; }
#membership-terms-status:empty { display: none; }
.cf-terms-body { color: #b1c4bf; font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.cf-terms-body h3 { margin: 20px 0 7px; color: #e3fff7; font-size: 14px; }
.cf-terms-body section:first-child h3 { margin-top: 0; }
.cf-terms-body p { margin: 0; white-space: pre-line; }
.cf-terms-actions { display: flex; flex-shrink: 0; justify-content: flex-end; gap: 9px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.cf-terms-actions .cf-button { min-height: 36px; padding: 7px 12px; font-size: 12px; }
.cf-terms-actions .cf-button:disabled { opacity: .4; cursor: not-allowed; }
.cf-membership-modal { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; overflow: hidden; color: inherit; background: transparent; }
.cf-membership-modal::backdrop { background: rgba(0,0,0,.8); }
.membership-page.cf-modal-open { overflow: hidden; }
.cf-membership-modal > div { min-height: 0; max-height: 100%; overscroll-behavior: contain; }
.cf-agreement-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; padding: 21px 23px; border: 1px solid rgba(86,239,216,.2); border-radius: 16px; background: linear-gradient(110deg, rgba(20,73,68,.42), rgba(17,25,27,.94)); box-shadow: 0 14px 36px rgba(0,0,0,.12); }
.cf-agreement-card-copy { min-width: 0; }
.cf-agreement-card h2 { margin: 7px 0 5px; color: #e6f8f3; font-size: 16px; letter-spacing: -.02em; }
.cf-agreement-card p { max-width: 760px; margin: 0; color: #8da39e; font-size: 11px; line-height: 1.65; }
.cf-agreement-card-action { display: flex; flex: 0 0 auto; align-items: flex-end; flex-direction: column; gap: 9px; }
.cf-agreement-card-action > span { color: #78958e; font-size: 10px; }
.cf-agreement-card-action .cf-button { min-height: 34px; padding: 0 14px; font-size: 11px; }
.cf-billing-policy-summary { display: grid; gap: 8px; margin-top: 16px; padding: 13px 14px; border: 1px solid rgba(41,216,194,.16); border-radius: 10px; color: #9bb2ac; background: rgba(4,14,15,.28); font-size: 11px; line-height: 1.6; }
.cf-billing-policy-summary div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 9px; overflow-wrap: anywhere; }
.cf-billing-policy-summary b { color: #dffff7; font-weight: 700; }
.cf-pricing-section { margin-top: 22px; }
.cf-pricing-table { min-width: 720px; }
.cf-module-table { min-width: 900px; }
.cf-pricing-table td:first-child, .cf-module-table td:first-child { white-space: nowrap; }
.cf-pricing-table td strong, .cf-module-table td strong { display: block; color: #dcece7; font-size: 11px; font-weight: 650; }
.cf-pricing-table td small, .cf-module-table td small { display: block; margin-top: 4px; color: #71817c; font-size: 9px; line-height: 1.4; }
.cf-pricing-table td:not(:first-child) b { display: block; color: var(--cf-accent-2); font-size: 11px; font-weight: 650; }
.cf-pricing-table td:not(:first-child) small { color: #86aaa2; }
.cf-module-table td { vertical-align: top; line-height: 1.55; }
.cf-module-note { min-width: 205px; color: #91a59f !important; }
.cf-pricing-formula { margin-top: 18px; padding: 15px 17px 14px; border: 1px solid rgba(41,216,194,.17); border-radius: 11px; color: #91a59f; background: rgba(16, 52, 49, .28); font-size: 10px; line-height: 1.7; }
.cf-pricing-formula-title { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: #d4ebe5; font-size: 11px; }
.cf-pricing-formula-title .cf-pricing-icon { margin: 0; }
.cf-pricing-formula ol { display: grid; gap: 4px; margin: 0; padding-left: 19px; }
.cf-pricing-formula b { color: var(--cf-accent-2); font-weight: 650; }
.cf-pricing-formula p { margin: 9px 0 0; color: #657b75; font-size: 9px; }
@media (max-width: 720px) {
  .membership-center-page .cf-membership-hero-compact { padding: 25px 23px; }
  .membership-center-page .cf-content { padding-right: 17px; padding-left: 17px; }
  .cf-plan-main { padding: 24px 20px 16px; }
  .cf-plan-common { padding: 22px 20px; }
  .cf-plan-common ul { grid-template-columns: 1fr; gap: 20px; }
}
@media (min-width: 721px) and (max-width: 1150px) {
  .cf-plan-main { padding: 24px 17px 16px; }
  .cf-plan-price-note { min-height: 38px; }
  .cf-plan-volume { padding: 18px 0 0; }
  .cf-plan-quota { grid-template-columns: 1fr; gap: 12px; }
  .cf-plan-breakdown { grid-template-columns: 1fr; }
  .cf-plan-breakdown > div + div { padding: 0; border: 0; }
  .cf-plan-credit { padding: 10px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .cf-plan-credit b { margin-top: 5px; font-size: 21px; }
  .cf-plan-tagline { min-height: 38px; }
  .cf-plan-services { min-height: 42px; }
  .cf-plan-common ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1259px) {
  .membership-center-page .cf-main, .membership-admin-page .cf-main { margin-left: 108px; }
}
@media (max-width: 900px) {
  .membership-center-page .cf-header, .membership-admin-page .cf-header { padding-right: 72px; }
}
@media (max-width: 720px) {
  .membership-center-page .cf-main, .membership-admin-page .cf-main { margin-left: 74px; }
  .membership-center-page .cf-header, .membership-admin-page .cf-header { padding-right: 56px; }
  .cf-promo-bar { padding-left: 16px; }
  .cf-promo-bar .cf-promo-close { right: 10px; }
}
@media (max-width: 720px) {
  .cf-agreement-card { align-items: flex-start; flex-direction: column; gap: 16px; }
  .cf-agreement-card-action { align-items: flex-start; }
  .cf-terms-modal { padding: 10px; }
  .cf-terms-dialog { height: calc(100dvh - 20px); padding: 18px 14px; border-radius: 14px; }
  .cf-terms-dialog h2 { font-size: 17px; }
  .cf-terms-layout { display: flex; flex-direction: column; gap: 14px; }
  .cf-terms-nav { flex-shrink: 0; flex-direction: row; overflow-x: auto; padding-bottom: 5px; }
  .cf-terms-nav button { width: auto; white-space: nowrap; }
  .cf-terms-panel { flex: 1; padding-right: 6px; }
  .cf-terms-actions { flex-wrap: wrap; gap: 8px; }
  .cf-terms-actions .cf-button { flex: 1 1 auto; }
}
@media (max-width: 460px) {
  .cf-plan-quota, .cf-plan-breakdown { grid-template-columns: 1fr; }
  .cf-plan-credit { padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(var(--cf-plan-rgb),.12); }
  .cf-plan-breakdown > div + div { padding: 0; border: 0; }
}

@media print {
  @page { margin: 16mm; }
  body { overflow: visible !important; color: #111; background: #fff; }
  .cf-app, .cf-business-modal, .cf-toast, .global-account-menu { display: none !important; }
  .cf-terms-modal { position: static; display: block; padding: 0; background: #fff; }
  .cf-terms-modal[hidden] { display: none !important; }
  .cf-terms-modal > .cf-terms-dialog { display: block; width: auto; height: auto; max-height: none; overflow: visible; padding: 0; border: 0; border-radius: 0; color: #111; background: #fff; box-shadow: none; }
  .cf-terms-layout, .cf-terms-panel { display: block; overflow: visible; padding: 0; }
  .cf-terms-body h3 { break-after: avoid; }
  .cf-membership-modal { height: auto; overflow: visible; }
  .cf-membership-modal::backdrop { background: transparent; }
  .cf-terms-dialog h2, .cf-terms-meta, .cf-terms-body, .cf-terms-body h3, .cf-terms-body p { color: #111; }
  .cf-terms-actions, .cf-business-close, .cf-terms-nav, .cf-terms-heading .cf-business-kicker, #membership-terms-status, #membership-terms-retry { display: none !important; }
}