:root {
  color-scheme: dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; background:var(--bg-body); background-image:var(--site-bg-texture); color:var(--text-primary); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; font-size:var(--type-section); line-height:1.48; text-rendering:optimizeLegibility; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
.page, header, main, section, div { min-width:0; }
.page { min-height:100vh; display:block; overflow-x:hidden; }
.ghost { min-height:var(--size-scale-px-44); min-width:0; width:100%; padding:0 var(--space-scale-px-14); border:1px solid var(--border); border-radius:var(--radius-ui-sm); background:var(--bg-surface); color:var(--text-primary); font-size:var(--type-card-title); font-weight:780; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; white-space:nowrap; }
.ghost:hover, .secondary:hover { border-color:var(--visual-border-medium); background:var(--bg-surface-hover); }
.input:focus { outline:none; border-color:var(--accent); box-shadow:var(--shadow-search-active); }
main { margin:0 auto; padding:var(--space-scale-px-16) 0 var(--space-scale-px-32); display:grid; gap:var(--space-gap-cards); }
/* Card rhythm, the same steps as the detail page: one group 4px, between groups 8px, between
   blocks 12px (the card gap). Phones follow the fluid --space-ui-* scale. */
:root { --vip-intra:var(--space-ui-1); --vip-item:var(--space-ui-2); }
main > .public-browse-header { margin-bottom:0; }
.intro { display:grid; }
/* /vip opens with the account and plans; the sub-pages keep their one-line task description. */
.page-vip .intro { display:none; }
.lead { margin:0; color:var(--text-secondary); font-size:var(--type-lead); line-height:1.45; max-width:none; width:100%; text-wrap:var(--text-wrap-copy); text-align:var(--text-align-copy); }
.payment-delay-note { border:1px solid var(--border); border-radius:var(--radius-ui-md); background:var(--bg-surface); color:var(--text-secondary); padding:var(--space-card-pad); font-size:var(--type-card-copy); line-height:1.45; text-wrap:var(--text-wrap-copy); text-align:var(--text-align-copy); }
.is-hidden { display:none !important; }
.utility-links { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-gap-cards); }
.tool-card { border:1px solid var(--border); border-radius:var(--radius-ui-md); background:var(--bg-card); padding:var(--space-card-pad); display:grid; gap:var(--vip-intra); align-content:start; }
.tool-kicker { color:var(--text-secondary); font-size:var(--type-label); font-weight:var(--weight-label); letter-spacing:.045em; text-transform:uppercase; line-height:1.2; }
.tool-title { color:var(--text-primary); font-size:var(--type-card-title); font-weight:var(--weight-card-title); line-height:1.25; }
.tool-copy { color:var(--text-secondary); font-size:var(--type-card-copy); line-height:1.45; margin:0; text-wrap:var(--text-wrap-copy); text-align:var(--text-align-copy); }
.tool-action { margin-top:calc(var(--vip-item) - var(--vip-intra)); justify-self:start; color:var(--accent); font-size:var(--type-control); font-weight:var(--weight-card-title); line-height:var(--leading-meta); display:inline-flex; align-items:center; }
.tool-action::after { content:"›"; content:"›" / ""; margin-left:var(--vip-intra); }
.tool-card:hover { border-color:var(--visual-border-medium); background:var(--bg-surface); }
/* The cards touch the edges of main, which clips overflow on phones: draw the ring inside. */
.tool-card:focus-visible { outline-offset:calc(-1 * var(--focus-ring-width)); }
.referral-panel { border:1px solid var(--border); border-radius:var(--radius-ui-md); background:var(--bg-card); padding:var(--space-card-pad); display:grid; gap:var(--space-gap-cards); }
.referral-panel > div:first-child { display:grid; gap:var(--vip-intra); }
.referral-grid { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-gap-controls); align-items:center; }
.referral-link { min-height:var(--size-scale-px-44); border:1px solid var(--border); border-radius:var(--radius-ui-sm); background:var(--visual-plan-surface); color:var(--text-primary); padding:var(--space-scale-px-9) var(--space-scale-px-10); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:var(--type-card-copy); line-height:1.45; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rules-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-gap-cards); }
.rule-card { display:grid; gap:var(--vip-intra); align-content:start; }
.rule-title { color:var(--text-primary); font-size:var(--type-card-title); font-weight:var(--weight-card-title); line-height:1.3; }
.rule-copy { color:var(--text-secondary); font-size:var(--type-card-copy); line-height:1.45; margin:0; text-wrap:var(--text-wrap-copy); text-align:var(--text-align-copy); }
.support-reply-alert[hidden] { display:none; }
.support-reply-alert { border:1px solid var(--visual-plan-border); border-radius:var(--radius-ui-md); background:var(--visual-plan-highlight); padding:var(--space-card-pad); display:grid; gap:var(--vip-item); }
.support-reply-top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-gap-controls); }
.support-reply-title { color:var(--text-primary); font-size:var(--type-card-title); font-weight:var(--weight-card-title); line-height:1.25; }
.support-reply-controls { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-gap-controls); flex:0 0 auto; }
.support-reply-pill { min-height:var(--size-scale-px-24); border:1px solid var(--visual-plan-border); border-radius:var(--radius-pill); padding:var(--space-scale-px-3) var(--space-scale-px-8); color:var(--accent); font-size:var(--type-meta); font-weight:var(--weight-label); white-space:nowrap; }
.support-reply-dismiss { min-height:var(--size-scale-px-32); padding:0 var(--space-scale-px-10); border:1px solid var(--border); border-radius:var(--radius-ui-sm); background:var(--visual-plan-glass); color:var(--text-secondary); font-size:var(--type-control); font-weight:var(--weight-control); cursor:pointer; }
.support-reply-dismiss:hover { border-color:var(--visual-border-medium); color:var(--text-primary); background:var(--bg-surface-hover); }
.support-reply-meta { color:var(--text-secondary); font-size:var(--type-meta); line-height:1.35; }
.support-reply-action { justify-self:stretch; min-height:var(--size-scale-px-44); padding:0 var(--space-scale-px-12); border:1px solid var(--border); border-radius:var(--radius-ui-sm); background:var(--bg-surface); color:var(--text-primary); font-size:var(--type-control); font-weight:var(--weight-control); display:inline-flex; align-items:center; justify-content:center; }
.support-reply-action:hover { border-color:var(--visual-border-medium); background:var(--bg-surface-hover); }
.member-task-stack { width:100%; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-gap-cards); align-items:stretch; }
/* Collapsing the whole stack to one column is only correct when the ledger or support
   detail itself is open (that keeps their existing full-row, no-hole layout). The
   upgrade/plans detail auto-opens for every non-active member on plain load, and it
   already gets its own full row via #upgradeSection below, so it must NOT also force
   ledger+support out of the 2-column grid -- otherwise they each render as a mostly
   empty full-width row. See WORKLOG 2026-09-28 "side by side sections". */
