/* Final layout layer for personal and service pages. Theme and font families
   remain in their existing modules, including the scoped LearningXiao face. */

/* A member sees owned benefits. The normal-account identity never inherits
   the old two-column membership-card grid. */
.membership-page .membership-owned:not(.membership-quota) { display: block; }
.membership-page .membership-owned { margin-bottom: 24px; padding: 28px; }
.membership-page .membership-owned-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .75fr); gap: 28px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.membership-owned-summary .eyebrow { color: var(--muted); font-size: 13px; letter-spacing: 1px; }
.membership-page .membership-owned-summary h2 { margin: 8px 0 6px; font-size: 25px; line-height: 1.5; }
.membership-page .membership-owned-summary .form-note { margin: 0; }
.membership-page .membership-owned-summary .membership-expiry { margin: 0; padding: 18px 22px; }
.membership-page .membership-owned > h3 { margin: 24px 0 16px; }
.membership-page .membership-owned > .member-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 18px 0; }
.membership-page .member-benefits li { align-items: flex-start; min-width: 0; }
.membership-page .member-benefits li span { overflow-wrap: anywhere; }
.membership-page .member-benefits svg { flex-shrink: 0; margin-top: 5px; }
.membership-page .membership-owned > .form-note { line-height: 1.8; white-space: pre-line; }
.membership-page .membership-tier-notice { padding: 12px 16px; border-radius: 8px; background: var(--paper); }
.membership-page .membership-owned .account-actions { align-items: center; margin-top: 24px; padding-top: 22px; gap: 22px; }
.membership-page .membership-owned .account-actions > .text-button { display: inline-flex; align-items: center; gap: 8px; }
.membership-page .membership-owned .membership-sync { margin: 0 0 0 auto; }
.membership-page .membership-plan { padding: 28px; }
.membership-page .membership-plan h3 { margin: 10px 0 14px; font-size: 27px; line-height: 1.4; }
.membership-page .membership-plan .membership-price { font-size: 38px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.membership-page .membership-plan .member-benefits { margin: 18px 0 8px; gap: 12px; }
.membership-page .membership-plan .member-benefits li { font-size: 15px; }
.membership-page .membership-plan .primary { min-height: 48px; font-size: 16px; }
.membership-quota-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 12px; }
.membership-quota-heading h2 { margin: 0; font-size: 23px; }
.membership-quota-heading a { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.membership-page .membership-service-term { margin: 0 0 20px; }
.membership-page .quota-grid { gap: 20px; margin: 0; }
.membership-page .quota-grid > div { padding: 18px 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--green-pale); }
.membership-page .quota-grid h3 { margin: 0 0 8px; font-size: 16px; }
.membership-page .quota-grid p { margin: 0; font-size: 14px; color: var(--muted); }
.membership-page .quota-grid p + p { margin-top: 6px; }
.membership-page .quota-grid strong { font-size: 26px; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Existing profile/security controls retain their DOM and authorization. */
.account-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 24px; }
.account-grid .profile-card, .account-grid .membership-card { padding: 28px; }
.account-grid .profile-heading { gap: 18px; margin-bottom: 24px; }
.account-grid .profile-heading h2 { margin-bottom: 8px; }
.account-grid .profile-fields { margin-top: 24px; }
.account-grid .profile-fields > div { gap: 20px; }
.account-grid .profile-fields > div + div { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.account-grid .membership-card .membership-expiry { margin: 20px 0; }
.account-grid .phone-account, .account-grid .wechat-security { margin-top: 24px; padding-top: 24px; }
.account-shortcuts { flex-wrap: wrap; gap: 14px; padding: 20px 24px; }
.customers-tabs { margin: 4px 0 24px; gap: 28px; }
.customers-panel { padding: 28px; }
.customers-heading { align-items: flex-start; margin-bottom: 20px; }
.customers-table-wrap { overflow-x: auto; }
.customers-table td, .earnings-table td { padding-top: 18px; padding-bottom: 18px; }
.earnings-heading { align-items: flex-start; }
.earnings-cards { gap: 16px; margin-top: 20px; }
.earnings-card { min-width: 0; }
.earnings-notice { padding: 18px 22px; margin-bottom: 24px; }
#purchases-page .purchase-records { gap: 16px; }
#purchases-page .purchase-order-card { border-radius: var(--radius); }

/* Preserve the prompt library's static illustration, source/category filters
   and copy/detail actions; align the controls and cards to the same rhythm. */
.prompt-library .pl-toolbar { gap: 16px; margin: 24px 0; align-items: stretch; }
.prompt-library .pl-search-box { border-radius: 10px; }
.prompt-library .pl-search { height: 48px; padding-inline: 18px; }
.prompt-library .pl-sources { align-items: stretch; border-radius: 10px; }
.prompt-library .pl-source { padding-inline: 20px; }
.prompt-library .pl-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 24px; }
.prompt-library .pl-categories { padding: 16px 10px; border-radius: var(--radius); }
.prompt-library .pl-category { padding: 12px 10px; }
.prompt-library .pl-results-head { margin-bottom: 18px; }
.prompt-library .pl-card-body { padding: 18px; gap: 10px; }
.prompt-library .pl-card-actions { margin-top: 8px; gap: 10px; }
.prompt-library .pl-card-actions .pl-button { min-height: 42px; display: inline-flex; align-items: center; }
.prompt-library .pl-pagination { padding-top: 28px; }

/* The approved authentication layout places the unchanged WeChat panel
   between the original artwork and the existing account form. */
.auth-layout.auth-login-layout { grid-template-columns: 320px 280px minmax(0, 1fr); }
.auth-login-layout > .auth-aside { grid-column: 1; grid-row: 1; }
.auth-login-layout > .wechat-methods { grid-column: 2; grid-row: 1; padding-block: 32px; border-right: 1px solid var(--line); }
.auth-login-layout > .auth-card { grid-column: 3; grid-row: 1; padding: 32px; min-width: 0; }
.auth-card .form-field { margin-bottom: 20px; }
.auth-card .form-field input { border-radius: 8px; }
.auth-card .auth-links { margin-top: 18px; }
.phone-login-methods { gap: 20px; margin-bottom: 24px; }
.wechat-security-row, .phone-account-row { gap: 20px; }

/* Coaching keeps its scoped font, illustrations, benefit-row alignment and
   exact product/quotation/checkout controls. */
.learning-page[data-learning-view="coaching"] .coaching-shortcuts { margin-block: 20px 32px; }
.learning-page[data-learning-view="coaching"] .section-heading { gap: 24px; margin-bottom: 24px; }
.learning-page[data-learning-view="coaching"] #comparison { margin-top: 36px; }
.learning-page[data-learning-view="coaching"] .comparison-footnote { padding: 4px 2px; }