.account-page { background:var(--brand-coastal-white); min-height:100vh; display:flex; flex-direction:column; }
.account-nav { display:flex; align-items:center; justify-content:space-between; padding:22px clamp(20px,5vw,80px); border-bottom:1px solid var(--border-subtle); background:#fff; gap:20px; }
.account-brand img { width:105px; max-height:46px; object-fit:contain; }
.account-nav nav { display:flex; gap:26px; align-items:center; font-size:13px; }
.account-nav nav a:hover,.account-nav button:hover { color:var(--text-blue); }
.account-page #app { flex:1; width:100%; }
.account-footer { background:var(--brand-deep-ocean); --focus-ring:var(--brand-sun-yellow); display:flex; justify-content:space-between; gap:20px; padding:28px clamp(20px,5vw,80px); border-top:1px solid var(--border-subtle); font-size:11px; color:var(--brand-coastal-white); letter-spacing:.12em; }
.auth-layout { max-width:1080px; margin:72px auto; padding:0 28px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.auth-story { padding-top:36px; }
.auth-story h1 { font-size:clamp(36px,5vw,60px); line-height:1.35; margin:24px 0; }
.auth-story h1 em { color:var(--text-blue); font-style:normal; }
.auth-story p { color:var(--ink-3); max-width:380px; }
.story-rule { width:48px; height:3px; background:var(--brand-ocean-blue); margin:32px 0; }
.story-note { font-size:12px; letter-spacing:.1em; }
.account-card { padding:36px; background:#fff; border:1px solid var(--border-subtle); border-radius:4px; }
.account-card h2 { font-size:28px; margin-bottom:12px; }
.account-card .intro { color:var(--ink-3); font-size:14px; margin-bottom:26px; }
.account-form { display:grid; gap:20px; }
.account-form label { display:grid; gap:7px; font-size:13px; }
.account-form input,.account-form select { min-width:0; width:100%; padding:12px 14px; border:1px solid var(--border-strong); border-radius:3px; color:var(--ink); background:#fff; font:inherit; }
.account-form input:focus,.account-form select:focus { outline:2px solid var(--teal-deep); outline-offset:2px; }
.account-form small { font-size:11px; color:var(--ink-3); }
.account-button { display:inline-flex; align-items:center; justify-content:center; padding:13px 22px; border-radius:3px; font-size:14px; background:var(--action-primary); color:#fff; min-height:46px; }
.account-button:hover { background:var(--action-primary-hover); }
.account-button.secondary { background:#fff; border:1px solid var(--brand-sky-blue); color:var(--brand-deep-ocean); }
.account-button.secondary:hover { background:var(--surface-sky); }
.account-button:active { background:var(--action-primary-active); }
.account-button.secondary:active { background:var(--brand-sky-blue); color:var(--brand-charcoal); }
.account-button:disabled { background:var(--action-disabled); color:var(--text-muted); border-color:var(--border-strong); cursor:wait; }
.account-button.full { width:100%; }
.form-divider { display:flex; align-items:center; gap:14px; margin:23px 0; color:var(--ink-3); font-size:11px; }
.form-divider::before,.form-divider::after { content:''; height:1px; background:var(--border-subtle); flex:1; }
.form-links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:22px; font-size:12px; color:var(--text-blue); }
.form-message { margin:16px 0; padding:12px; background:#fff1ed; border-left:3px solid var(--coral); font-size:13px; overflow-wrap:anywhere; }
.form-message.success { background:var(--surface-sky); border-color:var(--teal-deep); }
[hidden] { display:none!important; }
.loading { padding:80px 24px; text-align:center; color:var(--ink-3); }
.member-layout { max-width:1160px; padding:48px 28px 76px; margin:auto; }
.member-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:36px; }
.member-heading h1 { font-size:36px; margin-top:10px; line-height:1.3; overflow-wrap:anywhere; }
.member-heading > button { flex-shrink:0; white-space:nowrap; padding:12px 16px; }
.member-grid { display:grid; grid-template-columns:230px 1fr; gap:28px; }
.member-sidebar { display:grid; align-content:start; gap:10px; font-size:14px; }
.member-sidebar a,.member-sidebar button { padding:13px 16px; text-align:left; border-radius:3px; }
.member-sidebar .selected { background:var(--surface-sky); }
.member-sidebar .note { padding:10px 16px; font-size:12px; color:var(--ink-3); }
.member-panels { display:grid; gap:22px; min-width:0; }
.member-panels h2 { font-size:23px; }
.member-panels p { color:var(--ink-3); }
.identity { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding-bottom:20px; border-bottom:1px solid var(--border-subtle); margin-bottom:24px; overflow-wrap:anywhere; }
.badge { display:inline-block; font-size:11px; padding:4px 9px; border:1px solid var(--border-subtle); color:var(--brand-deep-ocean); background:var(--surface-sky); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature { padding:23px; border:1px solid var(--border-subtle); background:#fff; }
.feature .number { font:12px var(--mono); color:var(--text-blue); }
.feature h3 { font-size:19px; margin:16px 0 12px; }
.feature p { font-size:13px; }
.feature .soon { font-size:11px; display:inline-block; margin-top:15px; color:var(--ink-3); }
.article-layout { max-width:800px; margin:64px auto; padding:0 24px; }
.article-layout h1 { font-size:44px; margin:24px 0; }
.article-layout article { line-height:1.9; }
.article-layout article p,.article-layout article h2 { margin:24px 0; }
.article-summary { color:var(--ink-3); margin-bottom:32px; }
.account-entry { white-space:nowrap; font-size:12px; }
@media(max-width:800px) { .auth-layout { grid-template-columns:1fr; gap:28px; margin:28px auto 48px; max-width:550px; } .auth-story { padding-top:0; } .auth-story h1 { font-size:32px; margin:14px 0; } .story-rule,.story-note { display:none; } .member-grid { grid-template-columns:1fr; } .member-sidebar { display:flex; flex-wrap:wrap; gap:5px; } .member-sidebar .note { display:none; } .feature-grid { grid-template-columns:1fr; } .account-card { padding:25px; } .account-nav nav { gap:16px; } .account-nav nav a:first-child,.account-nav nav a:nth-child(2) { display:none; } .account-footer { background:var(--brand-deep-ocean); --focus-ring:var(--brand-sun-yellow); font-size:9px; } .member-heading h1 { font-size:28px; } }