/* Account and purchase surfaces share the home editorial palette.
   Form fields, handlers, security widgets and payment state logic stay intact. */
:is(.account-page-shell, .account-dashboard-shell, .account-confirm-shell, .checkout-page, .payment-result-page, .pricing-catalog-page) {
    color: var(--ui-text, #edf3f5);
    font-size: 1rem;
    line-height: 1.7;
}

:is(.account-dashboard-shell, .checkout-page, .pricing-catalog-page) {
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
    padding: 64px 0 88px;
}

:is(.account-page-shell, .account-dashboard-shell, .checkout-page, .payment-result-page, .pricing-catalog-page) :is(.section-kicker, .card-kicker) {
    color: var(--ui-accent, #77e0c4);
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .12em;
}

:is(.auth-copy, .account-dashboard-topbar, .checkout-hero, .license-hero, .payment-result-card) h1,
.account-confirm-shell h1 {
    color: var(--ui-text, #edf3f5);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

/* Sign-in, registration, email/password recovery and confirmation. */
.account-page-shell {
    min-height: 0;
    padding: 64px 24px 88px;
    background: transparent;
}

/* Avoid the legacy main element adding a second set of horizontal gutters. */
.editorial-site .account-page-shell { width: 100%; max-width: none; margin: 0; }

.account-page-shell::before { content: none; }

.account-page-shell .auth-card,
.account-confirm-shell.section-shell {
    width: min(580px, 100%);
    padding: clamp(26px, 4vw, 44px);
    border: 1px solid var(--ui-line, #293b43);
    border-radius: 12px;
    background: var(--ui-surface, #101b23);
    box-shadow: none;
    backdrop-filter: none;
}

.account-confirm-shell.section-shell {
    width: min(680px, calc(100% - 48px));
    margin: 64px auto 88px;
}

.account-confirm-shell h1 { margin: 0 0 24px; }
.account-confirm-shell p { color: var(--ui-muted, #a5b3bd); }
.account-confirm-shell strong { color: var(--ui-text, #edf3f5); overflow-wrap: anywhere; }
.account-confirm-shell form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.account-page-shell .auth-copy { margin-bottom: 28px; }
.account-page-shell .auth-copy p:not(.section-kicker) { margin: 18px 0 0; line-height: 1.7; }
.account-page-shell .auth-form { gap: 20px; }
.account-page-shell .auth-form label { gap: 9px; font-size: .88rem; font-weight: 600; }
.account-page-shell .auth-form label small { color: var(--ui-muted, #a5b3bd); font-weight: 400; line-height: 1.65; }
.account-page-shell .auth-form > .button { width: 100%; }
.account-page-shell :is(.auth-note, .auth-switch) { line-height: 1.7; font-size: .86rem; }
.account-page-shell .auth-switch a { font-weight: 650; text-underline-offset: 4px; }
.account-page-shell .auth-switch a:hover { text-decoration: underline; }
.account-page-shell .auth-divider { margin: 22px 0; color: var(--ui-muted, #a5b3bd); font-weight: 400; }
.account-page-shell .auth-divider::before,
.account-page-shell .auth-divider::after { background: var(--ui-line, #293b43); }
.account-page-shell .google-login-form { margin-bottom: 0; }
.account-page-shell .google-button { box-shadow: none; border-radius: 9px; }
.account-page-shell .form-success {
    margin-bottom: 24px;
    padding: 16px 18px;
    color: #c7f5e7;
    background: #16332b;
    border-color: #386554;
    border-radius: 9px;
    overflow-wrap: anywhere;
}
.account-page-shell .form-error,
.account-page-shell .field-error { color: #ffb0b0; font-weight: 500; }

/* Account navigation and data: keep the active/hidden pane contract. */
.account-dashboard-shell .account-dashboard-topbar {
    padding: 0 0 32px;
    border: 0;
    border-bottom: 1px solid var(--ui-line, #293b43);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.account-dashboard-shell .account-dashboard-topbar p:not(.section-kicker) { max-width: 660px; margin: 18px 0 0; }
.account-dashboard-shell .account-role-actions { gap: 12px; margin-top: 22px; }
.account-dashboard-shell .account-dashboard-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; margin-top: 32px; }
.account-dashboard-shell :is(.account-sidebar, .account-content-panel) {
    border: 1px solid var(--ui-line, #293b43);
    border-radius: 12px;
    background: var(--ui-surface, #101b23);
    box-shadow: none;
    min-width: 0;
}
.account-dashboard-shell .account-sidebar { top: 24px; padding: 20px 12px 12px; }
.account-dashboard-shell .account-sidebar h2 { padding: 0 12px; margin-bottom: 16px; font-size: .8rem; font-weight: 650; letter-spacing: .07em; }
.account-dashboard-shell .account-sidebar nav { gap: 4px; }
.account-dashboard-shell .account-sidebar a { min-height: 44px; border-radius: 8px; font-size: .88rem; font-weight: 500; }
.account-dashboard-shell .account-sidebar a:hover { background: var(--ui-raised, #15232c); border-color: var(--ui-line, #293b43); }
.account-dashboard-shell .account-sidebar a.active { color: #c7f5e7; border-color: #386554; background: #16332b; font-weight: 650; }
.account-dashboard-shell .account-content-panel { padding: 28px; min-height: 440px; }
.account-dashboard-shell .account-panel-heading { margin-bottom: 24px; }
.account-dashboard-shell .account-panel-heading h2 { margin: 8px 0 0; font-size: clamp(1.55rem, 2.6vw, 2rem); line-height: 1.25; letter-spacing: -.025em; }
.account-dashboard-shell .account-heading-with-action { flex-wrap: wrap; align-items: center; gap: 16px; }
.account-dashboard-shell .overview-stat-grid { gap: 14px; }
.account-dashboard-shell :is(.overview-stat-grid article, .account-license-focus > div, .account-device-card, .saved-song-card, .support-ticket-card) {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--ui-line, #293b43);
    border-radius: 12px;
    background: var(--ui-raised, #15232c);
    box-shadow: none;
}
.account-dashboard-shell .account-license-price { background: var(--ui-raised, #15232c) !important; }
.account-dashboard-shell .overview-stat-grid article { min-height: 140px; }
.account-dashboard-shell :is(.overview-stat-grid span, .account-license-focus span) { color: var(--ui-muted, #a5b3bd); font-size: .72rem; font-weight: 600; letter-spacing: .08em; }
.account-dashboard-shell :is(.overview-stat-grid strong, .account-license-focus strong) { color: var(--ui-text, #edf3f5); font-weight: 650; line-height: 1.25; }
.account-dashboard-shell :is(.overview-stat-grid small, .account-license-focus small) { color: var(--ui-muted, #a5b3bd); font-weight: 400; }
.account-dashboard-shell .account-license-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.account-dashboard-shell .account-license-focus strong { font-size: clamp(1.65rem, 3vw, 2.2rem); overflow-wrap: anywhere; }
.account-dashboard-shell .account-data-list { margin: 0; gap: 0; }
.account-dashboard-shell .account-data-list div { padding: 15px 0; border-color: var(--ui-line, #293b43); }
.account-dashboard-shell :is(.account-data-list dd, .account-device-card dd) { font-weight: 500; overflow-wrap: anywhere; }
.account-dashboard-shell .compact-credit { color: var(--ui-accent, #77e0c4); -webkit-text-fill-color: currentColor; background: none; font-weight: 650; }
.account-dashboard-shell .empty-copy { color: var(--ui-muted, #a5b3bd); max-width: 560px; line-height: 1.7; }
.account-dashboard-shell :is(.saved-song-card, .account-device-card) { gap: 20px; }
.account-dashboard-shell :is(.saved-song-card strong, .account-device-card strong, .support-ticket-card header strong) { color: var(--ui-text, #edf3f5); font-weight: 600; overflow-wrap: anywhere; }
.account-dashboard-shell :is(.saved-song-card span, .saved-song-card small, .account-device-card span, .account-device-card small, .support-ticket-card header span) { color: var(--ui-muted, #a5b3bd); line-height: 1.65; }
.account-dashboard-shell .saved-song-actions { flex-wrap: wrap; gap: 10px; }
.account-dashboard-shell .account-device-card dl { min-width: 0; }
.account-dashboard-shell .account-device-card dl div { grid-template-columns: 90px minmax(0, 1fr); }
.account-dashboard-shell .status-pill { border: 1px solid var(--ui-line, #293b43); background: #1a2e35; color: #c7d8db; font-weight: 600; white-space: normal; }
.account-dashboard-shell .support-ticket-card.unread { border-color: #386554; background: #142b27; }
.account-dashboard-shell .support-ticket-card > p { overflow-wrap: anywhere; }
.account-dashboard-shell .support-message { border-left-color: #4c737c; background: #101e27; }
.account-dashboard-shell .support-message.admin { border-left-color: var(--ui-accent, #77e0c4); background: #132b25; }
.account-dashboard-shell .support-message p { overflow-wrap: anywhere; }
.account-dashboard-shell .support-reply-form { gap: 12px; }
.account-dashboard-shell .support-reply-form .button { justify-self: start; }
.account-dashboard-shell .account-security-state { gap: 10px; margin-bottom: 24px; }
.account-dashboard-shell .account-security-form { max-width: 520px; gap: 20px; }

/* Pricing keeps every SKU, regional price and purchase form visible. */
.pricing-catalog-page .license-hero,
.checkout-page .checkout-hero { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 40px; padding: 0 0 36px; border: 0; border-bottom: 1px solid var(--ui-line, #293b43); border-radius: 0; background: transparent; box-shadow: none; }
.pricing-catalog-page .license-hero h1 { font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1.16; }
.pricing-catalog-page .license-hero p,
.checkout-page .checkout-hero p { color: var(--ui-muted, #a5b3bd); font-size: 1rem; line-height: 1.7; }
.pricing-catalog-page :is(.license-status-card, .annual-pricing-card, .plugin-pricing-card, .license-next-card, .license-flow, .turnstile-checkout-panel),
.checkout-page :is(.checkout-summary-card, .checkout-plan-card, .checkout-method-card, .checkout-payment-options, .manual-payment-card) {
    border: 1px solid var(--ui-line, #293b43);
    border-radius: 12px;
    background: var(--ui-surface, #101b23);
    box-shadow: none;
}
.pricing-catalog-page .pricing-region-card { min-height: 0; padding: 24px; gap: 12px; }
.pricing-catalog-page .pricing-region-card strong { font-size: 1.45rem; font-weight: 650; line-height: 1.35; }
.pricing-catalog-page .pricing-region-card small { color: var(--ui-muted, #a5b3bd); line-height: 1.65; }
.pricing-catalog-page .pricing-section { padding-top: 48px; }
.pricing-catalog-page .pricing-section-heading { margin-bottom: 28px; }
.pricing-catalog-page :is(.pricing-section-heading, .license-next-card, .license-flow) h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.25; letter-spacing: -.025em; }
.pricing-catalog-page .annual-plan-grid { gap: 20px; }
.pricing-catalog-page .annual-pricing-card { min-height: 360px; padding: 26px; }
.pricing-catalog-page .annual-pricing-card.featured { border-color: #52816f; background: #122720; box-shadow: none; }
.pricing-catalog-page .pricing-recommended { position: static; align-self: flex-start; margin-bottom: 18px; padding: 5px 9px; border-radius: 6px; font-weight: 650; letter-spacing: .05em; }
.pricing-catalog-page .pricing-product-identity { padding-right: 0; gap: 14px; min-width: 0; }
.pricing-catalog-page :is(.pricing-product-identity img, .plugin-pricing-card > img) { border-color: var(--ui-line, #293b43); border-radius: 10px; background: #0d161d; }
.pricing-catalog-page .pricing-product-identity h3 { font-size: 1.22rem; line-height: 1.35; overflow-wrap: anywhere; }
.pricing-catalog-page :is(.pricing-product-identity small, .plugin-pricing-copy small) { color: var(--ui-muted, #a5b3bd); }
.pricing-catalog-page .annual-pricing-card > p { margin: 22px 0 28px; font-size: .94rem; line-height: 1.7; }
.pricing-catalog-page .pricing-amount { flex-wrap: wrap; gap: 8px; }
.pricing-catalog-page .pricing-amount strong { font-size: clamp(1.9rem, 3vw, 2.45rem); font-weight: 650; line-height: 1.25; }
.pricing-catalog-page .pricing-amount span { color: var(--ui-muted, #a5b3bd); font-weight: 500; }
.pricing-catalog-page .perpetual-plugin-grid { gap: 16px; }
.pricing-catalog-page .plugin-pricing-card { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; padding: 20px; }
.pricing-catalog-page .plugin-pricing-card > img { width: 52px; height: 52px; }
.pricing-catalog-page .plugin-pricing-copy h3 { font-size: 1.02rem; line-height: 1.4; }
.pricing-catalog-page .plugin-pricing-copy > span { color: var(--ui-muted, #a5b3bd); font-weight: 400; }
.pricing-catalog-page .plugin-pricing-action { flex-direction: column; align-items: flex-end; gap: 8px; }
.pricing-catalog-page .plugin-pricing-action > strong { min-width: 0; font-size: 1.1rem; font-weight: 650; }
.pricing-catalog-page .pricing-payment-card { margin-top: 48px; padding: 28px; gap: 32px; }
.pricing-catalog-page .license-flow { padding: 28px; gap: 28px; }
.pricing-catalog-page .license-flow-steps { gap: 12px; }
.pricing-catalog-page .license-flow-steps article { background: var(--ui-raised, #15232c); border-color: var(--ui-line, #293b43); border-radius: 9px; padding: 16px; }
.pricing-catalog-page .license-flow-steps strong { color: var(--ui-accent, #77e0c4); background: #16332b; border: 1px solid #386554; font-weight: 600; }
.pricing-catalog-page .license-payment-logos .payment-logo-chip { background: var(--ui-raised, #15232c); border-color: var(--ui-line, #293b43); box-shadow: none; border-radius: 9px; }
.pricing-catalog-page .turnstile-checkout-panel { padding: 20px; }

/* Checkout separates the order summary from the available payment actions. */
.checkout-page .checkout-summary-card { padding: 24px; gap: 12px; }
.checkout-page .checkout-summary-card strong { font-size: 1.5rem; line-height: 1.3; overflow-wrap: anywhere; }
.checkout-page .checkout-summary-card small { color: var(--ui-muted, #a5b3bd); }
.checkout-page .checkout-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.checkout-page :is(.checkout-plan-card, .checkout-method-card, .checkout-payment-options) { padding: 28px; }
.checkout-page :is(.checkout-plan-card, .checkout-method-card, .checkout-payment-options, .manual-payment-copy) h2 { font-size: clamp(1.55rem, 2.5vw, 2rem); line-height: 1.3; letter-spacing: -.025em; }
.checkout-page .checkout-price-pair { gap: 12px; margin: 24px 0; }
.checkout-page .checkout-price-pair div { padding: 18px; background: var(--ui-raised, #15232c); border-color: var(--ui-line, #293b43); border-radius: 9px; }
.checkout-page .checkout-price-pair strong { font-size: 2rem; line-height: 1.25; font-weight: 650; }
.checkout-page .checkout-price-pair small,
.checkout-page .checkout-feature-list { color: var(--ui-muted, #a5b3bd); line-height: 1.7; }
.checkout-page .checkout-method { min-width: 0; padding: 20px; border-color: var(--ui-line, #293b43); border-radius: 9px; background: var(--ui-raised, #15232c); box-shadow: none; }
.checkout-page .checkout-method.primary-method { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; min-height: 0; }
.checkout-page .checkout-provider-mark { width: 44px; height: 44px; border-radius: 9px; box-shadow: none; }
.checkout-page .checkout-provider-mark.manual-mark img { width: 44px; height: 44px; }
.checkout-page .checkout-method-copy p { font-size: .9rem; line-height: 1.65; color: var(--ui-muted, #a5b3bd); }
.checkout-page .checkout-method-copy small { color: var(--ui-muted, #a5b3bd); line-height: 1.6; }
.checkout-page .checkout-method-title strong { font-weight: 650; }
.checkout-page .checkout-method-title span { color: #c7d8db; border-color: var(--ui-line, #293b43); background: #1a2e35; font-weight: 600; letter-spacing: .03em; }
.checkout-page .checkout-method > .checkout-pay-button { grid-column: 2; justify-self: stretch; min-width: 0; width: 100%; white-space: normal; line-height: 1.4; }
.checkout-page .checkout-pay-button > :is(span:not(.status-pill), strong, em) { color: inherit; }
.checkout-page .disabled-method { opacity: .65; background: transparent; }
.checkout-page .checkout-payment-options > form { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.checkout-page .checkout-payment-options :is(.turnstile-shell, .checkout-alert) { flex-basis: 100%; }
.checkout-page .checkout-payment-options .status-pill { border: 1px solid #6e5935; border-radius: 5px; background: #342b1e; color: #f4d29b; font-size: .65rem; }
.checkout-page .manual-payment-card { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; padding: 32px; }
.checkout-page .manual-payment-copy p { color: var(--ui-muted, #a5b3bd); }
.checkout-page .manual-payment-details { gap: 0; }
.checkout-page .manual-payment-details div { grid-template-columns: 150px minmax(0, 1fr); padding: 14px 0; background: transparent; border: 0; border-bottom: 1px solid var(--ui-line, #293b43); border-radius: 0; }
.checkout-page .manual-payment-details dt { color: var(--ui-muted, #a5b3bd); font-size: .86rem; font-weight: 500; }
.checkout-page .manual-payment-details dd { color: var(--ui-text, #edf3f5); font-weight: 650; font-variant-numeric: tabular-nums; }
.checkout-page .manual-payment-details div:last-child dd { color: var(--ui-accent, #77e0c4); }
.checkout-page .manual-qr-card { padding: 20px; border-color: var(--ui-line, #293b43); border-radius: 12px; background: var(--ui-raised, #15232c); align-self: start; }
.checkout-page .manual-qr-card img { border-radius: 6px; padding: 8px; background: #fff; }
.checkout-page .manual-qr-card :is(strong, span) { overflow-wrap: anywhere; text-align: center; }
.checkout-page .manual-qr-card strong { color: var(--ui-text, #edf3f5); font-weight: 650; }
.checkout-page .manual-qr-card span { color: var(--ui-accent, #77e0c4); }
:is(.checkout-page, .pricing-catalog-page) .checkout-alert { padding: 16px 20px; border: 1px solid #546272; border-radius: 9px; background: #17232e; box-shadow: none; color: #d5e2ea; }
:is(.checkout-page, .pricing-catalog-page) .checkout-alert.error { background: #311e24; color: #ffc3c3; border-color: #795052; }

/* Payment outcomes retain distinct success, waiting and failure semantics. */
.payment-result-page { width: min(860px, calc(100% - 64px)); padding: 64px 0 88px; }
.payment-result-page .payment-result-card { padding: clamp(28px, 5vw, 52px); border-radius: 12px; border-color: var(--ui-line, #293b43); background: var(--ui-surface, #101b23); box-shadow: none; }
.payment-result-page .payment-result-card.paid { border-color: #426e5a; }
.payment-result-page .payment-result-card:is(.failed, .cancelled, .expired) { border-color: #795052; }
.payment-result-page .payment-result-symbol { width: 72px; height: 72px; margin-bottom: 24px; font-size: 34px; box-shadow: none; color: #c7d8db; border-color: #47616c; background: #192b35; }
.payment-result-page .payment-result-symbol.paid { color: var(--ui-accent, #77e0c4); border-color: #426e5a; background: #16332b; }
.payment-result-page .payment-result-symbol:is(.pending, .processing, .awaitingpayment, .awaitingconfirmation, .awaitingmanualreview) { color: #f4d29b; border-color: #6e5935; background: #342b1e; }
.payment-result-page .payment-result-symbol:is(.failed, .cancelled, .expired, .unavailable) { color: #ffb0b0; border-color: #795052; background: #311e24; }
.payment-result-page .payment-result-lead { max-width: 640px; color: var(--ui-muted, #a5b3bd); font-size: 1rem; line-height: 1.7; }
.payment-result-page .payment-result-refresh-note { border-radius: 9px; color: #e2c99f; border-color: #6e5935; background: #2b251d; font-size: .88rem; text-align: left; }
.payment-result-page .payment-result-pulse { flex: 0 0 8px; width: 8px; height: 8px; background: #f4d29b; box-shadow: none; animation: none; }
.payment-result-page .payment-result-spinner { border-color: #6e5935; border-top-color: #f4d29b; }
.payment-result-page .payment-result-details { margin-top: 32px; border-color: var(--ui-line, #293b43); background: var(--ui-line, #293b43); border-radius: 9px; }
.payment-result-page .payment-result-details div { padding: 18px 20px; background: var(--ui-raised, #15232c); }
.payment-result-page .payment-result-details dt { color: var(--ui-muted, #a5b3bd); font-weight: 500; letter-spacing: .05em; }
.payment-result-page .payment-result-details dd { color: var(--ui-text, #edf3f5); font-size: .92rem; font-weight: 500; }
.payment-result-page .payment-status-pill { color: #c7d8db; border-color: #47616c; background: #192b35; white-space: normal; }
.payment-result-page .payment-status-pill.paid { color: #c7f5e7; border-color: #426e5a; background: #16332b; }
.payment-result-page .payment-status-pill:is(.pending, .processing, .awaitingpayment, .awaitingconfirmation, .awaitingmanualreview) { color: #f4d29b; border-color: #6e5935; background: #342b1e; }
.payment-result-page .payment-status-pill:is(.failed, .cancelled, .expired) { color: #ffb0b0; border-color: #795052; background: #311e24; }
.payment-result-page .payment-result-security-note { color: var(--ui-muted, #a5b3bd); font-size: .8rem; line-height: 1.65; }

@media (max-width: 1000px) {
    .checkout-page .checkout-grid { grid-template-columns: 1fr; }
    .account-dashboard-shell .account-dashboard-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 20px; }
    .account-dashboard-shell .overview-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-dashboard-shell .account-license-focus { grid-template-columns: 1fr; }
    .pricing-catalog-page .pricing-product-identity { padding-right: 0; }
    .pricing-catalog-page .annual-pricing-card { min-height: 0; }
}

@media (max-width: 900px) {
    :is(.account-dashboard-shell, .checkout-page, .pricing-catalog-page) { width: calc(100% - 40px); padding-top: 48px; }
    .account-dashboard-shell .account-dashboard-layout { grid-template-columns: 1fr; }
    .account-dashboard-shell .account-sidebar { position: static; padding: 16px; }
    .account-dashboard-shell .account-sidebar nav { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
    .account-dashboard-shell .account-sidebar a { flex: 0 0 auto; white-space: nowrap; }
    .account-dashboard-shell .account-sidebar h2 { padding-left: 4px; }
    .pricing-catalog-page .license-hero,
    .checkout-page .checkout-hero { grid-template-columns: 1fr; gap: 24px; }
    .pricing-catalog-page .pricing-region-card { max-width: 480px; }
    .pricing-catalog-page .perpetual-plugin-grid { grid-template-columns: 1fr; }
    .pricing-catalog-page .plugin-pricing-action { flex-direction: row; align-items: center; }
    .checkout-page .manual-payment-card { grid-template-columns: 1fr; gap: 28px; }
    .checkout-page .manual-qr-card { width: min(340px, 100%); justify-self: center; }
}

@media (max-width: 600px) {
    :is(.account-dashboard-shell, .checkout-page, .pricing-catalog-page, .payment-result-page) { width: calc(100% - 32px); padding: 36px 0 56px; }
    .account-page-shell { padding: 36px 16px 56px; }
    .account-page-shell .auth-card { padding: 26px 22px; }
    .account-confirm-shell.section-shell { width: calc(100% - 32px); margin: 36px auto 56px; padding: 26px 22px; }
    :is(.auth-copy, .account-dashboard-topbar, .checkout-hero, .license-hero, .payment-result-card) h1,
    .pricing-catalog-page .license-hero h1,
    .account-confirm-shell h1 { font-size: 2rem; line-height: 1.2; }
    .account-confirm-shell form .button { width: 100%; }
    .account-dashboard-shell .account-dashboard-layout { gap: 20px; margin-top: 24px; }
    .account-dashboard-shell .account-content-panel { padding: 20px; }
    .account-dashboard-shell .overview-stat-grid { gap: 10px; }
    .account-dashboard-shell .overview-stat-grid article { min-height: 126px; padding: 15px; }
    .account-dashboard-shell .overview-stat-grid strong { font-size: 1.4rem; }
    .account-dashboard-shell :is(.saved-song-card, .account-device-card) { grid-template-columns: 1fr; padding: 18px; }
    .account-dashboard-shell .saved-song-actions { justify-content: flex-start; }
    .account-dashboard-shell .support-ticket-card header { flex-wrap: wrap; gap: 12px; }
    .account-dashboard-shell .account-data-list div { grid-template-columns: 1fr; gap: 5px; }
    .pricing-catalog-page .pricing-section { padding-top: 36px; }
    .pricing-catalog-page .annual-pricing-card { padding: 24px; }
    .pricing-catalog-page .plugin-pricing-card { grid-template-columns: 48px minmax(0, 1fr); padding: 18px; }
    .pricing-catalog-page .plugin-pricing-card > img { width: 48px; height: 48px; }
    .pricing-catalog-page .plugin-pricing-action { grid-column: 1 / -1; justify-content: space-between; }
    .pricing-catalog-page :is(.pricing-payment-card, .license-flow) { padding: 22px; }
    .pricing-catalog-page .license-flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .checkout-page :is(.checkout-plan-card, .checkout-method-card, .checkout-payment-options, .manual-payment-card) { padding: 22px; }
    .checkout-page .checkout-price-pair { grid-template-columns: 1fr; }
    .checkout-page .checkout-method { padding: 16px; }
    .checkout-page .checkout-method > .checkout-pay-button { grid-column: 1 / -1; }
    .checkout-page .manual-payment-details div { grid-template-columns: 1fr; gap: 5px; }
    .checkout-page .manual-payment-actions { gap: 14px; }
    .checkout-page .manual-payment-actions .checkout-pay-button { width: 100%; white-space: normal; }
    .checkout-page .checkout-payment-options > form { align-items: stretch; flex-direction: column; }
    .payment-result-page .payment-result-card { padding: 28px 22px; }
    .payment-result-page .payment-result-details { grid-template-columns: 1fr; }
}

/* Flexible Turnstile needs 300px; reserve that space at a 320px viewport. */
@media (max-width: 420px) {
    .account-page-shell.account-with-challenge { padding-right: 0; padding-left: 0; }
    .account-with-challenge .auth-card { padding-right: 9px; padding-left: 9px; }
    .checkout-page .checkout-payment-options.checkout-with-challenge,
    .pricing-catalog-page .turnstile-checkout-panel {
        width: calc(100% + 32px);
        margin-right: -16px;
        margin-left: -16px;
        padding-right: 9px;
        padding-left: 9px;
    }
}

/* My Account workspace v2. This namespaced layer intentionally overrides the
   legacy account layout without changing shared public-site components. */
.account-dashboard-shell {
    --account-bg: #0c151c;
    --account-surface: #101c24;
    --account-raised: #15252e;
    --account-soft: #192b34;
    --account-line: #2a3c46;
    --account-line-strong: #3b565e;
    --account-accent: #77e0c4;
    --account-accent-soft: #17362f;
    --account-text: #edf5f5;
    --account-muted: #98aab2;
    width: min(1320px, calc(100% - 64px));
    margin: 0 auto;
    padding: 48px 0 88px;
    color: var(--account-text);
}

.account-dashboard-shell :is(h1, h2, h3, p) { margin-top: 0; }
.account-dashboard-shell :is(.section-kicker, .card-kicker) { display: block; margin: 0 0 7px; }

.account-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid #775057;
    border-radius: 12px;
    background: #2b1d22;
}
.account-alert-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #9b6570;
    border-radius: 50%;
    color: #ffd4d8;
    font-weight: 800;
}
.account-alert strong { color: #ffd4d8; }
.account-alert p { margin: 2px 0 0; color: #d8adb3; font-size: .86rem; }
.account-alert .button { min-height: 40px !important; padding: 8px 14px !important; }

.account-profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr);
    gap: 24px 36px;
    padding: 28px;
    border: 1px solid var(--account-line);
    border-radius: 16px;
    background:
        radial-gradient(circle at 8% 0%, rgba(119, 224, 196, .08), transparent 30%),
        var(--account-surface);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .15);
}
.account-profile-main { display: flex; min-width: 0; align-items: center; gap: 20px; }
.account-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    place-items: center;
    border: 1px solid #467064;
    border-radius: 18px;
    color: #d7fff4;
    background: linear-gradient(145deg, #244d42, #17322d);
    font-size: 1.45rem;
    font-weight: 750;
    letter-spacing: -.04em;
    box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}
.account-avatar.small { width: 40px; height: 40px; border-radius: 11px; font-size: .88rem; }
.account-profile-copy { min-width: 0; }
.account-profile-copy .section-kicker { color: var(--account-accent); }
.account-profile-copy h1 {
    margin: 0;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
}
.account-profile-email { margin: 7px 0 0; color: var(--account-muted); font-size: .93rem; overflow-wrap: anywhere; }
.account-profile-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.account-status-badge {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 7px;
    padding: 4px 9px;
    border: 1px solid var(--account-line-strong);
    border-radius: 999px;
    color: #c3d0d4;
    background: #17242c;
    font-size: .69rem;
    font-weight: 680;
    line-height: 1.25;
    white-space: nowrap;
}
.account-status-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.account-status-badge.success { color: #a9efd9; border-color: #376558; background: #15342d; }
.account-status-badge.scheduled { color: #f2d49e; border-color: #675737; background: #30291c; }
.account-status-badge.inactive { color: #b8c2c7; border-color: #3b4a51; background: #192229; }

.account-hero-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-self: stretch;
    border: 1px solid var(--account-line);
    border-radius: 12px;
    background: #0c171e;
}
.account-hero-summary > div { min-width: 0; padding: 17px 15px; }
.account-hero-summary > div + div { border-left: 1px solid var(--account-line); }
.account-hero-summary :is(span, strong, small) { display: block; overflow-wrap: anywhere; }
.account-hero-summary span { color: var(--account-muted); font-size: .67rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.account-hero-summary strong { margin-top: 8px; color: var(--account-text); font-size: 1.12rem; line-height: 1.25; }
.account-hero-summary small { margin-top: 4px; color: #84979f; font-size: .72rem; }
.account-role-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 10px; padding-top: 20px; border-top: 1px solid var(--account-line); }
.account-role-actions .button { min-height: 42px !important; padding: 9px 15px !important; font-size: .82rem !important; }

.account-dashboard-shell .account-dashboard-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    margin-top: 22px;
}
.account-dashboard-shell :is(.account-sidebar, .account-content-panel) {
    min-width: 0;
    border: 1px solid var(--account-line);
    border-radius: 14px;
    background: var(--account-surface);
    box-shadow: none;
}
.account-dashboard-shell .account-sidebar {
    position: sticky;
    top: 24px;
    padding: 14px;
}
.account-sidebar-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 4px 4px 15px;
    border-bottom: 1px solid var(--account-line);
}
.account-sidebar-identity > div { min-width: 0; }
.account-sidebar-identity :is(strong, small) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-sidebar-identity strong { font-size: .85rem; }
.account-sidebar-identity small { margin-top: 3px; color: var(--account-muted); font-size: .68rem; }
.account-dashboard-shell .account-sidebar nav { display: grid; gap: 3px; margin-top: 12px; }
.account-nav-group {
    padding: 14px 10px 6px;
    color: #748790;
    font-size: .61rem;
    font-weight: 760;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.account-dashboard-shell .account-sidebar a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    min-height: 42px;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #9fb0b7;
    font-size: .79rem;
    font-weight: 560;
    text-decoration: none;
}
.account-dashboard-shell .account-sidebar a:hover { color: var(--account-text); border-color: var(--account-line); background: var(--account-raised); }
.account-dashboard-shell .account-sidebar a.active {
    color: #d9fff5;
    border-color: #38675b;
    background: var(--account-accent-soft);
    box-shadow: inset 3px 0 var(--account-accent);
    font-weight: 680;
}
.account-nav-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; background: #17262e; }
.account-sidebar a.active .account-nav-icon { color: var(--account-accent); background: #20463c; }
.account-nav-icon svg,
.account-device-icon svg,
.account-library-mark svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.account-nav-count {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    padding: 0 6px;
    border: 1px solid var(--account-line);
    border-radius: 999px;
    color: #8fa0a7;
    background: #101b22;
    font-size: .62rem;
}
.account-nav-count.unread { color: #d9fff5; border-color: #3e7567; background: #1d4b40; }

.account-dashboard-shell .account-content-panel { min-height: 620px; padding: clamp(24px, 3vw, 36px); }
.account-section-pane { display: none; }
.account-section-pane.active { display: block; }
.account-panel-heading { margin-bottom: 28px; }
.account-panel-heading h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: -.04em;
}
.account-panel-heading > p,
.account-panel-heading > div > p { max-width: 680px; margin: 10px 0 0; color: var(--account-muted); font-size: .91rem; line-height: 1.65; }
.account-heading-with-action { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.account-heading-with-action > div { min-width: 0; }
.account-heading-with-action > :is(.button, form, .account-status-badge) { flex: 0 0 auto; }
.account-heading-with-action form { margin: 0; }

.account-overview-grid { display: grid; grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr); gap: 16px; }
.account-overview-spotlight {
    display: flex;
    min-height: 246px;
    flex-direction: column;
    justify-content: space-between;
    padding: 25px;
    border: 1px solid #3c6d61;
    border-radius: 13px;
    background:
        linear-gradient(155deg, rgba(119, 224, 196, .13), transparent 60%),
        #12251f;
}
.account-overview-spotlight > div > span,
.account-license-plan > span,
.account-credit-hero > div > span { color: #9bb0b4; font-size: .69rem; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; }
.account-overview-spotlight strong,
.account-license-plan strong { display: block; margin-top: 15px; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.05; overflow-wrap: anywhere; }
.account-overview-spotlight p { margin: 10px 0 0; color: #9fb3b7; font-size: .84rem; }
.account-inline-link { display: inline-flex; align-items: center; gap: 8px; color: var(--account-accent); font-size: .84rem; font-weight: 680; text-decoration: none; }
.account-inline-link:hover { color: #b8f5e5; }
.account-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-metric-grid article {
    min-width: 0;
    min-height: 117px;
    padding: 18px;
    border: 1px solid var(--account-line);
    border-radius: 12px;
    background: var(--account-raised);
}
.account-metric-grid :is(span, strong, small) { display: block; }
.account-metric-grid span { color: var(--account-muted); font-size: .68rem; font-weight: 680; letter-spacing: .07em; text-transform: uppercase; }
.account-metric-grid strong { margin-top: 9px; font-size: 1.55rem; line-height: 1.15; }
.account-metric-grid small { margin-top: 5px; color: #8799a1; font-size: .72rem; }

.account-overview-lower { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.account-subsection { min-width: 0; padding: 21px; border: 1px solid var(--account-line); border-radius: 12px; background: #0e1920; }
.account-subsection-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 30px 0 14px; }
.account-subsection > .account-subsection-heading { margin-top: 0; }
.account-subsection-heading h3 { margin: 0; font-size: 1.1rem; letter-spacing: -.02em; }
.account-subsection-heading > :is(a, span) { color: var(--account-muted); font-size: .75rem; text-decoration: none; }
.account-subsection-heading > a:hover { color: var(--account-accent); }
.account-quick-grid { display: grid; gap: 8px; }
.account-quick-grid a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    align-items: center;
    padding: 12px 13px;
    border: 1px solid var(--account-line);
    border-radius: 9px;
    color: var(--account-text);
    background: var(--account-raised);
    text-decoration: none;
}
.account-quick-grid a:hover { border-color: #46645f; background: #192c33; }
.account-quick-grid a span { font-size: .82rem; font-weight: 650; }
.account-quick-grid a small { grid-column: 1; color: var(--account-muted); font-size: .69rem; }
.account-quick-grid a b { grid-column: 2; grid-row: 1 / span 2; color: var(--account-accent); font-weight: 500; }

.account-compact-empty { padding: 25px 14px; color: var(--account-muted); font-size: .82rem; text-align: center; }
.account-activity-list { overflow: hidden; border: 1px solid var(--account-line); border-radius: 11px; background: #0d181f; }
.account-activity-list article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 15px 17px;
}
.account-activity-list article + article { border-top: 1px solid var(--account-line); }
.account-activity-list article.unread { background: rgba(119, 224, 196, .045); }
.account-activity-dot { width: 8px; height: 8px; border-radius: 50%; background: #54666d; }
.account-activity-list article.unread .account-activity-dot { background: var(--account-accent); box-shadow: 0 0 0 4px rgba(119, 224, 196, .1); }
.account-activity-list :is(strong, p, small, time) { display: block; min-width: 0; }
.account-activity-list strong { font-size: .82rem; line-height: 1.4; }
.account-activity-list p { margin: 3px 0 0; color: var(--account-muted); font-size: .74rem; line-height: 1.45; }
.account-activity-list small { margin-top: 4px; color: #7f939b; font-size: .68rem; }
.account-activity-list time { color: #7f939b; font-size: .68rem; white-space: nowrap; }
.account-activity-list.compact { border: 0; background: transparent; }
.account-activity-list.compact article { padding: 10px 2px; }

.account-license-summary {
    display: grid;
    grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr);
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid #3c6d61;
    border-radius: 13px;
    background: #11231e;
}
.account-license-plan { padding: 24px; background: linear-gradient(145deg, rgba(119, 224, 196, .1), transparent 70%); }
.account-license-plan p { margin: 15px 0 0; }
.account-license-summary > dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-left: 1px solid #36584f; }
.account-license-summary > dl > div { min-width: 0; padding: 22px 18px; }
.account-license-summary > dl > div + div { border-left: 1px solid #36584f; }
.account-license-summary dt { color: #90a5a9; font-size: .68rem; font-weight: 650; text-transform: uppercase; }
.account-license-summary dd { margin: 8px 0 0; font-size: .86rem; font-weight: 650; overflow-wrap: anywhere; }
.account-subsection-heading.product-heading { margin-top: 0; }

.account-product-license-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-product-license-card { min-width: 0; padding: 17px; border: 1px solid var(--account-line); border-radius: 11px; background: var(--account-raised); }
.account-product-license-card > header { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; align-items: center; }
.account-product-mark {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #38555d;
    border-radius: 9px;
    color: var(--account-accent);
    background: #0b171e;
    font-size: .68rem;
    font-weight: 800;
}
.account-product-license-card header div { min-width: 0; }
.account-product-license-card header :is(strong, small) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-product-license-card header strong { font-size: .88rem; }
.account-product-license-card header small { margin-top: 2px; color: var(--account-muted); font-size: .66rem; }
.account-product-license-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--account-line); }
.account-product-license-card dl div { min-width: 0; }
.account-product-license-card dt { color: var(--account-muted); font-size: .63rem; }
.account-product-license-card dd { margin: 4px 0 0; font-size: .73rem; font-weight: 620; overflow-wrap: anywhere; }
.account-card-note { margin: 12px 0 0; color: #d5bd8f; font-size: .7rem; }

.account-empty-state {
    display: grid;
    justify-items: center;
    min-height: 280px;
    align-content: center;
    padding: 34px;
    border: 1px dashed var(--account-line-strong);
    border-radius: 12px;
    background: #0d181f;
    text-align: center;
}
.account-empty-state.compact { min-height: 190px; }
.account-empty-state > span:first-child { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--account-line-strong); border-radius: 12px; color: var(--account-accent); background: var(--account-raised); font-size: 1.1rem; }
.account-empty-state h3 { margin: 14px 0 0; font-size: 1.02rem; }
.account-empty-state p { max-width: 510px; margin: 7px 0 0; color: var(--account-muted); font-size: .82rem; line-height: 1.6; }
.account-empty-state .button { margin-top: 18px; }

.modern-list { overflow: hidden; gap: 0 !important; border: 1px solid var(--account-line); border-radius: 12px; background: #0d181f; }
.modern-list > * { border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.modern-list > * + * { border-top: 1px solid var(--account-line) !important; }
.account-dashboard-shell .account-device-card {
    display: grid;
    grid-template-columns: 44px minmax(180px, 1fr) minmax(330px, .9fr);
    gap: 16px;
    align-items: center;
    padding: 18px;
}
.account-device-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--account-line); border-radius: 10px; color: var(--account-accent); background: var(--account-raised); }
.account-device-identity { min-width: 0; }
.account-device-identity :is(strong, span, small) { display: block; overflow-wrap: anywhere; }
.account-device-identity strong { font-size: .9rem; }
.account-device-identity span { margin-top: 3px; color: var(--account-muted); font-size: .74rem; }
.account-device-identity small { margin-top: 4px; color: #71858e; font-size: .64rem; }
.account-dashboard-shell .account-device-card dl { display: grid; gap: 7px; margin: 0; }
.account-dashboard-shell .account-device-card dl div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; align-items: center; }
.account-dashboard-shell .account-device-card dt { color: var(--account-muted); font-size: .67rem; }
.account-dashboard-shell .account-device-card dd { margin: 0; font-size: .72rem; font-weight: 600; overflow-wrap: anywhere; }

.account-credit-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    border: 1px solid #3c6d61;
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(119, 224, 196, .12), transparent 62%), #11231e;
}
.account-credit-hero strong { display: block; margin-top: 8px; font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1; }
.account-credit-hero small { display: block; margin-top: 8px; color: #9fb3b7; }
.account-ai-usage-grid { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 34px; }
.account-ai-usage-grid > div + div { padding-left: 34px; border-left: 1px solid rgba(119, 224, 196, .18); }
.account-ai-usage-note { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 13px 16px; border: 1px solid var(--account-line); border-radius: 10px; background: #0d181f; }
.account-ai-usage-note p { margin: 0; color: var(--account-muted); font-size: .76rem; line-height: 1.5; }
.account-ai-usage-note strong { color: var(--account-text); }
.account-transaction-sign { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; font-weight: 750; }
.account-transaction-sign.positive { color: #a9efd9; background: #17372f; }
.account-transaction-sign.negative { color: #f0c1c5; background: #342126; }
.account-transaction-value { text-align: right; }
.account-transaction-value > strong { color: var(--account-accent); }

.account-library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-library-grid > article {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--account-line);
    border-radius: 11px;
    background: var(--account-raised);
}
.account-library-mark,
.account-producer-avatar { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #3a5961; border-radius: 10px; color: var(--account-accent); background: #0c1820; font-size: .82rem; font-weight: 750; }
.account-library-grid > article > div:not(.saved-song-actions) { min-width: 0; }
.account-library-grid :is(strong, span, small) { display: block; }
.account-library-grid strong { overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.account-library-grid span:not(.account-producer-avatar):not(.account-library-mark) { margin-top: 3px; color: #b6c4c8; font-size: .72rem; }
.account-library-grid small { margin-top: 4px; color: var(--account-muted); font-size: .66rem; }
.account-producer-avatar { border-radius: 50%; }

.account-list-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.account-list-summary article { min-width: 0; padding: 15px; border: 1px solid var(--account-line); border-radius: 10px; background: var(--account-raised); }
.account-list-summary :is(span, strong, small) { display: block; }
.account-list-summary span { overflow: hidden; color: var(--account-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.account-list-summary strong { margin-top: 8px; font-size: 1.35rem; }
.account-list-summary small { margin-top: 3px; color: #7f929a; font-size: .63rem; }
.account-dashboard-shell .saved-song-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 15px 17px; }
.account-song-index { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--account-line); border-radius: 9px; color: var(--account-accent); background: var(--account-raised); font-size: 1rem; }
.account-song-copy { min-width: 0; }
.account-song-copy :is(strong, span, small) { display: block; }
.account-song-copy strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.account-song-copy span { margin-top: 3px; color: #b0c0c5; font-size: .72rem; }
.account-song-copy small { margin-top: 3px; color: var(--account-muted); font-size: .67rem; }
.saved-song-actions { display: flex; align-items: center; gap: 7px; }
.saved-song-actions form { margin: 0; }
#page-content .button.compact { min-height: 38px; padding: 7px 12px; font-size: .75rem; }
#page-content .button.danger { color: #f3b4bb; border-color: #69434a; background: #2b1d22; }
#page-content .button.danger:hover { border-color: #925963; background: #382229; }

.account-dashboard-shell .support-ticket-card { padding: 0; }
.support-ticket-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 19px;
    list-style: none;
}
.support-ticket-card > summary::-webkit-details-marker { display: none; }
.support-ticket-card > summary::after { content: '+'; flex: 0 0 auto; color: var(--account-accent); font-size: 1.2rem; }
.support-ticket-card[open] > summary::after { content: '−'; }
.support-ticket-card > summary > div:first-child { min-width: 0; flex: 1; }
.support-ticket-card > summary > div:last-child { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.support-ticket-card > summary :is(strong, span, time) { display: block; }
.support-ticket-card > summary strong { overflow: hidden; font-size: .87rem; text-overflow: ellipsis; white-space: nowrap; }
.support-ticket-card > summary > div:first-child span { margin-top: 3px; color: var(--account-muted); font-size: .69rem; }
.support-ticket-card > summary time { color: #7f929a; font-size: .67rem; }
.support-ticket-body { padding: 18px 19px 20px; border-top: 1px solid var(--account-line); background: #101c23; }
.support-message-thread { display: grid; gap: 9px; margin: 0 0 16px; }
.account-dashboard-shell .support-message { padding: 12px 14px; border: 0; border-left: 3px solid #4c737c; border-radius: 7px; background: #0c181f; }
.account-dashboard-shell .support-message.admin { border-left-color: var(--account-accent); background: #132923; }
.support-message header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.support-message header strong { font-size: .75rem; }
.support-message header small { color: #789098; font-size: .64rem; }
.support-message p { margin: 7px 0 0; color: #c4d1d4; font-size: .79rem; line-height: 1.6; }
.support-reply-form { display: grid; gap: 10px; }
.support-reply-form label { display: grid; gap: 6px; color: var(--account-muted); font-size: .72rem; }
.support-reply-form textarea { width: 100%; resize: vertical; }
.support-reply-form .button { justify-self: start; }

.notifications-list .account-notification-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.notifications-list article { align-items: start; padding-block: 18px; }
.notifications-list .account-activity-dot { margin-top: 6px; }

.account-security-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); gap: 18px; align-items: start; }
.account-security-methods { overflow: hidden; border: 1px solid var(--account-line); border-radius: 12px; background: #0d181f; }
.account-security-methods article { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 17px; }
.account-security-methods article + article { border-top: 1px solid var(--account-line); }
.account-security-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--account-line); border-radius: 10px; color: var(--account-accent); background: var(--account-raised); font-size: .8rem; font-weight: 750; }
.account-security-methods article > div { min-width: 0; }
.account-security-methods strong { display: block; font-size: .84rem; }
.account-security-methods p { margin: 3px 0 0; color: var(--account-muted); font-size: .7rem; }
.account-dashboard-shell .account-security-form { display: grid; max-width: none; gap: 15px; margin: 0; padding: 22px; border: 1px solid var(--account-line); border-radius: 12px; background: var(--account-raised); }
.account-form-heading h3 { margin: 0; font-size: 1.05rem; }
.account-form-heading p { margin: 6px 0 0; color: var(--account-muted); font-size: .74rem; line-height: 1.55; }
.account-security-form label { display: grid; gap: 7px; color: #becdd1; font-size: .75rem; font-weight: 620; }
.account-security-form .button { justify-self: start; }

@media (max-width: 1120px) {
    .account-profile-hero { grid-template-columns: minmax(0, 1fr) 340px; }
    .account-dashboard-shell .account-dashboard-layout { grid-template-columns: 225px minmax(0, 1fr); }
    .account-overview-grid,
    .account-overview-lower,
    .account-license-summary,
    .account-security-layout { grid-template-columns: 1fr; }
    .account-license-summary > dl { border-top: 1px solid #36584f; border-left: 0; }
    .account-product-license-grid { grid-template-columns: 1fr; }
    .account-library-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .account-dashboard-shell { width: calc(100% - 40px); padding-top: 40px; }
    .account-profile-hero { grid-template-columns: 1fr; }
    .account-role-actions { grid-column: 1; }
    .account-dashboard-shell .account-dashboard-layout { grid-template-columns: 1fr; }
    .account-dashboard-shell .account-sidebar { position: static; }
    .account-sidebar-identity { display: none; }
    .account-dashboard-shell .account-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
    .account-nav-group { grid-column: 1 / -1; padding-top: 10px; }
    .account-dashboard-shell .account-sidebar a { min-width: 0; }
    .account-license-summary > dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .account-dashboard-shell .account-device-card { grid-template-columns: 44px minmax(0, 1fr); }
    .account-dashboard-shell .account-device-card dl { grid-column: 2; }
}

@media (max-width: 640px) {
    .account-dashboard-shell { width: calc(100% - 28px); padding: 28px 0 56px; }
    .account-alert { grid-template-columns: auto minmax(0, 1fr); }
    .account-alert .button { grid-column: 1 / -1; width: 100%; }
    .account-profile-hero { gap: 20px; padding: 20px; }
    .account-profile-main { align-items: flex-start; }
    .account-avatar { width: 56px; height: 56px; border-radius: 14px; font-size: 1.1rem; }
    .account-profile-copy h1 { font-size: 1.8rem; }
    .account-hero-summary { grid-template-columns: 1fr; }
    .account-hero-summary > div + div { border-top: 1px solid var(--account-line); border-left: 0; }
    .account-role-actions .button { width: 100%; }
    .account-dashboard-shell .account-sidebar { padding: 10px; }
    .account-dashboard-shell .account-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .account-dashboard-shell .account-sidebar a { grid-template-columns: 26px minmax(0, 1fr) auto; padding-inline: 7px; font-size: .73rem; }
    .account-nav-icon { width: 26px; height: 26px; }
    .account-dashboard-shell .account-content-panel { min-height: 500px; padding: 21px 18px; }
    .account-heading-with-action { align-items: stretch; flex-direction: column; }
    .account-heading-with-action > :is(.button, form) { width: 100%; }
    .account-heading-with-action > form .button,
    .account-heading-with-action > .button { width: 100%; }
    .account-overview-grid { grid-template-columns: 1fr; }
    .account-overview-spotlight { min-height: 200px; padding: 21px; }
    .account-metric-grid { gap: 9px; }
    .account-metric-grid article { min-height: 105px; padding: 14px; }
    .account-metric-grid strong { font-size: 1.3rem; }
    .account-overview-lower { grid-template-columns: 1fr; }
    .account-subsection { padding: 17px; }
    .account-license-summary > dl { grid-template-columns: 1fr; }
    .account-license-summary > dl > div { padding: 13px 20px; }
    .account-license-summary > dl > div + div { border-top: 1px solid #36584f; border-left: 0; }
    .account-product-license-card > header { grid-template-columns: 40px minmax(0, 1fr); }
    .account-product-license-card > header > .account-status-badge { grid-column: 1 / -1; justify-self: start; }
    .account-product-license-card dl { grid-template-columns: 1fr; }
    .account-product-license-card dl div { display: flex; justify-content: space-between; gap: 14px; }
    .account-product-license-card dd { margin-top: 0; text-align: right; }
    .account-dashboard-shell .account-device-card { grid-template-columns: 40px minmax(0, 1fr); padding: 15px; }
    .account-device-icon { width: 40px; height: 40px; }
    .account-dashboard-shell .account-device-card dl { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--account-line); }
    .account-credit-hero { align-items: stretch; flex-direction: column; }
    .account-credit-hero .button { width: 100%; }
    .account-ai-usage-grid { gap: 18px; }
    .account-ai-usage-grid > div + div { padding-left: 18px; }
    .account-activity-list article { grid-template-columns: auto minmax(0, 1fr); }
    .account-activity-list article > :is(time, .account-transaction-value) { grid-column: 2; justify-self: start; text-align: left; }
    .account-library-grid > article { grid-template-columns: 42px minmax(0, 1fr); }
    .account-library-grid > article > .saved-song-actions { grid-column: 1 / -1; }
    .account-list-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-dashboard-shell .saved-song-card { grid-template-columns: 36px minmax(0, 1fr); }
    .account-song-index { width: 36px; height: 36px; }
    .account-dashboard-shell .saved-song-card .saved-song-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .support-ticket-card > summary { align-items: flex-start; }
    .support-ticket-card > summary > div:last-child { align-items: flex-end; flex-direction: column; }
    .support-ticket-card > summary time { white-space: nowrap; }
    .account-security-methods article { grid-template-columns: 40px minmax(0, 1fr); }
    .account-security-methods .account-status-badge { grid-column: 2; justify-self: start; }
    .account-security-form .button { width: 100%; }
}

@media (max-width: 420px) {
    .account-ai-usage-grid { grid-template-columns: 1fr; }
    .account-ai-usage-grid > div + div { padding: 16px 0 0; border-top: 1px solid rgba(119, 224, 196, .18); border-left: 0; }
    .account-ai-usage-note { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 420px) {
    .account-dashboard-shell { width: calc(100% - 20px); }
    .account-profile-hero { padding: 17px; }
    .account-profile-main { gap: 13px; }
    .account-dashboard-shell .account-sidebar nav { grid-template-columns: 1fr; }
    .account-nav-group { grid-column: 1; }
    .account-dashboard-shell .account-sidebar a { font-size: .79rem; }
    .account-metric-grid { grid-template-columns: 1fr; }
    .account-metric-grid article { min-height: 96px; }
    .account-list-summary { grid-template-columns: 1fr; }
    .saved-song-actions { width: 100%; }
    .saved-song-actions .button { flex: 1; }
}