.account-nav { display: inline-flex; align-items: center; gap: .55rem; }
.account-nav a { text-decoration: none; }
.nav-signup, .account-pill { border: 1px solid var(--accent); border-radius: 999px; padding: .55rem .8rem; color: var(--text) !important; }
.commerce-page { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) 0; min-height: 65vh; }
.narrow-page { width: min(850px, calc(100% - 2rem)); }
.commerce-heading { max-width: 780px; margin-bottom: 2rem; }
.commerce-heading h2, .commerce-page > h2, .auth-card h2 { margin: 0; font-size: clamp(2.2rem, 5vw, 4.7rem); line-height: 1; letter-spacing: -.04em; }
.commerce-heading > p:not(.eyebrow), .muted-copy, .access-gate > p { color: var(--muted); }
.auth-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.auth-card, .auth-benefits, .pricing-card, .account-card, .secure-checkout-note, .configuration-banner, .dashboard-billing-panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.auth-card, .auth-benefits { padding: clamp(1.5rem, 4vw, 2.5rem); }
.auth-benefits { position: sticky; top: 110px; }
.auth-benefits h3 { font-size: 1.7rem; line-height: 1.15; }
.commerce-form { display: grid; gap: 1rem; margin-top: 1.6rem; }
.commerce-form label { display: grid; gap: .4rem; color: var(--text); font-weight: 750; }
.commerce-form input {
  width: 100%; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); color: var(--text); padding: .9rem 1rem;
}
.commerce-form input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-row { display: flex; justify-content: flex-end; font-size: .92rem; }
.form-row a, .auth-switch a { color: var(--accent); }
.full-button { width: 100%; min-height: 49px; border: 0; cursor: pointer; }
.full-button:disabled { opacity: .55; cursor: not-allowed; }
.google-button { border-radius: 12px; border: 1px solid var(--border); background: #fff; color: #111; font-weight: 850; padding: .8rem 1rem; cursor: pointer; }
.google-button::before { content: "G"; display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: .65rem; border-radius: 50%; border: 1px solid #ddd; font-weight: 900; }
.auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; margin: 1.3rem 0; color: var(--muted); }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: var(--border); }
.auth-switch { text-align: center; color: var(--muted); margin-top: 1.2rem; }
.feature-list { display: grid; gap: .75rem; padding: 0; list-style: none; color: var(--muted); }
.feature-list li { position: relative; padding-left: 1.5rem; }
.feature-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 900; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.pricing-card { position: relative; display: flex; flex-direction: column; padding: 1.6rem; }
.pricing-card h3 { font-size: 1.9rem; margin: .2rem 0; }
.pricing-card .feature-list { flex: 1; margin: 1.4rem 0; }
.featured-plan { border-color: rgba(244,185,66,.7); transform: translateY(-8px); }
.popular-badge { position: absolute; top: 0; right: 1.2rem; transform: translateY(-50%); background: var(--accent); color: #111; border-radius: 999px; padding: .35rem .7rem; font-size: .75rem; font-weight: 900; }
.secure-checkout-note, .configuration-banner { padding: 1rem 1.2rem; margin-top: 1rem; color: var(--muted); }
.configuration-banner { border-color: rgba(244,185,66,.5); }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.account-card { padding: 1.5rem; }
.account-card h3 { margin-top: 0; }
.status-line { display: flex; align-items: center; gap: .6rem; text-transform: capitalize; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #777; }
.status-dot.active { background: #5ad879; box-shadow: 0 0 0 4px rgba(90,216,121,.14); }
.account-actions, .button-stack { display: flex; flex-wrap: wrap; gap: .75rem; }
.danger-button { border: 1px solid rgba(255,100,100,.5); background: transparent; color: #ff9a9a; border-radius: 12px; padding: .8rem 1rem; font-weight: 800; cursor: pointer; }
.access-gate { text-align: center; display: grid; justify-items: center; align-content: center; }
.access-gate h2 { max-width: 13ch; }
.dashboard-billing-panel { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 1.5rem; margin: 1rem 0 2rem; }
.dashboard-billing-panel h3, .dashboard-billing-panel p { margin: .2rem 0; }
.toast[data-type="error"] { border-color: #ff6666; }
.toast[data-type="info"] { border-color: var(--accent-2); }
code { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: .12rem .35rem; }

@media (max-width: 980px) {
  .auth-page, .pricing-grid { grid-template-columns: 1fr; }
  .auth-benefits { position: static; }
  .featured-plan { transform: none; }
  .account-nav { display: grid; }
}
@media (max-width: 700px) {
  .account-grid { grid-template-columns: 1fr; }
  .dashboard-billing-panel { align-items: flex-start; flex-direction: column; }
}