:root {
    --bg: #0b0e10;
    --surface: #14181b;
    --raised: #1a2024;
    --raised-2: #21282d;
    --border: #2a3237;
    --border-bright: #3a454c;
    --text: #f5f7f8;
    --muted: #96a1a8;
    --muted-2: #69757c;
    --accent: #ff5a43;
    --accent-soft: #ff806e;
    --accent-ink: #1e0c08;
    --cyan: #65d4df;
    --success: #71d99c;
    --danger: #ff6b6b;
    --warning: #f3bd61;
    --shadow: 0 24px 70px rgba(0, 0, 0, .38);
    --shadow-soft: 0 12px 38px rgba(0, 0, 0, .18);
    --radius: 18px;
}

html { overflow-x: hidden; scrollbar-color: var(--border-bright) var(--bg); }
body { background: radial-gradient(circle at 90% -10%, rgba(255,90,67,.055), transparent 30rem), var(--bg); }
body:has(.modal-layer) { overflow: hidden; }
::selection { color: #fff; background: rgba(255,90,67,.45); }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
em { color: var(--muted-2); font-size: .65rem; font-style: normal; font-weight: 600; }
h1:focus, h2:focus, h3:focus { outline: none; }

.app-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; display: block; }
.icon-button { width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 11px; cursor: pointer; transition: color .16s, background .16s, border-color .16s, transform .16s; }
.icon-button:hover { color: var(--text); background: var(--raised); border-color: var(--border); transform: translateY(-1px); }
.button { min-height: 46px; padding: 10px 18px; border-radius: 12px; letter-spacing: -.01em; transition: transform .16s, filter .16s, background .16s, border-color .16s, box-shadow .16s; }
.button.primary { color: var(--accent-ink); background: linear-gradient(135deg, var(--accent-soft), var(--accent)); box-shadow: 0 10px 25px rgba(255,90,67,.2), inset 0 1px rgba(255,255,255,.24); }
.button.secondary { background: linear-gradient(145deg, var(--raised-2), var(--raised)); border-color: var(--border-bright); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.button.danger { color: #210909; background: var(--danger); }
.button.compact { min-height: 36px; padding: 7px 11px; border-radius: 9px; font-size: .68rem; }
.action-with-icon { display: inline-flex; align-items: center; gap: 7px; }
.auth-download { margin: 18px 0 15px; padding-top: 17px; display: grid; gap: 12px; border-top: 1px solid var(--border); }
.auth-download > div { display: flex; align-items: center; gap: 10px; }
.auth-download > div > div { display: flex; flex-direction: column; }
.auth-download strong { font-size: .74rem; }
.auth-download small { margin-top: 2px; color: var(--muted); font-size: .61rem; }
.auth-download-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--accent); background: rgba(255,90,67,.08); border: 1px solid rgba(255,90,67,.18); border-radius: 10px; }
.auth-download-icon .app-icon { width: 18px; height: 18px; }
.card { background: linear-gradient(145deg, rgba(29,35,39,.96), rgba(18,22,25,.98)); border-color: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft), inset 0 1px rgba(255,255,255,.025); }
.eyebrow, .form-step { color: var(--accent-soft); }
.field-help { display: block; margin-top: 7px; color: var(--muted-2); font-size: .66rem; line-height: 1.5; }
.section-count { color: var(--muted-2); font-size: .7rem; font-weight: 700; }

