@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('./golos-text-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('./golos-text-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --outside: #e8e8f0;
  --surface: #f9f9ff;
  --surface-low: #f3f3fa;
  --surface-container: #ededf4;
  --surface-high: #e7e8ee;
  --text: #1a1b21;
  --muted: #44464f;
  --outline: #c4c6d0;
  --outline-strong: #74777f;
  --primary: #1756cc;
  --on-primary: #fff;
  --primary-soft: #d8e2ff;
  --on-primary-soft: #001452;
  --secondary-soft: #dbe2f9;
  --on-secondary-soft: #141b2c;
  --warning: #221b00;
  --warning-soft: #fff0c8;
  --error: #ba1a1a;
  --error-soft: #ffdad6;
  --on-error-soft: #410002;
  --tertiary-soft: #fad8fd;
  --on-tertiary-soft: #28132c;
  --success: #315f4b;
  --success-soft: #d7f0e3;
  --scrim: rgb(18 18 28 / .4);
  --shadow: 0 24px 70px rgb(22 23 35 / .25);
  --ease-enter: cubic-bezier(.05, .7, .1, 1);
  --ease-exit: cubic-bezier(.3, 0, .8, .15);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --feedback: 150ms;
  --state: 200ms;
  --page: 200ms;
  --surface-enter: 350ms;
  --surface-exit: 350ms;
  --safe-top: max(16px, var(--tg-content-safe-top, 0px), env(safe-area-inset-top));
  --safe-right: max(16px, var(--tg-content-safe-right, 0px), env(safe-area-inset-right));
  --safe-bottom: max(0px, var(--tg-content-safe-bottom, 0px), env(safe-area-inset-bottom));
  --safe-left: max(16px, var(--tg-content-safe-left, 0px), env(safe-area-inset-left));
  color-scheme: light;
  font-family: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

:root[data-theme="dark"] {
  --outside: #0a0a0f;
  --surface: #111318;
  --surface-low: #191b21;
  --surface-container: #1d1f26;
  --surface-high: #28292f;
  --text: #e2e2e9;
  --muted: #c4c6d0;
  --outline: #44464f;
  --outline-strong: #8e9099;
  --primary: #afc6ff;
  --on-primary: #002d6f;
  --primary-soft: #00419d;
  --on-primary-soft: #d8e2ff;
  --secondary-soft: #3f4759;
  --on-secondary-soft: #dbe2f9;
  --warning: #f8e0a0;
  --warning-soft: #3d3000;
  --error: #ffb4ab;
  --error-soft: #93000a;
  --on-error-soft: #ffdad6;
  --tertiary-soft: #573d5c;
  --on-tertiary-soft: #fad8fd;
  --success: #9bd4b7;
  --success-soft: #173c2d;
  --scrim: rgb(0 0 0 / .6);
  --shadow: 0 24px 70px rgb(0 0 0 / .48);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-width: 320px; min-height: 100%; margin: 0; overflow: hidden; }
body { min-height: 100dvh; color: var(--text); background: var(--outside); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button, input { font: inherit; -webkit-tap-highlight-color: transparent; }
button { color: inherit; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 72%, white); outline-offset: 2px; }
.skip-link { position: fixed; z-index: 100; inset: 6px auto auto 6px; padding: 8px 12px; color: var(--on-primary); background: var(--primary); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.status { display: grid; place-items: center; height: 100%; padding: 24px; color: var(--muted); text-align: center; }

.app-shell { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; width: min(100%, 430px); height: 100dvh; margin: 0 auto; overflow: hidden; color: var(--text); background: var(--surface-low); isolation: isolate; }
.screen-stage { min-width: 0; min-height: 0; overflow: hidden; }
.screen { width: 100%; height: 100%; min-width: 0; min-height: 0; view-transition-name: app-page; }
.icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; overflow: visible; stroke-width: 2; }

.feed-header { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: var(--safe-top) var(--safe-right) 8px var(--safe-left); background: var(--surface-low); }
.profile-trigger { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 36px; padding: 8px 10px 8px 12px; border: 0; border-radius: 999px; color: var(--on-secondary-soft); background: var(--secondary-soft); text-align: left; cursor: pointer; transition: transform var(--feedback) var(--ease-standard), filter var(--feedback) var(--ease-standard); }
.profile-trigger__name { min-width: 0; margin-right: 4px; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.profile-trigger__status { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; color: var(--on-primary); background: var(--primary); font-size: 11px; font-weight: 500; line-height: 16.5px; }
.profile-trigger__status--muted { color: var(--muted); background: var(--outline); }
.profile-trigger .icon { width: 15px; height: 15px; }
.profile-trigger:active { filter: brightness(.97); transform: scale(.96); }
.header-actions { display: flex; gap: 8px; }
.round-action { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: var(--surface-high); cursor: pointer; transition: transform var(--feedback) var(--ease-standard), color var(--state) var(--ease-standard), background-color var(--state) var(--ease-standard); }
.round-action.is-active { color: var(--on-primary-soft); background: var(--primary-soft); }
.round-action--tonal { color: var(--on-primary-soft); background: var(--primary-soft); }
.round-action:active { transform: scale(.9); }
.filter-status-dot { position: absolute; inset: 6px 6px auto auto; width: 8px; height: 8px; border: 1.5px solid var(--surface-low); border-radius: 50%; background: var(--primary); }
.search-line { grid-column: 1 / -1; display: grid; grid-template-columns: 20px minmax(0, 1fr) 40px; align-items: center; gap: 8px; min-height: 48px; padding-left: 13px; border-radius: 18px; color: var(--muted); background: var(--surface-container); animation: search-open var(--state) var(--ease-standard); }
.search-line input { min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 16px; }
.search-line:focus-within { outline: 3px solid color-mix(in srgb, var(--primary) 72%, white); outline-offset: 2px; }
.search-line button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
@keyframes search-open { from { opacity: .25; transform: scaleX(.96); } }

.screen--feed { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.feed-scroll, .detail-scroll, .content-screen { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.feed-scroll::-webkit-scrollbar, .detail-scroll::-webkit-scrollbar, .content-screen::-webkit-scrollbar { display: none; }
.casting-list { display: grid; gap: 12px; padding: 16px var(--safe-right) calc(16px + var(--safe-bottom)) var(--safe-left); }
.casting-card { position: relative; display: grid; gap: 10px; width: 100%; padding: 16px; border: 0; border-radius: 16px; color: var(--text); background: var(--surface-container); text-align: left; cursor: pointer; transform-origin: center; transition: transform var(--feedback) var(--ease-standard), opacity var(--feedback) var(--ease-standard); }
.casting-card:active { opacity: .9; transform: scale(.985); }
.casting-card[data-returning="true"] { animation: return-cue 420ms var(--ease-enter); }
.casting-card__title-row { display: flex; align-items: start; gap: 8px; }
.casting-card__title { display: block; min-width: 0; flex: 1; font-size: 16px; font-weight: 600; line-height: 1.375; text-wrap: balance; }
.casting-card__facts { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; line-height: 20px; }
.casting-card__facts > span { display: inline-flex; align-items: center; gap: 4px; }
.casting-card__facts .icon { width: 13px; height: 13px; color: var(--muted); }
.casting-card__facts .casting-card__fee { color: var(--text); font-weight: 600; }
.casting-card__facts .casting-card__fee--unknown { color: var(--muted); font-weight: 400; opacity: .7; }
.casting-card__source { color: var(--muted); font-size: 12px; line-height: 16px; opacity: .75; }
.casting-card__reasons { display: grid; gap: 4px; }
.casting-card__match { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.casting-card__reasons--strong .casting-card__match { color: var(--primary); }
.match-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--primary); }
.casting-card__reasons:not(.casting-card__reasons--strong) .match-dot { background: var(--outline-strong); }
.casting-card__warning { display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; border-radius: 8px; color: var(--warning); background: var(--warning-soft); font-size: 12px; line-height: 19.5px; }
.casting-card__warning .icon { width: 13px; height: 13px; margin-top: 1px; }
.casting-card__answer { display: inline-flex; align-items: center; flex: 0 0 auto; max-width: 118px; padding: 2px 8px; border-radius: 999px; color: var(--on-primary-soft); background: var(--primary-soft); font-size: 11px; font-weight: 500; line-height: 16.5px; white-space: nowrap; }
.casting-card__answer--unsure { color: var(--muted); background: var(--surface-high); }
.casting-card__answer--unsuitable { color: var(--on-error-soft); background: var(--error-soft); }
.hidden-count { grid-column: 1 / -1; margin: 2px 0; color: var(--muted); font-size: 12px; text-align: center; }
@keyframes return-cue { 0% { background: var(--primary-soft); } }

.bottom-navigation { position: relative; z-index: 8; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; min-height: calc(62px + var(--safe-bottom)); padding: 0 max(0px, var(--tg-content-safe-right, 0px), env(safe-area-inset-right)) var(--safe-bottom) max(0px, var(--tg-content-safe-left, 0px), env(safe-area-inset-left)); border-top: 1px solid var(--outline); background: var(--surface-container); }
.primary-destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-button { display: grid; justify-items: center; align-content: center; gap: 4px; min-width: 64px; min-height: 62px; padding: 8px; border: 0; color: var(--muted); background: transparent; font-size: 11px; font-weight: 500; line-height: 1; cursor: pointer; }
.nav-button, .settings-row { text-decoration: none; }
.nav-button .icon { width: 22px; height: 22px; padding: 5px 21px; box-sizing: content-box; border-radius: 999px; stroke-width: 1.8; transition: color var(--state) var(--ease-standard), background-color var(--state) var(--ease-standard), transform var(--feedback) var(--ease-standard); }
.nav-button.is-active { color: var(--on-secondary-soft); font-weight: 600; }
.nav-button.is-active .icon { color: var(--on-secondary-soft); background-color: var(--secondary-soft); stroke-width: 2.2; view-transition-name: active-destination; }
.nav-button:active .icon { transform: scale(.88); }
.nav-button--utility { position: relative; min-width: auto; padding-inline: 20px; opacity: .7; }
.nav-button--utility .icon { width: 20px; height: 20px; padding: 5px 0; }
.nav-button--utility.is-active { color: var(--muted); opacity: 1; }
.nav-button--utility.is-active .icon { background: transparent; }

.content-screen { padding: var(--safe-top) var(--safe-right) calc(20px + var(--safe-bottom)) var(--safe-left); }
.page-heading { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-bottom: 12px; padding-inline: 4px; }
.page-heading h1 { margin: 0; font-size: 20px; line-height: 1.15; letter-spacing: -.02em; }
.page-heading--back { justify-content: start; gap: 10px; }
.page-heading--back .round-action { width: 36px; height: 36px; }
.page-heading--back h1 { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-screen[data-screen="profiles"] { padding-top: 20px; }
.content-screen[data-screen="profiles"] .page-heading { min-height: 36px; margin-bottom: 24px; }
.content-screen[data-screen="profiles"] .page-heading .round-action { width: 36px; height: 36px; }
.profile-list { display: grid; gap: 8px; }
.profile-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 16px; width: 100%; min-height: 76px; padding: 16px; border: 0; border-radius: 16px; color: var(--text); background: var(--surface-container); text-align: left; cursor: pointer; transition: background-color var(--state) var(--ease-standard), transform var(--feedback) var(--ease-standard); }
.profile-card:active { transform: scale(.985); }
.profile-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--primary); background: var(--primary-soft); }
.profile-card h2, .profile-card p { margin: 0; }
.profile-card h2 { font-size: 16px; font-weight: 600; line-height: 22px; }
.profile-card p { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.profile-card > .icon:last-child { color: var(--muted); }
.profile-card__icon { color: var(--on-secondary-soft); background: var(--secondary-soft); }
.profile-state { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--primary); font-size: 12px; font-style: normal; line-height: 18px; }
.profile-state .icon { width: 12px; height: 12px; }
.profile-state-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.profile-state--muted { color: var(--outline-strong); }
.profile-state--warning { color: var(--error); }
.quiet-note { margin: 14px 6px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.utility-screen { display: grid; align-content: start; gap: 12px; padding: 0 16px calc(20px + var(--safe-bottom)); }
.utility-screen .page-heading { align-items: start; height: 60px; min-height: 0; margin: 0 -16px 4px; padding: 20px 20px 12px; }
.utility-screen .page-heading h1 { line-height: 28px; }
.utility-screen--nested { background: var(--surface); }
.utility-screen--nested .page-heading { align-items: center; height: 72px; padding: 20px 20px 16px; background: var(--surface-low); }
.utility-screen--nested .page-heading h1 { font-size: 18px; line-height: 24px; }
.utility-screen--nested .page-heading .round-action { color: var(--text); }
.utility-screen--nested .page-heading .round-action .icon { width: 18px; height: 18px; stroke-width: 2.5; }
.settings-group { overflow: hidden; border-radius: 16px; background: var(--surface-container); transition: opacity var(--state) var(--ease-standard); }
.settings-group.is-disabled { opacity: .5; }
.settings-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 16px; border: 0; color: var(--text); background: transparent; text-align: left; }
button.settings-row { cursor: pointer; transition: background-color var(--feedback) var(--ease-standard), transform var(--feedback) var(--ease-standard); }
button.settings-row:active { background: var(--surface-high); transform: scale(.99); }
.settings-row > .icon:first-child { color: var(--primary); }
.settings-row > span:nth-child(2) { display: grid; gap: 2px; }
.settings-row strong { font-size: 14px; font-weight: 500; line-height: 20px; }
.settings-row small { color: var(--muted); font-size: 12px; line-height: 16px; }
.settings-row b { color: var(--primary); font-size: 14px; font-weight: 600; line-height: 20px; }
.settings-row--tall { align-items: start; min-height: 86px; }
.settings-row--tall > .icon:first-child, .settings-row--tall .switch-control { margin-top: 2px; }
.settings-row--tall > .icon:last-child { margin-top: 4px; }
.settings-row--tall small { line-height: 20px; }
.settings-row--tall:has(b) small { line-height: 16px; }
.settings-divider { height: 1px; margin-inline: 16px; background: var(--outline); }
.switch-control { position: relative; width: 48px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: var(--outline); cursor: pointer; transition: background-color 300ms var(--ease-standard); }
.switch-control > span { position: absolute; inset: 4px auto auto 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .22); transition: transform 300ms var(--ease-standard), background-color 300ms var(--ease-standard); }
.switch-control[aria-checked="true"] { background: var(--primary); }
.switch-control[aria-checked="true"] > span { transform: translateX(20px); }
.switch-control:disabled { cursor: default; opacity: .48; }
.version-note { margin: 2px 0 0; color: var(--outline-strong); font-size: 12px; line-height: 16px; text-align: center; opacity: .7; }
.utility-screen--nested .quiet-note { margin: 0 8px; }

