:root {
  --ink: #2d2330;
  --muted: #7c6f7c;
  --line: #eadfe7;
  --surface: #ffffff;
  --canvas: #fbf7f9;
  --pink: #e85d75;
  --pink-dark: #bd3d59;
  --rose: #fff0f2;
  --purple: #6a4a72;
  --green: #2f916d;
  --orange: #c77d32;
  --shadow: 0 14px 42px rgba(82, 45, 70, .08);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; min-width: 320px; overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.2rem, 2vw, 1.65rem); letter-spacing: -.03em; }
h2 { font-size: 1.25rem; letter-spacing: -.02em; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { color: var(--pink-dark); font-size: .68rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.brand-mark { align-items: center; background: linear-gradient(135deg, var(--pink), #f4a3af); border-radius: 18px; color: white; display: flex; font-size: 1.15rem; font-weight: 900; height: 58px; justify-content: center; letter-spacing: -.07em; width: 58px; }
.brand-mark.small { border-radius: 12px; font-size: .85rem; height: 42px; width: 42px; }

.login-shell { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: 24px; }
.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); max-width: 430px; padding: 42px; width: 100%; }
.login-card .brand-mark { margin-bottom: 28px; }
.login-card h1 { font-size: 2rem; margin: 8px 0; }
.login-card .muted { line-height: 1.6; margin-bottom: 28px; }
.stack-form { display: grid; gap: 16px; }
.login-hint { color: var(--muted); font-size: .77rem; line-height: 1.5; margin-top: 18px; }
code { background: #f6eef3; border-radius: 5px; padding: 2px 5px; }

.app-shell { margin: auto; max-width: 1480px; padding: 28px 34px calc(54px + env(safe-area-inset-bottom)); }
.topbar, .brand-area, .topbar-actions, .section-heading, .toolbar, .toolbar-actions, .modal-header, .modal-footer { align-items: center; display: flex; }
.topbar { justify-content: space-between; margin-bottom: 30px; }
.brand-area { gap: 13px; }
.brand-area h1 { margin-top: 4px; }
.topbar-actions, .toolbar-actions { gap: 10px; }
.user-pill { background: var(--rose); border-radius: 99px; color: var(--pink-dark); font-size: .8rem; padding: 9px 13px; }
.button { align-items: center; border: 1px solid transparent; border-radius: 11px; display: inline-flex; font-size: .85rem; font-weight: 750; gap: 6px; justify-content: center; min-height: 40px; padding: 0 14px; transition: all .16s ease; }
.button:disabled { cursor: not-allowed; opacity: .5; }
.button.primary { background: var(--pink); box-shadow: 0 5px 15px rgba(232, 93, 117, .22); color: white; }
.button.primary:hover { background: var(--pink-dark); transform: translateY(-1px); }
.button.agent-button { background: #332b59; box-shadow: 0 5px 15px rgba(51, 43, 89, .18); color: white; }
.button.agent-button:hover { background: #514385; transform: translateY(-1px); }
.button.ghost { background: white; border-color: var(--line); color: var(--purple); }
.button.ghost:hover { background: #fff6f8; border-color: #e9b8c2; }
.button.danger { background: #fff2f1; border-color: #f2c6c0; color: #b94d42; }
.button.full-width { width: 100%; }
.icon-button { background: transparent; border: 0; color: var(--muted); font-size: 1.7rem; line-height: 1; padding: 4px 8px; }
.spacer { flex: 1; }

.stats-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); margin-bottom: 22px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 19px; box-shadow: 0 5px 20px rgba(82, 45, 70, .03); padding: 19px; }
.stat-card .stat-value { font-size: 1.8rem; font-weight: 850; letter-spacing: -.05em; margin-top: 10px; }
.stat-card .stat-note { color: var(--muted); font-size: .78rem; margin-top: 5px; }
.stat-card.accent { background: linear-gradient(135deg, #fff0f3, #fff9f8); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 5px 20px rgba(82, 45, 70, .03); }
.filters-panel { padding: 22px; }
.section-heading { justify-content: space-between; margin-bottom: 21px; }
.section-heading h2 { margin-top: 4px; }
.smart-filter-box { background: linear-gradient(135deg, #fff8fa, #fff); border: 1px solid #f0dce3; border-radius: 16px; display: block; margin-bottom: 20px; overflow: hidden; }
.smart-filter-summary { align-items: center; cursor: pointer; display: flex; gap: 16px; justify-content: space-between; list-style: none; padding: 16px 17px; }
.smart-filter-summary::-webkit-details-marker { display: none; }
.smart-filter-summary:hover { background: rgba(255, 240, 244, .55); }
.smart-filter-summary h3 { font-size: .95rem; margin-top: 4px; }
.smart-filter-summary .muted { font-size: .74rem; margin-top: 5px; }
.smart-summary-side { align-items: flex-end; display: flex; flex-direction: column; gap: 4px; }
.summary-open-label { color: var(--purple); font-size: .7rem; font-weight: 800; }
.smart-filter-body { border-top: 1px solid #f0dce3; display: grid; gap: 14px; padding: 15px 17px 17px; }
.smart-filter-heading { align-items: end; display: grid; gap: 15px; grid-template-columns: 1fr 220px auto; }
.smart-filter-heading h3, .saved-segments-header h3 { font-size: .95rem; margin-top: 4px; }
.smart-filter-heading .muted { font-size: .76rem; margin-top: 6px; }
.logic-field { min-width: 200px; }
.smart-match-count { color: var(--pink-dark); font-size: .9rem; font-weight: 850; white-space: nowrap; }
.smart-presets { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.smart-presets > span { color: var(--muted); font-size: .7rem; font-weight: 800; margin-right: 2px; }
.preset-button { background: #fff; border: 1px solid #efd6de; border-radius: 99px; color: var(--purple); font-size: .7rem; font-weight: 750; padding: 7px 10px; }
.preset-button:hover { background: var(--rose); border-color: #df8798; color: var(--pink-dark); }
.ai-filter-box, .ai-settings-box, .sms-settings-box { background: #fff; border: 1px solid #eadfe7; border-radius: 13px; display: grid; gap: 9px; padding: 12px; }
.sms-settings-box { background: #f7fbff; border-color: #dceaf5; }
.ai-filter-box strong, .ai-settings-box h3 { font-size: .8rem; }
.ai-filter-box .muted, .ai-settings-box .muted { font-size: .7rem; margin-top: 4px; }
.ai-filter-row { align-items: center; display: flex; gap: 8px; }
.ai-filter-row input { flex: 1; }
.ai-settings-actions { align-items: center; display: flex; gap: 9px; }
.smart-rules { display: grid; gap: 9px; }
.smart-empty { background: #fff; border: 1px dashed #e6cbd3; border-radius: 11px; color: var(--muted); font-size: .78rem; padding: 13px; }
.smart-rule { align-items: center; background: white; border: 1px solid var(--line); border-radius: 11px; display: grid; gap: 9px; grid-template-columns: 27px minmax(145px, 1fr) minmax(155px, 1fr) minmax(180px, 1.3fr) 28px; padding: 8px; }
.rule-number { color: var(--muted); font-size: .75rem; font-weight: 800; text-align: center; }
.rule-value { min-width: 0; }
.rule-value .rule-no-value { align-items: center; color: var(--muted); display: flex; font-size: .75rem; height: 40px; padding: 0 11px; }
.rule-range { align-items: center; display: flex; gap: 6px; }
.rule-range input { min-width: 0; }
.rule-value select[multiple] { min-height: 78px; }
.tag-value { display: grid; gap: 6px; }
.tag-options { display: flex; flex-wrap: wrap; gap: 4px; max-height: 40px; overflow: hidden; }
.tag-choice { background: #f6f0f4; border: 0; border-radius: 99px; color: var(--purple); cursor: pointer; font-size: .64rem; padding: 4px 7px; }
.tag-choice:hover { background: var(--rose); color: var(--pink-dark); }
.tag-suggestions { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-suggestions:empty { display: none; }
.tag-suggestion { background: #f6f0f4; border: 0; border-radius: 99px; color: var(--purple); cursor: pointer; font-size: .66rem; padding: 5px 8px; }
.tag-suggestion:hover { background: var(--rose); color: var(--pink-dark); }
.smart-actions, .saved-segments-header, .saved-segment, .saved-segment-actions { align-items: center; display: flex; gap: 9px; }
.smart-actions { flex-wrap: wrap; }
.smart-actions input { max-width: 260px; }
.segment-save-note { display: flex; }
.segment-save-note input { max-width: 520px; }
.saved-segments-header { border-top: 1px solid #f0e8ee; justify-content: space-between; padding-top: 14px; }
.saved-segments-list { display: grid; gap: 8px; }
.saved-segment { background: white; border: 1px solid var(--line); border-radius: 11px; justify-content: space-between; padding: 10px 12px; }
.saved-segment.active { border-color: #df8495; box-shadow: 0 0 0 2px rgba(232, 93, 117, .1); }
.saved-segment strong { font-size: .82rem; }
.saved-segment .muted { font-size: .72rem; margin-top: 4px; }
.saved-segment-actions { flex-wrap: wrap; justify-content: flex-end; }
.quick-filter-details { border-top: 1px solid #f0e8ee; margin-top: 2px; padding-top: 14px; }
.quick-filter-details summary { color: var(--purple); cursor: pointer; font-size: .78rem; font-weight: 800; list-style: none; }
.quick-filter-details summary::-webkit-details-marker { display: none; }
.quick-filter-details summary span { color: var(--muted); font-weight: 500; margin-left: 7px; }
.quick-filter-details[open] summary { margin-bottom: 14px; }
.service-history { border: 1px solid #eee1e8; border-radius: 12px; overflow: hidden; }
.service-history h3 { background: #fff8fa; font-size: .82rem; padding: 11px 13px; }
.history-list { display: grid; gap: 0; }
.history-item { align-items: center; border-top: 1px solid #f1e8ee; display: grid; gap: 10px; grid-template-columns: 1fr auto; padding: 10px 13px; }
.history-item:first-child { border-top: 0; }
.history-main strong { font-size: .78rem; }
.history-main p, .history-meta { color: var(--muted); font-size: .7rem; margin-top: 3px; }
.history-meta { text-align: right; }
.history-source { font-size: .65rem; }
.filters-grid { align-items: end; display: grid; gap: 13px; grid-template-columns: 1.55fr repeat(5, minmax(115px, 1fr)) auto; }
label { color: #5f4f5e; display: grid; font-size: .77rem; font-weight: 750; gap: 7px; }
input, select, textarea { background: #fff; border: 1px solid #dfd3dd; border-radius: 10px; color: var(--ink); outline: none; padding: 10px 11px; transition: border-color .15s, box-shadow .15s; width: 100%; }
input, select { height: 40px; }
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #dd8193; box-shadow: 0 0 0 3px rgba(232, 93, 117, .11); }
.filter-actions { display: flex; gap: 7px; }
.toolbar { justify-content: space-between; padding: 21px 3px 13px; }
.toolbar-actions { flex-wrap: wrap; }
.column-control { position: relative; }
.column-menu { background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); display: grid; gap: 8px; min-width: 190px; padding: 12px; position: absolute; right: 0; top: 46px; z-index: 10; }
.column-menu strong { color: var(--purple); font-size: .75rem; }
.column-menu label { align-items: center; display: flex; flex-direction: row; font-size: .72rem; font-weight: 600; gap: 7px; }
.column-menu input { height: auto; width: auto; }
.note-preview-list { display: grid; gap: 3px; min-width: 150px; }
.note-preview { color: #685365; display: block; font-size: .72rem; line-height: 1.35; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-preview strong { color: var(--purple); font-size: .66rem; }
.customer-list-view { display: grid; gap: 9px; }
.customer-list-item { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 4px 14px rgba(82, 45, 70, .04); cursor: pointer; display: flex; gap: 13px; justify-content: space-between; padding: 13px 14px; }
.customer-list-item:hover { border-color: #e8a3b0; }
.list-item-main { min-width: 0; }
.list-item-heading { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.list-item-heading strong { font-size: .9rem; }
.list-item-contact, .list-item-service, .list-item-meta { color: var(--muted); font-size: .74rem; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item-service { color: #685365; }
.list-item-meta-row { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.list-item-meta-row .list-item-meta { margin-top: 0; }
.list-item-tags { margin-top: 7px; min-height: 22px; }
.list-item-notes { margin-top: 7px; max-width: 600px; }
.list-item-side { align-items: flex-end; display: grid; flex: 0 0 auto; gap: 8px; }
.quick-status { font-size: .72rem; height: 34px; min-width: 128px; padding: 5px 8px; }
.list-item-actions { display: flex; gap: 5px; }
.view-toggle { background: #f5edf2; border-radius: 11px; display: flex; padding: 3px; }
.view-button { background: transparent; border: 0; border-radius: 8px; color: var(--muted); font-size: .78rem; font-weight: 750; padding: 8px 11px; }
.view-button.active { background: white; box-shadow: 0 2px 7px rgba(82, 45, 70, .08); color: var(--purple); }
.content-panel { overflow: hidden; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; min-width: 930px; width: 100%; }
th { background: #fcf8fa; color: var(--muted); font-size: .68rem; letter-spacing: .06em; padding: 14px 17px; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { border-top: 1px solid #f0e8ee; font-size: .84rem; padding: 14px 17px; vertical-align: middle; }
tr.customer-row { cursor: pointer; }
tr.customer-row:hover td { background: #fffafb; }
.customer-name { font-weight: 800; }
.customer-contact { color: var(--muted); font-size: .75rem; margin-top: 4px; }
.status-pill, .tag { border-radius: 99px; display: inline-flex; font-size: .7rem; font-weight: 800; padding: 6px 9px; white-space: nowrap; }
.loyalty-pill { border-radius: 99px; display: inline-flex; font-size: .66rem; font-weight: 800; padding: 5px 8px; white-space: nowrap; }
.loyalty-new { background: #f4eff4; color: #746175; }
.loyalty-returning { background: #e9f4ff; color: #3c78a5; }
.loyalty-loyal { background: #fff2dc; color: #a36c20; }
.loyalty-vip { background: #ffe8ec; color: #c34f67; }
.visit-badge { background: #fff0f2; border-radius: 99px; color: var(--pink-dark); display: inline-flex; font-size: .62rem; margin-left: 4px; padding: 3px 6px; vertical-align: middle; }
.visit-count { color: var(--pink-dark); display: block; font-size: 1.1rem; }
.status-lead { background: #f4eafe; color: #7852a5; }
.status-contacted { background: #e9f4ff; color: #3c78a5; }
.status-booked { background: #fff2dc; color: #a36c20; }
.status-completed { background: #e4f7ed; color: #2e8765; }
.status-follow_up { background: #ffe8ec; color: #c34f67; }
.tag { background: #f4eff4; color: #746175; font-size: .67rem; margin: 2px 3px 2px 0; }
.table-actions { display: flex; gap: 6px; }
.mini-button { background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--purple); font-size: .72rem; padding: 6px 8px; }
.mini-button:hover { background: var(--rose); }
.sms-button { color: #2d718f; }
.quick-tag-save { justify-self: start; margin-top: 1px; }
.empty-state { padding: 58px 22px; text-align: center; }
.empty-state h3 { margin: 10px 0 6px; }

.kanban-grid { display: grid; gap: 13px; grid-template-columns: repeat(5, minmax(190px, 1fr)); }
.kanban-column { background: #f7f1f5; border: 1px solid var(--line); border-radius: 17px; min-height: 350px; padding: 12px; }
.kanban-column.drag-over { background: #fff0f3; outline: 2px dashed #e79aaa; }
.kanban-column-header { align-items: center; display: flex; justify-content: space-between; padding: 4px 3px 12px; }
.kanban-column-header h3 { font-size: .83rem; }
.column-count { background: white; border-radius: 99px; color: var(--muted); font-size: .7rem; padding: 4px 7px; }
.kanban-list { display: grid; gap: 9px; }
.kanban-card { background: white; border: 1px solid #eadfe7; border-radius: 13px; box-shadow: 0 3px 9px rgba(82,45,70,.04); cursor: grab; padding: 13px; }
.kanban-card:active { cursor: grabbing; }
.kanban-card .customer-name { font-size: .84rem; }
.kanban-card .customer-contact { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-badges { align-items: center; display: flex; gap: 5px; margin-top: 8px; }
.kanban-card .card-footer { align-items: center; border-top: 1px solid #f2e9ef; display: flex; justify-content: space-between; margin-top: 11px; padding-top: 9px; }
.kanban-card .card-footer a { color: var(--pink-dark); font-size: .73rem; font-weight: 800; text-decoration: none; }
.kanban-card .follow-up { color: var(--orange); font-size: .68rem; }
.pagination { align-items: center; gap: 12px; justify-content: center; padding-top: 19px; }
.pagination span { color: var(--muted); font-size: .78rem; }

.modal-backdrop { align-items: center; background: rgba(45, 35, 48, .35); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 20; }
.modal-card { background: white; border-radius: 22px; box-shadow: 0 25px 80px rgba(45,35,48,.24); display: flex; flex-direction: column; max-height: min(900px, 94vh); max-width: 800px; overflow: hidden; width: 100%; }
.modal-header { flex: 0 0 auto; justify-content: space-between; margin-bottom: 0; padding: 20px 24px 15px; }
.modal-header h2 { margin-top: 4px; }
.modal-subtitle { color: var(--muted); font-size: .74rem; margin-top: 5px; }
.customer-form { display: grid; gap: 15px; min-height: 0; overflow: auto; padding: 0 24px 24px; }
.form-grid { display: grid; gap: 13px; }
.two-columns { grid-template-columns: repeat(2, 1fr); }
.notes-grid { display: grid; gap: 13px; grid-template-columns: repeat(3, 1fr); }
.modal-footer { background: rgba(255, 255, 255, .97); border-top: 1px solid #f0e8ee; bottom: 0; gap: 9px; margin: 0 -24px -24px; padding: 14px 24px max(14px, env(safe-area-inset-bottom)); position: sticky; z-index: 2; }
.customer-meta { background: #fbf7f9; border-radius: 10px; color: var(--muted); font-size: .72rem; padding: 10px 12px; }
.settings-card { max-width: 680px; }
.settings-form { gap: 10px; }
.settings-quickbar { align-items: center; background: linear-gradient(135deg, #fff5f7, #f8f5ff); border: 1px solid #eddde7; border-radius: 13px; display: flex; gap: 12px; justify-content: space-between; padding: 11px 13px; }
.settings-quickbar > div:first-child { display: grid; gap: 3px; }
.settings-quickbar strong { color: var(--purple); font-size: .79rem; }
.settings-quickbar span { color: var(--muted); font-size: .68rem; }
.settings-quickbar-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.settings-quickbar-actions .button { min-height: 35px; }
.settings-save-status { color: var(--muted); font-size: .7rem; }
.settings-section { background: #fff; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.settings-section + .settings-section { margin-top: 0; }
.settings-section > summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; list-style: none; padding: 12px 14px; }
.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary:hover { background: #fff8fa; }
.settings-section > summary span:first-child { display: grid; gap: 3px; }
.settings-section > summary strong { color: var(--purple); font-size: .8rem; }
.settings-section > summary small { color: var(--muted); font-size: .68rem; font-weight: 500; }
.settings-chevron { color: var(--muted); font-size: 1.1rem; transition: transform .15s ease; }
.settings-section[open] .settings-chevron { transform: rotate(180deg); }
.settings-section-body { border-top: 1px solid #f0e8ee; display: grid; gap: 11px; padding: 13px 14px 14px; }
.settings-section-heading { align-items: center; color: var(--purple); display: flex; font-size: .73rem; font-weight: 800; justify-content: space-between; }
.settings-section-body .ai-settings-box, .settings-section-body .sms-settings-box, .settings-section-body.import-box { border: 0; border-radius: 0; padding: 0; }
.agent-card { max-width: 720px; }
.agent-messages { background: #fbf7f9; border: 1px solid #f0e8ee; border-radius: 14px; display: grid; gap: 10px; max-height: min(52vh, 560px); min-height: 180px; overflow: auto; padding: 13px; }
.agent-message { border-radius: 12px; font-size: .8rem; line-height: 1.5; max-width: 92%; padding: 10px 12px; white-space: pre-wrap; }
.agent-message p { margin-top: 4px; }
.agent-message.assistant { background: white; border: 1px solid var(--line); justify-self: start; }
.agent-message.user { background: #332b59; color: white; justify-self: end; }
.agent-message.user strong { color: #f5dbe2; }
.agent-message strong { color: var(--purple); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.agent-pending { background: #fff8e9; border: 1px solid #ecd59b; border-radius: 12px; color: #6e5426; display: grid; gap: 8px; font-size: .77rem; padding: 11px 12px; }
.agent-pending strong { color: #8b631d; }
.agent-pending-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.agent-composer { border-top: 1px solid #f0e8ee; display: grid; gap: 8px; padding-top: 13px; }
.agent-composer textarea { min-height: 68px; resize: vertical; }
.agent-composer-footer { align-items: center; display: flex; gap: 9px; justify-content: space-between; }
.agent-composer-footer .muted { font-size: .69rem; }
.tag-manager-add { align-items: center; display: flex; gap: 8px; }
.tag-manager-add input { flex: 1; }
.sms-token-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.sms-token-button { background: white; border: 1px solid #cfe0ee; border-radius: 99px; color: #2d718f; font-size: .7rem; font-weight: 750; padding: 7px 10px; }
.sms-token-button:hover { background: #eef8ff; border-color: #8dbed5; }
.settings-tags-list { display: grid; gap: 7px; }
.settings-tag-row { align-items: center; background: #fbf7f9; border: 1px solid #f0e8ee; border-radius: 10px; display: flex; gap: 7px; padding: 7px 8px; }
.settings-tag-row input { background: white; flex: 1; height: 34px; padding: 7px 9px; }
.settings-tag-usage { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.settings-tag-row .mini-button { padding: 5px 7px; }
.import-box { background: #fff8fa; border: 1px dashed #e6b8c2; border-radius: 14px; display: grid; gap: 10px; padding: 16px; }
.import-box h3 { font-size: .95rem; }
.import-box input[type=file] { background: white; }
.event-list { border-top: 1px solid #f0e8ee; padding-top: 15px; }
.event-list h3 { font-size: .8rem; margin-bottom: 10px; }
.event-item { align-items: flex-start; display: flex; gap: 9px; padding: 6px 0; }
.event-dot { background: var(--pink); border-radius: 99px; flex: 0 0 7px; height: 7px; margin-top: 5px; }
.event-copy { color: var(--muted); font-size: .72rem; line-height: 1.45; }
.event-copy strong { color: var(--ink); }
.toast-region { display: grid; gap: 8px; pointer-events: none; position: fixed; right: 22px; top: 20px; z-index: 30; }
.toast { animation: toast-in .2s ease; background: #332632; border-radius: 11px; box-shadow: var(--shadow); color: white; font-size: .8rem; max-width: 340px; padding: 12px 15px; }
.toast.error { background: #a73e4b; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1300px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } .filters-grid { grid-template-columns: repeat(4, 1fr); } .search-field { grid-column: span 2; } .filter-actions { justify-content: flex-end; } .kanban-grid { grid-template-columns: repeat(3, 1fr); overflow-x: auto; } .smart-filter-heading { grid-template-columns: 1fr 200px; } .smart-match-count { grid-column: span 2; } }
@media (max-width: 760px) { .app-shell { padding: 18px 12px calc(34px + env(safe-area-inset-bottom)); } .topbar { align-items: flex-start; gap: 12px; margin-bottom: 18px; } .brand-area { gap: 9px; } .brand-area .brand-mark { height: 36px; width: 36px; } .brand-area h1 { font-size: 1.12rem; } .topbar-actions { align-items: flex-end; flex-direction: column; gap: 6px; } .topbar-actions .button { min-height: 34px; padding: 0 9px; } .user-pill { display: none; } .stats-grid { display: flex; gap: 9px; margin: 0 -12px 14px; max-width: calc(100vw - 24px); overflow-x: auto; padding: 0 12px 3px; scrollbar-width: none; width: calc(100vw - 24px); } .stats-grid::-webkit-scrollbar { display: none; } .stat-card { flex: 0 0 158px; padding: 13px; } .stat-card .stat-value { font-size: 1.45rem; margin-top: 7px; } .stat-card .stat-note { font-size: .68rem; line-height: 1.25; } .filters-panel { padding: 14px; } .section-heading { align-items: flex-start; gap: 10px; margin-bottom: 14px; } .section-heading h2 { font-size: 1.08rem; } .section-heading .button { min-height: 36px; padding: 0 10px; } .smart-filter-summary { align-items: flex-start; padding: 14px; } .smart-summary-side { align-items: flex-end; min-width: 75px; } .smart-match-count { font-size: .76rem; text-align: right; white-space: normal; } .summary-open-label { font-size: .64rem; } .smart-filter-body { padding: 12px 14px 14px; } .filters-grid { grid-template-columns: 1fr 1fr; } .search-field { grid-column: span 2; } .filter-actions { grid-column: span 2; justify-content: stretch; } .filter-actions .button { flex: 1; } .toolbar { align-items: flex-start; flex-direction: column; gap: 9px; padding: 13px 0 10px; } .toolbar-actions { justify-content: space-between; width: 100%; } .toolbar-actions .button { min-height: 36px; padding: 0 9px; } .view-toggle { margin-left: auto; } .view-button { font-size: .7rem; padding: 7px 8px; } .table-wrap { border-radius: 13px; } .customer-list-item { align-items: stretch; gap: 9px; padding: 12px; } .list-item-heading strong { font-size: .84rem; } .list-item-side { align-items: flex-end; } .quick-status { min-width: 110px; max-width: 125px; } .list-item-actions { flex-wrap: wrap; justify-content: flex-end; } .list-item-actions .mini-button { font-size: .68rem; padding: 6px 7px; } .kanban-grid { grid-template-columns: repeat(5, minmax(220px, 1fr)); overflow-x: auto; padding-bottom: 8px; } .two-columns, .notes-grid { grid-template-columns: 1fr; } .modal-card { border-radius: 18px; padding: 0; } .modal-header { padding: 17px 17px 13px; } .customer-form { padding: 0 17px 17px; } .modal-footer { flex-wrap: wrap; margin: 0 -17px -17px; padding-left: 17px; padding-right: 17px; } .smart-filter-heading { align-items: stretch; grid-template-columns: 1fr; } .smart-match-count { grid-column: auto; } .smart-rule { grid-template-columns: 25px 1fr 28px; } .smart-rule [data-part="field"], .smart-rule [data-part="operator"], .smart-rule .rule-value { grid-column: 2; } .smart-rule .rule-remove { grid-column: 3; grid-row: 1; } .smart-actions input, .segment-save-note input { max-width: none; } .smart-actions > input, .smart-actions > button, .segment-save-note { width: 100%; } .saved-segment { align-items: flex-start; flex-direction: column; } .saved-segment-actions { justify-content: flex-start; } .tag-manager-add { align-items: stretch; flex-direction: column; } .agent-composer-footer { align-items: stretch; flex-direction: column; } .agent-composer-footer .button { width: 100%; } }
@media (max-width: 470px) { .login-card { padding: 29px 22px; } .stats-grid { gap: 9px; } .stat-card { padding: 14px; } .stat-card .stat-value { font-size: 1.45rem; } .filters-grid { grid-template-columns: 1fr; } .search-field, .filter-actions { grid-column: auto; } .section-heading .button { min-height: 36px; padding: 0 9px; } }

@media (max-width: 760px) {
  #customer-modal { padding: 0; }
  #customer-modal .customer-modal-card { border-radius: 0; height: 100dvh; max-height: 100dvh; }
  .settings-quickbar { align-items: stretch; flex-direction: column; }
  .settings-quickbar-actions { justify-content: space-between; }
  .settings-quickbar-actions .button { flex: 1; }
}