.side-rail { background: linear-gradient(180deg, #111518, #0f1214); }
.side-rail nav .app-icon { width: 20px; height: 20px; color: var(--muted-2); transition: color .16s, transform .16s; }
.side-rail nav a:hover { color: var(--text); background: rgba(255,255,255,.025); }
.side-rail nav a:hover .app-icon { color: var(--muted); transform: translateX(1px); }
.side-rail nav a.active .app-icon { color: var(--accent); }
.rail-create { width: 100%; margin-top: 22px; }
.rail-user .icon-button { width: 32px; height: 32px; }
.top-bar { background: rgba(11,14,16,.82); }
.top-actions .notification-button { position: relative; border-color: var(--border); background: var(--surface); }
.notification-dot { width: 7px; height: 7px; position: absolute; right: 6px; top: 6px; background: var(--accent); border: 2px solid var(--surface); border-radius: 99px; }
.bottom-nav a > .app-icon { width: 21px; height: 21px; }
.bottom-nav .create-call > span .app-icon { width: 20px; height: 20px; }
.bottom-nav .more-nav { min-width: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #7f898f; background: transparent; border: 0; border-radius: 15px; cursor: pointer; }
.bottom-nav .more-nav > .app-icon { width: 21px; height: 21px; }
.bottom-nav .more-nav.active { color: var(--accent); background: rgba(255,90,67,.09); }

.page { animation: page-enter .25s ease both; }
@keyframes page-enter { from { opacity: 0; transform: translateY(5px); } }
.page-header h1 { margin-bottom: 8px; }
.page-header p { max-width: 610px; }
.back-link { align-items: center; gap: 7px; transition: color .16s, transform .16s; }
.back-link:hover { color: var(--text); transform: translateX(-2px); }
.section-heading > a { display: inline-flex; align-items: center; gap: 5px; }
.section-heading > a:hover { color: var(--text); }

.page-loading { gap: 14px; }
.page-loading p { margin: 0; }
.loading-mark { display: flex; align-items: center; gap: 5px; }
.loading-mark i { width: 7px; height: 7px; background: var(--muted-2); border-radius: 50%; animation: loading-dot .9s ease-in-out infinite; }
.loading-mark i:nth-child(2) { animation-delay: .12s; }
.loading-mark i:nth-child(3) { animation-delay: .24s; }
@keyframes loading-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; background: var(--accent); transform: translateY(-4px); } }
.empty-state { min-height: 300px; padding: 42px 25px; }
.empty-icon { width: 62px; height: 62px; display: grid; place-items: center; color: var(--accent); background: rgba(255,90,67,.08); border: 1px solid rgba(255,90,67,.2); border-radius: 19px; box-shadow: 0 12px 35px rgba(255,90,67,.08); }
.empty-icon .app-icon { width: 29px; height: 29px; }
.empty-state h3 { margin-top: 18px; font-size: 1.35rem; }
.empty-state p { max-width: 430px; margin-bottom: 20px; }
.empty-action { margin-top: 2px; }

.status-pill { gap: 6px; }
.status-pill i { width: 6px; height: 6px; display: block; background: currentColor; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.stake-chip { display: inline-flex; align-items: center; gap: 4px; }
.stake-chip .app-icon { color: var(--warning); }
.bet-card { position: relative; }
.bet-card::before { content: ""; width: 0; height: 2px; position: absolute; top: 0; left: 50%; background: var(--accent); transition: width .2s, left .2s; }
.bet-card:hover::before { width: 100%; left: 0; }
.bet-card-link { padding: 20px; }
.bet-card h2 { font-size: 1.22rem; line-height: 1.3; }
.bet-meta { gap: 12px; }
.bet-meta span { display: inline-flex; align-items: center; gap: 4px; }
.bet-meta span::after { display: none; }
.bet-meta .app-icon { width: 12px; height: 12px; }
.winner-line span, .invitation-line { align-items: center; }
.winner-line span { display: inline-flex; gap: 6px; }
.invitation-line .app-icon { width: 16px; height: 16px; }
.history-bet .bet-card-link { padding-bottom: 52px; }
.repost-link { padding: 7px 10px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,90,67,.08); border: 1px solid rgba(255,90,67,.18); border-radius: 9px; }

.dashboard-hero { overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.025); }
.dashboard-hero::before { content: ""; width: 320px; height: 320px; position: absolute; right: -5%; top: -20%; background: radial-gradient(circle, rgba(255,90,67,.12), transparent 65%); pointer-events: none; }
.dashboard-hero::after { border-color: rgba(255,90,67,.14); }
.stat-strip > div { position: relative; padding: 20px; }
.stat-icon { width: 30px; height: 30px; position: absolute; right: 15px; top: 15px; display: grid; place-items: center; color: var(--muted-2); background: var(--bg); border: 1px solid var(--border); border-radius: 9px; }
.stat-icon .app-icon { width: 15px; height: 15px; }

