:root {
  --bg: #f3f5f7;
  --ink: #18202b;
  --muted: #6f7b89;
  --line: #e3e8ee;
  --nav: #09121f;
  --nav-soft: #142235;
  --accent: #e3a62f;
  --accent-dark: #c48618;
  --white: #fff;
  --success: #2aa876;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { margin: 0; min-height: 100vh; background: var(--bg); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 245px 1fr; }
.sidebar { background: var(--nav); color: #dbe5ef; padding: 28px 18px 20px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 10px 20px; }
.brand-mark { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(145deg, #ffd46f, var(--accent)); color: #1d2530; font-weight: 900; box-shadow: 0 8px 24px #e3a62f33; }
.brand-mark.large { width: 56px; height: 56px; border-radius: 17px; margin: 0 auto 18px; font-size: 22px; }
.brand strong { display: block; letter-spacing: .08em; font-size: 20px; color: white; }
.brand strong span { color: var(--accent); }
.brand small, .sidebar-foot small { display: block; color: #8090a2; margin-top: 3px; }
.brand-copy { min-width: 0; }
.brand-role-button { display: flex; align-items: center; gap: 5px; max-width: 155px; margin: 2px 0 0; padding: 0; border: 0; background: transparent; color: #aebdce; font-size: 13px; text-align: left; }
.brand-role-button span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-role-button:hover { color: white; }
.employee-switcher { margin: -8px 0 16px; padding: 12px; border: 1px solid #293a50; border-radius: 8px; background: #101c2d; display: grid; gap: 8px; }
.employee-switcher label { color: white; font-size: 13px; font-weight: 750; }
.employee-switcher select { width: 100%; min-height: 42px; border: 1px solid #34475f; border-radius: 7px; padding: 8px; background: white; color: var(--ink); font-size: 16px; }
.employee-switcher button { min-height: 40px; border: 0; border-radius: 7px; background: var(--accent); color: var(--ink); font-weight: 800; }
.employee-switcher button:disabled { opacity: .5; cursor: default; }
.employee-switcher small { color: #93a3b6; line-height: 1.3; }
nav { display: grid; gap: 7px; }
.nav-item { border: 0; background: transparent; color: #91a1b3; text-align: left; padding: 13px 14px; border-radius: 11px; font-weight: 650; display: flex; align-items: center; gap: 12px; }
.nav-item span { width: 23px; text-align: center; font-size: 19px; }
.nav-item:hover, .nav-item.active { background: var(--nav-soft); color: white; }
.nav-item.active { box-shadow: inset 3px 0 var(--accent); }
.sidebar-foot { margin-top: auto; border-top: 1px solid #203047; padding: 22px 10px 0; display: grid; gap: 10px; font-size: 13px; }
.sidebar-status { display: flex; align-items: center; gap: 10px; }
.support-button { width: 100%; border: 1px solid #253851; border-radius: 10px; background: #101d2e; color: #dbe5ef; padding: 10px 11px; text-align: left; font-weight: 750; }
.support-button:hover { border-color: var(--accent); color: white; background: #142235; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #36d391; box-shadow: 0 0 0 5px #36d39118; }
.main-area { min-width: 0; }
.impersonation-banner { position: sticky; top: 0; z-index: 12; min-height: 48px; padding: 7px 18px; background: #fff3d5; border-bottom: 1px solid #e1ba5f; display: flex; align-items: center; justify-content: center; gap: 16px; color: #5e4612; }
.impersonation-banner span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impersonation-banner button { flex: 0 0 auto; min-height: 34px; border: 0; border-radius: 7px; padding: 7px 11px; background: var(--nav); color: white; font-weight: 750; }
.impersonating .topbar { top: 48px; }
.topbar { background: rgba(255,255,255,.93); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); min-height: 92px; display: flex; align-items: center; padding: 18px 34px; position: sticky; top: 0; z-index: 10; }
.topbar h1 { margin: 2px 0 0; font-size: 25px; }
.eyebrow { font-size: 10px; letter-spacing: .17em; color: var(--accent-dark); font-weight: 800; margin: 0; }
.top-actions { margin-left: auto; display: flex; gap: 10px; }
.refresh-app-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.refresh-app-button > span:first-child { font-size: 18px; line-height: 1; }
.refresh-app-button.refreshing > span:first-child { animation: refresh-spin .7s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
.primary-button, .light-button, .ghost-button { border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 750; }
.primary-button { background: var(--accent); color: #1a2028; box-shadow: 0 5px 15px #e3a62f35; }
.primary-button:hover { background: #efb63f; transform: translateY(-1px); }
.ghost-button { background: #edf1f5; color: #425063; }
.light-button { background: white; color: #263140; }
.full { width: 100%; }
.content { padding: 28px 34px 50px; max-width: 1500px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; animation: reveal .2s ease; }
.section-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.section-tabs button { flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 8px 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 14px; overflow-wrap: anywhere; }
.section-tabs button.active { border-bottom-color: var(--accent); color: var(--ink); font-weight: 700; }
@keyframes reveal { from { opacity: .3; transform: translateY(5px); } }
.welcome-card { background: linear-gradient(120deg, #122135, #0a1423); border-radius: 18px; padding: 30px 32px; color: white; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 15px 40px #0d17242a; }
.welcome-card h2 { margin: 7px 0 8px; font-size: 25px; }
.welcome-card p:last-child { color: #a9b6c6; margin: 0; }
.my-attendance-card { margin-top: 16px; background: white; border: 1px solid var(--line); border-radius: 15px; padding: 18px 20px; display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(240px, auto); gap: 18px; align-items: center; box-shadow: 0 6px 18px #28374709; }
.my-attendance-card.working { border-color: #abd9c7; }
.my-attendance-card.paused { border-color: #e8c46c; background: #fffdf8; }
.my-attendance-card h3 { margin: 5px 0 4px; font-size: 20px; }
.my-attendance-card p { margin: 0; color: var(--muted); }
.my-attendance-meta { text-align: right; }
.my-attendance-meta span, .my-attendance-meta small { display: block; color: var(--muted); }
.my-attendance-meta strong { display: block; font-size: 25px; margin: 3px 0; }
.my-attendance-actions { display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; }
.my-attendance-actions button { flex: 1 1 105px; }
.my-attendance-shifts { flex: 1 1 100%; display: grid; gap: 6px; }
.my-attendance-shift-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: stretch; }
.my-attendance-shift { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; color: var(--ink); padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 800; }
.my-attendance-shift span { color: var(--muted); font-weight: 800; }
.my-attendance-shift b { color: var(--accent-dark); }
.my-attendance-manual { flex: 1 1 100%; display: grid; grid-template-columns: minmax(175px, 1fr); gap: 7px; align-items: center; }
.my-attendance-manual label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 800; }
.my-attendance-manual select, .my-attendance-manual input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font: inherit; font-weight: 700; background: white; color: var(--ink); }
.my-attendance-manual .small-button { min-height: 40px; }
.my-attendance-manual > small { grid-column: 1 / -1; color: var(--muted); }
.attendance-reopen { white-space: nowrap; }
.push-notification-strip { margin-top: 12px; padding: 11px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; background: white; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.push-notification-strip[hidden] { display: none; }
.push-notification-strip strong, .push-notification-strip small { display: block; }
.push-notification-strip small { margin-top: 2px; color: var(--muted); }
.push-notification-strip.enabled { border-left-color: #2c8a65; }
.settings-notification-panel { margin: 0 0 16px; }
.my-work-plan-panel { margin-top: 16px; }
.my-work-plan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 16px; }
.my-work-plan-list .work-task-card { margin: 0; }
.task-quick-complete { width: 100%; margin-top: 12px; }
.staff-home .content { max-width: 980px; }
.staff-home .my-attendance-card { grid-template-columns: 1fr; align-items: stretch; padding: 22px; }
.staff-home .my-attendance-card h3 { font-size: 24px; }
.staff-home .my-attendance-meta { text-align: left; }
.staff-home .my-attendance-actions { justify-content: stretch; }
.staff-home .my-attendance-actions > button { min-height: 58px; font-size: 18px; flex: 1 1 180px; }
.staff-home .my-attendance-manual { grid-template-columns: 1fr; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 16px; }
.metric { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; box-shadow: 0 4px 14px #28374708; }
.metric span, .metric small { color: var(--muted); display: block; }
.metric strong { display: block; font-size: 25px; margin: 5px 0 2px; }
.dashboard-kpi { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.dashboard-kpi[hidden] { display: none; }
.dashboard-kpi:hover { border-color: #d5b66f; background: #fffaf2; }
.dashboard-kpi.urgent strong { color: #a9433e; }
.dashboard-kpi.waiting-highlight { border: 2px solid #e4aa28; background: #fff8df; box-shadow: 0 5px 16px #dca4231f; }
.dashboard-kpi.waiting-highlight span { color: #805900; font-weight: 800; }
.dashboard-kpi.waiting-highlight strong { color: #a66b00; }
.dashboard-operations { margin-top: 16px; }
.dashboard-status-list { min-height: 80px; }
.dashboard-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.dashboard-status-row:last-child { border-bottom: 0; }
.dashboard-status-row strong, .dashboard-status-row small { display: block; }
.dashboard-status-row small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.dashboard-status-row .pill, .dashboard-status-row .employee-status { flex: 0 0 auto; }
.dashboard-colleague-plan { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.dashboard-colleague-plan .section-title { flex-wrap: wrap; }
.dashboard-colleague-plan h4 { margin: 0; overflow-wrap: anywhere; }
.dashboard-colleague-plan .dashboard-status-row { width: 100%; background: transparent; color: var(--text); text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.dashboard-colleague-plan .dashboard-status-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.dashboard-employee-mistakes { margin-top: 16px; border-left: 3px solid #c86b55; }
.dashboard-mistake-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-mistake-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; padding: 12px 15px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; color: var(--ink); text-align: left; }
.dashboard-mistake-row:hover { background: #fff8f6; }
.dashboard-mistake-row span { min-width: 0; }
.dashboard-mistake-row strong, .dashboard-mistake-row small { display: block; }
.dashboard-mistake-row small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dashboard-mistake-row time { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.dashboard-finance-panel { margin-top: 16px; }
.dashboard-local-drafts { margin-top: 16px; }
.dashboard-iphone-actions { margin-top: 16px; }
.iphone-action-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iphone-action-button { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; align-items: center; min-width: 0; padding: 14px 16px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; color: var(--ink); text-align: left; }
.iphone-action-button { text-decoration: none; }
.iphone-action-button[hidden] { display: none; }
#view-settings .iphone-action-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.iphone-action-button:last-child { border-right: 0; }
.iphone-action-button:hover { background: #fffaf2; }
.iphone-action-button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: #152234; color: white; font-size: 22px; font-weight: 800; }
.iphone-action-button img { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 10px; object-fit: cover; box-shadow: 0 4px 10px #0b12201f; }
.iphone-action-button strong { min-width: 0; font-size: 15px; }
.iphone-action-button small { color: var(--muted); font-size: 11px; }
.iphone-action-help { margin: 0; padding: 11px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.45; }
.local-draft-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.local-draft-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.local-draft-row strong, .local-draft-row small { display: block; }
.local-draft-row small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.local-draft-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.local-draft-actions button { border: 1px solid var(--line); border-radius: 7px; background: white; padding: 7px 9px; color: var(--ink); font-weight: 800; }
.local-draft-actions .delete { color: #a52f2f; background: #fff6f6; }
.draft-restored { margin-bottom: 12px; padding: 10px 12px; border: 1px solid #e4c16c; border-radius: 8px; background: #fff9e8; color: #66480d; font-size: 13px; line-height: 1.4; }
.dashboard-finance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-week-card { min-width: 0; padding: 14px 16px; border-right: 1px solid var(--line); }
.finance-week-card:last-child { border-right: 0; }
.finance-week-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.finance-week-head strong, .finance-week-head small { display: block; }
.finance-week-head small, .finance-week-detail { color: var(--muted); font-size: 11px; }
.finance-difference { flex: 0 0 auto; padding: 4px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.positive { color: #16845c; }
.negative { color: #a9433e; }
.finance-difference.positive { background: #eaf7f1; }
.finance-difference.negative { background: #fff0ed; }
.finance-week-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 12px 0 9px; }
.finance-week-values > div { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafb; }
.finance-week-values span, .finance-week-values small { display: block; color: var(--muted); font-size: 10px; }
.finance-week-values strong { display: block; margin-top: 4px; font-size: 16px; overflow-wrap: anywhere; }
.dashboard-unpaid-panel { margin-top: 16px; }
.dashboard-unpaid-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-unpaid-row { display: flex; justify-content: space-between; gap: 12px; min-width: 0; padding: 12px 16px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; text-align: left; }
.dashboard-unpaid-row:hover { background: #fffaf2; }
.dashboard-unpaid-row strong, .dashboard-unpaid-row small, .dashboard-unpaid-row span, .dashboard-unpaid-row b { display: block; }
.dashboard-unpaid-row small, .dashboard-unpaid-row span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.dashboard-unpaid-row > div:last-child { flex: 0 0 auto; text-align: right; }
.dashboard-unpaid-row b { margin-top: 2px; color: #a9433e; }
.finance-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.finance-total { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid #718096; border-radius: 8px; background: white; }
.finance-total span, .finance-total small { display: block; color: var(--muted); font-size: 12px; }
.finance-total strong { display: block; margin: 5px 0 1px; font-size: 22px; overflow-wrap: anywhere; }
.finance-total.income { border-left-color: var(--success); }
.finance-total.expense { border-left-color: #c25b55; }
.finance-total.personal-income { border-left-color: #4c7fc5; }
.finance-total.profit { border-left-color: var(--accent); }
.finance-total.balance { border-color: var(--nav); background: var(--nav); color: white; }
.finance-total.balance span, .finance-total.balance small { color: #aebdce; }
.finance-filters { display: flex; gap: 8px; margin: 0 0 10px; }
.finance-filters .filter-select { min-width: 170px; }
.finance-ledger { margin-top: 0; }
.finance-operation { display: grid; grid-template-columns: 100px minmax(180px, 1fr) 130px 135px; gap: 12px; align-items: center; min-height: 68px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.finance-operation:last-child { border-bottom: 0; }
.finance-operation-date small, .finance-operation-main small, .finance-operation-status small { display: block; margin-top: 3px; color: var(--muted); }
.finance-operation-main { min-width: 0; }
.finance-operation-main strong, .finance-operation-main small { overflow-wrap: anywhere; }
.finance-operation-status { text-align: left; }
.finance-operation-status small { color: var(--accent-dark); font-weight: 700; }
.finance-operation-amount { text-align: right; font-size: 17px; }
.finance-operation.income .finance-operation-amount { color: #16845c; }
.finance-operation.expense .finance-operation-amount { color: #a9433e; }
.finance-operation.debt .finance-operation-amount { color: #8a6519; }
.finance-operation.clickable:hover { background: #f7f9fc; }
.two-columns { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; }
.panel { background: white; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; box-shadow: 0 5px 18px #28374708; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.panel-head h3 { margin: 4px 0 0; }
.link-button { border: 0; color: var(--accent-dark); background: transparent; font-weight: 700; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; }
.quick-grid button { min-height: 86px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; color: #303b49; }
.quick-grid button:hover { border-color: var(--accent); background: #fffaf0; }
.quick-grid b { display: block; font-size: 22px; color: var(--accent-dark); margin-bottom: 7px; }
.dashboard-actions { margin-bottom: 16px; }
.dashboard-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px; gap: 10px; }
.dashboard-quick-grid button { min-height: 64px; padding: 9px; }
.dashboard-quick-grid b { display: inline; margin: 0 7px 0 0; font-size: 18px; }
.appointment-row { display: grid; grid-template-columns: 95px 1fr auto; gap: 16px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.appointment-row:last-child { border-bottom: 0; }
.draft-row { background: #fffaf2; }
.appointment-time { color: var(--accent-dark); font-weight: 800; }
.appointment-row strong, .appointment-row small { display: block; }
.appointment-row small { color: var(--muted); margin-top: 4px; }
.pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: #edf7f3; color: #26825f; font-size: 12px; font-weight: 750; }
.draft-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: #fff1d6; color: #9a650f; font-size: 11px; font-weight: 850; white-space: nowrap; }
.section-toolbar { min-height: 54px; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.segmented { background: white; border: 1px solid var(--line); border-radius: 11px; display: flex; align-items: center; overflow: hidden; }
.segmented button { border: 0; background: white; padding: 11px 15px; }
.segmented button.active { background: var(--accent); color: #1a2028; font-weight: 850; }
.segmented strong { min-width: 210px; text-align: center; }
.calendar-mode-toggle button { min-width: 92px; }
.search { width: min(520px, 100%); display: flex; align-items: center; gap: 9px; background: white; border: 1px solid var(--line); border-radius: 11px; padding: 0 13px; }
.search input { width: 100%; border: 0; outline: 0; padding: 12px 0; background: transparent; }
.filter-select { min-width: 165px; border: 1px solid var(--line); border-radius: 11px; background: white; color: #303b49; padding: 11px 12px; font-weight: 700; }
.sales-toolbar .toolbar-actions { justify-content: flex-start; }
.sales-attention { margin: 0 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f7faf9; }
.sales-attention summary { padding: 10px 12px; font-size: 14px; font-weight: 750; cursor: pointer; }
.sales-attention-head { display: flex; justify-content: flex-end; padding: 0 8px 4px; }
.sales-attention-head button { min-height: 32px; padding: 4px 8px; font-size: 12px; }
.sales-attention-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 12px 12px; }
.sales-attention-grid section { min-width: 0; }
.sales-attention-grid h3 { margin: 2px 0 6px; font-size: 13px; }
.sales-attention-grid .sales-list { border-radius: 6px; }
.sales-attention-grid .sales-row { min-height: 56px; padding: 7px 10px; }
@media (max-width: 700px) { .sales-attention-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.sales-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(480px, 100%); margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.sales-tabs button { min-height: 39px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-weight: 750; }
.sales-tabs button.active { border-bottom-color: var(--accent); color: var(--ink); }
.sales-conversations-toolbar { margin-bottom: 10px; }
.sales-conversations-toolbar strong { font-size: 15px; }
.sales-channel-status { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
.sales-channel-status:empty { display: none; }
.sales-channel-pill { flex: 0 0 auto; display: grid; gap: 1px; min-width: 92px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--muted); font-size: 11px; }
.sales-channel-pill b { color: var(--ink); font-size: 12px; }
.sales-channel-pill.ready { border-color: #9ed8c0; background: #f1fbf7; color: #28785d; }
.sales-channel-help { display: grid; gap: 6px; margin: 0 0 10px; }
.sales-channel-help:empty { display: none; }
.sales-channel-setup { border: 1px solid #f1d596; border-radius: 6px; background: #fffaf0; padding: 8px 10px; color: var(--muted); font-size: 12px; }
.sales-channel-setup summary { cursor: pointer; color: var(--ink); font-weight: 800; }
.sales-channel-setup ul { margin: 7px 0 0; padding-left: 18px; }
.sales-channel-setup small { display: block; margin-top: 6px; overflow-wrap: anywhere; }
.sales-instruction-panel { margin-bottom: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.sales-instruction-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sales-instruction-head > div:first-child { display: grid; gap: 2px; min-width: 0; }
.sales-instruction-head small, .sales-instruction-file small { color: var(--muted); }
.sales-instruction-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.sales-instruction-actions .primary-button, .sales-instruction-actions .ghost-button { min-height: 36px; padding: 7px 10px; font-size: 12px; }
.sales-instruction-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px; border-radius: 6px; background: var(--soft); }
.sales-instruction-file > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.sales-instruction-file > span { flex: 0 0 auto; color: #28785d; font-size: 11px; font-weight: 700; }
.sales-instruction-preview { margin-top: 7px; font-size: 12px; }
.sales-instruction-preview summary { cursor: pointer; color: var(--muted); }
.sales-instruction-preview p { max-height: 150px; margin: 7px 0 0; overflow: auto; white-space: pre-wrap; color: var(--ink); }
@media (max-width: 600px) {
  .sales-instruction-head { align-items: stretch; flex-direction: column; }
  .sales-instruction-actions { width: 100%; }
  .sales-instruction-actions > * { flex: 1; text-align: center; }
  .sales-instruction-file { align-items: flex-start; flex-direction: column; }
}
.sales-conversation-meta { color: var(--muted); font-size: 12px; }
.sales-message-list { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sales-message { padding: 9px 0; border-bottom: 1px solid var(--line); }
.sales-message:last-child { border-bottom: 0; }
.sales-message.outbound { padding-left: 10px; border-left: 3px solid #5c91a6; }
.sales-message small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; }
.sales-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sales-conversation-link { display: grid; gap: 8px; }
.sales-conversation-link select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 9px; }
.sales-conversation-link button { justify-self: start; }
.sales-reply-draft { display: grid; gap: 8px; padding-block: 2px; }
.sales-reply-draft h4 { margin: 0; font-size: 15px; }
.sales-reply-draft > p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sales-reply-draft form { display: grid; gap: 8px; }
.sales-reply-draft textarea { width: 100%; min-height: 100px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: inherit; font-size: 16px; }
.sales-draft-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.sales-draft-actions button { min-height: 38px; }
.sales-draft-warning { color: #8c5d12; font-size: 13px; }
.sales-reply-draft .form-error:empty, .sales-conversation-link .form-error:empty { display: none; }
.sales-review { border-top: 1px solid var(--line); padding-top: 10px; }
.sales-review summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; font-size: 13px; }
.sales-review summary span { color: var(--muted); }
.sales-review form { display: grid; gap: 8px; padding-top: 10px; }
.sales-review-actions { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; }
.sales-review-actions select { min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 8px; font-size: 16px; }
.sales-review textarea { width: 100%; min-height: 55px; resize: vertical; border: 1px solid var(--line); border-radius: 7px; padding: 8px; font: inherit; font-size: 16px; }
.sales-review-history { border-top: 1px solid var(--line); padding-top: 10px; }
.sales-review-history summary { cursor: pointer; font-size: 13px; font-weight: 750; }
.sales-review-history-list { padding-top: 8px; }
.sales-review-history-item { padding: 8px 0; border-top: 1px solid var(--line); }
.sales-review-history-item > div { display: flex; justify-content: space-between; gap: 8px; }
.sales-review-history-item small { color: var(--muted); font-size: 11px; }
.sales-review-history-item p { margin: 4px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
@media (max-width: 480px) { .sales-review-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sales-review-actions select { grid-column: 1 / -1; grid-row: 2; } }
.sales-knowledge-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 170px); gap: 10px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.sales-knowledge-form[hidden] { display: none; }
.sales-knowledge-form label { display: grid; gap: 5px; min-width: 0; font-size: 13px; font-weight: 700; }
.sales-knowledge-form label:has(textarea), .sales-knowledge-form .sales-knowledge-active, .sales-knowledge-form .form-error, .sales-knowledge-form .sales-draft-actions { grid-column: 1 / -1; }
.sales-knowledge-form input:not([type="checkbox"]), .sales-knowledge-form select, .sales-knowledge-form textarea { width: 100%; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 16px; }
.sales-knowledge-form textarea { min-height: 85px; resize: vertical; }
.sales-knowledge-form .sales-knowledge-active { display: flex; align-items: center; }
.sales-knowledge-item { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sales-knowledge-item:last-child { border-bottom: 0; }
.sales-knowledge-item.inactive { opacity: .65; }
.sales-knowledge-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.sales-knowledge-head strong { overflow-wrap: anywhere; }
.sales-knowledge-item p { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.sales-knowledge-item small { color: var(--muted); }
@media (max-width: 480px) { .sales-knowledge-form { grid-template-columns: 1fr; } .sales-knowledge-form label { grid-column: 1 / -1; } }
.sales-analytics-toolbar { min-height: 0; margin-bottom: 12px; }
.sales-analytics-toolbar input { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 9px; font-size: 16px; }
.sales-analytics-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: white; }
.sales-analytics-stat { display: grid; gap: 4px; min-width: 0; padding: 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sales-analytics-stat span { color: var(--muted); font-size: 12px; }
.sales-analytics-stat strong { font-size: 19px; overflow-wrap: anywhere; }
.sales-analytics-stat small { color: var(--muted); font-size: 11px; }
.sales-analytics-block { margin-top: 18px; }
.sales-analytics-block h3 { margin: 0 0 8px; font-size: 16px; }
.sales-analytics-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.sales-analytics-line:last-child { border-bottom: 0; }
.sales-analytics-line strong { white-space: nowrap; }
.sales-import { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.sales-import[hidden] { display: none; }
.sales-import-head, .sales-import-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.sales-import-head strong { font-size: 15px; }
.sales-import-row:last-child { border-bottom: 0; }
.sales-import-info { min-width: 0; display: grid; gap: 2px; }
.sales-import-info strong { font-size: 14px; overflow-wrap: anywhere; }
.sales-import-info small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.sales-import-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.sales-import-actions select { min-width: 0; max-width: 125px; padding: 8px; font-size: 12px; }
.sales-import-actions button { padding: 8px 10px; font-size: 12px; }
.sales-import-done { color: #217348; font-size: 12px; font-weight: 700; }
.sales-import-more { margin: 8px 12px; }
.sales-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: white; }
.sales-row { display: flex; width: 100%; min-height: 72px; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 15px; border: 0; border-bottom: 1px solid var(--line); background: white; color: var(--ink); text-align: left; }
.sales-row:last-child { border-bottom: 0; }
.sales-row:hover, .sales-row:focus-visible { background: #f7fafc; }
.sales-row-main { min-width: 0; display: grid; gap: 2px; }
.sales-row-main strong { font-size: 15px; overflow-wrap: anywhere; }
.sales-row-main small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.sales-row-end { flex: 0 0 auto; display: grid; justify-items: end; gap: 3px; font-size: 12px; }
.sales-row-end b { font-size: 14px; }
.sales-row-end small { color: var(--muted); }
.sales-stage { display: inline-flex; padding: 3px 7px; border-radius: 6px; background: #e8edf2; color: #46566a; font-size: 11px; font-weight: 750; }
.sales-stage.contacted, .sales-stage.qualified { background: #e6f2fa; color: #25658b; }
.sales-stage.quoted, .sales-stage.waiting { background: #fff1d5; color: #855d0d; }
.sales-stage.scheduled { background: #e4f0fb; color: #245b9a; }
.sales-stage.won { background: #e2f4e9; color: #217348; }
.sales-stage.lost { background: #fae7e6; color: #aa3935; }
.sales-detail { display: grid; gap: 13px; }
.sales-detail-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 15px; }
.sales-detail-meta > div { display: grid; gap: 2px; min-width: 0; }
.sales-detail-meta span { color: var(--muted); font-size: 12px; }
.sales-detail-meta strong { overflow-wrap: anywhere; }
.sales-interest, .sales-loss { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sales-loss { color: #a53c35; }
.sales-detail-links { display: flex; gap: 8px; flex-wrap: wrap; }
.sales-stage-form { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.sales-stage-form label { display: grid; gap: 5px; font-weight: 700; }
.sales-stage-form select, .sales-stage-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.sales-stage-form button { justify-self: start; }
.client-appointment-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
.client-mini-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: white; }
.client-mini-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 7px 9px; border-bottom: 1px solid var(--line); }
.client-mini-head strong { font-size: 13px; }
.client-mini-head button { border: 0; background: transparent; color: var(--accent-dark); font-size: 10px; font-weight: 800; }
.client-mini-row { display: block; width: 100%; padding: 7px 9px; border: 0; border-bottom: 1px solid var(--line); background: white; text-align: left; }
.client-mini-row:last-child { border-bottom: 0; }
.client-mini-row:hover { background: #fffaf2; }
.client-mini-row > span { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 6px; align-items: baseline; }
.client-mini-row b { color: var(--accent-dark); font-size: 11px; }
.client-mini-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.client-mini-row small { display: block; margin: 2px 0 0 48px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.client-mini-row.draft small { color: #9a650f; }
.client-mini-empty { padding: 16px 9px; color: var(--muted); font-size: 11px; text-align: center; }
.client-kind { display: inline-flex; align-items: center; margin-left: 7px; padding: 4px 8px; border-radius: 999px; background: #edf1f5; color: #5e6b7c; font-size: 11px; font-weight: 850; white-space: nowrap; }
.client-kind.one_time { background: #fff1d6; color: #9a650f; }
.client-kind.repeat { background: #edf7f3; color: #26825f; }
.client-kind.unknown { background: #edf1f5; color: #687586; }
.duplicates-hint { margin-bottom: 14px; line-height: 1.45; }
.duplicate-groups { display: grid; gap: 12px; }
.duplicate-group { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.duplicate-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.duplicate-group-head small, .duplicate-group-head strong { display: block; }
.duplicate-group-head small { color: var(--muted); font-size: 11px; }
.duplicate-group-head > span { font-size: 12px; font-weight: 800; color: var(--accent-dark); }
.duplicate-client-options { display: grid; gap: 7px; margin-bottom: 11px; }
.duplicate-client-option { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: white; cursor: pointer; }
.duplicate-client-option input { width: 18px; height: 18px; margin: 0; }
.duplicate-client-option strong, .duplicate-client-option small { display: block; overflow-wrap: anywhere; }
.duplicate-client-option small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.duplicate-client-option b { color: #27805f; font-size: 10px; }
.duplicates-empty { padding: 28px 12px; text-align: center; }
.duplicates-empty strong { font-size: 18px; }
.duplicates-empty p { color: var(--muted); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { background: #f8fafb; color: #778393; text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
th, td { padding: 14px 18px; border-bottom: 1px solid var(--line); }
tbody tr:hover { background: #fffaf2; }
.money-cell strong, .money-cell small { display: block; }
.money-cell small { color: var(--muted); margin-top: 3px; }
.muted { color: var(--muted); margin: 0; }
.empty { padding: 38px 22px; color: var(--muted); text-align: center; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 15px; }
.future-candidates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.future-candidate-card { min-width: 0; padding: 15px; border: 1px solid #d8c586; border-left: 4px solid var(--accent); border-radius: 8px; background: #fffdf6; box-shadow: 0 4px 14px #2837470a; cursor: pointer; }
.future-candidate-card h3 { margin: 6px 0 3px; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.future-candidate-card p { margin: 4px 0; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.future-candidate-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.future-candidate-head > span { color: var(--accent-dark); font-size: 22px; }
.future-candidate-vehicle { margin: 12px 0 8px; padding: 9px 10px; border: 1px solid #eadfbf; border-radius: 7px; background: white; }
.future-candidate-vehicle small, .future-candidate-vehicle strong { display: block; }
.future-candidate-vehicle small { color: var(--muted); margin-bottom: 3px; }
.future-candidate-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.pill.future { color: #805900; background: #fff0bd; }
.future-candidate-button { border-color: #d5a326; background: #fff6d8; color: #755000; }
.vehicle-card { background: white; border: 1px solid var(--line); border-radius: 15px; padding: 20px; }
.vehicle-card h3 { margin: 8px 0 6px; }
.vehicle-card .plate { display: inline-block; border: 2px solid #28323e; border-radius: 5px; padding: 3px 8px; font-weight: 800; letter-spacing: .08em; }
.vehicle-card dl { display: grid; grid-template-columns: 85px 1fr; gap: 7px; font-size: 13px; margin: 18px 0 0; }
.vehicle-card dt { color: var(--muted); }
.vehicle-card dd { margin: 0; }
.employee-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 14px; }
.employee-card { background: white; border: 1px solid var(--line); border-radius: 15px; padding: 17px; box-shadow: 0 5px 18px #28374708; }
.employee-card.working { border-color: #abd9c7; }
.employee-card.paused { border-color: #e8c46c; }
.employee-card-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.employee-card-head h3 { margin: 7px 0 3px; font-size: 18px; }
.employee-card-head p { margin: 0; color: var(--muted); }
.employee-card-head strong { white-space: nowrap; font-size: 18px; }
.employee-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: #edf1f5; color: #647287; font-size: 12px; font-weight: 850; }
.employee-status.working { background: #edf7f3; color: #26825f; }
.employee-status.paused { background: #fff1d6; color: #9a650f; }
.employee-meta { display: grid; grid-template-columns: 72px 1fr; gap: 7px 10px; margin: 16px 0; font-size: 13px; }
.employee-meta span { color: var(--muted); }
.employee-meta b { overflow-wrap: anywhere; }
.employee-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.employee-actions button { flex: 1 1 115px; }
.status-actions.employee-detail-actions { margin-top: 8px; }
.work-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.employee-plan-card { min-width: 0; background: #f8fafb; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.employee-plan-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 13px 14px; border-bottom: 1px solid var(--line); background: white; }
.employee-plan-head h3 { margin: 5px 0 2px; font-size: 17px; }
.employee-plan-head small { color: var(--muted); }
.employee-plan-head > strong { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 15px; background: var(--ink); color: white; }
.employee-plan-tasks { display: grid; gap: 8px; padding: 9px; }
.planner-task { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; }
.planner-task.urgent { border-color: #e7b0a6; background: #fff8f7; }
.planner-task.done { opacity: .72; }
.planner-task h4 { margin: 7px 0 4px; font-size: 15px; overflow-wrap: anywhere; }
.planner-task > p { margin: 4px 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.planner-task-vehicle { color: var(--ink) !important; font-weight: 700; }
.planner-checklist { display: grid; gap: 5px; margin: 9px 0; }
.planner-checkpoint { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 6px; align-items: start; padding: 7px; border-radius: 6px; background: #f5f7f9; }
.planner-checkpoint.done { background: #edf8f3; }
.planner-checkpoint.not_done { background: #fff6e5; }
.planner-checkpoint strong, .planner-checkpoint small { display: block; overflow-wrap: anywhere; }
.planner-checkpoint strong { font-size: 12px; }
.planner-checkpoint small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.planner-checkmark { font-weight: 800; text-align: center; }
.planner-checkpoint .pill { align-self: center; font-size: 9px; }
.employee-plan-card { border-radius: 8px; }
.employee-plan-add { width: calc(100% - 18px); margin: 0 9px 9px; min-height: 42px; border: 1px dashed #9aa6b5; border-radius: 7px; background: white; color: var(--ink); font-weight: 800; }
.planner-personal-list { display: grid; gap: 6px; }
.planner-vehicle-task { border: 1px solid #cfd7e1; border-radius: 8px; background: white; overflow: hidden; }
.planner-vehicle-task > summary { list-style: none; cursor: pointer; }
.planner-vehicle-task > summary::-webkit-details-marker { display: none; }
.planner-vehicle-task > summary .planner-vehicle-head h4::before { content: "▸"; display: inline-block; margin-right: 6px; transition: transform .15s ease; }
.planner-vehicle-task[open] > summary .planner-vehicle-head h4::before { transform: rotate(90deg); }
.planner-vehicle-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px; background: #eef3f7; }
.planner-vehicle-head small, .planner-vehicle-head span { display: block; color: var(--muted); font-size: 11px; }
.planner-vehicle-head h4 { margin: 2px 0; font-size: 15px; overflow-wrap: anywhere; }
.planner-vehicle-actions { display: flex; gap: 5px; flex: 0 0 auto; }
.icon-button { width: 34px; height: 34px; border: 0; border-radius: 7px; background: var(--ink); color: white; font-size: 22px; line-height: 1; }
.icon-button.danger { background: #fff0ed; color: #a43d31; }
.plan-progress { height: 5px; background: #e1e6ec; }
.plan-progress i { display: block; height: 100%; background: #2a9d72; transition: width .2s ease; }
.vehicle-plan-list { display: grid; gap: 1px; margin: 0; }
.plan-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.planner-personal-list > .plan-item { border-left: 3px solid #4c78a8; }
.plan-item.done { background: #edf8f3; }
.plan-item.not_done { background: #fff2ef; }
.plan-item.final { border-color: #e2b64c; background: #fffdf7; }
.plan-final-checks, .task-final-checks { display: grid; gap: 7px; margin-top: 11px; padding: 10px; border: 2px solid #e2b64c; border-radius: 8px; background: #fff8e7; }
.final-checks-heading { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 0 2px 3px; }
.final-checks-heading strong { color: #805713; font-size: 13px; }
.final-checks-heading small { color: #8b744b; font-size: 10px; text-align: right; }
.plan-final-checks .plan-item.final { border-color: #e7c875; }
.plan-item.detail { padding: 7px 8px; }
.plan-item-main { min-width: 0; }
.plan-item-main strong, .plan-item-main p, .plan-item-main small { overflow-wrap: anywhere; }
.plan-item-main strong { font-size: 13px; }
.plan-item-main p { margin: 4px 0 0; color: var(--muted); font-size: 12px; white-space: pre-wrap; }
.plan-item-main small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.plan-item-main .plan-failure { color: #9b352e; font-weight: 700; }
.plan-urgent, .plan-low { display: inline-block; margin-left: 6px; padding: 2px 5px; border-radius: 4px; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.plan-urgent { background: #ffe3de; color: #9b352e; }
.planner-vehicle-task.has-urgent { border-left: 4px solid #bd3f35; }
.work-task-card.urgent .plan-urgent { margin: 4px 0 8px; font-size: 12px; }
.plan-low { background: #edf1f5; color: #687485; }
.plan-status-actions { display: flex; gap: 4px; }
.plan-status-button { width: 27px; height: 27px; padding: 0; border: 1px solid #cbd3dc; border-radius: 5px; background: white; color: #687485; font-size: 16px; font-weight: 900; }
.plan-status-button.done.active { border-color: #2a9d72; background: #2a9d72; color: white; }
.plan-status-button.failed.active { border-color: #b7493d; background: #b7493d; color: white; }
.plan-status-static { width: 27px; text-align: center; font-weight: 900; }
.plan-item-tools { display: flex; gap: 5px; align-items: center; }
.plan-item-tools button { padding: 3px 0; border: 0; background: transparent; color: #657286; font-size: 10px; text-decoration: underline; }
.plan-service { border-bottom: 1px solid var(--line); }
.plan-service > summary { list-style: none; cursor: pointer; }
.plan-service > summary::-webkit-details-marker { display: none; }
.plan-service > summary .plan-item { border: 0; border-radius: 0; background: #f8fafc; }
.plan-service-icon { width: 27px; text-align: center; color: #657286; font-weight: 900; transition: transform .15s ease; }
.plan-service[open] .plan-service-icon { transform: rotate(90deg); }
.service-progress-label { color: #2b8062 !important; font-weight: 800; }
.plan-service-children { display: grid; gap: 4px; padding: 5px 7px 7px 28px; background: white; }
.plan-service-note { padding: 7px; color: var(--muted); font-size: 11px; white-space: pre-wrap; }
.plan-personal { border-radius: 7px; }
.plan-personal > summary { list-style: none; cursor: pointer; }
.plan-personal > summary::-webkit-details-marker { display: none; }
.plan-personal:not([open]) .plan-item-main p,
.plan-personal:not([open]) .plan-item-main small { display: none; }
.plan-personal > summary .plan-item-main strong::before { content: "▸"; display: inline-block; margin-right: 5px; color: #4c78a8; transition: transform .15s ease; }
.plan-personal[open] > summary .plan-item-main strong::before { transform: rotate(90deg); }
.work-task-card { background: white; border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; box-shadow: 0 5px 18px #28374708; cursor: pointer; }
.work-task-card.urgent { border-color: #e7b0a6; background: #fff8f7; }
.work-task-card.done { opacity: .72; }
.work-task-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
.work-task-head strong { color: #566274; font-size: 14px; white-space: nowrap; }
.work-task-card h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.work-task-assignee, .work-task-meta { color: var(--muted); }
.work-task-assignee { margin: 0 0 8px; font-size: 13px; line-height: 1.35; }
.work-task-meta { display: flex; gap: 7px; flex-wrap: wrap; font-size: 12px; font-weight: 750; }
.task-checklist { display: grid; gap: 8px; }
.task-service-group { overflow: hidden; border: 1px solid #cfd7e1; border-radius: 9px; background: white; }
.task-service-group > summary { list-style: none; cursor: pointer; padding: 11px; background: #eef3f7; }
.task-service-group > summary::-webkit-details-marker { display: none; }
.task-service-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.task-service-heading > div { min-width: 0; }
.task-service-heading strong { display: block; overflow-wrap: anywhere; }
.task-service-heading strong::before { content: "▸"; display: inline-block; margin-right: 6px; transition: transform .15s ease; }
.task-service-group[open] .task-service-heading strong::before { transform: rotate(90deg); }
.task-service-heading small { display: block; margin-top: 4px; color: #2b8062; font-size: 12px; font-weight: 800; }
.task-service-group > summary .task-check-manage { margin-top: 8px; }
.task-service-group > summary .plan-progress { margin-top: 9px; border-radius: 4px; overflow: hidden; }
.task-service-items { display: grid; gap: 7px; padding: 8px; }
.task-check-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: #f8fafb; padding: 10px; }
.task-check-item.done { border-color: #abd9c7; background: #f2fbf7; }
.task-check-item.not_done { border-color: #e8c46c; background: #fffaf0; }
.task-final-checks .task-check-item.final { border-color: #e2b64c; background: white; }
.task-final-checks .task-check-item.final.done { border-color: #78b99e; background: #f2fbf7; }
.task-final-checks .task-check-item.final.not_done { border-color: #d99186; background: #fff4f2; }
.checkpoint-priority.final { background: #f7d77f; color: #6f4b0e; }
.task-check-item small { display: block; color: var(--muted); margin-top: 3px; }
.task-check-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.task-check-manage { display: flex; justify-content: flex-end; gap: 7px; }
.small-button.danger { border-color: #efd1cd; background: #fff0ed; color: #a43d31; }
.media-button { white-space: nowrap; }
.checkpoint-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 112px)); gap: 6px; margin-top: 8px; }
.checkpoint-media-card { border-radius: 7px; }
.checkpoint-media-card img, .checkpoint-media-card video { height: 70px; }
.checkpoint-media-card div { padding: 5px 7px; }
.checkpoint-media-card strong { font-size: 11px; }
.checkpoint-media-card small { margin-top: 1px; font-size: 9px; }
.work-task-section { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.work-task-section .section-title { margin-bottom: 8px; }
.today-task-cars { display: grid; gap: 8px; }
.today-task-car { margin: 0; display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 9px; background: #f8fafb; padding: 11px; color: var(--ink); cursor: pointer; }
.today-task-car:hover { border-color: var(--accent); background: #fffaf0; }
.today-task-car input { width: 17px; height: 17px; margin: 2px 0 0; }
.today-task-car strong, .today-task-car small { display: block; }
.today-task-car small { color: var(--muted); margin-top: 3px; line-height: 1.35; }
.work-task-row { position: relative; display: grid; grid-template-columns: 1fr 1.2fr; gap: 7px; padding: 7px 32px 7px 7px; margin-bottom: 7px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.work-task-row input { margin-top: 0; padding: 8px; }
.work-task-detail-head { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; border: 1px solid var(--line); border-radius: 11px; background: #f8fafb; padding: 14px; }
.work-task-detail-head h3 { margin: 8px 0 6px; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.work-task-detail-head p { margin: 3px 0; color: var(--muted); line-height: 1.35; }
.work-task-detail-actions { display: grid; gap: 8px; justify-items: end; }
.work-task-detail-actions strong { font-size: 18px; white-space: nowrap; }
.empty.compact { padding: 18px 12px; }
.calendar-grid { background: var(--line); border: 1px solid var(--line); border-radius: 15px; overflow: auto; }
.calendar-grid.week { display: block; }
.calendar-grid.month { display: grid; grid-template-columns: repeat(7, minmax(118px, 1fr)); gap: 1px; }
.calendar-week-grid { display: grid; grid-template-columns: 58px repeat(7, minmax(142px, 1fr)); gap: 1px; min-width: 1052px; background: var(--line); }
.calendar-week-compact { display: grid; grid-template-columns: repeat(7, minmax(176px, 1fr)); gap: 1px; min-width: 1232px; background: var(--line); }
.calendar-week-day { min-width: 0; background: #fff; padding: 9px; }
.calendar-week-day.today { background: #fffaf1; }
.calendar-week-day-head { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 7px; margin: -9px -9px 8px; padding: 9px; border-bottom: 1px solid var(--line); background: inherit; }
.calendar-week-day-head strong, .calendar-week-day-head small { display: block; }
.calendar-week-day-head small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.calendar-week-events { min-height: 44px; }
.calendar-week-empty { display: block; padding: 8px 2px 12px; color: var(--muted); }
.calendar-compact-times { margin-top: 8px; border-top: 1px solid var(--line); }
.calendar-compact-times summary { padding: 9px 1px 3px; color: var(--accent-dark); font-size: 11px; font-weight: 850; cursor: pointer; list-style: none; }
.calendar-compact-times summary::-webkit-details-marker { display: none; }
.calendar-compact-times > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding-top: 7px; }
.calendar-compact-time { min-height: 30px; padding: 4px; border: 1px solid #dce1e7; border-radius: 6px; background: #f8fafb; color: var(--ink); font-size: 11px; font-weight: 750; }
.calendar-compact-time:hover, .calendar-compact-time:focus-visible { border-color: #e3b650; background: #fff6dc; outline: none; }
.calendar-week-corner, .calendar-week-head { position: sticky; top: 0; z-index: 4; min-height: 57px; display: grid; align-content: center; background: #f6f8fa; padding: 8px; }
.calendar-week-corner { left: 0; z-index: 6; color: var(--muted); font-size: 11px; font-weight: 800; text-align: center; }
.calendar-week-head { text-align: center; }
.calendar-week-head strong, .calendar-week-head small { display: block; }
.calendar-week-head small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.calendar-week-head.today { background: #fff4d2; }
.calendar-time-label { position: sticky; left: 0; z-index: 3; min-height: 58px; display: grid; place-items: start center; background: #f6f8fa; padding: 7px 4px; color: #66717f; font-size: 11px; font-weight: 800; }
.calendar-time-slot { position: relative; min-height: 58px; background: white; padding: 4px; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
.calendar-time-slot.half-hour { background: #fcfdfe; }
.calendar-time-slot.today { background: #fffdf7; }
.calendar-time-slot:hover, .calendar-time-slot:focus-visible { z-index: 1; outline: none; background: #fff8e7; box-shadow: inset 0 0 0 2px #e3b650; }
.calendar-slot-add { position: absolute; top: 5px; right: 6px; color: #b17b17; font-size: 16px; font-weight: 900; opacity: 0; }
.calendar-time-slot:hover .calendar-slot-add, .calendar-time-slot:focus-visible .calendar-slot-add { opacity: 1; }
.calendar-time-slot .calendar-event { position: relative; z-index: 1; margin: 0 0 3px; padding: 5px 6px; }
.calendar-day { min-height: 430px; min-width: 135px; background: white; padding: 13px; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
.calendar-day:hover { background: #fffdf7; box-shadow: inset 0 0 0 1px #e3b650; }
.calendar-day.month-day { min-height: 148px; min-width: 118px; padding: 9px; }
.calendar-day.today { background: #fffaf1; }
.calendar-day.outside { background: #f8fafb; color: #8b96a5; }
.calendar-day-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 6px; margin-bottom: 13px; }
.calendar-day.month-day .calendar-day-head { grid-template-columns: auto minmax(0, 1fr) 28px; margin-bottom: 7px; }
.calendar-day-head strong { display: block; }
.calendar-day-head small { color: var(--muted); }
.calendar-day:not(.month-day) .calendar-day-head small { grid-column: 1; }
.calendar-day-add { grid-column: 2; grid-row: 1 / 3; width: 28px; height: 28px; padding: 0; border: 1px solid #ecd595; border-radius: 7px; background: #fff6dc; color: #9a650f; font-size: 18px; font-weight: 900; line-height: 1; }
.calendar-day.month-day .calendar-day-add { grid-column: 3; grid-row: 1; }
.calendar-day-add:hover { background: #e9ad27; color: #111827; }
.calendar-event { border: 1px solid #cbd1d8; border-left: 4px solid #7d8794; background: #f1f3f5; border-radius: 7px; padding: 9px; margin-bottom: 8px; font-size: 12px; }
.calendar-event.status-new { border-color: #cbd1d8; border-left-color: #7d8794; background: #f1f3f5; }
.calendar-event.status-confirmed { border-color: #9fd9ef; border-left-color: #36a9da; background: #e8f7ff; }
.calendar-event.status-in_progress { border-color: #9db8ef; border-left-color: #2f68cb; background: #eaf1ff; }
.calendar-event.status-done { border-color: #9bd3b2; border-left-color: #2f9360; background: #e9f8ef; }
.calendar-event.status-cancelled { border-color: #efaaa6; border-left-color: #cc403b; background: #fff0ef; }
.calendar-event.compact { padding: 6px 7px; margin-bottom: 5px; font-size: 11px; line-height: 1.25; cursor: pointer; }
.calendar-event b, .calendar-event span { display: block; }
.calendar-event span { color: var(--muted); margin-top: 3px; }
.calendar-event .calendar-service-line { line-height: 1.35; overflow-wrap: anywhere; }
.calendar-event .calendar-service-line strong { color: var(--ink); font-weight: 800; }
.calendar-event.status-in_progress span { color: #355887; }
.calendar-event.status-done span { color: #3c7253; }
.calendar-event.status-cancelled span { color: #8c4a47; }
.calendar-more { display: block; margin-top: 4px; color: var(--accent-dark); font-size: 11px; font-weight: 850; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: #07101cbb; backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; }
.modal-backdrop.hidden { display: none; }
#formModal { z-index: 60; }
.checkpoint-list { display: grid; gap: 12px; }
.checkpoint-row { padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.checkpoint-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.checkpoint-heading strong { min-width: 0; overflow-wrap: anywhere; }
.checkpoint-heading .remove-service { position: static; width: 32px; height: 32px; flex-shrink: 0; }
.checkpoint-heading .remove-service:disabled { visibility: hidden; }
.checkpoint-fields { display: grid; grid-template-columns: minmax(0, 1fr) 115px; gap: 0 10px; }
.checkpoint-fields .wide { grid-column: 1 / -1; }
.checkpoint-fields label { margin: 6px 0; min-width: 0; }
.checkpoint-fields input, .checkpoint-fields select, .checkpoint-fields textarea { padding: 8px; margin-top: 4px; }
.checkpoint-fields select, .checkpoint-fields input { min-width: 0; }
.checkpoint-picker { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; padding: 8px 10px; border: 1px solid #ccd6e1; border-radius: 8px; background: #fff; color: var(--ink); }
.checkpoint-picker input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.checkpoint-picker span { font-weight: 800; }
.vehicle-checkpoint-row.selectable:not(.chosen) .checkpoint-fields { display: none; }
.checkpoint-busy { margin: 7px 0; padding: 8px 10px; border: 1px solid #ead39c; border-radius: 8px; background: #fff8e7; color: #674407; font-size: 12px; }
.checkpoint-busy strong, .checkpoint-busy small { display: block; }
.checkpoint-busy small { margin-top: 3px; color: #7d6841; }
.checkpoint-add { min-width: 44px; min-height: 44px; margin-top: 10px; font-size: 22px; }
.vehicle-plan-builder-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vehicle-plan-builder-actions .checkpoint-add { flex: 1 1 190px; font-size: 14px; }
.vehicle-task-select { display: block; margin: 12px 0 6px; }
.vehicle-task-select select { margin-top: 6px; }
.vehicle-checkpoint-row.service { border-left: 3px solid #3a8c73; padding-left: 10px; }
.vehicle-checkpoint-row.final { border-left: 3px solid var(--accent); padding-left: 10px; background: #fffbf0; }
.vehicle-final-builder { display: grid; gap: 9px; margin-top: 14px; padding: 11px; border: 2px solid #e2b64c; border-radius: 8px; background: #fff8e7; }
.vehicle-final-builder-head strong, .vehicle-final-builder-head small { display: block; }
.vehicle-final-builder-head strong { color: #805713; }
.vehicle-final-builder-head small { margin-top: 2px; color: #8b744b; font-size: 11px; }
.checkpoint-row-tools { display: flex; gap: 6px; align-items: center; }
.checkpoint-row-tools .line-add-button, .checkpoint-row-tools .remove-service { position: static; flex: 0 0 auto; }
.checkpoint-row-tools .line-add-button { width: auto; min-height: 34px; padding: 6px 9px; font-size: 13px; }
.personal-checkpoint-row.detail { margin-left: 18px; padding-left: 10px; border-left: 3px solid #cfd7e1; }
.plan-personal-group, .task-personal-group { border-left: 3px solid #cfd7e1; padding-left: 8px; }
.plan-personal-group .plan-service-children, .task-personal-group .task-service-items { margin-left: 12px; }
.checkpoint-result { color: var(--ink) !important; font-weight: 700; }
.checkpoint-content { min-width: 0; flex: 1; }
.checkpoint-description { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; margin: 6px 0; }
.checkpoint-priority { flex-shrink: 0; }
.checkpoint-priority.urgent { color: #a32626; background: #fde8e8; }
.checkpoint-priority.low { color: #286348; background: #e8f4ed; }
.mistake-actions { margin-bottom: 12px; }
.employee-mistake-picker { grid-column: 1 / -1; margin: 10px 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.employee-mistake-picker legend { padding: 0 5px; color: #4d5968; font-size: 13px; font-weight: 800; }
.employee-mistake-picker > small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.employee-mistake-choice { display: flex; align-items: center; gap: 9px; min-height: 44px; margin: 0; padding: 8px 5px; border-bottom: 1px solid var(--line); color: var(--ink); }
.employee-mistake-choice:last-of-type { border-bottom: 0; }
.employee-mistake-choice input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; }
.employee-mistake-choice span { min-width: 0; overflow-wrap: anywhere; }
.employee-tabs { display: flex; border-bottom: 1px solid var(--line); gap: 4px; margin-bottom: 14px; }
.employee-tabs button { flex: 1; min-width: 0; min-height: 44px; padding: 8px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 14px; }
.employee-tabs button.active { border-bottom-color: var(--accent); color: var(--ink); font-weight: 700; }
.employee-attendance-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; }
[data-employee-panel] .detail-list-item b { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.employee-pay-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.employee-pay-toolbar label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.employee-pay-toolbar input { min-width: 0; max-width: 190px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.employee-pay-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 12px 0; border-block: 1px solid var(--line); }
.employee-pay-totals dt { font-size: 13px; color: var(--muted); }
.employee-pay-totals dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.employee-pay-note { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 10px 0; }
.employee-pay-table-wrap { max-width: 100%; overflow-x: auto; }
.employee-pay-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.employee-pay-table th, .employee-pay-table td { padding: 9px 3px; text-align: right; border-bottom: 1px solid var(--line); white-space: normal; overflow-wrap: anywhere; letter-spacing: 0; text-transform: none; }
.employee-pay-table th:nth-child(1) { width: 13%; }
.employee-pay-table th:nth-child(2) { width: 17%; }
.employee-pay-table th:first-child { text-align: left; }
.employee-pay-table thead th { font-size: 12px; background: #f3f5f7; }
.employee-pay-table small { display: block; font-size: 12px; color: var(--muted); }
.employee-pay-table .employee-pay-entry td { text-align: left; white-space: normal; background: #f4f9f6; }
.employee-pay-entry div { display: flex; justify-content: space-between; gap: 12px; }
.employee-pay-entry span { min-width: 0; overflow-wrap: anywhere; }
.employee-pay-entry b { flex-shrink: 0; }
@media (max-width: 600px) { .employee-pay-table { font-size: 12px; } }
.modal { width: min(560px, 100%); max-height: 92vh; overflow: auto; background: white; border-radius: 18px; padding: 27px; box-shadow: 0 30px 80px #02081266; }
.detail-modal { width: min(760px, 100%); }
.login-card { width: min(410px, 100%); text-align: center; }
.login-card h2 { margin: 6px 0 8px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.modal-head h2 { margin: 5px 0 0; }
.close-button { border: 0; background: #edf1f5; width: 36px; height: 36px; border-radius: 9px; font-size: 22px; }
form label { display: block; text-align: left; font-size: 13px; font-weight: 700; color: #4d5968; margin: 13px 0; }
form input, form select, form textarea { display: block; width: 100%; margin-top: 6px; border: 1px solid #d9e0e7; border-radius: 9px; padding: 11px 12px; outline: 0; color: var(--ink); background: white; }
form input:focus, form select:focus, form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #e3a62f1b; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .wide { grid-column: 1 / -1; }
.contact-channels { border: 0; padding: 0; margin: 2px 0 7px; min-width: 0; }
.contact-channels legend { padding: 0; color: #4d5968; font-size: 13px; font-weight: 800; }
.contact-channel-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 7px; }
.contact-channel-option { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; color: var(--ink); font-size: 13px; }
.contact-channel-option input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.contact-channel-option span { min-width: 0; overflow-wrap: anywhere; }
.form-error { color: #c03c3c; min-height: 18px; font-size: 13px; line-height: 1.45; white-space: pre-line; }
.catalog-loading { display: grid; gap: 7px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.catalog-loading small { color: var(--muted); line-height: 1.45; }
.catalog-loading.error { border-color: #e9b7b7; background: #fff6f6; }
.catalog-loading .primary-button { margin-top: 6px; }
.feedback-tip { border: 1px solid #ead39c; border-radius: 10px; background: #fffaf0; padding: 13px 14px; color: #3d4653; }
.feedback-tip p { margin: 6px 0 0; color: var(--muted); line-height: 1.45; }
.login-note { color: #277456; min-height: 18px; font-size: 13px; margin: 10px 0 0; }
.login-code.hidden { display: none; }
.service-editor { margin-top: 14px; padding-top: 15px; border-top: 1px solid var(--line); }
.service-lines-head { display: grid; grid-template-columns: minmax(145px, 1fr) minmax(150px, 1.2fr) 105px; gap: 7px; padding: 0 35px 7px 4px; color: var(--muted); font-size: 12px; font-weight: 800; }
.service-editor-row { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(100px, .65fr); gap: 7px; padding: 7px 32px 7px 7px; margin-bottom: 7px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.service-editor-row input, .service-editor-row select { padding: 8px; margin-top: 0; }
.service-editor-row .service-amount { margin: 0; }
.service-editor-row .service-amount span { display: block; margin: 0 0 5px; font-size: 11px; }
.service-work-group, .booking-service-group { margin-bottom: 9px; }
.service-work-group > .service-editor-row, .booking-service-group > .booking-service-row { margin-bottom: 0; }
.service-detail-list:empty { display: none; }
.service-detail-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 7px; margin: 0 0 0 12px; padding: 8px 32px 8px 10px; border: 0; border-left: 2px solid var(--line); border-radius: 0; background: #fff; }
.service-detail-row .service-amount { margin: 0; }
.service-detail-row .service-amount span { display: block; margin: 0 0 5px; font-size: 11px; }
.booking-service-row { position: relative; display: grid; grid-template-columns: minmax(145px, 1fr) minmax(150px, 1.2fr) 105px; gap: 7px; padding: 7px 32px 7px 7px; margin-bottom: 7px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.booking-service-row input, .booking-service-row select { padding: 8px; margin-top: 0; }
.line-comment { display: grid; grid-template-columns: 1fr 32px; gap: 5px; }
.line-comment.service-comment-only { grid-template-columns: 1fr; }
.line-add-button { border: 0; border-radius: 7px; background: #fff4d8; color: var(--accent-dark); font-size: 16px; font-weight: 900; padding: 0; }
.booking-total { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 2px 0; font-size: 16px; color: var(--muted); }
.booking-total strong { color: var(--ink); }
.payment-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.payment-summary div { border: 1px solid var(--line); border-radius: 11px; background: #f8fafb; padding: 13px; }
.payment-summary span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.payment-summary strong { display: block; font-size: 20px; }
.appointment-payment-card { border: 1px solid #d9dee5; border-radius: 11px; background: #f8fafb; padding: 14px; }
.appointment-payment-card .section-title { align-items: end; margin-bottom: 12px; }
.appointment-payment-card .section-title h3 { margin-bottom: 2px; }
.appointment-payment-card .section-title small { color: var(--muted); }
.appointment-payment-card .section-title > strong { font-size: 18px; white-space: nowrap; }
.appointment-payment-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.appointment-payment-fields label { color: #4f5a69; font-size: 12px; font-weight: 800; }
.appointment-payment-fields input { margin-top: 5px; background: white; }
.appointment-payment-fields .payment-method-field { grid-column: 1 / -1; }
.appointment-payment-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.appointment-payment-footer > div span, .appointment-payment-footer > div strong { display: block; }
.appointment-payment-footer > div span { color: var(--muted); font-size: 11px; }
.appointment-payment-footer > div strong { margin-top: 2px; font-size: 19px; }
.appointment-payment-card .form-error { margin: 8px 0 0; }
.period-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.period-buttons .active { background: var(--primary); color: white; border-color: var(--primary); }
.statistics-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.statistics-panels { grid-template-columns: 1.2fr .9fr; }
.remove-service { position: absolute; top: 7px; right: 5px; width: 24px; height: 24px; border: 0; border-radius: 7px; background: #f6e5e5; color: #a52f2f; font-size: 17px; }
.scan-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px dashed #c9a553; border-radius: 10px; background: #fffaf0; }
.scan-copy { min-width: 0; flex: 1; }
.scan-panel small { display: block; color: var(--muted); margin-top: 3px; }
.scan-panel .scan-status.ok { color: var(--success); font-weight: 800; }
.scan-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.media-mini-strip { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.media-mini-strip[hidden] { display: none; }
.media-mini-card { position: relative; width: 76px; min-width: 76px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: white; }
.media-mini-card.saved { border-color: #9dcfbd; }
.media-mini-card.pending { border-color: #e5bd59; }
.media-mini-card img, .media-mini-card video, .media-mini-file { display: block; width: 100%; height: 54px; object-fit: cover; background: #edf1f5; }
.media-mini-file { display: grid; place-items: center; padding: 4px; color: var(--muted); font-size: 10px; text-align: center; }
.media-mini-card small { display: block; margin: 0; padding: 4px; color: var(--muted); font-size: 8px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-mini-loading { align-self: center; color: var(--muted); font-size: 11px; }
.local-file-previews { width: 100%; margin: 8px 0; }
.appointment-vehicle-choices { padding: 9px 10px; border: 1px solid #b8ddcf; border-radius: 8px; background: #f3fbf8; }
.appointment-vehicle-choices > small { display: block; margin-bottom: 6px; color: #267458; font-weight: 800; }
.appointment-vehicle-choices > div { display: flex; flex-wrap: wrap; gap: 6px; }
.appointment-vehicle-choices button { min-height: 34px; border: 1px solid #9dcfbd; border-radius: 7px; background: white; color: #184e3a; padding: 7px 9px; font: inherit; font-size: 12px; font-weight: 800; }
.small-button.light { background: white; color: #263140; border: 1px solid var(--line); }
.detail-hero { display: flex; justify-content: space-between; gap: 18px; padding: 18px; border-radius: 13px; background: #f6f8fa; margin-bottom: 18px; }
.detail-hero h3 { margin: 0 0 5px; }
.detail-hero p { margin: 3px 0; color: var(--muted); }
.client-folder-link { display: inline-flex; align-items: center; margin-top: 8px; border-radius: 8px; background: #fff4d8; color: #8c5c0d; padding: 8px 10px; font-size: 13px; font-weight: 800; text-decoration: none; }
.client-folder-link:hover { background: #ffe7ad; color: #684206; }
.detail-stat { text-align: right; }
.detail-stat strong { display: block; font-size: 23px; }
.detail-edit { margin-top: 10px; }
.status-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 18px; }
.status-actions button { border: 1px solid var(--line); border-radius: 999px; background: white; color: #425063; padding: 8px 11px; font-size: 13px; font-weight: 750; }
.status-actions button.active { background: #edf7f3; border-color: #a8d8c6; color: #26825f; }
.status-actions button:not(.active):hover { border-color: var(--accent); background: #fffaf0; color: #1a2028; }
.settings-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.settings-panel { align-self: start; }
.settings-list { display: grid; gap: 1px; background: var(--line); }
.settings-row { border: 0; background: white; color: var(--ink); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font: inherit; }
.settings-row:hover { background: #fffaf0; }
.settings-row span, .settings-row small { display: block; }
.settings-row small { color: var(--muted); margin-top: 3px; }
.settings-row strong { color: var(--accent-dark); font-size: 13px; }
.permission-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.permission-presets .small-button { flex: 1 1 150px; }
.permissions-grid { display: grid; gap: 12px; }
.permission-group { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #f8fafb; }
.permission-group h3 { margin: 0 0 10px; font-size: 15px; }
.permission-toggle { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); }
.permission-toggle:first-of-type { border-top: 0; padding-top: 0; }
.permission-toggle input { margin-top: 3px; width: 18px; height: 18px; }
.permission-toggle b, .permission-toggle small { display: block; }
.permission-toggle small { color: var(--muted); margin-top: 2px; }
.attendance-calendar { display: grid; grid-template-columns: repeat(7, minmax(82px, 1fr)); gap: 8px; }
.attendance-day { min-height: 112px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.attendance-day.has-shift { background: #fffaf0; border-color: #ead39c; }
.attendance-day.has-availability { border-color: #9dcfbd; }
.attendance-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.attendance-day-head strong { font-size: 18px; }
.attendance-day-head span { color: var(--muted); font-size: 12px; font-weight: 800; }
.attendance-hint { margin: 0 0 10px; }
.attendance-availability { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 7px; border: 1px solid; border-radius: 6px; }
.attendance-availability.available { color: #146344; background: #edf8f3; border-color: #a9d8c5; }
.attendance-availability.unavailable { color: #9b2f25; background: #fff1ef; border-color: #ecc1bb; }
.attendance-availability span { display: grid; gap: 1px; min-width: 0; }
.attendance-availability b { font-size: 12px; }
.attendance-availability small { font-size: 10px; overflow-wrap: anywhere; }
.attendance-availability button { width: 24px; height: 24px; flex: 0 0 24px; border: 0; border-radius: 50%; background: transparent; color: currentColor; font-size: 18px; line-height: 1; }
.attendance-availability-add { min-height: 30px; border: 1px dashed #9dcfbd; border-radius: 6px; background: #fff; color: #21664d; font: inherit; font-size: 11px; font-weight: 800; }
.employee-service-access p { margin: 0 0 4px; font-weight: 800; line-height: 1.45; }
.service-access-master { margin-bottom: 12px; }
.service-access-grid { margin: 0 0 14px; }
.attendance-shift { width: 100%; border: 1px solid #d9e0e7; border-radius: 7px; background: white; color: var(--ink); padding: 7px; text-align: left; }
.attendance-shift span, .attendance-shift small, .attendance-correction { display: block; }
.attendance-shift span { font-weight: 850; }
.attendance-shift small { color: var(--muted); margin-top: 3px; }
.attendance-shift:hover { border-color: var(--accent); box-shadow: 0 5px 14px #25354a14; }
.attendance-edit-label { display: inline-flex; width: fit-content; margin-top: 7px; border-radius: 6px; background: #fff4d8; color: #8c5c0d; padding: 4px 7px; font-size: 11px; }
.attendance-empty { width: 100%; margin-top: auto; border: 1px dashed #cfd7df; border-radius: 7px; background: white; color: var(--muted); padding: 8px 6px; font-size: 12px; font-weight: 800; }
.attendance-empty:hover { border-color: var(--accent); color: #1a2028; background: #fffaf0; }
.attendance-correction { color: #9a650f !important; overflow-wrap: anywhere; }
.correction-details { border: 1px solid #ead39c; border-radius: 9px; background: #fffaf0; padding: 10px 12px; margin-bottom: 12px; color: #674407; }
.correction-details strong, .correction-details small { display: block; }
.correction-details small { margin-top: 5px; line-height: 1.35; }
.attendance-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.attendance-absence { width: 100%; border: 1px solid #d8e4ee; border-radius: 7px; background: #eef6fb; color: #37556e; padding: 8px; text-align: left; }
.attendance-absence.vacation { background: #fff7e5; border-color: #ead39c; color: #8c5c0d; }
.attendance-absence.day_off { background: #f1f4f8; border-color: #d6dee8; color: #526274; }
.attendance-absence.sick_leave { background: #fff0f0; border-color: #ecc5c5; color: #963b3b; }
.attendance-absence b, .attendance-absence small { display: block; }
.attendance-absence small { margin-top: 3px; color: inherit; opacity: .8; }
.detail-section { margin-top: 22px; }
.detail-section.compact { margin-top: 16px; }
.detail-section.sts-section { margin-top: 0; }
.vehicle-data { margin-top: 14px; }
.detail-section h3 { margin: 0 0 10px; font-size: 16px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-title h3 { margin: 0; }
.small-button { display: inline-flex; align-items: center; padding: 8px 11px; border-radius: 8px; background: #152234; color: white; font-size: 13px; font-weight: 700; cursor: pointer; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.original-quality { margin: -2px 0 11px; color: var(--muted); font-size: 12px; }
.photo-card { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; }
.photo-card img { display: block; width: 100%; height: 125px; object-fit: cover; background: #eef1f4; }
.photo-card video { display: block; width: 100%; height: 125px; object-fit: cover; background: #111923; }
.photo-card img[data-photo-url], .photo-card video[data-media-url] { cursor: zoom-in; }
.photo-card div { padding: 9px 10px; }
.photo-card small { display: block; color: var(--muted); margin-top: 2px; }
.media-viewer { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 14px; background: #050a12f2; }
.media-viewer.hidden { display: none; }
.media-viewer-shell { width: min(1180px, 100%); height: min(92vh, 900px); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.media-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; color: white; }
.media-viewer-close { flex: 0 0 auto; background: #ffffff18; color: white; }
.media-viewer-content { min-height: 0; display: grid; place-items: center; overflow: hidden; color: white; }
.media-viewer-content img, .media-viewer-content video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; background: #050a12; }
.media-viewer-content video { width: 100%; }
.detail-list { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.detail-list-item { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.detail-list-item:last-child { border-bottom: 0; }
.detail-list-item small { color: var(--muted); display: block; margin-top: 3px; }
.appointment-service-list { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: white; }
.appointment-service-group { border-bottom: 1px solid var(--line); }
.appointment-service-group:last-child { border-bottom: 0; }
.appointment-service-group > summary { list-style: none; cursor: pointer; }
.appointment-service-group > summary::-webkit-details-marker { display: none; }
.appointment-service-summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px 11px 32px; }
.appointment-service-group:not(.single) .appointment-service-summary::before { content: "›"; position: absolute; left: 13px; top: 50%; color: var(--muted); font-weight: 900; transform: translateY(-50%); transition: transform .15s ease; }
.appointment-service-group[open] .appointment-service-summary::before { transform: translateY(-50%) rotate(90deg); }
.appointment-service-summary > div { min-width: 0; }
.appointment-service-summary strong, .appointment-service-summary small { display: block; overflow-wrap: anywhere; }
.appointment-service-summary small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.appointment-service-summary > b { flex: 0 0 auto; text-align: right; }
.appointment-service-details { padding: 0 13px 8px 32px; background: #f8fafb; }
.appointment-service-detail { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.appointment-service-detail span { min-width: 0; overflow-wrap: anywhere; }
.appointment-service-detail b { flex: 0 0 auto; text-align: right; }
.appointment-service-group.single .appointment-service-summary { padding-left: 13px; }
.linked-record { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: white; color: var(--ink); font: inherit; text-align: left; }
.linked-record:last-child { border-bottom: 0; }
.linked-record:hover { background: #fffaf0; box-shadow: none; }
.linked-record > div:first-child { min-width: 0; }
.linked-record strong, .linked-record small { overflow-wrap: anywhere; }
.linked-record-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; text-align: right; }
.record-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.feedback-reports { display: grid; gap: 12px; }
.feedback-report { border: 1px solid var(--line); border-radius: 11px; background: #f8fafb; padding: 14px; }
.feedback-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.feedback-report-head small { display: block; color: var(--muted); margin-top: 3px; }
.feedback-report p { margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.clickable { cursor: pointer; }
.clickable:hover { box-shadow: 0 8px 24px #25354a14; border-color: #d5b66f; }
.toast { position: fixed; right: 25px; bottom: 25px; z-index: 70; background: #152234; color: white; padding: 13px 17px; border-radius: 10px; box-shadow: 0 10px 30px #07101c55; opacity: 0; transform: translateY(15px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.uploading { width: min(350px, calc(100vw - 32px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; }
.toast.uploading .upload-progress-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast.uploading > strong { font-size: 13px; }
.toast.uploading > i { grid-column: 1 / -1; display: block; height: 5px; overflow: hidden; border-radius: 5px; background: #ffffff30; }
.toast.uploading > i > b { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .12s linear; }
.menu-toggle { display: none; border: 0; background: #edf1f5; width: 39px; height: 39px; border-radius: 9px; margin-right: 13px; }
@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 30; width: 245px; transform: translateX(-100%); transition: .2s ease; touch-action: pan-y; }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open.swiping { transform: translateX(var(--sidebar-drag-x, 0)); transition: none; }
  .menu-toggle { display: block; }
  .my-attendance-card { grid-template-columns: 1fr; align-items: stretch; }
  .my-attendance-meta { text-align: left; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .two-columns { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .topbar, .content { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 620px) {
  .impersonation-banner { justify-content: space-between; gap: 8px; padding: 7px 10px; font-size: 12px; }
  .impersonation-banner button { min-height: 32px; padding: 6px 8px; font-size: 12px; }
  .dashboard-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; gap: 8px; }
  .dashboard-quick-grid button { min-height: 52px; font-size: 13px; }
  .top-actions { gap: 6px; }
  .top-actions .refresh-app-button { display: inline-flex; flex: 0 0 40px; width: 40px; min-height: 40px; padding: 0; }
  .refresh-app-button .refresh-label { display: none; }
  .topbar { padding: 12px 14px; min-height: 76px; }
  .topbar h1 { font-size: 20px; }
  .eyebrow { font-size: 9px; }
  .content { padding: 14px 12px 34px; }
  .welcome-card { display: block; padding: 16px; border-radius: 11px; }
  .welcome-card h2 { font-size: 20px; }
  .welcome-card button { margin-top: 14px; }
  .panel, .vehicle-card, .employee-card, .feedback-report, .metric, .work-task-card { border-radius: 10px; box-shadow: 0 3px 10px #28374708; }
  .cards-grid, .employee-grid, .feedback-reports { gap: 9px; }
  .vehicle-card, .employee-card, .feedback-report { padding: 11px 12px; }
  .vehicle-card h3 { font-size: 16px; margin: 6px 0 3px; }
  .vehicle-card .plate { font-size: 12px; padding: 2px 6px; }
  .vehicle-card dl { grid-template-columns: 64px 1fr; gap: 4px 8px; font-size: 12px; margin-top: 10px; }
  .panel-head { padding: 13px 14px; }
  .panel-head h3 { font-size: 16px; }
  .my-attendance-actions { justify-content: stretch; }
  .my-attendance-actions button { flex-basis: 140px; }
  .my-attendance-manual { grid-template-columns: 1fr; }
  .my-attendance-shift-row { grid-template-columns: 1fr; }
  .push-notification-strip { align-items: stretch; flex-direction: column; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric { padding: 11px; }
  .metric strong { font-size: 21px; margin: 5px 0 1px; }
  .dashboard-finance { grid-template-columns: 1fr; }
  .local-draft-list { grid-template-columns: 1fr; }
  .dashboard-mistake-list { grid-template-columns: 1fr; }
  .dashboard-mistake-row { padding: 10px 12px; border-right: 0; }
  .iphone-action-list { grid-template-columns: 1fr; }
  .iphone-action-button { padding: 11px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .iphone-action-button:last-child { border-bottom: 0; }
  .local-draft-row { padding: 10px 12px; border-right: 0; }
  .finance-week-card { padding: 11px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .finance-week-card:last-child { border-bottom: 0; }
  .finance-week-values { gap: 5px; }
  .finance-week-values > div { padding: 7px; }
  .finance-week-values strong { font-size: 14px; }
  .dashboard-unpaid-list { grid-template-columns: 1fr; }
  .dashboard-unpaid-row { padding: 10px 12px; border-right: 0; }
  .finance-toolbar { gap: 10px; }
  .finance-toolbar .period-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .finance-toolbar .period-buttons button { min-width: 0; padding: 8px 4px; font-size: 12px; }
  .finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 11px 0; }
  .finance-total { padding: 10px; }
  .finance-total strong { font-size: 17px; }
  .finance-total span, .finance-total small { font-size: 10px; }
  .finance-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .finance-filters .filter-select { min-width: 0; width: 100%; }
  .finance-operation { grid-template-columns: 68px minmax(0, 1fr) auto; gap: 7px; min-height: 62px; padding: 9px 10px; font-size: 12px; }
  .finance-operation-status { display: none; }
  .finance-operation-amount { font-size: 14px; }
  .finance-operation-main small { font-size: 10px; }
  .section-toolbar { align-items: stretch; flex-direction: column; }
  .section-toolbar > button { width: 100%; }
  .sales-analytics-toolbar { flex-direction: row; align-items: center; }
  .sales-analytics-toolbar input { min-width: 0; flex: 1; }
  .sales-analytics-toolbar > button { width: auto; }
  .sales-analytics-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sales-analytics-stat { padding: 10px; }
  .sales-analytics-stat strong { font-size: 16px; }
  .primary-button, .light-button, .ghost-button { padding: 9px 12px; border-radius: 9px; font-size: 14px; }
  .toolbar-actions { justify-content: stretch; }
  .toolbar-actions > button { flex: 1 1 180px; }
  .duplicate-group { padding: 10px; }
  .duplicate-client-option { grid-template-columns: 20px minmax(0, 1fr); padding: 9px; }
  .duplicate-client-option b { grid-column: 2; }
  .client-appointment-overview { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 82vw); overflow-x: auto; padding-bottom: 3px; scroll-snap-type: x proximity; }
  .client-mini-panel { scroll-snap-align: start; }
  .segmented { width: 100%; }
  .segmented strong { flex: 1; min-width: 0; }
  .calendar-mode-toggle button { flex: 1; min-width: 0; }
  .calendar-grid.week { max-height: none; overflow: visible; border: 0; background: transparent; }
  .calendar-week-compact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; background: transparent; }
  .calendar-week-day { border: 1px solid var(--line); border-radius: 8px; padding: 9px; }
  .calendar-week-day-head { position: static; }
  .calendar-week-events { min-height: 0; }
  .calendar-week-day.is-empty { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-bottom: 6px; }
  .calendar-week-day.is-empty .calendar-week-day-head { grid-column: 1 / -1; margin-bottom: 0; }
  .calendar-week-day.is-empty .calendar-week-events { padding-top: 5px; }
  .calendar-week-day.is-empty .calendar-week-empty { padding: 2px; }
  .calendar-week-day.is-empty .calendar-compact-times { margin: 4px 0 0 8px; border-top: 0; }
  .calendar-week-day.is-empty .calendar-compact-times summary { padding: 3px 1px; white-space: nowrap; }
  .calendar-week-day.is-empty .calendar-compact-times[open] { grid-column: 1 / -1; margin-left: 0; border-top: 1px solid var(--line); }
  .calendar-compact-times > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .calendar-week-grid { grid-template-columns: 48px repeat(7, minmax(124px, 1fr)); min-width: 916px; }
  .calendar-week-corner, .calendar-week-head { min-height: 52px; padding: 6px 4px; }
  .calendar-time-label { min-height: 54px; padding: 6px 2px; font-size: 10px; }
  .calendar-time-slot { min-height: 54px; padding: 3px; }
  .calendar-slot-add { opacity: .55; }
  .calendar-day { min-height: 210px; min-width: 118px; padding: 9px; }
  .calendar-day.month-day { min-height: 132px; }
  .calendar-event { padding: 7px; font-size: 11px; }
  .employee-card-head { gap: 8px; align-items: start; }
  .employee-card-head h3 { font-size: 16px; line-height: 1.18; margin: 5px 0 2px; }
  .employee-card-head p { font-size: 13px; }
  .employee-card-head strong { font-size: 17px; }
  .employee-status { padding: 4px 8px; font-size: 11px; }
  .employee-meta { grid-template-columns: 58px 1fr; gap: 4px 8px; margin: 11px 0; font-size: 12px; }
  .employee-actions { gap: 7px; }
  .employee-actions button { min-height: 42px; flex: 1 1 118px; }
  .work-plan-grid { grid-template-columns: 1fr; gap: 9px; }
  .plan-item { grid-template-columns: auto minmax(0, 1fr); }
  .plan-item-tools { grid-column: 2; justify-content: flex-start; }
  .plan-service-children { padding-left: 20px; }
  .work-task-card { padding: 11px 12px; border-radius: 9px; }
  .work-task-head { margin-bottom: 6px; }
  .work-task-card h3 { font-size: 15px; line-height: 1.22; }
  .work-task-assignee { font-size: 12px; margin-bottom: 6px; }
  .work-task-meta { font-size: 11px; gap: 5px; }
  .task-quick-complete { margin-top: 8px; }
  .detail-modal { padding: 18px; }
  .detail-modal .modal-head { margin-bottom: 12px; }
  .detail-modal .modal-head h2 { font-size: 22px; }
  .work-task-detail-head { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .work-task-detail-head h3 { font-size: 18px; margin: 7px 0 5px; }
  .work-task-detail-head p { font-size: 13px; }
  .work-task-detail-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .work-task-detail-actions strong { font-size: 16px; }
  .detail-section.compact { margin-top: 14px; }
  .detail-section h3 { font-size: 15px; }
  .appointment-payment-card { padding: 11px; }
  .appointment-payment-fields { gap: 8px; }
  .appointment-payment-footer { align-items: stretch; flex-direction: column; }
  .appointment-payment-footer button { width: 100%; }
  .task-check-item { grid-template-columns: 1fr; gap: 8px; padding: 9px; }
  .task-check-actions { justify-content: stretch; }
  .task-check-actions .small-button { flex: 1 1 120px; justify-content: center; }
  .checkpoint-media { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); }
  .checkpoint-media-card img, .checkpoint-media-card video { height: 64px; }
  .toast { left: 12px; right: 12px; bottom: 14px; }
  .attendance-tools { justify-content: stretch; }
  .attendance-tools .small-button, .attendance-tools .filter-select { flex: 1 1 170px; }
  .contact-channel-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scan-panel { align-items: stretch; flex-direction: column; }
  .scan-actions { justify-content: stretch; }
  .scan-actions .small-button { flex: 1 1 120px; justify-content: center; }
  .media-mini-card { width: 68px; min-width: 68px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .service-lines-head { grid-template-columns: 1fr 1fr 82px; padding-right: 28px; }
  .service-editor-row { grid-template-columns: 1fr 1fr; }
  .service-editor-row .line-comment { grid-column: 1 / -1; }
  .service-editor-row .service-amount { grid-column: 1 / -1; }
  .service-detail-row { grid-template-columns: 1fr; margin-left: 12px; }
  .booking-service-row { grid-template-columns: 1fr 1fr 82px; }
  .booking-service-row .line-comment { grid-column: auto; }
  .work-task-row { grid-template-columns: 1fr; }
  .attendance-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statistics-summary { grid-template-columns: 1fr; }
  .statistics-panels { grid-template-columns: 1fr; }
}
.agent-control-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.agent-control-head h2 { margin: 3px 0 5px; font-size: 26px; }
.agent-safety-badge { padding: 7px 10px; border: 1px solid #9fc8bb; border-radius: 6px; color: #246b57; background: #eef8f4; font-size: 12px; font-weight: 700; }
.agent-command-panel { padding: 14px; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 8px; background: #fff; }
.agent-command-panel > label { display: block; margin-bottom: 7px; font-weight: 800; }
.agent-command-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.agent-command-row textarea { min-height: 84px; resize: vertical; }
.agent-command-row button { min-width: 160px; }
.agent-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 12px 0; }
.agent-summary article { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.agent-summary span { font-size: 12px; color: var(--muted); }
.agent-summary strong { grid-row: 1 / 3; grid-column: 2; font-size: 22px; }
.agent-summary small { font-size: 11px; color: var(--muted); }
.agent-section { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.agent-brief-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f7f9fb; }
.agent-brief-summary article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 9px 11px; border-right: 1px solid var(--line); }
.agent-brief-summary article:last-child { border-right: 0; }
.agent-brief-summary strong { font-size: 12px; }
.agent-brief-summary span { font-size: 18px; font-weight: 900; }
.agent-brief-summary small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.agent-brief-text { display: block; width: 100%; min-height: 210px; padding: 11px 13px; border: 0; background: #fff; color: var(--ink); font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; resize: vertical; }
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); border-top: 1px solid var(--line); }
.agent-card { min-width: 0; padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.agent-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.agent-card-head small { color: var(--muted); text-align: right; }
.agent-state { padding: 3px 7px; border-radius: 5px; font-size: 10px; font-weight: 800; }
.agent-state.ready { background: #eaf7f1; color: #197052; }
.agent-state.off { background: #f3f4f6; color: #6b7280; }
.agent-card h3 { margin: 9px 0 4px; font-size: 16px; }
.agent-card p { min-height: 45px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.agent-capabilities { display: flex; flex-wrap: wrap; gap: 4px; margin: 9px 0; }
.agent-capabilities span { padding: 3px 6px; border-radius: 4px; background: #f2f4f7; font-size: 10px; }
.agent-card footer { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; }
.agent-card footer span { color: var(--muted); }
.agent-mission-list { border-top: 1px solid var(--line); }
.agent-mission { padding: 13px 14px; border-bottom: 1px solid var(--line); }
.agent-mission:last-child { border-bottom: 0; }
.agent-mission header { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.agent-mission header > div { display: flex; flex-wrap: wrap; gap: 5px; }
.agent-mission h3 { margin: 9px 0; font-size: 15px; line-height: 1.35; }
.agent-mission-status, .agent-risk { padding: 4px 7px; border-radius: 5px; font-size: 10px; font-weight: 800; }
.agent-mission-status.review { background: #fff2cf; color: #8b5c00; }
.agent-mission-status.approved, .agent-mission-status.in_progress { background: #e8f1ff; color: #245ea9; }
.agent-mission-status.completed { background: #eaf7f1; color: #197052; }
.agent-mission-status.cancelled, .agent-mission-status.failed { background: #fdecec; color: #a83232; }
.agent-risk { background: #fdecec; color: #a83232; }
.agent-mission details { padding: 8px 0; border-top: 1px solid var(--line); }
.agent-mission summary { cursor: pointer; font-size: 12px; font-weight: 800; }
.agent-step-list { display: grid; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.agent-step-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 8px; border-radius: 6px; background: #f7f8fa; }
.agent-step-list li > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #17243a; color: #fff; font-size: 11px; font-weight: 800; }
.agent-step-list strong, .agent-step-list small, .agent-step-list em { display: block; }
.agent-step-list strong { font-size: 12px; }
.agent-step-list small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.agent-step-list em { margin-top: 4px; color: #8b5c00; font-size: 10px; font-style: normal; font-weight: 700; }
.agent-mission-actions { display: flex; gap: 7px; justify-content: flex-end; margin-top: 6px; }
.agent-step-result { margin: 6px 0 0; padding: 7px 8px; background: #eef7f2; color: #285f4b; font-size: 11px; line-height: 1.35; }
.agent-step-result p { margin: 0; }
.agent-action-list { display: grid; gap: 5px; margin-top: 7px; }
.agent-action-chip { display: grid; gap: 2px; width: 100%; padding: 7px 8px; border: 1px solid #d7e6df; border-radius: 6px; background: #fff; color: var(--ink); text-align: left; }
.agent-action-chip.high { border-color: #f1c2b8; background: #fff7f4; }
.agent-action-chip strong { font-size: 11px; }
.agent-action-chip small { color: var(--muted); font-size: 10px; line-height: 1.25; }
.agent-sales-review .panel-head { border-bottom: 1px solid var(--line); }
.agent-review-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)) 1fr; gap: 8px; align-items: center; padding: 11px 13px; background: #f7f9fb; }
.agent-review-summary > div { display: flex; align-items: baseline; gap: 5px; }
.agent-review-summary strong { font-size: 19px; }
.agent-review-summary span, .agent-review-summary small { color: var(--muted); font-size: 11px; }
.agent-review-summary > small { text-align: right; }
.agent-review-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fffaf0; }
.agent-review-tools small { color: var(--muted); font-size: 11px; text-align: right; }
.agent-review-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 4px 10px; width: 100%; padding: 10px 13px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); text-align: left; }
.agent-review-row:hover, .agent-review-row:focus-visible { background: #fff8e8; outline: none; }
.agent-review-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-review-row small { grid-column: 2; color: var(--muted); }
.agent-review-row time { grid-row: 1 / 3; grid-column: 3; color: var(--muted); font-size: 11px; white-space: nowrap; }
.agent-review-kind { grid-row: 1 / 3; align-self: center; padding: 4px 6px; border-radius: 4px; background: #fff0dc; color: #8a4d05; font-size: 10px; font-weight: 800; }
.agent-review-more { margin: 0; padding: 8px 13px; font-size: 11px; }
.agent-director-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 13px; background: #17243a; color: #fff; }
.agent-director-head > div { display: flex; align-items: baseline; gap: 7px; }
.agent-director-head strong { font-size: 24px; }
.agent-director-head span, .agent-director-head small { font-size: 11px; }
.agent-director-head small { color: #c8d2df; text-align: right; }
.agent-director-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.agent-director-card { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 12px 13px; border-right: 1px solid var(--line); background: #fff; color: var(--ink); }
.agent-director-card:last-child { border-right: 0; }
.agent-director-card > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
.agent-director-card > div > span { font-size: 12px; font-weight: 800; }
.agent-director-card strong { grid-row: 1 / 3; grid-column: 2; font-size: 21px; }
.agent-director-card small { color: var(--muted); font-size: 10px; line-height: 1.3; }
.agent-director-card footer { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.agent-director-card footer button { min-height: 32px; padding: 6px 8px; font-size: 11px; }
.agent-director-card.attention strong { color: #a55b00; }
.agent-director-card.clear strong { color: #197052; }
.agent-finance-summary { grid-template-columns: repeat(3, minmax(0, 150px)) 1fr; }
.agent-finance-row .agent-review-kind { background: #f4edf9; color: #65377d; }
.agent-operations-summary { grid-template-columns: repeat(4, minmax(0, 135px)) 1fr; }
.agent-operations-row .agent-review-kind { background: #e9f4f0; color: #176149; }
.agent-channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: #f7f9fb; }
.agent-channel-card { min-width: 0; padding: 11px 13px; border-right: 1px solid var(--line); }
.agent-channel-card:last-child { border-right: 0; }
.agent-channel-card header { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.agent-channel-card header span { padding: 3px 6px; border-radius: 4px; background: #f0f1f3; color: var(--muted); font-size: 10px; font-weight: 800; }
.agent-channel-card.active header span { background: #e9f4f0; color: #176149; }
.agent-channel-card.receive_only header span, .agent-channel-card.send_only header span { background: #e8f1ff; color: #245ea9; }
.agent-channel-card.disabled header span { background: #fff0dc; color: #8a4d05; }
.agent-channel-card > div { display: grid; grid-template-columns: repeat(3, auto); gap: 1px 8px; margin-top: 9px; }
.agent-channel-card > div b { font-size: 17px; }
.agent-channel-card > div small { grid-row: 2; color: var(--muted); font-size: 10px; }
.agent-channel-card footer { display: grid; gap: 3px; margin-top: 9px; color: var(--muted); font-size: 10px; }
.agent-channel-row .agent-review-kind { background: #e8f1ff; color: #245ea9; }

/* Keep focused controls at the iOS no-auto-zoom threshold without disabling pinch zoom. */
@media (max-width: 980px), (pointer: coarse) {
  :root input, :root select, :root textarea { font-size: 16px; }
  .agent-control-head { display: grid; gap: 8px; }
  .agent-control-head h2 { font-size: 22px; }
  .agent-command-row { grid-template-columns: 1fr; }
  .agent-command-row button { min-width: 0; }
  .agent-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent-summary article { display: block; padding: 9px; }
  .agent-summary strong, .agent-summary span, .agent-summary small { display: block; }
  .agent-summary strong { margin: 3px 0; font-size: 19px; }
  .agent-brief-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-brief-summary article:nth-child(2) { border-right: 0; }
  .agent-brief-summary article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .agent-brief-text { min-height: 180px; font-size: 11px; }
  .agent-grid { grid-template-columns: 1fr; }
  .agent-card { border-right: 0; }
  .agent-card p { min-height: 0; }
  .agent-mission-actions { justify-content: stretch; }
  .agent-mission-actions button { flex: 1; }
  .agent-review-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-director-head { align-items: flex-start; flex-direction: column; }
  .agent-director-head small { text-align: left; }
  .agent-director-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-director-card:nth-child(2) { border-right: 0; }
  .agent-director-card { border-bottom: 1px solid var(--line); }
  .agent-director-card:nth-last-child(-n+2) { border-bottom: 0; }
  .agent-finance-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent-operations-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-channel-grid { grid-template-columns: 1fr; }
  .agent-channel-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .agent-channel-card:last-child { border-bottom: 0; }
  .agent-review-summary > small { grid-column: 1 / -1; text-align: left; }
  .agent-review-tools { align-items: stretch; flex-direction: column; }
  .agent-review-tools small { text-align: left; }
  .agent-review-row { grid-template-columns: 88px minmax(0, 1fr); }
  .agent-review-row time { grid-row: auto; grid-column: 2; }
  .sales-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sales-toolbar .toolbar-actions { width: 100%; grid-column: 1 / -1; }
  .sales-toolbar .filter-select { flex: 1 1 130px; min-width: 0; }
  .sales-toolbar > button { width: 100%; min-height: 42px; }
  .sales-import-row { align-items: stretch; flex-direction: column; gap: 7px; }
  .sales-import-actions { width: 100%; }
  .sales-import-actions select { max-width: none; flex: 1; }
  .sales-row { padding: 10px 12px; }
  .sales-row-end { max-width: 90px; }
}

.jarvis-open-button { background: #111c2e; color: white; }
.jarvis-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  width: min(430px, calc(100vw - 24px));
  max-height: min(720px, calc(100vh - 34px));
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 55px #0b142840;
  overflow: hidden;
}
.jarvis-panel.hidden { display: none; }
.jarvis-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #f8fafc; }
.jarvis-head strong { display: block; margin-top: 2px; font-size: 19px; }
.jarvis-log { padding: 14px; overflow-y: auto; display: grid; align-content: start; gap: 10px; background: #f5f7fa; }
.jarvis-message { max-width: 90%; padding: 10px 12px; border-radius: 10px; background: white; border: 1px solid var(--line); }
.jarvis-message.user { justify-self: end; background: #132033; color: white; border-color: #132033; }
.jarvis-message p { margin: 0; white-space: pre-wrap; line-height: 1.4; }
.jarvis-choices { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.jarvis-choices button { min-height: 36px; border: 1px solid #d8e1eb; border-radius: 8px; background: #fffaf0; color: #4f3707; font-weight: 800; padding: 7px 10px; }
.jarvis-form { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: white; }
.jarvis-form input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; }
.jarvis-mic-button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #152234; color: white; font-weight: 900; }
.jarvis-mic-button.recording { background: #a83333; animation: jarvis-pulse 1s ease-in-out infinite; }
@keyframes jarvis-pulse { 50% { box-shadow: 0 0 0 8px #a8333322; } }

body.jarvis-standalone {
  min-height: 100vh;
  background: #0a1220;
  overflow: hidden;
}
body.jarvis-standalone .app-shell,
body.jarvis-standalone .toast:not(.show) {
  display: none;
}
body.jarvis-standalone .login-card {
  width: min(440px, calc(100vw - 28px));
}
body.jarvis-standalone .jarvis-panel {
  inset: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
  width: auto;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
body.jarvis-standalone .jarvis-head {
  padding-top: calc(14px + env(safe-area-inset-top));
  background: #0f1a2b;
  border-bottom-color: #22314a;
  color: white;
}
body.jarvis-standalone .jarvis-head .eyebrow {
  color: #e2aa2f;
}
body.jarvis-standalone .jarvis-head .close-button {
  display: none;
}
body.jarvis-standalone .jarvis-log {
  background: #f2f5f8;
}
body.jarvis-standalone .jarvis-form {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

@media (max-width: 720px) {
  .jarvis-panel { left: 10px; right: 10px; bottom: 10px; width: auto; max-height: calc(100vh - 20px); }
  .jarvis-form { grid-template-columns: 44px minmax(0, 1fr); }
  .jarvis-form .primary-button { grid-column: 1 / -1; min-height: 42px; }
  .jarvis-open-button { padding-inline: 11px; }
  body.jarvis-standalone .jarvis-panel { inset: 0; max-height: none; }
}

.service-editor-row.service-group-header,
.booking-service-row.service-group-header {
  grid-template-columns: minmax(0, 1fr) auto 36px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 34px 10px 0;
  background: transparent;
}
.service-group-header select { min-width: 0; font-weight: 700; }
.service-group-header input[type="text"] { grid-column: 1 / -1; grid-row: 2; }
.service-group-header input[type="hidden"] { display: none; }
.service-group-total { white-space: nowrap; font-size: 15px; }
.service-group-header .line-add-button { width: 36px; height: 36px; }
.service-detail-row input { min-width: 0; width: 100%; }
@media (max-width: 480px) {
  .service-editor-row.service-group-header,
  .booking-service-row.service-group-header { grid-template-columns: minmax(0, 1fr) 36px; }
  .service-group-header .service-group-total { grid-column: 1; grid-row: 2; }
  .service-group-header .line-add-button { grid-column: 2; grid-row: 1; }
  .service-group-header input[type="text"] { grid-row: 3; }
  .service-detail-row { grid-template-columns: minmax(0, 1fr); margin-left: 8px; }
}