.member-task-stack:has(#ledgerDetail:not([hidden])),
.member-task-stack:has(#supportDetail:not([hidden])) { grid-template-columns:1fr; }
/* upgradeSection is the only stack member whose detail (the plans grid) needs full
   width; ledger/support stay 2-up so the row is always fully populated (2 items = full,
   0 items = collapses away) with no leftover empty cell either way. See WORKLOG
   2026-09-28 "wide dashboard grid". */
#upgradeSection { grid-column:1 / -1; }
.member-task-section { position:relative; border:1px solid var(--border); border-radius:var(--radius-ui-md); background:var(--bg-card); overflow:hidden; display:grid; }
.member-task-summary { padding:var(--space-card-pad); display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; gap:var(--vip-item) var(--space-gap-cards); align-items:start; align-content:start; }
.member-task-copy { grid-column:1; grid-row:1 / span 2; display:grid; gap:var(--vip-intra); min-width:0; }
.member-task-kicker { color:var(--text-secondary); font-size:var(--type-label); font-weight:var(--weight-label); letter-spacing:.045em; text-transform:uppercase; line-height:1.2; }
.member-task-title { color:var(--text-primary); font-size:var(--type-card-title); font-weight:var(--weight-card-title); line-height:1.25; overflow-wrap:anywhere; }
.member-task-meta { color:var(--text-secondary); font-size:var(--type-card-copy); line-height:1.45; overflow-wrap:anywhere; text-align:start; }
.member-task-status { grid-column:2; grid-row:1; justify-self:end; color:var(--text-secondary); font-size:var(--type-meta); font-weight:var(--weight-label); line-height:var(--leading-meta); white-space:nowrap; text-align:right; }
.member-task-action { grid-column:2; grid-row:2; align-self:end; justify-self:end; padding:0; border:0; background:transparent; color:var(--text-secondary); font-size:var(--type-meta); font-weight:var(--weight-footer-link); line-height:var(--leading-meta); cursor:pointer; white-space:nowrap; }
.member-task-action:hover { color:var(--accent); }
/* On /vip each records and support card is one entry: the action covers the card, as the credits
   and referral cards are links as a whole. */
.page-vip #ledgerSection .member-task-action::after,
.page-vip #supportSection .member-task-action::after { content:""; position:absolute; inset:0; }
.page-vip #ledgerSection:hover,
.page-vip #supportSection:hover { border-color:var(--visual-border-medium); }
.page-vip #ledgerSection:hover .member-task-action,
.page-vip #supportSection:hover .member-task-action { color:var(--accent); }
/* Signed-out visitors have no records or messages yet; the account card offers the sign-in. */
.is-guest .page-vip #ledgerSection,
.is-guest .page-vip #supportSection { display:none; }
/* Plans: a section heading over the plan cards instead of a card holding cards. */
#upgradeSection { border:0; border-radius:0; background:transparent; overflow:visible; }
#upgradeSection .member-task-summary { padding:0; display:flex; align-items:flex-end; gap:var(--space-gap-cards); }
#upgradeSection .member-task-copy { flex:1 1 auto; }
#upgradeSection .member-task-title { font-size:var(--type-section); font-weight:var(--weight-section); }
#upgradeSection .member-task-meta { font-size:var(--type-meta); text-wrap:var(--text-wrap-copy); text-align:var(--text-align-copy); }
#upgradeSection .member-task-status:empty { display:none; }
.member-task-section.is-plan-page .member-task-summary,
.member-task-section.is-orders-page .member-task-summary,
.member-task-section.is-secondary-page .member-task-summary { display:none; }
.member-task-detail { border-top:1px solid var(--border-row); display:grid; gap:var(--space-gap-cards); }
.member-task-section.is-plan-page .member-task-detail,
.member-task-section.is-orders-page .member-task-detail,
.member-task-section.is-secondary-page .member-task-detail { border-top:0; }
.member-task-detail[hidden] { display:none; }
.member-task-inner { border:0; border-radius:0; background:transparent; }
.member-task-inner.support-box { padding:var(--space-card-pad); }
#upgradeSection .member-task-detail { border-top:0; }
#upgradeSection .member-task-summary + .member-task-detail { margin-top:var(--space-gap-cards); }
#plans:empty { display:none; }
#upgradeSection .section-head { margin-top:0; }
.page-orders .vip-grid,
.page-orders #supportReplyAlert,
.page-orders #ledgerSection,
.page-orders #supportSection,
.page-orders #utilityLinks,
.page-orders #referralPanel,
.page-orders #plans { display:none !important; }
.page-orders .member-task-stack,
.page-records .member-task-stack,
.page-support .member-task-stack,
.page-credits .member-task-stack,
.page-plans .member-task-stack { grid-template-columns:1fr; }
.vip-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-gap-cards); align-items:stretch; }
.vip-card { border:1px solid var(--border); border-radius:var(--radius-ui-md); background:var(--bg-card); padding:var(--space-card-pad); display:grid; gap:var(--vip-intra); align-content:start; }
.vip-card { position:relative; }
.vip-card-link { position:absolute; inset:0; border-radius:inherit; }
.vip-card-link::before { content:"›"; content:"›" / ""; position:absolute; top:var(--space-card-pad); right:var(--space-card-pad); color:var(--text-secondary); font-size:var(--type-card-title); line-height:1; }
.vip-card:has(.vip-card-link):hover { border-color:var(--visual-border-medium); }
.vip-card:hover .vip-card-link::before { color:var(--accent); }
.vip-card .vip-account { position:relative; z-index:var(--layer-content); }
.is-guest .vip-card-link { display:none; }
.vip-label { color:var(--text-secondary); font-size:var(--type-label); font-weight:var(--weight-label); letter-spacing:.045em; text-transform:uppercase; }
.vip-value { font-size:var(--type-value); font-weight:var(--weight-value); line-height:1.24; overflow-wrap:anywhere; letter-spacing:0; font-variant-numeric:tabular-nums; }
.vip-meta { color:var(--text-secondary); font-size:var(--type-card-copy); line-height:1.45; text-wrap:var(--text-wrap-copy); text-align:var(--text-align-copy); }
/* Account: in the membership card on /vip, in its own card on the sub-pages. Sign-in is the one
   outlined control; refresh, log out and install read like the footer links. */