.filter-tabs { padding-bottom: 3px; }
.filter-tabs button { min-height: 40px; padding-inline: 15px; border-radius: 999px; }
.filter-tabs button.active { box-shadow: 0 7px 18px rgba(255,90,67,.16); }

.form-card { padding: 24px; }
.form-section { gap: 18px; padding: 13px 0 30px; }
.form-section-heading { display: flex; align-items: center; gap: 13px; }
.form-section-heading h2 { margin: 3px 0 0; font-size: 1.15rem; }
.form-section-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--accent); background: rgba(255,90,67,.08); border: 1px solid rgba(255,90,67,.18); border-radius: 12px; }
.form-section-icon .app-icon { width: 20px; height: 20px; }
.choice-grid button { min-height: 112px; position: relative; align-items: center; gap: 4px; border-radius: 14px; transition: background .16s, border-color .16s, transform .16s; }
.choice-grid button:hover { transform: translateY(-2px); border-color: var(--border-bright); }
.choice-grid button > .app-icon { width: 23px; height: 23px; margin-bottom: 6px; }
.choice-check { width: 18px; height: 18px; position: absolute; top: 8px; right: 8px; display: none; place-items: center; color: var(--accent-ink); background: var(--accent); border-radius: 50%; }
.choice-check .app-icon { width: 11px; height: 11px; }
.choice-grid button.selected .choice-check { display: grid; }
.proof-required { position: relative; padding: 16px; }
.proof-required > span { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(255,90,67,.09); border-radius: 11px; }
.proof-required > .app-icon { width: 20px; height: 20px; margin-left: auto; color: var(--muted-2); }
.form-actions { position: sticky; bottom: 0; z-index: 5; margin: 0 -24px -24px; padding: 18px 24px; background: rgba(20,24,27,.92); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); backdrop-filter: blur(15px); }

.bet-detail-hero { padding: 28px; }
.bet-detail-status { justify-content: flex-start; }
.detail-stake { padding: 10px 15px; }
.detail-stake > .app-icon { width: 22px; height: 22px; }
.detail-timeline > div { min-height: 72px; position: relative; padding: 13px 13px 13px 40px; justify-content: center; }
.detail-timeline .app-icon { width: 17px; height: 17px; position: absolute; left: 13px; color: var(--accent); }
.response-panel { position: relative; z-index: 1; }
.result-banner > span .app-icon { width: 20px; height: 20px; }
.invite-share .button { flex: 0 0 auto; }
.participants-card, .proof-panel { padding: 20px; }
.participant-list > div { min-height: 60px; }
.proof-heading-actions { display: flex; align-items: center; gap: 8px; }
.proof-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 11px; }
.proof-grid article { transition: border-color .16s, transform .16s; }
.proof-grid article:hover { border-color: var(--border-bright); transform: translateY(-2px); }
.proof-media { padding: 0 !important; }
.proof-empty { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.proof-empty > span { width: 52px; height: 52px; display: grid; place-items: center; color: var(--accent); background: rgba(255,90,67,.08); border-radius: 15px; }
.proof-empty > span .app-icon { width: 24px; height: 24px; }
.proof-empty h3 { margin: 15px 0 5px; }
.proof-empty p { margin-bottom: 17px; color: var(--muted); font-size: .72rem; }
.decision-callout { margin-top: 14px; padding: 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; background: radial-gradient(circle at 5% 50%, rgba(243,189,97,.12), transparent 25%), linear-gradient(145deg, rgba(29,35,39,.96), rgba(18,22,25,.98)); }
.decision-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--warning); background: rgba(243,189,97,.09); border: 1px solid rgba(243,189,97,.2); border-radius: 14px; }
.decision-icon .app-icon { width: 23px; height: 23px; }
.decision-callout h2 { margin: 4px 0; }
.decision-callout p { margin: 0; color: var(--muted); font-size: .72rem; }