.detail-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.detail-content { display: grid; gap: 16px; max-width: 720px; margin: 0 auto; padding: 2px 20px calc(24px + var(--safe-bottom)); }
.profile-caption { justify-self: start; margin: 0; padding: 4px 9px; border-radius: 999px; color: var(--on-secondary-soft); background: var(--secondary-soft); font-size: 12px; line-height: 16px; }
.detail-content h1 { margin: 0; max-width: 28ch; font-size: 20px; line-height: 25px; letter-spacing: -.02em; text-wrap: balance; }
.detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.detail-facts > span { display: flex; align-items: start; gap: 8px; min-height: 44px; padding: 12px; border-radius: 12px; background: var(--surface-high); font-size: 14px; line-height: 1.375; }
.detail-facts .icon { width: 16px; height: 16px; color: var(--primary); }
.detail-description { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.625; }
.detail-section { display: grid; gap: 8px; margin-top: 4px; }
.detail-section h2 { margin: 0; color: var(--outline-strong); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; }
.detail-section ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.detail-section li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; }
.warning-panel { display: grid; gap: 6px; padding: 12px; border-radius: 12px; color: var(--warning); background: var(--warning-soft); font-size: 13px; line-height: 1.4; }
.warning-panel strong { font-size: 12px; line-height: 16px; }
.warning-panel span { font-size: 14px; line-height: 19.25px; }
.score-note, .async-note { margin: 0; color: var(--outline-strong); font-size: 12px; line-height: 16px; }
.score-note { margin-top: 4px; }
.async-note { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.async-note.is-error { position: static; width: auto; height: auto; margin-top: -11px; overflow: visible; clip: auto; white-space: normal; color: var(--error); }
.detail-divider { height: 1px; margin-top: 8px; background: var(--outline); }
.primary-action, .tonal-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 20px; border: 0; border-radius: 999px; color: var(--on-primary); background: var(--primary); font-weight: 600; cursor: pointer; transition: transform var(--feedback) var(--ease-standard), color var(--state) var(--ease-standard), background-color var(--state) var(--ease-standard), opacity var(--state) var(--ease-standard); }
.primary-action:active, .tonal-button:active { transform: scale(.97); }
.detail-content > .primary-action { min-height: 52px; margin-top: 4px; font-size: 16px; line-height: 24px; }
.primary-action:disabled { cursor: default; opacity: .8; }
.async-action { width: 100%; }
.async-action.is-success { color: var(--success); background: var(--success-soft); }
.async-action.is-error { color: var(--error); background: var(--error-soft); }
.spinner { width: 17px; height: 17px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.feedback-control { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.feedback-control legend { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.feedback-control > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border-radius: 15px; background: var(--surface-high); }
.feedback-item { position: relative; display: grid; place-items: center; gap: 6px; min-height: 64px; padding: 12px 5px; border-left: 1px solid var(--outline); color: var(--muted); font-size: 12px; line-height: 16px; text-align: center; cursor: pointer; transition: color var(--state) var(--ease-standard), background-color var(--state) var(--ease-standard); }
.feedback-item .icon { width: 18px; height: 18px; }
.feedback-item:first-child { border-left: 0; }
.feedback-item input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.feedback-item:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: -3px; }
.feedback-item.is-selected { color: var(--on-primary-soft); background: var(--primary-soft); font-weight: 600; }
.feedback-item--unsure.is-selected { color: var(--on-tertiary-soft); background: var(--tertiary-soft); }
.feedback-item--unsuitable.is-selected { color: var(--on-error-soft); background: var(--error-soft); }
.quiet-action { display: inline-flex; align-items: center; justify-self: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; color: var(--outline-strong); background: transparent; cursor: pointer; }
.quiet-action .icon { width: 15px; height: 15px; }
.detail-content > .quiet-action { width: 100%; min-height: 36px; padding: 8px 0; font-size: 14px; line-height: 20px; }

.profile-overview { display: block; padding: 0 0 calc(20px + var(--safe-bottom)); background: var(--surface); }
.profile-overview .page-heading { min-height: 72px; margin: 0; padding: 20px 20px 16px; gap: 12px; background: var(--surface-low); }
.profile-overview .page-heading h1 { font-size: 18px; line-height: 24px; }
.profile-overview .page-heading .round-action { color: var(--text); }
.profile-overview .page-heading .round-action .icon { width: 18px; height: 18px; stroke-width: 2.5; }
.profile-overview .text-action { min-height: 36px; padding: 0; font-size: 14px; font-weight: 500; }
.profile-matching { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 66px; padding: 14px 16px; border-radius: 16px; background: var(--surface-container); }
.profile-overview .profile-matching, .profile-overview .profile-fields, .profile-overview .profile-warning, .profile-overview > .primary-action, .profile-overview > .profile-pause-action { width: calc(100% - 40px); margin-inline: 20px; }
.profile-overview .profile-matching { margin-top: 16px; }
.profile-overview .profile-fields, .profile-overview .profile-warning, .profile-overview > .primary-action { margin-top: 16px; }
.profile-overview > .primary-action { min-height: 52px; font-size: 16px; }
.profile-matching > span, .profile-warning span { display: grid; gap: 3px; }
.profile-warning span { gap: 2px; }
.profile-fields span { display: grid; gap: 0; }
.profile-matching strong, .profile-warning strong { font-size: 14px; }
.profile-warning strong { line-height: 20px; }
.profile-fields strong { font-size: 14px; font-weight: 500; line-height: 20px; }
.profile-matching small, .profile-warning small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.profile-warning small { line-height: 16px; }
.profile-fields small { color: var(--muted); font-size: 12px; line-height: 16px; }
.profile-fields { overflow: hidden; border-radius: 16px; background: var(--surface-container); }
.profile-fields > div { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 16px; min-height: 64px; padding: 14px 16px; border-top: 1px solid var(--outline); }
.profile-fields > div:first-child { border-top: 0; }
.profile-fields .icon { width: 16px; height: 16px; color: var(--primary); }
.profile-warning .icon { width: 18px; height: 18px; color: var(--on-error-soft); }
.profile-pause-action { margin-top: 12px; color: var(--outline-strong); font-size: 14px; font-weight: 500; }
.profile-warning { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 12px; padding: 16px; border-radius: 16px; color: var(--on-error-soft); background: var(--error-soft); }
.profile-warning small { color: currentColor; opacity: .84; }

.empty-state { display: grid; justify-items: center; gap: 9px; padding: 64px 24px; text-align: center; }
.empty-state__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: var(--primary); background: var(--primary-soft); }
.empty-state h2, .empty-state p { margin: 0; }
.empty-state h2 { font-size: 18px; }
.empty-state p { max-width: 32ch; color: var(--muted); font-size: 14px; line-height: 1.45; }
.tonal-button { min-height: 44px; color: var(--on-primary-soft); background: var(--primary-soft); }

