:root {
  --teal-950: #073b38;
  --teal-900: #084c47;
  --teal-800: #0d5f56;
  --teal-700: #0f766e;
  --teal-600: #0d9488;
  --teal-500: #14a99a;
  --teal-300: #72d8cb;
  --teal-200: #a8e8df;
  --teal-100: #dff6f1;
  --teal-50: #effbf8;
  --ink-950: #142321;
  --ink-900: #1b2e2b;
  --ink-800: #29413d;
  --ink-700: #3c5651;
  --ink-600: #5f7570;
  --ink-500: #7c908b;
  --ink-400: #a0afab;
  --ink-300: #c7d1ce;
  --ink-200: #dde4e2;
  --ink-150: #e7ecea;
  --ink-100: #edf1f0;
  --ink-50: #f7f9f8;
  --paper: #fffdfa;
  --canvas: #f4f6f3;
  --white: #ffffff;
  --mint: #2cbd86;
  --mint-soft: #e5f8ef;
  --amber: #d68a17;
  --amber-soft: #fff5dc;
  --coral: #dc665d;
  --coral-soft: #fff0ed;
  --violet: #7459c8;
  --violet-soft: #f1edff;
  --blue: #3c78b5;
  --blue-soft: #eaf3fc;
  --danger: #c94b43;
  --danger-dark: #a53b35;
  --danger-soft: #fff0ee;
  --warning: #bd7410;
  --warning-soft: #fff7e6;
  --success: #18845e;
  --success-soft: #e9f8f1;
  --shadow-xs: 0 1px 2px rgba(14, 40, 35, .04);
  --shadow-sm: 0 2px 8px rgba(14, 40, 35, .06), 0 1px 2px rgba(14, 40, 35, .04);
  --shadow-md: 0 12px 30px rgba(11, 49, 43, .09), 0 2px 7px rgba(11, 49, 43, .04);
  --shadow-lg: 0 25px 65px rgba(6, 48, 42, .16), 0 8px 20px rgba(6, 48, 42, .08);
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --sidebar-width: 256px;
  --topbar-height: 70px;
  --font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Manrope", "DM Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media print {
  body * { visibility: hidden !important; }
  #whatsapp-qr, #whatsapp-qr * { visibility: visible !important; }
  #whatsapp-qr { position: fixed; inset: 0; display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; border: 0; box-shadow: none; background: white; }
  #whatsapp-qr .settings-card-header, #whatsapp-qr .qr-code-copy, #whatsapp-qr .qr-code-placeholder { display: none !important; }
  #whatsapp-qr .settings-card-body { display: block; padding: 0; }
  #whatsapp-qr .qr-code-frame { width: 90mm; max-width: none; padding: 8mm; border-color: #bbb; }
  #whatsapp-qr .qr-code-frame img { width: 74mm; height: 74mm; }
  #whatsapp-qr .qr-print-only { display: flex; flex-direction: column; gap: 4px; margin-top: 8mm; color: #111; font-size: 12pt; text-align: center; }
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink-900); background: var(--canvas); font-family: var(--font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { color: inherit; font: inherit; }
button, select { cursor: pointer; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink-950); font-family: var(--font-display); letter-spacing: -.025em; }
h1 { margin-bottom: 6px; font-size: clamp(25px, 2vw, 32px); line-height: 1.2; }
h2 { margin-bottom: 4px; font-size: 17px; line-height: 1.3; }
h3 { margin-bottom: 3px; font-size: 15px; line-height: 1.35; }
p { color: var(--ink-600); }
svg { width: 18px; height: 18px; stroke-width: 1.8; }
[hidden] { display: none !important; }
::selection { color: var(--teal-950); background: var(--teal-200); }
:focus-visible { outline: 3px solid rgba(13, 148, 136, .24); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 9999; top: 10px; left: 10px; padding: 9px 14px; transform: translateY(-150%); border-radius: var(--radius-sm); color: white; background: var(--teal-800); font-weight: 700; transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
.mobile-only { display: none !important; }
.muted-small { color: var(--ink-500); font-size: 12px; font-style: normal; }
.muted-copy { color: var(--ink-500); text-align: center; }
.danger-text { color: var(--danger) !important; }

/* Application shell */
.app-shell { min-width: 320px; }
.app-column { min-height: 100vh; padding-left: var(--sidebar-width); }
.main-content { width: 100%; max-width: 1680px; min-height: calc(100vh - var(--topbar-height)); padding: 30px 32px 48px; margin-inline: auto; }
.sidebar { position: fixed; z-index: 100; inset: 0 auto 0 0; display: flex; width: var(--sidebar-width); flex-direction: column; overflow: hidden; color: rgba(255,255,255,.78); background: linear-gradient(178deg, #073d39 0%, #062e2c 72%, #052724 100%); border-right: 1px solid rgba(255,255,255,.06); }
.sidebar::before { position: absolute; right: -95px; bottom: 90px; width: 230px; height: 230px; border: 1px solid rgba(112, 216, 203, .09); border-radius: 50%; content: ""; box-shadow: 0 0 0 38px rgba(112,216,203,.025), 0 0 0 78px rgba(112,216,203,.018); pointer-events: none; }
.sidebar-head { position: relative; display: flex; min-height: var(--topbar-height); align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-close { display: none !important; color: white !important; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--teal-950); }
.brand-mark { position: relative; display: inline-flex; width: 31px; height: 31px; align-items: flex-end; justify-content: center; gap: 2.5px; padding: 6px; overflow: hidden; border-radius: 9px; color: white; background: linear-gradient(145deg, var(--teal-500), var(--teal-800)); box-shadow: 0 6px 16px rgba(12, 117, 106, .22); }
.brand-mark span { display: block; width: 4px; border-radius: 4px; background: white; transform: skewY(-11deg); }
.brand-mark span:nth-child(1) { height: 9px; opacity: .72; }
.brand-mark span:nth-child(2) { height: 15px; }
.brand-mark span:nth-child(3) { height: 12px; opacity: .86; }
.brand-name { color: inherit; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.7px; }
.brand-name span { color: var(--teal-500); }
.sidebar .brand { color: white; }
.sidebar .brand-name span, .brand-light .brand-name span { color: var(--teal-300); }
.workspace-card { position: relative; display: flex; align-items: center; gap: 10px; margin: 16px 13px 10px; padding: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius-md); background: rgba(255,255,255,.055); }
.workspace-card > svg { width: 15px; margin-left: auto; color: rgba(255,255,255,.42); }
.workspace-avatar { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--teal-950); background: linear-gradient(135deg, #b8eee6, #73d7ca); font-family: var(--font-display); font-size: 11px; font-weight: 800; }
.workspace-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; }
.workspace-copy strong { overflow: hidden; color: white; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.workspace-copy small { margin-top: 2px; color: rgba(255,255,255,.45); font-size: 10px; }
.sidebar-nav { position: relative; flex: 1; overflow-x: hidden; overflow-y: auto; padding: 3px 11px 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.nav-label { margin: 16px 10px 5px; color: rgba(255,255,255,.34); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav-link { position: relative; display: flex; min-height: 40px; align-items: center; gap: 11px; padding: 9px 11px; margin: 1px 0; border-radius: 9px; color: rgba(255,255,255,.63); font-size: 13px; font-weight: 500; transition: color .18s, background .18s, transform .18s; }
.nav-link svg { width: 17px; height: 17px; color: rgba(255,255,255,.49); transition: color .18s; }
.nav-link:hover { color: white; background: rgba(255,255,255,.06); }
.nav-link.is-active { color: white; background: linear-gradient(90deg, rgba(37, 183, 164, .22), rgba(37, 183, 164, .10)); box-shadow: inset 0 0 0 1px rgba(112,216,203,.10); }
.nav-link.is-active::before { position: absolute; left: -11px; width: 3px; height: 22px; border-radius: 0 4px 4px 0; background: var(--teal-300); content: ""; }
.nav-link.is-active svg { color: var(--teal-300); }
.nav-count { min-width: 20px; margin-left: auto; padding: 1px 6px; border-radius: 10px; color: var(--teal-950); background: var(--teal-300); font-size: 10px; font-weight: 800; text-align: center; }
.nav-dot { width: 7px; height: 7px; margin-left: auto; border: 2px solid var(--teal-950); border-radius: 50%; background: #f5b945; box-shadow: 0 0 0 2px rgba(245,185,69,.16); }
.sidebar-foot { position: relative; padding: 12px 14px 16px; border-top: 1px solid rgba(255,255,255,.07); }
.plan-progress { padding: 10px 11px; border-radius: 10px; background: rgba(0,0,0,.10); }
.plan-row { display: flex; justify-content: space-between; color: rgba(255,255,255,.48); font-size: 10px; }
.plan-row strong { color: var(--teal-200); font-size: 10px; }
.progress { height: 4px; margin: 8px 0 6px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.09); }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal-500), var(--teal-200)); }
.plan-progress small { display: block; color: rgba(255,255,255,.35); font-size: 9px; }
.mobile-overlay { display: none; }

.topbar { position: sticky; z-index: 80; top: 0; display: flex; height: var(--topbar-height); align-items: center; justify-content: space-between; padding: 0 28px 0 32px; border-bottom: 1px solid var(--ink-150); background: rgba(255,253,250,.91); backdrop-filter: blur(14px); }
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 10px; }
.menu-button { display: none !important; }
.global-search { display: flex; width: min(360px, 35vw); height: 39px; align-items: center; gap: 9px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--ink-50); transition: border-color .18s, background .18s, box-shadow .18s; }
.global-search:focus-within { border-color: var(--teal-300); background: white; box-shadow: 0 0 0 3px var(--teal-100); }
.global-search svg { width: 16px; color: var(--ink-400); }
.global-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font-size: 12px; }
.global-search input::placeholder { color: var(--ink-400); }
kbd { padding: 2px 6px; border: 1px solid var(--ink-200); border-bottom-width: 2px; border-radius: 5px; color: var(--ink-500); background: white; font-family: inherit; font-size: 9px; white-space: nowrap; }
.connection-pill { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--ink-150); border-radius: 20px; color: var(--ink-600); background: white; font-size: 10px; font-weight: 600; }
.connection-pill > span { width: 7px; height: 7px; border-radius: 50%; }
.connection-pill.is-online > span { background: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft); }
.connection-pill.is-offline > span { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.icon-button { display: inline-grid; width: 37px; height: 37px; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid transparent; border-radius: 9px; color: var(--ink-600); background: transparent; transition: color .18s, background .18s, border-color .18s, transform .18s; }
.icon-button:hover { color: var(--teal-800); border-color: var(--ink-150); background: white; }
.icon-button:active { transform: scale(.96); }
.icon-button svg { width: 17px; height: 17px; }
.icon-button-xs { width: 27px; height: 27px; border-radius: 7px; }
.icon-button-xs svg { width: 14px; height: 14px; }
.notification-button { position: relative; border-color: var(--ink-150); background: white; }
.notification-badge { position: absolute; top: -4px; right: -4px; display: grid; min-width: 16px; height: 16px; place-items: center; padding: 0 4px; border: 2px solid var(--paper); border-radius: 9px; color: white; background: var(--coral); font-size: 8px; font-weight: 800; }
.user-menu-button { display: flex; align-items: center; gap: 8px; padding: 3px 5px 3px 4px; border: 0; border-radius: 10px; background: transparent; text-align: left; transition: background .18s; }
.user-menu-button:hover { background: var(--ink-50); }
.user-menu-button > svg { width: 13px; color: var(--ink-400); }
.user-menu-copy { display: flex; min-width: 95px; flex-direction: column; line-height: 1.2; }
.user-menu-copy strong { max-width: 120px; overflow: hidden; color: var(--ink-900); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-copy small { margin-top: 2px; color: var(--ink-500); font-size: 9px; }

/* Shared atoms */
.avatar { position: relative; display: inline-grid; width: 39px; height: 39px; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--teal-900); background: linear-gradient(145deg, #d5f1ec, #b7dfd8); font-family: var(--font-display); font-size: 12px; font-weight: 800; }
.avatar-sm { width: 32px; height: 32px; font-size: 10px; }
.avatar-xs { width: 26px; height: 26px; font-size: 9px; }
.avatar-md { width: 42px; height: 42px; font-size: 13px; }
.avatar-xl { width: 70px; height: 70px; font-size: 20px; }
.avatar-xxl { width: 86px; height: 86px; font-size: 25px; }
.avatar-color-0 { color: #116357; background: #d8f3ed; }
.avatar-color-1 { color: #755323; background: #f8e9cf; }
.avatar-color-2 { color: #59469b; background: #ebe6fb; }
.avatar-color-3 { color: #9a4944; background: #f8dfdc; }
.avatar-color-4 { color: #35648f; background: #e1edf7; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.page-header > div:first-child > p { margin-bottom: 0; font-size: 13px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 7px; color: var(--teal-700); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow svg { width: 13px; height: 13px; }
.eyebrow-light { color: var(--teal-200); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.button { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; transition: color .18s, background .18s, border-color .18s, box-shadow .18s, transform .18s; }
.button svg { width: 15px; height: 15px; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-primary { color: white; background: linear-gradient(135deg, var(--teal-700), var(--teal-800)); box-shadow: 0 5px 14px rgba(13, 95, 86, .16); }
.button-primary:hover { background: linear-gradient(135deg, var(--teal-600), var(--teal-800)); box-shadow: 0 7px 18px rgba(13,95,86,.22); }
.button-secondary { color: var(--ink-800); border-color: var(--ink-200); background: white; box-shadow: var(--shadow-xs); }
.button-secondary:hover { color: var(--teal-800); border-color: var(--teal-300); }
.button-ghost { color: var(--teal-800); background: rgba(255,255,255,.76); }
.button-sm { min-height: 34px; padding: 7px 11px; font-size: 11px; }
.button-xs { min-height: 28px; padding: 5px 9px; border-radius: 7px; font-size: 10px; }
.button-block { width: 100%; min-height: 45px; }
.button.is-loading, button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.button.is-loading::after, button.is-loading::after { position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: white; content: ""; animation: spin .7s linear infinite; }
.button-secondary.is-loading::after { color: var(--teal-700); }
.fit-content { width: fit-content; }
.text-button, .text-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: var(--teal-700); background: transparent; font-size: 11px; font-weight: 700; }
.text-link:hover, .text-button:hover { color: var(--teal-900); text-decoration: underline; }
.text-link svg, .text-button svg { width: 13px; height: 13px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 23px; color: var(--ink-600); font-size: 11px; font-weight: 600; }
.back-link:hover { color: var(--teal-700); }
.back-link svg { width: 14px; }
.page-back { margin-bottom: 14px; }
.card { border: 1px solid var(--ink-150); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-xs); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 21px 0; }
.card-header h2 { margin-bottom: 3px; }
.card-header p { margin: 0; font-size: 11px; }
.alert { display: flex; min-height: 44px; align-items: center; gap: 10px; padding: 10px 13px; margin-bottom: 16px; border: 1px solid; border-radius: var(--radius-sm); font-size: 12px; }
.alert > svg { width: 17px; flex: 0 0 auto; }
.alert span { flex: 1; }
.alert-success { color: var(--success); border-color: #bee8d5; background: var(--success-soft); }
.alert-danger { color: var(--danger); border-color: #f0cbc7; background: var(--danger-soft); }
.alert-warning { color: var(--warning); border-color: #eed7ad; background: var(--warning-soft); }
.alert-info { color: var(--blue); border-color: #c8dfef; background: var(--blue-soft); }
.alert-close { display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border-radius: 6px; color: inherit; background: transparent; }
.alert-close:hover { background: rgba(0,0,0,.05); }
.alert-close svg { width: 13px; }

/* Forms */
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.form-grid { display: grid; gap: 14px; }
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.field > label, fieldset > legend { color: var(--ink-800); font-size: 11px; font-weight: 700; }
.field label em { color: var(--coral); font-style: normal; }
.field input, .field textarea, .field select, .note-input, .rule-row input, .business-hour-row input, .toolbar-search input, .search-field input { width: 100%; border: 1px solid var(--ink-200); border-radius: var(--radius-sm); outline: 0; color: var(--ink-900); background: white; font-size: 12px; transition: border-color .18s, box-shadow .18s, background .18s; }
.field input, .field select { min-height: 41px; padding: 9px 11px; }
.field textarea, .note-input { padding: 10px 11px; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-300); }
.field input:focus, .field textarea:focus, .field select:focus, .note-input:focus, .rule-row input:focus { border-color: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-100); }
.field input::placeholder, .field textarea::placeholder, .toolbar-search input::placeholder, .search-field input::placeholder { color: var(--ink-400); }
.field input:disabled, .field textarea:disabled, .field select:disabled { cursor: not-allowed; opacity: .65; background: var(--ink-50); }
.field-hint, .field-error, .char-count { color: var(--ink-500); font-size: 10px; }
.field-error { color: var(--danger); }
.char-count { align-self: flex-end; margin-top: -3px; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.label-row > a, .variable-hint { color: var(--teal-700); font-size: 10px; font-weight: 600; }
.variable-hint code { border-radius: 4px; color: var(--teal-800); background: var(--teal-50); font-size: 9px; }
.input-with-icon, .input-prefix, .input-suffix, .secret-input { position: relative; display: flex; align-items: center; }
.input-with-icon > svg { position: absolute; z-index: 1; left: 12px; width: 15px; color: var(--ink-400); pointer-events: none; }
.input-with-icon > input { padding-left: 37px; }
.input-with-icon > .password-toggle { position: absolute; right: 5px; }
.input-with-icon:has(.password-toggle) input { padding-right: 42px; }
.password-toggle { display: grid; width: 31px; height: 31px; place-items: center; padding: 0; border-radius: 7px; color: var(--ink-500); background: transparent; }
.password-toggle:hover { color: var(--teal-700); background: var(--ink-50); }
.password-toggle svg { width: 15px; }
.input-prefix > span, .input-suffix > span { position: absolute; z-index: 1; color: var(--ink-500); font-size: 11px; pointer-events: none; }
.input-prefix > span { left: 11px; }
.input-prefix > input { padding-left: 33px; }
.input-suffix > span { right: 11px; }
.input-suffix > input { padding-right: 72px; }
.input-with-button { display: flex; gap: 8px; }
.input-with-button > input { flex: 1; min-width: 0; }
.secret-input input { padding-right: 42px; }
.secret-input .password-toggle { position: absolute; right: 5px; }
.check-control { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-600); font-size: 11px; cursor: pointer; }
.check-control input, .check-only input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.check-control > span, .check-only > span { display: grid; width: 17px; height: 17px; place-items: center; flex: 0 0 auto; border: 1px solid var(--ink-300); border-radius: 5px; background: white; transition: .18s; }
.check-control input:checked + span, .check-only input:checked + span { border-color: var(--teal-700); background: var(--teal-700); }
.check-control input:checked + span::after, .check-only input:checked + span::after { width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; content: ""; transform: translateY(-1px) rotate(45deg); }
.check-control input:focus-visible + span, .check-only input:focus-visible + span { box-shadow: 0 0 0 3px var(--teal-100); }
.check-control a { color: var(--teal-700); font-weight: 600; }
.check-start { align-items: flex-start; }
.check-start > span { margin-top: 1px; }
.check-only { display: inline-flex; cursor: pointer; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch > span { position: relative; width: 38px; height: 21px; border-radius: 20px; background: var(--ink-300); transition: background .2s; }
.switch > span::after { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.18); content: ""; transition: transform .2s var(--ease); }
.switch input:checked + span { background: var(--teal-700); }
.switch input:checked + span::after { transform: translateX(17px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--teal-100); }
.switch em { color: var(--ink-600); font-size: 11px; font-style: normal; font-weight: 600; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid var(--ink-100); }
.switch-row > span { display: flex; flex-direction: column; }
.switch-row > span strong { color: var(--ink-800); font-size: 12px; }
.switch-row > span small { margin-top: 2px; color: var(--ink-500); font-size: 10px; }
.select-control { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--ink-200); border-radius: var(--radius-sm); background: white; }
.select-control > svg { width: 14px; color: var(--ink-500); }
.select-control select { min-width: 115px; border: 0; outline: 0; color: var(--ink-700); background: transparent; font-size: 11px; font-weight: 600; }
.select-control.compact { min-height: 37px; }
.select-control.full { width: 100%; }
.select-control.full select { width: 100%; }
.password-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.password-meter span { height: 3px; border-radius: 3px; background: var(--ink-150); transition: background .2s; }
.password-meter[data-strength="1"] span:nth-child(1) { background: var(--danger); }
.password-meter[data-strength="2"] span:nth-child(-n+2) { background: var(--amber); }
.password-meter[data-strength="3"] span:nth-child(-n+3) { background: var(--teal-500); }
.password-meter[data-strength="4"] span { background: var(--success); }

/* Menus, modals, toast and command */
.dropdown { position: relative; }
.dropdown-menu { position: absolute; z-index: 300; top: calc(100% + 7px); left: 0; width: 210px; padding: 6px; border: 1px solid var(--ink-150); border-radius: var(--radius-md); background: white; box-shadow: var(--shadow-md); animation: menu-in .15s var(--ease); }
.dropdown-menu.align-right, .user-dropdown, .notification-menu { right: 0; left: auto; }
.dropdown-menu a, .dropdown-menu > button, .dropdown-menu form button { display: flex; width: 100%; min-height: 35px; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; color: var(--ink-700); background: transparent; font-size: 11px; font-weight: 500; text-align: left; }
.dropdown-menu a:hover, .dropdown-menu > button:hover, .dropdown-menu form button:hover { color: var(--teal-800); background: var(--teal-50); }
.dropdown-menu svg { width: 14px; }
.dropdown-separator { display: block; height: 1px; margin: 5px 3px; background: var(--ink-100); }
.notification-menu { width: 350px; padding: 0; overflow: hidden; }
.dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px 10px; border-bottom: 1px solid var(--ink-100); }
.dropdown-head strong { font-family: var(--font-display); font-size: 13px; }
.notification-item { display: grid !important; grid-template-columns: 34px 1fr; gap: 10px !important; min-height: auto !important; padding: 11px 14px !important; border-bottom: 1px solid var(--ink-100); border-radius: 0 !important; }
.notification-item.is-unread { background: var(--teal-50); }
.notification-item.is-unread::after { position: absolute; right: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--teal-600); content: ""; }
.notification-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--teal-700); background: var(--teal-100); }
.notification-item > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.notification-item strong { color: var(--ink-800); font-size: 10px; }
.notification-item small, .notification-item time { color: var(--ink-500); font-size: 9px; }
.notification-item time { margin-top: 3px; }
.dropdown-empty { display: flex; min-height: 100px; align-items: center; justify-content: center; gap: 8px; color: var(--ink-500); font-size: 11px; }
.dropdown-empty svg { width: 17px; }
.modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(8, 31, 28, .54); backdrop-filter: blur(3px); animation: fade-in .2s; }
.modal-dialog { position: relative; z-index: 1; display: flex; width: min(600px, 100%); max-height: min(88vh, 920px); flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-xl); background: var(--paper); box-shadow: var(--shadow-lg); animation: modal-in .24s var(--ease); }
.modal-sm { width: min(470px, 100%); }
.modal-lg { width: min(900px, 100%); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 21px 23px 17px; border-bottom: 1px solid var(--ink-100); }
.modal-header h2 { margin-bottom: 3px; font-size: 19px; }
.modal-header p { margin: 0; font-size: 11px; }
.modal-form { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.modal-body { min-height: 0; padding: 20px 23px; overflow-y: auto; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 14px 23px; border-top: 1px solid var(--ink-100); background: var(--ink-50); }
body.has-modal { overflow: hidden; }
.toast-region { position: fixed; z-index: 2000; right: 20px; bottom: 20px; display: flex; width: min(380px, calc(100vw - 30px)); flex-direction: column; gap: 9px; pointer-events: none; }
.toast { display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--ink-150); border-radius: var(--radius-md); background: white; box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-in .25s var(--ease); }
.toast.is-leaving { animation: toast-out .2s forwards; }
.toast-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; }
.toast-success .toast-icon { color: var(--success); background: var(--success-soft); }
.toast-error .toast-icon { color: var(--danger); background: var(--danger-soft); }
.toast-info .toast-icon { color: var(--blue); background: var(--blue-soft); }
.toast-warning .toast-icon { color: var(--warning); background: var(--warning-soft); }
.toast-copy { display: flex; flex-direction: column; }
.toast-copy strong { color: var(--ink-800); font-size: 11px; }
.toast-copy small { color: var(--ink-500); font-size: 10px; }
.toast button { display: grid; width: 23px; height: 23px; place-items: center; padding: 0; border-radius: 6px; color: var(--ink-500); background: transparent; }
.toast button svg { width: 13px; }
.command-palette { position: fixed; z-index: 1500; inset: 0; display: grid; align-items: start; justify-items: center; padding: 10vh 16px 20px; }
.command-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(7,37,33,.52); backdrop-filter: blur(3px); }
.command-dialog { position: relative; width: min(610px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-lg); animation: modal-in .2s var(--ease); }
.command-input { display: flex; min-height: 59px; align-items: center; gap: 12px; padding: 0 17px; border-bottom: 1px solid var(--ink-100); }
.command-input svg { color: var(--ink-400); }
.command-input input { flex: 1; border: 0; outline: 0; font-size: 15px; }
.command-results { padding: 10px; }
.command-results > p { margin: 4px 9px 7px; color: var(--ink-400); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.command-results a { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; padding: 9px; border-radius: 9px; }
.command-results a:hover { background: var(--teal-50); }
.command-results a > svg { padding: 8px; width: 34px; height: 34px; border-radius: 9px; color: var(--teal-700); background: var(--teal-100); }
.command-results a span { display: flex; flex-direction: column; color: var(--ink-800); font-size: 12px; font-weight: 600; }
.command-results a small { color: var(--ink-500); font-size: 10px; font-weight: 400; }

/* Data presentation */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 17px; }
.metric-card { min-width: 0; padding: 18px; border: 1px solid var(--ink-150); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-xs); }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 15px; }
.metric-icon, .summary-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; }
.metric-icon svg, .summary-icon svg { width: 17px; }
.metric-icon.teal, .summary-icon.teal { color: var(--teal-700); background: var(--teal-100); }
.metric-icon.mint, .summary-icon.mint { color: var(--success); background: var(--mint-soft); }
.metric-icon.violet, .summary-icon.violet { color: var(--violet); background: var(--violet-soft); }
.metric-icon.amber, .summary-icon.amber { color: var(--amber); background: var(--amber-soft); }
.metric-icon.coral, .summary-icon.coral { color: var(--coral); background: var(--coral-soft); }
.metric-value { color: var(--ink-950); font-family: var(--font-display); font-size: 27px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
.metric-value span { margin-left: 1px; color: var(--ink-500); font-size: 15px; }
.metric-card > p { margin: 3px 0 2px; color: var(--ink-700); font-size: 11px; font-weight: 600; }
.metric-card > small { color: var(--ink-500); font-size: 9px; }
.metric-card.horizontal { display: flex; align-items: center; gap: 13px; }
.metric-card.horizontal .metric-icon { width: 42px; height: 42px; }
.metric-card.horizontal p { margin: 0 0 1px; }
.metric-card.horizontal .metric-value { font-size: 22px; }
.metric-card.horizontal .metric-currency { font-size: 18px; }
.trend { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 10px; font-size: 9px; font-weight: 700; }
.trend svg { width: 11px; height: 11px; }
.trend.up { color: var(--success); background: var(--success-soft); }
.trend.down { color: var(--danger); background: var(--danger-soft); }
.trend.neutral { color: var(--ink-600); background: var(--ink-100); }
.summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 17px; overflow: hidden; border: 1px solid var(--ink-150); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-xs); }
.summary-strip > div { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-right: 1px solid var(--ink-100); }
.summary-strip > div:last-child { border-right: 0; }
.summary-strip > div > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.summary-strip small { color: var(--ink-500); font-size: 9px; }
.summary-strip strong { color: var(--ink-900); font-family: var(--font-display); font-size: 18px; }
.status-badge, .stage-badge, .stock-status { display: inline-flex; width: fit-content; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 12px; font-size: 9px; font-weight: 700; line-height: 1; white-space: nowrap; }
.status-badge i, .stage-badge i, .stock-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-badge.success { color: var(--success); background: var(--success-soft); }
.status-badge.warning { color: var(--warning); background: var(--warning-soft); }
.status-badge.danger { color: var(--danger); background: var(--danger-soft); }
.status-badge.neutral { color: var(--ink-600); background: var(--ink-100); }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 7px; font-size: 9px; font-style: normal; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.tag-soft { color: var(--teal-800); background: var(--teal-50); }
.tag-more { color: var(--ink-600); background: var(--ink-100); }
.tag-removable { color: var(--ink-700); border: 1px solid var(--ink-150); background: white; }
.tag-removable button { padding: 0; color: var(--ink-400); background: transparent; font-size: 13px; line-height: 1; }
.data-card { overflow: visible; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--ink-100); }
.toolbar-search, .search-field { display: flex; width: min(380px, 45%); min-height: 38px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--ink-200); border-radius: var(--radius-sm); background: white; }
.toolbar-search.small { width: 260px; }
.toolbar-search:focus-within, .search-field:focus-within { border-color: var(--teal-400, var(--teal-500)); box-shadow: 0 0 0 3px var(--teal-100); }
.toolbar-search > svg, .search-field > svg { width: 15px; color: var(--ink-400); }
.toolbar-search input, .search-field input { min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; }
.toolbar-filters { display: flex; align-items: center; gap: 8px; }
.table-scroll { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th { height: 41px; padding: 9px 13px; color: var(--ink-500); background: var(--ink-50); font-size: 9px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.data-table th:first-child, .data-table td:first-child { padding-left: 17px; }
.data-table th:last-child, .data-table td:last-child { padding-right: 17px; }
.data-table td { height: 65px; padding: 10px 13px; border-top: 1px solid var(--ink-100); color: var(--ink-700); font-size: 11px; vertical-align: middle; }
.data-table tbody tr { transition: background .15s; }
.data-table tbody tr:hover { background: #fbfdfc; }
.data-table .checkbox-cell { width: 36px; padding-right: 2px; }
.actions-cell { width: 45px; text-align: right; }
.person-cell, .product-cell { display: flex; min-width: 150px; align-items: center; gap: 10px; }
.person-cell > span:last-child, .product-cell > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.person-cell strong, .product-cell strong { overflow: hidden; color: var(--ink-900); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.person-cell small, .product-cell small, .stacked-cell small { color: var(--ink-500); font-size: 9px; }
.product-thumb { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--ink-100); border-radius: 9px; color: var(--ink-500); background: var(--ink-50); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb svg { width: 16px; }
.gradient-one { color: #92554b; background: linear-gradient(135deg,#f7dcd7,#f9eddb); }
.gradient-two { color: #5d4a8d; background: linear-gradient(135deg,#e5def8,#f4e9f4); }
.gradient-three { color: #456d68; background: linear-gradient(135deg,#d8eee8,#e8f0dd); }
.stacked-cell { display: flex; flex-direction: column; line-height: 1.45; white-space: nowrap; }
.table-empty-row:hover { background: transparent !important; }
.table-empty-row > td { height: auto; padding-block: 35px; }
.table-footer { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 17px; border-top: 1px solid var(--ink-100); color: var(--ink-500); font-size: 10px; }
.pagination { display: flex; align-items: center; gap: 9px; }
.page-button { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--ink-200); border-radius: 7px; color: var(--ink-600); background: white; }
.page-button:hover { color: var(--teal-700); border-color: var(--teal-300); }
.page-button.is-disabled { opacity: .4; pointer-events: none; }
.page-button svg { width: 13px; }
.bulk-bar { display: flex; align-items: center; gap: 16px; padding: 9px 17px; color: var(--teal-900); border-bottom: 1px solid var(--teal-200); background: var(--teal-50); font-size: 10px; }
.bulk-bar strong { margin-right: auto; }
.empty-state { display: flex; max-width: 430px; min-height: 240px; flex-direction: column; align-items: center; justify-content: center; padding: 34px 20px; margin: auto; text-align: center; }
.empty-icon { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 14px; border: 1px solid var(--teal-100); border-radius: 17px; color: var(--teal-700); background: linear-gradient(145deg, white, var(--teal-50)); box-shadow: 0 7px 20px rgba(13,95,86,.08); }
.empty-icon svg { width: 23px; height: 23px; }
.empty-state h3 { margin-bottom: 5px; }
.empty-state p { max-width: 350px; margin-bottom: 15px; font-size: 11px; }
.empty-state-compact { min-height: 190px; padding: 25px 15px; }
.empty-state-compact .empty-icon { width: 45px; height: 45px; }
.filter-empty { display: flex; min-height: 220px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 25px; color: var(--ink-500); text-align: center; }
.filter-empty svg { width: 27px; height: 27px; margin-bottom: 5px; color: var(--ink-400); }
.filter-empty strong { color: var(--ink-700); font-size: 12px; }
.filter-empty span { font-size: 10px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(22px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(22px); } }

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

/* Authentication */
.auth-page { min-width: 320px; min-height: 100vh; color-scheme: dark; color: #f5f5f7; background: #05080c; font-family: "IBM Plex Sans", var(--font-body); }
.auth-page h1, .auth-page h2 { color: #f5f5f7; font-family: "Space Grotesk", var(--font-display); }
.auth-page .skip-link { color: #06130c; background: #1fe08a; }
.auth-shell { position: relative; display: grid; min-height: 100svh; grid-template-columns: minmax(0, 48%) minmax(430px, 52%); overflow: hidden; background: #05080c; }
.auth-showcase { position: relative; display: flex; min-width: 0; min-height: 100svh; flex-direction: column; justify-content: center; overflow: hidden; padding: 120px clamp(48px, 7vw, 108px) 60px; background: radial-gradient(circle at 18% 18%, rgba(31,224,138,.12), transparent 28%), #07110d; }
.auth-showcase::before { position: absolute; inset: 0; opacity: .22; background: linear-gradient(135deg, transparent 0 66%, rgba(31,224,138,.22) 66.1% 66.25%, transparent 66.4%), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 520px 520px, 88px 88px, 88px 88px; content: ""; pointer-events: none; }
.auth-brand, .auth-card-brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: #f5f5f7; font-family: "Space Grotesk", var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.04em; }
.auth-brand { position: absolute; top: 38px; left: clamp(48px, 7vw, 108px); }
.auth-brand strong, .auth-card-brand strong { color: #1fe08a; font-weight: 700; }
.auth-page .brand-mark { width: 32px; height: 32px; color: #06130c; background: #1fe08a; border-radius: 8px; box-shadow: none; }
.auth-showcase-copy, .auth-conversation { position: relative; z-index: 1; }
.auth-showcase-copy { max-width: 590px; }
.auth-kicker { margin-bottom: 16px; color: #1fe08a; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.auth-showcase-copy h1 { max-width: 560px; margin-bottom: 0; font-size: clamp(42px, 4.4vw, 68px); line-height: .98; letter-spacing: -.058em; }
.auth-showcase-copy h1 span { color: #1fe08a; }
.auth-showcase-copy > p:last-child { max-width: 500px; margin: 22px 0 0; color: rgba(245,245,247,.65); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; }
.auth-conversation { width: min(460px, 94%); margin-top: 42px; padding: 18px; border: 1px solid rgba(31,224,138,.22); border-radius: 12px; background: rgba(5,16,12,.72); box-shadow: 0 22px 50px rgba(0,0,0,.18); }
.auth-conversation-head { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.auth-conversation-head > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #06130c; background: #1fe08a; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700; }
.auth-conversation-head div { display: flex; flex-direction: column; }
.auth-conversation-head strong { color: #f5f5f7; font-size: 13px; }
.auth-conversation-head small { color: rgba(245,245,247,.46); font-size: 10px; }
.auth-bubble { max-width: 82%; padding: 10px 12px; margin: 13px 0 0; border-radius: 8px; font-size: 12px; line-height: 1.45; }
.auth-bubble-in { color: #f5f5f7; background: rgba(255,255,255,.09); }
.auth-bubble-out { margin-left: auto; color: #10271d; background: #d9f8e8; }
.auth-conversation-status { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 12px; color: rgba(245,245,247,.42); font-size: 10px; }
.auth-conversation-status i { width: 6px; height: 6px; border-radius: 50%; background: #1fe08a; }
.auth-content { display: flex; min-width: 0; min-height: 100svh; flex-direction: column; align-items: center; justify-content: center; padding: 100px clamp(42px, 7vw, 100px) 28px; border-left: 1px solid rgba(255,255,255,.07); background: #0a0a0e; }
.auth-card { width: min(460px, 100%); margin: auto; }
.auth-card-brand { margin-bottom: 32px; }
.auth-mode-rail { position: absolute; z-index: 5; top: 50%; left: 48%; display: flex; width: 164px; flex-direction: column; gap: 6px; transform: translate(-100%, -50%); }
.auth-tab { min-height: 52px; padding: 16px 21px; border-radius: 9px 0 0 9px; color: rgba(245,245,247,.56); font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-align: right; text-transform: uppercase; }
.auth-tab:hover { color: #f5f5f7; }
.auth-tab.active { color: #f5f5f7; background: #0a0a0e; }
.auth-heading { margin-bottom: 27px; }
.auth-heading .eyebrow { margin-bottom: 10px; color: #1fe08a; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; }
.auth-heading h2 { margin-bottom: 8px; font-size: clamp(30px, 3vw, 40px); letter-spacing: -.045em; }
.auth-heading p { max-width: 420px; margin: 0; color: rgba(245,245,247,.56); font-size: 13px; line-height: 1.6; }
.auth-page .form-stack { gap: 18px; }
.auth-page .field label { color: rgba(245,245,247,.72); font-size: 12px; font-weight: 600; }
.auth-page .label-row a { color: #1fe08a; }
.auth-page .input-with-icon > svg { color: rgba(245,245,247,.38); }
.auth-page .input-with-icon input { min-height: 48px; color: #f5f5f7; background: #131318; border-color: rgba(255,255,255,.1); border-radius: 8px; }
.auth-page .input-with-icon input::placeholder { color: rgba(245,245,247,.3); }
.auth-page .input-with-icon input:focus { border-color: #1fe08a; box-shadow: 0 0 0 3px rgba(31,224,138,.1); }
.auth-page .password-toggle { min-width: 44px; min-height: 44px; color: rgba(245,245,247,.52); }
.auth-page .check-control { color: rgba(245,245,247,.6); }
.auth-page .check-control input:checked + span { border-color: #1fe08a; background: #1fe08a; }
.auth-page .button-primary { min-height: 48px; color: #06130c; background: #1fe08a; box-shadow: none; }
.auth-page .button-primary:hover { color: #06130c; background: #56eea7; box-shadow: none; transform: none; }
.auth-switch { margin: 24px 0 0; color: rgba(245,245,247,.46); font-size: 12px; text-align: center; }
.auth-switch a, .auth-page .back-link { color: #1fe08a; font-weight: 600; }
.auth-footer { color: rgba(245,245,247,.28); font-size: 10px; text-align: center; }
.auth-symbol { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 20px; border: 1px solid rgba(31,224,138,.18); border-radius: 10px; color: #1fe08a; background: rgba(31,224,138,.06); }
.auth-symbol svg { width: 20px; height: 20px; }
.security-note { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: rgba(245,245,247,.55); background: rgba(255,255,255,.03); font-size: 10px; line-height: 1.5; }
.security-note svg { width: 15px; flex: 0 0 auto; color: #1fe08a; }
.auth-page .alert-danger { color: #ffc4bd; border-color: rgba(220,102,93,.32); background: rgba(220,102,93,.11); }

/* Dashboard */
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--mint-soft); }
.status-banner { display: flex; min-height: 65px; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 17px; border: 1px solid; border-radius: var(--radius-md); }
.status-banner.status-good { border-color: #c8e9dc; background: linear-gradient(90deg, var(--success-soft), #f7fcf9); }
.status-banner.status-warning { border-color: #ead4ad; background: linear-gradient(90deg, var(--warning-soft), #fffdf8); }
.status-banner-icon { display: grid; width: 37px; height: 37px; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--success); background: white; box-shadow: var(--shadow-xs); }
.status-warning .status-banner-icon { color: var(--warning); }
.status-banner-icon svg { width: 18px; }
.status-banner > div { flex: 1; }
.status-banner strong { color: var(--ink-800); font-size: 11px; }
.status-banner p { margin: 1px 0 0; font-size: 9px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(270px, .7fr); gap: 17px; margin-bottom: 17px; }
.chart-card { min-height: 325px; }
.chart-wrap { position: relative; height: 245px; padding: 16px 18px 12px; }
.chart-legend { display: flex; gap: 13px; color: var(--ink-500); font-size: 9px; }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 3px; }
.legend-dot.primary { background: var(--teal-700); }
.legend-dot.secondary { background: var(--teal-300); }
.resolution-card { min-height: 325px; }
.donut-wrap { position: relative; width: 190px; height: 190px; padding: 18px; margin: 2px auto -4px; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center strong { color: var(--ink-950); font-family: var(--font-display); font-size: 25px; }
.donut-center span { color: var(--ink-500); font-size: 9px; }
.resolution-list { padding: 0 20px 17px; }
.resolution-list > div { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; color: var(--ink-600); border-top: 1px solid var(--ink-100); font-size: 9px; }
.resolution-list span { display: flex; align-items: center; gap: 7px; }
.resolution-list strong { color: var(--ink-800); }
.dashboard-lower-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr); gap: 17px; margin-bottom: 17px; }
.activity-list { padding: 8px 20px 13px; }
.activity-item { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 10px; min-height: 57px; border-bottom: 1px solid var(--ink-100); }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 9px; }
.activity-icon svg { width: 15px; }
.activity-icon.teal { color: var(--teal-700); background: var(--teal-100); }
.activity-icon.violet { color: var(--violet); background: var(--violet-soft); }
.activity-icon.amber { color: var(--amber); background: var(--amber-soft); }
.activity-icon.mint { color: var(--success); background: var(--mint-soft); }
.activity-copy { display: flex; min-width: 0; flex-direction: column; }
.activity-copy strong { overflow: hidden; color: var(--ink-800); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.activity-copy small, .activity-item time { color: var(--ink-500); font-size: 9px; }
.activity-item time { white-space: nowrap; }
.pipeline-total { display: grid; grid-template-columns: 1fr auto; padding: 15px 20px 12px; }
.pipeline-total span { color: var(--ink-500); font-size: 9px; }
.pipeline-total strong { grid-row: span 2; color: var(--ink-950); font-family: var(--font-display); font-size: 20px; }
.pipeline-total small { color: var(--ink-500); font-size: 9px; }
.pipeline-bars { padding: 2px 20px 16px; }
.pipeline-bars > div { display: grid; grid-template-columns: 84px 1fr 22px; align-items: center; gap: 8px; min-height: 31px; }
.pipeline-bars span { display: flex; align-items: center; gap: 6px; color: var(--ink-600); font-size: 9px; }
.pipeline-bars strong { color: var(--ink-800); font-size: 10px; text-align: right; }
.stage-dot { width: 6px; height: 6px; border-radius: 50%; }
.stage-dot.new { background: var(--blue); }.stage-dot.interested { background: var(--violet); }.stage-dot.qualified { background: var(--amber); }.stage-dot.proposal { background: #cb6f92; }.stage-dot.sale { background: var(--success); }
.mini-progress { height: 4px; overflow: hidden; border-radius: 4px; background: var(--ink-100); }
.mini-progress i { display: block; height: 100%; border-radius: inherit; background: var(--teal-500); }
.top-products-card { margin-bottom: 8px; }
.top-products-card .table-scroll { padding-top: 10px; }
.compact-table th { background: transparent; }
.compact-table td { height: 57px; }
.stock-status.ok { color: var(--success); background: var(--success-soft); }
.stock-status.low { color: var(--warning); background: var(--warning-soft); }
.stock-status.out { color: var(--danger); background: var(--danger-soft); }

/* Conversations */
.conversation-page { overflow: hidden; }
.conversation-page .main-content { max-width: none; height: calc(100vh - var(--topbar-height)); min-height: 610px; padding: 0; overflow: hidden; }
.conversation-shell { display: grid; height: 100%; grid-template-columns: 310px minmax(390px, 1fr) 285px; background: white; }
.conversation-list-panel, .chat-panel, .customer-panel { min-width: 0; min-height: 0; }
.conversation-list-panel { display: flex; flex-direction: column; border-right: 1px solid var(--ink-150); background: var(--paper); }
.conversation-list-head { padding: 17px 14px 11px; border-bottom: 1px solid var(--ink-100); }
.panel-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.panel-title-row h1 { margin-bottom: 0; font-size: 20px; }
.panel-title-row p { margin: 0; font-size: 9px; }
.search-field { width: 100%; min-height: 36px; }
.search-field kbd { margin-left: auto; }
.filter-tabs { display: flex; gap: 3px; margin-top: 11px; }
.filter-tabs button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 7px; color: var(--ink-500); background: transparent; font-size: 9px; font-weight: 600; }
.filter-tabs button:hover, .filter-tabs button.is-active { color: var(--teal-800); background: var(--teal-50); }
.filter-tabs span { display: grid; min-width: 15px; height: 15px; place-items: center; padding: 0 3px; border-radius: 8px; color: inherit; background: white; font-size: 8px; }
.conversation-items { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; }
.conversation-item { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 9px; min-height: 91px; padding: 12px 12px; border-bottom: 1px solid var(--ink-100); transition: background .16s; }
.conversation-item:hover { background: var(--ink-50); }
.conversation-item.is-active { background: linear-gradient(90deg, var(--teal-50), rgba(239,251,248,.45)); }
.conversation-item.is-active::before { position: absolute; left: 0; width: 3px; height: 100%; background: var(--teal-600); content: ""; }
.channel-indicator { position: absolute; right: -2px; bottom: -1px; display: grid; width: 15px; height: 15px; place-items: center; border: 2px solid white; border-radius: 50%; color: white; background: #23a968; }
.channel-indicator svg { width: 7px; height: 7px; stroke-width: 2.6; }
.conversation-item-body { display: flex; min-width: 0; flex-direction: column; }
.conversation-item-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.conversation-item-top strong { overflow: hidden; color: var(--ink-900); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item-top time { color: var(--ink-400); font-size: 8px; white-space: nowrap; }
.conversation-preview { display: flex; align-items: center; gap: 3px; max-width: 195px; margin-top: 2px; overflow: hidden; color: var(--ink-500); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-preview svg { width: 11px; color: var(--teal-500); }
.conversation-meta { display: flex; min-width: 0; align-items: center; gap: 4px; margin-top: auto; }
.conversation-meta .tag { max-width: 70px; overflow: hidden; padding: 2px 5px; text-overflow: ellipsis; }
.ai-state { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: 8px; font-style: normal; font-weight: 700; }
.ai-state svg { width: 10px; height: 10px; }
.ai-state.active { color: var(--teal-700); }.ai-state.paused { color: var(--amber); }
.unread-count { position: absolute; right: 12px; bottom: 12px; display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border-radius: 9px; color: white; background: var(--teal-700); font-size: 8px; font-weight: 800; }
.chat-panel { display: flex; flex-direction: column; background: #f7f8f5; }
.chat-header { display: flex; min-height: 67px; align-items: center; gap: 9px; padding: 9px 14px; border-bottom: 1px solid var(--ink-150); background: var(--paper); }
.presence-dot { position: absolute; right: 0; bottom: 1px; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: var(--mint); }
.chat-person { display: flex; min-width: 0; flex-direction: column; }
.chat-person strong { overflow: hidden; color: var(--ink-900); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-person span { display: flex; align-items: center; gap: 3px; color: var(--ink-500); font-size: 8px; }
.chat-person span svg { width: 10px; }
.chat-actions { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.chat-actions form { display: inline-flex; }
.ai-control-bar { display: flex; min-height: 50px; align-items: center; gap: 9px; padding: 7px 14px; border-bottom: 1px solid; }
.ai-control-bar.ai-running { border-color: #cdeae3; background: #f1faf7; }
.ai-control-bar.human-running { border-color: #efdaac; background: #fff9eb; }
.ai-control-icon { display: grid; width: 30px; height: 30px; place-items: center; flex: 0 0 auto; border-radius: 9px; color: var(--teal-700); background: white; box-shadow: var(--shadow-xs); }
.human-running .ai-control-icon { color: var(--amber); }
.ai-control-icon svg { width: 14px; }
.ai-control-bar > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.ai-control-bar strong { color: var(--ink-800); font-size: 9px; }
.ai-control-bar small { overflow: hidden; color: var(--ink-500); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 10px; font-size: 8px; font-weight: 700; }
.status-chip i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-chip.success { color: var(--success); background: var(--success-soft); }
.status-chip.warning { color: var(--warning); background: var(--warning-soft); }
.message-list { flex: 1; min-height: 0; padding: 17px max(18px, 4%); overflow-y: auto; background: radial-gradient(circle at 10% 10%, rgba(13,148,136,.035), transparent 20%), #f6f7f4; scroll-behavior: smooth; }
.message-date { display: flex; align-items: center; justify-content: center; margin: 4px 0 18px; }
.message-date span { padding: 3px 9px; border: 1px solid var(--ink-150); border-radius: 10px; color: var(--ink-500); background: rgba(255,255,255,.82); font-size: 8px; font-weight: 600; }
.message-row { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 12px; }
.message-row.outgoing { justify-content: flex-end; }
.message-group { display: flex; max-width: min(70%, 570px); flex-direction: column; }
.outgoing .message-group { align-items: flex-end; }
.message-author { display: flex; align-items: center; gap: 4px; margin: 0 5px 3px; color: var(--ink-500); font-size: 8px; font-weight: 600; }
.message-author svg { width: 10px; color: var(--teal-600); }
.message-bubble { position: relative; min-width: 95px; padding: 9px 10px 5px; border: 1px solid var(--ink-150); border-radius: 5px 13px 13px 13px; color: var(--ink-800); background: white; box-shadow: var(--shadow-xs); }
.outgoing .message-bubble { color: #173b36; border-color: #b9e4da; border-radius: 13px 5px 13px 13px; background: #dcf4ed; }
.message-bubble p { margin: 0; color: inherit; font-size: 11px; line-height: 1.52; white-space: pre-wrap; }
.message-time { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin: 3px 0 0 12px; color: var(--ink-400); font-size: 7px; }
.outgoing .message-time { color: #539187; }
.message-time svg { width: 10px; height: 10px; }
.message-attachment { display: grid; grid-template-columns: 25px 1fr 16px; align-items: center; gap: 7px; min-width: 210px; padding: 7px; margin-bottom: 6px; border-radius: 8px; background: rgba(255,255,255,.62); font-size: 9px; }
.message-attachment svg:first-child { padding: 5px; width: 25px; height: 25px; border-radius: 7px; color: var(--teal-700); background: white; }
.message-attachment svg:last-child { width: 13px; }
.empty-chat { display: flex; min-height: 100%; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-500); text-align: center; }
.empty-chat > span { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 10px; border-radius: 15px; color: var(--teal-700); background: white; box-shadow: var(--shadow-sm); }
.empty-chat h3 { margin-bottom: 3px; }.empty-chat p { font-size: 10px; }
.composer-wrap { position: relative; padding: 10px 14px 8px; border-top: 1px solid var(--ink-150); background: var(--paper); }
.composer { display: flex; min-height: 43px; align-items: flex-end; gap: 4px; padding: 4px; border: 1px solid var(--ink-200); border-radius: 13px; background: white; transition: border .18s, box-shadow .18s; }
.composer:focus-within { border-color: var(--teal-400, var(--teal-500)); box-shadow: 0 0 0 3px var(--teal-100); }
.composer textarea { min-height: 33px; max-height: 115px; flex: 1; padding: 8px 4px 5px; border: 0; outline: 0; resize: none; font-size: 11px; }
.composer .icon-button { width: 33px; height: 33px; }
.send-button { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; border-radius: 9px; color: white; background: var(--teal-700); }
.send-button:hover { background: var(--teal-800); }
.send-button svg { width: 15px; }
.composer-wrap > small { display: block; margin-top: 4px; color: var(--ink-400); font-size: 7px; text-align: center; }
.quick-replies { position: absolute; z-index: 10; right: 14px; bottom: 66px; display: flex; width: 260px; flex-direction: column; gap: 3px; padding: 6px; border: 1px solid var(--ink-150); border-radius: 11px; background: white; box-shadow: var(--shadow-md); }
.quick-replies button { padding: 7px 9px; border-radius: 7px; color: var(--ink-700); background: transparent; font-size: 9px; text-align: left; }
.quick-replies button:hover { color: var(--teal-800); background: var(--teal-50); }
.chat-empty { align-items: center; justify-content: center; }
.chat-placeholder { max-width: 390px; padding: 30px; text-align: center; }
.chat-placeholder-art { position: relative; display: grid; width: 76px; height: 76px; place-items: center; margin: 0 auto 19px; border: 1px solid var(--teal-100); border-radius: 24px; color: var(--teal-700); background: linear-gradient(145deg, white, var(--teal-50)); box-shadow: var(--shadow-sm); }
.chat-placeholder-art > svg:first-child { width: 30px; height: 30px; }
.chat-placeholder-art > svg:last-child { position: absolute; top: -5px; right: -5px; width: 25px; height: 25px; padding: 6px; border-radius: 50%; color: white; background: var(--teal-600); }
.chat-placeholder h2 { font-size: 20px; }.chat-placeholder p { font-size: 11px; }
.customer-panel { overflow-y: auto; border-left: 1px solid var(--ink-150); background: var(--paper); }
.customer-panel-head { display: flex; min-height: 53px; align-items: center; justify-content: space-between; padding: 12px 15px; border-bottom: 1px solid var(--ink-100); }
.customer-panel-head h2 { margin: 0; font-size: 13px; }
.customer-profile { padding: 18px 15px 14px; border-bottom: 1px solid var(--ink-100); text-align: center; }
.customer-profile h3 { margin: 8px 0 1px; }.customer-profile p { margin: 0; font-size: 9px; }
.customer-profile-actions { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.customer-profile-actions .icon-button { width: 30px; height: 30px; border-color: var(--ink-150); }
.details-section { padding: 14px 15px; border-bottom: 1px solid var(--ink-100); }
.details-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.details-title h3, .details-section > h3 { margin: 0; color: var(--ink-700); font-size: 10px; letter-spacing: 0; }
.contact-list { display: flex; margin: 0; flex-direction: column; gap: 10px; }
.contact-list > div { display: flex; flex-direction: column; gap: 1px; }
.contact-list dt { display: flex; align-items: center; gap: 6px; color: var(--ink-400); font-size: 8px; }
.contact-list dt svg { width: 11px; }
.contact-list dd { margin: 0 0 0 17px; color: var(--ink-700); font-size: 9px; overflow-wrap: anywhere; }
.ai-label { display: inline-flex; align-items: center; gap: 3px; color: var(--teal-700); font-size: 8px; font-weight: 700; }
.ai-label svg { width: 10px; }
.ai-summary { padding: 9px; border: 1px solid var(--teal-100); border-radius: 9px; background: var(--teal-50); }
.ai-summary p { margin: 0; color: var(--ink-600); font-size: 9px; line-height: 1.55; }
.ai-summary span { display: block; margin-top: 7px; color: var(--teal-700); font-size: 8px; }
.note-input { min-height: 75px; font-size: 9px; line-height: 1.5; }
.save-status { color: var(--ink-500); font-size: 9px; }

/* Profiles and CRM */
.stage-badge.stage-new { color: var(--blue); background: var(--blue-soft); }
.stage-badge.stage-interested { color: var(--violet); background: var(--violet-soft); }
.stage-badge.stage-qualified { color: var(--amber); background: var(--amber-soft); }
.stage-badge.stage-proposal { color: #bd557e; background: #faeaf0; }
.stage-badge.stage-sale { color: var(--success); background: var(--success-soft); }
.stage-badge.stage-lost { color: var(--ink-600); background: var(--ink-100); }
.profile-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; margin-bottom: 17px; }
.profile-main { display: flex; align-items: center; gap: 15px; }.profile-main h1 { margin: 4px 0 1px; }.profile-main p { margin: 0; font-size: 11px; }
.profile-layout { display: grid; grid-template-columns: 290px 1fr; gap: 17px; }
.profile-info { padding: 20px; }.profile-info > h2 { margin-bottom: 18px; }.profile-info .details-section { padding-inline: 0; }.note-copy { margin: 8px 0 0; font-size: 10px; line-height: 1.65; }
.history-card { overflow: hidden; }.timeline { padding: 8px 20px 18px; }
.timeline-item { display: grid; grid-template-columns: 36px 1fr auto 16px; align-items: center; gap: 10px; min-height: 67px; border-bottom: 1px solid var(--ink-100); }
.timeline-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--teal-700); background: var(--teal-100); }.timeline-icon svg { width: 15px; }
.timeline-item > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }.timeline-item strong { color: var(--ink-800); font-size: 10px; }.timeline-item small, .timeline-item time { color: var(--ink-500); font-size: 9px; }.timeline-item > svg { width: 13px; color: var(--ink-400); }
.crm-summary { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)) minmax(260px, 1.4fr); align-items: center; gap: 0; margin-bottom: 12px; border: 1px solid var(--ink-150); border-radius: var(--radius-lg); background: var(--paper); }
.crm-summary > div { display: flex; min-height: 73px; flex-direction: column; justify-content: center; padding: 12px 17px; border-right: 1px solid var(--ink-100); }.crm-summary > div:nth-child(3) { border-right: 0; }.crm-summary small { color: var(--ink-500); font-size: 9px; }.crm-summary strong { color: var(--ink-950); font-family: var(--font-display); font-size: 17px; }.crm-summary span { color: var(--ink-500); font-size: 9px; }
.crm-summary .crm-toolbar { flex-direction: row; align-items: center; gap: 6px; border-left: 1px solid var(--ink-100); border-right: 0; }.crm-toolbar .toolbar-search { width: 100%; }
.kanban-help { display: flex; align-items: center; gap: 6px; margin: 0 2px 10px; color: var(--ink-500); font-size: 9px; }.kanban-help svg { width: 12px; }
.kanban-board { display: grid; grid-auto-columns: minmax(245px, 1fr); grid-auto-flow: column; gap: 11px; padding-bottom: 14px; overflow-x: auto; scroll-snap-type: x proximity; }
.kanban-column { min-height: 460px; overflow: hidden; border: 1px solid var(--ink-150); border-radius: var(--radius-md); background: #eef2f0; scroll-snap-align: start; }
.kanban-column-head { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 8px 10px; border-top: 3px solid var(--ink-300); background: rgba(255,255,255,.62); }
.stage-column-new .kanban-column-head { border-top-color: var(--blue); }.stage-column-interested .kanban-column-head { border-top-color: var(--violet); }.stage-column-qualified .kanban-column-head { border-top-color: var(--amber); }.stage-column-proposal .kanban-column-head { border-top-color: #c75f88; }.stage-column-sale .kanban-column-head { border-top-color: var(--success); }.stage-column-lost .kanban-column-head { border-top-color: var(--ink-500); }
.kanban-column-head > div { display: flex; align-items: center; gap: 7px; }.kanban-column-head strong { color: var(--ink-800); font-size: 10px; }.stage-symbol { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; color: var(--ink-600); background: white; }.stage-symbol svg { width: 12px; }.column-count { display: grid; min-width: 19px; height: 19px; place-items: center; border-radius: 9px; color: var(--ink-500); background: rgba(255,255,255,.82); font-size: 8px; font-weight: 700; }
.kanban-dropzone { min-height: 412px; padding: 8px; transition: background .18s; }.kanban-dropzone.is-drag-over { background: var(--teal-100); }
.kanban-card { position: relative; padding: 11px; margin-bottom: 8px; border: 1px solid var(--ink-150); border-radius: 11px; background: var(--paper); box-shadow: var(--shadow-xs); cursor: grab; transition: border-color .18s, box-shadow .18s, transform .18s; }.kanban-card:hover { border-color: var(--teal-200); box-shadow: var(--shadow-sm); transform: translateY(-1px); }.kanban-card.is-dragging { opacity: .48; transform: rotate(1.5deg); }
.kanban-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; }.kanban-card .person-cell { min-width: 0; }.kanban-card .person-cell strong { max-width: 130px; }.opportunity-title { margin: 9px 0 7px; color: var(--ink-700); font-size: 10px; }
.kanban-tags { display: flex; gap: 4px; min-height: 19px; }.kanban-card-value { display: flex; align-items: flex-end; justify-content: space-between; padding: 9px 0; margin-top: 7px; border-top: 1px solid var(--ink-100); }.kanban-card-value span { display: flex; align-items: center; gap: 4px; color: var(--ink-500); font-size: 8px; }.kanban-card-value span svg { width: 10px; }.kanban-card-value strong { color: var(--ink-900); font-size: 11px; }
.kanban-card footer { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: var(--ink-500); font-size: 8px; }.kanban-card footer span { display: flex; align-items: center; gap: 3px; }.kanban-card footer svg { width: 10px; }.kanban-card .next-action { color: var(--amber); }
.kanban-column-empty { display: flex; min-height: 75px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px dashed var(--ink-300); border-radius: 10px; color: var(--ink-400); font-size: 8px; }.kanban-column-empty svg { width: 15px; }
.segmented-field, .tone-selector, .checkbox-card-grid { display: grid; padding: 0; margin: 0; border: 0; gap: 8px; }.segmented-field { grid-template-columns: repeat(3, 1fr); }.segmented-field legend, .tone-selector legend, .checkbox-card-grid legend { grid-column: 1 / -1; margin-bottom: 1px; }
.segmented-field input, .tone-selector input, .checkbox-card-grid input { position: absolute; opacity: 0; pointer-events: none; }.segmented-field label > span, .tone-selector label > span { display: flex; height: 100%; flex-direction: column; align-items: center; padding: 12px 7px; border: 1px solid var(--ink-200); border-radius: var(--radius-sm); background: white; text-align: center; cursor: pointer; transition: .18s; }.segmented-field label > span svg, .tone-selector label > span svg { width: 17px; margin-bottom: 4px; color: var(--ink-500); }.segmented-field label > span strong, .tone-selector label > span strong { color: var(--ink-700); font-size: 10px; }.segmented-field label > span small, .tone-selector label > span small { color: var(--ink-500); font-size: 8px; }.segmented-field input:checked + span, .tone-selector input:checked + span { color: var(--teal-700); border-color: var(--teal-500); background: var(--teal-50); box-shadow: 0 0 0 2px var(--teal-100); }.segmented-field input:checked + span svg, .tone-selector input:checked + span svg { color: var(--teal-700); }

/* Products and inventory */
.view-switch { display: inline-flex; padding: 3px; border: 1px solid var(--ink-200); border-radius: 9px; background: var(--ink-50); }
.view-switch button { display: grid; min-width: 28px; height: 28px; place-items: center; padding: 0 8px; border-radius: 6px; color: var(--ink-500); background: transparent; font-size: 9px; font-weight: 600; }
.view-switch button.is-active { color: var(--teal-700); background: white; box-shadow: var(--shadow-xs); }
.view-switch svg { width: 13px; }
.product-results { padding: 15px; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.product-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--ink-150); border-radius: var(--radius-md); background: white; transition: border-color .18s, box-shadow .18s, transform .18s; }
.product-card:hover { border-color: var(--teal-200); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.product-card-media { position: relative; height: 162px; overflow: hidden; background: var(--ink-50); }
.product-card-media > img, .product-placeholder { display: grid; width: 100%; height: 100%; place-items: center; object-fit: cover; }
.product-placeholder svg { width: 35px; height: 35px; opacity: .68; }
.product-card-media > .status-badge { position: absolute; top: 9px; left: 9px; box-shadow: var(--shadow-xs); }
.product-card-menu { position: absolute; top: 7px; right: 7px; }
.product-card-menu > .icon-button { width: 30px; height: 30px; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.9); backdrop-filter: blur(5px); }
.product-card-body { min-height: 142px; padding: 13px 13px 10px; }
.product-category { margin-bottom: 4px; color: var(--teal-700); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.product-card-body h2 { overflow: hidden; margin-bottom: 4px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.product-card-body p { display: -webkit-box; height: 34px; margin-bottom: 12px; overflow: hidden; font-size: 9px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-price { display: flex; align-items: baseline; gap: 6px; }
.product-price strong { color: var(--ink-950); font-family: var(--font-display); font-size: 16px; }
.product-price del { color: var(--ink-400); font-size: 9px; }
.product-card-footer { display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 7px; padding: 8px 13px; border-top: 1px solid var(--ink-100); color: var(--ink-500); font-size: 8px; }
.product-card-footer span { display: flex; min-width: 0; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-card-footer svg { width: 11px; }.product-card-footer .low-stock { color: var(--warning); font-weight: 700; }
.grid-empty { grid-column: 1 / -1; }
.product-results .filter-empty { grid-column: 1 / -1; }
.product-results.product-table { display: block; padding: 0; }
.product-results.product-table .product-card { display: grid; grid-template-columns: 90px minmax(200px,1fr) auto; align-items: center; margin: 0; border-width: 0 0 1px; border-radius: 0; transform: none; }
.product-results.product-table .product-card-media { height: 70px; margin: 9px; border-radius: 9px; }.product-results.product-table .product-card-body { min-height: auto; }.product-results.product-table .product-card-body p { height: auto; margin-bottom: 6px; }.product-results.product-table .product-card-footer { min-width: 245px; border-top: 0; }
.form-section { padding: 20px 0; border-bottom: 1px solid var(--ink-100); }.form-section:first-child { padding-top: 0; }.form-section:last-child { border-bottom: 0; }.form-section > h3 { margin-bottom: 13px; font-size: 13px; }
.form-section-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }.form-section-head h3 { margin: 0; font-size: 13px; }.form-section-head p { margin: 2px 0 0; font-size: 9px; }
.form-section-inline { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.form-section-inline h3 { margin-bottom: 2px; }.form-section-inline p { margin: 0; font-size: 9px; }
.product-form-layout { display: grid; grid-template-columns: 180px 1fr; gap: 16px; }
.image-uploader { display: grid; min-height: 188px; place-items: center; overflow: hidden; border: 1px dashed var(--ink-300); border-radius: var(--radius-md); color: var(--ink-500); background: var(--ink-50); cursor: pointer; transition: .18s; }
.image-uploader:hover { color: var(--teal-700); border-color: var(--teal-500); background: var(--teal-50); }.image-uploader input { position: absolute; opacity: 0; pointer-events: none; }.image-uploader > span { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: 15px; text-align: center; }.image-uploader svg { width: 24px; height: 24px; margin-bottom: 7px; }.image-uploader strong { color: var(--ink-700); font-size: 10px; }.image-uploader small { font-size: 8px; }.image-uploader img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
.variant-list { display: flex; flex-direction: column; gap: 7px; }.variant-empty { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 60px; border: 1px dashed var(--ink-200); border-radius: 9px; color: var(--ink-400); font-size: 9px; }.variant-empty svg { width: 14px; }
.variant-row { display: grid; grid-template-columns: 20px repeat(3, minmax(105px, 1fr)) minmax(80px,.7fr) minmax(70px,.55fr) 30px; align-items: end; gap: 7px; padding: 9px; border: 1px solid var(--ink-150); border-radius: 9px; background: var(--ink-50); }.variant-row .field { gap: 3px; }.variant-row .field label { font-size: 8px; }.variant-row .field input { min-height: 34px; padding: 6px 8px; font-size: 10px; }.drag-handle { align-self: center; color: var(--ink-400); cursor: grab; }.drag-handle svg { width: 13px; }
.inventory-alert .text-button { margin-left: auto; }
.sku-code { padding: 3px 6px; border-radius: 5px; color: var(--ink-600); background: var(--ink-100); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; }.stock-number { color: var(--ink-900); font-family: var(--font-display); font-size: 15px; }.stock-number.low { color: var(--warning); }.stock-number.out { color: var(--danger); }
.movement-current { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-radius: 8px; color: var(--ink-600); background: var(--ink-50); font-size: 9px; }.movement-current strong { color: var(--ink-800); }.movement-preview { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--teal-100); border-radius: 9px; color: var(--teal-800); background: var(--teal-50); font-size: 10px; }.movement-preview strong { font-family: var(--font-display); font-size: 15px; }
.history-filters { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }.history-filters .toolbar-search { width: 70%; }.movement-list { border: 1px solid var(--ink-150); border-radius: 10px; }.movement-item { display: grid; grid-template-columns: 34px 1fr 65px 95px; align-items: center; gap: 9px; min-height: 58px; padding: 9px 11px; border-bottom: 1px solid var(--ink-100); }.movement-item:last-child { border-bottom: 0; }.movement-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; }.movement-icon svg { width: 14px; }.movement-icon.entry { color: var(--success); background: var(--success-soft); }.movement-icon.exit { color: var(--danger); background: var(--danger-soft); }.movement-icon.adjustment { color: var(--blue); background: var(--blue-soft); }.movement-item > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }.movement-item > span:nth-child(2) strong { color: var(--ink-800); font-size: 10px; }.movement-item small { color: var(--ink-500); font-size: 8px; }.movement-quantity { font-family: var(--font-display); font-size: 12px; text-align: right; }.movement-quantity.entry { color: var(--success); }.movement-quantity.exit { color: var(--danger); }.movement-item time { display: flex; flex-direction: column; color: var(--ink-600); font-size: 9px; text-align: right; }

/* Delivery */
.delivery-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 17px; }.delivery-main { min-width: 0; }.delivery-side { display: flex; flex-direction: column; gap: 14px; }
.pickup-card { display: flex; align-items: center; gap: 13px; padding: 16px; margin-bottom: 20px; }.pickup-icon { display: grid; width: 44px; height: 44px; place-items: center; flex: 0 0 auto; border-radius: 12px; color: var(--teal-700); background: var(--teal-100); }.pickup-icon svg { width: 19px; }.pickup-card > div:nth-child(2) { flex: 1; }.pickup-card h2 { margin-bottom: 2px; font-size: 14px; }.pickup-card p { margin: 0; font-size: 9px; }.pickup-card > div:nth-child(2) > span { display: flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--ink-600); font-size: 9px; }.pickup-card > div:nth-child(2) > span svg { width: 11px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 10px; }.section-heading h2 { margin: 0; font-size: 16px; }.section-heading p { margin: 2px 0 0; font-size: 9px; }
.delivery-rule-list { display: flex; flex-direction: column; gap: 9px; }.delivery-rule-card { display: grid; grid-template-columns: 40px 1fr 35px; align-items: start; gap: 11px; padding: 14px; border: 1px solid var(--ink-150); border-radius: var(--radius-md); background: var(--paper); transition: border-color .18s, box-shadow .18s; }.delivery-rule-card:hover { border-color: var(--teal-200); box-shadow: var(--shadow-sm); }.delivery-rule-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 11px; color: var(--teal-700); background: var(--teal-100); }.delivery-rule-icon svg { width: 17px; }
.delivery-rule-title { display: flex; align-items: center; gap: 8px; }.delivery-rule-title h3 { margin: 0; font-size: 13px; }.delivery-rule-main > p { margin: 2px 0 9px; font-size: 9px; }.delivery-rule-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }.delivery-rule-metrics > span { display: flex; flex-direction: column; padding: 7px 9px; border-radius: 8px; background: var(--ink-50); }.delivery-rule-metrics small { color: var(--ink-500); font-size: 8px; }.delivery-rule-metrics strong { color: var(--ink-800); font-size: 10px; }.free-shipping-note { display: flex; align-items: center; gap: 5px; margin-top: 7px; color: var(--success); font-size: 8px; font-weight: 600; }.free-shipping-note svg { width: 11px; }
.simulator-card { padding: 17px; }.simulator-card > header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }.simulator-card h2 { margin: 0; font-size: 14px; }.simulator-card header p { margin: 1px 0 0; font-size: 9px; }.simulator-placeholder { display: flex; min-height: 105px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--ink-400); font-size: 9px; text-align: center; }.simulator-placeholder svg { width: 22px; }.simulation-result { padding: 12px; margin-top: 12px; border: 1px solid var(--teal-100); border-radius: 9px; background: var(--teal-50); }.simulation-result strong { display: block; color: var(--teal-900); }.simulation-result span { color: var(--ink-600); font-size: 9px; }
.ai-info-card, .help-card { display: flex; align-items: flex-start; gap: 10px; padding: 15px; }.ai-info-card > span, .help-card > span { display: grid; width: 33px; height: 33px; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--violet); background: var(--violet-soft); }.ai-info-card svg, .help-card > span svg { width: 15px; }.ai-info-card h3, .help-card h3 { margin: 0; }.ai-info-card p, .help-card p { margin: 3px 0 7px; font-size: 9px; line-height: 1.55; }.ai-info-card a, .help-card a { display: flex; align-items: center; gap: 4px; color: var(--teal-700); font-size: 9px; font-weight: 700; }.ai-info-card a svg, .help-card a svg { width: 11px; }
.compact-switch { padding: 4px 0; border-top: 0; }

/* Appointments */
.page-tabs { display: flex; align-items: center; gap: 3px; width: fit-content; padding: 4px; margin-bottom: 17px; border: 1px solid var(--ink-150); border-radius: 11px; background: white; }
.page-tabs > button { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; color: var(--ink-500); background: transparent; font-size: 10px; font-weight: 600; }.page-tabs > button:hover { color: var(--teal-700); }.page-tabs > button.is-active { color: var(--teal-800); background: var(--teal-50); box-shadow: inset 0 0 0 1px var(--teal-100); }.page-tabs svg { width: 13px; }.page-tabs button > span { display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border-radius: 9px; background: white; font-size: 8px; }
.agenda-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 13px; margin-bottom: 12px; }.date-navigation, .agenda-filters { display: flex; align-items: center; gap: 7px; }.date-navigation h2 { margin: 0 0 0 7px; font-size: 14px; }.agenda-filters .view-switch { margin-left: 4px; }
.appointment-summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 12px; }.appointment-summary-grid > article { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--ink-150); border-radius: var(--radius-md); background: white; }.appointment-summary-grid article > span:last-child { display: flex; flex-direction: column; }.appointment-summary-grid small { color: var(--ink-500); font-size: 8px; }.appointment-summary-grid strong { font-family: var(--font-display); font-size: 17px; }
.appointment-list { overflow: hidden; }.appointment-day > header { display: flex; min-height: 44px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--ink-100); background: var(--ink-50); }.appointment-day > header > div { display: flex; align-items: baseline; gap: 7px; }.appointment-day > header strong { color: var(--ink-800); font-size: 11px; }.appointment-day > header span { color: var(--ink-500); font-size: 8px; }
.appointment-card { display: grid; grid-template-columns: 62px 3px minmax(170px,1.15fr) minmax(180px,1fr) 95px 35px; align-items: center; gap: 12px; min-height: 74px; padding: 10px 15px; border-bottom: 1px solid var(--ink-100); }.appointment-card:last-child { border-bottom: 0; }.appointment-card > time { display: flex; flex-direction: column; }.appointment-card > time strong { color: var(--ink-900); font-family: var(--font-display); font-size: 12px; }.appointment-card > time small { color: var(--ink-400); font-size: 8px; }.appointment-color, .service-color { display: block; align-self: stretch; border-radius: 3px; background: var(--service-color); }.appointment-client { display: flex; align-items: center; gap: 8px; }.appointment-client > span:last-child, .appointment-service { display: flex; min-width: 0; flex-direction: column; }.appointment-client strong, .appointment-service strong { overflow: hidden; color: var(--ink-800); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.appointment-client small, .appointment-service small { display: flex; align-items: center; gap: 3px; color: var(--ink-500); font-size: 8px; }.appointment-service svg { width: 10px; }
.tab-section-heading { margin-top: 5px; }.service-grid, .document-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }.service-card { position: relative; overflow: hidden; padding: 16px; }.service-card > .service-color { position: absolute; inset: 0 auto 0 0; width: 4px; }.service-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.service-card h3 { font-size: 13px; }.service-card > p { min-height: 32px; margin-bottom: 13px; font-size: 9px; }.service-meta { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--ink-100); }.service-meta span { display: flex; align-items: center; gap: 4px; color: var(--ink-500); font-size: 9px; }.service-meta svg { width: 11px; }.service-meta strong { color: var(--ink-900); font-size: 11px; }.service-card > footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; color: var(--ink-500); font-size: 8px; }
.settings-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; align-items: start; gap: 17px; }.appointment-settings { grid-template-columns: minmax(0,1.4fr) minmax(300px,.75fr); }.appointment-settings > aside { display: flex; flex-direction: column; gap: 14px; }.business-hours-list { padding: 8px 20px 15px; }.business-hour-row { display: grid; grid-template-columns: 42px 115px 1fr; align-items: center; gap: 10px; min-height: 51px; border-bottom: 1px solid var(--ink-100); }.business-hour-row strong { color: var(--ink-700); font-size: 10px; }.time-range { display: flex; align-items: center; gap: 7px; }.time-range input { min-height: 34px; padding: 5px 7px; }.time-range span { color: var(--ink-400); font-size: 9px; }.settings-card-footer { display: flex; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--ink-100); }.block-list { padding: 8px 15px 14px; }.block-list > div { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ink-100); }.block-list > div:last-child { border-bottom: 0; }.block-list .summary-icon { width: 32px; height: 32px; }.block-list > div > span:nth-child(2) { display: flex; flex-direction: column; }.block-list strong { color: var(--ink-800); font-size: 9px; }.block-list small { color: var(--ink-500); font-size: 8px; }
.availability-feedback { padding: 10px 11px; border-radius: 8px; font-size: 10px; }.availability-feedback.success { color: var(--success); background: var(--success-soft); }.availability-feedback.error { color: var(--danger); background: var(--danger-soft); }

/* Knowledge base */
.ai-knowledge-banner { display: flex; min-height: 72px; align-items: center; gap: 12px; padding: 13px 15px; margin-bottom: 16px; border: 1px solid #ddd6fa; border-radius: var(--radius-md); background: linear-gradient(100deg,var(--violet-soft),#fbfaff); }.ai-knowledge-banner > span { display: grid; width: 39px; height: 39px; place-items: center; flex: 0 0 auto; border-radius: 11px; color: var(--violet); background: white; }.ai-knowledge-banner > span svg { width: 18px; }.ai-knowledge-banner > div { flex: 1; }.ai-knowledge-banner strong { color: var(--ink-800); font-size: 11px; }.ai-knowledge-banner p { margin: 1px 0 0; font-size: 9px; }.ai-knowledge-banner > a { display: flex; align-items: center; gap: 4px; color: var(--violet); font-size: 9px; font-weight: 700; }.ai-knowledge-banner > a svg { width: 11px; }
.faq-list { min-height: 180px; }.faq-item { border-bottom: 1px solid var(--ink-100); }.faq-item:last-child { border-bottom: 0; }.faq-question { display: grid; width: 100%; grid-template-columns: 36px 1fr 22px; align-items: center; gap: 11px; min-height: 67px; padding: 11px 17px; background: transparent; text-align: left; }.faq-question:hover { background: var(--ink-50); }.faq-symbol { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--teal-700); background: var(--teal-100); }.faq-symbol svg { width: 15px; }.faq-question > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }.faq-question strong { color: var(--ink-800); font-size: 11px; }.faq-question small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; }.faq-question small em { color: var(--ink-400); font-size: 8px; font-style: normal; }.faq-chevron { width: 15px; color: var(--ink-400); transition: transform .2s; }.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-answer { padding: 0 17px 15px 64px; background: linear-gradient(180deg,rgba(247,249,248,.7),white); }.faq-answer-copy { padding: 12px; border-left: 2px solid var(--teal-500); border-radius: 0 9px 9px 0; background: var(--teal-50); }.faq-answer-copy span { color: var(--teal-700); font-size: 8px; font-weight: 800; text-transform: uppercase; }.faq-answer-copy p { margin: 4px 0 0; color: var(--ink-700); font-size: 10px; line-height: 1.7; white-space: pre-wrap; }.faq-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 8px; }.faq-actions > span { margin-right: auto; color: var(--ink-400); font-size: 8px; }
.document-card { position: relative; display: grid; grid-template-columns: 48px 1fr 32px; gap: 11px; padding: 15px; }.document-type { display: grid; width: 46px; height: 53px; place-items: center; border-radius: 7px 7px 12px 7px; color: var(--danger); background: var(--danger-soft); }.document-type.docx { color: var(--blue); background: var(--blue-soft); }.document-type.txt { color: var(--ink-600); background: var(--ink-100); }.document-type svg { width: 20px; }.document-card h3 { overflow: hidden; margin: 2px 0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.document-card p { margin: 0 0 6px; font-size: 8px; }.document-card footer { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--ink-100); color: var(--ink-500); font-size: 8px; }.document-card footer span { display: flex; align-items: center; gap: 4px; }.document-card footer svg { width: 10px; }
.file-dropzone { display: flex; min-height: 180px; flex-direction: column; align-items: center; justify-content: center; padding: 20px; border: 1px dashed var(--ink-300); border-radius: var(--radius-md); color: var(--ink-500); background: var(--ink-50); text-align: center; cursor: pointer; transition: .18s; }.file-dropzone:hover, .file-dropzone.is-dragover { color: var(--teal-700); border-color: var(--teal-500); background: var(--teal-50); }.file-dropzone input { position: absolute; opacity: 0; }.file-dropzone .empty-icon { width: 44px; height: 44px; margin-bottom: 9px; }.file-dropzone strong { color: var(--ink-700); font-size: 10px; }.file-dropzone small { font-size: 8px; }.file-dropzone em { margin-top: 8px; color: var(--teal-700); font-size: 9px; font-style: normal; font-weight: 600; }

/* Settings */
.settings-subnav { display: flex; gap: 3px; width: fit-content; padding: 4px; margin-bottom: 17px; border: 1px solid var(--ink-150); border-radius: 11px; background: white; }.settings-subnav a { display: flex; min-height: 34px; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; color: var(--ink-500); font-size: 10px; font-weight: 600; }.settings-subnav a:hover { color: var(--teal-700); }.settings-subnav a.is-active { color: var(--teal-800); background: var(--teal-50); }.settings-subnav svg { width: 13px; }
.settings-main { display: flex; min-width: 0; flex-direction: column; gap: 14px; }.settings-card { overflow: hidden; }.settings-card-header { display: flex; align-items: center; gap: 11px; padding: 17px 19px; border-bottom: 1px solid var(--ink-100); }.settings-number { display: grid; width: 31px; height: 31px; place-items: center; flex: 0 0 auto; border-radius: 9px; color: var(--teal-800); background: var(--teal-100); font-family: var(--font-display); font-size: 9px; font-weight: 800; }.settings-card-header > div { flex: 1; }.settings-card-header h2 { margin: 0; font-size: 14px; }.settings-card-header p { margin: 2px 0 0; font-size: 9px; }.settings-card-body { padding: 18px 19px; }.settings-card-body.form-stack { gap: 17px; }.tone-selector { grid-template-columns: repeat(4,minmax(0,1fr)); }.tone-selector label > span { min-height: 84px; }.writing-helper { display: flex; align-items: flex-start; gap: 7px; padding: 9px 10px; border-radius: 8px; color: var(--ink-500); background: var(--ink-50); font-size: 9px; }.writing-helper svg { width: 14px; flex: 0 0 auto; color: var(--amber); }
.rule-builder { display: flex; flex-direction: column; gap: 7px; }.rule-row { display: grid; grid-template-columns: 20px 1fr 30px; align-items: center; gap: 5px; }.rule-row > svg { width: 13px; color: var(--ink-400); }.rule-row input { min-height: 38px; padding: 8px 10px; }.switch-row.emphasized { padding: 13px; border: 1px solid var(--teal-100); border-radius: 10px; background: var(--teal-50); }
.checkbox-card-grid { grid-template-columns: repeat(2,1fr); }.checkbox-card-grid label span { display: flex; min-height: 39px; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--ink-200); border-radius: 9px; color: var(--ink-600); background: white; font-size: 9px; cursor: pointer; }.checkbox-card-grid label span > svg { display: none; width: 13px; padding: 2px; border-radius: 50%; color: white; background: var(--teal-700); }.checkbox-card-grid input:checked + span { color: var(--teal-800); border-color: var(--teal-400, var(--teal-500)); background: var(--teal-50); }.checkbox-card-grid input:checked + span > svg { display: block; }
.settings-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 15px; border: 1px solid var(--ink-150); border-radius: var(--radius-md); background: white; box-shadow: var(--shadow-sm); }.settings-save-bar > span { display: flex; align-items: center; gap: 6px; color: var(--ink-500); font-size: 9px; }.settings-save-bar > span svg { width: 13px; color: var(--teal-700); }
.settings-preview-column, .whatsapp-side { display: flex; flex-direction: column; gap: 14px; }.sticky-card { position: sticky; top: calc(var(--topbar-height) + 16px); }.ai-preview-card { overflow: hidden; }.ai-preview-card > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--ink-100); }.ai-preview-card > header > div { display: flex; align-items: center; gap: 8px; }.ai-preview-card > header > div > span:last-child { display: flex; flex-direction: column; }.ai-preview-card header strong { color: var(--ink-800); font-size: 10px; }.ai-preview-card header small { display: flex; align-items: center; gap: 4px; color: var(--ink-500); font-size: 8px; }.ai-preview-card header small i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }.ai-avatar { color: white; background: linear-gradient(135deg,var(--teal-600),var(--teal-800)); }.ai-avatar svg { width: 16px; }
.preview-chat { min-height: 310px; padding: 17px 14px; background: #f4f6f3; }.preview-date { margin-bottom: 15px; color: var(--ink-400); font-size: 8px; text-align: center; }.preview-message { width: fit-content; max-width: 86%; padding: 9px 10px; margin-bottom: 9px; border-radius: 5px 11px 11px 11px; color: var(--ink-700); background: white; box-shadow: var(--shadow-xs); font-size: 9px; line-height: 1.55; }.preview-message.outgoing { margin-left: auto; border-radius: 11px 5px 11px 11px; background: #dcf4ed; }.preview-message > span { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 4px; color: var(--ink-400); font-size: 7px; }.preview-message > span svg { width: 9px; }.typing-dots { display: flex; width: fit-content; gap: 3px; padding: 9px 11px; border-radius: 5px 11px 11px 11px; background: white; }.typing-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-300); animation: typing 1.2s infinite; }.typing-dots i:nth-child(2) { animation-delay: .15s; }.typing-dots i:nth-child(3) { animation-delay: .3s; }.ai-preview-card > footer { display: flex; align-items: center; gap: 5px; padding: 9px 12px; color: var(--ink-400); border-top: 1px solid var(--ink-100); font-size: 8px; }.ai-preview-card > footer svg { width: 11px; }
.ai-health-card { display: flex; align-items: center; justify-content: space-between; padding: 13px; }.ai-health-card > div { display: flex; align-items: center; gap: 8px; }.ai-health-card > div > span:last-child { display: flex; flex-direction: column; }.ai-health-card strong { color: var(--ink-800); font-size: 9px; }.ai-health-card small { color: var(--ink-500); font-size: 8px; }.ai-health-card a { display: flex; align-items: center; gap: 3px; color: var(--teal-700); font-size: 8px; font-weight: 700; }.ai-health-card a svg { width: 10px; }.status-orb { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; }.status-orb.success { color: var(--success); background: var(--success-soft); }.status-orb.warning { color: var(--warning); background: var(--warning-soft); }.status-orb svg { width: 15px; }
.connection-hero { display: flex; align-items: center; gap: 14px; padding: 18px; margin-bottom: 17px; }.connection-hero.connected { border-color: #c7e8da; background: linear-gradient(95deg,#f0faf6,white); }.connection-hero.disconnected { border-color: #ecd8b8; background: linear-gradient(95deg,#fff8e9,white); }.connection-hero-icon { position: relative; display: grid; width: 54px; height: 54px; place-items: center; flex: 0 0 auto; border-radius: 16px; color: white; background: #21a569; box-shadow: 0 8px 18px rgba(33,165,105,.2); }.disconnected .connection-hero-icon { background: var(--amber); }.connection-hero-icon > svg:first-child { width: 26px; height: 26px; }.connection-check { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; padding: 3px; border: 2px solid white; border-radius: 50%; color: white; background: var(--success); }.disconnected .connection-check { background: var(--danger); }.connection-hero > div { flex: 1; }.connection-hero h2 { margin: 6px 0 0; font-size: 17px; }.connection-hero p { margin: 1px 0 0; font-size: 9px; }.connection-meta { display: flex; gap: 13px; margin-top: 8px; }.connection-meta span { display: flex; align-items: center; gap: 4px; color: var(--ink-500); font-size: 8px; }.connection-meta svg { width: 10px; }.danger-outline { color: var(--danger); border-color: #edc4c0; }.danger-outline:hover { color: var(--danger-dark); border-color: var(--danger); }
.whatsapp-settings-grid { display: grid; grid-template-columns: minmax(0,1fr) 310px; align-items: start; gap: 17px; }.verified-label { display: inline-flex; align-items: center; gap: 3px; color: var(--success); font-size: 9px; font-weight: 700; }.verified-label svg { width: 11px; }.readonly-field { display: flex; flex-direction: column; gap: 6px; }.readonly-field > label { color: var(--ink-800); font-size: 11px; font-weight: 700; }.readonly-field > div { display: flex; min-height: 41px; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px 8px 11px; border: 1px solid var(--ink-200); border-radius: 9px; background: var(--ink-50); }.readonly-field code { overflow: hidden; color: var(--ink-700); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.copy-button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 6px; color: var(--teal-700); background: transparent; font-size: 8px; font-weight: 700; }.copy-button:hover { background: var(--teal-50); }.copy-button svg { width: 11px; }.webhook-events { display: flex; flex-direction: column; gap: 7px; }.webhook-events > strong { font-size: 10px; }.webhook-events > div { display: flex; flex-wrap: wrap; gap: 6px; }.webhook-events span { display: flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 7px; color: var(--success); background: var(--success-soft); font-size: 8px; }.webhook-events svg { width: 10px; }.webhook-events code { color: var(--ink-700); }
.integration-health, .webhook-log-card { overflow: hidden; }.integration-health > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px 8px; }.integration-health h2 { margin: 0; font-size: 13px; }.health-score { display: flex; flex-direction: column; align-items: center; padding: 4px 15px 14px; }.health-score strong { color: var(--teal-800); font-family: var(--font-display); font-size: 37px; }.health-score strong small { font-size: 15px; }.health-score span { color: var(--ink-500); font-size: 8px; }.health-checks { padding: 0 15px 13px; }.health-checks > div { display: flex; align-items: center; justify-content: space-between; min-height: 31px; border-top: 1px solid var(--ink-100); color: var(--ink-600); font-size: 8px; }.health-checks span { display: flex; align-items: center; gap: 5px; }.health-checks svg { width: 11px; color: var(--teal-600); }.health-checks strong { color: var(--ink-800); font-size: 8px; }
.webhook-log-list { padding: 7px 13px 13px; }.webhook-log-list > div { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 7px; min-height: 45px; border-bottom: 1px solid var(--ink-100); }.webhook-log-list > div:last-child { border-bottom: 0; }.log-status { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 7px; }.log-status.success { color: var(--success); background: var(--success-soft); }.log-status.error { color: var(--danger); background: var(--danger-soft); }.log-status svg { width: 10px; }.webhook-log-list > div > span:nth-child(2) { display: flex; flex-direction: column; }.webhook-log-list strong { color: var(--ink-700); font-size: 8px; }.webhook-log-list small, .webhook-log-list time { color: var(--ink-500); font-size: 7px; }

.qr-code-layout { display: grid; grid-template-columns: minmax(220px,280px) minmax(0,1fr); align-items: center; gap: 24px; }.qr-code-frame { display: grid; width: 100%; max-width: 280px; aspect-ratio: 1; place-items: center; padding: 10px; border: 1px solid var(--ink-200); border-radius: 10px; background: white; }.qr-code-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }.qr-code-frame img[hidden], .qr-code-placeholder[hidden] { display: none; }.qr-code-placeholder { display: flex; max-width: 190px; flex-direction: column; align-items: center; gap: 7px; color: var(--ink-500); text-align: center; }.qr-code-placeholder svg { width: 42px; height: 42px; margin-bottom: 3px; color: var(--teal-600); }.qr-code-placeholder strong { color: var(--ink-800); font-size: 11px; }.qr-code-placeholder span { font-size: 9px; line-height: 1.5; }.qr-code-copy h3 { margin: 0 0 10px; font-size: 13px; }.qr-code-copy ol { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; margin: 0; color: var(--ink-600); font-size: 10px; line-height: 1.5; }.qr-code-feedback { min-height: 30px; padding: 9px 10px; margin: 14px 0 12px; border-left: 3px solid var(--teal-500); color: var(--ink-600); background: var(--ink-50); font-size: 9px; line-height: 1.45; }.qr-code-actions { display: flex; flex-wrap: wrap; gap: 8px; }.qr-code-actions .button { min-height: 44px; }.qr-code-actions .button:disabled { cursor: not-allowed; opacity: .48; }.qr-print-only { display: none; }

/* Error screens */
.error-page { min-height: 100vh; background: radial-gradient(circle at 50% 30%,var(--teal-50),var(--paper) 45%,var(--canvas)); }.error-shell { display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }.error-shell > .brand { position: absolute; top: 28px; left: 30px; }.error-art { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: var(--teal-800); font-family: var(--font-display); font-size: 78px; font-weight: 800; letter-spacing: -.08em; }.error-art > svg { width: 64px; height: 64px; padding: 16px; border: 1px solid var(--teal-100); border-radius: 20px; color: var(--teal-600); background: white; box-shadow: var(--shadow-md); }.error-art-server { display: grid; width: 110px; height: 110px; place-items: center; border-radius: 34px; background: var(--teal-100); }.error-art-server > svg { width: 58px; height: 58px; padding: 0; border: 0; color: var(--teal-700); background: transparent; box-shadow: none; }.error-shell h1 { margin-bottom: 8px; font-size: clamp(28px,4vw,42px); }.error-shell > p { max-width: 490px; margin-bottom: 22px; }.error-shell > div:last-child { display: flex; gap: 9px; }
@keyframes typing { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }

/* Responsive behavior */
@media (max-width: 1450px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .conversation-shell { grid-template-columns: 285px minmax(370px, 1fr) 265px; }
}

@media (max-width: 1240px) {
  .main-content { padding: 27px 25px 44px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-strip > div:nth-child(2) { border-right: 0; }
  .summary-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--ink-100); }
  .dashboard-lower-grid { grid-template-columns: 1fr 1fr; }
  .conversation-shell { grid-template-columns: 285px minmax(380px, 1fr); }
  .customer-panel { position: absolute; z-index: 20; top: 0; right: 0; bottom: 0; width: 300px; box-shadow: var(--shadow-lg); transform: translateX(105%); transition: transform .25s var(--ease); }
  .conversation-shell[data-mobile-panel="details"] .customer-panel { transform: translateX(0); }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-grid, .document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-layout, .whatsapp-settings-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 1023px) {
  :root { --topbar-height: 64px; }
  .app-column { padding-left: 0; }
  .sidebar { width: min(285px, 86vw); box-shadow: var(--shadow-lg); transform: translateX(-105%); transition: transform .26s var(--ease); }
  .sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-close, .menu-button { display: inline-grid !important; }
  .mobile-overlay { position: fixed; z-index: 90; inset: 0; background: rgba(7,37,33,.42); backdrop-filter: blur(2px); }
  .sidebar-open .mobile-overlay { display: block; }
  .topbar { padding-inline: 19px; }
  .topbar-left { flex: 1; }
  .global-search { width: min(390px, 55vw); }
  .main-content { padding: 25px 21px 40px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); }
  .delivery-layout { grid-template-columns: 1fr; }
  .delivery-side { display: grid; grid-template-columns: 1fr 1fr; }
  .appointment-settings { grid-template-columns: 1fr; }
  .appointment-settings > aside { display: grid; grid-template-columns: 1fr 1fr; }
  .appointment-card { grid-template-columns: 58px 3px minmax(160px, 1fr) minmax(160px, 1fr) 85px 30px; gap: 8px; padding-inline: 11px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variant-row { grid-template-columns: 18px repeat(2,minmax(100px,1fr)) 30px; }
  .variant-row .field:nth-of-type(3), .variant-row .field:nth-of-type(4), .variant-row .field:nth-of-type(5) { grid-row: 2; }
  .variant-row .field:nth-of-type(3) { grid-column: 2; }.variant-row .field:nth-of-type(4) { grid-column: 3; }
  .auth-shell { grid-template-columns: minmax(340px, 42%) minmax(430px, 58%); }
  .auth-showcase { padding-inline: 38px; }
  .auth-brand { left: 38px; }
  .auth-showcase-copy h1 { font-size: clamp(38px, 5vw, 52px); }
  .auth-mode-rail { left: 42%; }
}

@media (max-width: 860px) {
  .connection-pill { display: none; }
  .dashboard-grid, .dashboard-lower-grid { grid-template-columns: 1fr; }
  .resolution-card { min-height: auto; }
  .crm-summary { grid-template-columns: repeat(3,1fr); }
  .crm-summary .crm-toolbar { grid-column: 1 / -1; min-height: 58px; border-top: 1px solid var(--ink-100); border-left: 0; }
  .settings-layout, .whatsapp-settings-grid { grid-template-columns: 1fr; }
  .settings-preview-column, .whatsapp-side { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-preview-column .ai-preview-card { grid-row: span 2; }
  .sticky-card { position: static; }
  .appointment-card { grid-template-columns: 55px 3px 1fr 34px; }
  .appointment-card .appointment-service { grid-column: 3; }
  .appointment-card .status-badge { grid-column: 3; width: fit-content; }
  .appointment-card > .dropdown { grid-column: 4; grid-row: 1 / span 3; }
  .auth-shell { display: block; }
  .auth-showcase { display: none; }
  .auth-content { min-height: 100svh; padding: 112px 30px 24px; border-left: 0; }
  .auth-mode-rail { top: 28px; left: 50%; width: min(360px, calc(100% - 36px)); flex-direction: row; gap: 4px; padding: 4px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: #101015; }
  .auth-tab { min-height: 44px; flex: 1; padding: 13px; border-radius: 6px; text-align: center; }
  .auth-tab.active { background: #1c1c24; }
  .auth-card { margin-block: 0 auto; }
  .auth-card-brand { margin-inline: auto; }
  .auth-heading { text-align: center; }
  .auth-heading p { margin-inline: auto; }
}

@media (max-width: 760px) {
  .mobile-only { display: inline-grid !important; }
  .topbar { padding-inline: 12px; }
  .global-search { width: auto; flex: 1; }
  .global-search input { width: 100%; }
  .global-search kbd, .user-menu-copy, .user-menu-button > svg { display: none; }
  .topbar-actions { gap: 4px; }
  .main-content { padding: 21px 15px 34px; }
  .page-header { align-items: flex-start; flex-direction: column; margin-bottom: 18px; }
  .page-actions { width: 100%; justify-content: flex-start; }
  .page-actions .button { flex: 1; }
  .status-banner { align-items: flex-start; flex-wrap: wrap; }
  .status-banner .button { margin-left: 49px; }
  .metric-grid, .summary-strip, .appointment-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { padding: 15px; }
  .metric-card.horizontal { align-items: flex-start; }
  .metric-value { font-size: 23px; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-search { width: 100%; }
  .toolbar-filters { flex-wrap: wrap; }
  .toolbar-filters .select-control { flex: 1; }
  .table-footer { align-items: flex-start; flex-direction: column; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .modal { align-items: end; padding: 0; }
  .modal-dialog, .modal-sm, .modal-lg { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
  .modal-header { padding: 18px 17px 14px; }.modal-body { padding: 17px; }.modal-footer { padding: 12px 17px; }
  .notification-menu { position: fixed; top: var(--topbar-height); right: 8px; width: min(350px, calc(100vw - 16px)); }
  .conversation-page .topbar { display: none; }
  .conversation-page .main-content { height: 100dvh; min-height: 520px; }
  .conversation-shell { position: relative; display: block; }
  .conversation-list-panel, .chat-panel, .customer-panel { position: absolute; inset: 0; width: 100%; border: 0; transform: none; }
  .chat-panel, .customer-panel { display: none; }
  .conversation-shell:has(.chat-panel:not(.chat-empty)) .conversation-list-panel { display: none; }
  .conversation-shell:has(.chat-panel:not(.chat-empty)) .chat-panel { display: flex; }
  .conversation-page .conversation-shell[data-mobile-panel="list"] .conversation-list-panel { display: flex; }
  .conversation-page .conversation-shell[data-mobile-panel="list"] .chat-panel, .conversation-page .conversation-shell[data-mobile-panel="list"] .customer-panel { display: none; }
  .conversation-page .conversation-shell[data-mobile-panel="chat"] .conversation-list-panel, .conversation-page .conversation-shell[data-mobile-panel="chat"] .customer-panel { display: none; }
  .conversation-page .conversation-shell[data-mobile-panel="chat"] .chat-panel { display: flex; }
  .conversation-page .conversation-shell[data-mobile-panel="details"] .customer-panel { display: block; transform: none; }
  .conversation-page .conversation-shell[data-mobile-panel="details"] .chat-panel, .conversation-page .conversation-shell[data-mobile-panel="details"] .conversation-list-panel { display: none; }
  .chat-actions .button span { display: none; }
  .message-group { max-width: 82%; }
  .profile-header { align-items: flex-start; flex-direction: column; }
  .profile-layout { grid-template-columns: 1fr; }
  .crm-summary { grid-template-columns: repeat(2,1fr); }
  .crm-summary > div:nth-child(2) { border-right: 0; }.crm-summary > div:nth-child(3) { border-top: 1px solid var(--ink-100); border-right: 1px solid var(--ink-100); }
  .product-grid, .service-grid, .document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-form-layout { grid-template-columns: 1fr; }.image-uploader { min-height: 150px; }
  .delivery-side { grid-template-columns: 1fr; }
  .delivery-rule-metrics { grid-template-columns: 1fr 1fr; }
  .agenda-toolbar { align-items: stretch; flex-direction: column; }
  .date-navigation, .agenda-filters { flex-wrap: wrap; }
  .appointment-settings > aside { grid-template-columns: 1fr; }
  .business-hour-row { grid-template-columns: 40px 1fr; padding: 9px 0; }.business-hour-row .time-range { grid-column: 1 / -1; }
  .ai-knowledge-banner { align-items: flex-start; flex-wrap: wrap; }.ai-knowledge-banner > a { margin-left: 51px; }
  .tone-selector { grid-template-columns: repeat(2,1fr); }.checkbox-card-grid { grid-template-columns: 1fr; }
  .settings-preview-column, .whatsapp-side { display: flex; }
  .connection-hero { align-items: flex-start; flex-wrap: wrap; }.connection-hero-actions { width: 100%; margin-left: 68px; }
  .qr-code-layout { grid-template-columns: 1fr; }.qr-code-frame { margin-inline: auto; }.qr-code-copy { max-width: 520px; margin-inline: auto; }
}

@media (max-width: 540px) {
  h1 { font-size: 25px; }
  .main-content { padding-inline: 12px; }
  .metric-grid, .summary-strip, .appointment-summary-grid, .product-grid, .service-grid, .document-grid { grid-template-columns: 1fr; }
  .summary-strip > div { border-right: 0; border-bottom: 1px solid var(--ink-100); }.summary-strip > div:last-child { border-bottom: 0; }
  .status-banner .button { width: 100%; margin-left: 0; }
  .page-actions { flex-direction: column; }.page-actions .button { width: 100%; }
  .button-icon-mobile span { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .segmented-field { grid-template-columns: 1fr; }
  .product-results { padding: 10px; }
  .product-card-media { height: 205px; }
  .variant-row { grid-template-columns: 18px 1fr 30px; }.variant-row .field, .variant-row .field:nth-of-type(n) { grid-column: 2; grid-row: auto; }.variant-row .drag-handle { grid-row: 1 / span 5; }.variant-row > button { grid-column: 3; grid-row: 1; }
  .delivery-rule-card { grid-template-columns: 36px 1fr 28px; padding: 11px; }.delivery-rule-metrics { grid-template-columns: 1fr; }
  .page-tabs { width: 100%; overflow-x: auto; }.page-tabs > button { flex: 1; justify-content: center; white-space: nowrap; }
  .appointment-card { grid-template-columns: 48px 3px 1fr 28px; gap: 6px; }
  .appointment-client .avatar { display: none; }
  .faq-question { grid-template-columns: 31px 1fr 18px; padding-inline: 11px; }.faq-answer { padding: 0 11px 13px; }
  .settings-card-header { align-items: flex-start; padding-inline: 14px; }.settings-card-body { padding-inline: 14px; }
  .settings-save-bar { align-items: stretch; flex-direction: column; }.settings-save-bar .button { width: 100%; }
  .connection-hero-actions { margin-left: 0; }.connection-hero-actions .button { width: 100%; }
  .qr-code-actions { flex-direction: column; }.qr-code-actions .button { width: 100%; }
  .error-art { font-size: 58px; }.error-art > svg { width: 52px; height: 52px; }.error-shell > .brand { top: 20px; left: 20px; }.error-shell > div:last-child { width: 100%; flex-direction: column; }.error-shell .button { width: 100%; }
  .auth-content { padding: 108px 18px 18px; }.auth-heading h2 { font-size: 28px; }
}