.vip-account-card { border:1px solid var(--border); border-radius:var(--radius-ui-md); background:var(--bg-card); padding:var(--space-card-pad); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--vip-intra) var(--space-gap-cards); align-items:center; }
.vip-account-copy { display:grid; gap:var(--vip-intra); min-width:0; }
/* Account: email + refresh on one row, then two equal secondary buttons across the card. */
.vip-account { display:grid; gap:var(--vip-item); color:var(--text-secondary); font-size:var(--type-meta); line-height:var(--leading-meta); }
.vip-account-row { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--vip-intra) var(--space-gap-controls); min-width:0; }
.vip-account-buttons { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-gap-controls); }
.vip-account-button { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-ui-2); width:100%; white-space:nowrap; }
.vip-account-icon { width:var(--size-icon-md); height:var(--size-icon-md); flex:none; color:var(--text-secondary); }
.vip-account-button:hover .vip-account-icon { color:var(--text-primary); }
/* Sub-page account card: the email is the card value, so refresh sits beside the buttons. */
.vip-account-card .vip-account { grid-template-columns:auto auto; align-items:center; column-gap:var(--space-gap-controls); }
.vip-account-card .vip-account-buttons { grid-template-columns:auto auto; }
.vip-account-email { color:var(--text-primary); overflow-wrap:anywhere; }
.vip-text-link { padding:0; border:0; background:transparent; color:var(--text-secondary); font-size:var(--type-meta); font-weight:var(--weight-footer-link); line-height:var(--leading-meta); cursor:pointer; white-space:nowrap; }
.vip-text-link:hover { color:var(--accent); }
.vip-account-login { min-height:var(--size-control); padding:0 var(--space-card-pad); border:1px solid var(--border); border-radius:var(--radius-ui-sm); color:var(--text-primary); font-size:var(--type-control); font-weight:var(--weight-control); display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
.vip-account-login:hover { border-color:var(--visual-border-medium); background:var(--bg-surface-hover); }
.is-guest #refreshAccount,
.is-guest #accountButtons,
.is-signed-in #loginLink,
.is-guest .vip-account-email,
.vip-account-card .vip-account-email { display:none; }
/* Text controls keep their small glyphs; the tap area is 44px tall, as on the footer links. */
.vip-text-link, .vip-account-login, #upgradeSection .member-task-action { position:relative; }
.vip-text-link::after,
.vip-account-login::after,
#upgradeSection .member-task-action::after { content:""; position:absolute; left:calc(var(--space-gap-controls) / -2); right:calc(var(--space-gap-controls) / -2); top:50%; height:var(--size-tap-target-min); transform:translateY(-50%); }
.vip-grid .vip-account { margin-top:calc(var(--vip-item) - var(--vip-intra)); }
.is-guest .vip-grid { grid-template-columns:minmax(0,1fr); }
.is-guest .vip-grid .vip-card:not(:first-child) { display:none; }
.is-guest .vip-grid .vip-card:first-child { grid-column:1 / -1; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--space-gap-cards); align-items:center; }
.is-guest .vip-grid .vip-card:first-child > :not(.vip-account) { grid-column:1; }
.is-guest .vip-grid .vip-account { grid-column:2; grid-row:1 / span 3; margin-top:0; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-scale-px-10); margin-top:var(--space-scale-px-4); }
.section-title { font-size:var(--type-section); font-weight:var(--weight-section); letter-spacing:0; }
.section-head-actions { display:flex; align-items:center; gap:var(--space-gap-cards); }
.section-head .ghost { min-height:var(--size-scale-px-44); width:auto; padding:0 var(--space-scale-px-12); border-color:var(--border-row); background:transparent; color:var(--text-secondary); font-size:var(--type-control); font-weight:var(--weight-control); }
.section-head .ghost:hover { border-color:var(--border); background:var(--bg-surface); color:var(--text-primary); }
.ledger-head { padding:var(--space-card-pad); border-bottom:1px solid var(--border); }
.ledger { border:1px solid var(--border); border-radius:var(--radius-ui-md); background:var(--bg-card); overflow:hidden; }
.ledger-table { width:100%; border-collapse:collapse; }
.ledger-table th, .ledger-table td { padding:var(--space-row-pad-block) var(--space-card-pad); border-bottom:1px solid var(--border); text-align:left; vertical-align:top; font-size:var(--type-card-copy); line-height:1.38; font-variant-numeric:tabular-nums; }
.ledger-table th { color:var(--text-secondary); font-size:var(--type-label); font-weight:var(--weight-label); letter-spacing:.045em; text-transform:uppercase; background:var(--visual-plan-surface); }
.ledger-table tr:last-child td { border-bottom:0; }
.delta-pos { color:var(--status-success); font-weight:var(--weight-value); white-space:nowrap; font-variant-numeric:tabular-nums; }
.delta-neg { color:var(--status-danger); font-weight:var(--weight-value); white-space:nowrap; font-variant-numeric:tabular-nums; }
.records-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-gap-cards); }
.record-panel { border:1px solid var(--border); border-radius:var(--radius-ui-md); background:var(--bg-card); overflow:hidden; min-width:0; }
.record-list { display:grid; }
.record-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-scale-px-10); padding:var(--space-row-pad-block) var(--space-card-pad); border-top:1px solid var(--border); align-items:start; }
.record-row:first-child { border-top:0; }
.record-title { font-size:var(--type-card-title); font-weight:var(--weight-card-title); line-height:1.34; overflow-wrap:anywhere; text-wrap:pretty; }
.record-meta { margin-top:var(--space-scale-px-3); color:var(--text-secondary); font-size:var(--type-meta); line-height:1.38; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.record-message { margin-top:var(--space-scale-px-6); color:var(--text-primary); font-size:var(--type-card-copy); line-height:1.45; overflow-wrap:anywhere; text-wrap:var(--text-wrap-copy); text-align:var(--text-align-copy); }
.record-reply { margin-top:var(--space-scale-px-6); color:var(--accent); font-size:var(--type-card-copy); line-height:1.45; overflow-wrap:anywhere; text-wrap:var(--text-wrap-copy); text-align:var(--text-align-copy); }
.record-proof-action { margin-top:var(--space-scale-px-8); text-decoration:none; }
/* Conversation actions are low-use controls: the light section-head button style, lighter than cards. */
.support-actions { margin-top:var(--space-scale-px-8); display:flex; flex-wrap:wrap; gap:var(--space-gap-tight); }
.support-action { min-height:var(--size-scale-px-44); padding:0 var(--space-scale-px-12); border:1px solid var(--border-row); border-radius:var(--radius-ui-sm); background:transparent; color:var(--text-secondary); font-size:var(--type-control); font-weight:var(--weight-control); cursor:pointer; }
.support-action:hover { border-color:var(--border); background:var(--bg-surface); color:var(--text-primary); }
.support-follow-up { margin-top:var(--space-scale-px-8); display:grid; gap:var(--space-gap-tight); justify-items:start; }
.support-follow-up .input { width:100%; }
.record-status { color:var(--text-secondary); font-size:var(--type-meta); font-weight:var(--weight-label); white-space:nowrap; font-variant-numeric:tabular-nums; }
.record-actions { display:flex; flex-wrap:wrap; gap:var(--space-gap-controls); justify-content:flex-end; align-items:center; }
.record-actions .secondary,
.record-actions .quiet-action { min-height:var(--size-scale-px-44); padding:0 var(--space-scale-px-10); border-radius:var(--radius-ui-sm); font-size:var(--type-control); font-weight:var(--weight-control); display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
.record-actions .quiet-action { border:1px solid var(--border); background:transparent; color:var(--text-secondary); cursor:pointer; }
.record-actions .quiet-action:hover { border-color:var(--visual-border-medium); color:var(--text-primary); background:var(--bg-surface-hover); }
.empty-row { color:var(--text-secondary); font-size:var(--type-card-copy); padding:var(--space-card-pad); border-top:1px solid var(--border); }
.support-box { border:1px solid var(--border); border-radius:var(--radius-ui-md); background:var(--bg-card); padding:var(--space-card-pad); display:grid; gap:var(--space-gap-tight); }
.support-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-gap-tight); align-items:stretch; }
textarea.input { min-height:var(--size-scale-px-58); padding:var(--space-scale-px-10) var(--space-scale-px-12); resize:vertical; }
.plans { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-gap-cards); align-items:stretch; }
/* .plans is shared by two different card counts: the membership grid
   (/vip dashboard's upgradeSection, /vip/plans) renders however many
   membership products MONETIZATION_PRODUCT_KEYS currently enables
   (3 in production today -- quarterly/annual/lifetime; supporter_three_year
   is disabled -- but this has been 4 before and may be again), while
   /vip/credits renders 6 credit packs. The base rule's 3 columns already
   divides the credit grid evenly (3x2, unchanged here). A prior fix
   (2026-09-28 "plan card orphan row") hardcoded a 4-column override here
   assuming the membership grid always has 4 cards; that assumption was
   only true in the local fixture used to verify it (which left
   MONETIZATION_PRODUCT_KEYS unset, so enabledProducts() in
   src/monetization.ts returned the full catalog) and broke production,
   which has 3. Column count must instead follow the actual rendered
   card count: renderProducts() (below, in the client script) sets
   --plan-count / --plan-mid-count on #plans from visibleProducts.length,
   and this override reads those instead of a fixed number. Scoped to
   the membership pages only -- .page-vip and .page-plans are the main
   element's per-view page class -- so the credits grid keeps its own
   already-balanced column count regardless of what these variables are
   set to. */
