.account-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.account-main { width: 100%; max-width: 820px; flex: 1; margin: 0 auto; padding: 40px 24px 48px; }
[data-premium-account].account-panel { position: relative; isolation: isolate; overflow: hidden; margin: 0 auto; padding: clamp(24px, 4vw, 36px); border: 1px solid var(--line); border-radius: 32px; background: var(--paper); box-shadow: 0 24px 70px rgb(0 0 0 / 8%); transition: border-color .35s ease, box-shadow .35s ease; }
.account-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 48%); }
.account-panel[data-membership="premium"] { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); }
.account-heading { text-align: center; margin-bottom: 26px; }
.account-mark { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 18px; border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line)); border-radius: 22px; background: var(--paper); box-shadow: 0 8px 24px color-mix(in srgb, var(--blue) 12%, transparent); }
.account-mark::before { content: ""; position: absolute; inset: -15px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--blue) 17%, transparent), transparent 70%); animation: account-aura 7s ease-in-out infinite; animation-play-state: paused; }
.account-panel.is-animating .account-mark::before { animation-play-state: running; }
.account-mark img { width: 48px; height: 48px; border-radius: 14px; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
[data-premium-account] .account-eyebrow { color: var(--muted); font-size: .875rem; font-weight: 600; letter-spacing: .06em; margin: 0 0 6px; }
.account-heading h1 { margin: 0; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.15; }
[data-premium-account] .account-membership { display: inline-flex; align-items: center; justify-content: center; margin: 16px 0 0; padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--secondary); font-size: .9375rem; font-weight: 600; line-height: 1.5; }
[data-premium-account] .account-membership[data-premium="true"] { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); background: color-mix(in srgb, var(--blue) 9%, var(--paper)); }
[data-premium-account] .account-email { margin: 10px 0 0; color: var(--secondary); font-size: 1rem; overflow-wrap: anywhere; }
[data-premium-account] .account-login { gap: 12px; max-width: 480px; margin: 0 auto; }
.account-login p { margin: 0 0 8px; color: var(--secondary); font-size: 1rem; line-height: 1.65; text-align: center; }
.account-login label { font-size: .9375rem; font-weight: 600; }
[data-premium-account] .account-login input { margin-top: 0; min-height: 50px; padding: 12px 16px; border-radius: 14px; background: var(--soft); transition: background-color .2s ease, border-color .2s ease; }
[data-premium-account] .account-login input:focus { background: var(--paper); border-color: var(--blue); }
.account-login [data-code-field] { display: grid; gap: 12px; animation: account-card-in .36s cubic-bezier(.22, 1, .36, 1) both; }
[data-premium-account] .account-login [name="code"] { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .2em; text-align: center; }
[data-premium-account] .account-login .purchase-checkout { margin: 6px 0 0; }
.account-details { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; }
.account-details > .account-detail { grid-column: span 3; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--soft); transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease; }
.account-details > .account-detail:nth-child(n + 3) { grid-column: span 2; }
.account-details > .account-detail-membership { background: linear-gradient(135deg, var(--accent-soft), var(--soft)); }
.account-details dt { margin-bottom: 8px; color: var(--muted); font-size: .875rem; line-height: 1.4; }
.account-details dd { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.account-details .account-product { display: block; margin-bottom: 4px; color: var(--ink); font-size: 1.25rem; letter-spacing: -.025em; }
.account-detail-membership [data-account-value] { color: var(--secondary); font-size: .9375rem; font-weight: 500; }
.account-usage-track { display: block; height: 5px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--blue) 12%, var(--line)); }
.account-usage-track > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--blue); transform: scaleX(var(--usage-ratio, 0)); transform-origin: left; transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.account-panel[data-membership="premium"] .account-usage-track > span { background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 58%, var(--ink))); }
.account-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.account-actions .purchase-checkout { grid-column: 1 / -1; }
[data-premium-account] .account-actions button { margin: 0; }
.account-secondary-button, .account-text-button { min-height: 46px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); color: var(--ink); font: inherit; font-size: .9375rem; line-height: 1.45; cursor: pointer; }
.account-text-button { border-color: transparent; background: transparent; color: var(--secondary); }
.account-secondary-button:hover, .account-text-button:hover { color: var(--blue); }
[data-premium-account] > [data-new-code] { display: block; margin: 10px auto 0 !important; border-color: transparent !important; background: transparent !important; }
.account-page .account-details, .account-page .account-actions { animation: none; }
.account-page .account-details:not([hidden]) > .account-detail { animation: account-card-in .45s cubic-bezier(.22, 1, .36, 1) backwards; }
.account-detail:nth-child(2) { animation-delay: 35ms !important; }
.account-detail:nth-child(3) { animation-delay: 70ms !important; }
.account-detail:nth-child(4) { animation-delay: 95ms !important; }
.account-detail:nth-child(5) { animation-delay: 120ms !important; }
.account-loading { max-width: 480px; min-height: 230px; margin: 0 auto; padding-top: 16px; text-align: center; }
.account-loading > .ui-loader { --tf-loader-width: 3rem; --tf-loader-height: 2rem; display: block; margin: 0 auto 22px; color: var(--blue); }
.account-loading-line { display: block; height: 58px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(105deg, var(--soft) 30%, color-mix(in srgb, var(--blue) 9%, var(--soft)) 50%, var(--soft) 70%); background-size: 240% 100%; margin-bottom: 12px; animation: tf-surface-load 2s ease-in-out infinite; }
.account-loading-line:nth-child(2) { width: 68%; margin-inline: auto; }
.account-loading p { color: var(--muted); font-size: .9375rem; }
.account-feedback { margin: 18px 0 0; color: var(--secondary); font-size: 1rem; line-height: 1.65; text-align: center; }
.account-feedback:empty { display: none; }
.account-support { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: .9375rem; line-height: 1.7; overflow-wrap: anywhere; }
.account-page [hidden] { display: none !important; }
@keyframes account-card-in { from { opacity: 0; translate: 0 7px; } to { opacity: 1; translate: 0 0; } }
@keyframes account-aura { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
  .account-details > .account-detail:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--blue) 32%, var(--line)); box-shadow: 0 8px 20px rgb(0 0 0 / 5%); }
  .account-mark:hover img { transform: translateY(-2px) rotate(-3deg); }
}
@media (max-width: 600px) {
  .account-main { padding: 26px 18px 36px; }
  [data-premium-account].account-panel { padding: 24px 20px; border-radius: 26px; }
  .account-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .account-details > .account-detail, .account-details > .account-detail:nth-child(n + 3) { grid-column: span 1; padding: 16px; }
  .account-details > .account-detail-device { grid-column: 1 / -1 !important; }
  .account-details .account-product { font-size: 1.125rem; }
}
@media (max-width: 380px) {
  .account-details, .account-actions { grid-template-columns: minmax(0, 1fr); }
  .account-details > .account-detail-device { grid-column: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  .account-details > .account-detail { animation: none !important; translate: none !important; transform: none !important; }
  .account-mark::before, .account-loading-line { animation: none; opacity: 1; }
  .account-mark img, .account-usage-track > span { transition: none; }
  .account-mark:hover img { transform: none; }
}

.account-reminders { display: flex; align-items: center; gap: 22px; padding: 22px; margin: 22px 0; border: 1px solid var(--line); border-radius: 20px; background: var(--soft); animation: account-card-in .3s ease both; text-align: left; }
.account-reminders h2 { margin: 0 0 7px; font-size: 1rem; letter-spacing: -.02em; }
.account-reminders p { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.account-reminder-toggle { flex: 0 0 auto; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font-size: .875rem; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s; }
.account-reminder-toggle[aria-checked="true"] { color: var(--blue); border-color: color-mix(in srgb,var(--blue) 35%,var(--line)); background: color-mix(in srgb,var(--blue) 7%,var(--paper)); }
.account-reminder-toggle:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--blue); }
.account-reminder-toggle:active:not(:disabled) { transform: translateY(0); }
@media(max-width:600px) { .account-reminders { flex-direction: column; align-items: stretch; gap: 16px; } }
@media(prefers-reduced-motion:reduce) { .account-reminders, .account-reminder-toggle { animation: none; transition: none; transform: none; } }