.account-body { min-height: 100dvh; display: flex; flex-direction: column; }
.account-header,.account-footer { width: min(1320px, 100%); margin-inline: auto; padding: 28px 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.account-brand { margin: 0; }
.account-language { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--g-muted); }
.account-language select { background: var(--g-frost); border: 0; padding: 10px; border-radius: 10px; color: var(--g-ink); box-shadow: var(--g-control-depth); }
.account-layout { flex: 1; width: min(1224px,100%); margin: auto; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: center; gap: clamp(32px,6vw,96px); padding: 48px; }
.account-story { position: relative; isolation: isolate; }
.account-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; font-weight: 650; color: var(--g-accent-text); margin: 0 0 18px; }
.account-story h1 { font-size: clamp(48px,5.5vw,80px); line-height: 1.02; letter-spacing: -.06em; font-weight: 700; }
.account-accent { color: var(--g-accent-text); }
.account-intro { font-size: 18px; line-height: 1.55; max-width: 400px; margin-top: 24px; color: var(--g-muted); }
.account-local { display: flex; align-items: center; gap: 10px; margin-top: 160px; font-size: 12px; color: var(--g-muted); }
.account-local-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g-accent); flex: 0 0 auto; }
.account-sculpture { position: absolute; z-index: -1; width: 270px; height: 270px; right: -10px; bottom: 0; transform: rotate(-14deg); opacity: .65; pointer-events: none; }
.account-sculpture span { display: block; width: 100%; height: 100%; border-radius: 70px; border: 44px solid #b4d3cc80; border-right-color: transparent; background: linear-gradient(135deg,#ffffff20,#d9cef640); box-shadow: 8px 16px 45px #1e625918, inset 6px 6px 16px #ffffffa0; }
.account-card { padding: clamp(24px,3vw,40px); background: linear-gradient(145deg,var(--g-shine),transparent 80%),var(--g-frost); border-radius: 24px; box-shadow: var(--g-elevation); backdrop-filter: blur(28px); min-width: 0; }
.account-tabs { display: flex; gap: 5px; background: var(--g-soft); padding: 5px; border-radius: 12px; margin-bottom: 32px; }
.account-tabs button { flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--g-muted); font-size: 13px; font-weight: 600; }
.account-tabs button[aria-selected="true"] { background: var(--g-dense-frost); color: var(--g-ink); box-shadow: var(--g-control-depth); }
.account-card h2 { font-size: 27px; line-height: 1.2; letter-spacing: -.8px; }
.account-description { color: var(--g-muted); margin-top: 12px; line-height: 1.6; }
.account-form { display: grid; gap: 20px; margin-top: 28px; }
.account-form .field-label { margin-bottom: 8px; }
.account-form .input { min-height: 48px; font-size: 16px; }
.account-password-wrap { position: relative; }
.account-password-wrap input { padding-right: 72px; }
.account-password-toggle { position: absolute; right: 4px; top: 4px; min-height: 40px; padding: 4px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--g-accent-text); font-size: 12px; }
.account-submit { min-height: 48px; font-size: 15px; margin-top: 4px; }
.account-notice { background: var(--g-tint); padding: 14px 16px; font-size: 13px; line-height: 1.6; border-radius: 12px; margin-top: 22px; }
.account-notice[data-kind="error"] { color: var(--danger); background: var(--danger-soft); }
.account-notice[data-kind="success"] { color: var(--success); background: var(--success-soft); }
.account-notice[hidden] { display: none; }
.account-back { display: inline-block; margin-top: 28px; font-size: 13px; text-decoration: none; }
.account-footer { color: var(--g-muted); font-size: 12px; }
.account-footer a { text-decoration: none; }
.account-dashboard { width: min(1040px,100%); margin: 24px auto 64px; padding: 24px 48px; }
.account-dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.account-dashboard-heading h1 { font-size: clamp(32px,5vw,52px); overflow-wrap: anywhere; }
.account-dashboard-heading .account-description { overflow-wrap: anywhere; }
.account-membership { display: grid; gap: 18px; }
.account-membership p { color: var(--g-muted); }
.account-membership .button { justify-self: start; }
.account-requests { margin-top: 24px; }
.account-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.account-request { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--g-row); border-radius: 12px; padding: 18px; margin-top: 16px; }
.account-request strong,.account-request span { display: block; overflow-wrap: anywhere; }
.account-request span { color: var(--g-muted); font-size: 13px; }
.account-empty { margin-top: 24px; color: var(--g-muted); }
.account-approve-dialog { width: min(460px,calc(100% - 32px)); background: var(--g-panel); color: var(--g-ink); border: 0; border-radius: 20px; padding: 28px; box-shadow: var(--g-elevation); }
.account-approve-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(6px); }
.account-approve-dialog h2 { margin-bottom: 16px; }
.account-approve-dialog p { overflow-wrap: anywhere; }
.account-dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
@media (prefers-reduced-transparency: reduce) { .account-card { background: var(--g-panel); backdrop-filter: none; } .account-sculpture { display: none; } }
@media (max-width: 800px) { .account-layout { grid-template-columns: 1fr; max-width: 570px; padding: 24px; gap: 32px; } .account-story h1 { font-size: 48px; } .account-intro { font-size: 16px; } .account-local { margin-top: 22px; } .account-sculpture { display: none; } .account-header,.account-footer { padding: 24px; } .account-header .brand strong { font-size: 24px; } .account-dashboard { padding: 16px 24px; } .account-dashboard-heading { align-items: flex-start; flex-direction: column; } }
@media (max-width: 400px) { .account-layout,.account-dashboard { padding-inline: 16px; } .account-card { padding: 22px; } .account-language>span { position: absolute; width: 1px; height: 1px; overflow: hidden; } .account-story h1 { font-size: 43px; } .account-request { align-items: flex-start; flex-direction: column; } }