/* finesse · existing video-site identity · member forms only · CSS feedback motion */
.member-page { min-height:100dvh; padding:28px 20px; background:var(--page); color:var(--text); }
.member-page .member-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; width:min(100%,520px); margin:0 auto; color:var(--text-muted); font-size:13px; }
.member-page a:hover { color:var(--accent); }
.member-page main { width:min(100%,520px); margin:5vh auto 28px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }
.member-page header { padding:32px 30px 22px; border-bottom:1px solid var(--line); }
.member-page h1 { position:relative; isolation:isolate; margin:0; padding-top:19px; font-size:26px; letter-spacing:-.035em; line-height:1.5; }
.member-page h1::before { position:absolute; z-index:-1; top:-4px; left:0; max-width:100%; overflow:hidden; content:attr(data-en); white-space:nowrap; font-size:40px; font-weight:900; letter-spacing:-.04em; line-height:1.1; color:var(--text); opacity:.1; mask-image:linear-gradient(to bottom,#000,transparent); pointer-events:none; }
.member-page header p { margin:8px 0 0; color:var(--text-muted); font-size:13px; line-height:1.8; }
.member-page .body { padding:24px 30px 28px; }
.member-page .member-service-notice { margin:0 0 18px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--accent) 5%,var(--surface)); color:var(--text-muted); font-size:12px; line-height:1.8; }
.member-page .tabs { display:flex; gap:6px; margin-bottom:22px; padding:4px; border:1px solid var(--line); border-radius:10px; background:var(--page); }
.member-page button { min-height:44px; padding:11px 15px; border:1px solid transparent; border-radius:8px; background:var(--accent); color:var(--accent-ink); font:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:opacity .15s,border-color .15s; }
.member-page button:hover { opacity:.86; }
.member-page button:disabled { opacity:.5; cursor:wait; }
.member-page .tabs button { flex:1; min-width:0; padding-inline:8px; background:transparent; color:var(--text-muted); }
.member-page .tabs button.active { background:var(--accent); color:var(--accent-ink); }
.member-page label { display:block; margin:16px 0 7px; color:var(--text); font-size:13px; font-weight:600; }
.member-page input:not([type=hidden]) { width:100%; min-width:0; min-height:46px; padding:11px 13px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--page); font:inherit; font-size:16px; }
.member-page input::placeholder { color:var(--text-dim); }
.member-page input:focus-visible,.member-page button:focus-visible,.member-page a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.member-page .primary { width:100%; margin-top:22px; }
.member-page .quiet { padding:8px 0; background:transparent; color:var(--accent); }
.member-page .row { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; }
.member-page .message { min-height:24px; margin:16px 0 0; color:var(--accent); font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.member-page .message.error { color:#ef9b94; }
html.theme-light .member-page .message.error { color:#a62d23; }
/* Neutral light surfaces; keep the shared green action and focus colors. */
html.theme-light .member-page .member-service-notice { background:var(--surface-soft); }
html.theme-light .member-page .profile-card,
html.theme-light .member-page #verification-form { background:var(--surface); }
.member-page .hidden { display:none!important; }
.member-page .profile-card { padding:16px; margin-bottom:20px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); overflow-wrap:anywhere; }
.member-page .profile-card p { margin:6px 0; color:var(--text-muted); font-size:13px; }
.member-page .profile-card strong { color:var(--text); font-size:16px; }
.member-page .section-title { margin:24px 0 4px; font-size:17px; }
.member-page .muted { color:var(--text-muted); font-size:13px; line-height:1.8; }
.member-page .footer { padding:0 30px 24px; color:var(--text-dim); font-size:12px; line-height:1.8; }
.member-page #verification-form { margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.member-page #verification-form p { margin-top:0; }
.member-page .member-return { display:inline-flex; align-items:center; min-height:44px; color:var(--accent); font-size:13px; }
@media(max-width:560px) { .member-page { padding:16px 14px max(16px,env(safe-area-inset-bottom)); } .member-page main { margin:24px auto 16px; border-radius:14px; } .member-page header { padding:24px 20px 18px; } .member-page .body { padding:18px 20px 22px; } .member-page .footer { padding:0 20px 20px; } .member-page h1 { font-size:24px; } .member-page h1::before { font-size:35px; } }
/* Wide portal keeps recovery and verification screens compact. */
.member-portal .member-nav,.member-portal main{width:min(100%,1440px)}
.member-portal main{margin:28px auto}
.member-section-nav{display:flex;gap:24px;padding:18px 30px;border-bottom:1px solid var(--line);font-size:14px}
.member-section-nav a{min-height:32px;display:flex;align-items:center}
.member-workspace{display:grid;grid-template-columns:330px minmax(0,1fr)}
.member-portal .member-account{padding:26px 24px;border-right:1px solid var(--line);background:var(--surface-soft)}
.member-library-content{padding:30px;min-width:0}
.member-library-content .library-section+.library-section{margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}
.member-avatar{display:block;object-fit:cover;border-radius:50%;margin-bottom:12px;background:var(--page)}
.member-portal .footer{padding-top:22px;border-top:1px solid var(--line)}
@media(max-width:1000px){.member-workspace{grid-template-columns:280px minmax(0,1fr)}.member-library-content{padding:24px 20px}}
@media(max-width:820px){.member-workspace{display:flex;flex-direction:column}.member-portal .member-account{order:2;border-right:0;border-top:1px solid var(--line)}.member-library-content{order:1}.member-section-nav{padding:14px 20px;gap:20px;overflow-x:auto}}
@media(prefers-reduced-motion:reduce) { .member-page button { transition:none; } }