:root {
    --navy: #0b1f3a;
    --navy-2: #102a4c;
    --blue: #2563eb;
    --blue-soft: #eaf1ff;
    --gold: #c9a227;
    --ink: #132033;
    --muted: #667085;
    --line: #d9e2ef;
    --panel: #ffffff;
    --page: #f5f7fb;
    --success: #078669;
    --danger: #c2410c;
    --shadow: 0 16px 40px rgba(11, 31, 58, .08);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; color: var(--ink); background: var(--page); letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 284px; min-height: 100vh; padding: 24px 18px; background: var(--navy); color: #d9e7ff; flex-direction: column; position: sticky; top: 0; }
.app-main { min-width: 0; flex: 1; }
.topbar { min-height: 88px; padding: 18px clamp(16px, 3vw, 36px); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(245, 247, 251, .92); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(217,226,239,.72); }
.topbar h1, h2, h3, p { margin-top: 0; }
.topbar h1 { margin-bottom: 0; font-size: clamp(1.35rem, 2vw, 1.95rem); font-weight: 750; }
.content { padding: 24px clamp(16px, 3vw, 36px) 42px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.04rem; color: #fff; margin-bottom: 24px; }
.brand-mark { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; background: #173a66; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.brand svg, .btn svg, .icon-button svg, .metric-card svg, .panel-head svg { width: 18px; height: 18px; stroke-width: 2.2; }
.nav-stack { display: flex; flex-direction: column; gap: 4px; }
.nav-stack a { min-height: 42px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border-radius: 8px; color: #d9e7ff; font-weight: 650; }
.nav-stack a:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-label { margin: 18px 12px 6px; color: #91a7c7; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; display: inline-grid; place-items: center; background: #fff; color: var(--navy); }
.status-pill, .badge-soft, .badge-muted { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 10px; font-weight: 750; font-size: .82rem; white-space: nowrap; }
.status-pill { background: #fff; border: 1px solid var(--line); color: var(--navy); }
.badge-soft { background: var(--blue-soft); color: #174bb9; }
.badge-muted { background: #f1f4f8; color: #526071; }
.eyebrow { color: var(--blue); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 850; margin-bottom: 6px; }
.toastish { padding: 12px 16px; border-radius: 8px; margin: 0 clamp(16px, 3vw, 36px) 12px; font-weight: 700; box-shadow: var(--shadow); }
.toastish.success { background: #ecfdf5; color: #05664f; }
.toastish.error { background: #fff7ed; color: var(--danger); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.metric-card, .panel, .scenario-card, .leader-card, .login-panel { background: var(--panel); border: 1px solid rgba(217,226,239,.88); border-radius: 8px; box-shadow: var(--shadow); }
.metric-card { padding: 18px; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; }
.metric-card svg { color: var(--blue); }
.metric-card span { color: var(--muted); font-weight: 700; }
.metric-card strong { display: block; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1; }
.metric-card.compact { min-height: 100px; }
.section-grid { display: grid; gap: 18px; margin-bottom: 18px; }
.section-grid.two { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.panel { padding: 22px; }
.panel h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 16px; }
.panel-head, .page-actions, .card-top, .card-actions, .filter-row, .wizard-actions, .call-status, .call-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mini-grid div { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.mini-grid span, .info-list span, .score-row span { display: block; color: var(--muted); font-size: .82rem; font-weight: 750; }
.mini-grid strong, .info-list strong { font-size: 1.18rem; }
.integration-mini { margin-bottom: 16px; }
.status-good { color: var(--success); }
.status-warn { color: var(--danger); }
.attention-panel { background: #fffaf0; border-color: #f2dfaa; }
.recommendation { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.skill-pair { display: grid; gap: 10px; width: 100%; }
.skill-pair span { display: flex; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.session-list { display: grid; gap: 10px; }
.session-row { padding: 12px; border: 1px solid var(--line); border-radius: 8px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.session-row:hover { border-color: var(--blue); background: #f8fbff; }
.session-row small { display: block; color: var(--muted); margin-top: 3px; }
.empty-state { padding: 20px; border: 1px dashed #b9c7da; border-radius: 8px; color: var(--muted); background: #fbfcff; }
.page-actions { margin-bottom: 18px; align-items: flex-end; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.scenario-card, .leader-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.scenario-card h3, .leader-card h3 { font-size: 1.14rem; font-weight: 800; margin: 0; }
.scenario-card p, .leader-card p { color: var(--muted); margin-bottom: 0; }
.scenario-card form { margin-top: auto; }
.scenario-context-full { white-space: pre-wrap; color: var(--ink); line-height: 1.6; }
.scenario-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.scenario-facts div { background: #f7f9fc; border-radius: 8px; padding: 10px; }
.scenario-facts dt { color: var(--muted); font-size: .74rem; font-weight: 800; }
.scenario-facts dd { margin: 0; font-weight: 750; }
.card-actions { margin-top: auto; }
.info-list { display: grid; gap: 10px; margin-bottom: 18px; }
.info-list div { padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-list span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fbfcff; font-weight: 700; }
.danger-zone pre { max-height: 360px; overflow: auto; background: #111827; color: #d1fae5; border-radius: 8px; padding: 16px; }
.builder-form { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.quick-scenario-form { display: grid; grid-template-columns: minmax(520px, 1fr) minmax(340px, 460px); gap: 18px; align-items: start; }
.quick-config-panel, .quick-preview-panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.quick-config-panel { padding: 26px; display: grid; gap: 22px; }
.quick-preview-panel { padding: 22px; position: sticky; top: 112px; display: grid; gap: 14px; max-height: calc(100vh - 136px); overflow-y: auto; overscroll-behavior: contain; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 800; width: fit-content; }
.back-link:hover { color: var(--blue); }
.quick-title-block h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 850; margin-bottom: 6px; }
.quick-title-block p { color: var(--muted); margin-bottom: 0; max-width: 760px; }
.quick-field { display: grid; gap: 10px; }
.quick-label { display: block; color: var(--ink); font-weight: 850; }
.field-action-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.field-action-head label { margin: 0; }
.segmented-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.segmented-option, .pill-option { position: relative; cursor: pointer; min-width: 0; }
.segmented-option input, .pill-option input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.segmented-option span { min-height: 82px; display: grid; gap: 4px; align-content: center; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; transition: border-color .15s ease, background .15s ease; }
.segmented-option strong { font-weight: 850; color: var(--navy); line-height: 1.2; }
.segmented-option small { color: var(--muted); font-weight: 650; line-height: 1.35; }
.segmented-option input:checked + span { border-color: #8eb0ff; background: var(--blue-soft); box-shadow: inset 0 0 0 1px #b8cdfd; }
.quick-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.property-lookup-panel.compact { margin-bottom: 0; }
.crm-property-detail-panel { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.plain-property-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plain-property-grid div, .plain-property-note { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.plain-property-grid span, .plain-property-note span { display: block; color: var(--muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.plain-property-grid strong { display: block; margin-top: 3px; color: var(--navy); font-weight: 850; overflow-wrap: anywhere; }
.plain-property-note p { margin: 4px 0 0; color: var(--ink); font-weight: 650; line-height: 1.45; white-space: pre-wrap; }
.voice-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.voice-choice { min-height: 122px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; color: var(--ink); padding: 12px 10px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; font-weight: 800; }
.voice-choice:hover { border-color: #b8cdfd; background: #f8fbff; }
.voice-choice.selected { border-color: #7da2fb; background: var(--blue-soft); box-shadow: inset 0 0 0 1px #b8cdfd; }
.voice-choice span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--blue); font-weight: 900; }
.voice-choice strong { font-size: .9rem; line-height: 1.2; }
.voice-choice small { color: var(--danger); font-size: .72rem; }
.voice-action-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.difficulty-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pill-option span { min-height: 40px; display: inline-grid; place-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fbfcff; color: var(--ink); font-weight: 850; }
.pill-option input:checked + span { border-color: #8eb0ff; background: var(--blue-soft); color: var(--blue); }
.quick-advanced { border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; overflow: hidden; }
.quick-advanced > summary { min-height: 54px; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: var(--navy); font-weight: 850; }
.quick-advanced > summary::marker { content: ''; }
.quick-advanced[open] > summary { border-bottom: 1px solid var(--line); background: #fff; }
.quick-advanced[open] > summary svg { transform: rotate(180deg); }
.advanced-stack { display: grid; gap: 20px; padding: 18px; }
.advanced-stack section { display: grid; gap: 14px; }
.advanced-stack h3 { font-size: 1.02rem; font-weight: 850; margin: 0; }
.quick-save-row { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; padding-top: 2px; }
.quick-preview-card { min-height: 310px; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; padding: 24px; border-radius: 8px; background: linear-gradient(145deg, #f8fbff, #ffffff); border: 1px solid #e3ebf7; }
.quick-avatar { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 2rem; font-weight: 900; }
.quick-preview-card h2 { font-size: 1.25rem; font-weight: 850; margin: 4px 0 0; }
.quick-preview-card p { color: var(--muted); margin-bottom: 0; }
.preview-badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.preview-badges span { border-radius: 999px; background: #f1f5f9; color: #334155; padding: 7px 10px; font-size: .78rem; font-weight: 800; }
.quick-preview-panel .property-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-preview-panel .selling-suggestion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wizard-rail { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; position: sticky; top: 112px; }
.wizard-rail button { width: 100%; border: 0; background: transparent; text-align: left; padding: 10px; border-radius: 8px; display: flex; gap: 10px; align-items: center; color: #526071; font-weight: 750; }
.wizard-rail button span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #eef3fb; color: var(--navy); font-size: .76rem; }
.wizard-rail button.active { background: var(--blue-soft); color: var(--blue); }
.wizard-panel { display: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px; box-shadow: var(--shadow); }
.wizard-panel.active { display: block; }
.form-grid, .check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
label { font-weight: 760; color: var(--ink); }
.label-hint { color: var(--muted); font-size: .78rem; font-weight: 750; margin-left: 4px; }
.full-width-field { display: grid; gap: 6px; width: 100%; }
.form-control, .form-select { border-color: #cfd9e8; border-radius: 8px; min-height: 44px; }
.form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .13); }
.scenario-description-field, .property-notes-field { margin-top: 16px; }
.auto-height-textarea { overflow: hidden; resize: vertical; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.slider-list { display: grid; gap: 13px; }
.slider-list label, .slider-list.compact div, .score-breakdown div { display: grid; grid-template-columns: minmax(130px, 1fr) 42px minmax(120px, 2fr); gap: 12px; align-items: center; }
input[type="range"] { width: 100%; accent-color: var(--blue); }
progress { width: 100%; height: 10px; border: 0; border-radius: 999px; overflow: hidden; }
progress::-webkit-progress-bar { background: #eef3fb; }
progress::-webkit-progress-value { background: var(--blue); }
.wizard-actions { grid-column: 2; justify-content: flex-end; }
.practice-hero, .result-hero { border-radius: 8px; padding: 24px; margin-bottom: 18px; color: #fff; background: var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.practice-hero p, .result-hero p { color: #d9e7ff; margin-bottom: 0; }
.call-screen { display: grid; grid-template-columns: minmax(280px, 420px) minmax(380px, 1fr) minmax(280px, 360px); gap: 18px; align-items: stretch; min-height: calc(100vh - 136px); }
.call-brief, .call-panel, .coach-assist { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 22px; }
.call-brief { position: sticky; top: 112px; max-height: calc(100vh - 136px); overflow-y: auto; overscroll-behavior: contain; }
.call-brief h2 { margin: 12px 0 4px; font-size: 2rem; font-weight: 850; }
.notes-box { display: grid; gap: 8px; }
.notes-box small { color: var(--muted); }
.call-property-photos, .call-property-context, .call-property-details, .call-lookup-panel { display: grid; gap: 10px; margin-bottom: 16px; }
.call-property-photos > span, .call-property-context > span, .call-property-details section > span, .call-lookup-head span { color: var(--muted); font-size: .82rem; font-weight: 750; }
.call-lookup-panel { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.call-lookup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.call-lookup-head small { color: var(--muted); font-size: .74rem; font-weight: 800; }
.lookup-row.compact { gap: 8px; }
.lookup-row.compact .btn { min-height: 44px; }
.call-lookup-results { display: grid; gap: 8px; }
.call-lookup-result { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 10px; text-align: left; color: var(--ink); }
.call-lookup-result:hover, .call-lookup-result.active { border-color: var(--blue); background: var(--blue-soft); }
.call-lookup-result strong, .call-lookup-result span { display: block; }
.call-lookup-result strong { color: var(--navy); font-size: .95rem; line-height: 1.25; }
.call-lookup-result span { margin-top: 4px; color: var(--muted); font-weight: 700; font-size: .8rem; }
.call-lookup-reference { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.call-lookup-reference > span { color: var(--muted); font-size: .78rem; font-weight: 850; }
.call-lookup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.call-lookup-grid p, .call-lookup-private p { margin: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-width: 0; }
.call-lookup-grid small, .call-lookup-private small { display: block; margin-bottom: 4px; color: var(--muted); font-size: .72rem; font-weight: 850; }
.call-lookup-grid strong, .call-lookup-private strong { display: block; color: var(--navy); font-size: .9rem; line-height: 1.28; overflow-wrap: anywhere; }
.call-lookup-private { display: grid; gap: 8px; }
.call-property-photos figure { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.call-property-photos figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #eef3fb; }
.call-property-photos figcaption { padding: 9px 10px; color: var(--muted); font-weight: 750; font-size: .82rem; }
.call-property-photos div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.call-property-photos div img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; background: #eef3fb; }
.call-property-details section { display: grid; gap: 8px; }
.call-property-details section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.call-property-details p { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.call-property-details small { display: block; margin-bottom: 4px; color: var(--muted); font-size: .74rem; font-weight: 800; }
.call-property-details strong { display: block; color: var(--navy); font-size: .94rem; line-height: 1.25; overflow-wrap: anywhere; }
.call-property-context { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.call-property-context p { margin: 0; color: var(--muted); }
.call-property-context strong { color: var(--navy); }
.call-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 136px); text-align: center; }
.coach-assist { position: sticky; top: 112px; max-height: calc(100vh - 136px); overflow-y: auto; overscroll-behavior: contain; align-self: start; display: grid; gap: 14px; }
.coach-assist-head, .coach-section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.coach-assist-head h2 { margin: 0; font-size: 1.35rem; font-weight: 850; }
.coach-section { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.coach-section:first-of-type { border-top: 0; padding-top: 0; }
.coach-section > span, .coach-section-title span { color: var(--muted); font-size: .82rem; font-weight: 800; }
.coach-section strong { color: var(--navy); }
.coach-section p { margin: 0; color: var(--ink); font-weight: 650; line-height: 1.45; }
.coach-script p { padding: 12px; border: 1px solid #b8cdfd; border-radius: 8px; background: var(--blue-soft); color: var(--navy); font-weight: 800; }
.coach-focus-list { margin: 0; padding-left: 18px; color: var(--ink); font-weight: 650; }
.coach-checklist { display: grid; gap: 8px; }
.coach-checklist span { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.coach-checklist span.done { background: #ecfdf5; border-color: #b7eadc; }
.coach-checklist em { color: var(--muted); font-style: normal; font-weight: 800; font-size: .78rem; }
.coach-checklist span.done em { color: var(--success); }
#copyCoachLine.copied { border-color: var(--success); color: var(--success); }
.call-status { width: 100%; margin-bottom: 28px; }
.call-status span { padding: 8px 12px; border-radius: 999px; background: #f1f5f9; color: #334155; font-weight: 800; }
.caller-avatar { width: min(280px, 70vw); aspect-ratio: 1; border-radius: 50%; background: #eef5ff; border: 1px solid #cfe0ff; display: grid; place-items: center; position: relative; color: var(--blue); }
.caller-avatar svg { width: 74px; height: 74px; }
.caller-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.caller-avatar.has-avatar { overflow: hidden; border-color: #d1d5db; background: #f3f4f6; color: #fff; box-shadow: 0 18px 38px rgba(15, 23, 42, .12); }
.caller-avatar.has-avatar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(15,23,42,0) 48%, rgba(15,23,42,.38) 100%); pointer-events: none; }
.caller-avatar-label { display: grid; gap: 2px; margin-top: 12px; text-align: center; }
.caller-avatar-label strong { color: var(--navy); font-size: 1.05rem; line-height: 1.2; }
.caller-avatar-label span { color: var(--muted); font-size: .84rem; font-weight: 750; }
.waveform { position: absolute; bottom: 46px; display: flex; gap: 5px; align-items: center; height: 42px; }
.waveform span { width: 7px; border-radius: 999px; background: var(--blue); height: 16px; animation: wave 1.1s infinite ease-in-out; opacity: .7; }
.caller-avatar.has-avatar .waveform { z-index: 1; bottom: 34px; }
.caller-avatar.has-avatar .waveform span { background: #fff; box-shadow: 0 1px 5px rgba(15, 23, 42, .25); opacity: .9; }
.waveform span:nth-child(2) { animation-delay: .1s; }
.waveform span:nth-child(3) { animation-delay: .2s; }
.waveform span:nth-child(4) { animation-delay: .3s; }
.waveform span:nth-child(5) { animation-delay: .4s; }
@keyframes wave { 50% { height: 38px; } }
.timer { font-size: clamp(2.6rem, 8vw, 5rem); font-weight: 850; margin: 26px 0 6px; color: var(--navy); font-variant-numeric: tabular-nums; }
.call-helper { color: var(--muted); max-width: 540px; margin-bottom: 24px; }
.btn { border-radius: 8px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; }
.btn-primary { background: var(--blue); border-color: var(--blue); }
.btn-outline-primary { color: var(--blue); border-color: #b8cdfd; }
.btn-danger { background: #dc2626; border-color: #dc2626; }
.btn-xl { min-height: 64px; padding: 0 24px; font-size: 1.02rem; }
.result-hero { background: var(--navy); }
.coaching-state { margin-bottom: 18px; }
.coaching-state p { color: var(--muted); margin-bottom: 0; }
.coaching-state.failed { background: #fff7ed; border-color: #fed7aa; }
.result-page { width: min(100%, 1180px); margin: 0 auto 78px; display: grid; gap: 24px; }
.result-intro h2 { font-size: clamp(1.65rem, 3vw, 2.15rem); font-weight: 850; margin-bottom: 8px; }
.result-intro p:not(.eyebrow) { color: var(--muted); max-width: 980px; margin-bottom: 0; }
.result-alert { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid #fdba74; border-radius: 8px; background: #fff7ed; color: #c2410c; font-weight: 750; }
.result-alert svg { width: 18px; height: 18px; }
.result-summary-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.result-score-ring { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; border: 4px solid #b7eadc; color: var(--success); }
.result-score-ring.low { border-color: #fecdd3; color: #f43f5e; }
.result-score-ring strong { font-size: 2.25rem; line-height: 1; font-weight: 850; }
.result-summary-card h2 { margin-bottom: 8px; font-size: 1.22rem; font-weight: 850; }
.result-summary-card p { color: var(--muted); margin-bottom: 0; line-height: 1.55; }
.result-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 352px); gap: 24px; align-items: start; }
.scorecard-panel, .result-side-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.scorecard-panel { padding: 22px; }
.result-panel-head h2 { margin: 0; font-size: 1.22rem; font-weight: 850; }
.result-panel-head p { color: var(--muted); margin: 6px 0 0; }
.scorecard-stack { display: grid; gap: 22px; margin-top: 22px; }
.scorecard-section { display: grid; gap: 9px; }
.scorecard-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.scorecard-section-head h3 { font-size: .98rem; font-weight: 850; margin: 0; }
.scorecard-section-head h3 span { color: var(--muted); font-size: .78rem; font-weight: 700; margin-left: 5px; }
.scorecard-section-head strong { color: var(--navy); font-weight: 850; }
.scorecard-section-head small { color: var(--muted); font-size: .75rem; margin-left: 2px; }
.scorecard-row { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.scorecard-row summary { min-height: 56px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto 20px; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.scorecard-row summary::marker { content: ''; }
.scorecard-row[open] summary { border-bottom: 1px solid var(--line); }
.scorecard-row[open] summary > svg { transform: rotate(180deg); }
.score-status-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #f1f5f9; color: #64748b; }
.score-status-dot.met { background: #ecfdf5; color: var(--success); }
.score-status-dot.missed { background: #f4f4f5; color: #71717a; }
.score-status-dot svg { width: 15px; height: 15px; }
.score-criterion { min-width: 0; color: var(--ink); font-weight: 650; }
.score-mini { color: var(--muted); font-size: .82rem; font-weight: 750; }
.score-status-pill { border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; color: var(--muted); font-size: .7rem; font-weight: 850; }
.score-status-pill.met { border-color: #b7eadc; color: var(--success); background: #ecfdf5; }
.score-status-pill.work { border-color: #fed7aa; color: #c2410c; background: #fff7ed; }
.coach-read { padding: 12px 14px; background: #fbfcff; }
.coach-read span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 850; margin-bottom: 6px; }
.coach-read span svg { width: 14px; height: 14px; }
.coach-read p { margin: 0; line-height: 1.55; }
.result-side { display: grid; gap: 24px; position: sticky; top: 112px; }
.result-side-card { padding: 22px; display: grid; gap: 14px; }
.result-side-card h2 { margin: 0; font-size: 1.08rem; font-weight: 850; }
.talk-ratio-labels { display: flex; justify-content: space-between; gap: 12px; color: var(--ink); font-weight: 700; }
.talk-ratio-bar { height: 14px; border-radius: 999px; overflow: hidden; background: linear-gradient(to right, #10b981 0 var(--staff-talk), #3b82f6 var(--staff-talk) 100%); }
.result-side-card p { color: var(--muted); font-size: .86rem; line-height: 1.35; margin: 0; }
.icon-button.small { width: 36px; height: 36px; }
.audio-shell { min-height: 54px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.audio-play { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #111827; color: #fff; }
.audio-shell b { color: var(--muted); font-size: .82rem; }
.result-transcript { max-height: 470px; overflow-y: auto; display: grid; gap: 8px; padding-right: 3px; }
.result-transcript article { padding: 10px 12px; border-left: 3px solid #bfdbfe; background: #eff6ff; border-radius: 8px; }
.result-transcript article.staff { border-left-color: #86efac; background: #f0fdf4; }
.result-transcript span { display: flex; justify-content: space-between; gap: 10px; color: #3b82f6; font-size: .78rem; font-weight: 800; }
.result-transcript article.staff span { color: var(--success); }
.result-transcript p { margin: 5px 0 0; line-height: 1.45; }
.result-tabs { padding: 0; overflow: hidden; width: min(100%, 730px); }
.result-tabs .nav-tabs { padding: 12px 18px 0; border-bottom-color: var(--line); }
.result-tabs .nav-link { color: var(--muted); font-weight: 750; border: 0; border-bottom: 2px solid transparent; }
.result-tabs .nav-link.active { color: #000; border-bottom-color: #000; background: transparent; }
.result-tab-content { padding: 22px; }
.takeaway-list { list-style: none; display: grid; gap: 18px; margin: 0; padding: 0; }
.takeaway-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
.takeaway-list span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #000; color: #fff; font-size: .78rem; font-weight: 850; }
.takeaway-list p, .result-tab-content p { margin: 0; color: var(--ink); line-height: 1.6; }
.history-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.history-grid div { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.history-grid span { color: var(--muted); font-size: .78rem; font-weight: 800; display: block; }
.history-grid strong { color: var(--navy); }
.result-action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; min-height: 64px; display: flex; justify-content: center; align-items: center; gap: 28px; padding: 10px clamp(16px, 3vw, 36px); border-top: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(12px); }
.result-action-bar > span { color: var(--muted); }
.result-action-bar > div { display: flex; gap: 10px; align-items: center; }
.score-orb { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--navy); text-align: center; flex: 0 0 auto; }
.score-orb strong { font-size: 3.2rem; line-height: .9; }
.score-orb span { color: var(--muted); font-size: .78rem; font-weight: 800; }
.score-breakdown, .feedback-stack, .key-moments, .better-response { display: grid; gap: 13px; }
.feedback-stack section { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.feedback-stack h3 { font-size: 1rem; font-weight: 850; }
.key-moments a { padding: 12px; border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 12px; }
.better-response span { color: var(--blue); text-transform: uppercase; letter-spacing: .08em; font-weight: 850; font-size: .74rem; }
blockquote { margin: 0; padding: 12px; background: #f8fbff; border-left: 4px solid var(--blue); border-radius: 8px; }
.transcript-tools { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; margin-bottom: 16px; }
.transcript-list { display: grid; gap: 12px; }
.transcript-turn { max-width: 760px; padding: 16px; border-radius: 8px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.transcript-turn.staff { margin-left: auto; background: #f8fbff; }
.transcript-turn span { color: var(--muted); font-size: .78rem; font-weight: 850; }
.transcript-turn p { margin: 8px 0 0; }
.transcript-turn em { display: inline-block; margin-top: 10px; color: var(--gold); font-style: normal; font-weight: 850; }
.responsive-table { overflow-x: auto; }
.filter-row { margin-bottom: 16px; }
.rank { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 850; }
.save-bar { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.test-output { color: var(--muted); font-weight: 700; min-height: 24px; margin-top: 10px; }
.test-output.error { color: var(--danger); }
.mobile-offcanvas { background: var(--navy); color: #fff; }
.mobile-offcanvas .offcanvas-body { padding-top: 0; }
.config-form { display: grid; gap: 18px; }
.config-form h3 { font-size: 1.05rem; font-weight: 850; margin: 8px 0 0; }
.panel-inline-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-inline-head h2 { margin-bottom: 0; }
.button-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.form-span-2 { grid-column: 1 / -1; }
.code-textarea { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .92rem; }
.property-lookup-panel { display: grid; gap: 10px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.lookup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.property-results { display: grid; gap: 8px; }
.property-result { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 11px 12px; text-align: left; color: var(--ink); }
.property-result:hover { border-color: var(--blue); background: #f8fbff; }
.property-result strong, .property-result span { display: block; }
.property-result span { margin-top: 3px; color: var(--muted); font-weight: 650; font-size: .86rem; }
.crm-property-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; margin-top: 14px; border: 1px solid #b8cdfd; border-radius: 8px; background: var(--blue-soft); }
.crm-property-summary strong, .crm-property-summary span { display: block; }
.crm-property-summary span { color: var(--muted); font-weight: 700; margin-top: 3px; }
.property-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.property-photo-grid figure { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.property-photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #eef3fb; }
.property-photo-grid figcaption { padding: 9px 10px; color: var(--muted); font-weight: 750; font-size: .82rem; }
.crm-remarks-preview { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border: 1px dashed #b9c7da; border-radius: 8px; background: #fbfcff; }
.crm-remarks-preview div { display: grid; gap: 3px; padding-top: 8px; border-top: 1px solid var(--line); }
.crm-remarks-preview div:first-of-type { border-top: 0; padding-top: 0; }
.crm-remarks-preview strong { color: var(--navy); font-size: .82rem; }
.crm-remarks-preview span { color: var(--muted); font-weight: 650; }
.crm-selling-summary { margin-top: 16px; padding: 14px; border: 1px solid #b8cdfd; border-radius: 8px; background: #f8fbff; }
.crm-selling-summary ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-weight: 650; }
.selling-suggestion-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.selling-suggestion-grid span { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-weight: 750; }
.selling-suggestion-grid strong { color: var(--muted); font-size: .76rem; text-transform: uppercase; }
.advanced-config { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.advanced-config summary { cursor: pointer; color: var(--muted); font-weight: 850; }
.advanced-config label { display: grid; gap: 8px; margin-top: 12px; }
.repeat-stack { display: grid; gap: 12px; }
.repeat-row { display: grid; gap: 12px; align-items: end; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.repeat-row.suggested { border-color: #b8cdfd; background: #f8fbff; }
.objective-row { grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.2fr) 44px; }
.hidden-fact-row { grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr) 44px; }
.objection-row { grid-template-columns: minmax(220px, 1.5fr) minmax(160px, 1fr) minmax(120px, .7fr) 110px 110px 100px 44px; }
.voice-row { grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.2fr) 44px 44px; }
.voice-select-field { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; align-items: end; }
.voice-select-field label { min-width: 0; }
.voice-preview, .repeat-remove { align-self: center; }
.login-body { min-height: 100vh; display: grid; place-items: center; background: var(--navy); padding: 20px; }
.login-wrap { width: min(100%, 520px); }
.login-panel { padding: clamp(24px, 5vw, 38px); }
.login-brand { color: var(--navy); margin-bottom: 28px; }
.login-panel h1 { font-size: clamp(2rem, 7vw, 3.2rem); font-weight: 850; line-height: 1; }
.login-panel p { color: var(--muted); }
.demo-accounts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; color: var(--muted); }
.demo-accounts code { background: #eef3fb; color: var(--navy); padding: 5px 7px; border-radius: 6px; }

.sidebar { width: 248px; background: #fff; color: #111827; border-right: 1px solid #e5e7eb; box-shadow: none; }
.brand { color: #111827; }
.brand-mark { background: #f3f4f6; color: #111827; box-shadow: none; }
.nav-label { color: #6b7280; text-transform: none; letter-spacing: 0; font-size: .78rem; margin: 20px 6px 6px; }
.nav-stack { gap: 2px; }
.nav-stack a { min-height: 36px; color: #111827; border-radius: 8px; padding: 8px 10px; font-weight: 500; }
.nav-stack a:hover, .nav-stack a.active { background: #f4f4f5; color: #000; }
.nav-stack a svg { width: 17px; height: 17px; }
.topbar { min-height: 72px; background: rgba(255,255,255,.94); border-bottom-color: #e5e7eb; box-shadow: none; }
.topbar h1 { font-size: 1.25rem; }
.topbar .eyebrow { display: none; }
.content { background: #fff; min-height: calc(100vh - 72px); }
.btn.sim-dark-btn, .sim-save-btn { background: #111; border-color: #111; color: #fff; }
.btn.sim-dark-btn:hover, .sim-save-btn:hover { background: #000; border-color: #000; color: #fff; }

.sim-page { width: min(100%, 1120px); margin: 0 auto; display: grid; gap: 30px; }
.sim-hero { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 6px 0 10px; }
.sim-hero-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sim-icon { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; background: #f4f4f5; color: #111; flex: 0 0 auto; }
.sim-icon svg { width: 24px; height: 24px; }
.sim-hero h2, .sim-form-head h2, .sim-config-head h2 { margin: 0; color: #000; font-size: 1.55rem; font-weight: 750; letter-spacing: 0; }
.sim-hero p, .sim-form-head p, .sim-config-head p, .sim-muted { margin: 4px 0 0; color: #6b7280; }
.sim-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sim-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.sim-tabs a, .sim-chip span { min-height: 32px; display: inline-grid; place-items: center; border-radius: 8px; background: #f4f4f5; color: #52525b; padding: 7px 14px; font-size: .9rem; font-weight: 500; }
.sim-tabs a.active, .sim-tabs a:hover, .sim-chip input:checked + span { background: #000; color: #fff; }
.sim-section { display: grid; gap: 14px; }
.sim-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sim-section-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; color: #000; font-size: .98rem; font-weight: 700; }
.sim-section-head h3 span { color: #6b7280; font-weight: 500; font-size: .86rem; }
.sim-section-head a { color: #6b7280; font-weight: 600; font-size: .9rem; }
.sim-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sim-card, .sim-create-card { min-height: 224px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; overflow: hidden; color: #111; }
.sim-card { display: grid; grid-template-rows: 120px minmax(0, 1fr); }
.sim-card-media { display: grid; place-items: center; background: #fafafa; }
.sim-avatar { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #d1d5db; color: #111827; font-weight: 800; font-size: 1.1rem; }
.sim-avatar.sm { width: 58px; height: 58px; font-size: .95rem; }
.sim-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.sim-card-body { padding: 14px; text-align: center; display: grid; align-content: start; gap: 8px; }
.sim-card h3 { margin: 0; color: #000; font-size: .98rem; font-weight: 750; line-height: 1.3; }
.sim-card p { margin: 0; color: #6b7280; font-size: .86rem; line-height: 1.35; }
.sim-card-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.sim-card-actions span { border: 1px solid #e5e7eb; border-radius: 999px; padding: 3px 8px; color: #111; font-size: .72rem; font-weight: 600; }
.sim-card-actions a { color: #6b7280; font-size: .85rem; font-weight: 500; }
.sim-card-actions a:hover { color: #000; }
.sim-create-card { display: grid; place-items: center; align-content: center; gap: 14px; border-style: dashed; color: #52525b; }
.sim-create-card span { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #f4f4f5; color: #71717a; }
.sim-create-card svg { width: 28px; height: 28px; }
.sim-create-card strong { font-weight: 500; }

.sim-form, .sim-config-form { width: min(100%, 624px); margin: 8px auto 48px; display: grid; gap: 18px; }
.sim-config-form { padding-bottom: 86px; }
.sim-back { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: #111; font-weight: 500; font-size: .9rem; }
.sim-back svg { width: 16px; height: 16px; }
.sim-form-head { display: grid; gap: 4px; margin-bottom: 4px; }
.sim-field { display: grid; gap: 8px; color: #111; font-weight: 500; }
.sim-field-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sim-field > span, .sim-field label > span { color: #111; font-weight: 500; font-size: .86rem; }
.sim-field-head > span { color: #111; font-weight: 500; font-size: .86rem; }
.sim-field em { color: #71717a; font-style: normal; font-weight: 400; }
.sim-form .form-control, .sim-form .form-select, .sim-config-form .form-control, .sim-config-form .form-select { min-height: 38px; border-color: #d4d4d8; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.04); font-size: .92rem; }
.sim-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sim-chip { position: relative; cursor: pointer; }
.sim-chip input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.sim-chip span { min-height: 34px; font-size: .82rem; }
.sim-property-box { display: grid; gap: 10px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafafa; }
.sim-voice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sim-voice-card { min-height: 86px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px solid #f0f0f0; border-radius: 8px; background: #fafafa; color: #111; }
.sim-voice-card span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #e5e7eb; color: #111827; font-weight: 800; }
.sim-voice-card img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.sim-voice-card strong { font-size: .76rem; font-weight: 500; }
.sim-voice-card.selected { border-color: #111; background: #fff; box-shadow: inset 0 0 0 1px #111; }
.sim-preview-voice { width: fit-content; }
.sim-save-btn { width: 100%; min-height: 40px; border-radius: 6px; }
.sim-config-head { display: flex; align-items: center; gap: 14px; }
.sim-linked-reference { display: grid; gap: 3px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafafa; }
.sim-linked-reference span { color: #71717a; font-size: .78rem; font-weight: 600; }
.sim-linked-reference strong { color: #111; }
.sim-linked-reference p { margin: 0; color: #71717a; font-size: .86rem; }
.sim-config-actions { position: sticky; bottom: 0; z-index: 18; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin: 0 -12px -86px; padding: 12px; border-top: 1px solid #e5e7eb; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); box-shadow: 0 -14px 28px rgba(15,23,42,.06); }
.sim-config-actions .sim-save-btn { width: 100%; }

body.full-screen-call { overflow: hidden; background: #070a16; }
.app-shell-full, .app-shell-full .app-main, .content-full-screen { min-height: 100vh; }
.app-shell-full { display: block; }
.content-full-screen, .content.content-full-screen { padding: 0; background: #070a16; }
.call-stage.call-screen { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 0; min-height: 100vh; height: 100vh; overflow: hidden; padding: 26px clamp(18px, 3vw, 46px) 30px; color: #f8fafc; background: #070a16; }
.call-stage-grid { position: absolute; inset: 0; z-index: -1; background-color: #070a16; background-image: linear-gradient(rgba(148,163,184,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.055) 1px, transparent 1px); background-size: 40px 40px; }
.call-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,10,22,.05), rgba(2,6,23,.66)); pointer-events: none; }
.call-stage-top { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(240px, auto); align-items: center; gap: 18px; min-height: 48px; }
.call-stage-top p { margin: 0; color: #8b94aa; font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-stage-link { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #cbd5e1; background: rgba(255,255,255,.06); border: 1px solid rgba(148,163,184,.14); }
.call-stage-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.call-stage .call-status { width: auto; margin: 0; justify-content: flex-end; gap: 10px; }
.call-stage .call-status span { background: rgba(255,255,255,.07); color: #cbd5e1; border: 1px solid rgba(148,163,184,.12); }
.call-stage .call-panel { min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.call-stage-main { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; place-items: center; align-content: stretch; min-height: 0; }
.call-participants { width: min(100%, 780px); display: grid; grid-template-columns: repeat(2, minmax(210px, 1fr)); gap: clamp(52px, 7vw, 112px); align-items: start; justify-content: center; align-self: center; }
.call-person { display: grid; justify-items: center; gap: 10px; text-align: center; min-width: 0; }
.call-person h2, .call-stage .caller-avatar-label strong { margin: 0; color: #fff; font-size: 1.45rem; line-height: 1.16; font-weight: 850; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.call-person p, .call-stage .caller-avatar-label span { margin: 0; color: #818ca3; font-size: 1rem; font-weight: 700; }
.call-person-ring { position: relative; width: clamp(210px, 21vw, 284px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.call-person-ring::before, .call-person-ring::after { content: ""; position: absolute; border-radius: inherit; pointer-events: none; }
.call-person-ring::before { inset: -10px; border: 1px solid rgba(96,165,250,.38); box-shadow: 0 0 0 8px rgba(37,99,235,.08), 0 20px 70px rgba(37,99,235,.14); }
.call-person-ring::after { inset: -19px; border: 1px solid rgba(96,165,250,.18); }
.call-person-ring-self::before { border-color: rgba(16,185,129,.28); box-shadow: 0 0 0 8px rgba(16,185,129,.08), 0 20px 70px rgba(16,185,129,.1); }
.trainee-avatar { width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 50%; display: grid; place-items: center; background: #a846c7; color: #fff; font-size: 7rem; font-weight: 500; border: 4px solid rgba(2,6,23,.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.call-stage .caller-avatar { width: calc(100% - 24px); height: calc(100% - 24px); border: 4px solid rgba(2,6,23,.82); background: rgba(255,255,255,.92); color: #6b7280; box-shadow: none; overflow: hidden; }
.call-stage .caller-avatar svg { width: 70px; height: 70px; }
.call-stage .caller-avatar.has-avatar { border-color: rgba(2,6,23,.82); box-shadow: none; }
.call-stage .caller-avatar img { object-position: center; }
.call-stage .caller-avatar-label { margin-top: 0; gap: 4px; }
.call-stage .waveform { bottom: 34px; z-index: 2; }
.call-stage .waveform span { background: #fff; box-shadow: 0 1px 5px rgba(15,23,42,.25); opacity: .95; }
.call-stage .call-helper { align-self: end; margin: 0 0 18px; max-width: 740px; min-height: 24px; color: #94a3b8; text-align: center; line-height: 1.45; }
.call-stage .call-controls { align-self: end; justify-content: center; gap: 18px; width: auto; margin: 0; flex-direction: row; flex-wrap: wrap; }
.call-icon-button { position: relative; width: 70px; height: 70px; border: 0; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(255,255,255,.11); color: #f8fafc; box-shadow: 0 12px 28px rgba(0,0,0,.22); transition: transform .15s ease, background .15s ease, opacity .15s ease; }
.call-icon-button:hover:not(:disabled) { transform: translateY(-1px); background: rgba(255,255,255,.17); }
.call-icon-button:disabled { cursor: not-allowed; opacity: .58; }
.call-icon-button svg { width: 26px; height: 26px; stroke-width: 2.2; }
.call-icon-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.call-primary-control { background: #2563eb; }
.call-primary-control:hover:not(:disabled) { background: #1d4ed8; }
#startCall:disabled { opacity: 1; }
.call-stage.is-call-active #startCall { display: none; }
.call-end-control { background: #dc2626; }
.call-end-control:hover:not(:disabled) { background: #b91c1c; }
.call-stage .timer { margin: 0 18px; min-width: 132px; color: #dbeafe; font-size: 1.45rem; font-weight: 760; text-align: center; font-variant-numeric: tabular-nums; }
.call-stage .call-drawer { position: absolute; top: 0; bottom: 0; z-index: 20; width: min(440px, 92vw); max-height: none; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 0; box-shadow: 0 28px 70px rgba(0,0,0,.38); background: #fff; color: var(--ink); transition: transform .2s ease; }
.call-stage .call-drawer-left { left: 0; transform: translateX(-104%); }
.call-stage .call-drawer-right { right: 0; transform: translateX(104%); }
.call-stage .call-drawer.open { transform: translateX(0); }
.call-drawer-backdrop { display: none; position: absolute; inset: 0; z-index: 15; background: rgba(2,6,23,.56); backdrop-filter: blur(2px); }
.call-stage.drawer-open .call-drawer-backdrop { display: block; }
.call-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.call-drawer-head strong { color: var(--navy); font-size: 1.05rem; }
.call-stage .coach-assist-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.call-stage .coach-assist-head .icon-button { flex: 0 0 auto; }

@media (max-width: 1540px) {
    .call-screen { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
    .coach-assist { grid-column: 1 / -1; position: static; max-height: none; overflow: visible; }
}

@media (max-width: 1180px) {
    .metric-grid, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sim-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .call-screen, .section-grid.two, .quick-scenario-form, .result-layout { grid-template-columns: 1fr; }
    .call-screen { min-height: 0; }
    .call-brief, .coach-assist, .quick-preview-panel, .result-side { position: static; max-height: none; overflow: visible; }
    .call-panel { min-height: 620px; }
}

@media (max-width: 768px) {
    .topbar { align-items: flex-start; }
    .topbar-actions .status-pill { display: none; }
    .content { padding-top: 16px; }
    .metric-grid, .card-grid, .form-grid, .check-grid, .mini-grid, .builder-form, .quick-two, .segmented-grid, .result-summary-card, .history-grid { grid-template-columns: 1fr; }
    .sim-card-grid, .sim-voice-grid, .sim-config-actions { grid-template-columns: 1fr; }
    .sim-hero { align-items: stretch; flex-direction: column; }
    .sim-hero-actions { justify-content: flex-start; }
    .lookup-row, .property-photo-grid, .selling-suggestion-grid, .voice-card-grid, .plain-property-grid, .quick-preview-panel .property-photo-grid, .quick-preview-panel .selling-suggestion-grid { grid-template-columns: 1fr; }
    .objective-row, .hidden-fact-row, .objection-row, .voice-row { grid-template-columns: 1fr; }
    .scorecard-row summary { grid-template-columns: 28px minmax(0, 1fr) auto; }
    .scorecard-row summary > svg, .score-mini { display: none; }
    .result-action-bar { position: static; flex-direction: column; align-items: stretch; gap: 10px; }
    .result-action-bar > div, .result-action-bar .btn, .result-action-bar form { width: 100%; }
    .form-span-2 { grid-column: 1; }
    .wizard-rail { position: static; display: flex; overflow-x: auto; }
    .wizard-rail button { min-width: 190px; }
    .wizard-actions { grid-column: 1; flex-wrap: wrap; }
    .page-actions, .practice-hero, .result-hero { align-items: stretch; flex-direction: column; }
    .call-panel { min-height: 520px; }
    .call-controls { width: 100%; flex-direction: column; }
    .call-controls .btn { width: 100%; }
    .transcript-tools { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .topbar h1 { font-size: 1.25rem; }
    .metric-card { min-height: 112px; }
    .panel, .scenario-card, .call-brief, .call-panel, .coach-assist, .quick-config-panel, .quick-preview-panel { padding: 16px; }
    .slider-list label, .slider-list.compact div, .score-breakdown div { grid-template-columns: 1fr 38px; }
    .slider-list progress, .score-breakdown progress, .slider-list input { grid-column: 1 / -1; }
    .caller-avatar { width: min(240px, 78vw); }
}

@media (max-width: 860px) {
    .call-stage.call-screen { padding: 18px 14px 22px; }
    .call-stage-top { grid-template-columns: 48px minmax(0, 1fr); }
    .call-stage-top .call-status { grid-column: 1 / -1; justify-content: center; flex-wrap: wrap; }
    .call-participants { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .call-person-ring { width: min(38vw, 188px); }
    .call-person h2, .call-stage .caller-avatar-label strong { font-size: 1.08rem; }
    .call-person p, .call-stage .caller-avatar-label span { font-size: .84rem; }
    .trainee-avatar { font-size: 4.2rem; }
    .call-stage .call-helper { font-size: .9rem; margin-bottom: 14px; }
    .call-stage .call-controls { flex-direction: row; gap: 10px; width: 100%; }
    .call-icon-button { width: 56px; height: 56px; }
    .call-icon-button svg { width: 22px; height: 22px; }
    .call-stage .timer { min-width: 96px; margin: 0 4px; font-size: 1.12rem; }
}

@media (max-height: 720px) and (min-width: 861px) {
    .call-stage.call-screen { padding-top: 18px; padding-bottom: 18px; }
    .call-person-ring { width: 214px; }
    .trainee-avatar { font-size: 5.6rem; }
    .call-stage .call-helper { margin-bottom: 12px; }
    .call-icon-button { width: 60px; height: 60px; }
}