.people-grid, .group-grid { gap: 15px; }
.person-card { padding: 24px 20px 20px; transition: transform .16s, border-color .16s; }
.person-card:hover, .group-card:hover { transform: translateY(-2px); border-color: var(--border-bright); }
.person-card .button { margin-top: 2px; }
.group-card { padding: 20px; transition: transform .16s, border-color .16s; }
.group-icon { width: 56px; height: 56px; }
.group-icon .app-icon { width: 25px; height: 25px; }
.avatar-more { color: var(--muted); background: var(--raised-2); }

.wallet-hero > div:first-child > strong { text-shadow: 0 8px 35px rgba(255,90,67,.15); }
.offapp-notice > span { width: 30px; height: 30px; border: 0; background: rgba(255,90,67,.08); }
.offapp-notice > span .app-icon { width: 16px; height: 16px; }
.ledger-row { min-height: 70px; }
.ledger-row .button { white-space: nowrap; }
.settlement-summary { padding: 16px; display: flex; align-items: center; gap: 13px; background: var(--bg); border: 1px solid var(--border); border-radius: 13px; }
.settlement-summary-icon { width: 45px; height: 45px; display: grid; place-items: center; color: var(--warning); background: rgba(243,189,97,.09); border-radius: 12px; }
.settlement-summary > div { display: flex; flex-direction: column; }
.settlement-summary small, .settlement-summary span { color: var(--muted); }
.settlement-summary strong { margin: 2px 0; font-size: 1.2rem; }
.modal-note { margin: 15px 0 0; padding: 11px; display: flex; gap: 8px; color: var(--muted); background: rgba(101,212,223,.05); border: 1px solid rgba(101,212,223,.13); border-radius: 10px; font-size: .7rem; }
.modal-note .app-icon { color: var(--cyan); }

.profile-hero { padding: 27px; }
.profile-identity h2 { margin: 5px 0 3px; }
.profile-details { margin-top: 14px; overflow: hidden; }
.settings-row { min-height: 72px; padding: 14px 18px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--border); }
.settings-row:last-child { border: 0; }
.settings-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 11px; }
.settings-icon .app-icon { width: 18px; height: 18px; }
.settings-row > div { display: flex; flex-direction: column; }
.settings-row small { color: var(--muted); font-size: .62rem; }