.temporary-surface { position: fixed; inset: auto 0 0; display: flex; flex-direction: column; width: min(100%, 640px); max-width: none; max-height: min(82dvh, 680px); margin: 0 auto; padding: 0; overflow: hidden; border: 0; border-radius: 28px 28px 0 0; color: var(--text); background: var(--surface-container); box-shadow: var(--shadow); transform: translateY(var(--drag-y, 100%)); transition: transform var(--surface-exit) var(--ease-exit), height 280ms var(--ease-enter), max-height 280ms var(--ease-enter); }
.temporary-surface:not([open]) { display: none; }
.temporary-surface::backdrop { background: var(--scrim); opacity: 0; transition: opacity var(--surface-exit) var(--ease-exit); }
.temporary-surface[data-phase="open"] { transform: translateY(var(--drag-y, 0px)); transition-duration: var(--surface-enter); transition-timing-function: var(--ease-enter); }
.temporary-surface[data-phase="open"]::backdrop { opacity: 1; transition-duration: var(--surface-enter); transition-timing-function: var(--ease-enter); }
.temporary-surface[data-dragging="true"] { transition: none; }
.temporary-surface[data-dragging="true"]::backdrop { opacity: calc(1 - var(--drag-progress, 0)); transition: none; }
.temporary-surface[data-phase="closing"] { transform: translateY(var(--drag-y, 100%)); }
.temporary-surface[data-phase="closing"]::backdrop { opacity: 0; }
.temporary-surface[data-detent="full"] { max-height: 100dvh; }
.detail-surface { max-height: 92dvh; --surface-enter: 380ms; --surface-exit: 380ms; }
.detail-scroll, .profile-sheet-content, .filter-sheet-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.detail-surface .sheet-drag-zone { min-height: 24px; padding-top: 12px; }
.temporary-surface[data-surface="profile"] { max-height: 70dvh; }
.temporary-surface[data-surface="filters"] { max-height: 80dvh; }
.temporary-surface[data-detent="full"] .profile-sheet-content, .temporary-surface[data-detent="full"] .filter-sheet-content { max-height: none; }
.sheet-drag-zone { display: grid; place-items: center; min-height: 20px; padding-top: 8px; touch-action: none; cursor: grab; }
.sheet-handle { width: 32px; height: 4px; border-radius: 999px; background: var(--outline); }
.sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 2px 16px 8px 20px; }
.sheet-header h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.desktop-sheet-close { display: none; }
.text-action { min-height: 44px; padding: 0 8px; border: 0; color: var(--primary); background: transparent; font-weight: 650; cursor: pointer; }
.sheet-scroll { max-height: calc(min(82dvh, 680px) - 140px); padding: 2px 20px 18px; overflow-y: auto; overscroll-behavior: contain; }
.sheet-footer { padding: 4px 20px calc(18px + var(--safe-bottom)); }
.sheet-footer .primary-action { width: 100%; }
.profile-sheet-content { max-height: calc(70dvh - 20px); padding: 4px 20px 24px; }
.profile-sheet-heading { display: flex; align-items: center; justify-content: space-between; height: 24px; margin-bottom: 16px; }
.profile-sheet-heading h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; }
.profile-options { display: grid; gap: 4px; }
.profile-option { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-radius: 14px; color: var(--text); background: var(--surface-high); text-align: left; cursor: pointer; transition: transform var(--feedback) var(--ease-standard), color var(--state) var(--ease-standard), background-color var(--state) var(--ease-standard); }
.profile-option:active { transform: scale(.985); }
.profile-option.is-selected { color: var(--on-secondary-soft); background: var(--secondary-soft); }
.profile-option.is-selected .profile-state { color: var(--on-secondary-soft); }
.profile-option > span:first-child { display: grid; }
.profile-option strong { font-size: 14px; font-weight: 600; line-height: 18px; }
.profile-option small { margin-top: 2px; color: currentColor; font-size: 12px; line-height: 16px; opacity: .76; }
.profile-option .profile-state { margin-top: 4px; font-size: 11px; line-height: 16px; }
.selection-mark { display: grid; place-items: center; }
.selection-mark .icon { width: 18px; height: 18px; stroke-width: 2.5; }
.filter-sheet-content { max-height: calc(80dvh - 20px); padding: 4px 20px 24px; }
.filter-sheet-heading { display: flex; align-items: center; justify-content: space-between; height: 24px; margin-bottom: 20px; }
.filter-sheet-heading h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; }
.filter-sheet-heading .text-action { position: relative; min-height: 24px; padding: 0; font-size: 14px; font-weight: 500; }
.filter-sheet-heading .text-action::before { position: absolute; inset: -10px; content: ''; }
.filter-form { display: grid; gap: 20px; }
.filter-form fieldset { display: block; min-width: 0; margin: 0; padding: 0; border: 0; }
.filter-form legend { display: block; width: 100%; margin-bottom: 12px; color: var(--outline-strong); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; }
.segmented-control { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segmented-control button { min-height: 40px; padding: 10px 12px; border: 0; border-radius: 999px; color: var(--muted); background: var(--surface-high); font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; cursor: pointer; transition: color var(--state) var(--ease-standard), background-color var(--state) var(--ease-standard), transform var(--feedback) var(--ease-standard); }
.segmented-control button:active { transform: scale(.96); }
.segmented-control button.is-selected { color: var(--on-primary-soft); background: var(--primary-soft); }
.filter-rows { display: grid; gap: 4px; }
.filter-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 44px; padding: 12px 16px; border: 0; border-radius: 12px; color: var(--text); background: var(--surface-high); font-size: 14px; font-weight: 500; line-height: 20px; text-align: left; cursor: pointer; transition: transform var(--feedback) var(--ease-standard), color var(--state) var(--ease-standard), background-color var(--state) var(--ease-standard); }
.filter-row:active { transform: scale(.985); }
.filter-row.is-selected { color: var(--on-primary-soft); background: var(--primary-soft); }
.selection-box { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--outline); border-radius: 6px; transition: border-color var(--state) var(--ease-standard), background-color var(--state) var(--ease-standard); }
.selection-box .icon { width: 15px; height: 15px; }
.filter-row.is-selected .selection-box { border-color: var(--primary); color: var(--on-primary); background: var(--primary); }
.filter-apply { width: 100%; min-height: 52px; margin-top: 24px; font-size: 16px; line-height: 24px; }

