/* Personal CRM appearance. Customer quotation/payment documents keep their
   original light palette; no image filters, remote assets or layout animation. */
:root {
  --appearance-page:#f5f8fc;
  --appearance-surface:#ffffff;
  --appearance-raised:#f1f5fc;
  --appearance-ink:#17324d;
  --appearance-muted:#5e7186;
  --appearance-line:#d7e1ef;
  --appearance-accent:#245ee9;
  --appearance-accent-soft:#eaf1ff;
  --appearance-focus:#356ef0;
  --appearance-background-overlay:rgba(242,247,253,.76);
  --appearance-panel:rgba(255,255,255,.95);
}
.appearance-toggle {
  width:40px;height:40px;min-width:40px;flex:0 0 40px;
  display:inline-grid;place-items:center;padding:9px;
  border:1px solid transparent;border-radius:10px;
  background:transparent;color:#536880;line-height:1;
}
.appearance-toggle svg {display:block;width:21px;height:21px;pointer-events:none;}
.appearance-toggle:hover,.appearance-toggle[aria-expanded="true"] {
  color:var(--appearance-accent);background:var(--appearance-accent-soft);
  border-color:var(--appearance-line);
}
.appearance-toggle:focus-visible,.appearance-dialog :is(button,input):focus-visible {
  outline:3px solid var(--appearance-focus);outline-offset:3px;
}
dialog.appearance-dialog {
  box-sizing:border-box;width:min(520px,calc(100vw - 28px));max-width:calc(100vw - 28px);
  max-height:calc(100dvh - 32px);margin:auto;padding:24px;
  border:1px solid var(--appearance-line);border-radius:18px;
  background:var(--appearance-surface);color:var(--appearance-ink);
  box-shadow:0 22px 72px #0b1f3f30;overflow:auto;
  font:14px/1.5 Manrope,Arial,sans-serif;
}
.appearance-dialog::backdrop {background:rgba(11,23,42,.48);}
.appearance-dialog [hidden] {display:none!important;}
.appearance-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;}
.appearance-dialog .appearance-heading h2 {margin:0;font-size:21px;line-height:1.35;letter-spacing:-.3px;color:inherit;}
.appearance-close {
  width:36px;height:36px;min-width:36px;display:grid;place-items:center;padding:6px;
  border:1px solid var(--appearance-line);border-radius:9px;
  color:var(--appearance-muted);background:var(--appearance-surface);font-size:23px;line-height:1;
}
.appearance-close:hover {color:var(--appearance-ink);background:var(--appearance-raised);}
.appearance-section {min-width:0;margin:0 0 22px;}
.appearance-dialog .appearance-section h3 {margin:0 0 10px;font-size:14px;line-height:1.4;color:inherit;}
.appearance-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.appearance-option,.appearance-background {
  min-width:0;min-height:44px;display:grid;gap:9px;padding:10px;
  border:1px solid var(--appearance-line);border-radius:11px;
  text-align:left;font-weight:700;color:var(--appearance-ink);background:var(--appearance-surface);
}
.appearance-option:hover,.appearance-background:hover {border-color:var(--appearance-accent);}
.appearance-option[aria-pressed="true"],.appearance-background[aria-pressed="true"] {
  border-color:var(--appearance-accent);box-shadow:0 0 0 2px var(--appearance-accent);
  background:var(--appearance-accent-soft);
}
.appearance-preview {
  position:relative;display:block;min-height:68px;overflow:hidden;
  border:1px solid #d6dfec;border-radius:6px;background:#f4f7fc;
}
.appearance-preview::before {content:"";position:absolute;inset:0 auto 0 0;width:23%;background:#fff;border-right:1px solid #d6dfec;}
.appearance-preview::after {content:"";position:absolute;left:30%;right:9%;top:15px;height:14px;border-radius:3px;background:#fff;box-shadow:0 23px 0 #fff;}
.appearance-option[data-theme="dark"] .appearance-preview {background:#101c2c;border-color:#3e506a;}
.appearance-option[data-theme="dark"] .appearance-preview::before {background:#1a2a3e;border-color:#3e506a;}
.appearance-option[data-theme="dark"] .appearance-preview::after {background:#29415d;box-shadow:0 23px 0 #29415d;}
.appearance-background-options {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;}
.appearance-background {padding:7px;gap:7px;font-size:11px;line-height:1.35;overflow-wrap:anywhere;}
.appearance-background-swatch {
  display:block;width:100%;aspect-ratio:1.4;min-height:45px;border-radius:6px;
  border:1px solid #8094ad55;background-color:#edf2fa;background-size:cover;background-position:center;
}
.appearance-background-swatch[data-background="none"] {background:linear-gradient(135deg,#fff 49%,#a3b2c6 49.5%,#a3b2c6 51%,#f3f6fb 51.5%);}
.appearance-background-swatch[data-background="hills"] {background:linear-gradient(155deg,transparent 48%,#86b7a0 49%,#86b7a0 63%,#407963 64%),linear-gradient(#b8dfee,#e9f2d9);}
.appearance-background-swatch[data-background="dusk"] {background:radial-gradient(circle at 72% 30%,#ffcf9a 0 12%,transparent 13%),linear-gradient(150deg,transparent 50%,#4a507f 51%,#292f59 75%),linear-gradient(#7896bf,#deb7bd);}
.appearance-background-swatch[data-background="custom"] {background-color:#e5edf8;background-image:linear-gradient(45deg,#d6e1f0 25%,transparent 25%),linear-gradient(-45deg,#d6e1f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d6e1f0 75%),linear-gradient(-45deg,transparent 75%,#d6e1f0 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;}
.appearance-upload {display:grid;gap:8px;margin-top:14px;min-width:0;}
.appearance-dialog .appearance-upload label {display:block;min-width:0;color:inherit;font-size:13px;font-weight:700;}
.appearance-dialog .appearance-upload input[type="file"] {
  box-sizing:border-box;width:100%;min-width:0;max-width:100%;padding:8px;
  border:1px dashed var(--appearance-line);border-radius:8px;
  background:var(--appearance-raised);color:var(--appearance-ink);font-size:12px;
}
.appearance-upload input::file-selector-button {
  min-height:34px;padding:7px 10px;margin-right:8px;border:1px solid var(--appearance-line);
  border-radius:6px;background:var(--appearance-surface);color:var(--appearance-ink);font:inherit;cursor:pointer;
}
.appearance-remove {
  justify-self:start;min-height:36px;margin-top:3px;padding:7px 2px;
  border:0;background:transparent;color:var(--appearance-accent);font-weight:700;text-align:left;
}
.appearance-remove:hover {text-decoration:underline;text-underline-offset:3px;}
.appearance-remove:disabled {opacity:.5;cursor:default;text-decoration:none;}
.appearance-dialog .appearance-note {margin:10px 0 0;color:var(--appearance-muted);font-size:12px;line-height:1.55;}
.appearance-status {display:block;min-height:18px;margin:8px 0 0;overflow-wrap:anywhere;color:var(--appearance-muted);font-size:12px;line-height:1.5;}
.appearance-status[data-error="true"],.appearance-status.error {color:#b03c31;}
.appearance-footer {display:flex;justify-content:flex-end;gap:10px;padding-top:16px;border-top:1px solid var(--appearance-line);}
.appearance-dialog .appearance-footer .outline {min-height:40px;padding:9px 18px;border-color:var(--appearance-line);background:var(--appearance-surface);color:var(--appearance-accent);}
.appearance-dialog [hidden] {display:none!important;}
@media screen {
  body.crm-has-background {isolation:isolate;background:transparent;}
  body.crm-has-background::before {
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-color:var(--appearance-page);
    background-image:linear-gradient(var(--appearance-background-overlay),var(--appearance-background-overlay)),var(--crm-background-image,none);
    background-position:center;background-size:cover;background-repeat:no-repeat;
  }
  body.crm-has-background :is(.panel,.stat,.lead-summary-card,.pipeline-customer-card,.team-card,.policy-card,.task-list,.table-wrap,.calendar,.q-card,.q-sheet-card,.fp-card,.tg-card) {background:var(--appearance-panel);}
  html[data-crm-theme="dark"] {
    color-scheme:dark;
    --green:#8fb7ff;--blue:#8fb7ff;--dark:#e9f1ff;--ink:#e4edf9;
    --muted:#a5b5c8;--line:#33465d;--soft:#17273a;--red:#ffaaa3;--amber:#f4c878;
    --appearance-page:#0f1928;--appearance-surface:#192638;--appearance-raised:#22344b;
    --appearance-ink:#e4edf9;--appearance-muted:#acbdd0;--appearance-line:#3c506b;
    --appearance-accent:#9bbfff;--appearance-accent-soft:#213b61;--appearance-focus:#a4c5ff;
    --appearance-background-overlay:rgba(10,20,34,.73);--appearance-panel:rgba(25,38,56,.95);
  }
  html[data-crm-theme="dark"] body {background-color:var(--appearance-page);color:var(--ink);}
  html[data-crm-theme="dark"] body.crm-has-background {background-color:transparent;}
  html[data-crm-theme="dark"] :is(.sidebar,main>header,dialog,.login-card,.panel,.stat,.lead-summary-card,.lead-card,.team-card,.policy-card,.task-list,.table-wrap,.pipeline-list-wrap,.pipeline-customer-card,.pipeline-empty,.day,.rules,.customer-options,.customer-option,.task-context-menu,.task-context-menu button,.zalo-message-option,.team-dashboard-modal-content) {
    background-color:var(--appearance-surface);color:var(--ink);border-color:var(--line);
  }
  html[data-crm-theme="dark"] :is(main>header,.sidebar-bottom,.lead-summary-card footer,.pipeline-details,.team-line,.activity-row,.task-row,.policy-actions,.consultation-history,.status-history,.lead-summary-card .lead-update-meta,.pipeline-customer-card footer) {border-color:var(--line);}
  html[data-crm-theme="dark"] :is(.brand,.login-brand,.signed-user strong,.panel h2,.hero h1,.card-open,.lead-open-button,.lead-inline-details b,.pipeline-details b,.pipeline-next b,.event-detail h2,.zalo-template-settings>strong,.customer-option,.team-dashboard-customer strong) {color:var(--ink);}
  html[data-crm-theme="dark"] :is(.muted,.eyebrow,.team-label,.signed-user small,.lead-phone,.lead-inline-details,.lead-summary-meta,.lead-summary-card header small,.lead-summary-card footer,.lead-consultation-preview,.pipeline-details,.pipeline-next,.pipeline-customer-card header small,.pipeline-list small,.lead-update-meta,.lead-filter-count,.field-note,.consultation-history p,.status-history p,.consultation-history small,.status-history small,.customer-option small,.policy-card .policy-content,.policy-card .policy-footer,.login-hint,.login-remember,.appearance-note) {color:var(--muted);}
  html[data-crm-theme="dark"] :is(input,select,textarea):not(.q-paper *):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
    background-color:#122033;color:var(--ink);border-color:#425874;caret-color:#b9d2ff;
  }
  html[data-crm-theme="dark"] :is(input,textarea):not(.q-paper *)::placeholder {color:#96a9c1;opacity:1;}
  html[data-crm-theme="dark"] input[readonly]:not(.q-paper *) {background:#223044;color:#b5c4d6;}
  html[data-crm-theme="dark"] :is(input,select,textarea,button):disabled:not(.q-paper *) {opacity:.62;}
  html[data-crm-theme="dark"] :is(.outline,.lead-stage-quick,.task-zalo,.pipeline-task,.pipeline-status-action,.pipeline-customer-card .pipeline-schedule,.followup-presets button,.customer-combobox>button,.calendar-toolbar button,.task-tabs button,.task-upcoming-toggle,.task-history-more,.task-care-toggle) {
    background:#1b304d;color:#a8caff;border-color:#425d83;
  }
  html[data-crm-theme="dark"] :is(.primary,.pipeline-complete,.task-tabs button.selected,.followup-presets button.selected,.lead-stage-quick.current) {background:#315fe4;color:#fff;border-color:#315fe4;}
  html[data-crm-theme="dark"] .primary:hover {background:#426ff0;}
  html[data-crm-theme="dark"] .sidebar nav a {color:#b7c5d8;}
  html[data-crm-theme="dark"] :is(.sidebar nav a.active,.sidebar nav a:hover,.dashboard-task:hover,.customer-option:hover,.task-context-menu button:hover,.zalo-message-option:hover,.zalo-message-option.selected) {background:#223d64;color:#b6d2ff;}
  html[data-crm-theme="dark"] :is(.avatar,.sidebar b,.stat-icon,.tg-avatar) {background:#243c61;color:#b6d2ff;}
  html[data-crm-theme="dark"] .bell {color:#c8d6e9;}
  html[data-crm-theme="dark"] .bell em {border-color:var(--appearance-surface);}
  html[data-crm-theme="dark"] :is(.appearance-toggle,.close,.appearance-close) {color:var(--appearance-muted);}
  html[data-crm-theme="dark"] :is(.status-panel,.pipeline-customer-card .pipeline-next,.followup-presets,.policy-latest,.policy-paste-zone,#lead-status-modal #status-bank-field,.vehicle-matching-field,.payment-schedule,.expected-payment-entry,.debt-facts,.debt-notes,.report-milestones) {background:#142b45;border-color:#3c5575;color:#c9d9ee;}
  html[data-crm-theme="dark"] :is(.status-panel h3,.policy-latest strong,.lead-edit-quick,.source-note-button,.task-name,.task-focus-title) {color:#b9d4ff;}
  html[data-crm-theme="dark"] :is(.lead-edit-quick,.event,.pill,.stage,.finance-type,.lead-temperature-badge,.lead-updated-today) {background:#233d60;color:#b9d4ff;}
  html[data-crm-theme="dark"] :is(.pill.warn,.stat:nth-child(3) .stat-icon,.finance-type.Hoa-hồng,.finance-type.Hoa-hồng-xe,.finance-type.Hoa-hồng-bảo-hiểm) {background:#45351e;color:#f6d294;}
  html[data-crm-theme="dark"] :is(.pill.red,.stat:nth-child(4) .stat-icon,.finance-type.Chi,.finance-type.Khoản-chi-khác,.stage-Mất-cơ-hội,.duplicate-alert,.delete-consultation) {background:#4a2a31;color:#ffb8b1;}
  html[data-crm-theme="dark"] :is(.login-error,.money.expense,.danger,.login-card .login-error,.appearance-status[data-error="true"],.appearance-status.error) {color:#ffb4aa;}
  html[data-crm-theme="dark"] :is(.money.income,.link-btn,.account-action,.notice button,.panel-head a,.source-note-button,.pipeline-schedule,.customer-option b) {color:#a3c7ff;}
  html[data-crm-theme="dark"] :is(th,td):not(.q-paper *) {border-color:var(--line);color:var(--ink);}
  html[data-crm-theme="dark"] th:not(.q-paper *) {background:#20344c;color:#bdcce0;}
  html[data-crm-theme="dark"] :is(.customer-row:hover td,.customer-row:focus td,.pipeline-list tr:hover td):not(.q-paper *) {background:#213651;}
  html[data-crm-theme="dark"] .lead-summary-card:hover {background:#1c2e45;border-color:#5a7daa;}
  html[data-crm-theme="dark"] .lead-summary-card header,html[data-crm-theme="dark"] .pipeline-customer-card>header {background:transparent;color:inherit;}
  html[data-crm-theme="dark"] .login-screen {background:radial-gradient(circle at 20% 20%,#1b365a,transparent 45%),#0f1928;}
  html[data-crm-theme="dark"] #auth-loading-screen {background:#0f1928;color:#e4edf9;}
  html[data-crm-theme="dark"] #auth-loading-message {color:#acbdd0;}
  html[data-crm-theme="dark"] .google-sync-notice {background:#3e321d;border-color:#796233;color:#f6db9b;}
  html[data-crm-theme="dark"] .google-sync-notice strong {color:#ffe5ac;}
  html[data-crm-theme="dark"] .google-sync-notice span {color:#e4cfaa;}
  html[data-crm-theme="dark"] .google-sync-notice button {background:#25364d;color:#f6db9b;border-color:#796233;}
  html[data-crm-theme="dark"] .vf-quotes {--q-ink:#e4edf9;--q-muted:#adbed2;--q-line:#40546c;--q-blue:#a5c6ff;color:var(--q-ink);}
  html[data-crm-theme="dark"] .vf-quotes :is(.q-card,.q-record,.q-option-card,.q-accessory,.q-bank,.q-sheet-card,.q-savebar,.q-manual-vehicle,.q-admin-options,.q-admin-fees,.q-qr-controls) {background-color:#192638;color:#e4edf9;border-color:#40546c;}
  html[data-crm-theme="dark"] .vf-quotes :is(button,.q-tabs button):not(.q-paper *) {background:#1c314d;color:#b5d0ff;border-color:#425b7c;}
  html[data-crm-theme="dark"] .vf-quotes :is(.q-primary,button.q-primary,.q-tabs button.active) {background:#315fe4;color:#fff;border-color:#315fe4;}
  html[data-crm-theme="dark"] .vf-quotes :is(.q-sheet-toolbar,.q-sheet-section,.q-sheet-meta,.q-sheet-extras,.q-sheet-calculated,.q-total,.q-note,.q-sheet-grand) {background:#213953;color:#d7e7ff;border-color:#40546c;}
  html[data-crm-theme="dark"] .vf-quotes .q-sheet-table:not(.q-program-table) tr>:first-child {background:#1b2b3e;color:#a9b9cc;}
  html[data-crm-theme="dark"] .vf-quotes :is(.q-cell-result,.q-cell-note,.q-sheet-help,.q-sheet-expression-status,.q-muted,.q-subheading,.q-status,.q-savebar>span) {color:#b8c9dd;}
  html[data-crm-theme="dark"] .vf-quotes .q-error {color:#ffb5ab;}
  html[data-crm-theme="dark"] .vf-quotes .q-payment-qr {background:#fff;}
  html[data-crm-theme="dark"] .vf-quotes .q-paper {color-scheme:light;background:#fff;color:#173148;border-color:#d0dbe8;}
  html[data-crm-theme="dark"] .vf-fanpage {--fp-ink:#e4edf9;--fp-muted:#aebdd1;--fp-line:#3d536d;--fp-blue:#315fe4;color:var(--fp-ink);}
  html[data-crm-theme="dark"] .vf-fanpage :is(.fp-card,.fp-manual,.fp-page-panel>summary,.fp-post,.fp-advanced) {background:#192638;color:#dfeafa;border-color:#3d536d;}
  html[data-crm-theme="dark"] .vf-fanpage :is(button,a,.fp-advanced summary) {color:#b4ceff;}
  html[data-crm-theme="dark"] .vf-fanpage button {background:#1d304a;border-color:#425b7c;}
  html[data-crm-theme="dark"] .vf-fanpage :is(.fp-primary,.fp-toggle[aria-checked="true"]) {background:#315fe4;color:#fff;border-color:#315fe4;}
  html[data-crm-theme="dark"] .vf-fanpage :is(.fp-note,.fp-automation) {background:#20354c;color:#c4d9f6;border-color:#3d587c;}
  html[data-crm-theme="dark"] .vf-fanpage .fp-badge {background:#253e64;color:#bcd4ff;}
  html[data-crm-theme="dark"] .vf-fanpage .fp-error {color:#ffb5ab;}
  html[data-crm-theme="dark"] #page-telegram .tg-page {color:#e4edf9;}
  html[data-crm-theme="dark"] #page-telegram :is(.tg-card,.tg-pending,.tg-linked,.tg-admin,.tg-missing) {background:#192638;color:#e4edf9;border-color:#3b526d;}
  html[data-crm-theme="dark"] #page-telegram :is(.tg-button,.tg-button-secondary,.tg-step-number,.tg-status,.tg-admin-tag) {background:#203851;color:#b6d3ff;border-color:#486280;}
  html[data-crm-theme="dark"] #page-telegram .tg-button-primary {background:#315fe4;color:#fff;border-color:#315fe4;}
  html[data-crm-theme="dark"] #page-telegram :is(.tg-subtitle,.tg-muted,.tg-small,.tg-privacy,.tg-eyebrow,.tg-footer,.tg-server dt,.tg-steps p) {color:#acbdd0;}
  html[data-crm-theme="dark"] #page-telegram :is(.tg-notice,.tg-status-linked) {background:#203c43;color:#b7eee0;border-color:#476969;}
  html[data-crm-theme="dark"] #page-telegram :is(.tg-notice-error,.tg-status-error,.tg-button-danger) {background:#4a2c35;color:#ffc0b8;border-color:#80545b;}
  html[data-crm-theme="dark"] .lp-admin {color:#e4edf9;}
  html[data-crm-theme="dark"] .lp-admin :is(.lp-package,.lp-empty,.lp-savebar,.lp-intro,.lp-conflict) {background:#192638;color:#dce8f8;border-color:#3d536f;}
  html[data-crm-theme="dark"] .lp-admin :is(h2,h3) {color:#dce8f8;}
  html[data-crm-theme="dark"] .lp-admin :is(p,small,.lp-package-id,.lp-status,.lp-savebar span,.lp-method-note,.lp-backup) {color:#adbed2;}
  html[data-crm-theme="dark"] .lp-admin button {background:#1e3450;border-color:#425d7f;color:#b8d1ff;}
  html[data-crm-theme="dark"] .lp-admin .lp-primary {background:#315fe4;color:#fff;}
  html[data-crm-theme="dark"] :is(dialog,.appearance-dialog)::backdrop {background:rgba(3,10,20,.68);}
  html[data-crm-theme="dark"] body.crm-has-background :is(.panel,.stat,.lead-summary-card,.pipeline-customer-card,.team-card,.policy-card,.task-list,.table-wrap,.calendar,.q-card,.q-sheet-card,.fp-card,.tg-card) {background-color:var(--appearance-panel);}
}
@media(max-width:620px) {
  main>header {gap:10px;padding-left:16px;padding-right:16px;min-width:0;}
  main>header>span {flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  main>header>div {gap:7px;flex:0 0 auto;}
  .appearance-toggle {width:38px;height:38px;min-width:38px;flex-basis:38px;}
  dialog.appearance-dialog {width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:19px;border-radius:14px;}
  .appearance-heading {margin-bottom:18px;}
  .appearance-background-options {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .appearance-background-swatch {aspect-ratio:2.5;}
}
@media(prefers-reduced-motion:reduce) {
  .appearance-toggle,.appearance-dialog,.appearance-dialog * {animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}
@media print {
  .appearance-toggle,.appearance-dialog,body.crm-has-background::before {display:none!important;}
  body.crm-has-background {background:#fff;}
}