:root { --member-ink:#19364a; --member-soft:#5c7181; --member-line:#d8e2e8; --member-green:#216b54; }
.auth-page,.member-page { margin:0; font-family:Inter,Segoe UI,Arial,sans-serif; color:var(--member-ink); background:#f3f6f7; font-size:16px; line-height:1.55; }
.auth-page *,.member-page *,.member-dialog * { box-sizing:border-box; }
.auth-page [hidden],.member-page [hidden],.member-dialog [hidden] { display:none!important; }
.member-header { display:flex; align-items:center; gap:24px; padding:18px 28px; min-height:76px; background:#102235; color:#eaf2f5; }
.member-header a { color:#d9e9ed; text-decoration:none; }
.member-brand { margin-right:auto; display:flex; align-items:center; }
.member-header button { padding:10px 16px; border:1px solid #6b8294; background:transparent; color:#e6eef4; border-radius:9px; font:inherit; cursor:pointer; }
.member-page a,.auth-card a { color:#21688a; }
.member-page button,.auth-page button,.member-dialog button { font:inherit; cursor:pointer; min-height:44px; }
.member-page button:disabled,.auth-page button:disabled,.member-dialog button:disabled { opacity:.55; cursor:not-allowed; }
.member-page button:focus-visible,.member-page a:focus-visible,.auth-page button:focus-visible,.auth-page a:focus-visible,.member-dialog button:focus-visible { outline:3px solid #d7834f; outline-offset:3px; }
.member-skip { position:absolute; top:-100px; left:16px; padding:10px; background:white; z-index:1500; }.member-skip:focus { top:10px; }
.auth-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,480px); gap:clamp(35px,8vw,140px); max-width:1200px; margin:60px auto; padding:0 30px; align-items:center; }
.member-eyebrow { color:#377c65; text-transform:uppercase; font-size:13px; letter-spacing:.1em; font-weight:700; }
.auth-intro h1 { font-size:clamp(38px,4.4vw,64px); line-height:1.1; letter-spacing:-.04em; margin:20px 0; }
.auth-intro > p:not(.member-eyebrow) { color:var(--member-soft); font-size:20px; max-width:500px; }
.auth-intro ul { padding:0; list-style:none; margin:30px 0; color:#365768; }.auth-intro li { padding:9px 0; }.auth-intro li::before { content:'✓'; color:#28825c; margin-right:12px; }
.auth-intro a { color:#245f7c; }
.auth-card { padding:34px; background:#fff; border:1px solid var(--member-line); border-radius:22px; box-shadow:0 20px 70px #1b384c09; }
.auth-card h2 { font-size:28px; margin:0 0 8px; }.auth-card > p { margin:0 0 22px; }
.auth-providers { display:grid; gap:12px; margin-top:24px; }.auth-providers button { background:#fff; border:1px solid #b9cbd5; border-radius:10px; padding:12px; color:#233e52; font-weight:600; }
.auth-divider { display:flex; align-items:center; gap:14px; font-size:14px; color:#70808c; margin:22px 0; }.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:#dce5e9; }
.auth-card form,.member-dialog form { display:grid; gap:16px; }
.auth-card label,.member-dialog label,.member-form label { display:grid; gap:7px; font-size:15px; color:#375465; font-weight:600; }
.auth-card input,.member-dialog input,.member-dialog select,.member-dialog textarea,.member-form select { border:1px solid #b9cbd6; border-radius:9px; padding:12px; font:inherit; width:100%; min-width:0; background:#fff; color:#243c4b; }
.primary { border:0; border-radius:10px; padding:12px 18px; background:#216b54; color:#fff; font-weight:650; }
.member-page .primary,.member-dialog .primary,.auth-page .primary { background:#216b54; color:white; border-color:#216b54; }
.text-button { border:0; background:transparent; color:#216887; text-align:left; padding:8px 0; }
.muted { color:#617788; font-size:14px; line-height:1.6; }.auth-card .auth-privacy { margin-top:22px; margin-bottom:0; font-size:13px; }
.form-status { color:#9a3f2a; font-size:15px; }.form-status:empty { display:none; }
.member-shell { display:grid; grid-template-columns:215px minmax(0,1fr); min-height:calc(100dvh - 76px); }
.member-nav { display:flex; flex-direction:column; gap:5px; background:#fff; padding:24px 14px; border-right:1px solid var(--member-line); }
.member-nav > span { color:#82949d; font-size:11px; font-weight:700; letter-spacing:.1em; margin:22px 13px 6px; }
.member-nav a { padding:11px 13px; border-radius:9px; font-size:14px; text-decoration:none; color:#4b6575; }
.member-nav a[aria-current=page] { background:#e8f3ee; color:#205a45; font-weight:700; }
.member-main { min-width:0; }.member-content { max-width:1250px; margin:0 auto; padding:40px; }
.member-content h1 { font-size:32px; letter-spacing:-.025em; margin:0; }.member-content > p { color:var(--member-soft); max-width:780px; margin:10px 0 26px; }
.member-content .section-actions { display:flex; gap:12px; flex-wrap:wrap; margin:20px 0; }
.member-content button:not(.text-button),.member-dialog button:not(.text-button) { border:1px solid #bfd0da; border-radius:9px; padding:10px 15px; background:white; color:#31566a; }
.member-content .primary,.member-dialog .primary { background:#216b54!important; color:#fff!important; border-color:#216b54!important; }
.member-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:18px; }
.member-card { background:white; border:1px solid #d5e1e7; border-radius:16px; padding:24px; min-width:0; overflow-wrap:anywhere; }
.member-card h2,.member-card h3 { font-size:20px; margin:0 0 10px; line-height:1.4; }.member-card p { color:#526c7d; font-size:15px; }.member-card .card-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.member-card .member-price { font-size:28px; font-weight:700; color:#254e3b; margin:12px 0; }.member-card .member-label { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#71868e; }
.member-empty { border:1px dashed #b9ccd5; border-radius:18px; padding:45px 28px; background:#f9fcfc; color:#5d7585; text-align:center; }
.member-empty h2 { color:#355566; font-size:23px; }
.member-form { display:grid; gap:22px; max-width:650px; }.member-form button { justify-self:start; }
.wallet-summary { display:flex; gap:24px; flex-wrap:wrap; padding:24px; background:#183e36; color:white; border-radius:16px; margin:24px 0; }.wallet-summary > div { flex:1; min-width:180px; }.wallet-summary strong { display:block; font-size:28px; }.wallet-summary span { font-size:14px; color:#cae1d7; }
.price-history { list-style:none; padding:0; }.price-history li { display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-top:1px solid #e0e8eb; font-size:14px; }




.member-dialog { box-sizing:border-box; font-family:Inter,Segoe UI,Arial,sans-serif; color:#244254; width:min(540px,calc(100vw - 30px)); padding:28px; border:1px solid #c1d1dc; border-radius:18px; box-shadow:0 20px 80px #0004; max-height:90dvh; overflow:auto; overflow-wrap:anywhere; }
.member-dialog::backdrop { background:#0e253b99; }.member-dialog h2 { margin:0 0 8px; font-size:26px; }.member-dialog p { color:#5b7485; font-size:15px; line-height:1.6; }.member-dialog .dialog-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
#member-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#193f33; color:white; border:1px solid #7bb69b; padding:14px 22px; border-radius:12px; max-width:calc(100vw - 32px); z-index:1100; box-shadow:0 8px 28px #0002; font:15px/1.5 Segoe UI,sans-serif; }
@media(min-width:1700px) {  }
@media(max-width:1100px) { .member-shell { grid-template-columns:180px minmax(0,1fr); }.member-nav { padding:18px 8px; }.member-content { padding:28px; } }
@media(max-width:900px) { .member-shell { display:block; }.member-nav { flex-direction:row; overflow-x:auto; padding:10px 14px; border-right:0; border-bottom:1px solid #d7e1e7; }.member-nav > span { display:none; }.member-nav a { white-space:nowrap; flex:none; }.member-header { padding:14px 18px; }.member-header #member-greeting { display:none; } }
@media(max-width:760px) { .auth-layout { grid-template-columns:1fr; margin:24px auto; padding:0 18px; gap:25px; }.auth-intro h1 { font-size:36px; }.auth-intro ul,.auth-intro > p:not(.member-eyebrow) { display:none; }.auth-card { padding:24px; }.member-content { padding:26px 18px; }.member-cards { grid-template-columns:1fr; } }
@media(max-width:560px) { .member-header { gap:12px; }.member-header .member-brand img { width:138px; height:auto; }.auth-page .member-header > a:last-child { font-size:14px; } }
@media(max-width:760px) {  }