@media (hover: hover) and (pointer: fine) {
  .round-action:not(.is-active):not(.round-action--tonal):hover, .casting-card:hover, .profile-option:not(.is-selected):hover, .filter-row:not(.is-selected):hover, button.settings-row:hover { background-color: var(--surface-high); }
  .profile-trigger:hover, .segmented-control button:hover { filter: brightness(.97); }
  .primary-action:hover, .tonal-button:hover { filter: brightness(.96); }
}

.snackbar { position: absolute; z-index: 20; inset: auto 14px calc(80px + var(--safe-bottom)) 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 8px 9px 8px 16px; border-radius: 15px; color: var(--surface); background: var(--text); box-shadow: var(--shadow); animation: snackbar-in var(--state) var(--ease-enter); }
.snackbar button { min-height: 36px; padding: 0 8px; border: 0; color: var(--primary-soft); background: transparent; font-weight: 800; cursor: pointer; }
@keyframes snackbar-in { from { opacity: 0; transform: translateY(8px); } }

::view-transition-group(app-page) { animation-duration: var(--page); animation-timing-function: var(--ease-standard); }
:root::view-transition-old(app-page) { animation-name: page-fade-out; }
:root::view-transition-new(app-page) { animation-name: page-fade-in; }
@keyframes page-fade-out { to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: 0; } }
::view-transition-group(casting-title) { animation-duration: 360ms; animation-timing-function: var(--ease-enter); }
::view-transition-group(casting-surface) { animation-duration: 360ms; animation-timing-function: var(--ease-enter); }
::view-transition-group(active-destination) { animation-duration: var(--page); animation-timing-function: var(--ease-standard); }