@media (min-width: 1025px) {
  .page-vip .plans,
  .page-plans .plans { grid-template-columns:repeat(var(--plan-count, 3), minmax(0, 1fr)); }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .page-vip .plans,
  .page-plans .plans { grid-template-columns:repeat(var(--plan-mid-count, 3), minmax(0, 1fr)); }
}
.plan-switch-note { grid-column:1 / -1; margin:0; color:var(--text-secondary); font-size:var(--type-meta); line-height:1.5; text-wrap:var(--text-wrap-copy); text-align:var(--text-align-copy); }
.plan { border:1px solid var(--border); border-radius:var(--radius-ui-md); background:var(--bg-card); padding:var(--space-card-pad); display:grid; grid-template-rows:auto 1fr auto; gap:var(--vip-item); transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease; }
/* :active intentionally excluded here: a click/tap on a button nested
   inside the card (e.g. the WeChat/USDT pay buttons) also puts this
   ancestor into :active for the duration of the press, which used to
   double up with the button's own press feedback and read as "the whole
   card got clicked." :has(:focus-visible) (not :focus-within) is used so
   the card only highlights for real keyboard Tab navigation -- unlike
   :focus-within, it does not fire just because a mouse click or touch tap
   moved focus onto a descendant button, on any platform or input type. */
