.subscriptions-page { display: grid; gap: 1.5rem; min-width: 0; }
.subscription-detail-page { display: grid; gap: 1.25rem; min-width: 0; }
.subscription-page-navigation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.subscription-heading, .subscription-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.subscription-heading h1, .subscription-heading h2, .subscription-panel h1, .subscription-panel > h2 { margin: .25rem 0 .8rem; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; }
.subscription-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.subscription-card, .subscription-panel { padding: 1.5rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); min-width: 0; }
.subscription-card { display: flex; flex-direction: column; gap: .7rem; }
.subscription-card h3, .subscription-card p { margin: 0; }
.subscription-card .subscription-actions { margin-top: auto; padding-top: .6rem; }
.subscription-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.subscription-card .subscription-description { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.subscription-muted { color: var(--text-muted); font-size: .9rem; }
.subscription-price { font-size: 1.3rem; }
.subscription-facts { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 1.5rem 0; }
.subscription-facts div { display: grid; gap: .3rem; }
.subscription-facts span { color: var(--text-muted); font-size: .85rem; }
.subscription-facts strong { font-size: 1.4rem; }
.subscription-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.subscription-form label { display: grid; gap: .4rem; font-size: .9rem; font-weight: 600; }
.subscription-wide { grid-column: 1 / -1; }
.subscription-form :is(input:not([type='hidden']), select, textarea) { width: 100%; min-width: 0; padding: .8rem; border: 1px solid color-mix(in srgb, var(--text-muted) 65%, var(--border)); border-radius: .65rem; background: var(--surface-hover); color: var(--text); font: inherit; }
.subscription-form :is(input, select, textarea):focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.subscription-form textarea { resize: vertical; min-height: 120px; }
.subscription-notice { padding: 1rem; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: .75rem; }
.subscription_error { border-color: #e66b6b; background: color-mix(in srgb, #e66b6b 12%, var(--surface)); }
.profile-paid-plans { margin-top: 1.5rem; }
@media (max-width: 540px) { .subscription-form { grid-template-columns: 1fr; } .subscription-card, .subscription-panel { padding: 1rem; } }

.profile-subscriptions-section { min-width: 0; margin-top: 1.25rem; }
.profile-subscriptions-section > .subscription-grid { margin-top: 1rem; }

.subscription-management.profile-predictions { margin-top: 0; }
.subscription-earnings { margin: 0; }
.subscription-plans-empty { grid-column: 1 / -1; }
.subscription-plan-card { min-width: 0; }
.subscription-catalog .predictions-hero-image { height: 100%; }
.subscription-catalog-author { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; color: var(--text-muted); font-size: .78rem; }
.subscription-catalog-author img { flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
.subscription-catalog-author span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subscription-plan-card .prediction-market strong { white-space: normal; }
.subscription-plan-card .prediction-card-top { flex-wrap: wrap; }
.subscription-plan-card .prediction-card-top .sport-badge { max-width: 100%; }
.subscription-plan-card h3 { overflow-wrap: anywhere; }
.subscription-plan-card .prediction-card-title-link::after { position: absolute; inset: 0; z-index: 1; content: ''; }
.subscription-plan-card:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.subscription-plan-card .prediction-market { flex-wrap: wrap; justify-content: space-between; margin-bottom: .85rem; }
.subscription-plan-card .subscription-plan-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; margin: .75rem 0 0; color: var(--text-muted); font-size: .76rem; line-height: 1.6; }
.subscription-plan-card .prediction-price { flex-shrink: 0; white-space: nowrap; }

.subscription-cards { container: subscription-cards / inline-size; min-width: 0; }
.subscription-plans-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.subscription-cover-card { padding: 1.25rem; border-color: #3c675c; border-radius: 1rem; color: #edf4fa; background-color: #111b23; background-image: linear-gradient(180deg, transparent 10%, #111b23 100%), linear-gradient(90deg, #111b23 0%, rgb(17 27 35 / 85%) 35%, rgb(17 27 35 / 8%) 100%), var(--subscription-cover, url('../images/subscriptions/default.png')); background-size: 100% 280px, 100% 280px, auto 280px; background-position: top, top, right top; background-repeat: no-repeat; }
.subscription-cover-card:hover { border-color: #58d9a1; }
.subscription-cover-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.subscription-cover-picker legend { margin-bottom: .5rem; font-weight: 700; }
.subscription-cover-controls { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.subscription-cover-controls .button { min-width: 0; padding: .5rem .7rem; }
.subscription-cover-options { position: relative; display: flex; gap: .75rem; overflow-x: auto; padding: 4px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
body form .subscription-cover-picker .subscription-cover-option { position: relative; display: grid; gap: .4rem; flex: 0 0 150px; min-width: 0; padding: .4rem; border: 2px solid var(--border); border-radius: .7rem; background: var(--surface-hover); cursor: pointer; scroll-snap-align: center; }
.subscription-verified { display: flex; align-items: flex-start; gap: .4rem; margin: 0 0 1rem; padding: .6rem .75rem; border: 1px solid #287a52; border-radius: .6rem; background: #103d29; color: #8af0b9; font-size: .8rem; line-height: 1.5; }
.subscription-cover-option img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .4rem; }
.subscription-cover-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
body form .subscription-cover-picker .subscription-cover-option:has(:checked)::after { content: '✓'; position: absolute; top: .7rem; right: .7rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--text); color: var(--surface); font-size: .9rem; font-weight: 700; }
body form .subscription-cover-picker .subscription-cover-option:has(input:focus-visible) { outline: 2px solid var(--text-muted); outline-offset: 2px; }
body form .subscription-cover-picker input[type='radio'] { position: absolute; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.subscription-cover-card .subscription-catalog-author { margin-bottom: .85rem; color: #edf4fa; font-size: .85rem; font-weight: 750; }
.subscription-cover-card .subscription-catalog-author img { flex-basis: 2.4rem; width: 2.4rem; height: 2.4rem; }
.subscription-card-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; min-width: 0; }
.subscription-cover-card .subscription-card-heading .subscription-catalog-author { flex: 1 1 0; min-width: 0; margin: 0; }
.subscription-cover-card .subscription-card-heading .sport-badge { flex: 0 0 auto; max-width: 48%; white-space: normal; text-align: center; }
.subscription-cover-card .sport-badge { padding: .35rem .6rem; background: #12462f; color: #69e5ad; font-size: .72rem; }
.subscription-cover-card .status { padding: .33rem .55rem; border: 1px solid #3a4b59; background: #222f3b; color: #c5d7e5; font-size: .68rem; }
.subscription-cover-card h3 { margin: 0 0 .45rem; color: #f3f7fa; font-size: 1.25rem; line-height: 1.3; }
.subscription-cover-card .subscription-plan-description { margin: 0 0 1rem; color: #bacdda; font-size: .8rem; line-height: 1.6; }
.subscription-cover-card .prediction-market { justify-content: space-between; gap: .5rem; margin: auto 0 1rem; padding: .75rem; border-color: #344653; background: rgb(16 26 34 / 80%); font-size: .8rem; }
.subscription-cover-card .prediction-market strong { color: #65e4a7; font-size: 1rem; }
.subscription-card-details { display: grid; gap: .65rem; margin: 0 0 1rem; font-size: .76rem; }
.subscription-card-details > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .35rem .75rem; }
.subscription-card-details dt { display: flex; align-items: center; gap: .55rem; color: #bacdda; }
.subscription-card-details dd { margin: 0 0 0 auto; text-align: right; }
.subscription-card-details svg, .subscription-card-purchase svg { flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; }
.subscription-card-purchase { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1rem; border-top: 1px solid #344653; }
.subscription-card-price { display: flex; align-items: center; gap: .5rem; color: #65e4a7; font-size: 1.1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.subscription-card-price svg { width: 1.35rem; height: 1.35rem; flex-basis: 1.35rem; }
.subscription-cover-card .subscription-card-cta { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 42px; margin-left: auto; padding: .65rem .85rem; border-color: #65e4a7; border-radius: .65rem; background: #65e4a7; color: #082619; font-size: .8rem; }
.subscription-cover-card .subscription-card-cta:hover { background: #8cedbf; border-color: #8cedbf; }
.subscription-cover-card .subscription-card-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@container subscription-cards (max-width: 620px) { .subscription-plans-grid { display: grid; grid-template-columns: minmax(0, 1fr); } }

/* Затемнение обложки сохраняет читаемость светлого текста в обеих темах. */
.subscription-hero { container-type: inline-size; position: relative; isolation: isolate; overflow: hidden; min-width: 0; border: 1px solid #304652; border-radius: 1.25rem; background: #07151d var(--subscription-cover, url('../images/subscriptions/default.png')) right center / cover no-repeat; color: #edf4fa; }
.subscription-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(5 16 24 / 92%) 0%, rgb(5 16 24 / 76%) 48%, rgb(5 16 24 / 10%) 100%); }
.subscription-hero-content { position: relative; width: min(100%, 76%); padding: clamp(1.25rem, 3cqi, 2.5rem); }
.subscription-hero-badges { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin-bottom: 1rem; }
.subscription-hero-badges > span { padding: .4rem .7rem; border: 1px solid transparent; border-radius: 999px; background: rgb(18 43 48 / 85%); color: #71e0ad; font-size: .72rem; font-weight: 750; line-height: 1.25; }
.subscription-hero-badges .subscription-hero-label { border-color: rgb(66 208 146 / 35%); background: rgb(5 53 36 / 75%); }
.subscription-hero :is(h1, h2) { margin: 0; color: #f3f7fa; font-size: clamp(1.85rem, 4.5cqi, 3.3rem); line-height: 1.12; letter-spacing: -.035em; overflow-wrap: anywhere; }
.subscription-hero-description { margin: .85rem 0 1.5rem; color: #c0ccd6; font-size: clamp(.85rem, 1.8cqi, 1.05rem); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.subscription-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 0; }
.subscription-hero-facts > div { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .85rem .7rem; border: 1px solid #2b424d; border-radius: .85rem; background: rgb(15 32 42 / 90%); }
.subscription-hero-facts > div > dl { min-width: 0; margin: 0; }
.subscription-fact-icon { display: grid; place-items: center; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: .65rem; background: rgb(8 66 45 / 50%); color: #54dba0; }
.subscription-fact-icon svg { width: 1.35rem; height: 1.35rem; }
.subscription-hero-facts dt { margin: 0 0 .35rem; color: #aabcc9; font-size: .68rem; line-height: 1.35; }
.subscription-hero-facts dd { margin: 0; color: #f3f7fa; font-size: clamp(.85rem, 1.6cqi, 1.05rem); line-height: 1.4; font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.subscription-hero-footer { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; padding: 0 clamp(1.25rem, 3cqi, 2.5rem) clamp(1.25rem, 3cqi, 2.5rem); }
.subscription-hero-note { display: flex; flex: 1 1 24rem; align-items: flex-start; gap: .7rem; margin: 0; color: #acbecb; font-size: .73rem; line-height: 1.65; }
.subscription-hero-footer .subscription-purchase-action { min-width: 0; margin-left: auto; }
.subscription-hero-footer .button { max-width: 100%; text-align: center; }
.subscription-hero-note svg { flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; margin-top: .12rem; }
:root:not([data-theme='dark']) .subscription-hero-badges > span { background: rgb(227 242 233 / 95%); color: var(--accent); }
:root:not([data-theme='dark']) .subscription-hero-badges .subscription-hero-label { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.subscription-access { display: flex; align-items: center; gap: .65rem; max-width: 100%; margin-left: auto; padding: .7rem .85rem; border: 1px solid #304b4c; border-radius: .75rem; background: rgb(15 32 42 / 92%); }
.subscription-access-icon { display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; color: #71e0ad; }
.subscription-access-icon svg { width: 1.35rem; height: 1.35rem; }
.subscription-access strong { display: block; color: #71e0ad; font-size: .78rem; line-height: 1.4; }
.subscription-access p { margin: .2rem 0 0; color: #c0ccd6; font-size: .7rem; line-height: 1.45; overflow-wrap: anywhere; }
.subscription-access > div { min-width: 0; }
.subscription-days { display: flex; align-items: center; gap: 1.15rem; min-width: 0; padding: 1rem 1.25rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 1rem; background: radial-gradient(ellipse at right top, color-mix(in srgb, var(--accent) 9%, transparent), transparent 65%), var(--surface); }
.subscription-days-ring { position: relative; display: grid; place-items: center; flex: 0 0 5.5rem; width: 5.5rem; height: 5.5rem; }
.subscription-days-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.subscription-days-ring circle { fill: none; stroke-width: 10; }
.subscription-days-track { stroke: color-mix(in srgb, var(--accent) 18%, var(--border)); }
.subscription-days-fill { stroke: var(--accent); stroke-linecap: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent)); }
.subscription-days-ring strong { position: relative; max-width: 75%; color: var(--accent); font-size: 1.15rem; line-height: 1.15; text-align: center; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.subscription-days-ring strong span { font-size: inherit; }
.subscription-days-copy { min-width: 0; flex: 1; }
.subscription-days-copy h2 { margin: 0; font-size: 1rem; line-height: 1.4; }
.subscription-days-copy > p { margin: .35rem 0 0; color: var(--text-muted); font-size: .85rem; line-height: 1.5; }
.subscription-days-copy > small { display: block; margin-top: .35rem; color: var(--text-muted); font-size: .65rem; line-height: 1.5; }
@media (max-width: 760px) { .subscription-days { gap: .7rem; padding: .85rem; } .subscription-days-ring { flex-basis: 4.5rem; width: 4.5rem; height: 4.5rem; } }
.subscription-detail-page .prediction-author-body > div { min-width: 0; overflow-wrap: anywhere; }
.subscription-owner-controls { display: grid; gap: .65rem; }
.subscription-control-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.subscription-control-buttons form { margin: 0; }
.subscription-control-buttons .button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; }
.subscription-control-buttons svg { flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; }
.subscription-control-buttons .button:disabled { cursor: not-allowed; opacity: .5; }
.subscription-owner-controls > p { margin: 0; }
@container (max-width: 680px) {
  .subscription-hero-content { width: 100%; }
  .subscription-hero::before { background: linear-gradient(90deg, rgb(5 16 24 / 95%), rgb(5 16 24 / 70%)); }
}
@container (max-width: 560px) {
  .subscription-hero-facts { grid-template-columns: 1fr; }
  .subscription-hero-facts > div { padding: .65rem .8rem; }
  .subscription-hero-footer .subscription-purchase-action, .subscription-hero-footer .button { width: 100%; }
}

.subscription-buy-dialog .prediction-buy-card h2 { margin: .45rem 0 .25rem; }
.subscription-discount-field { display: grid; gap: .5rem; margin-top: 1.2rem; font-size: .8rem; font-weight: 650; }
.subscription-discount-field select { border: 1px solid var(--border); width: 100%; padding: .75rem; border-radius: .65rem; background: var(--surface-hover); color: var(--text); font: inherit; }
.subscription-buy-dialog [hidden] { display: none !important; }
.subscription-buy-dialog .prediction-buy-close { font-size: 1.5rem; }

.subscription-discount-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.subscription-detail-page { container: subscription-detail / inline-size; }
.subscription-content-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 1.25rem; }
.subscription-content-main { display: grid; gap: 1.25rem; min-width: 0; }
.subscription-content-layout > .prediction-author { min-width: 0; padding: 1.25rem; }
.subscription-content-layout .prediction-block-heading { flex-wrap: wrap; gap: .75rem; }
.subscription-content-layout .prediction-block-heading h2 { font-size: 1.15rem; }
.subscription-content-layout .prediction-block-heading .button { padding: .65rem .8rem; font-size: .75rem; }
.subscription-content-layout .prediction-author-stats { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: .5rem; }
.subscription-content-layout .prediction-author-stats div { padding: .65rem .3rem; }
.subscription-content-layout .prediction-author-stats dt { white-space: nowrap; font-size: .6rem; }
.subscription-content-layout .subscription-days { gap: .85rem; padding: 1.15rem; }
.subscription-content-layout .subscription-days-ring { flex-basis: 4.5rem; width: 4.5rem; height: 4.5rem; }
@container subscription-detail (max-width: 680px) { .subscription-content-layout { grid-template-columns: minmax(0, 1fr); } }

.subscription-material-summary { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center; align-items: center; gap: .4rem 1rem; min-width: 0; padding: 1.15rem; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 1rem; background: radial-gradient(ellipse at right top, color-mix(in srgb, var(--accent) 6%, transparent), transparent 65%), var(--surface); }
.subscription-material-summary h2 { grid-column: 2; grid-row: 1; margin: 0 0 .15rem; font-size: .9rem; line-height: 1.4; }
.subscription-material-summary dl { display: contents; }
.subscription-material-summary dl > div { display: flex; align-items: center; justify-content: space-between; gap: .65rem; min-width: 0; }
.subscription-material-summary dl > div:first-child { grid-column: 1; grid-row: 1 / 4; align-self: stretch; flex-direction: column; justify-content: center; gap: .15rem; padding-right: .7rem; border-right: 1px solid var(--border); }
.subscription-material-summary dl > div:nth-child(2) { grid-column: 2; grid-row: 2; }
.subscription-material-summary dl > div:nth-child(3) { grid-column: 2; grid-row: 3; }
.subscription-material-summary dt { display: flex; align-items: center; gap: .45rem; color: var(--text-muted); font-size: .7rem; line-height: 1.5; }
.subscription-material-summary dd { flex: 0 0 auto; margin: 0; color: var(--text); font-size: .9rem; font-weight: 750; line-height: 1.4; font-variant-numeric: tabular-nums; }
.subscription-material-summary dl > div:first-child dd { order: -1; color: var(--accent); font-size: 2.25rem; line-height: 1.1; }
.subscription-material-summary dl > div:not(:first-child) dt::before { content: ''; flex: 0 0 .3rem; width: .3rem; height: .3rem; border-radius: 50%; background: #d5a147; }
.subscription-material-summary dl > div:nth-child(3) dt::before { background: var(--accent); }
.subscription-material-summary dl > div:nth-child(3) dd { color: var(--accent); }
.subscription-content-layout.has-day-progress { align-items: stretch; }
.has-day-progress > .subscription-content-main { grid-template-rows: repeat(2, minmax(min-content, 1fr)); }
.has-day-progress > .prediction-author { display: flex; flex-direction: column; justify-content: center; }
@container subscription-detail (max-width: 680px) { .has-day-progress > .subscription-content-main { grid-template-rows: auto; } }
.subscription-publication-group { display: grid; gap: .85rem; min-width: 0; }
.subscription-publication-group + .subscription-publication-group { margin-top: .5rem; }
.subscription-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.subscription-group-heading h3 { margin: 0; font-size: .95rem; }
.subscription-group-heading > span { color: var(--text-muted); font-size: .75rem; }

.subscription-card-state { margin-bottom: .65rem; }
.subscription-card-state .status { display: inline-block; }
.subscription-card-period { margin: 0 0 1rem; color: #bacdda; font-size: .72rem; line-height: 1.65; }

@media (min-width: 768px) and (max-width: 1024px) {
  .subscription-grid, .subscription-plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .subscription-grid, .subscription-plans-grid { grid-template-columns: minmax(0, 1fr); }
  .subscription-hero-content { width: 100%; }
  .subscription-hero-facts { grid-template-columns: minmax(0, 1fr); }
  .subscription-hero-footer { flex-wrap: wrap; gap: 16px; }
  .subscription-hero-footer .subscription-purchase-action { width: 100%; }
  .subscription-form { grid-template-columns: minmax(0, 1fr); }
  .subscription-card-heading { flex-wrap: wrap; gap: 12px; }
  .subscription-access { flex-wrap: wrap; gap: 12px; }
}