@media (min-width: 900px) {
  body { display: grid; place-items: center; padding: 24px; }
  .app-shell { grid-template-columns: 176px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: min(1120px, calc(100vw - 48px)); height: min(820px, calc(100dvh - 48px)); border: 1px solid var(--outline); border-radius: 28px; box-shadow: var(--shadow); }
  .screen-stage { grid-column: 2; }
  .bottom-navigation { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 24px 12px; border-top: 0; border-right: 1px solid var(--outline); background: var(--surface-low); backdrop-filter: none; }
  .primary-destinations { display: grid; grid-template-columns: 1fr; gap: 4px; }
  .nav-button { display: flex; align-items: center; justify-content: start; gap: 10px; min-height: 50px; padding: 0 10px; border-radius: 14px; font-size: 13px; }
  .nav-button .icon, .nav-button--utility .icon { width: 20px; height: 20px; padding: 7px; }
  .nav-button--utility { margin-top: auto; border-top: 1px solid var(--outline); border-left: 0; border-radius: 0; }
  .nav-button--utility.is-active .icon { background: var(--primary-soft); }
  .feed-header { padding: 20px 22px 12px; }
  .casting-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding: 4px 22px 28px; }
  .casting-card { min-height: 214px; }
  .content-screen { padding: 24px; }
  .profile-list, .utility-screen > .settings-group, .utility-screen > .quiet-note, .utility-screen > .version-note { width: min(620px, 100%); }
  .detail-content { padding: 10px 36px 36px; }
  .detail-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .temporary-surface { inset: var(--anchor-top) auto auto var(--anchor-left); width: 370px; max-height: min(620px, calc(100dvh - var(--anchor-top) - 24px)); margin: 0; border-radius: 20px; transform: translateY(-8px) scale(.98); transform-origin: top left; }
  .temporary-surface[data-phase="open"] { transform: translateY(0) scale(1); }
  .temporary-surface[data-phase="closing"] { transform: translateY(-8px) scale(.98); }
  .sheet-drag-zone { display: none; }
  .desktop-sheet-close { display: inline-grid; }
  .detail-surface { inset: 24px 24px 24px auto; width: min(680px, calc(100vw - 248px)); max-height: calc(100dvh - 48px); border-radius: 24px; transform: translateX(24px); transform-origin: center right; }
  .detail-surface[data-phase="open"] { transform: translateX(0); }
  .detail-surface[data-phase="closing"] { transform: translateX(24px); }
  .detail-surface .detail-scroll { max-height: calc(100dvh - 48px); }
  .sheet-scroll { max-height: 420px; }
  .snackbar { inset: auto 22px 22px auto; min-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) *, :root:not([data-motion="full"]) *::before, :root:not([data-motion="full"]) *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
