/* Small additions on top of theme.css for the app's own pages. Uses the theme's variables. */
.flash-wrap { padding-top: 1rem; display: grid; gap: .6rem; }
.auth-center { width: 100%; display: grid; place-items: center; }
.auth-title { margin: .4rem 0 0; }
.auth-foot { margin: 0; text-align: center; }
.auth-card > .logo { justify-self: center; align-self: center; }
.hero-copy { gap: 1.1rem; }
.grid-steps { --min: 250px; }
.grid-stats { --min: 180px; }
.grid-coins { --min: 200px; }
.stat-value-md { font-size: var(--fs-xl); }
.stat-value-sm { font-size: var(--fs-md); overflow-wrap: anywhere; }
.header-actions { margin-left: auto; gap: .6rem; }
.footer-brand { gap: .6rem; }
.footer-text { font-size: var(--fs-sm); max-width: 30ch; }
.narrow-panel { max-width: 520px; }
.settings-form { max-width: 760px; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .9rem; }
.filters .input, .filters .select { width: auto; flex: 1 1 170px; }
.input-tiny { width: 76px; }
.field-error { color: var(--c-danger); font-size: var(--fs-xs); font-weight: 700; }
.pos { color: var(--c-leaf-deep); }
.neg { color: var(--c-danger); }
.details { max-width: 340px; overflow-wrap: anywhere; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.table.kv th { width: 34%; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); background: none; }
.pager-center { justify-content: center; margin-top: .9rem; }
.pager .pager-of { border: 0; background: none; min-width: 0; }
.side-button { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; font-size: var(--fs-sm); }
.checklist .ok { color: var(--c-leaf-deep); }
.checklist .bad { color: var(--c-danger); font-weight: 700; }
.checklist .warn { color: var(--c-sun-deep); }
.steps-list { padding-left: 1.2rem; display: grid; gap: .6rem; margin: 0; }
code.secret { letter-spacing: .08em; font-size: var(--fs-md); }
.wrap-anywhere { overflow-wrap: anywhere; font-size: var(--fs-xs); }
.logo-admin { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: 1.25rem; align-items: start; }
.logo-preview { max-height: 80px; max-width: 100%; }
.logo-preview-mark { width: 48px; height: 48px; }
@media (max-width: 640px) { .logo-admin { grid-template-columns: 1fr; } }
/* Ad credits badge (the theme colours the coins) */
.coin-credits { background: var(--g-leaf); }
/* "Advertise here" banner placeholders: sized like the real banner, text shrinks to fit */
.ad-ph { container-type: size; background: repeating-linear-gradient(135deg, var(--c-surface) 0 10px, var(--c-surface-2) 10px 20px); border: 2px dashed var(--c-line-strong); }
.ad-ph::after { content: none; }
.ad-ph > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em; text-align: center; text-decoration: none; color: var(--c-ink-soft); padding: .3em .5em; line-height: 1.2; font-size: clamp(8px, 4.2cqmin, 14px); }
.ad-ph > a:hover { background: color-mix(in srgb, var(--c-leaf-soft) 60%, transparent); }
.ad-ph .ph-title { font-weight: 800; color: var(--c-leaf-deep); font-size: 1.15em; }
.ad-ph .ph-size { font-weight: 700; color: var(--c-ink); }
.ad-ph .ph-mode { color: var(--c-ink-faint); }
@container (max-height: 100px) { .ad-ph > a { flex-direction: row; flex-wrap: wrap; column-gap: .7em; font-size: clamp(8px, 13cqh, 13px); } }
@container (max-height: 64px) { .ad-ph .ph-mode { display: none; } }
@container (max-width: 140px) { .ad-ph .ph-price { font-size: .85em; } }
.ad-zone-box { padding-block: 1rem; }
.zone-row td { vertical-align: top; }
.zone-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; align-items: end; }
.zone-form .field label { font-size: var(--fs-xs); }
.banner-thumb { max-width: 160px; max-height: 60px; display: block; }
.ph-thumb { display: inline-block; padding: .2rem .5rem; border: 1px dashed var(--c-line-strong); border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--c-ink-soft); }
.zone-block { display: grid; gap: .6rem; padding-block: 1rem; border-top: 1px solid var(--c-line); }
.zone-block:first-of-type { border-top: 0; padding-top: 0; }
.order-preview { min-height: 0; }
.order-preview img { display: block; max-width: 100%; height: auto; }
.reject-form { margin: 0; flex: 1 1 320px; }
.advertise-buy { white-space: nowrap; }
/* News */
.news-grid { --min: 260px; }
.news-card { display: flex; flex-direction: column; gap: .4rem; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.news-card:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.news-card h3 { margin: 0; }
.news-card p { margin: 0; }
.news-section { padding-top: 0; }
.narrow-wrap { max-width: 760px; }
.news-post h3, .news-title { margin: 0; }
.news-title { font-size: var(--fs-2xl); }
.news-body { overflow-wrap: anywhere; }
.news-popup-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(15, 30, 40, .45); }
.news-popup { position: static; margin: 0; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; border: 0; box-shadow: var(--sh-2); color: inherit; }
.news-popup h2 { margin: 0; }
/* Pages and FAQ */
.prose h2 { font-size: var(--fs-xl); margin: 1.4rem 0 .4rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: .3rem 0 .8rem; }
.prose li { margin: .2rem 0; }
.prose p { margin: 0 0 .8rem; }
.faq-jump { margin-bottom: 1rem; }
.faq-cat { scroll-margin-top: calc(var(--header-h) + 16px); margin-bottom: 1.5rem; }
.faq-cat h3 { margin: 0 0 .5rem; }
.faq-list { padding: 0; }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--c-leaf-deep); font-weight: 800; }
.faq-item[open] summary::after { content: "−"; }
.faq-item .prose { padding: 0 1.1rem 1rem; }
/* Surf page */
.surf-body { height: 100vh; overflow: hidden; }
.surf-body .surf { height: 100vh; min-height: 0; }
.surf-msg { gap: 0; min-width: 0; }
.surf-target { width: 18px; height: 18px; vertical-align: -4px; color: var(--c-leaf-deep); }
.surf-stats { margin-left: auto; gap: .75rem; }
.surf-flash { padding: .5rem max(16px, 1.5vw) 0; }
.surf-flash .alert { padding: .5rem .8rem; }
.surf-check button[disabled] { opacity: .45; cursor: not-allowed; }
.surf-frame { padding: 0; place-items: stretch; min-height: 0; }
.surf-site-frame { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.surf-note { max-width: 520px; margin: 2rem auto; align-self: start; }
.min0 { min-width: 0; }
@media (max-width: 640px) { .surf-stats .faint { display: none; } }
/* Adpacks */
.grid-plans { --min: 260px; }
.charge-panel { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.charge-text { flex: 1; min-width: 220px; gap: .5rem; }
.charge-text h3, .charge-text p { margin: 0; }
.min-cell { min-width: 160px; }
/* Payments */
.pay-amount { font-size: var(--fs-lg); font-weight: 700; }
/* Network choice with live fees */
.net-choices { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.net-choice { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .7rem .9rem; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); cursor: pointer; font-weight: 400; }
.net-choice:has(input:checked) { border-color: var(--c-leaf); box-shadow: 0 0 0 2px var(--c-leaf-soft); }
.net-choice input { accent-color: var(--c-leaf); }
.net-name { font-weight: 700; }
.net-fee { font-size: var(--fs-sm); color: var(--c-ink-soft); width: 100%; padding-left: 1.6rem; }
.alert[data-fee-tip] { display: block; }
.alert[data-fee-tip][hidden] { display: none; }
.net-share { font-size: var(--fs-sm); width: 100%; padding-left: 1.6rem; font-weight: 600; }
.net-share[hidden] { display: none; }
.net-share.is-ok, .pack-fees li.is-ok { color: var(--c-leaf-deep); }
.net-share.is-high, .pack-fees li.is-high { color: var(--c-sun-deep); }
.pack-fees { font-size: var(--fs-sm); border-top: 1px dashed var(--c-line); padding-top: .6rem; margin-top: .2rem; }
.pack-fees[hidden] { display: none; }
.pack-fees-head { margin: 0 0 .3rem; color: var(--c-ink-soft); }
.pack-fees ul { list-style: none; padding: 0; margin: 0 0 .4rem; display: grid; gap: .15rem; }
.net-choice .badge { margin-left: 1.6rem; }
.net-name { flex: 1; min-width: 0; }
.plan .pack-fees li { display: block; }
.plan .pack-fees li::before { content: none; }
.pack-fees li.is-rec { font-weight: 700; }
.qr-box { display: flex; justify-content: center; }
.qr-box .qr { width: min(220px, 70vw); height: auto; padding: 8px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.inline-form { display: inline; margin-left: .35rem; }
.select-tiny { width: auto; max-width: 11rem; }