:root {
  color-scheme: light;
  --page: #f4f6fa;
  --panel: #ffffff;
  --ink: #172338;
  --muted: #596579;
  --line: #dce2ec;
  --subtle: #f0f3f8;
  --primary: #2358d4;
  --primary-hover: #1945ad;
  --primary-soft: #edf2ff;
  --success: #18643e;
  --success-soft: #e9f6ee;
  --warning: #85520b;
  --warning-soft: #fff3d9;
  --danger: #b22c39;
  --danger-soft: #fff0f1;
  --sidebar: #172338;
  --radius: 14px;
  --shadow: 0 8px 24px rgb(23 35 56 / 6%);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }
button:disabled { opacity: .55; }
button svg { pointer-events: none; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }
svg { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
button span[data-icon], [data-icon] { display: inline-flex; align-items: center; justify-content: center; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 30px; line-height: 1.2; font-weight: 720; letter-spacing: -.8px; }
h2 { font-size: 19px; line-height: 1.35; font-weight: 680; letter-spacing: -.3px; }
h3 { font-size: 16px; line-height: 1.4; font-weight: 650; }
h4 { font-size: 14px; font-weight: 650; }
small { font-size: 12px; }
strong { font-weight: 650; }
::selection { background: #dce7ff; color: var(--ink); }
:focus-visible { outline: 3px solid #7da5ff; outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #c0d2ff; outline-offset: 1px; border-color: var(--primary); }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: white; color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.muted, .empty-value, .cell-secondary, .field-hint, .section-caption { color: var(--muted); }
.nowrap { white-space: nowrap; }
.danger-text, .inline-error, .overdue { color: var(--danger); }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 240px; height: 100dvh; display: flex; flex-direction: column; gap: 24px; padding: 30px 18px 20px; overflow-y: auto; background: var(--sidebar); color: #d2dbea; }
.brand { display: flex; align-items: center; gap: 11px; color: white; text-decoration: none; font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.brand:hover { color: white; }
.brand-mark { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid #52617b; border-radius: 11px; color: white; font-size: 23px; letter-spacing: -5px; padding-right: 5px; }
.brand-mark span { color: #a9c2ff; }
.brand small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; font-weight: 450; letter-spacing: .5px; color: #adbad0; }
.workspace-label { padding: 0 12px; color: #adbad0; font-size: 12px; font-weight: 600; letter-spacing: .8px; }
#navigation { display: flex; flex-direction: column; gap: 6px; margin-top: -12px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #d5deee; text-align: left; font-size: 14px; font-weight: 550; line-height: 1.4; text-decoration: none; }
.nav-item:hover { color: white; background: #263650; }
.nav-item.active { color: white; background: #2c4472; border-color: #405b91; }
.nav-item > span:nth-child(2) { flex: 1; }
.nav-count { min-width: 25px; padding: 2px 6px; border-radius: 6px; color: #dce6fb; background: #34445f; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.nav-item.active .nav-count { color: white; background: #405d94; }
.nav-external { margin-top: 8px; }
.nav-external > svg:last-child, .nav-external > [data-icon]:last-child { width: 15px; }
.sidebar-note { margin-top: auto; padding: 16px 12px; border-top: 1px solid #34415a; font-size: 12px; line-height: 1.6; color: #b8c4d9; }
.sidebar-note-icon { margin-bottom: 9px; color: #b5c9f7; }
.sidebar-note strong { display: block; margin-bottom: 5px; color: #e6ecf6; font-size: 14px; }
.sidebar-bottom { display: flex; align-items: center; gap: 10px; padding: 0 10px; color: #d8e0ee; font-size: 12px; }
.sidebar-bottom small { display: block; color: #adbad0; }
.sidebar-bottom > [data-icon] { margin-left: auto; }
.local-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #7c8aa1; }
.main { width: calc(100% - 240px); max-width: 1840px; min-width: 0; margin-left: 240px; padding: 0 32px 22px; }
.topbar { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.breadcrumb strong { color: var(--ink); font-weight: 550; }
.breadcrumb > span { color: #8993a4; }
.topbar-right { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.topbar-divider { width: 1px; height: 20px; background: var(--line); }
.local-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.account-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 550; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 0 26px; }
.eyebrow { margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .9px; }
.page-heading p { margin-top: 9px; max-width: 780px; color: var(--muted); font-size: 14px; }
.page-actions, .button-group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.page-actions { flex: 0 0 auto; justify-content: flex-end; }
.page-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 28px; padding: 10px 0; color: var(--muted); font-size: 12px; }
.footer-dot { padding: 0 7px; }
#view, .settings-content { display: grid; gap: 20px; min-width: 0; }
#view > *, .settings-content > * { min-width: 0; }

.button, .icon-button, .text-button, .link-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 550; line-height: 1.4; text-decoration: none; }
.button { min-height: 40px; padding: 9px 14px; border: 1px solid #c9d2e1; border-radius: 8px; background: white; color: var(--ink); font-size: 14px; }
.button:hover { border-color: #9eafc9; background: #f5f7fc; color: var(--ink); }
.button.primary, .auth-submit { border-color: var(--primary); background: var(--primary); color: white; }
.button.primary:hover, .auth-submit:hover { border-color: var(--primary-hover); background: var(--primary-hover); color: white; }
.button.soft { border-color: #d0dcfb; background: var(--primary-soft); color: #204da9; }
.button.soft:hover { background: #e1eaff; }
.button.small { min-height: 34px; padding: 7px 11px; font-size: 13px; }
.button.small svg { width: 17px; height: 17px; }
.button.danger { color: var(--danger); border-color: #e3bac0; background: white; }
.button.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.icon-button { width: 36px; height: 36px; flex: 0 0 36px; padding: 7px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; }
.icon-button:hover { color: var(--ink); border-color: var(--line); background: var(--subtle); }
.icon-button.danger:hover { color: var(--danger); border-color: #e3bac0; background: var(--danger-soft); }
.text-button, .link-button { min-height: 34px; padding: 4px 2px; border: 0; background: transparent; color: var(--primary); font-size: 13px; }
.text-button:hover, .link-button:hover { color: var(--primary-hover); text-decoration: underline; }
.text-button { color: var(--muted); }
.stack-buttons { display: grid; gap: 10px; }
.button.active, .segmented button.active { border-color: #b7cafa; background: var(--primary-soft); color: #1948b0; }
.button:disabled:hover { background: inherit; }
.button.primary:disabled:hover { background: var(--primary); }

.workspace-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 2px 5px rgb(23 35 56 / 2%); }
.card-body { padding: 24px; }
.card-intro { margin: 10px 0 20px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.list-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; min-height: 74px; padding: 20px 24px; }
.section-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.section-caption { font-size: 12px; }
.count-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: 2px 7px; border-radius: 6px; background: var(--subtle); color: var(--muted); font-size: 12px; line-height: 1.5; font-weight: 600; font-variant-numeric: tabular-nums; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 0 24px 20px; }
.search-field { display: flex; flex: 1 1 250px; align-items: center; gap: 10px; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid #c7d0df; border-radius: 8px; background: white; color: var(--muted); }
.search-field:focus-within { outline: 3px solid #c0d2ff; outline-offset: 1px; border-color: var(--primary); }
.search-field input { width: 100%; min-width: 0; min-height: 40px; padding: 8px 0; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 14px; }
.search-field input:focus-visible { outline: 0; }
.filter-select { max-width: 240px; min-height: 42px; border: 1px solid #c7d0df; border-radius: 8px; background: white; padding: 8px 32px 8px 12px; color: var(--ink); font-size: 14px; }
.selection-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 0 24px 16px; padding: 11px 14px; border: 1px solid #cfdbf8; border-radius: 8px; background: var(--primary-soft); font-size: 13px; }
.selection-bar .button:last-child { margin-left: auto; }
.table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-gutter: stable; }
.student-table, .call-table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 14px; }
.student-table { min-width: 1050px; }
.call-table { min-width: 980px; }
.student-table th, .call-table th { padding: 12px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f7f9fc; color: var(--muted); text-align: left; font-size: 12px; font-weight: 600; white-space: nowrap; }
.student-table td, .call-table td { max-width: 390px; padding: 18px 16px; border-bottom: 1px solid #e7ebf2; vertical-align: top; overflow-wrap: anywhere; }
.student-table tr:last-child td, .call-table tr:last-child td { border-bottom: 0; }
.student-table th:first-child, .student-table td:first-child { width: 46px; padding-left: 24px; padding-right: 5px; }
.student-table th:last-child, .student-table td:last-child, .call-table th:last-child, .call-table td:last-child { padding-right: 24px; }
.student-table th:nth-child(2), .student-table td:nth-child(2) { min-width: 190px; }
.student-table:not(.finance-table) th:nth-child(3), .student-table:not(.finance-table) td:nth-child(3) { min-width: 150px; }
.student-table:not(.finance-table) th:nth-child(6), .student-table:not(.finance-table) td:nth-child(6) { min-width: 180px; }
.student-row:hover, .journal-row:hover { background: #f8faff; }
.student-row.selected { background: #f0f5ff; }
.student-person { display: flex; align-items: flex-start; gap: 11px; min-width: 170px; }
.student-person > div { min-width: 0; }
.student-name { display: inline; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
.student-name:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.student-meta, .cell-secondary { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.next-action-cell { width: 30%; min-width: 250px; }
.table-next-action { display: -webkit-box; margin: 0 0 7px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.55; }
.table-open { white-space: nowrap; }
.student-table .button, .call-table .button { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.mentor-cell { min-width: 145px; font-size: 13px; }
.mentor-name { display: flex; align-items: center; gap: 7px; }
.table-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.row-arrow { color: var(--muted); }
.role-mentor .student-table:not(.finance-table) th:first-child, .role-mentor .student-table:not(.finance-table) td:first-child { display: none; }
.role-mentor .student-table:not(.finance-table) th:nth-child(2), .role-mentor .student-table:not(.finance-table) td:nth-child(2) { padding-left: 24px; }
.avatar, .avatar.tone-1, .avatar.tone-2, .avatar.tone-3, .avatar.tone-4 { width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d5deeb; border-radius: 11px; background: #edf1f7; color: #40516d; font-size: 14px; font-weight: 650; }
.avatar.mini-avatar, .mini-avatar { width: 26px; height: 26px; flex-basis: 26px; border-radius: 7px; font-size: 12px; }
.status-pill, .payment-badge, .source-badge, .source-state, .overdue-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid transparent; border-radius: 6px; color: #526074; background: #eef1f5; font-size: 12px; font-weight: 550; line-height: 1.5; }
.status-pill, .payment-badge { white-space: nowrap; overflow-wrap: normal; word-break: normal; flex-shrink: 0; }
.status-completed, .call-status-completed, .payment-badge.confirmed, .source-state.connected, .source-state.synced { color: var(--success); background: var(--success-soft); border-color: #c9e6d4; }
.status-waiting, .status-awaiting_payment, .status-paused, .payment-badge.waiting, .source-state.partial, .source-state.stale, .call-status-planned { color: var(--warning); background: var(--warning-soft); border-color: #ecd8af; }
.status-neutral, .status-lead, .status-contacted, .status-qualified, .status-review, .status-onboarding, .status-learning, .status-practice, .status-archived, .status-declined, .payment-badge.neutral, .call-status-cancelled { color: #526074; background: #eef1f5; border-color: #e0e5ed; }
.overdue-tag, .call-status-missed, .source-state.error { color: var(--danger); background: var(--danger-soft); border-color: #efcbd0; }
.date-label { display: inline-flex; align-items: center; color: var(--muted); font-size: 12px; font-weight: 500; }
.date-label.overdue { color: var(--danger); }
.pill-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { min-width: 0; min-height: 130px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.stat-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 550; }
.stat-icon { color: #61718a; }
.stat-value { margin-top: 14px; color: var(--ink); font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -.6px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-detail { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.stat-card.attention { border-color: #e8d2a6; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 20px; }
.overview-panel .list-header { padding: 20px; }
.overview-panel .empty-state { min-height: 210px; padding: 28px 20px; }
.priority-list { display: grid; }
.priority-row { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px; border-top: 1px solid #e7ebf2; min-width: 0; }
.priority-row > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.priority-row > .button { flex: 0 0 auto; align-self: center; }
.priority-row p, .priority-row small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.priority-row strong { font-size: 14px; }
.overview-panel .priority-row strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.priority-row.done strong { color: var(--muted); text-decoration: line-through; }
.priority-row.done .priority-icon { color: var(--success); background: var(--success-soft); }
.priority-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; color: #526883; background: #eff3f9; }
.priority-icon svg { width: 17px; height: 17px; }
.overview-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.overview-student { display: flex; align-items: flex-start; gap: 13px; min-width: 0; padding: 22px 24px; border-top: 1px solid var(--line); }
.overview-student:nth-child(odd) { border-right: 1px solid var(--line); }
.overview-student > div { flex: 1; min-width: 0; }
.overview-student h3 { margin-bottom: 4px; font-size: 15px; }
.overview-student > div > p { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.overview-student .read-text, .overview-student .expandable-text { margin-top: 9px; font-size: 13px; }
.overview-student > .button { align-self: center; }
.overview-notices { display: grid; gap: 12px; }
.overview-notice { display: flex; align-items: flex-start; gap: 13px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.overview-notice > svg { margin-top: 2px; color: var(--muted); }
.overview-notice > div { flex: 1; min-width: 0; }
.overview-notice strong { font-size: 14px; }
.overview-notice p { margin-top: 5px; font-size: 13px; color: var(--muted); }
.overview-notice .button { flex: 0 0 auto; }
.finance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.finance-card { padding: 24px; }
.finance-amount { margin: 14px 0 4px; font-size: 30px; font-weight: 700; letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
.finance-card > p { color: var(--muted); font-size: 13px; }
.finance-breakdown { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }
.finance-breakdown dt { color: var(--muted); }
.finance-breakdown dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 550; }
.finance-table { min-width: 900px; }
.finance-table th:first-child, .finance-table td:first-child { width: auto; min-width: 190px; padding-right: 16px; }
.finance-table th:nth-child(2), .finance-table td:nth-child(2) { min-width: 180px; }
.finance-table th:nth-child(3), .finance-table td:nth-child(3) { min-width: 130px; white-space: nowrap; }
.finance-table th:last-child, .finance-table td:last-child { min-width: 110px; }
.finance-table td:nth-child(4) { min-width: 260px; width: 40%; }
.finance-table .read-text { font-size: 13px; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 4px; }
.settings-tabs .button { background: transparent; border-color: transparent; }
.settings-tabs .button:hover { background: white; border-color: var(--line); }
.settings-tabs .button.active { background: white; border-color: #b7cafa; color: var(--primary); box-shadow: 0 2px 4px rgb(23 35 56 / 4%); }

.source-note, .policy-notice, .connection-banner, .integration-error-panel { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: #f7f9fc; color: var(--muted); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.source-note > svg, .policy-notice > svg, .connection-banner > svg { flex-shrink: 0; margin-top: 1px; }
.source-note strong { color: var(--ink); }
.policy-notice { margin: 14px 0; border-color: #e8d3aa; background: var(--warning-soft); color: var(--warning); }
.policy-label { display: inline-flex; align-items: center; gap: 6px; color: var(--warning); font-size: 12px; font-weight: 550; }
.policy-label svg { width: 16px; height: 16px; }
.connection-banner { margin-top: 18px; background: var(--warning-soft); border-color: #e8d3aa; color: var(--warning); }
.connection-banner > p { flex: 1; }
.connection-banner.error, .integration-error-panel { border-color: #ebc3c9; background: var(--danger-soft); color: var(--danger); }
.integration-error-panel { display: block; }
.integration-error-panel p + p { margin-top: 8px; }
.empty-state { display: flex; min-height: 280px; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; }
.empty-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 15px; border-radius: 12px; color: #657791; background: #f0f3f8; }
.empty-icon svg { width: 23px; height: 23px; }
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { max-width: 450px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.empty-state .button { margin-top: 20px; }
.compact-empty, .evidence-empty, .integration-empty { padding: 20px; border: 1px dashed #ced7e4; border-radius: 9px; color: var(--muted); background: #fafbfd; font-size: 14px; line-height: 1.65; }
.loading-state { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 240px; color: var(--muted); }
.spinner { width: 20px; height: 20px; border: 2px solid #d5deed; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-label { color: #33435b; font-size: 13px; font-weight: 600; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .task-editor input:not([type="checkbox"]), .task-editor select, .checklist select, .inbox-controls select { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #c7d0df; border-radius: 8px; color: var(--ink); background: white; font-size: 14px; line-height: 1.5; }
.field textarea { resize: vertical; min-height: 92px; }
input::placeholder, textarea::placeholder { color: #718096; opacity: 1; }
.field input:disabled, .field select:disabled, .field textarea:disabled { border-color: #d7deea; background: #f1f4f8; color: #58667b; opacity: 1; }
.field-hint { font-size: 12px; line-height: 1.6; }
.required-mark { color: var(--danger); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field.full, .field-grid > .full { grid-column: 1 / -1; }
form > .field + .field { margin-top: 18px; }
.has-error { border-color: var(--danger) !important; }
.inline-error { margin: 12px 0; font-size: 13px; }
.check-control, .task-checkbox, input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0; accent-color: var(--primary); vertical-align: middle; }
.segmented { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #f5f7fa; }
.segmented button { min-height: 34px; padding: 7px 12px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; font-size: 13px; }

.drawer, .modal { color: var(--ink); background: white; }
.drawer::backdrop, .modal::backdrop { background: rgb(13 25 44 / 46%); }
.drawer:not([open]), .modal:not([open]) { display: none; }
.drawer { position: fixed; inset: 0 0 0 auto; width: min(820px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--line); box-shadow: -12px 0 60px rgb(15 28 50 / 18%); overflow: hidden; }
.drawer[open] { display: flex; flex-direction: column; }
.drawer-header { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; padding: 24px 28px 20px; border-bottom: 1px solid var(--line); background: white; }
.drawer-heading { flex: 1; min-width: 0; }
.drawer-heading h2 { margin-top: 4px; font-size: 24px; line-height: 1.25; overflow-wrap: anywhere; }
.purchase-label { color: var(--muted); font-size: 12px; font-weight: 500; }
.drawer-contact { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.drawer-contact a { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.drawer-contact svg { width: 16px; height: 16px; }
.drawer-tabs { display: flex; flex: 0 0 auto; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--line); overflow-x: auto; background: white; scrollbar-width: thin; }
.drawer-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 54px; padding: 12px 10px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-size: 13px; font-weight: 550; white-space: nowrap; }
.drawer-tab:hover { color: var(--primary); background: #f8faff; }
.drawer-tab.active { border-bottom-color: var(--primary); color: var(--primary); }
.drawer-tab.active .count-tag { color: #2552b5; background: var(--primary-soft); }
.drawer-body { min-height: 0; flex: 1 1 auto; padding: 24px 28px 32px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }
.drawer-footer { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; min-height: 76px; padding: 16px 28px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: white; }
.save-state { margin-right: auto; color: var(--muted); font-size: 12px; }
.save-state.dirty { color: var(--warning); }
.drawer-section { margin-bottom: 28px; }
.drawer-section:last-child { margin-bottom: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.section-heading small { color: var(--muted); }
.drawer-summary { margin-bottom: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafd; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.summary-item { display: flex; align-items: flex-start; flex-direction: column; gap: 7px; min-width: 0; }
.summary-item > span:first-child { color: var(--muted); font-size: 12px; }
.summary-item > strong { font-size: 14px; overflow-wrap: anywhere; }
.read-section { margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.read-section h3 { margin-bottom: 12px; }
.read-section h4 { margin: 17px 0 7px; color: var(--muted); }
.read-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.read-text.muted { color: var(--muted); }
.expandable-text { min-width: 0; overflow-wrap: anywhere; }
.expandable-text > summary { margin: 6px 0; color: var(--primary); cursor: pointer; font-size: 13px; font-weight: 500; }
.expandable-text > .link-button { margin-top: 5px; }
.expandable-text .read-text { font-size: inherit; }
.next-step-section { padding: 18px 20px; border: 1px solid #d2def6; border-left: 3px solid var(--primary); border-radius: 10px; background: #f7faff; }
.next-step-section .policy-notice { margin-bottom: 12px; }
.next-step-date { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--muted); }
.next-step-date svg { width: 17px; height: 17px; }
.profile-contact, .profile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; color: var(--muted); font-size: 13px; }
.read-list { margin: 0; padding-left: 20px; }
.read-list li { margin: 9px 0; padding-left: 3px; }
.history-details { margin: 16px 0; border: 1px solid var(--line); border-radius: 10px; background: white; overflow: hidden; }
.history-details > summary { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 15px 17px; color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.history-details > summary::-webkit-details-marker { display: none; }
.history-details > summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 19px; font-weight: 400; }
.history-details[open] > summary { border-bottom: 1px solid var(--line); background: #f8fafd; }
.history-details[open] > summary::after { content: "−"; }
.history-details > :not(summary) { margin: 0; padding: 18px; }
.readiness-read { display: grid; gap: 16px; }
.readiness-read > div { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: 14px; }
.readiness-read small { color: var(--muted); text-align: right; }
.readiness-read svg { width: 18px; height: 18px; color: #61718a; }
.checklist { display: grid; gap: 10px; }
.checklist-row { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.checklist-label { flex: 1; min-width: 0; font-size: 14px; }
.checklist-evidence { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.checklist-status-icon { display: inline-flex; color: #73829a; }
.checklist-status-icon.done { color: var(--success); }
.checklist .checklist-state { width: 155px; min-height: 36px; flex: 0 0 155px; padding: 7px 9px; font-size: 13px; }
.checklist .checklist-state.done { color: var(--success); border-color: #c2dfce; background: var(--success-soft); }
.payment-note, .evidence-intro { margin-bottom: 18px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.shared-group { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafd; }
.shared-group p { margin-top: 10px; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.shared-group small { display: block; margin-top: 12px; color: var(--muted); }
.shared-payment { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; font-size: 18px; font-weight: 650; }
.shared-payment span { color: var(--muted); font-size: 12px; font-weight: 500; }
.coverage-note { margin-top: 22px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9fc; color: var(--muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.coverage-note p, .coverage-text { margin-top: 8px; }
.evidence-card, .note-card, .application-answer { padding: 18px 0; border-bottom: 1px solid var(--line); }
.evidence-card:last-child, .note-card:last-child, .application-answer:last-child { border-bottom: 0; }
.evidence-meta, .note-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.evidence-attribution, .note-meta strong { color: #33445d; }
.evidence-meta time, .note-meta time { margin-left: auto; }
.evidence-card blockquote { margin: 12px 0; padding-left: 14px; border-left: 3px solid #ced9ed; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.evidence-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; font-size: 13px; font-weight: 500; text-decoration: none; }
.evidence-link svg { width: 16px; height: 16px; }
.evidence-link:hover { text-decoration: underline; }
.evidence-card > .empty-value { display: block; margin-top: 10px; font-size: 12px; }
.application-meta { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 18px; padding: 16px; border-radius: 9px; background: #f4f7fb; font-size: 13px; }
.application-meta span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.application-meta a { margin: 0 0 0 auto; }
.application-answer h3 { margin-bottom: 9px; font-size: 14px; }
.application-answer p { color: #40516a; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.application-id { margin-top: 18px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.note-form { display: grid; gap: 14px; margin-bottom: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafd; }
.note-form > .button { justify-self: start; }
.note-card p { white-space: pre-wrap; overflow-wrap: anywhere; }

.task-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 0 24px 20px; }
.task-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 160px 110px; align-items: start; gap: 16px; padding: 20px 24px; border-top: 1px solid var(--line); }
.task-row.done .task-title { color: var(--muted); text-decoration: line-through; }
.task-title { margin-bottom: 5px; font-size: 14px; font-weight: 550; overflow-wrap: anywhere; }
.task-student { padding: 0; border: 0; background: transparent; color: var(--primary); font-size: 12px; text-align: left; }
.task-student:hover { text-decoration: underline; }
.task-owner { color: var(--muted); font-size: 13px; }
.task-editor { margin-bottom: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; }
.task-editor-top { display: flex; align-items: center; gap: 10px; }
.task-editor-top > input:not([type="checkbox"]) { flex: 1; min-width: 0; }
.task-editor-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; padding-left: 28px; }
.task-editor-meta input, .task-editor-meta select { font-size: 13px; }

.call-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.call-summary > div { display: flex; flex-direction: column; gap: 5px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.call-summary strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.call-summary span { color: var(--muted); font-size: 12px; }
.journal-dates { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; padding: 0 24px 20px; }
.journal-dates .field { width: 175px; }
.journal-dates > span { padding-bottom: 10px; color: var(--muted); font-size: 12px; }
.journal-person { margin-top: 6px; color: var(--muted); font-size: 12px; }
.journal-date { white-space: nowrap; font-size: 13px; }
.journal-channel, .journal-duration { color: var(--muted); font-size: 13px; }
.journal-row { cursor: pointer; }
.student-contact { margin-bottom: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafd; }
.contact-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.contact-heading > div { flex: 1; min-width: 0; }
.contact-heading p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.contact-icon { color: var(--muted); }
.call-card, .call-editor { margin-bottom: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.call-editor { border-color: #c0d1f7; box-shadow: 0 0 0 3px #f1f5ff; }
.call-card-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 13px; color: var(--muted); font-size: 12px; }
.call-card h3 { margin-bottom: 6px; }
.call-card-meta { color: var(--muted); font-size: 12px; }
.call-format, .call-purpose { display: inline-flex; align-items: center; margin: 3px 6px 3px 0; padding: 3px 7px; border: 1px solid #dce3ed; border-radius: 6px; color: #526074; background: #f1f4f8; font-size: 12px; line-height: 1.5; white-space: nowrap; }
.call-participants { min-width: 0; grid-column: 1 / -1; margin: 12px 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfd; }
.participant-search { margin-bottom: 12px; }
.participant-search input { width: 100%; min-width: 0; min-height: 42px; padding: 10px 12px; border: 1px solid #c7d0df; border-radius: 8px; color: var(--ink); background: white; font-size: 14px; }
.participant-search.search-field input { border: 0; padding: 8px 0; background: transparent; }
.participant-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; padding: 12px; border: 1px solid #d1ddf7; border-radius: 8px; background: #f1f5ff; color: #334969; font-size: 13px; overflow-wrap: anywhere; }
.participant-selection > strong { flex-basis: 100%; margin-bottom: 2px; }
.participant-selection > .call-participants { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; border: 0; background: transparent; }
.participant-selection > .call-participants:empty { display: none; }
.participant-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 5px 8px; border: 1px solid #d2dcec; border-radius: 6px; background: white; color: #354b69; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.participant-chip button { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: 2px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); }
.participant-chip button:hover { background: var(--subtle); color: var(--ink); }
.participant-chip button svg { width: 15px; height: 15px; }
.participant-options { display: grid; max-height: 280px; padding: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.participant-option { display: flex; align-items: flex-start; gap: 11px; min-height: 52px; padding: 12px 10px; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 6px; background: transparent; color: var(--ink); font-size: 14px; line-height: 1.5; text-align: left; cursor: pointer; }
.participant-option:last-child { border-bottom-color: transparent; }
.participant-option:hover { background: #f0f4fc; }
.participant-option:has(input:checked) { border-color: #c5d5f5; background: #edf3ff; }
.participant-option:has(input:disabled) { cursor: default; }
.participant-option > div, .participant-option > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.participant-option strong { display: block; font-size: 14px; }
.participant-option small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.participant-option input[type="checkbox"], .participant-option input[type="radio"] { margin-top: 3px; }
.participant-notes { display: grid; gap: 12px; margin-top: 20px; }
.participant-note { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfd; }
.participant-note > summary, .participant-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; color: var(--ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.participant-note > summary { min-height: 24px; cursor: pointer; }
.participant-note[open] > summary { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.participant-heading { margin-bottom: 14px; }
.participant-context { margin: 9px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.participant-note .field + .field { margin-top: 14px; }
.participant-note .field-grid .field + .field { margin-top: 0; }
.participant-note .call-result { margin-top: 12px; }
.shared-call-notice { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; padding: 13px 15px; border: 1px solid #d1ddf7; border-radius: 9px; background: #f1f5ff; color: #3c547c; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.shared-call-notice > svg { margin-top: 2px; }
.call-card-summary { margin-top: 13px; font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.call-result { margin-top: 14px; padding-left: 12px; border-left: 2px solid #d3deef; font-size: 14px; }
.call-result strong { color: var(--muted); font-size: 12px; }
.call-result p { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.call-card-actions, .call-editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.call-card-actions > span { color: var(--muted); font-size: 12px; }
.call-editor-actions { padding-top: 18px; border-top: 1px solid var(--line); }
.call-editor-actions .primary { margin-left: auto; }
.call-editor-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.call-editor-heading > span { color: var(--muted); font-size: 12px; }
.call-editor > .field-grid { margin-bottom: 24px; }
.call-material-search { width: 100%; min-height: 42px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #c7d0df; border-radius: 8px; color: var(--ink); background: white; font-size: 14px; }
.call-material-picker { display: grid; gap: 8px; max-height: 280px; overflow-y: auto; padding: 3px; }
.call-material-picker > div { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: start; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
.call-material-picker > div:hover { background: #f8faff; }
.call-material-picker > div > label { display: block; min-width: 0; padding: 0; border: 0; border-radius: 0; overflow-wrap: anywhere; }
.call-material-picker > div > a { display: flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }
.call-material-picker label { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; cursor: pointer; }
.call-material-picker label:hover { background: #f8faff; }
.call-material-picker label span { min-width: 0; }
.call-material-picker small { display: block; margin-top: 3px; color: var(--muted); }
.call-material-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.call-material-links a, .call-material-links > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--primary); background: #f7faff; font-size: 12px; text-decoration: none; overflow-wrap: anywhere; }
.call-material-links svg { width: 14px; height: 14px; }
.recordings-panel { margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.recording-guidance { margin: 10px 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.recording-files { display: grid; gap: 14px; margin-bottom: 18px; }
.recording-file { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: #f8fafd; }
.recording-file-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.recording-file-heading strong { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.recording-file-heading span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.recording-file-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; color: var(--muted); font-size: 12px; }
.recording-file audio, .recording-file video { display: block; width: 100%; max-width: 100%; border-radius: 7px; }
.recording-file video { max-height: 400px; background: #172338; }
.recording-file-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.recording-file-actions .evidence-link { margin: 0; }
.recording-upload { display: grid; gap: 12px; margin: 16px 0; padding: 16px; border: 1px dashed #b9c7de; border-radius: 9px; background: white; }
.recording-file-input { max-width: 100%; color: var(--muted); font-size: 13px; }
.recording-file-input::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 1px solid #c7d0df; border-radius: 7px; color: var(--ink); background: #f4f7fc; font: inherit; cursor: pointer; }
.upload-status { display: grid; gap: 10px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.upload-status progress { width: 100%; height: 8px; accent-color: var(--primary); }

.materials-list { display: grid; }
.material-row { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; border-top: 1px solid var(--line); }
.material-icon { display: inline-flex; padding: 9px; border-radius: 10px; background: #f0f3f8; color: #5d6f8b; }
.material-body { flex: 1; min-width: 0; }
.material-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.material-body h3 { font-size: 15px; }
.material-body h3 a { color: var(--ink); text-decoration: none; }
.material-body h3 a:hover { color: var(--primary); text-decoration: underline; }
.material-body p { margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.material-row > .button { flex: 0 0 auto; align-self: center; }
.integration-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.integration-source { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.integration-source-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.integration-source-top > div { flex: 1; }
.integration-source-top h3 { font-size: 16px; }
.integration-source-top .source-state { margin-left: auto; }
.integration-source-icon { display: inline-flex; padding: 9px; border-radius: 10px; color: #42618c; background: #edf2fb; }
.integration-source p { margin: 7px 0; color: var(--muted); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.integration-source small { color: var(--muted); }
.integration-error { margin-top: 12px; color: var(--danger); font-size: 12px; overflow-wrap: anywhere; }
.inbox-item { padding: 22px 24px; border-top: 1px solid var(--line); }
.inbox-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); font-size: 12px; }
.inbox-meta time { margin-left: auto; }
.inbox-person { margin: 14px 0 7px; font-size: 15px; font-weight: 650; }
.inbox-text { margin: 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.7; }
.inbox-preview { margin: 12px 0; }
.inbox-preview summary { cursor: pointer; color: var(--primary); font-size: 13px; }
.inbox-preview[open] { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafd; }
.inbox-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.inbox-controls > .field, .inbox-stage { flex: 1 1 180px; }
.inbox-controls > select { width: auto; flex: 1 1 180px; }
.inbox-suggestion, .inbox-readonly { margin-top: 12px; color: var(--muted); font-size: 13px; }
.source-state[data-status="connected"] { color: var(--success); background: var(--success-soft); }
.source-state[data-status="error"] { color: var(--danger); background: var(--danger-soft); }
.source-state[data-status="stale"], .source-state[data-status="partial"] { color: var(--warning); background: var(--warning-soft); }

.access-description { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.access-description > div { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.access-description svg { margin-bottom: 12px; color: #5e7392; }
.access-description h3 { margin-bottom: 8px; font-size: 15px; }
.access-description p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.accounts-list, .mentor-contacts { display: grid; }
.account-row, .mentor-contact-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 18px 24px; border-top: 1px solid var(--line); }
.account-details { flex: 1; min-width: 180px; }
.account-details strong, .account-details span, .account-details small { display: block; }
.account-details span, .account-details small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.mentor-contact-row > div { flex: 1; min-width: 160px; }
.mentor-contact-row small { display: block; margin-top: 4px; color: var(--muted); }
.mentor-contact-row a { font-size: 13px; }
.handoff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.step-label { margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .7px; }
.handoff-mentor { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.handoff-mentor .field { flex: 1; min-width: 180px; }
.handoff-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.handoff-list { display: grid; max-height: 560px; overflow-y: auto; }
.handoff-student { display: flex; align-items: center; gap: 11px; padding: 14px 0; border-top: 1px solid var(--line); cursor: pointer; }
.handoff-student > div { min-width: 0; flex: 1; font-size: 14px; }
.handoff-student small { display: block; margin-top: 4px; color: var(--muted); }
.handoff-student > .status-pill { max-width: 130px; }
.handoff-summary { display: flex; align-items: center; gap: 18px; padding: 20px; margin: 20px 0; border: 1px solid var(--line); border-radius: 10px; background: #f7f9fd; }
.handoff-summary-number { color: var(--primary); font-size: 38px; line-height: 1; font-weight: 700; }
.handoff-summary p { margin-top: 6px; color: var(--muted); font-size: 12px; }
.handoff-checks { display: grid; gap: 12px; padding: 0; margin: 20px 0; list-style: none; color: #465972; font-size: 13px; }
.handoff-checks li { display: flex; align-items: flex-start; gap: 9px; }
.handoff-checks svg { width: 17px; height: 17px; color: #617590; }
.handoff-note { margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.mentor-list { display: grid; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.mentor-list-item { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 13px; }
.mentor-list-item small { margin-left: auto; color: var(--muted); }

.modal { width: min(600px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 48px); padding: 26px; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 80px rgb(15 28 50 / 22%); overflow-y: auto; }
.modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.modal-heading h2 { font-size: 22px; }
.modal-intro { margin-bottom: 24px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.conflict-modal { width: min(1000px, calc(100vw - 32px)); }
.import-conflicts { display: grid; gap: 22px; }
.import-conflict { padding: 18px; border: 1px solid var(--line); border-radius: 10px; }
.import-conflict h3 { margin-bottom: 16px; }
.conflict-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.conflict-columns > div { min-width: 0; padding: 14px; border-radius: 8px; background: #f5f7fb; }
.conflict-columns h4 { margin-bottom: 12px; }
.conflict-summary { font-size: 13px; overflow-wrap: anywhere; }
.conflict-summary > div { margin: 12px 0; }
.conflict-summary p { margin-top: 4px; color: var(--muted); white-space: pre-wrap; }
.conflict-summary summary { color: var(--primary); cursor: pointer; }
.conflict-summary pre { overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: white; font-size: 12px; }
.scroll-title { scroll-margin-top: 16px; }
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: grid; gap: 10px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { padding: 15px 18px; border: 1px solid #445671; border-radius: 10px; box-shadow: var(--shadow); color: white; background: #243650; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.toast.error { border-color: #c74b58; background: #8c2530; }
.is-auth > .sidebar, .is-auth > .main, .is-auth > .skip-link { display: none; }
.auth-screen { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 32px 20px; background: var(--page); }
.auth-card { width: min(460px, 100%); padding: 36px; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); background: white; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; color: var(--ink); font-size: 20px; font-weight: 700; }
.auth-brand .brand-mark { background: var(--sidebar); border-color: var(--sidebar); }
.auth-card h1 { font-size: 26px; }
.auth-intro { margin: 12px 0 26px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.auth-card form { display: grid; gap: 18px; }
.auth-card form > .field + .field { margin-top: 0; }
.auth-submit { width: 100%; min-height: 44px; margin-top: 5px; }
.auth-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.65; }

@media (min-width: 1900px) {
  .main { padding-right: 44px; padding-left: 44px; }
  .overview-roster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .overview-student { flex-wrap: wrap; }
  .overview-student:not(:last-child) { border-right: 1px solid var(--line); }
  .overview-student > .button { margin-left: 53px; }
}

@media (max-width: 1250px) {
  .main { padding-right: 22px; padding-left: 22px; }
  .page-heading { align-items: flex-start; }
  .page-actions { max-width: 220px; }
  .stats { gap: 12px; }
  .stat-card { padding: 16px; }
  .stat-value { font-size: 24px; }
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
  .overview-panel .empty-state { min-height: 180px; }
  .overview-student { padding: 18px; flex-wrap: wrap; }
  .overview-student > .button { margin-left: 53px; }
  .access-description { grid-template-columns: 1fr; }
  .handoff-grid { grid-template-columns: 1fr; }
  .integration-sources { grid-template-columns: 1fr; }
  .task-row { grid-template-columns: 20px minmax(0, 1fr) 120px 90px; gap: 12px; }
}

@media (max-width: 900px) {
  .sidebar { position: relative; inset: auto; width: 100%; height: auto; gap: 16px; padding: 18px 20px 0; overflow: visible; }
  .brand { font-size: 19px; }
  .brand-mark { width: 36px; height: 36px; font-size: 22px; }
  .brand small { font-size: 12px; }
  .workspace-label, .sidebar-note, .sidebar-bottom { display: none; }
  #navigation { flex-direction: row; width: calc(100% + 40px); margin: 0 -20px; padding: 0 16px 12px; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .nav-item { flex: 0 0 auto; width: auto; min-height: 42px; gap: 8px; padding: 9px 12px; white-space: nowrap; font-size: 13px; }
  .nav-item > span:nth-child(2) { display: inline; flex: 0 0 auto; }
  .nav-item svg { width: 18px; height: 18px; }
  .nav-count { min-width: 22px; padding: 1px 5px; }
  .nav-external { margin-top: 0; }
  .main { width: 100%; max-width: none; margin-left: 0; padding: 0 22px 20px; }
  .topbar { min-height: 60px; }
  .topbar-right { gap: 10px; }
  .page-heading { padding: 25px 0 22px; }
  .page-heading h1 { font-size: 28px; }
  .page-actions { max-width: none; }
  .overview-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .overview-panel .list-header { align-items: flex-start; }
  .overview-panel .section-title { font-size: 17px; }
  .priority-row { padding: 16px; gap: 9px; flex-wrap: wrap; }
  .priority-row > div { flex-basis: calc(100% - 48px); }
  .priority-row > .button { margin-left: 41px; }
  .table-footer::after { content: "Если таблица не помещается — прокрутите её в сторону."; display: block; flex-basis: 100%; color: var(--muted); font-size: 12px; }
  .finance-table { min-width: 840px; }
  .settings-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 3px 3px 10px; }
  .settings-tabs .button { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 600px) {
  .sidebar { padding: 16px 16px 0; }
  #navigation { width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; padding-left: 12px; padding-right: 12px; }
  .main { padding: 0 16px 18px; }
  .topbar { align-items: flex-start; justify-content: flex-end; min-height: 58px; padding: 13px 0; }
  .breadcrumb { display: none; }
  .topbar-right { width: 100%; justify-content: flex-start; gap: 10px; }
  .topbar-right #logout-button { margin-left: auto; }
  .topbar-divider { display: none; }
  .account-name { max-width: 140px; }
  .page-heading { display: block; padding: 23px 0 20px; }
  .page-heading h1 { font-size: 27px; }
  .page-heading p { font-size: 14px; }
  .eyebrow { margin-bottom: 7px; }
  .page-actions { justify-content: flex-start; margin-top: 18px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
  .stat-card { min-height: 128px; padding: 15px; }
  .stat-card-top { align-items: flex-start; font-size: 12px; }
  .stat-icon svg { width: 17px; height: 17px; }
  .stat-value { margin-top: 12px; font-size: 24px; }
  .stat-detail { font-size: 12px; }
  #view, .settings-content { gap: 16px; }
  .overview-grid, .overview-roster { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .overview-roster { gap: 0; }
  .overview-student { border-right: 0 !important; padding: 18px 16px; }
  .overview-student > .button { margin-left: 53px; }
  .overview-panel .section-title { font-size: 18px; }
  .overview-panel .empty-state { min-height: 190px; }
  .overview-notice { flex-wrap: wrap; padding: 16px; }
  .overview-notice > div { flex-basis: calc(100% - 36px); }
  .overview-notice > .button { margin-left: 33px; }
  .list-header { min-height: 66px; padding: 18px 16px; }
  .section-title { font-size: 18px; }
  .toolbar { gap: 10px; padding: 0 16px 16px; }
  .search-field { flex-basis: 100%; }
  .toolbar .filter-select { flex: 1 1 130px; max-width: none; min-width: 0; padding-left: 9px; padding-right: 20px; }
  .search-field input, .filter-select, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .task-editor input:not([type="checkbox"]), .task-editor select, .checklist select, .inbox-controls select { font-size: 16px; }
  .selection-bar { margin: 0 16px 16px; gap: 10px; }
  .selection-bar .button:last-child { margin-left: 0; }
  .student-table { min-width: 1020px; }
  .student-table th, .student-table td, .call-table th, .call-table td { padding-left: 14px; padding-right: 14px; }
  .student-table th:first-child, .student-table td:first-child { padding-left: 16px; }
  .role-mentor .student-table:not(.finance-table) th:nth-child(2), .role-mentor .student-table:not(.finance-table) td:nth-child(2) { padding-left: 16px; }
  .table-footer { padding: 13px 16px; }
  .page-footer { display: grid; gap: 7px; margin-top: 20px; line-height: 1.6; }
  .card-body, .finance-card { padding: 20px 16px; }
  .finance-grid { gap: 16px; }
  .finance-amount { font-size: 28px; }
  .finance-breakdown { gap: 12px; }
  .source-note, .policy-notice, .connection-banner { padding: 14px; font-size: 13px; }
  .connection-banner { flex-wrap: wrap; }
  .connection-banner > p { flex-basis: calc(100% - 34px); }
  .connection-banner > .button { margin-left: 32px; }
  .drawer { width: 100%; border-left: 0; }
  .drawer-header { padding: 18px 16px 16px; gap: 11px; }
  .drawer-header > .avatar { width: 36px; height: 36px; flex-basis: 36px; }
  .drawer-heading h2 { font-size: 21px; }
  .drawer-contact { gap: 6px; font-size: 12px; }
  .drawer-tabs { padding: 0 10px; gap: 0; }
  .drawer-tab { min-height: 51px; padding: 11px 10px; }
  .drawer-body { padding: 20px 16px 28px; scrollbar-gutter: auto; }
  .drawer-footer { gap: 8px; min-height: 72px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .drawer-footer .save-state { flex-basis: 100%; }
  .drawer-footer .save-state:empty { display: none; }
  .drawer-footer .button { flex: 1; padding-left: 10px; padding-right: 10px; font-size: 13px; }
  .drawer-summary { padding: 16px; }
  .summary-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .summary-item > strong { font-size: 13px; }
  .next-step-section { padding: 16px; }
  .field-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .field.full { grid-column: auto; }
  .readiness-read > div { grid-template-columns: 20px minmax(0, 1fr); }
  .readiness-read small { grid-column: 2; text-align: left; }
  .checklist-row { align-items: flex-start; flex-wrap: wrap; }
  .checklist-label { flex-basis: calc(100% - 30px); }
  .checklist .checklist-state { flex-basis: auto; width: calc(100% - 30px); margin-left: 30px; }
  .evidence-meta time, .note-meta time { margin-left: 0; }
  .application-meta { display: grid; gap: 12px; }
  .application-meta a { margin-left: 0; }
  .history-details > :not(summary) { padding: 14px; }
  .task-toolbar { padding: 0 16px 16px; }
  .task-row { grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 18px 16px; }
  .task-owner { grid-column: 2; }
  .task-row > .date-label { grid-column: 2; }
  .task-editor { padding: 12px; }
  .task-editor-meta { grid-template-columns: 1fr; padding-left: 0; }
  .task-editor-top { gap: 8px; }
  .call-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .call-summary > div { padding: 16px; }
  .journal-dates { gap: 10px; padding: 0 16px 16px; }
  .journal-dates .field { width: auto; flex: 1 1 125px; min-width: 0; }
  .journal-dates > span { flex-basis: 100%; padding: 0; }
  .student-contact, .call-card, .call-editor { padding: 16px; }
  .call-participants { padding: 13px; }
  .participant-search input { font-size: 16px; }
  .call-material-search { font-size: 16px; }
  .participant-options { max-height: 240px; scrollbar-gutter: auto; }
  .participant-option { padding: 12px 8px; }
  .participant-selection { padding: 10px; }
  .participant-note { padding: 14px; }
  .shared-call-notice { padding: 12px; }
  .contact-heading { flex-wrap: wrap; }
  .contact-heading > .button { margin-left: 32px; }
  .call-editor-actions .primary { margin-left: 0; }
  .recording-file { padding: 13px; }
  .recording-upload { padding: 13px; }
  .recording-file-input { font-size: 12px; }
  .material-row { flex-wrap: wrap; gap: 12px; padding: 18px 16px; }
  .material-row > .button { margin-left: 50px; }
  .material-body { flex-basis: calc(100% - 54px); }
  .integration-source { padding: 18px; }
  .integration-source-top { align-items: flex-start; flex-wrap: wrap; }
  .inbox-item { padding: 18px 16px; }
  .inbox-meta time { margin-left: 0; }
  .inbox-controls { display: grid; grid-template-columns: minmax(0, 1fr); }
  .inbox-controls > select { width: 100%; }
  .account-row, .mentor-contact-row { padding: 18px 16px; }
  .account-details { min-width: 140px; }
  .handoff-student { flex-wrap: wrap; gap: 9px; }
  .handoff-student > .status-pill { margin-left: 77px; }
  .handoff-summary { padding: 16px; }
  .handoff-summary-number { font-size: 32px; }
  .modal { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - 24px); padding: 22px 18px; border-radius: 13px; }
  .modal-heading h2 { font-size: 20px; }
  .modal-actions > .button { flex: 1; }
  .conflict-columns { grid-template-columns: 1fr; }
  .import-conflict { padding: 14px; }
  .toasts { right: 16px; bottom: 16px; }
  .auth-card { padding: 28px 22px; }
  .auth-screen { padding: 20px 16px; }
}

.guide-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 24px; min-width: 0; }
.guide-lessons { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.guide-lesson { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; min-height: 64px; padding: 13px 14px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.5; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.guide-lesson:hover { border-color: var(--line); background: #f6f8fc; }
.guide-lesson.is-active { border-color: #b5caf8; background: var(--primary-soft); color: #1e4fae; }
.guide-lesson-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.guide-shell > :not(.guide-lessons) { min-width: 0; }
.guide-content { min-width: 0; }
.guide-header { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.guide-header > div { flex: 1; min-width: 0; }
.guide-header h2 { margin-bottom: 7px; font-size: 22px; }
.guide-header p { max-width: 700px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.guide-example-notice, .guide-mentor-note, .guide-lock-note { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 18px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 9px; background: #f8fafd; color: var(--muted); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.guide-example-notice { border-color: #d1ddf7; background: #f0f5ff; color: #3a527b; }
.guide-lock-note { border-color: #e8d3aa; background: var(--warning-soft); color: var(--warning); }
.guide-owner-label { display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid #d8dfeb; border-radius: 6px; color: var(--muted); background: #f3f5f9; font-size: 12px; font-weight: 500; }
.guide-header > .guide-mentor-note { display: inline-flex; margin: 0; padding: 3px 7px; border-radius: 6px; font-size: 12px; }
.guide-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.guide-step-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 5px 9px; border: 1px solid #c9d3e3; border-radius: 8px; background: white; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.4; }
.guide-step-dot:hover { border-color: #9cb8f2; color: var(--primary); }
.guide-step-dot.is-complete { border-color: #c5d6fb; background: #eef4ff; color: #2d56a4; }
.guide-step-dot.is-active { border-color: var(--primary); background: var(--primary); color: white; }
.guide-demo { min-width: 0; min-height: 320px; border: 1px solid #cdd6e5; border-radius: 12px; background: #f3f6fb; box-shadow: 0 6px 16px rgb(23 35 56 / 5%); }
.guide-demo-workspace { display: grid; grid-template-columns: 142px minmax(0, 1fr); min-height: 280px; }
.guide-demo-nav { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 20px 12px; border-radius: 0 0 0 11px; background: var(--sidebar); color: #dbe5f6; }
.guide-demo-nav > strong { padding: 0 6px 9px; color: white; font-size: 14px; }
.guide-demo-nav > span, .guide-demo-nav > button, .guide-demo-nav > div { min-width: 0; padding: 0; border: 1px solid transparent; border-radius: 6px; color: #dbe5f6; background: transparent; font-size: 12px; line-height: 1.5; text-align: left; }
.guide-demo-nav .guide-mock-control { justify-content: flex-start; width: 100%; min-height: 34px; padding: 6px 8px; border-color: transparent; background: transparent; color: #e1e9f7; font-size: 12px; text-align: left; }
.guide-demo-nav .guide-mock-control:not(:disabled):hover, .guide-demo-nav .is-highlighted .guide-mock-control { background: #30496f; color: white; }
.guide-demo-nav .guide-mock-label { color: inherit; font-size: inherit; }
.guide-demo-nav .is-active { border-color: #4a6290; background: #30496f; color: white; }
.guide-demo-main { min-width: 0; padding: 22px 20px; }
.guide-demo-main > * + * { margin-top: 12px; }
.guide-demo-title { color: var(--ink); font-size: 17px; line-height: 1.4; }
.guide-demo-card-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; color: var(--ink); font-size: 14px; }
.guide-demo-card-heading > span { color: var(--muted); font-size: 12px; }
.guide-demo-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
.guide-mock-muted { color: var(--muted); font-size: 13px; line-height: 1.5; }
.guide-demo-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.guide-demo-heading h3, .guide-demo-heading > strong { font-size: 17px; }
.guide-demo-heading p { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.guide-demo > .guide-demo-heading { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); border-radius: 11px 11px 0 0; background: white; }
.guide-demo-card { min-width: 0; padding: 16px; margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; background: white; }
.guide-demo-card > * + * { margin-top: 12px; }
.guide-demo-card:first-child { margin-top: 0; }
.guide-demo-card:last-child { margin-bottom: 0; }
.guide-demo-card h3, .guide-demo-card h4 { margin-bottom: 13px; font-size: 14px; }
.guide-demo-card p { margin: 9px 0; color: var(--muted); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.guide-demo-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.guide-demo-tabs > span, .guide-demo-tabs > button { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; line-height: 1.5; }
.guide-demo-tabs .is-active { border-color: #d0ddf8; color: var(--primary); background: var(--primary-soft); }
.guide-mock-control, .guide-mock-input, .guide-mock-select, .guide-mock-check { position: relative; min-width: 0; color: #33465f; font: inherit; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.guide-mock-control { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 38px; padding: 8px 12px; border: 1px solid #b9c9e2; border-radius: 7px; background: white; color: #244d9f; text-align: center; }
.guide-mock-control.primary { border-color: var(--primary); background: var(--primary); color: white; }
.guide-mock-control:disabled { opacity: 1; cursor: default; }
.guide-mock-input, .guide-mock-select, .guide-mock-textarea, .guide-mock-summary, .guide-mock-file { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #c7d0df; border-radius: 7px; background: #fff; text-align: left; }
.guide-mock-label { min-width: 0; font-size: 13px; line-height: 1.5; }
.guide-mock-input .guide-mock-label, .guide-mock-select .guide-mock-label, .guide-mock-textarea .guide-mock-label, .guide-mock-summary .guide-mock-label, .guide-mock-file .guide-mock-label { color: var(--muted); font-size: 12px; }
.guide-mock-value { min-width: 0; color: #33465f; font-size: 13px; line-height: 1.5; }
.guide-mock-textarea { min-height: 80px; }
.guide-mock-select { padding-right: 28px; }
.guide-mock-input + .guide-mock-input, .guide-mock-select + .guide-mock-input { margin-top: 12px; }
.guide-mock-select::after { content: "⌄"; position: absolute; top: 22px; right: 10px; color: var(--muted); font-size: 16px; }
.guide-mock-check { display: flex; align-items: flex-start; gap: 9px; min-height: 40px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #f7f9fd; }
.guide-mock-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; padding: 13px 0; border-bottom: 1px solid var(--line); }
.guide-mock-row:last-child { border-bottom: 0; }
.guide-mock-row > div { flex: 1; min-width: 0; }
.guide-mock-row > div > strong, .guide-mock-row > div > small { display: block; }
.guide-mock-row small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.guide-mock-row > small { color: var(--muted); }
.guide-target { position: relative; min-width: 0; border-radius: 7px; scroll-margin: 32px; }
.guide-target.is-highlighted { z-index: 1; outline: 3px solid var(--primary); outline-offset: 4px; box-shadow: 0 0 0 8px rgb(35 88 212 / 9%); }
.guide-pointer { position: absolute; top: -25px; right: 4px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 31px; min-height: 25px; padding: 2px 7px; border: 1px solid white; border-radius: 6px; color: white; background: var(--primary); box-shadow: 0 2px 5px rgb(23 35 56 / 12%); font-size: 12px; font-weight: 650; line-height: 1.5; white-space: nowrap; pointer-events: none; }
.guide-pointer svg { width: 15px; height: 15px; }
.guide-pointer > span:last-child { display: inline-block; transform: rotate(90deg); }
.guide-target:not(.is-highlighted) .guide-pointer { display: none; }
.guide-caption { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.guide-caption h3 { margin-bottom: 13px; font-size: 17px; }
.guide-caption p { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.guide-caption-action, .guide-caption-fill, .guide-caption-result { display: block; margin-top: 12px; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.guide-caption-fill > strong, .guide-caption-result > strong { display: block; margin-bottom: 4px; }
.guide-caption-action > strong, .guide-caption-fill > strong, .guide-caption-result > strong { color: #41536e; font-size: 12px; font-weight: 650; }
.guide-caption-result { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.guide-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.guide-step-instruction { margin: 18px 0 24px; }
.guide-step-instruction h3 { margin-top: 5px; font-size: 18px; line-height: 1.45; }
.guide-step-instruction .guide-step-count { text-align: left; }
.guide-step-instruction .guide-caption-action { margin-top: 7px; }
.guide-complete { margin-top: 18px; padding: 14px 16px; border: 1px solid #c5d6fb; border-radius: 9px; background: #eef4ff; color: #2d56a4; font-size: 14px; line-height: 1.6; }
.guide-step-count { color: var(--muted); font-size: 13px; text-align: center; }
.guide-section-link { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; margin-top: 14px; padding: 8px 0; color: var(--primary); font-size: 13px; font-weight: 550; text-decoration: none; }
.guide-section-link:hover { text-decoration: underline; }

@media (max-width: 1250px) {
  .guide-shell { grid-template-columns: 210px minmax(0, 1fr); gap: 18px; }
  .guide-demo-workspace { grid-template-columns: 118px minmax(0, 1fr); }
  .guide-demo-main { padding: 24px 16px; }
  .guide-demo-nav { padding: 20px 8px; }
}

@media (max-width: 900px) {
  .guide-shell { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .guide-lessons { display: flex; gap: 8px; max-width: 100%; padding: 8px; overflow-x: auto; overscroll-behavior-x: contain; }
  .guide-lesson { flex: 0 0 210px; width: 210px; min-height: 82px; }
  .guide-demo-workspace { grid-template-columns: 142px minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .guide-lesson { flex-basis: 200px; width: 200px; padding: 12px; font-size: 14px; }
  .guide-header h2 { font-size: 21px; }
  .guide-demo { display: block; min-height: 0; }
  .guide-demo-workspace { display: block; min-height: 0; }
  .guide-demo-nav { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 7px; padding: 15px 12px; border-radius: 0; }
  .guide-demo-nav > strong { flex-basis: 100%; padding: 0 5px 7px; }
  .guide-demo-nav > span, .guide-demo-nav > button, .guide-demo-nav > div { padding: 0; }
  .guide-demo-nav .guide-mock-control { min-height: 34px; padding: 6px 8px; }
  .guide-demo-main { padding: 24px 14px 18px; }
  .guide-demo-heading { align-items: flex-start; margin-bottom: 18px; }
  .guide-demo-heading h3 { font-size: 16px; }
  .guide-demo-card { padding: 16px 13px; }
  .guide-demo-fields { grid-template-columns: minmax(0, 1fr); }
  .guide-demo-tabs { gap: 6px; margin-top: 20px; }
  .guide-demo-tabs > span, .guide-demo-tabs > button { padding: 6px 7px; }
  .guide-mock-row { align-items: flex-start; gap: 12px; padding: 15px 0; }
  .guide-mock-row > div { flex-basis: 100%; }
  .guide-mock-input, .guide-mock-select { min-height: 44px; }
  .guide-caption { padding: 18px 15px; }
  .guide-caption-action, .guide-caption-fill, .guide-caption-result { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .guide-controls { gap: 10px; }
  .guide-controls > .button { min-height: 42px; flex: 1; }
  .guide-step-count { flex-basis: 100%; order: -1; }
  .guide-section-link { margin-top: 8px; }
}

.profile-read-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; margin: 0; }
.profile-read-field { min-width: 0; }
.profile-read-field.full { grid-column: 1 / -1; }
.profile-read-field dt { margin-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 550; }
.profile-read-field dd { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.profile-read-field dd p { margin: 0; }
.profile-read-field dd a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--primary); overflow-wrap: anywhere; }
.profile-read-field dd a svg { flex-shrink: 0; width: 14px; height: 14px; }
.profile-contact-summary { margin-top: 16px; }
.profile-contact-summary > .button { margin-top: 14px; }
.profile-contact-summary.compact { margin: 14px 0 18px; }
.profile-empty-note, .profile-source-disclaimer { margin: 10px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.profile-empty-note { padding: 12px 14px; border-radius: 8px; background: var(--subtle); }
.profile-view > .drawer-section { margin-bottom: 20px; }
.profile-editor-grid .profile-read-field { align-self: center; }
.profile-source-group, .profile-additional { margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; background: white; }
.profile-source-group > summary, .profile-additional > summary { padding: 14px 16px; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.5; }
.profile-source-group > summary .count-tag { margin-left: 8px; }
.profile-source-group[open] > summary, .profile-additional[open] > summary { border-bottom: 1px solid var(--line); }
.profile-source-group > .profile-source-item { margin: 0; padding: 15px 16px; }
.profile-source-item { margin: 12px 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.profile-source-item:last-child { border-bottom: 0; }
.profile-source-item h4 { margin: 0 0 7px; color: var(--ink); font-size: 13px; font-weight: 600; }
.profile-source-item .read-text, .profile-source-item .expandable-text { font-size: 14px; line-height: 1.65; }
.profile-source-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 9px; color: var(--muted); font-size: 11px; }
.profile-source-meta a { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); }
.profile-source-meta a svg { width: 12px; height: 12px; }
.profile-response-id { margin-top: 8px; color: var(--muted); font-size: 11px; }
.profile-response-id > summary { cursor: pointer; width: fit-content; }
.profile-response-id > div { margin-top: 7px; overflow-wrap: anywhere; line-height: 1.5; }
.profile-source-preview { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafd; }
.profile-additional > .drawer-section { margin: 18px 16px; }
.profile-additional > .field-hint { padding: 0 16px; }
.profile-sources { margin-top: 24px; }

@media (max-width: 600px) {
  .profile-read-grid { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .profile-source-preview { padding: 14px; }
  .profile-source-group > summary, .profile-additional > summary { padding: 13px; }
  .profile-source-group > .profile-source-item { padding: 13px; }
  .profile-additional > .drawer-section { margin: 16px 13px; }
  .profile-source-item h4 { overflow-wrap: anywhere; }
}

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