.membership-page { margin:0; background:var(--bg); }
.membership-page * { box-sizing:border-box; }
.membership-page [hidden] { display:none!important; }
.membership-page a { text-decoration:none; }
.membership-content { max-width:1272px; margin:0 auto; padding:0 36px 40px; gap:24px; }
.member-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:28px; }
.member-section-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.member-section-head h2,.activation-card h2 { font-size:19px; font-weight:650; margin:0; }
.member-section-head p,.activation-card p { font-size:14px; color:var(--muted); margin:6px 0 0; }
.member-state,.member-promo { background:var(--accent-soft); color:var(--accent-dark); font-size:13px; padding:6px 12px; border-radius:8px; white-space:nowrap; }
.member-state.is-active { background:#e8f5ee; color:#287149; }
.member-current { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; }
.member-current h3 { margin:0 0 8px; font-size:27px; font-weight:650; }
.member-current p,#legacy-membership { margin:0; font-size:14px; color:var(--muted); line-height:1.8; }
#legacy-membership { margin-top:8px; }
.member-button { display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; border:1px solid var(--accent); border-radius:9px; background:var(--accent); color:white; font-size:14px; font-weight:500; line-height:1.5; font-family:inherit; cursor:pointer; white-space:nowrap; }
.member-button:hover { filter:brightness(.96); }
.member-button:disabled { opacity:.6; cursor:wait; }
.member-button.secondary { background:var(--card); color:var(--accent-dark); border-color:var(--border); }
.permissions-head { border-top:1px solid var(--border); padding-top:22px; }
.permissions-head h3 { margin:0; font-size:15px; }
.permissions-head>span { font-size:13px; color:var(--muted); }
.member-permissions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0 22px; }
.member-permissions>div { background:var(--bg); padding:18px; border:1px solid var(--border); border-radius:11px; }
.permission-number { font-size:12px; color:var(--muted); }
.member-permissions h4 { margin:9px 0 7px; font-size:15px; font-weight:600; }
.member-permissions p { margin:0; font-size:13px; line-height:1.8; color:var(--muted); }
.membership-rule { padding:16px 18px; background:var(--accent-soft); border-radius:10px; display:grid; gap:5px; font-size:13px; }
.membership-rule strong { font-weight:600; }
.membership-rule span { color:var(--muted); }
.membership-rule a { justify-self:start; color:var(--accent-dark); }
.membership-plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:24px 0; }
.membership-plan { padding:24px; border:2px solid var(--border); border-radius:12px; cursor:pointer; }
.membership-plan.selected { border-color:var(--accent); background:color-mix(in srgb,var(--accent-soft) 35%,white); }
.plan-name { display:flex; align-items:center; justify-content:space-between; font-size:18px; }
.plan-name input { width:18px; height:18px; accent-color:var(--accent); }
.plan-description,.planned-price,.plan-equivalent { font-size:13px; color:var(--muted); margin:8px 0; }
.plan-price { display:flex; align-items:baseline; gap:5px; margin:18px 0 4px; }
.plan-price strong { font-size:42px; line-height:1.2; font-weight:650; color:var(--accent-dark); }
.plan-price span { font-size:15px; color:var(--muted); }
.plan-equivalent { min-height:22px; color:var(--accent-dark); margin:14px 0 18px; }
.membership-plan ul { padding:16px 0 0 18px; margin:0; border-top:1px solid var(--border); font-size:14px; line-height:2; }
.membership-checkout { display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--bg); padding:20px; border-radius:11px; }
.membership-checkout span { font-size:14px; }
.membership-checkout p { margin:5px 0; font-size:14px; }
.membership-checkout strong { font-size:24px; color:var(--accent-dark); }
.membership-checkout small { color:var(--muted); font-size:12px; }
.membership-payment { display:flex; align-items:center; justify-content:space-between; gap:30px; border:1px solid var(--border); border-radius:12px; margin-top:20px; padding:24px; }
.membership-payment h3 { margin:0 0 10px; font-size:18px; }
.membership-payment img { flex:none; border:1px solid var(--border); border-radius:10px; }
.payment-hint { color:var(--muted); font-size:13px; }
.member-error { color:#b43d3d; font-size:14px; }
.member-link { border:0; background:none; color:var(--accent-dark); cursor:pointer; padding:0; font:inherit; }
.activation-card { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; }
.activation-input { display:flex; gap:10px; }
.activation-input input { width:100%; min-width:0; border:1px solid var(--border); border-radius:9px; padding:12px; font:inherit; font-size:14px; }
#act-msg { font-size:13px; margin:6px 0 0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.membership-page .foot { color:var(--muted); font-size:12px; }
.membership-page .foot a { color:inherit; }
.membership-page :is(button,a,input):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(min-width:1280px) { .membership-page .membership-content { display:flex; width:100%; flex-direction:column; } }

/* Membership accent: the shared brand blue, with warm gold reserved for membership. */
@media(min-width:1280px) {
  .membership-page { --member-gold:#c7a266; --member-gold-light:#f6e4bf; }
  .membership-page .console-heading h1 { font-size:28px; letter-spacing:-.5px; }
  .membership-content { gap:26px; }
  .member-card { border-color:#dfe6ef; border-radius:18px; box-shadow:0 6px 24px #253f6505; }
  .member-status { padding:28px; }
  .member-current { position:relative; isolation:isolate; overflow:hidden; margin:20px 0 26px; padding:30px; min-height:168px; border:1px solid #506886; border-radius:14px; background:radial-gradient(ellipse at 95% 15%,#597da653,transparent 57%),linear-gradient(115deg,#192e4c,#294a70); box-shadow:0 10px 26px #18385d16; }
  .member-current::after { content:''; position:absolute; z-index:-1; width:300px; height:300px; right:90px; top:-145px; border:1px solid #e6c99124; border-radius:50%; box-shadow:0 0 0 32px #e6c99106,0 0 0 64px #e6c99104; pointer-events:none; }
  .member-identity { display:flex; gap:22px; align-items:center; min-width:0; }
  .member-crest { display:grid; place-items:center; width:74px; height:80px; flex:none; color:var(--member-gold-light); border:1px solid #e4ca9270; border-radius:19px 19px 26px 26px; background:linear-gradient(145deg,#f7deab20,#c79d5610); box-shadow:inset 0 0 20px #e6c99108; }
  .member-crest svg { width:43px; height:43px; }
  .member-card-label { display:block; color:#dbc296; font-size:12px; letter-spacing:2px; margin-bottom:7px; }
  .member-current h3 { color:#fff3da; font-size:29px; letter-spacing:.5px; margin-bottom:5px; }
  .member-current p,.member-current #legacy-membership { color:#c0cee0; }
  .member-current .member-button.secondary { color:#3c3020; border-color:#ecd5a8; background:linear-gradient(110deg,#f4e4c7,#dfbf84); box-shadow:0 4px 14px #0d1c3020; padding:12px 24px; }
  .member-state.is-active { color:#80602b; background:#f6efdf; border:1px solid #ead9b9; }
  .permissions-head { padding-top:0; border:0; }
  .member-permissions>div { background:linear-gradient(140deg,#f8fafd,#f2f5f9); border-color:#e4eaf2; }
  .permission-number { width:29px; height:29px; display:grid; place-items:center; background:#e8eef7; color:#4d7098; border-radius:8px; font-weight:600; }
  .membership-rule { border:1px solid #e1e8f2; background:#f4f7fc; line-height:1.8; }
  .member-promo { color:#88612a; background:#fbf2df; border:1px solid #ead6ad; border-radius:7px; font-weight:600; padding:7px 13px; }
  .membership-plan { position:relative; border:1px solid #dae3ef; padding:26px; background:#fff; transition:border-color .15s,box-shadow .15s; }
  .membership-plan:hover { border-color:#9bb0cc; }
  .membership-plan.selected { border-color:#416a9f; background:linear-gradient(130deg,#f4f8ff,#fff); box-shadow:0 0 0 1px #416a9f,0 7px 24px #284e7b0a; }
  #card-year { background:linear-gradient(135deg,#fffdf8,#fff); }
  #card-year.selected { border-color:#b59257; box-shadow:0 0 0 1px #b59257,0 7px 24px #8a652e0a; }
  .plan-name strong { display:flex; align-items:center; gap:10px; font-weight:650; }
  .plan-crown { width:31px; height:31px; display:grid; place-items:center; background:#edf2f9; color:#50739e; border-radius:9px; }
  .plan-crown svg { width:22px; height:22px; }
  #card-year .plan-crown { color:#a57f3e; background:#f8eedb; }
  #card-year .plan-name input { accent-color:#aa8244; }
  .plan-offer { display:flex; align-items:center; gap:10px; margin-top:24px; font-size:12px; }
  .plan-offer>span:first-child { color:#8b622a; background:#f6ecd8; border-radius:5px; padding:4px 8px; font-weight:600; }
  .plan-offer>span:last-child { color:#956d33; }
  .plan-price { margin:10px 0 5px; }
  .plan-price strong { font-size:47px; color:#223f64; letter-spacing:-1px; }
  #card-year .plan-price strong { color:#936c30; }
  .original-price { color:#8794a5; font-size:13px; margin:5px 0 14px; }
  .original-price s { text-decoration-color:#a5afbb; }
  .plan-description { margin-top:12px; }
  .plan-equivalent { color:#637b98; }
  .membership-checkout { border:1px solid #dfe7f1; background:linear-gradient(110deg,#f3f6fb,#f8fafd); }
  .membership-checkout .member-button { background:linear-gradient(110deg,#284e7c,#3c689e); border-color:#345d8e; box-shadow:0 5px 13px #254a7920; min-width:170px; }
  .activation-card { background:#fafbfd; }
  .membership-page .foot { border-top:1px solid #dfe6ef; line-height:1.9; }
  .membership-page .foot p { margin:7px 0 0; }
  .membership-payment { padding:28px; background:linear-gradient(115deg,#f8fafd,#fff); border-color:#d7e2ef; gap:40px; }
  .payment-overview { min-width:0; }
  .payment-eyebrow { font-size:12px; color:#8f703e; letter-spacing:1px; display:block; margin-bottom:9px; }
  .membership-payment h3 { font-size:21px; color:#223f64; }
  #pay-desc { font-size:14px; color:#637b98; margin:8px 0; }
  .payment-amount { font-size:13px; color:#637b98; margin:18px 0 10px; }
  .payment-amount strong { font-size:33px; color:#223f64; margin-left:8px; font-weight:650; }
  .payment-order { font-size:12px; color:#7a8da5; overflow-wrap:anywhere; }
  #pay-status { font-size:14px; font-weight:600; color:#345d8e; }
  .payment-actions { display:flex; align-items:center; gap:20px; margin-top:18px; }
  .payment-actions .member-link { font-size:13px; }
  .payment-qr-wrap { flex:none; padding:16px; border:1px solid #dde6f1; border-radius:13px; background:white; text-align:center; box-shadow:0 5px 20px #294c7907; }
  .payment-qr-wrap img { display:block; width:190px; height:190px; border:0; border-radius:0; }
  .payment-qr-wrap>span { display:block; font-size:12px; color:#778aa4; margin-top:10px; }
  .membership-success { display:flex; align-items:center; gap:14px; border:1px solid #d7e5d6; background:linear-gradient(110deg,#f3f8ef,#fbfcf8); border-radius:11px; padding:18px; margin-bottom:24px; }
  .payment-check { display:grid; place-items:center; flex:none; width:35px; height:35px; border-radius:50%; color:#fff; background:#567b56; font-size:22px; }
  .membership-success strong { color:#355c3b; font-size:16px; font-weight:650; }
  .membership-success p { color:#5a765f; font-size:13px; margin:4px 0 0; }
  .membership-payment.is-complete { background:#f5f9f4; border-color:#d7e5d6; }
}