:root[data-motion="reduce"] .profile-trigger:active, :root[data-motion="reduce"] .round-action:active, :root[data-motion="reduce"] .casting-card:active, :root[data-motion="reduce"] .nav-button:active .icon, :root[data-motion="reduce"] .primary-action:active, :root[data-motion="reduce"] .tonal-button:active { transform: none; }
:root[data-motion="reduce"] .spinner { border-right-color: currentColor; animation: none; opacity: .55; }

/* Production-only states extend the approved v2 component language. */
textarea, select { font: inherit; }
textarea:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 72%, white);
  outline-offset: 2px;
}
.muted, .field-help { color: var(--muted); }
.error { color: var(--error); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card, .data-row, .metric-strip, .admin-grid, .group {
  border: 0;
  border-radius: 16px;
  background: var(--surface-container);
}
.card, .data-row { padding: 16px; }
.card h2, .card h3, .card p, .data-row p { margin-top: 0; }
.card h2, .section-heading h2 { font-size: 18px; line-height: 24px; }
.card h3, .data-row strong { font-size: 14px; line-height: 20px; }
.card p:last-child, .data-row p:last-child { margin-bottom: 0; }
.section-heading { display: grid; gap: 3px; margin: 16px 4px 0; }
.section-heading h2, .section-heading p { margin: 0; }
.section-heading p { color: var(--muted); font-size: 12px; line-height: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.action, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  color: var(--on-primary); background: var(--primary); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform var(--feedback) var(--ease-standard), opacity var(--state) var(--ease-standard);
}
.action:active, .button:active { transform: scale(.97); }
.action.secondary, .button.secondary { color: var(--on-primary-soft); background: var(--primary-soft); }
.action:disabled, .button:disabled { cursor: default; opacity: .5; }
.danger-action { color: var(--error) !important; }
.form-grid { display: grid; gap: 14px; }
.form-grid > label, .settings-editor > label, .data-row > label {
  display: grid; gap: 7px; color: var(--outline-strong); font-size: 12px; font-weight: 600;
}
.form-grid input:not([type="checkbox"]), .form-grid textarea, .form-grid select,
.settings-editor input, .data-row input:not([type="checkbox"]) {
  width: 100%; min-height: 48px; padding: 11px 13px; border: 0; border-radius: 12px;
  color: var(--text); background: var(--surface-high); font-size: 16px;
}
.form-grid textarea { min-height: 104px; resize: vertical; }
.field-help { font-size: 11px; font-weight: 400; line-height: 16px; }
.check-field, .check { display: grid; gap: 6px; }
.check { grid-template-columns: 20px minmax(0, 1fr); align-items: center; min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--primary); }
.group { overflow: hidden; }
.group > summary { min-height: 52px; padding: 16px; cursor: pointer; font-weight: 600; }
.group > .form-grid { padding: 0 16px 16px; }
.profile-creator, .profile-editor { display: grid; gap: 16px; margin: 0; }
.profile-editor { padding-bottom: calc(20px + var(--safe-bottom)); }
.profile-creator h2, .profile-editor h2 { margin: 0; }
.settings-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 16px; }
.settings-editor .tonal-button { grid-column: 1 / -1; }
.source-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; color: var(--on-secondary-soft); background: var(--secondary-soft); }
.source-copy { min-width: 0; flex: 1; }
.source-copy h3, .source-copy .meta { margin: 0; }
.meta { color: var(--muted); font-size: 12px; line-height: 17px; }
.data-list { display: grid; gap: 8px; }
.data-row { display: grid; gap: 8px; }
.metric-strip, .admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; }
.metric { display: grid; gap: 3px; min-height: 72px; padding: 14px; background: var(--surface-high); }
.metric b { color: var(--primary); font-size: 20px; line-height: 24px; }
.metric span { font-size: 12px; line-height: 16px; }
.admin-sections { display: flex; gap: 6px; padding: 4px; overflow-x: auto; border-radius: 16px; background: var(--surface-container); scrollbar-width: none; }
.admin-sections::-webkit-scrollbar { display: none; }
.admin-sections button { min-height: 38px; padding: 0 13px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; white-space: nowrap; cursor: pointer; }
.admin-sections button.active { color: var(--on-primary-soft); background: var(--primary-soft); font-weight: 600; }
.completion-copy, .progress, .profile-stats, .profile-search-state, .profiles-intro { display: none; }
.hidden-list { display: grid; grid-column: 1 / -1; gap: 8px; }
.hidden-list > summary { min-height: 36px; padding: 8px; color: var(--muted); font-size: 12px; text-align: center; cursor: pointer; list-style: none; }
.hidden-list > summary::-webkit-details-marker { display: none; }
.form-feedback { margin: 0; padding: 12px; border-radius: 12px; color: var(--on-error-soft); background: var(--error-soft); font-size: 13px; line-height: 19px; }
.form-feedback p:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
  .profile-creator, .profile-editor, .utility-screen > .card, .utility-screen > .data-list,
  .utility-screen > .admin-sections, .utility-screen > .section-heading,
  .utility-screen > .metric-strip, .utility-screen > .group, .utility-screen > .form-grid {
    width: min(720px, 100%);
  }
}