/* Account page specific styles (keeps consistency with base.css) */
.page-hero { padding-block: var(--space-14) var(--space-10); background: linear-gradient(145deg, rgba(140,27,42,0.22), rgba(212,175,55,0.08)) ; border-bottom: 1px solid rgba(255,255,255,0.06); }
.page-hero .hero-actions { display: inline-flex; gap: var(--space-5); margin-top: var(--space-6); }

.section { margin-block: var(--space-12); }

.quick-nav { margin-block: var(--space-10); padding: var(--space-6); border-radius: var(--radius-md); }
.quick-list { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.quick-list a { display: inline-flex; padding: 0.45rem 0.8rem; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-full); color: var(--color-text); background: rgba(255,255,255,0.04); }
.quick-list a:hover { background: rgba(255,255,255,0.08); }

.features .feature-title { font-size: var(--text-xl); margin-bottom: var(--space-2); color: var(--color-accent); font-family: var(--font-serif); }

/* Registration demo */
.step-list { display: grid; gap: var(--space-3); padding-left: 1rem; }
.tips { margin-top: var(--space-6); }
.tips summary { cursor: pointer; }

.pw-strength { margin-block: var(--space-4) var(--space-2); }
.strength-bar { height: 8px; border-radius: var(--radius-full); background: linear-gradient(90deg, rgba(239,68,68,0.6) 0%, rgba(245,158,11,0.6) 25%, rgba(34,197,94,0.6) 75%); filter: saturate(120%); position: relative; overflow: hidden; }
.strength-bar::after { content: ""; position: absolute; inset: 0; width: 0%; background: color-mix(in srgb, var(--color-accent) 75%, transparent); border-radius: var(--radius-full); transition: width var(--duration-300) var(--ease-standard); }
.strength-label { display: block; color: var(--color-text-muted); }

/* Meter fill (controlled via CSS custom property set in JS) */
.strength-bar[data-fill]::after { width: attr(data-fill percentage); }

/* Responsive tweaks */
@media (max-width: 900px) {
  .grid-cols-4 { grid-template-columns: 1fr 1fr; }
  .grid-cols-3 { grid-template-columns: 1fr; }
  .grid-cols-2 { grid-template-columns: 1fr; }
  .page-hero { padding-block: var(--space-12) var(--space-8); }
}