:root {
  --bg: #f6f7f9;
  --panel: #fff;
  --ink: #20242a;
  --muted: #69717c;
  --line: #dfe4e8;
  --accent: #1f7a5b;
  --danger: #a93535;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

.login-view { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #16241f; }
.login-view.is-hidden { display: none; }
.login-card { width: min(100%, 420px); display: grid; gap: 14px; border-radius: 8px; background: white; padding: 24px; box-shadow: 0 18px 45px rgba(0,0,0,.22); }
.login-brand { color: var(--ink); margin-bottom: 4px; }
.login-brand small { color: var(--muted); }
.login-card .primary { width: 100%; min-height: 46px; }
.app.is-locked { display: none; }

.app { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: #16241f; color: white; padding: 24px; display: grid; align-content: start; gap: 28px; }
@media (min-width: 901px) {
  .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow: hidden; padding: 16px 18px; gap: 14px; }
  .sidebar nav { gap: 3px; }
  .sidebar .nav { min-height: 32px; padding: 7px 10px; }
}
.brand { display: flex; gap: 12px; align-items: center; }
.brand > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; background: #d8efe5; color: #153b2d; font-weight: 700; }
.brand strong, .brand small { display: block; }
.brand small { color: #b8c8c1; }
nav { display: grid; gap: 8px; }
.nav { border: 0; border-radius: 8px; padding: 12px; text-align: left; background: transparent; color: #dce8e3; }
.nav.is-active, .nav:hover { background: rgba(255,255,255,.1); color: white; }

main { padding: 28px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 20px; }
.topbar p { margin: 0 0 6px; color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: 13px; }
h1, h2 { margin: 0; }
.section-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 14px; }
.section-head label { min-width: 220px; }
.report-controls { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; justify-content: flex-end; }
.actions { display: flex; gap: 10px; }
.actions > button:not(.primary) { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 12px; color: var(--ink); }
.sync-status { align-self: center; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); padding: 8px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sync-status.is-saving { border-color: #d4b767; color: #806317; background: #fff9e8; }
.sync-status.is-ok { border-color: #b9d8ca; color: #245343; background: #f2faf6; }
.sync-status.is-error { border-color: #d7aaaa; color: var(--danger); background: #fff5f5; }
input, select, textarea { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: white; }
textarea { min-height: 90px; padding-top: 10px; resize: vertical; }
.primary { border: 0; border-radius: 8px; padding: 0 32px; min-width: 220px; background: var(--accent); color: white; font-weight: 700; }

#addClient {
  min-width: 320px;
  min-height: 48px;
  white-space: nowrap;
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.stats article { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.stats article:hover, .stats article.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31,122,91,.12); }
.stats article:active { transform: translateY(1px); }
.stats span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.stats strong { font-size: 28px; }

.view { display: none; }
.view.is-visible { display: block; }
.task-toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.today-panel { display: grid; gap: 12px; margin-bottom: 18px; }
.today-panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.today-panel-head h2, .today-panel-head p { margin: 0; }
.today-panel-head p { color: var(--muted); }
.today-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; justify-content: end; }
.today-panel-actions button, .today-panel-head > button { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 12px; color: var(--ink); }
.today-panel.is-collapsed .today-panel-body { display: none; }
.filter-stack { display: grid; gap: 8px; justify-items: end; }
.branch-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.branch-filter button { min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 12px; color: var(--ink); }
.branch-filter button:hover, .branch-filter button.is-active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 2px rgba(31,122,91,.12); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 14px; }
.card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: grid; gap: 12px; min-width: 0; overflow: hidden; }
.card > * { min-width: 0; max-width: 100%; }
.card.is-timed-task { border-color: #d5a72c; box-shadow: inset 4px 0 0 #d5a72c, 0 0 0 2px rgba(213,167,44,.12); }
.card.is-timed-task .task-box { background: #fff8df; }
.card header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card header > * { min-width: 0; }
.card h3 { margin: 0 0 4px; overflow-wrap: anywhere; }
.status { border-radius: 999px; background: #eef3f1; color: #245343; padding: 6px 10px; font-size: 12px; font-weight: 700; height: fit-content; white-space: nowrap; }
.phone-line, .quick-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.phone-line p, .card p { margin: 0; color: var(--muted); overflow-wrap: anywhere; word-break: break-word; }
.client-number { font-size: 12px; font-weight: 700; color: var(--accent) !important; }
.pinned-notes { display: grid; gap: 8px; }
.pinned-note { border: 1px solid #e1bf63; border-left: 5px solid #d4a72c; border-radius: 8px; background: #fff8df; padding: 10px 12px; }
.pinned-note strong { display: block; color: #7c5600; font-size: 13px; margin-bottom: 4px; }
.pinned-note p { margin: 0; color: var(--ink); white-space: pre-wrap; }
.icon, .quick-links a, .quick-links span { display: inline-grid; place-items: center; min-width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--accent); text-decoration: none; font-weight: 700; padding: 0 8px; }
.quick-links span { color: var(--muted); background: #f8faf9; }
.quick-links .is-priority { border-color: var(--accent); background: var(--accent); color: white; box-shadow: 0 0 0 2px rgba(31,122,91,.14); }
.task-box { display: grid; gap: 7px; border-radius: 8px; background: #f8faf9; padding: 12px; width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
.task-box strong { display: block; }
.task-time-priority { color: #7b5800; font-size: 13px; font-weight: 800; }
.opportunity-task-label { color: #315c91; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.task-date.is-overdue { color: var(--danger); font-weight: 700; }
.latest { color: var(--ink); overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
.card-actions button { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 12px; }
.danger-action { min-height: 42px; border: 1px solid #d7aaaa; border-radius: 8px; background: #fff5f5; color: var(--danger); padding: 0 14px; font-weight: 700; justify-self: start; }
.delete-zone { display: grid; gap: 10px; justify-items: start; border-top: 1px solid var(--line); padding-top: 14px; }

.table-wrap { overflow: auto; background: white; border: 1px solid var(--line); border-radius: 8px; margin-top: 14px; }
table { width: 100%; min-width: 1360px; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 12px; text-align: left; vertical-align: top; }
th { background: #edf2f0; position: sticky; top: 0; }
.table-link, .table-note-preview { border: 0; background: transparent; color: var(--accent); padding: 0; text-align: left; font: inherit; cursor: pointer; }
.table-link { font-weight: 700; }
.table-note-preview { color: var(--ink); max-width: 320px; line-height: 1.35; }
.table-link:hover, .table-note-preview:hover { text-decoration: underline; }

.shift-status { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 14px; margin-top: 14px; }
.shift-status strong, .shift-status span { display: block; }
.shift-status span, .shift-card p { color: var(--muted); }
.shift-status button, .shift-card button { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 14px; color: var(--ink); }
.shift-controls { display: flex; align-items: end; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.shift-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; min-width: 180px; }
.shift-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.shift-card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: grid; gap: 12px; }
.shift-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31,122,91,.12); }
.shift-card.wide { grid-column: 1 / -1; }
.shift-card header { display: flex; justify-content: space-between; gap: 12px; }
.shift-card h3, .shift-card p { margin: 0; }
.shift-warning { color: var(--danger); font-weight: 700; }
.shift-requests { border-color: #e6b780; background: #fffaf3; }
.shift-request { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.shift-request:first-of-type { border-top: 0; padding-top: 0; }
.shift-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.shift-table { min-width: 720px; background: white; }
.shift-table th, .shift-table td { padding: 10px 12px; }

.employee-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 14px; }
.employee-form fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; gap: 10px; flex-wrap: wrap; grid-column: 1 / -1; }
.employee-form legend { color: var(--muted); font-size: 13px; }
.employee-form fieldset label { display: inline-flex; grid-auto-flow: column; align-items: center; gap: 7px; min-height: 28px; color: var(--ink); }
.employee-form input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; min-height: 16px; margin: 0; padding: 0; accent-color: var(--accent); }
.employee-panel { display: none; gap: 14px; min-width: 0; }
.employee-panel.is-visible { display: grid; }
.employee-add { border: 1px solid var(--line); border-radius: 8px; background: white; overflow: hidden; }
.employee-add summary { cursor: pointer; list-style: none; padding: 14px 16px; color: var(--accent); font-weight: 800; }
.employee-add summary::-webkit-details-marker { display: none; }
.employee-add summary::after { content: "+"; float: right; font-size: 20px; line-height: 1; }
.employee-add[open] summary { border-bottom: 1px solid var(--line); }
.employee-add[open] summary::after { content: "−"; }
.employee-add .employee-form { margin: 0; border: 0; border-radius: 0; }
.owner-password-form { margin: 4px 0 0; grid-template-columns: minmax(260px, 1fr) auto; align-items: end; }
.employee-list { display: grid; gap: 10px; }
.employee-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.employee-item h3, .employee-item p { margin: 0; }
.employee-item p { color: var(--muted); }
.employee-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }
.employee-item button { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 0 12px; }
.employee-item button[data-delete-employee] { border-color: #d7aaaa; background: #fff5f5; color: var(--danger); }
.employee-remark-actions { display: flex; align-items: center; gap: 8px; }
.employee-item .remark-count { display: flex; align-items: baseline; gap: 6px; color: var(--accent); }
.remark-count strong { font-size: 20px; }
.remark-count span { color: var(--muted); font-size: 12px; }
.employee-item .remark-add, .remark-dialog-head .remark-add { width: 38px; height: 38px; min-height: 38px; padding: 0; color: var(--accent); font-size: 23px; line-height: 1; }
.employee-access-heading { border-top: 1px solid var(--line); padding-top: 12px; }
.employee-access-heading h3 { margin: 0; font-size: 16px; }
.employee-edit-branches { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; flex-wrap: wrap; gap: 10px; }
.employee-edit-branches legend { color: var(--muted); font-size: 13px; }
.employee-edit-branches label { display: inline-flex; grid-auto-flow: column; align-items: center; gap: 7px; color: var(--ink); }
.employee-edit-branches input { width: 16px; height: 16px; min-height: 16px; margin: 0; accent-color: var(--accent); }
.remark-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; padding-right: 42px; }
.remark-dialog-head h2, .remark-dialog-head p { margin: 0; }
.remark-dialog-head p { margin-top: 4px; color: var(--muted); }
.remark-form { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; padding: 14px; }
.remark-severity-field { max-width: 280px; }
.remark-severity-field select { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 0 10px; font: inherit; }
.remark-form textarea { min-height: 110px; resize: vertical; }
.employee-remark-list { display: grid; gap: 10px; }
.employee-remark { display: flex; align-items: start; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 14px; }
.employee-remark.severity-low { border-left: 5px solid #d6a91e; }
.employee-remark.severity-medium { border-left: 5px solid #d26a16; }
.employee-remark.severity-high { border-left: 5px solid #bd3b3b; }
.remark-severity-badge { display: inline-flex; align-items: center; min-height: 25px; border-radius: 999px; padding: 0 9px; margin-bottom: 8px; font-size: 11px; font-weight: 800; }
.remark-severity-badge.severity-low { background: #fff5c9; color: #715600; }
.remark-severity-badge.severity-medium { background: #ffead8; color: #8c3f00; }
.remark-severity-badge.severity-high { background: #ffe0e0; color: #8f2424; }
.employee-remark p, .employee-remark small { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.employee-remark small { display: block; margin-top: 7px; color: var(--muted); }
.employee-remark button { flex: 0 0 auto; min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 12px; }
.employee-remark-buttons { display: flex; flex: 0 0 auto; gap: 8px; flex-wrap: wrap; justify-content: end; }
.employee-remark .remark-delete { border-color: #d7aaaa; background: #fff5f5; color: var(--danger); }

.section-note { margin: 6px 0 0; color: var(--muted); }
.source-form { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 12px; align-items: end; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 14px; }
.source-manager { display: grid; gap: 10px; }
.source-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.source-item.is-hidden-source { background: #f8faf9; color: var(--muted); }
.source-item strong, .source-item span { display: block; }
.source-item span { color: var(--muted); margin-top: 3px; }
.source-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }
.source-actions button { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 0 12px; }

.schedule-owner-tools { display: grid; gap: 14px; margin-bottom: 16px; }
.schedule-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.schedule-form button.primary { min-width: 180px; }
.schedule-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.schedule-settings-card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.schedule-settings-card h3 { margin: 0 0 10px; }
.schedule-settings-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.schedule-settings-card li { display: flex; justify-content: space-between; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 8px; }
.schedule-settings-card li:first-child { border-top: 0; padding-top: 0; }
.schedule-settings-card button, .schedule-row button { min-height: 34px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 0 10px; }
.schedule-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.schedule-columns h3 { margin: 0 0 10px; }
.schedule-list { display: grid; gap: 10px; }
.schedule-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.schedule-row strong, .schedule-row span, .schedule-row small { display: block; }
.schedule-row span, .schedule-row small, .schedule-settings-card p { color: var(--muted); }
.calendar-range-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.calendar-range-controls input { width: 155px; min-height: 40px; }
.calendar-series-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.calendar-series-form small { color: var(--muted); }
.calendar-week-slots { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 7px; }
.calendar-week-slots legend { color: var(--muted); font-size: 13px; padding: 0 5px; }
.calendar-week-slots label { display: grid; grid-template-columns: 20px minmax(130px, 1fr) 130px 130px; align-items: center; gap: 8px; }
.calendar-week-slots input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; accent-color: var(--accent); }
.calendar-series-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.schedule-row-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: end; }
.lesson-catalog-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.lesson-catalog-tabs button { min-height: 40px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); padding: 0 14px; font-weight: 800; }
.lesson-catalog-tabs button.is-active { border-color: var(--line); background: white; color: var(--accent); }
.lesson-catalog-panel { display: none; gap: 16px; min-width: 0; }
.lesson-catalog-panel.is-visible { display: grid; }
.lesson-catalog-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, .7fr) auto; gap: 10px; align-items: end; }
.lesson-catalog-form label, .lesson-pass-search { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.lesson-catalog-form input, .lesson-catalog-form select, .lesson-pass-search input { min-width: 0; min-height: 42px; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 10px; color: var(--text); font: inherit; font-weight: 400; }
.lesson-catalog-form button { min-height: 42px; white-space: nowrap; }
.lesson-catalog-list { display: grid; border-top: 1px solid var(--line); }
.lesson-catalog-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding: 12px 2px; min-width: 0; }
.lesson-catalog-row > div { min-width: 0; }
.lesson-catalog-row strong, .lesson-catalog-row span { display: block; overflow-wrap: anywhere; }
.lesson-catalog-row span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.lesson-catalog-row button { flex: 0 0 auto; min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--muted); padding: 0 11px; }
.lesson-catalog-row button:disabled { opacity: .45; cursor: not-allowed; }
.lesson-catalog-empty { border: 1px dashed var(--line); border-radius: 8px; padding: 18px; color: var(--muted); }
.marketing-catalog { gap: 0; }
.marketing-section-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.marketing-section-head h3, .marketing-section-head p { margin: 0; }
.marketing-section-head p { margin-top: 4px; color: var(--muted); }
.marketing-band { padding: 18px 0; border-top: 1px solid var(--line); }
.marketing-band:first-of-type { border-top: 0; }
.marketing-band > h3 { margin: 0 0 12px; font-size: 17px; }
.marketing-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.marketing-form.compact { grid-template-columns: minmax(240px, 1fr) minmax(180px, 240px) auto; max-width: 760px; }
.marketing-list, .marketing-group-list { display: grid; gap: 8px; margin-top: 12px; }
.marketing-row { display: grid; grid-template-columns: minmax(130px, .5fr) minmax(260px, 1.5fr) auto; gap: 10px; align-items: end; border-top: 1px solid var(--line); padding-top: 10px; }
.marketing-row:first-child { border-top: 0; padding-top: 0; }
.marketing-row > strong { align-self: center; }
.marketing-toggle-row, .marketing-key-row { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); padding: 9px 0; }
.marketing-toggle-row:first-child, .marketing-key-row:first-child { border-top: 0; }
.marketing-toggle-row span, .marketing-key-row span { display: grid; gap: 3px; }
.marketing-toggle-row small, .marketing-key-row small { color: var(--muted); }
.marketing-toggle-row input { width: 20px; height: 20px; min-height: 20px; accent-color: var(--accent); }
.marketing-pricing-item, .marketing-group-item { border: 1px solid var(--line); border-radius: 8px; background: white; }
.marketing-pricing-item summary, .marketing-group-item summary { cursor: pointer; list-style: none; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
.marketing-pricing-item summary::-webkit-details-marker, .marketing-group-item summary::-webkit-details-marker { display: none; }
.marketing-pricing-item summary span, .marketing-group-item summary small { color: var(--muted); }
.marketing-pricing-form, .marketing-group-form { border-top: 1px solid var(--line); padding: 12px; }
.marketing-pricing-form { display: grid; gap: 12px; }
.marketing-check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; max-height: 320px; overflow: auto; }
.marketing-check-list label, .marketing-checkbox { display: flex; grid-auto-flow: column; align-items: center; gap: 8px; }
.marketing-check-list input, .marketing-checkbox input { width: 18px; height: 18px; min-height: 18px; accent-color: var(--accent); }
.marketing-group-item summary > span:first-child { display: grid; gap: 3px; }
.marketing-state { color: var(--muted); font-size: 12px; font-weight: 700; }
.marketing-group-item[data-advertising-enabled] .marketing-state { color: var(--accent); }
.marketing-group-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.marketing-group-form .wide { grid-column: 1 / -1; }
.marketing-group-form textarea { min-height: 80px; resize: vertical; }
.marketing-checkbox { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; }
.marketing-checkbox.important { border-color: #8abca6; background: #f0faf5; }
.marketing-token { display: grid; gap: 8px; margin-top: 12px; border: 1px solid #d1a947; border-radius: 8px; background: #fff9df; padding: 12px; }
.marketing-token code { overflow-wrap: anywhere; user-select: all; }
.marketing-catalog button:not(.primary), .calendar-range-controls button, .calendar-series-actions button:not(.primary), .schedule-row-actions button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  padding: 0 12px;
}
.marketing-catalog button:not(.primary):hover, .calendar-range-controls button:hover, .calendar-series-actions button:not(.primary):hover, .schedule-row-actions button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.lesson-pass-search { max-width: 620px; }
.lesson-pass-summary { color: var(--muted); font-size: 13px; font-weight: 700; }
.lesson-pass-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lesson-pass-card { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 13px; display: grid; gap: 11px; min-width: 0; }
.lesson-pass-card header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.lesson-pass-card h3, .lesson-pass-card p { margin: 0; overflow-wrap: anywhere; }
.lesson-pass-card h3 { margin-top: 3px; font-size: 15px; }
.lesson-pass-card small, .lesson-pass-card p { color: var(--muted); font-size: 12px; }
.lesson-pass-card header > strong { flex: 0 0 auto; color: var(--accent); }
.lesson-pass-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; font-weight: 700; }
.lesson-discount-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(120px, .35fr) auto auto; gap: 10px; align-items: end; border-bottom: 1px solid var(--line); padding: 12px 2px; }
.lesson-discount-row label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.lesson-discount-row input { min-width: 0; min-height: 40px; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 9px 10px; color: var(--text); font: inherit; font-weight: 400; }
.lesson-discount-row button { min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 12px; }
.schedule-day-list { display: grid; gap: 14px; }
.schedule-day-group h3 { margin: 0 0 10px; }
.schedule-list.compact { gap: 8px; }
.calendar-shell { overflow: visible; background: white; border: 1px solid var(--line); border-radius: 8px; }
.calendar-grid { display: grid; grid-template-columns: 72px repeat(var(--day-count), minmax(220px, 1fr)); min-width: calc(72px + var(--day-count) * 220px); }
.calendar-shell.is-week .calendar-grid { grid-template-columns: 52px repeat(var(--day-count), minmax(0, 1fr)); min-width: 0; width: 100%; }
.calendar-shell.is-week .calendar-day-head { padding-inline: 3px; font-size: 11px; }
.calendar-shell.is-week .calendar-event { left: 3px; right: 3px; padding: 5px; }
.calendar-shell.is-week .calendar-event strong, .calendar-shell.is-week .calendar-event span, .calendar-shell.is-week .calendar-event small { font-size: 10px; overflow-wrap: anywhere; }
.calendar-corner, .calendar-day-head { position: sticky; top: 0; z-index: 2; background: #edf2f0; border-bottom: 1px solid var(--line); min-height: 54px; }
.calendar-corner { left: 0; z-index: 3; border-right: 1px solid var(--line); }
.calendar-day-head { padding: 10px 12px; font-weight: 700; }
.calendar-day-head small { display: block; color: var(--muted); font-weight: 400; margin-top: 3px; }
.calendar-hours { position: sticky; left: 0; z-index: 1; display: grid; grid-template-rows: repeat(var(--hour-count), 60px) 1px; background: white; border-right: 1px solid var(--line); }
.calendar-hours span { color: var(--muted); font-size: 12px; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.calendar-day-col { position: relative; min-height: calc(var(--hour-count) * 60px); background: linear-gradient(to bottom, transparent 59px, var(--line) 60px); background-size: 100% 60px; border-right: 1px solid var(--line); }
.calendar-event { position: absolute; left: 8px; right: 8px; overflow: hidden; display: grid; align-content: start; gap: 2px; border: 1px solid #b9d8ca; border-left: 4px solid var(--accent); border-radius: 8px; background: #f2faf6; padding: 7px 8px; }
.calendar-event strong { font-size: 13px; }
.calendar-event span, .calendar-event small { color: var(--muted); font-size: 12px; }
.schedule-clickable { cursor: pointer; }
.schedule-clickable:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(20, 93, 67, .12); }
.group-check-button { min-width: 40px; font-size: 20px; color: var(--accent); }
.group-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.group-member-list { display: grid; gap: 7px; margin: 12px 0; }
.group-member-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 8px 0; }
.group-member-list > div > button:last-child { min-width: 36px; }
.group-member-add { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.group-member-add select { min-width: 0; }
.employee-add { width: fit-content; max-width: 100%; }
.employee-add > summary { display: inline-flex; min-height: 40px; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 800; }
.employee-add[open] { width: 100%; }

.report-summary { display: grid; gap: 12px; margin-bottom: 14px; }
.report-summary-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.report-summary-row.is-funnel { padding-top: 4px; }
.report-summary article { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.report-summary article[data-report-status] { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.report-summary article[data-report-status]:hover { border-color: #90a8d8; transform: translateY(-1px); }
.report-summary article[data-report-status].is-active { border-color: #4d6fb3; box-shadow: 0 0 0 3px rgba(77, 111, 179, .14); }
.report-summary span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.report-summary strong { font-size: 26px; }
.report-list { display: grid; gap: 12px; }
.report-item { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 16px; align-items: stretch; }
.report-item[hidden] { display: none; }
.report-item.is-missed { border-color: #ddb0a8; background: #fffafa; }
.report-item.is-processed { border-color: #b9d8ca; }
.report-item.is-info { border-color: #c9d6e8; background: #fbfdff; }
.report-item-main { min-width: 0; display: grid; gap: 12px; align-content: start; }
.report-item header { display: flex; justify-content: space-between; gap: 12px; }
.report-item h3, .report-item p, .report-item ul, .report-item small { margin: 0; }
.report-item ul { padding-left: 20px; color: var(--muted); }
.report-previous-note { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; padding: 14px; display: grid; gap: 10px; align-content: start; }
.report-previous-note > strong { font-size: 14px; }
.report-previous-note p { line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-previous-note small, .report-previous-note .muted { color: var(--muted); }
.employee-stats { display: grid; gap: 12px; margin-bottom: 14px; }
.employee-stats-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.employee-stats-head h3, .employee-stats-head p { margin: 0; }
.employee-stats-head p { color: var(--muted); }
.employee-stats-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: white; }
.employee-stats-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) 72px repeat(5, minmax(120px, 1fr)); gap: 8px; align-items: center; min-width: 900px; padding: 12px 14px; border-top: 1px solid var(--line); }
.employee-stats-row.is-funnel { grid-template-columns: minmax(160px, 1.4fr) 72px repeat(4, minmax(130px, 1fr)); min-width: 800px; }
.employee-stats-row.is-retarget { grid-template-columns: minmax(180px, 1fr) 120px; min-width: 360px; }
.employee-stats-row:first-child { border-top: 0; }
.employee-stats-row.is-head { color: var(--muted); font-size: 13px; background: #f8faf9; }
.employee-stats-row strong { font-size: 20px; }
.source-stats { display: grid; gap: 12px; margin-bottom: 14px; }
.source-stats-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: white; }
.source-stats-row { display: grid; grid-template-columns: minmax(150px, 1.3fr) 80px repeat(4, minmax(120px, 1fr)); gap: 8px; align-items: center; min-width: 760px; padding: 12px 14px; border-top: 1px solid var(--line); }
.source-stats-row:first-child { border-top: 0; }
.source-stats-row.is-head { color: var(--muted); font-size: 13px; background: #f8faf9; }
.source-stats-row.is-total { background: #f3f7f5; font-weight: 700; }
.source-stats-row strong { font-size: 20px; }
.source-stat-button { min-height: 36px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); padding: 6px 8px; text-align: left; }
.source-stat-button:not(:disabled):hover, .source-stat-button.is-active { border-color: var(--accent); background: #f2faf6; color: var(--accent); }
.source-stat-button:disabled { cursor: default; opacity: 1; }
.source-stats-detail { display: grid; gap: 8px; margin-top: 10px; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.source-stats-detail h4, .source-stats-detail p { margin: 0; }
.source-stats-detail button { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 9px 12px; text-align: left; }
.source-stats-detail button:hover { border-color: var(--accent); }
.source-stats-detail span { color: var(--muted); }
.campaign-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.campaign-form textarea { resize: vertical; }
.campaign-list { display: grid; gap: 12px; }
.campaign-item { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 12px; }
.campaign-item header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.campaign-item header div:first-child { display: grid; gap: 4px; }
.campaign-item span, .campaign-item p { color: var(--muted); margin: 0; }
.campaign-title-button { border: 0; background: transparent; color: var(--ink); padding: 0; display: grid; gap: 4px; text-align: left; cursor: pointer; }
.campaign-title-button:hover strong { color: var(--accent); }
.campaign-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.campaign-metrics span { background: #f8faf9; border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 4px; }
.campaign-metrics strong { color: var(--ink); font-size: 18px; }
.campaign-stat-button { background: #f8faf9; border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 4px; color: var(--muted); text-align: left; cursor: pointer; }
.campaign-stat-button:hover, .campaign-stat-button.is-active, .campaign-report-button:hover, .campaign-report-button.is-active { border-color: var(--accent); background: #edf8f3; }
.campaign-stat-button:disabled, .campaign-report-button:disabled { cursor: default; opacity: .55; }
.campaign-report-head { margin-top: 18px; }
.campaign-report-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: white; }
.campaign-report-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(8, minmax(92px, 1fr)); gap: 8px; align-items: center; min-width: 1040px; padding: 12px 14px; border-top: 1px solid var(--line); }
.campaign-report-row:first-child { border-top: 0; }
.campaign-report-row.is-head { color: var(--muted); font-size: 13px; background: #f8faf9; }
.campaign-report-row span:first-child { display: grid; gap: 3px; }
.campaign-report-row small { color: var(--muted); }
.campaign-report-button { min-height: 38px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); padding: 6px; text-align: left; cursor: pointer; }
.campaign-report-button.is-name { display: grid; gap: 3px; }
.campaign-stats-detail { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; padding: 12px; margin-top: 10px; }
.campaign-stats-detail h4, .campaign-stats-detail p { margin: 0; }
.campaign-stats-detail button { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(240px, 2fr); gap: 12px; align-items: center; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 9px 12px; text-align: left; }
.campaign-stats-detail button:hover { border-color: var(--accent); }
.campaign-stats-detail span { color: var(--muted); }
.event-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.event-list { display: grid; gap: 14px; }
.event-item { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 12px; }
.event-item header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.event-item h3, .event-item p { margin: 0; }
.event-item header div { display: grid; gap: 4px; }
.event-item header span { color: var(--muted); }
.event-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.event-totals span { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 4px; color: var(--muted); }
.event-totals strong { color: var(--ink); font-size: 20px; }
.is-profit { color: #167451 !important; }
.is-loss { color: var(--danger) !important; }
.event-entry-form { display: grid; grid-template-columns: 140px minmax(180px, 1fr) 160px auto; gap: 8px; align-items: end; }
.event-entries { display: grid; gap: 6px; }
.event-entries > div { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.event-entries p { color: var(--muted); }
.event-notes { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.event-notes h4, .event-note p, .event-note-list p { margin: 0; }
.event-note-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.event-note-list { display: grid; gap: 8px; }
.event-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; padding: 10px; }
.event-note small { color: var(--muted); }
.event-note p { grid-column: 1; white-space: pre-wrap; }
.event-note-actions { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 6px; align-items: start; }
.event-note-actions button { min-height: 32px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 0 9px; }
.event-note-edit-form { grid-column: 1 / -1; display: grid; gap: 8px; }
.event-note-edit-form[hidden] { display: none; }
.event-note-edit-form textarea { min-height: 72px; }
.event-note-edit-form div { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.event-note-edit-form button { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 0 12px; }
.event-note-edit-form button[type="submit"] { border-color: var(--accent); background: var(--accent); color: white; }
.regulation-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 12px; margin-bottom: 16px; }
.regulation-list { display: grid; gap: 12px; }
.regulation-item { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 12px; }
.regulation-item header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.regulation-item header div:first-child { display: grid; gap: 4px; }
.regulation-item h3, .regulation-item p { margin: 0; }
.regulation-item span { color: var(--muted); }
.regulation-item p { white-space: pre-wrap; line-height: 1.45; }
.regulation-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }

dialog { width: min(900px, calc(100vw - 28px)); border: 0; border-radius: 8px; padding: 0; box-shadow: 0 18px 45px rgba(25,36,52,.18); }
dialog::backdrop { background: rgba(12,20,17,.48); }
.close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 999px; font-size: 24px; }
.details { padding: 28px; display: grid; gap: 16px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button, .guard button, .guard a { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 9px 12px; text-decoration: none; color: var(--ink); }
.tabs button.is-active { background: var(--accent); border-color: var(--accent); color: white; }
.tab-add-opportunity { width: 36px; min-height: 36px; border: 1px solid #8ca9d2 !important; border-radius: 999px !important; background: #f2f6fc !important; color: #315c91 !important; font-size: 22px; line-height: 1; padding: 0 !important; }
.tab-add-opportunity:hover, .tab-add-opportunity:focus-visible { border-color: #315c91 !important; background: #e3edf9 !important; }
.pane { display: none; border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: #fbfcfc; }
.pane.is-visible { display: grid; gap: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opportunity-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.opportunity-toolbar p, .opportunity-empty p { margin: 4px 0 0; color: var(--muted); }
.opportunity-toolbar button { min-height: 42px; }
.opportunity-new[hidden] { display: none; }
.opportunity-list, .opportunity-new { display: grid; gap: 12px; }
.opportunity-list-heading { color: var(--muted); font-size: 13px; font-weight: 800; }
.opportunity-details { border: 1px solid var(--line); border-radius: 8px; background: white; overflow: hidden; }
.opportunity-details summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; padding: 14px; }
.opportunity-details summary::-webkit-details-marker { display: none; }
.opportunity-details summary::after { content: "+"; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--accent); font-size: 18px; }
.opportunity-details[open] summary::after { content: "-"; }
.opportunity-details summary span:first-child { display: grid; gap: 4px; }
.opportunity-details summary small { color: var(--muted); }
.opportunity-summary-status { color: var(--muted); font-size: 12px; font-weight: 700; text-align: right; }
.opportunity-details > .opportunity-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.opportunity-card { border: 1px solid var(--line); border-left: 5px solid #4d6fb3; border-radius: 8px; background: white; padding: 14px; display: grid; gap: 14px; }
.opportunity-card.is-closed { border-left-color: #91a29b; background: #f8faf9; }
.opportunity-card header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.opportunity-card h3, .opportunity-card p { margin: 0; }
.opportunity-card header p { color: var(--muted); margin-top: 4px; }
.opportunity-kind { display: block; color: #315c91; font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.opportunity-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.opportunity-fields textarea { min-height: 86px; }
.opportunity-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.opportunity-actions button { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 0 14px; }
.opportunity-progress { color: var(--muted); font-size: 13px; font-weight: 700; }
.opportunity-progress.is-error { color: var(--danger); }
.opportunity-empty { border: 1px dashed var(--line); border-radius: 8px; padding: 18px; background: white; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.system-field input[readonly] { background: #edf2f0; color: var(--ink); cursor: default; font-weight: 700; }
.wide { grid-column: 1 / -1; }
.save-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.save-button { min-height: 48px; width: min(100%, 460px); justify-self: start; transition: background-color .18s ease, color .18s ease; }
.save-button.is-saving, .save-button.is-saving:disabled { background: #d4a72c; color: #30250b; opacity: 1; }
.save-progress { min-height: 20px; color: var(--muted); font-size: 13px; font-weight: 700; }
.save-progress.is-error { color: var(--danger); }
.select-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; }
.add-option { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--accent); font-size: 22px; font-weight: 700; }
.option-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin-top: 8px; }
.option-editor button { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 10px; }
.inline-link { border: 0; background: transparent; color: var(--accent); padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.parent-link-field { position: relative; }
.parent-suggestions { display: grid; gap: 6px; }
.parent-suggestions button { text-align: left; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 9px 10px; }
.parent-link-field [data-clear-parent] { justify-self: start; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--muted); padding: 8px 10px; }
.note { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: white; }
.note.is-pinned { border-color: #e1bf63; background: #fff8df; }
.note-pin { float: right; width: 34px; height: 34px; border: 1px solid #e1bf63; border-radius: 8px; background: white; color: #a06d00; font-size: 20px; line-height: 1; }
.note small { color: var(--muted); }
.note-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.note-add { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--accent); font-size: 24px; font-weight: 700; line-height: 1; }
.note-composer { display: grid; gap: 10px; }
.note-composer[hidden] { display: none; }
.note-list { display: grid; gap: 10px; }
.pass-pane { min-width: 0; }
.pass-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pass-toolbar h3, .pass-toolbar p { margin: 0; }
.pass-toolbar h3 { font-size: 17px; }
.pass-toolbar p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.pass-toolbar button { flex: 0 0 auto; min-height: 40px; }
.pass-issuance { border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; padding: 14px; display: grid; gap: 14px; }
.pass-issuance[hidden] { display: none; }
.pass-issuance-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.pass-issuance-head h3, .pass-issuance-head p { margin: 0; }
.pass-issuance-head h3 { font-size: 16px; }
.pass-issuance-head p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.pass-issuance .icon-button { width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--muted); font-size: 22px; line-height: 1; }
.pass-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pass-form-grid label { display: grid; align-content: start; gap: 6px; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.pass-form-grid label.wide { grid-column: 1 / -1; }
.pass-discount-block { grid-column: 1 / -1; display: grid; gap: 8px; }
.pass-discount-control { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.pass-inline-discount { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(100px, .35fr) auto auto; gap: 8px; align-items: end; border-left: 3px solid var(--accent); padding-left: 10px; }
.pass-inline-discount button { min-height: 42px; }
.pass-form-grid [hidden] { display: none; }
.pass-form-grid input, .pass-form-grid select, .pass-form-grid textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--text); padding: 10px; font: inherit; font-weight: 400; }
.pass-form-grid input, .pass-form-grid select { min-height: 42px; }
.pass-form-grid input[readonly] { background: #f1f4f2; color: var(--muted); }
.pass-total-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.pass-total-line strong { font-size: 20px; }
.pass-total-line span { color: var(--muted); font-size: 13px; font-weight: 700; }
.pass-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pass-form-actions button { min-height: 40px; }
.pass-loading, .pass-empty { border: 1px dashed var(--line); border-radius: 8px; background: white; padding: 18px; color: var(--muted); }
.pass-empty p { margin: 0; }
.pass-error { border-color: #d99b9b; color: var(--danger); }
.pass-error button { margin-top: 10px; min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 12px; }
.pass-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pass-summary article { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 12px; min-width: 0; }
.pass-summary article.has-debt { border-color: #df9b8f; background: #fff8f6; }
.pass-summary article.account-balance { border-color: #8fb9a5; background: #f5fbf8; }
.pass-summary article.bonus-balance { border-color: #d4b878; background: #fffaf0; }
.pass-summary span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.pass-summary strong { display: block; font-size: 18px; overflow-wrap: anywhere; }
.pass-form-grid label small { color: var(--accent); font-size: 11px; font-weight: 700; }
.pass-section { display: grid; gap: 10px; min-width: 0; }
.pass-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pass-section-title h3 { margin: 0; font-size: 16px; }
.pass-section-title span { color: var(--muted); font-weight: 700; }
.pass-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pass-card { border: 1px solid var(--line); border-left: 4px solid #9aa9a2; border-radius: 8px; background: white; padding: 12px; display: grid; gap: 12px; min-width: 0; }
.pass-card.is-active { border-left-color: var(--accent); }
.pass-card header { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.pass-card h4, .pass-card p { margin: 0; overflow-wrap: anywhere; }
.pass-card h4 { margin-top: 3px; font-size: 15px; }
.pass-card small, .pass-card footer { color: var(--muted); }
.pass-status { flex: 0 0 auto; border-radius: 999px; background: #edf4f0; color: var(--accent); padding: 5px 8px; font-size: 11px; font-weight: 800; }
.pass-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pass-card-grid span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.pass-card-grid strong { font-size: 13px; }
.pass-card footer { border-top: 1px solid var(--line); padding-top: 9px; font-size: 12px; overflow-wrap: anywhere; }
.pass-details { border: 1px solid var(--line); border-radius: 8px; background: white; overflow: hidden; }
.pass-details.has-debt { border-color: #df9b8f; }
.pass-details summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; padding: 12px; font-weight: 800; }
.pass-details summary strong { color: var(--muted); }
.pass-table-wrap { overflow: auto; border-top: 1px solid var(--line); }
.pass-table-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; }
.pass-table-wrap th, .pass-table-wrap td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 12px; overflow-wrap: anywhere; }
.pass-table-wrap th { color: var(--muted); background: #f6f8f7; }
.pass-details > .pass-empty { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.debt-pay-button { min-height: 34px; border: 1px solid var(--accent); border-radius: 7px; background: var(--accent-soft); color: var(--accent); padding: 0 12px; font-weight: 800; white-space: nowrap; }
.debt-payment-form { margin: 12px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: 8px; background: var(--panel-2); padding: 14px; display: grid; gap: 14px; }
.debt-payment-form[hidden] { display: none; }
.debt-payment-form .icon-button { width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 22px; line-height: 1; }
.debt-payment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.debt-payment-grid label { display: grid; align-content: start; gap: 6px; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.debt-payment-grid label.wide { grid-column: 1 / -1; }
.debt-payment-grid [hidden] { display: none; }
.debt-payment-grid input, .debt-payment-grid select, .debt-payment-grid textarea { width: 100%; min-width: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--field-bg); color: var(--ink); padding: 10px; font: inherit; font-weight: 400; }
.debt-payment-grid input, .debt-payment-grid select { min-height: 42px; }
.debt-payment-grid input[readonly] { background: var(--panel); color: var(--muted); }
.debt-payment-grid label small { color: var(--accent); font-size: 11px; font-weight: 700; }
@media (max-width: 600px) {
  .pass-table-wrap .debt-table { min-width: 0; }
  .debt-table thead { display: none; }
  .debt-table, .debt-table tbody, .debt-table tr, .debt-table td { display: block; width: 100%; }
  .debt-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border-bottom: 1px solid var(--line); padding: 12px; }
  .debt-table td { border: 0; padding: 0; }
  .debt-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
  .debt-table .debt-table-action { grid-column: 1 / -1; }
  .debt-table .debt-table-action::before { display: none; }
  .debt-pay-button { width: 100%; min-height: 40px; }
  .debt-payment-form { margin: 10px; padding: 12px; }
}
.guard:not(:empty) { border: 1px solid #e6b780; border-radius: 8px; background: #fff7ed; padding: 14px; display: grid; gap: 12px; }
.guard-actions, .checks { display: flex; flex-wrap: wrap; gap: 8px; }
.error { color: var(--danger); font-weight: 700; }
.pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; min-height: 44px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.pagination label { display: flex; align-items: center; gap: 7px; }
.pagination select { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 0 30px 0 10px; }
.pagination .icon-button { width: 36px; height: 36px; min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font-size: 18px; }
.pagination .icon-button:disabled { opacity: .38; cursor: default; }
.pagination strong { min-width: 64px; text-align: center; color: var(--ink); }
.loading-card { color: var(--muted); }
.directory-readonly-label { justify-self: start; border: 1px solid #c9d2ce; border-radius: 8px; background: #f4f6f5; color: var(--muted); padding: 6px 9px; font-size: 12px; font-weight: 700; }
.directory-readonly-banner { display: grid; gap: 3px; border: 1px solid #c9d2ce; border-radius: 8px; background: #f4f6f5; padding: 11px 12px; }
.directory-readonly-banner span { color: var(--muted); font-size: 13px; }

.app.is-dashboard .stats { display: none; }
.app.is-dashboard .actions #search,
.app.is-dashboard .actions #addClient { display: none; }
.owner-dashboard { display: grid; gap: 18px; max-width: 1500px; margin: 0 auto; }
.dashboard-loading { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 24px; color: var(--muted); }
.dashboard-alerts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border: 1px solid #e5b365; border-left: 5px solid #cc7a22; border-radius: 8px; background: #fff9ef; padding: 10px; }
.dashboard-alerts.is-clear { border-color: #a7c8b8; border-left-color: var(--accent); background: #f3faf6; color: #315f4d; }
.dashboard-alerts button { min-height: 38px; border: 1px solid #e2c291; border-radius: 8px; background: white; color: #6a4218; padding: 0 11px; }
.dashboard-alerts .dashboard-refresh { width: 38px; margin-left: auto; padding: 0; color: var(--accent); border-color: var(--line); font-size: 21px; }
.dashboard-band { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.dashboard-band:first-of-type { border-top: 0; padding-top: 0; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dashboard-metric { min-width: 0; border: 1px solid var(--line); border-top: 4px solid #2f6f8f; border-radius: 8px; background: white; padding: 14px; }
.dashboard-metric:nth-child(2) { border-top-color: #1f7a5b; }
.dashboard-metric:nth-child(3) { border-top-color: #b17a18; }
.dashboard-metric:nth-child(4) { border-top-color: #8c5b78; }
.dashboard-metric > span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.dashboard-metric > strong { display: block; margin: 8px 0 6px; font-size: clamp(22px, 2vw, 30px); overflow-wrap: anywhere; }
.dashboard-metric p, .dashboard-metric small { display: block; margin: 0; color: var(--muted); line-height: 1.4; }
.dashboard-metric p { min-height: 36px; font-size: 12px; font-weight: 700; }
.dashboard-metric small { font-size: 11px; }
.dashboard-progress { height: 5px; margin-top: 10px; border-radius: 4px; background: #edf0f2; overflow: hidden; }
.dashboard-progress i { display: block; height: 100%; background: #2f6f8f; }
.dashboard-lead-chart { display: grid; grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr); align-items: end; gap: 20px; min-height: 148px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 14px; }
.dashboard-section-title { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.dashboard-section-title h2, .dashboard-section-title p { margin: 0; }
.dashboard-section-title h2 { font-size: 17px; }
.dashboard-section-title p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.dashboard-section-title > strong { color: var(--accent); }
.dashboard-bars { height: 112px; display: grid; grid-template-columns: repeat(7, minmax(32px, 1fr)); align-items: end; gap: 8px; }
.dashboard-bars > div { height: 100%; display: grid; grid-template-rows: 1fr auto auto; align-items: end; justify-items: center; gap: 3px; }
.dashboard-bars span { width: min(30px, 70%); min-height: 4px; border-radius: 4px 4px 0 0; background: #2f6f8f; }
.dashboard-bars strong { font-size: 11px; }
.dashboard-bars small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.dashboard-funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
.dashboard-funnel article { min-width: 0; background: white; padding: 15px; }
.dashboard-funnel span, .dashboard-funnel small { display: block; color: var(--muted); }
.dashboard-funnel span { font-size: 12px; font-weight: 700; }
.dashboard-funnel strong { display: block; margin: 7px 0; font-size: 27px; }
.dashboard-funnel small { font-size: 11px; }
.dashboard-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dashboard-detail-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-panel { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 14px; }
.dashboard-panel > p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.dashboard-large-value { display: block; margin-top: 18px; font-size: 26px; }
.dashboard-compact-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dashboard-compact-stats span { padding: 10px; color: var(--muted); font-size: 11px; }
.dashboard-compact-stats span:nth-child(odd) { border-right: 1px solid var(--line); }
.dashboard-compact-stats span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.dashboard-compact-stats strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 18px; }
.dashboard-client-list { display: grid; margin-top: 10px; border-top: 1px solid var(--line); }
.dashboard-client-list > p { color: var(--muted); }
.dashboard-client-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 10px 2px; text-align: left; }
.dashboard-client-list button:hover { color: var(--accent); }
.dashboard-client-list button span { min-width: 0; }
.dashboard-client-list button strong, .dashboard-client-list button small { display: block; overflow-wrap: anywhere; }
.dashboard-client-list button small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.dashboard-client-list button b { flex: 0 0 auto; color: var(--accent); font-size: 11px; }
.dashboard-revenue-chart { height: 210px; display: grid; grid-template-columns: repeat(12, minmax(38px, 1fr)); align-items: end; gap: 7px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 14px; }
.dashboard-revenue-chart > div { height: 100%; display: grid; grid-template-rows: 1fr auto auto; align-items: end; justify-items: center; gap: 4px; }
.dashboard-revenue-chart span { width: min(38px, 72%); min-height: 3px; border-radius: 4px 4px 0 0; background: #1f7a5b; }
.dashboard-revenue-chart strong { font-size: 10px; white-space: nowrap; }
.dashboard-revenue-chart small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.dashboard-data-note { color: var(--muted); font-size: 11px; text-align: right; }
.dashboard-group-table { border: 1px solid var(--line); border-radius: 8px; background: white; overflow: hidden; }
.dashboard-group-row { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(120px, .7fr)); gap: 10px; align-items: center; min-width: 740px; padding: 10px 12px; border-top: 1px solid var(--line); }
.dashboard-group-row:first-child { border-top: 0; }
.dashboard-group-row.is-head { color: var(--muted); background: #f5f7f8; font-size: 11px; font-weight: 700; }
.dashboard-group-row .is-negative { color: var(--danger); font-weight: 800; }
.dashboard-group-row .is-positive { color: var(--accent); font-weight: 800; }
.dashboard-empty { margin: 0; border: 1px dashed var(--line); border-radius: 8px; padding: 18px; color: var(--muted); background: white; }
.dashboard-settings { border: 1px solid var(--line); border-radius: 8px; background: white; overflow: hidden; }
.dashboard-settings summary { cursor: pointer; padding: 13px 15px; color: var(--accent); font-weight: 800; }
.dashboard-settings form { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)) auto minmax(80px, .5fr); align-items: end; gap: 10px; border-top: 1px solid var(--line); padding: 14px; }
.dashboard-settings input { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .topbar, .actions { align-items: stretch; flex-direction: column; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .section-head { align-items: stretch; flex-direction: column; }
  .report-controls { align-items: stretch; flex-direction: column; }
  .task-toolbar { align-items: stretch; flex-direction: column; }
  .today-panel-head, .today-panel-actions { align-items: stretch; flex-direction: column; }
  .filter-stack { justify-items: stretch; }
  .report-summary-row { grid-template-columns: repeat(2, 1fr); }
  .report-item { grid-template-columns: 1fr; }
  .shift-status { align-items: stretch; flex-direction: column; }
  .shift-grid { grid-template-columns: 1fr; }
  .employee-form { grid-template-columns: 1fr; }
  .owner-password-form { grid-template-columns: 1fr; }
  .schedule-form, .schedule-settings, .schedule-columns { grid-template-columns: 1fr; }
  .schedule-row { align-items: stretch; flex-direction: column; }
  .calendar-series-form { grid-template-columns: 1fr; }
  .calendar-week-slots label { grid-template-columns: 20px 1fr; }
  .calendar-week-slots label input[type="time"] { grid-column: 2; }
  .calendar-range-controls { align-items: stretch; flex-direction: column; }
  .calendar-range-controls input { width: 100%; }
  .schedule-row-actions { justify-content: start; }
  .lesson-catalog-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-catalog-tabs button { width: 100%; padding: 0 8px; }
  .lesson-catalog-form, .lesson-pass-list, .lesson-discount-row { grid-template-columns: 1fr; }
  .lesson-catalog-row, .lesson-pass-card header { align-items: stretch; flex-direction: column; }
  .lesson-catalog-row button { align-self: start; }
  .marketing-form, .marketing-form.compact, .marketing-row, .marketing-group-form { grid-template-columns: 1fr; }
  .marketing-check-list { grid-template-columns: 1fr; }
  .marketing-section-head { align-items: stretch; flex-direction: column; }
  .lesson-pass-card header > strong { align-self: start; }
  .campaign-form { grid-template-columns: 1fr; }
  .event-form, .event-entry-form, .event-note-form, .event-totals, .regulation-form { grid-template-columns: 1fr; }
  .campaign-stats-detail button { grid-template-columns: 1fr; gap: 4px; }
  .employee-item { align-items: stretch; flex-direction: column; }
  .employee-actions, .employee-remark-actions { justify-content: start; }
  .employee-remark { flex-direction: column; }
  .employee-remark-buttons { justify-content: start; }
  .source-form { grid-template-columns: 1fr; }
  .source-item { align-items: stretch; flex-direction: column; }
  .source-actions { justify-content: start; }
  .form-grid { grid-template-columns: 1fr; }
  .opportunity-toolbar, .opportunity-card header { align-items: stretch; flex-direction: column; }
  .opportunity-fields { grid-template-columns: 1fr; }
  .opportunity-details summary { align-items: stretch; flex-direction: column; }
  .opportunity-summary-status { text-align: left; }
  .pass-summary, .pass-list { grid-template-columns: 1fr; }
  .pass-toolbar, .pass-issuance-head { align-items: stretch; flex-direction: column; }
  .pass-toolbar button { align-self: stretch; }
  .pass-issuance .icon-button { align-self: end; }
  .pass-form-grid, .debt-payment-grid { grid-template-columns: 1fr; }
  .pass-form-grid label.wide, .debt-payment-grid label.wide { grid-column: auto; }
  .pass-inline-discount { grid-template-columns: 1fr; }
  .pagination { justify-content: center; }
  .dashboard-metrics, .dashboard-columns, .dashboard-detail-columns { grid-template-columns: 1fr; }
  .dashboard-lead-chart { grid-template-columns: 1fr; }
  .dashboard-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-settings form { grid-template-columns: 1fr; }
  .dashboard-section-title { align-items: stretch; flex-direction: column; }
  .dashboard-data-note { text-align: left; }
  .dashboard-group-table { overflow-x: auto; }
}

/* Studio 108 interface system — 2026 */
:root {
  --bg: #f2f2ef;
  --panel: #ffffff;
  --ink: #17201d;
  --text: #17201d;
  --muted: #69736f;
  --line: #dfe3df;
  --line-strong: #cbd1cc;
  --accent: #176b52;
  --accent-dark: #0f503d;
  --accent-soft: #e7f1ed;
  --danger: #a53c3c;
  --warning: #a46c12;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(20, 31, 27, .04), 0 6px 18px rgba(20, 31, 27, .035);
  font-family: Inter, "SF Pro Text", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-synthesis: none;
}

html { background: var(--bg); }
body { letter-spacing: -.008em; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease, transform .16s ease; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgba(23, 107, 82, .18);
  outline-offset: 2px;
}
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(23, 107, 82, .1); outline: 0; }
input, select, textarea { border-radius: 9px; border-color: var(--line-strong); color: var(--ink); }
button:active { transform: translateY(1px); }
h1, h2, h3, h4, strong { letter-spacing: -.025em; }
h1 { font-size: clamp(26px, 2vw, 34px); line-height: 1.08; font-weight: 760; }
h2 { font-size: 21px; line-height: 1.2; font-weight: 730; }

.app { grid-template-columns: 224px minmax(0, 1fr); }
.sidebar {
  background: #12231d;
  border-right: 1px solid rgba(255, 255, 255, .05);
  padding: 18px 14px;
}
@media (min-width: 901px) {
  .sidebar { padding: 18px 14px 14px; gap: 18px; }
  .sidebar nav { gap: 2px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
  .sidebar .nav { min-height: 37px; padding: 8px 10px 8px 14px; }
}
.brand { gap: 10px; padding: 0 4px; }
.brand > span {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #e1f0e9;
  color: #164f3e;
  font-size: 11px;
  letter-spacing: .08em;
}
.brand strong { font-size: 13px; }
.brand small { margin-top: 2px; color: #899c94; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.nav {
  position: relative;
  border-radius: 8px;
  color: #aebdb7;
  font-size: 13px;
  font-weight: 560;
}
.nav::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 11px 2px 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .72;
}
.nav.is-active, .nav:hover { background: rgba(255,255,255,.075); color: #fff; }
.nav.is-active { font-weight: 690; }
.nav.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: #82d2b4;
}
.nav.is-active::before { background: #82d2b4; border-color: #82d2b4; box-shadow: 0 0 0 4px rgba(130,210,180,.1); }
.nav[data-view="shift"], .nav[data-view="sources"], .nav[data-view="report"] { margin-top: 8px; }
.nav[data-view="shift"]::after, .nav[data-view="sources"]::after, .nav[data-view="report"]::after { top: 9px; bottom: 9px; }

main { width: 100%; padding: 24px clamp(20px, 3vw, 46px) 54px; }
.topbar {
  min-height: 64px;
  align-items: flex-end;
  margin-bottom: 18px;
  padding-bottom: 2px;
}
.topbar p { margin-bottom: 5px; color: var(--muted); font-size: 11px; letter-spacing: .09em; }
.actions { align-items: center; gap: 8px; }
.actions > button:not(.primary), .today-panel-actions button, .today-panel-head > button {
  border-color: var(--line);
  border-radius: 9px;
  box-shadow: 0 1px 1px rgba(20,31,27,.02);
}
.actions > button:not(.primary):hover, .today-panel-actions button:hover, .today-panel-head > button:hover {
  border-color: var(--line-strong);
  background: #fafbf9;
}
.actions #search { width: clamp(170px, 17vw, 260px); padding-left: 36px; background-image: radial-gradient(circle at 17px 18px, transparent 5px, #7b8581 5.5px, #7b8581 6.5px, transparent 7px), linear-gradient(45deg, transparent 48%, #7b8581 49%, #7b8581 54%, transparent 55%); background-size: 28px 28px, 8px 8px; background-position: 0 3px, 22px 23px; background-repeat: no-repeat; }
.sync-status { border: 0; background: transparent; padding: 7px 5px; font-size: 11px; }
.sync-status::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #95a09b; }
.sync-status.is-ok { border: 0; background: transparent; color: var(--muted); }
.sync-status.is-ok::before { background: #3fa77e; box-shadow: 0 0 0 3px rgba(63,167,126,.12); }
.primary {
  min-width: 0;
  border-radius: 9px;
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(11,65,49,.18);
  padding: 0 18px;
}
.primary:hover { background: var(--accent-dark); box-shadow: 0 5px 14px rgba(11,65,49,.15); }
#addClient { min-width: 190px; min-height: 42px; }

.stats {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  box-shadow: var(--shadow-sm);
}
.stats article { position: relative; min-height: 84px; border: 0; border-radius: 0; padding: 14px 17px; }
.stats article::after { content: "→"; position: absolute; top: 14px; right: 15px; color: #aeb6b2; opacity: 0; transform: translateX(-3px); transition: .16s ease; }
.stats article:hover::after, .stats article.is-active::after { opacity: 1; transform: none; }
.stats article:hover, .stats article.is-active { border: 0; box-shadow: inset 0 -3px 0 var(--accent); background: #fbfcfb; }
.stats span { margin-bottom: 5px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.stats strong { font-size: 29px; font-weight: 720; }

.today-panel { gap: 0; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); overflow: hidden; }
.today-panel-head { min-height: 66px; align-items: center; border: 0; border-radius: 0; padding: 13px 16px; }
.today-panel-head p { margin-top: 3px; font-size: 12px; }
.today-panel-body { border-top: 1px solid var(--line); padding: 14px; }
.today-panel-actions input, .today-panel-actions select { min-height: 38px; }
.today-panel-actions button, .today-panel-head > button { min-height: 38px; color: var(--muted); font-size: 12px; }
.cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 10px; }
.today-panel-body > .cards { margin-top: 0; }
.card {
  position: relative;
  gap: 9px;
  border-color: var(--line);
  border-radius: 11px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(20,31,27,.025);
}
.card:hover { border-color: #c5cec9; box-shadow: 0 7px 20px rgba(20,31,27,.06); transform: translateY(-1px); }
.card h3 { font-size: 16px; line-height: 1.25; }
.card p { font-size: 12px; line-height: 1.45; }
.status { background: var(--accent-soft); color: var(--accent-dark); padding: 5px 8px; font-size: 10px; letter-spacing: .02em; }
.client-number { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.task-box { gap: 5px; border: 1px solid #e5e9e6; border-radius: 9px; background: #f6f8f7; padding: 10px 11px; }
.card.is-timed-task { border-color: #dcc17c; box-shadow: inset 3px 0 0 #c69428; }
.card.is-timed-task .task-box { background: #fffaf0; border-color: #ead9ad; }
.quick-links { gap: 6px; }
.icon, .quick-links a, .quick-links span { min-width: 31px; height: 31px; border-radius: 8px; font-size: 11px; }
.card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.card-actions button { min-height: 33px; border-radius: 8px; color: var(--muted); font-size: 11px; }
.pinned-note { border-radius: 9px; }

.section-head { margin-bottom: 12px; }
.view > h2 { margin-bottom: 12px; }
.table-wrap, .shift-status, .shift-card, .employee-form, .employee-add, .employee-item, .source-form, .source-item,
.schedule-settings-card, .schedule-row, .campaign-form, .campaign-card, .event-form, .event-card, .regulation-item,
.report-summary, .report-item, .dashboard-panel, .dashboard-lead-chart, .dashboard-revenue-chart, .dashboard-settings {
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.table-wrap { margin-top: 10px; }
th { background: #f2f4f2; color: #56615c; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; }
th, td { padding: 10px 11px; }
tr:hover td { background: #fafbf9; }

dialog { border-radius: 16px; box-shadow: 0 24px 80px rgba(14,24,20,.24); }
dialog::backdrop { background: rgba(8, 19, 15, .54); backdrop-filter: blur(3px); }
.details { padding: 24px; }
.close { top: 14px; right: 14px; background: #f0f2f0; color: var(--muted); }
.tabs { gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.tabs button { border-color: transparent; border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 650; }
.tabs button:hover { background: #f2f5f3; color: var(--ink); }
.tabs button.is-active { background: var(--accent-soft); border-color: transparent; color: var(--accent-dark); }
.pane { border: 0; border-radius: 10px; background: #f5f7f5; }

.login-view {
  background:
    radial-gradient(circle at 22% 18%, rgba(72, 148, 117, .18), transparent 31%),
    linear-gradient(145deg, #10251d, #0b1914);
}
.login-card { width: min(100%, 390px); gap: 17px; border-radius: 18px; padding: 30px; box-shadow: 0 30px 80px rgba(0,0,0,.34); }
.login-card label { font-size: 12px; font-weight: 650; }
.login-card input { min-height: 46px; }
.login-card .primary { min-height: 46px; }

.dashboard-metric { border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.dashboard-metric::before { content: ""; display: block; width: 26px; height: 3px; margin-bottom: 11px; border-radius: 3px; background: #2f6f8f; }
.dashboard-metric:nth-child(2)::before { background: #1f7a5b; }
.dashboard-metric:nth-child(3)::before { background: #b17a18; }
.dashboard-metric:nth-child(4)::before { background: #8c5b78; }
.dashboard-funnel { border-radius: var(--radius); box-shadow: var(--shadow-sm); }

@media (min-width: 1500px) {
  .app { grid-template-columns: 236px minmax(0, 1fr); }
  main { max-width: 1840px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
}

@media (max-width: 1120px) and (min-width: 901px) {
  .app { grid-template-columns: 206px minmax(0, 1fr); }
  main { padding-inline: 20px; }
  .topbar { align-items: stretch; flex-direction: column; }
  .actions { justify-content: flex-end; }
}

@media (max-width: 900px) {
  main { padding: 18px 14px 42px; }
  .sidebar { position: static; gap: 12px; padding: 12px; }
  .sidebar nav { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 3px; }
  .sidebar .nav { flex: 0 0 auto; min-height: 38px; padding: 8px 12px; white-space: nowrap; background: rgba(255,255,255,.04); }
  .sidebar .nav::before, .sidebar .nav::after { display: none; }
  .nav[data-view="shift"], .nav[data-view="sources"], .nav[data-view="report"] { margin-top: 0; }
  .brand { padding: 0; }
  .topbar { margin-bottom: 14px; }
  .actions #search, #addClient { width: 100%; min-width: 0; }
  .sync-status { align-self: flex-start; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats article { min-height: 74px; padding: 12px 14px; }
  .today-panel-head { align-items: stretch; }
  .today-panel-body { padding: 10px; }
}

@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats strong { font-size: 25px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .login-card { padding: 24px; }
  .details { padding: 18px 14px; }
}

/* Compact dark composition inspired by the approved Flash Light CRM */
:root {
  --bg: #111315;
  --panel: #191c1f;
  --ink: #f4f1ea;
  --text: #f4f1ea;
  --muted: #8e969b;
  --line: #2d3236;
  --line-strong: #3a4044;
  --accent: #ff784e;
  --accent-dark: #e96741;
  --accent-soft: #34231f;
  --danger: #ff8d80;
  --warning: #f7c84b;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .16);
}

html, body { background: var(--bg); }
.app { grid-template-columns: 208px minmax(0, 1fr); background: var(--bg); }
.sidebar { background: #0c0e10; border-color: var(--line); padding: 14px 11px; }
@media (min-width: 901px) {
  .sidebar { padding: 14px 11px 10px; gap: 12px; }
  .sidebar nav { gap: 1px; }
  .sidebar .nav { min-height: 31px; padding: 5px 8px 5px 11px; font-size: 11px; }
}
.brand { gap: 9px; padding: 0 3px; }
.brand > span { width: 34px; height: 34px; border-radius: 9px; background: var(--warning); color: #221b0b; font-size: 9px; }
.brand strong { font-size: 11px; color: var(--ink); }
.brand small { font-size: 8px; color: var(--warning); }
.nav { color: #8e969b; }
.nav::before { width: 4px; height: 4px; margin-right: 9px; }
.nav.is-active, .nav:hover { background: #1c2023; color: #fff; }
.nav.is-active::before { background: var(--accent); border-color: var(--accent); box-shadow: none; }
.nav.is-active::after { width: 2px; top: 7px; bottom: 7px; background: var(--accent); }
.nav[data-view="shift"], .nav[data-view="sources"], .nav[data-view="report"] { margin-top: 4px; }

main { padding: 14px 18px 30px; }
.topbar { min-height: 48px; margin-bottom: 9px; align-items: center; padding-bottom: 0; }
.topbar p { margin-bottom: 3px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
h1 { font-size: clamp(22px, 2vw, 28px); }
h2 { font-size: 16px; }
.actions { gap: 6px; }
.actions > button:not(.primary), .actions input { min-height: 34px; }
.actions > button:not(.primary) { background: var(--panel); border-color: var(--line); color: var(--ink); font-size: 10px; }
.actions #search { width: 190px; min-height: 34px; background-color: var(--panel); background-image: none; padding-left: 10px; }
.sync-status { color: var(--muted); font-size: 9px; }
.sync-status.is-ok { color: var(--muted); }
#addClient { min-width: 154px; min-height: 34px; font-size: 10px; }
.primary { min-height: 34px; background: var(--accent); color: #fff; padding-inline: 14px; font-size: 10px; }
.primary:hover { background: var(--accent-dark); }
input, select, textarea { min-height: 35px; background: #111416; border-color: var(--line-strong); color: var(--ink); border-radius: 7px; font-size: 11px; }
textarea { min-height: 70px; }
label { gap: 4px; color: var(--muted); font-size: 10px; }

.stats { gap: 8px; margin-bottom: 10px; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.stats article { min-height: 65px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow-sm); }
.stats article:hover, .stats article.is-active { background: #202428; box-shadow: inset 0 -2px 0 var(--accent); }
.stats span { margin-bottom: 3px; font-size: 8px; }
.stats strong { font-size: 21px; }

.owner-dashboard { max-width: none; gap: 9px; }
.dashboard-alerts { min-height: 38px; padding: 6px 8px 6px 11px; border: 1px solid #4b4030; border-left: 3px solid var(--warning); border-radius: 9px; background: #201e18; font-size: 10px; }
.dashboard-alerts.is-clear { border-color: #29483c; border-left-color: #58a786; background: #16221d; color: #9cb8ad; }
.dashboard-alerts .dashboard-refresh { width: 29px; min-height: 29px; border-color: var(--line); background: var(--panel); color: var(--accent); font-size: 15px; }
.dashboard-alerts button { min-height: 29px; background: var(--panel); border-color: var(--line); color: var(--ink); font-size: 9px; }
.dashboard-band { gap: 8px; border: 0; padding-top: 0; }
.dashboard-band:first-of-type {
  grid-template-columns: minmax(350px, 1.05fr) minmax(280px, .95fr);
  align-items: stretch;
}
.dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.dashboard-metric { min-height: 79px; padding: 9px 11px; background: var(--panel); border-color: var(--line); border-radius: 9px; box-shadow: var(--shadow-sm); }
.dashboard-metric::before { width: 20px; height: 2px; margin-bottom: 6px; background: #5697dc; }
.dashboard-metric:nth-child(2)::before { background: #54b38b; }
.dashboard-metric:nth-child(3)::before { background: var(--warning); }
.dashboard-metric:nth-child(4)::before { background: var(--accent); }
.dashboard-metric > span { font-size: 8px; letter-spacing: .035em; text-transform: uppercase; }
.dashboard-metric > strong { display: inline-block; margin: 3px 0 2px; font-size: 19px; }
.dashboard-metric p { min-height: 0; margin: 0; font-size: 9px; line-height: 1.25; }
.dashboard-metric small { margin-top: 3px; font-size: 8px; line-height: 1.2; }
.dashboard-progress { height: 3px; margin-top: 5px; background: #292e31; }
.dashboard-progress i { background: var(--accent); }
.dashboard-lead-chart { min-height: 165px; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; padding: 11px; background: var(--panel); border-color: var(--line); border-radius: 9px; box-shadow: var(--shadow-sm); }
.dashboard-section-title h2 { font-size: 13px; }
.dashboard-section-title p { margin-top: 2px; font-size: 8px; line-height: 1.35; }
.dashboard-bars { height: 106px; gap: 5px; }
.dashboard-bars span { width: min(22px, 70%); background: var(--accent); }
.dashboard-bars strong, .dashboard-bars small { font-size: 8px; }

#dashboardFunnel { gap: 7px; }
.dashboard-funnel { border-color: var(--line); border-radius: 9px; background: var(--line); box-shadow: var(--shadow-sm); }
.dashboard-funnel article { padding: 9px 11px; background: var(--panel); }
.dashboard-funnel span { font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }
.dashboard-funnel strong { margin: 3px 0; font-size: 19px; }
.dashboard-funnel small { font-size: 8px; }
.dashboard-columns { gap: 8px; }
.dashboard-panel { padding: 11px; background: var(--panel); border-color: var(--line); border-radius: 9px; box-shadow: var(--shadow-sm); }
.dashboard-panel > p { margin-top: 4px; font-size: 8px; }
.dashboard-large-value { margin-top: 9px; font-size: 20px; }
.dashboard-compact-stats { margin-top: 8px; border-color: var(--line); }
.dashboard-compact-stats span { padding: 6px 7px; font-size: 8px; }
.dashboard-compact-stats strong { margin-bottom: 1px; font-size: 14px; }
.dashboard-client-list { margin-top: 6px; border-color: var(--line); }
.dashboard-client-list button { padding: 6px 1px; color: var(--ink); }
.dashboard-revenue-chart { height: 145px; padding: 10px; background: var(--panel); border-color: var(--line); border-radius: 9px; box-shadow: var(--shadow-sm); }
.dashboard-revenue-chart span { background: var(--accent); }
.dashboard-empty { padding: 10px; background: var(--panel); border-color: var(--line); border-radius: 9px; font-size: 9px; }
.dashboard-settings { background: var(--panel); border-color: var(--line); border-radius: 9px; }
.dashboard-settings summary { padding: 8px 11px; color: var(--accent); font-size: 10px; }

.today-panel, .card, .table-wrap, .shift-status, .shift-card, .employee-form, .employee-add, .employee-item,
.source-form, .source-item, .schedule-settings-card, .schedule-row, .campaign-form, .campaign-card,
.event-form, .event-card, .regulation-item, .report-summary, .report-item {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.today-panel { margin-bottom: 9px; border-radius: 9px; }
.today-panel-head { min-height: 49px; padding: 8px 11px; background: var(--panel); }
.today-panel-head p { font-size: 9px; }
.today-panel-body { padding: 8px; border-color: var(--line); }
.today-panel-actions input, .today-panel-actions select, .today-panel-actions button, .today-panel-head > button { min-height: 31px; font-size: 9px; background: #111416; border-color: var(--line); color: var(--muted); }
.cards { grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 7px; margin-top: 7px; }
.card { gap: 6px; padding: 10px; border-radius: 9px; }
.card:hover { border-color: var(--line-strong); background: #1c2023; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.card h3 { font-size: 13px; }
.card p { font-size: 9px; line-height: 1.35; }
.status { padding: 4px 6px; background: #34231f; color: #ff9b7c; font-size: 8px; }
.task-box { gap: 3px; padding: 7px 8px; background: #202428; border-color: var(--line); border-radius: 7px; }
.card.is-timed-task { border-color: #755d2c; box-shadow: inset 3px 0 0 var(--warning); }
.card.is-timed-task .task-box { background: #282418; border-color: #554723; }
.icon, .quick-links a, .quick-links span, .card-actions button { background: #202428; border-color: var(--line-strong); color: var(--ink); }
.pinned-note, .note.is-pinned { background: #282418; border-color: #665225; color: var(--ink); }
.pinned-note p { color: var(--ink); }
.pane, .task-box, .remark-form, .pass-issuance { background: #141719; }

.table-wrap { border-radius: 9px; }
th { background: #202428; color: #9da5a9; }
td { color: var(--ink); }
tr:hover td { background: #202428; }
.table-link, .inline-link { color: var(--accent); }
.table-note-preview { color: var(--ink); }

dialog { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
dialog::backdrop { background: rgba(0,0,0,.72); }
.close { background: #24282b; color: var(--muted); }
.tabs { border-color: var(--line); }
.tabs button, .guard button, .guard a, .note, .parent-suggestions button, .option-editor button,
.add-option, .pagination select, .pagination .icon-button, .employee-item button, .source-actions button,
.schedule-settings-card button, .schedule-row button {
  background: #202428;
  border-color: var(--line-strong);
  color: var(--ink);
}
.tabs button:hover { background: #252a2e; }
.tabs button.is-active { background: var(--accent); color: #fff; }

.login-view { background: radial-gradient(circle at 20% 10%, #262125 0, transparent 38%), #0c0e10; }
.login-card { background: #141719; border: 1px solid #292d30; }
.login-brand { color: var(--ink); }
.login-card input { background: #0f1113; }

@media (max-width: 1120px) and (min-width: 901px) {
  .app { grid-template-columns: 190px minmax(0, 1fr); }
  main { padding: 12px 14px 28px; }
  .topbar { align-items: center; flex-direction: row; }
  .dashboard-band:first-of-type { grid-template-columns: minmax(320px, 1fr) minmax(250px, .85fr); }
}

@media (max-width: 900px) {
  main { padding: 10px 10px 30px; }
  .sidebar { padding: 8px; }
  .topbar { min-height: 44px; }
  .dashboard-band:first-of-type { grid-template-columns: 1fr; }
  .dashboard-metrics { grid-template-columns: repeat(4, minmax(120px, 1fr)); overflow-x: auto; padding-bottom: 2px; }
  .dashboard-metric { min-width: 135px; }
  .dashboard-lead-chart { min-height: 140px; }
}

@media (max-width: 560px) {
  .stats { display: flex; overflow-x: auto; }
  .stats article { min-width: 130px; }
  .dashboard-columns, .dashboard-detail-columns { grid-template-columns: 1fr; }
  .dashboard-funnel { grid-template-columns: repeat(4, minmax(110px, 1fr)); overflow-x: auto; }
}

/* Owner dashboard — Flash Light composition */
.app.is-dashboard main { padding: 14px 18px 28px; }
.app.is-dashboard .topbar { margin-bottom: 11px; }
.app.is-dashboard .owner-dashboard { gap: 10px; }
.fl-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}
.fl-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.fl-metrics .dashboard-metric { min-height: 104px; padding: 13px 14px 10px; }
.fl-metrics .dashboard-metric::before { width: 28px; margin-bottom: 9px; }
.fl-metrics .dashboard-metric > span { font-size: 8px; }
.fl-metrics .dashboard-metric > strong { margin: 4px 0 3px; font-size: 21px; }
.fl-metrics .dashboard-metric p { font-size: 9px; }
.fl-metrics .dashboard-metric small { font-size: 8px; }
.fl-metrics .dashboard-metric:nth-child(4)::before { background: #a97bdb; }

.fl-main-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 10px; }
.fl-main-grid > .fl-panel { min-height: 238px; padding: 15px; }
.fl-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fl-panel-head h2 { margin: 4px 0 0; font-size: 15px; }
.fl-panel-head > strong { font-size: 19px; white-space: nowrap; }
.fl-eyebrow { display: block; color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.fl-note { margin: 10px 0 0; color: var(--muted); font-size: 9px; }

.fl-chart { height: 178px; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; margin-top: 13px; }
.fl-chart-axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 20px; color: #697177; font-size: 7px; text-align: right; }
.fl-bars {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: clamp(8px, 3vw, 28px);
  padding: 0 4% 0;
  border-bottom: 1px solid #3a4044;
  background: repeating-linear-gradient(to bottom, #272c30 0, #272c30 1px, transparent 1px, transparent 33.33%);
}
.fl-bars > div { flex: 1; min-width: 18px; height: 100%; display: grid; grid-template-rows: 1fr 20px; align-items: end; justify-items: center; }
.fl-bars i { position: relative; width: min(34px, 72%); min-height: 4px; border-radius: 5px 5px 1px 1px; background: linear-gradient(180deg, #ff8c68, var(--accent)); box-shadow: 0 8px 16px rgba(255, 120, 78, .12); }
.fl-bars i b { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); color: var(--ink); font-size: 8px; font-style: normal; white-space: nowrap; }
.fl-bars small { align-self: end; padding-bottom: 4px; color: var(--muted); font-size: 7px; text-transform: uppercase; }

.fl-funnel-list { display: grid; margin-top: 13px; }
.fl-funnel-list > div { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; align-items: center; gap: 8px; min-height: 44px; border-top: 1px solid var(--line); }
.fl-funnel-list > div:first-child { border-top: 0; }
.fl-funnel-list > div:not(:last-child)::after { content: ""; position: absolute; left: 12px; bottom: -7px; z-index: 1; width: 1px; height: 14px; background: #4a5156; }
.fl-funnel-list span { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 700; }
.fl-funnel-list span i { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #3a4044; border-radius: 7px; background: #202428; color: var(--accent); font-size: 8px; font-style: normal; }
.fl-funnel-list strong { font-size: 17px; }
.fl-funnel-list small { color: var(--muted); font-size: 8px; text-align: right; }

.fl-operations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fl-operations > article { min-height: 126px; padding: 13px; }
.fl-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 15px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.fl-mini-grid span { padding: 8px; border-left: 1px solid var(--line); color: var(--muted); font-size: 7px; }
.fl-mini-grid span:first-child { border-left: 0; }
.fl-mini-grid b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 14px; }
.fl-flow { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 10px; align-items: center; margin-top: 17px; }
.fl-flow i { width: 1px; height: 28px; background: var(--line); }
.fl-flow span { color: var(--muted); font-size: 8px; }
.fl-flow b { display: block; margin-bottom: 3px; color: var(--ink); font-size: 17px; }
.is-positive { color: #66b991 !important; }
.is-negative { color: #ff8d80 !important; }

.fl-watchlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fl-collapsible { overflow: hidden; }
.fl-collapsible summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 10px; min-height: 74px; padding: 12px 14px; cursor: pointer; list-style: none; }
.fl-collapsible summary::-webkit-details-marker { display: none; }
.fl-collapsible summary span { display: flex; flex-direction: column-reverse; gap: 4px; }
.fl-collapsible summary b { font-size: 13px; }
.fl-collapsible summary small { color: var(--muted); font-size: 8px; }
.fl-collapsible summary strong { color: var(--accent); font-size: 24px; }
.fl-collapsible summary > i { color: var(--muted); font-size: 16px; font-style: normal; transition: transform .16s ease; }
.fl-collapsible[open] summary > i { transform: rotate(180deg); }
.fl-collapsible[open] summary { border-bottom: 1px solid var(--line); }
.fl-client-list { padding: 5px 13px 10px; }
.fl-client-list > p { margin: 8px 0; color: var(--muted); font-size: 9px; }
.fl-client-list button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); padding: 8px 1px; text-align: left; }
.fl-client-list button:first-child { border-top: 0; }
.fl-client-list button span { display: grid; gap: 2px; }
.fl-client-list button b { font-size: 9px; }
.fl-client-list button small { color: var(--muted); font-size: 7px; }
.fl-client-list button em { color: var(--accent); font-size: 8px; font-style: normal; }

.fl-revenue-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); gap: 10px; }
.fl-revenue-grid > article { min-height: 247px; padding: 15px; }
.fl-chart-revenue { height: 184px; }
.fl-chart-revenue .fl-bars { gap: clamp(3px, 1.25vw, 14px); padding-inline: 2%; }
.fl-chart-revenue .fl-bars i { width: min(26px, 78%); background: linear-gradient(180deg, #ff8c68, var(--accent)); }
.fl-chart-revenue .fl-bars > div:last-child i { background: linear-gradient(180deg, #f9d468, #d9a91e); }
.fl-donut-wrap { display: grid; grid-template-columns: 134px minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 24px; }
.fl-donut { position: relative; width: 134px; height: 134px; border-radius: 50%; }
.fl-donut::after { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: var(--panel); }
.fl-donut > span { position: absolute; inset: 33px; z-index: 1; display: grid; place-items: center; align-content: center; color: var(--muted); font-size: 7px; text-align: center; }
.fl-donut > span b { display: block; margin-bottom: 3px; color: var(--ink); font-size: 12px; }
.fl-legend { display: grid; gap: 9px; }
.fl-legend > span { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 7px; font-size: 8px; }
.fl-legend i { width: 7px; height: 7px; border-radius: 2px; }
.fl-legend b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-legend em { color: var(--muted); font-style: normal; }
.fl-legend > small { color: var(--muted); font-size: 9px; line-height: 1.5; }

@media (max-width: 1080px) {
  .fl-main-grid, .fl-revenue-grid { grid-template-columns: minmax(0, 1.7fr) minmax(210px, 1fr); }
  .fl-donut-wrap { grid-template-columns: 108px minmax(0, 1fr); gap: 10px; }
  .fl-donut { width: 108px; height: 108px; }
  .fl-donut::after { inset: 19px; }
  .fl-donut > span { inset: 26px; }
}
@media (max-width: 820px) {
  .fl-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-main-grid, .fl-revenue-grid { grid-template-columns: 1fr; }
  .fl-operations { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fl-metrics, .fl-watchlist { grid-template-columns: 1fr; }
  .fl-main-grid > .fl-panel { min-height: auto; }
  .fl-chart { height: 158px; }
  .fl-donut-wrap { grid-template-columns: 120px minmax(0, 1fr); }
  .fl-donut { width: 120px; height: 120px; }
}

/* Three Studio 108 color studies */
:root[data-theme="studio"] {
  --bg: #070d1d;
  --panel: #0e1729;
  --panel-2: #131f35;
  --field-bg: #091223;
  --sidebar-bg: #040918;
  --ink: #f5f7fb;
  --text: #f5f7fb;
  --muted: #8491a8;
  --line: #22304a;
  --line-strong: #344563;
  --accent: #13b7b4;
  --accent-dark: #0b9997;
  --accent-soft: #0d343d;
  --gold: #efbd55;
  --chart-grid: #1b2941;
  --shadow-sm: 0 10px 28px rgba(0, 3, 13, .26);
}
:root[data-theme="dark"] {
  --bg: #111315;
  --panel: #191c1f;
  --panel-2: #202428;
  --field-bg: #111416;
  --sidebar-bg: #0c0e10;
  --ink: #f4f1ea;
  --text: #f4f1ea;
  --muted: #8e969b;
  --line: #2d3236;
  --line-strong: #3a4044;
  --accent: #28aaa7;
  --accent-dark: #208d8a;
  --accent-soft: #183132;
  --gold: #e4b957;
  --chart-grid: #272c30;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .16);
}
:root[data-theme="light"] {
  --bg: #edf3f3;
  --panel: #ffffff;
  --panel-2: #f5f8f8;
  --field-bg: #ffffff;
  --sidebar-bg: #f8fbfb;
  --ink: #07142f;
  --text: #07142f;
  --muted: #69778a;
  --line: #dce6e6;
  --line-strong: #c6d5d5;
  --accent: #0caeaa;
  --accent-dark: #078b88;
  --accent-soft: #dcf3f1;
  --gold: #d9a83d;
  --chart-grid: #e8eeee;
  --shadow-sm: 0 8px 28px rgba(18, 55, 62, .07);
}

.brand > img {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  object-fit: cover;
}
.login-brand > img { width: 48px; height: 48px; border-radius: 13px; }
.theme-switcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.theme-switcher button {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  padding: 5px 2px;
  font-size: 7px;
}
.theme-switcher button:hover { background: var(--panel-2); color: var(--ink); }
.theme-switcher button.is-active { border-color: var(--line-strong); background: var(--panel-2); color: var(--ink); }
.theme-switcher i { width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.65); border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.theme-switcher [data-theme-choice="light"] i { background: linear-gradient(135deg, #fff 50%, #0caeaa 50%); }
.theme-switcher [data-theme-choice="studio"] i { background: linear-gradient(135deg, #07142f 38%, #13b7b4 38% 72%, #efbd55 72%); }

.sidebar { background: var(--sidebar-bg); border-color: var(--line); }
.nav { color: var(--muted); }
.nav.is-active, .nav:hover { background: var(--panel-2); color: var(--ink); }
.nav.is-active::before { background: var(--accent); border-color: var(--accent); }
.nav.is-active::after { background: var(--accent); }
.brand strong { color: var(--ink); }
.brand small { color: var(--gold); }

.fl-panel, .dashboard-metric, .today-panel, .card, .table-wrap, .shift-status, .shift-card,
.employee-form, .employee-add, .employee-item, .source-form, .source-item, .schedule-settings-card,
.schedule-row, .campaign-form, .campaign-card, .event-form, .event-card, .regulation-item,
.report-summary, .report-item, .dashboard-settings {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.fl-metrics .dashboard-metric:nth-child(1)::before { background: #62a5e8; }
.fl-metrics .dashboard-metric:nth-child(2)::before { background: var(--accent); }
.fl-metrics .dashboard-metric:nth-child(3)::before { background: var(--gold); }
.fl-metrics .dashboard-metric:nth-child(4)::before { background: #a97bdb; }
.fl-bars { border-color: var(--line-strong); background: repeating-linear-gradient(to bottom, var(--chart-grid) 0, var(--chart-grid) 1px, transparent 1px, transparent 33.33%); }
.fl-bars i, .fl-chart-revenue .fl-bars i { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, white), var(--accent)); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 18%, transparent); }
.fl-chart-revenue .fl-bars > div:last-child i { background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 75%, white), var(--gold)); }
.fl-funnel-list span i, .icon, .quick-links a, .quick-links span, .card-actions button,
.tabs button, .guard button, .guard a, .note, .parent-suggestions button, .option-editor button,
.add-option, .pagination select, .pagination .icon-button, .employee-item button, .source-actions button,
.schedule-settings-card button, .schedule-row button {
  background: var(--panel-2);
  border-color: var(--line-strong);
  color: var(--ink);
}
.fl-funnel-list > div:not(:last-child)::after { background: var(--line-strong); }
.fl-donut::after { background: var(--panel); }
.primary { background: var(--accent); }
.primary:hover { background: var(--accent-dark); }
input, select, textarea, .actions #search, .today-panel-actions input, .today-panel-actions select,
.today-panel-actions button, .today-panel-head > button, .login-card input {
  background-color: var(--field-bg);
  border-color: var(--line-strong);
  color: var(--ink);
}
.status { background: var(--accent-soft); color: var(--accent); }
.task-box, .pane, .remark-form, .pass-issuance { background: var(--panel-2); border-color: var(--line); }
th { background: var(--panel-2); color: var(--muted); }
tr:hover td { background: var(--panel-2); }
dialog, .login-card { background: var(--panel); border-color: var(--line); color: var(--ink); }
.login-view { background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%), var(--sidebar-bg); }

:root[data-theme="light"] .sidebar { box-shadow: inset -1px 0 var(--line); }
:root[data-theme="light"] .nav.is-active { background: var(--accent-soft); color: #087a77; }
:root[data-theme="light"] .sync-status.is-ok { color: #52706c; }
:root[data-theme="light"] .actions > button:not(.primary) { background: var(--panel); color: var(--ink); }
:root[data-theme="light"] .fl-chart-axis, :root[data-theme="light"] .fl-bars small { color: #7b8795; }
:root[data-theme="light"] dialog::backdrop { background: rgba(5, 20, 33, .34); }
:root[data-theme="light"] .card:hover {
  border-color: #b8cccc;
  background: #f8fbfb;
  box-shadow: 0 8px 22px rgba(18, 55, 62, .09);
}
:root[data-theme="light"] .stats article:hover,
:root[data-theme="light"] .stats article.is-active {
  border-color: #b8d7d7;
  background: #eaf5f5;
  color: #07142f;
  box-shadow: inset 0 -2px 0 var(--accent), 0 7px 20px rgba(18, 55, 62, .08);
}
:root[data-theme="light"] .stats article:hover span,
:root[data-theme="light"] .stats article.is-active span { color: #587178; }
:root[data-theme="light"] .stats article:hover strong,
:root[data-theme="light"] .stats article.is-active strong { color: #07142f; }
:root[data-theme="light"] .close {
  border: 1px solid #d4e2e2;
  background: #edf5f4;
  color: #4f6e6c;
}
:root[data-theme="light"] .close:hover { background: #dff0ee; color: #087a77; }
:root[data-theme="light"] select {
  color-scheme: light;
  accent-color: #0caeaa;
}
:root[data-theme="light"] select option {
  background: #ffffff;
  color: #07142f;
}
:root[data-theme="light"] select option:checked {
  background: linear-gradient(#dff3f2, #dff3f2);
  color: #076e6b;
  font-weight: 700;
}

/* Report surfaces follow the selected theme instead of keeping legacy white fills. */
.report-summary article,
.employee-stats-table,
.source-stats-table,
.campaign-report-table,
.source-stats-detail,
.campaign-stats-detail,
.report-item {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}
.employee-stats-row.is-head,
.source-stats-row.is-head,
.campaign-report-row.is-head,
.source-stats-row.is-total,
.report-previous-note,
.campaign-stats-detail {
  background: var(--panel-2);
  border-color: var(--line);
  color: var(--ink);
}
.report-item.is-missed {
  background: color-mix(in srgb, var(--danger) 7%, var(--panel));
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
}
.report-item.is-processed {
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}
.report-item.is-info {
  background: color-mix(in srgb, #62a5e8 6%, var(--panel));
  border-color: color-mix(in srgb, #62a5e8 42%, var(--line));
}
.source-stat-button,
.campaign-report-button {
  color: var(--ink);
}
.source-stat-button:not(:disabled):hover,
.source-stat-button.is-active,
.campaign-report-button:hover,
.campaign-report-button.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.source-stats-detail button,
.campaign-stats-detail button {
  background: var(--panel);
  border-color: var(--line-strong);
  color: var(--ink);
}
.pass-issuance,
.debt-payment-form {
  background: var(--panel-2);
  border-color: var(--line);
  color: var(--ink);
}
.pass-summary article,
.pass-card,
.pass-details,
.pass-loading,
.pass-empty {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}
.pass-summary article.has-debt,
.pass-details.has-debt {
  background: color-mix(in srgb, var(--danger) 7%, var(--panel));
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
}
.pass-summary article.account-balance {
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}
.pass-summary article.bonus-balance {
  background: color-mix(in srgb, var(--gold) 8%, var(--panel));
  border-color: color-mix(in srgb, var(--gold) 42%, var(--line));
}
.pass-form-grid input,
.pass-form-grid select,
.pass-form-grid textarea,
.debt-payment-grid input,
.debt-payment-grid select,
.debt-payment-grid textarea {
  background: var(--field-bg);
  border-color: var(--line-strong);
  color: var(--ink);
}
.pass-form-grid input[readonly],
.debt-payment-grid input[readonly],
.pass-table-wrap th {
  background: var(--panel-2);
  color: var(--muted);
}
.pass-table-wrap td { color: var(--ink); }
.pass-status { background: var(--accent-soft); color: var(--accent); }

@media (max-width: 900px) {
  .theme-switcher { display: flex; }
  .theme-switcher button { width: 34px; min-height: 32px; }
  .theme-switcher button span { display: none; }
}

/* Final mobile layout: later desktop theme rules must not restore the sidebar column. */
@media (max-width: 900px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .app, .app.is-dashboard {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px 10px 7px;
  }
  .sidebar .brand { grid-column: 1; min-width: 0; }
  .sidebar .theme-switcher { grid-column: 2; justify-content: end; }
  .sidebar nav {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px 0 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .sidebar .nav {
    flex: 0 0 auto;
    width: auto;
    min-height: 34px;
    margin-top: 0;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    white-space: nowrap;
  }
  .sidebar .nav::before, .sidebar .nav::after { display: none; }
  main, .app.is-dashboard main {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 10px 10px 32px;
  }
}

/* Client cards and profile — Studio 108 */
.cards {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}
.client-compact-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border-top: 3px solid var(--accent);
  color: var(--ink);
}
.client-compact-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
}
.client-compact-head,
.client-compact-head-tools,
.client-compact-phone,
.client-compact-actions,
.client-profile-header,
.client-profile-head-actions,
.client-profile-side-title,
.client-profile-contact-actions {
  display: flex;
  align-items: center;
}
.client-compact-head { align-items: flex-start; justify-content: space-between; gap: 12px; }
.client-compact-identity { min-width: 0; }
.client-compact-identity h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.22;
}
.client-compact-number {
  color: var(--gold);
  font-size: 13px;
  font-weight: 850;
}
.client-compact-head-tools { justify-content: flex-end; gap: 7px; }
.client-compact-head-tools .status {
  max-width: 150px;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
}
.client-compact-head-tools .group-check-button {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
}
.client-compact-phone { flex-wrap: wrap; gap: 7px; }
.client-phone-value {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}
.client-phone-value.is-empty, .client-extra-phone { color: var(--muted); font-size: 13px; }
.client-phone-call {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}
.client-compact-messengers { min-height: 34px; }
.client-compact-messengers a,
.client-compact-messengers span { min-width: 36px; height: 34px; }
.client-compact-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--panel-2);
}
.client-compact-action div { display: grid; gap: 3px; min-width: 0; }
.client-compact-action small,
.client-compact-meta small,
.client-compact-direction span,
.client-compact-pinned small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.client-compact-action strong,
.client-compact-meta strong,
.client-compact-direction strong { color: var(--ink); font-size: 14px; }
.client-compact-action time {
  white-space: nowrap;
  color: var(--accent);
  font-size: 13px;
  font-weight: 850;
}
.client-compact-action time.is-overdue { color: var(--danger); }
.client-compact-action time.is-today { color: var(--gold); }
.client-compact-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.client-compact-meta > div,
.client-compact-direction {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.client-compact-pinned {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--gold) 52%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--gold) 9%, var(--panel));
}
.client-compact-pinned small { color: var(--gold); }
.client-compact-pinned span {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.client-compact-actions { justify-content: flex-end; gap: 8px; margin-top: auto; }
.client-compact-actions button {
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--ink);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
}
.client-compact-actions button:first-child {
  flex: 1 1 auto;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.client-compact-actions .client-edit-button {
  flex: 0 0 42px;
  width: 42px;
  padding: 0;
  color: var(--accent);
  font-size: 20px;
}
:root[data-theme="light"] .client-compact-card:hover {
  background: #f4fbfa;
  color: #07142f;
}
:root[data-theme="light"] .client-compact-actions button:hover,
:root[data-theme="light"] .client-phone-call:hover {
  background: #e2f4f2;
  color: #087a77;
}
:root[data-theme="light"] .client-compact-actions button:first-child:hover {
  background: #078b88;
  color: #fff;
}

dialog:has(.client-profile) {
  width: min(1180px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
}
.client-profile {
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 14px;
  padding: 22px;
  font-size: 15px;
}
.client-profile > .client-profile-header,
.client-profile > .directory-readonly-banner,
.client-profile > .client-profile-strip { grid-column: 1 / -1; }
.client-profile > .client-profile-next,
.client-profile > .tabs,
.client-profile > .pane,
.client-profile > .delete-zone { grid-column: 1; }
.client-profile-header {
  min-width: 0;
  gap: 13px;
  padding-right: 42px;
}
.client-profile-avatar {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #07142f));
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .04em;
}
.client-profile-identity { min-width: 0; flex: 1; }
.client-profile-identity p,
.client-profile-identity h2,
.client-profile-identity span { margin: 0; }
.client-profile-identity p {
  color: var(--gold);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.client-profile-identity h2 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 25px;
  line-height: 1.2;
}
.client-profile-identity span { color: var(--muted); font-size: 13px; }
.client-profile-head-actions { gap: 8px; margin-left: auto; }
.client-profile-head-actions .status { font-size: 12px; }
.client-profile-edit { min-height: 38px; padding: 0 15px; }
.client-profile-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel-2);
}
.client-profile-strip > div { min-width: 0; display: grid; gap: 4px; padding: 11px 13px; }
.client-profile-strip > div + div { border-left: 1px solid var(--line); }
.client-profile-strip small,
.client-profile-next small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.client-profile-strip strong { overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; }
.client-profile-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-left: 4px solid var(--accent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
.client-profile-next div { min-width: 0; display: grid; gap: 3px; }
.client-profile-next strong { color: var(--ink); font-size: 16px; }
.client-profile-next span { color: var(--muted); font-size: 13px; }
.client-profile-next time { color: var(--accent); font-size: 14px; font-weight: 850; white-space: nowrap; }
.client-profile > .tabs { margin-top: 1px; }
.client-profile > .pane {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.client-profile > .pane[data-pane="summary"].is-visible {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}
.client-profile > .pane[data-pane="summary"] > p,
.client-profile > .pane[data-pane="summary"] > .family-links,
.client-profile > .pane[data-pane="summary"] > .social-summary {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.client-profile > .pane[data-pane="summary"] .pinned-notes { grid-column: 1 / -1; }
.client-profile-side {
  grid-column: 2;
  grid-row: 4 / span 20;
  display: grid;
  align-self: start;
  gap: 10px;
}
.client-profile-side > section {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-2);
}
.client-profile-side h3 { margin: 0 0 10px; color: var(--ink); font-size: 14px; }
.client-profile-contact-actions { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.client-profile-call {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.client-profile-pinned {
  border-color: color-mix(in srgb, var(--gold) 52%, var(--line)) !important;
  background: color-mix(in srgb, var(--gold) 9%, var(--panel)) !important;
}
.client-profile-pinned h3 { color: var(--gold); }
.client-profile-pinned p { margin: 0; color: var(--ink); line-height: 1.45; }
.client-profile-pinned small,
.client-profile-empty { color: var(--muted); font-size: 12px; }
.client-profile-side-title { justify-content: space-between; gap: 8px; }
.client-profile-side-title h3 { margin: 0; }
.client-profile-side-title button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}
.client-profile-groups { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.client-profile-groups li { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.client-profile-groups span { color: var(--muted); font-size: 12px; }
.client-profile-timeline { display: grid; }
.client-profile-timeline article {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 8px;
  padding-bottom: 11px;
}
.client-profile-timeline article:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}
.client-profile-timeline i {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border: 2px solid var(--panel-2);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.client-profile-timeline p { margin: 0 0 3px; color: var(--ink); font-size: 13px; line-height: 1.35; }
.client-profile-timeline small { color: var(--muted); font-size: 11px; }
.client-profile input,
.client-profile select,
.client-profile textarea { font-size: 14px; }
.client-profile label { font-size: 13px; }
.client-profile button:focus-visible,
.client-profile a:focus-visible,
.client-compact-card button:focus-visible,
.client-compact-card a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 36%, transparent);
  outline-offset: 2px;
}
:root[data-theme="light"] .client-profile .tabs button:hover,
:root[data-theme="light"] .client-profile-side button:hover {
  background: #e2f4f2;
  color: #087a77;
}
:root[data-theme="light"] .client-profile .tabs button.is-active {
  background: #d9f1ef;
  color: #076e6b;
}

@media (max-width: 1050px) {
  .cards { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
  .client-profile { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; }
  dialog:has(.client-profile) { width: min(100vw - 12px, 720px); max-height: calc(100dvh - 12px); }
  .client-profile { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .client-profile > *,
  .client-profile-side { grid-column: 1 !important; grid-row: auto !important; }
  .client-profile > .client-profile-header { order: 1; }
  .client-profile > .directory-readonly-banner { order: 2; }
  .client-profile > .client-profile-strip { order: 3; }
  .client-profile > .client-profile-next { order: 4; }
  .client-profile-side { display: contents; }
  .client-profile-side > .client-profile-pinned-block { order: 5; }
  .client-profile-side > .client-profile-history-block { order: 6; }
  .client-profile > .tabs { order: 7; }
  .client-profile > .pane { order: 8; }
  .client-profile-side > .client-profile-contacts-block { order: 9; }
  .client-profile-side > .client-profile-groups-block { order: 10; }
  .client-profile > .delete-zone { order: 11; }
  .client-profile-header { align-items: flex-start; flex-wrap: wrap; padding-right: 38px; }
  .client-profile-head-actions { width: 100%; margin-left: 65px; justify-content: flex-start; }
  .client-profile-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-profile-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .client-profile-strip > div:nth-child(4) { border-top: 1px solid var(--line); }
  .client-profile > .pane[data-pane="summary"].is-visible { grid-template-columns: 1fr; }
  .client-profile-next { align-items: flex-start; flex-direction: column; }
}