.notification-row { min-height: 82px; position: relative; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; transition: background .16s; }
.notification-row:hover { background: rgba(255,255,255,.018); }
.notification-row > .notification-type { width: 40px; height: 40px; margin: 0; display: grid; place-items: center; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.notification-row.unread > .notification-type { color: var(--accent); background: rgba(255,90,67,.08); border-color: rgba(255,90,67,.18); box-shadow: none; }
.notification-type .app-icon { width: 19px; height: 19px; }
.notification-row > .app-icon { color: var(--muted-2); }
.unread-dot { width: 7px; height: 7px; position: absolute; left: 8px; top: 14px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px var(--accent); }

/* True dialogs and unobtrusive feedback */
.modal-layer { position: fixed; inset: 0; z-index: 300; padding: 22px; display: grid; place-items: center; overflow: auto; }
.modal-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; padding: 0; background: rgba(2,4,5,.74); border: 0; backdrop-filter: blur(7px) saturate(80%); animation: modal-fade .18s ease both; }
.modal-dialog { width: min(100%, 590px); max-height: min(90vh, 850px); position: relative; display: flex; flex-direction: column; background: linear-gradient(150deg, #20262a, #13171a 70%); border: 1px solid var(--border-bright); border-radius: 20px; box-shadow: 0 35px 100px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.05); overflow: hidden; animation: modal-enter .2s cubic-bezier(.2,.8,.2,1) both; }
.modal-dialog:focus { outline: none; }
.modal-dialog.modal-small { width: min(100%, 460px); }
.modal-dialog.modal-large { width: min(100%, 760px); }
.modal-header { padding: 21px 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--border); }
.modal-heading { min-width: 0; display: flex; align-items: flex-start; gap: 13px; }
.modal-heading h2 { margin: 1px 0 4px; font-size: 1.25rem; }
.modal-heading p { margin: 0; color: var(--muted); font-size: .71rem; line-height: 1.5; }
.modal-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; color: var(--accent); background: rgba(255,90,67,.09); border: 1px solid rgba(255,90,67,.18); border-radius: 12px; }
.modal-icon .app-icon { width: 20px; height: 20px; }
.modal-danger .modal-icon { color: var(--danger); background: rgba(255,107,107,.09); border-color: rgba(255,107,107,.2); }
.modal-close { flex: 0 0 auto; }
.modal-body { padding: 22px; overflow: auto; overscroll-behavior: contain; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--border); }
.modal-form { display: grid; gap: 17px; }
.modal-form textarea { min-height: 95px; }
.modal-actions { margin-top: 4px; display: flex; justify-content: flex-end; gap: 9px; }
.modal-inline-empty { padding: 14px; display: flex; align-items: center; gap: 10px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 11px; font-size: .7rem; }
.modal-inline-empty .app-icon { color: var(--accent); }
.mobile-more-list { display: grid; gap: 8px; }
.mobile-more-list > a { min-height: 66px; padding: 10px 11px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 13px; transition: border-color .16s, background .16s, transform .16s; }
.mobile-more-list > a:hover { background: var(--raised); border-color: var(--border-bright); transform: translateX(2px); }
.mobile-more-list > a > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--accent); background: rgba(255,90,67,.08); border-radius: 11px; }
.mobile-more-list > a > span .app-icon { width: 19px; height: 19px; }
.mobile-more-list > a > div { display: flex; flex-direction: column; }
.mobile-more-list strong { font-size: .76rem; }
.mobile-more-list small { margin-top: 2px; color: var(--muted); font-size: .61rem; }
.mobile-more-list > a > .app-icon { color: var(--muted-2); }
.modal-form .member-checks { max-height: 220px; overflow: auto; }
.member-checks label { position: relative; transition: border-color .16s, background .16s; cursor: pointer; }
.member-checks label.selected { border-color: rgba(255,90,67,.45); background: rgba(255,90,67,.07); }
.member-checks label input { position: absolute; opacity: 0; pointer-events: none; }
.file-drop { margin: 0; transition: background .16s, border-color .16s; }
.file-drop:hover, .file-drop.has-file { background: rgba(255,90,67,.04); border-color: var(--accent); }
.file-drop > span { width: 43px; height: 43px; margin-bottom: 9px; display: grid; place-items: center; color: var(--accent); background: rgba(255,90,67,.09); border-radius: 12px; }
.file-drop > span .app-icon { width: 21px; height: 21px; }
.winner-options { display: grid; grid-template-columns: 1fr 1fr; }
.winner-options button { min-height: 58px; position: relative; }
.winner-options button > span:nth-child(2) { display: flex; flex-direction: column; align-items: flex-start; }
.winner-options button small { color: var(--muted); font-size: .58rem; }
.winner-options button > .app-icon { margin-left: auto; color: var(--accent); }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-enter { from { opacity: 0; transform: translateY(10px) scale(.985); } }

.toast { width: min(calc(100% - 28px), 390px); min-height: 76px; position: fixed; z-index: 400; right: 18px; bottom: 18px; padding: 14px 42px 14px 14px; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 11px; color: var(--text); background: rgba(26,32,36,.96); border: 1px solid var(--border-bright); border-radius: 15px; box-shadow: var(--shadow); backdrop-filter: blur(18px); overflow: hidden; animation: toast-enter .25s cubic-bezier(.2,.8,.2,1) both; }
.toast-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; }
.toast-success .toast-icon { color: var(--success); background: rgba(113,217,156,.09); }
.toast-error .toast-icon { color: var(--danger); background: rgba(255,107,107,.09); }
.toast-info .toast-icon { color: var(--cyan); background: rgba(101,212,223,.09); }
.toast strong { display: block; margin: 1px 0 3px; font-size: .78rem; }
.toast p { margin: 0; color: var(--muted); font-size: .67rem; line-height: 1.45; }
.toast > .icon-button { position: absolute; right: 7px; top: 7px; }
.toast-progress { height: 2px; position: absolute; left: 0; bottom: 0; background: var(--accent); animation: toast-progress 4.5s linear both; }
.toast-error .toast-progress { background: var(--danger); animation-duration: 7s; }
@keyframes toast-enter { from { opacity: 0; transform: translateY(15px) scale(.98); } }
@keyframes toast-progress { from { width: 100%; } to { width: 0; } }