.plan:has(:focus-visible) { border-color:var(--visual-plan-selected-border); background:var(--bg-surface); }
@media (hover:hover) and (pointer:fine) {
  .plan:hover { border-color:var(--visual-plan-selected-border-soft); background:var(--bg-surface); transform:translateY(-1px); }
}
.plan.is-selected,
.plan.is-selected:hover,
.plan.is-selected:has(:focus-visible) {
  border-color:var(--accent);
  background:var(--visual-plan-selected-surface);
  box-shadow:var(--shadow-plan-card);
}
@media (hover:hover) and (pointer:fine) {
  /* The gold "selected" treatment is a conversion default, not a fixed
     label -- while the pointer is over a different card in the same
     group, that card should visibly take over the highlight and the
     default card defers to its plain resting style until the pointer
     leaves, rather than both showing gold at once. */
  .plans:has(.plan:hover) .plan.is-selected:not(:hover) {
    border-color:var(--border);
    background:var(--bg-card);
    box-shadow:none;
  }
}
.plan-head { display:grid; gap:var(--vip-intra); }
.plan-name-row { display:flex; align-items:center; gap:var(--space-scale-px-7); flex-wrap:wrap; min-width:0; }
.plan-name { font-size:var(--type-card-title); font-weight:var(--weight-card-title); letter-spacing:0; }
.plan-current { color:var(--status-success); font-size:var(--type-meta); font-weight:var(--weight-label); line-height:var(--leading-meta); }
.plan-price-block { display:grid; gap:var(--vip-intra); }
.plan-original-price { color:var(--text-secondary); font-size:var(--type-meta); line-height:1.1; text-decoration:line-through; text-decoration-thickness:1px; font-variant-numeric:tabular-nums; }
.plan-price { font-size:var(--type-price); font-weight:var(--weight-value); line-height:1; color:var(--text-primary); letter-spacing:0; font-variant-numeric:tabular-nums; }
.plan-usdt { color:var(--text-secondary); font-size:var(--type-meta); line-height:1.25; font-variant-numeric:tabular-nums; }
.plan-usdt:empty { display:none; }
.benefits { margin:0; padding:0; list-style:none; display:grid; align-content:start; gap:var(--vip-intra); color:var(--text-secondary); font-size:var(--type-card-copy); line-height:1.45; text-wrap:var(--text-wrap-copy); text-align:var(--text-align-copy); }
.benefits li:before { content:""; display:inline-block; width:var(--size-scale-px-6); height:var(--size-scale-px-6); border-radius:50%; background:var(--accent); margin-right:var(--space-scale-px-7); vertical-align:1px; }
/* Deliberate exception: the one headline benefit of a plan is emphasised in the title weight. */
.benefits li.is-standout { color:var(--text-primary); font-weight:var(--weight-card-title); }
.actions { display:grid; gap:var(--space-scale-px-8); }
.auth-dialog-body .actions { grid-template-columns:1fr 1fr; }
.primary, .secondary { min-height:var(--size-scale-px-44); border-radius:var(--radius-ui-sm); padding:0 var(--space-scale-px-12); font-size:var(--type-control); font-weight:var(--weight-control); cursor:pointer; transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.primary:active:not(:disabled), .secondary:active:not(:disabled) { transform:translateY(1px); }
.primary { border:0; background:var(--accent); color:var(--admin-accent-text); box-shadow:var(--shadow-accent-control); }
.primary:hover { background:var(--visual-accent-bright); }
.secondary { border:1px solid var(--border); background:var(--bg-surface); color:var(--text-primary); }
.primary:disabled, .secondary:disabled { opacity:var(--opacity-half); cursor:not-allowed; }
.status { min-height:var(--size-scale-px-20); color:var(--text-secondary); font-size:var(--type-card-copy); line-height:1.45; text-wrap:var(--text-wrap-copy); text-align:var(--text-align-copy); }
.status.is-error { color:var(--status-danger); }
.invoice { border:1px solid var(--border); border-radius:var(--radius-ui-md); background:var(--bg-card); padding:var(--space-card-pad); display:none; gap:var(--space-scale-px-12); }
.invoice.is-open { display:grid; }
.invoice-grid { display:grid; grid-template-columns:196px minmax(0, 1fr); gap:var(--space-scale-px-14); align-items:start; }
.qr { width:var(--size-scale-px-196); aspect-ratio:1; border-radius:var(--radius-ui-md); background:oklch(91% .045 78); padding:var(--space-scale-px-10); display:grid; place-items:center; }
.qr::before { content:attr(data-state); color:oklch(32% .025 72); font-size:var(--type-meta); font-weight:var(--weight-label); text-align:center; }
.qr.has-image::before { content:""; display:none; }
.qr img { width:100%; height:100%; display:none; }
.qr.has-image img { display:block; }
.invoice-lines { display:grid; gap:var(--space-scale-px-10); min-width:0; }
.label { color:var(--text-secondary); font-size:var(--type-label); font-weight:var(--weight-label); text-transform:uppercase; letter-spacing:.06em; }
.value { margin-top:var(--space-scale-px-4); color:var(--text-primary); font-size:var(--type-card-title); font-weight:var(--weight-card-title); overflow-wrap:anywhere; }
.code { border:1px solid var(--border); border-radius:var(--radius-ui-sm); background:var(--visual-plan-surface); padding:var(--space-scale-px-9); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:var(--type-card-copy); line-height:1.45; overflow-wrap:anywhere; }
.tx-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-gap-tight); }
.input { min-height:var(--size-scale-px-38); border:1px solid var(--border); border-radius:var(--radius-ui-sm); background:var(--visual-plan-surface); color:var(--text-primary); padding:0 var(--space-scale-px-10); }
.fine { color:var(--text-faint); font-size:var(--type-meta); line-height:1.5; }
@media (max-width: 760px) {
  .ghost {
    width:100%;
    min-height:clamp(var(--size-scale-px-27),7vw,var(--size-scale-px-30));
    min-width:0;
    padding:0 var(--space-scale-px-6);
    border-radius:var(--radius-ui-sm);
    font-size:var(--type-label);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
    line-height:1;
    position:relative;
  }
  .ghost::after { content:""; position:absolute; inset:-5px; }
}
@media (max-width: 360px) {
  .ghost { padding:0 var(--space-scale-px-4); font-size:var(--type-label); }
}
@media (max-width: 640px) {
  :root {
    --mobile-density-control:var(--size-mobile-control);
    --mobile-density-gap:var(--space-mobile-gap);
    --mobile-density-card-pad:var(--space-mobile-card-pad);
  }
  body { font-size:var(--type-card-copy); }
  main { padding:var(--space-scale-px-7) 0 var(--space-scale-px-18); overflow-x:hidden; }
  /* UI-005 3e: dropped the h1 rule that lived here. Its font-size re-asserted the same
     shared token as the unconditional default above (the step came from inside that
     token, not from this rule) and its line-height:1.12 was identical to the default,
     so the whole rule contributed no new value once h1 moved to the local alias. */
  .lead { font-size:var(--type-lead); line-height:1.42; }
  .plans { grid-template-columns:1fr; }
  .vip-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vip-card { border-radius:var(--radius-ui-md); }
  .vip-card:first-child { grid-column:1 / -1; }
  .vip-value { line-height:1.2; }
  .section-head { margin-top:var(--space-scale-px-2); }
  .ledger-table,
  .ledger-table thead,
  .ledger-table tbody,
  .ledger-table tr,
  .ledger-table td { display:block; width:100%; min-width:0; }
  .ledger-table thead { display:none; }
  .ledger-table tbody { display:grid; gap:var(--space-scale-px-5); padding:var(--space-scale-px-6); }
  .ledger-table tr { border:1px solid var(--border); border-radius:var(--radius-ui-md); background:var(--bg-surface); padding:var(--space-scale-px-6); }
  .ledger-table td { border:0; padding:0; display:grid; grid-template-columns:62px minmax(0, 1fr); gap:var(--space-scale-px-6); font-size:var(--type-card-copy); overflow-wrap:anywhere; }
  .ledger-table td + td { margin-top:var(--space-scale-px-5); }
  .ledger-table td::before { content:attr(data-label); color:var(--text-secondary); font-size:var(--type-label); font-weight:var(--weight-label); letter-spacing:.045em; text-transform:uppercase; }
  .records-grid { grid-template-columns:1fr; }
  .utility-links, .rules-grid { grid-template-columns:1fr; }
  .member-task-stack,
  .member-task-stack:has(.member-task-detail:not([hidden])) { grid-template-columns:1fr; }
  .vip-account-card,
  .is-guest .vip-grid .vip-card:first-child { grid-template-columns:minmax(0,1fr); }
  .vip-account-card .vip-account,
  .is-guest .vip-grid .vip-account { grid-column:1; grid-row:auto; margin-top:calc(var(--vip-item) - var(--vip-intra)); }
  .vip-account-card .vip-account { grid-template-columns:minmax(0,1fr); }
  .vip-account-card .vip-account-buttons { grid-template-columns:1fr 1fr; }
  .vip-account-login { min-height:var(--mobile-density-control); }
  .tool-card { border-radius:var(--radius-ui-md); }
  .referral-grid { grid-template-columns:1fr; }
  .record-row { gap:var(--space-scale-px-5); }
  .record-actions { justify-content:flex-start; grid-column:1 / -1; }
  .support-form { grid-template-columns:1fr; }
  .plan { min-height:0; border-radius:var(--radius-ui-md); }
  .plan-head { grid-template-columns:minmax(0, 1fr) auto; gap:var(--space-ui-1) var(--space-scale-px-12); align-items:center; }
  .plan-name-row { grid-column:1; grid-row:1; }
  /* UI-005 3e: dropped .plan-name here -- it only re-asserted var(--type-section),
     the same token as the default rule; the step came from inside that token. */
  .plan-price-block { grid-column:2; grid-row:1 / span 2; justify-items:end; text-align:right; }
  .plan-price { text-align:right; }
  .plan-usdt { grid-column:1; grid-row:2; }
  .actions { grid-template-columns:1fr 1fr; }
  .actions > :only-child { grid-column:1 / -1; }
  .support-reply-action,
  .section-head .ghost,
  .record-actions .secondary,
  .record-actions .quiet-action,
  .primary,
  .secondary { min-height:var(--mobile-density-control); }
  .invoice-grid, .tx-row { grid-template-columns:1fr; }
  .qr { width:100%; max-width:var(--size-scale-px-240); }
}

/* Followed shows with new episodes: a gold count on the header calendar icon, added by the page
   script for signed-in readers only (same rule in home.css and vip.css). */
.has-follow-count { position: relative; }
.follow-count-badge {
  position: absolute;
  top: calc(var(--space-scale-px-4) * -1);
  right: calc(var(--space-scale-px-4) * -1);
  box-sizing: border-box;
  min-width: var(--size-scale-px-12);
  height: var(--size-scale-px-12);
  padding: 0 var(--space-scale-px-3);
  border-radius: var(--radius-pill);
  background: var(--follow-badge-fill);
  color: var(--accent);
  font-size: var(--type-kicker);
  line-height: var(--size-scale-px-12);
  font-weight: var(--weight-label);
  text-align: center;
  pointer-events: none;
}
/* Phone header buttons are smaller, so the count steps down one size to keep the same proportion. */
@media (max-width: 767px) {
  .follow-count-badge {
    min-width: var(--size-scale-px-10);
    height: var(--size-scale-px-10);
    line-height: var(--size-scale-px-10);
    padding: 0 var(--space-scale-px-2);
    font-size: var(--type-compact-label);
  }
}