#blazor-error-ui { left: auto; right: 18px; bottom: 18px; width: min(calc(100% - 36px), 420px); padding: 15px 42px 15px 16px; color: var(--text); background: #3a1719; border: 1px solid rgba(255,107,107,.35); border-radius: 14px; box-shadow: var(--shadow); }
#blazor-error-ui .reload { margin-left: 8px; color: #ffaaaa; font-weight: 800; }

@media (min-width: 960px) {
    .app-shell { grid-template-columns: 248px 1fr; }
    .page { padding: 48px 42px 76px; }
    .rail-brand { padding-left: 12px; }
}

@media (max-width: 720px) {
    .page { padding-inline: 17px; }
    .page-header { align-items: flex-start; }
    .page-header-actions .button { min-height: 42px; }
    .page-header-actions .button .app-icon { display: none; }
    .decision-callout { grid-template-columns: auto 1fr; }
    .decision-callout .button { grid-column: 1 / -1; width: 100%; }
    .detail-timeline { grid-template-columns: 1fr; }
    .form-actions { margin-inline: -24px; }
    .toast { right: 14px; bottom: calc(91px + env(safe-area-inset-bottom)); }
}

@media (max-width: 520px) {
    .page-header { gap: 12px; }
    .page-header h1 { font-size: 2rem; }
    .dashboard-hero { min-height: 300px; }
    .dashboard-hero::after { right: -22%; }
    .stat-strip > div { padding: 17px 14px; }
    .stat-icon { display: none; }
    .form-card { padding: 18px; }
    .form-actions { margin: 0 -18px -18px; padding: 15px 18px; }
    .choice-grid { grid-template-columns: 1fr; }
    .choice-grid button { min-height: 74px; padding-left: 57px; align-items: flex-start; text-align: left; }
    .choice-grid button > .app-icon { position: absolute; left: 19px; margin: 0; }
    .bet-detail-hero { padding: 20px; }
    .bet-detail-hero h1 { font-size: 2rem; }
    .response-panel, .result-banner { margin-inline: -20px; margin-bottom: -20px; padding-inline: 20px; }
    .invite-share { align-items: stretch; }
    .proof-heading-actions .section-count { display: none; }
    .participants-card, .proof-panel { padding: 16px; }
    .proof-grid { grid-template-columns: 1fr 1fr; }
    .detail-footer-actions { gap: 12px; }
    .detail-footer-actions .button { width: 100%; }
    .ledger-row { grid-template-columns: auto minmax(0,1fr) auto; }
    .ledger-row .button, .settlement-state { grid-column: 2 / 4; justify-self: start; }
    .profile-hero { justify-content: center; text-align: center; }
    .profile-stats { text-align: left; }
    .account-actions { align-items: stretch; flex-direction: column; }
    .modal-layer { padding: 0; place-items: end center; }
    .modal-dialog { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; border-bottom: 0; animation-name: sheet-enter; }
    .modal-dialog.modal-small, .modal-dialog.modal-large { width: 100%; }
    .modal-header { padding: 19px 17px; }
    .modal-body { padding: 18px 17px calc(18px + env(safe-area-inset-bottom)); }
    .modal-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .modal-actions .button { width: 100%; padding-inline: 10px; }
    .winner-options { grid-template-columns: 1fr; max-height: 260px; overflow: auto; }
    @keyframes sheet-enter { from { opacity: 0; transform: translateY(100%); } }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}