/*
 * Crowdmail theme: overrides of the Keenthemes variables plus the few components of our own (cm-*).
 * Light = "Lavanda", dark = "Inchiostro". Loaded after style.bundle.css.
 */

/* Fonts are self hosted: the Content Security Policy only allows 'self' */
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* ---------- Tokens: light ---------- */
:root, [data-bs-theme=light] {
  --cm-surface: #ffffff;
  --cm-surface-2: #FAF9FD;
  --cm-line: #E6E1F2;
  --cm-ink: #1E1A2E;
  --cm-muted: #6F6A85;
  --cm-accent: #6B5BD2;
  --cm-accent-soft: #EEEBFB;
  --cm-ok: #2F8F6B;
  --cm-ok-soft: #E3F4EC;
  --cm-radius: 14px;
  --cm-mono: "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --bs-font-sans-serif: Inter, "Segoe UI", Helvetica, Arial, sans-serif;
  --bs-body-color: #1E1A2E;
  --bs-body-color-rgb: 30, 26, 46;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-app-bg-color: #F6F4FB;
  --bs-border-color: #E6E1F2;
  --bs-heading-color: #1E1A2E;
  --bs-link-color: #6B5BD2;
  --bs-link-color-rgb: 107, 91, 210;
  --bs-link-hover-color: #5A4BBE;

  --bs-primary: #6B5BD2;
  --bs-primary-rgb: 107, 91, 210;
  --bs-primary-active: #5A4BBE;
  --bs-primary-light: #EEEBFB;
  --bs-primary-inverse: #ffffff;
  --bs-primary-bg-subtle: #EEEBFB;
  --bs-primary-border-subtle: #CFC8F2;
  --bs-primary-text-emphasis: #3D3285;
  --bs-text-primary: #6B5BD2;

  --bs-success: #2F8F6B;
  --bs-success-rgb: 47, 143, 107;
  --bs-success-active: #277A5B;
  --bs-success-light: #E3F4EC;
  --bs-success-inverse: #ffffff;
  --bs-text-success: #2F8F6B;

  --bs-light: #F6F4FB;
  --bs-light-rgb: 246, 244, 251;
  --bs-light-active: #EEEBFB;
  --bs-secondary: #EFECF7;
  --bs-secondary-active: #E6E1F2;

  --bs-gray-100: #FAF9FD; --bs-gray-200: #F1EEF8; --bs-gray-300: #E6E1F2; --bs-gray-400: #C9C3DB;
  --bs-gray-500: #A39DB8; --bs-gray-600: #6F6A85; --bs-gray-700: #4A455E; --bs-gray-800: #2B2640; --bs-gray-900: #1E1A2E;
  --bs-gray-100-rgb: 250, 249, 253; --bs-gray-200-rgb: 241, 238, 248; --bs-gray-300-rgb: 230, 225, 242;
  --bs-text-gray-100: #FAF9FD; --bs-text-gray-200: #F1EEF8; --bs-text-gray-300: #E6E1F2; --bs-text-gray-400: #A39DB8;
  --bs-text-gray-500: #8A849F; --bs-text-gray-600: #6F6A85; --bs-text-gray-700: #4A455E; --bs-text-gray-800: #2B2640; --bs-text-gray-900: #1E1A2E;
  --bs-text-muted: #8A849F;
  --bs-text-dark: #1E1A2E;
  --bs-dark: #1E1A2E;
  --bs-dark-rgb: 30, 26, 46;

  --bs-app-sidebar-light-bg-color: #ffffff;
  --bs-app-sidebar-light-separator-color: #E6E1F2;
  --bs-app-sidebar-light-menu-heading-color: #A39DB8;
  --bs-app-sidebar-light-menu-link-color: #4A455E;
  --bs-app-sidebar-light-menu-link-icon-color: #A39DB8;
  --bs-app-sidebar-light-menu-link-bg-color-active: #EEEBFB;
  --bs-app-sidebar-light-box-shadow: none;
  --bs-app-header-base-bg-color: transparent;
  --bs-app-header-base-box-shadow: none;
}

/* ---------- Tokens: dark ---------- */
[data-bs-theme=dark] {
  --cm-surface: #181522;
  --cm-surface-2: #1E1A2B;
  --cm-line: #2B2640;
  --cm-ink: #ECE9F5;
  --cm-muted: #9690AD;
  --cm-accent: #A594F9;
  --cm-accent-soft: #2A2447;
  --cm-ok: #6FD3A8;
  --cm-ok-soft: #17302A;

  --bs-body-color: #ECE9F5;
  --bs-body-color-rgb: 236, 233, 245;
  --bs-body-bg: #181522;
  --bs-body-bg-rgb: 24, 21, 34;
  --bs-app-bg-color: #100E17;
  --bs-border-color: #2B2640;
  --bs-heading-color: #ECE9F5;
  --bs-link-color: #A594F9;
  --bs-link-color-rgb: 165, 148, 249;
  --bs-link-hover-color: #B8AAFB;

  --bs-primary: #A594F9;
  --bs-primary-rgb: 165, 148, 249;
  --bs-primary-active: #B8AAFB;
  --bs-primary-light: #2A2447;
  --bs-primary-inverse: #14101F;
  --bs-primary-bg-subtle: #2A2447;
  --bs-primary-border-subtle: #4A3F85;
  --bs-primary-text-emphasis: #CFC6FC;
  --bs-text-primary: #A594F9;

  --bs-success: #6FD3A8;
  --bs-success-rgb: 111, 211, 168;
  --bs-success-active: #88DDB8;
  --bs-success-light: #17302A;
  --bs-success-inverse: #0E1F1A;
  --bs-text-success: #6FD3A8;

  --bs-light: #1E1A2B;
  --bs-light-rgb: 30, 26, 43;
  --bs-light-active: #2B2640;
  --bs-secondary: #2B2640;
  --bs-secondary-active: #363052;

  --bs-gray-100: #1E1A2B; --bs-gray-200: #2B2640; --bs-gray-300: #363052; --bs-gray-400: #4D4670;
  --bs-gray-500: #6A6388; --bs-gray-600: #9690AD; --bs-gray-700: #B5B0C9; --bs-gray-800: #D5D1E4; --bs-gray-900: #ECE9F5;
  --bs-gray-100-rgb: 30, 26, 43; --bs-gray-200-rgb: 43, 38, 64; --bs-gray-300-rgb: 54, 48, 82;
  --bs-text-gray-100: #1E1A2B; --bs-text-gray-200: #2B2640; --bs-text-gray-300: #363052; --bs-text-gray-400: #6A6388;
  --bs-text-gray-500: #807A9B; --bs-text-gray-600: #9690AD; --bs-text-gray-700: #B5B0C9; --bs-text-gray-800: #D5D1E4; --bs-text-gray-900: #ECE9F5;
  --bs-text-muted: #807A9B;
  --bs-text-dark: #ECE9F5;
  --bs-dark: #ECE9F5;

  --bs-app-sidebar-light-bg-color: #0C0A12;
  --bs-app-sidebar-light-separator-color: #2B2640;
  --bs-app-sidebar-light-menu-heading-color: #6A6388;
  --bs-app-sidebar-light-menu-link-color: #B5B0C9;
  --bs-app-sidebar-light-menu-link-icon-color: #6A6388;
  --bs-app-sidebar-light-menu-link-bg-color-active: #2A2447;
}

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .card-title, .page-heading { letter-spacing: -0.02em; }
.cm-mono, code { font-family: var(--cm-mono); }
code { margin: 0; background: var(--cm-accent-soft); color: var(--cm-accent) !important; border: 0; box-shadow: none; font-size: .85em; padding: .1em .4em; border-radius: 5px; font-weight: 500; }
::selection { background: var(--cm-accent-soft); }

/* ---------- Library components, refined ---------- */
.card { --bs-card-border-radius: var(--cm-radius); --bs-card-inner-border-radius: calc(var(--cm-radius) - 1px); --bs-card-box-shadow: none; --bs-card-border-color: var(--cm-line); border: 1px solid var(--cm-line); }
.btn:not(.btn-icon):not(.btn-sm) { --bs-btn-border-radius: 10px; border-radius: 10px; }
.btn.btn-sm { border-radius: 8px; }
.btn { font-weight: 600; letter-spacing: -0.005em; }
.btn.btn-light { border: 1px solid var(--cm-line); background-color: var(--cm-surface); }
.btn.btn-light:hover { background-color: var(--cm-surface-2) !important; }
.form-control, .form-select, .input-group-text, .select2-container--bootstrap5 .select2-selection { border-radius: 10px; border-color: var(--cm-line); }
.form-control:focus, .form-select:focus { border-color: var(--cm-accent); box-shadow: 0 0 0 3px var(--cm-accent-soft); }
.form-text { color: var(--cm-muted); }
.modal-content { border-radius: 16px; border: 1px solid var(--cm-line); }
.modal-header { border-bottom-color: var(--cm-line); }
.modal-header h2 { font-size: 1.35rem; }
.badge { font-weight: 600; border-radius: 99px; padding: .4em .8em; }
.table thead th, .table thead tr { color: var(--cm-muted) !important; letter-spacing: .06em; font-size: .72rem !important; font-weight: 600 !important; }
.table.table-row-dashed tr { border-bottom-style: solid; border-bottom-color: var(--cm-line); }
.table td { color: var(--bs-text-gray-700); }
.notice.border-dashed { border-style: solid !important; border-color: var(--bs-primary-border-subtle) !important; border-radius: var(--cm-radius) !important; }
.nav-line-tabs .nav-item .nav-link { letter-spacing: -0.01em; }
.menu-sub-dropdown { border-radius: 12px; border: 1px solid var(--cm-line); box-shadow: 0 18px 40px -18px rgba(30, 26, 46, .28); }
.toast { border-radius: 12px; }
.dataTables_empty { color: var(--cm-muted) !important; padding: 2.25rem 1rem !important; }
.page-link { border-radius: 8px !important; }

/* ---------- App shell ---------- */
[data-kt-app-layout=light-sidebar] .app-sidebar { border-right: 1px solid var(--cm-line); }
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link { border-radius: 10px; padding: .7rem .9rem; font-weight: 500; }
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title { font-size: .95rem; }
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link:hover:not(.active) { background: var(--cm-surface-2); }
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active { background: var(--cm-accent-soft); }
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-title { color: var(--cm-accent); font-weight: 600; }
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i [class^=path] { color: var(--cm-accent) !important; }
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-heading { letter-spacing: .08em; font-size: .7rem !important; font-weight: 600 !important; }
.app-sidebar-logo img.cm-logo { height: 26px; }
[data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hoverable=true]) .cm-hide-min,
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .cm-hide-min { display: none !important; }
.cm-side-help { border: 1px solid var(--cm-line); background: var(--cm-surface-2); border-radius: 12px; padding: 14px; }
.cm-side-help b { display: block; font-size: .9rem; color: var(--cm-ink); }
.cm-side-help span { display: block; font-size: .8rem; color: var(--cm-muted); margin: 2px 0 10px; }
.app-header { background: transparent; box-shadow: none !important; border: 0; }
.app-toolbar .page-heading { font-size: 1.75rem !important; font-weight: 600 !important; padding: 0 !important; color: var(--cm-ink) !important; }
.app-footer { color: var(--cm-muted); }
.cm-avatar { background: var(--cm-accent-soft) !important; color: var(--cm-accent) !important; font-weight: 700; }

/* ---------- Crowdmail components ---------- */
.cm-greeting h1 { font-size: 1.9rem; font-weight: 600; margin: 0; color: var(--cm-ink); }
.cm-greeting p { color: var(--cm-muted); margin: 4px 0 0; font-size: 1rem; }

.cm-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--cm-accent); background: var(--cm-accent-soft); padding: 3px 10px; border-radius: 99px; }
.cm-tag i { font-size: .95rem; color: inherit; }

.cm-onb { display: grid; grid-template-columns: minmax(230px, 280px) 1fr; gap: 28px; padding: 24px 52px 24px 26px; position: relative; }
[data-bs-theme=light] .cm-onb { background: linear-gradient(120deg, #fff 40%, #F1EEFC); }
.cm-onb h2 { font-size: 1.4rem; font-weight: 600; margin: 10px 0 6px; }
.cm-onb p { color: var(--cm-muted); margin: 0; }
.cm-onb .progress { height: 5px; background: var(--cm-line); margin-top: 16px; border-radius: 9px; }
.cm-onb-close { position: absolute; top: 10px; right: 12px; }
.cm-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cm-step { border: 1px solid var(--cm-line); border-radius: 12px; padding: 14px; background: var(--cm-surface); display: flex; flex-direction: column; min-width: 0; }
.cm-step .n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--cm-line); display: grid; place-items: center; font-size: .78rem; font-weight: 600; color: var(--cm-muted); margin-bottom: 10px; }
.cm-step b { font-size: .95rem; color: var(--cm-ink); font-weight: 600; }
.cm-step span.d { font-size: .82rem; color: var(--cm-muted); margin-top: 3px; }
.cm-step a { font-size: .82rem; font-weight: 600; margin-top: auto; padding-top: 10px; }
.cm-step .opt { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cm-muted); margin-left: auto; }
.cm-step.done .n { background: var(--cm-ok); border-color: var(--cm-ok); color: var(--cm-surface); }
.cm-step.done .n i { color: inherit; font-size: .9rem; }
.cm-step.done b { color: var(--cm-muted); text-decoration: line-through; }
.cm-step.current { border-color: var(--cm-accent); box-shadow: 0 0 0 3px var(--cm-accent-soft); }
.cm-step.current .n { border-color: var(--cm-accent); color: var(--cm-accent); }

.cm-kpi { padding: 18px 20px; height: 100%; }
.cm-kpi .l { display: flex; align-items: center; gap: 9px; color: var(--cm-muted); font-size: .88rem; font-weight: 500; }
.cm-kpi .l .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--cm-accent-soft); display: grid; place-items: center; }
.cm-kpi .l .ic i { font-size: 1.05rem; color: var(--cm-accent); }
.cm-kpi .v { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; margin-top: 10px; line-height: 1.1; color: var(--cm-ink); }
.cm-kpi .v.sm { font-size: 1.25rem; padding: .35rem 0; }
.cm-kpi .s { font-size: .82rem; color: var(--cm-muted); margin-top: 6px; }
.cm-kpi .s a { font-weight: 600; }

.cm-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--cm-line); }
.cm-card-head h3 { font-size: 1.1rem; font-weight: 600; margin: 0; }
.cm-card-head .sub { color: var(--cm-muted); font-size: .85rem; }
.cm-table { margin: 0 !important; }
.cm-table thead th { text-transform: uppercase; background: var(--cm-surface-2); padding: 11px 22px !important; border: 0 !important; }
.cm-table tbody td { padding: 14px 22px !important; vertical-align: middle; }
.cm-table tbody tr:last-child { border-bottom: 0 !important; }
.cm-group { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cm-group .av { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--cm-accent-soft); color: var(--cm-accent); display: grid; place-items: center; font-weight: 700; }
.cm-group b { display: block; color: var(--cm-ink); font-weight: 600; }
.cm-group small { display: block; color: var(--cm-muted); font-size: .82rem; }
.cm-alias { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cm-mono); font-size: .8rem; background: var(--cm-surface-2); border: 1px solid var(--cm-line); border-radius: 7px; padding: 4px 6px 4px 10px; color: var(--cm-ink); max-width: 100%; }
.cm-alias span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-alias button { border: 0; background: transparent; padding: 2px 4px; border-radius: 5px; color: var(--cm-muted); line-height: 1; }
.cm-alias button:hover { background: var(--cm-accent-soft); color: var(--cm-accent); }
.cm-alias button i { color: inherit; font-size: 1rem; }

.cm-tips { padding: 20px 22px; height: 100%; }
.cm-tips h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 4px; }
.cm-tips > p { color: var(--cm-muted); font-size: .88rem; margin: 0; }
.cm-tip { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--cm-line); }
.cm-tips > p + .cm-tip { margin-top: 14px; }
.cm-tip > i { font-size: 1.35rem; color: var(--cm-accent); flex: none; margin-top: 1px; }
.cm-tip b { display: block; font-size: .9rem; color: var(--cm-ink); font-weight: 600; }
.cm-tip span.d { font-size: .86rem; color: var(--cm-muted); line-height: 1.55; }

.cm-empty { text-align: center; padding: 34px 20px; color: var(--cm-muted); }
.cm-empty .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--cm-accent-soft); display: inline-grid; place-items: center; margin-bottom: 12px; }
.cm-empty .ic i { font-size: 1.6rem; color: var(--cm-accent); }
.cm-empty b { display: block; color: var(--cm-ink); font-size: 1rem; margin-bottom: 2px; }

/* ---------- First access tour ---------- */
.cm-tour-hole { position: fixed; z-index: 1090; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(20, 16, 31, .55), 0 0 0 2px var(--cm-accent); pointer-events: none; transition: all .25s ease; }
.cm-tour-hole.center { box-shadow: 0 0 0 9999px rgba(20, 16, 31, .55); width: 0; height: 0; left: 50%; top: 50%; }
.cm-tour-shield { position: fixed; inset: 0; z-index: 1089; }
.cm-tour-pop { position: fixed; z-index: 1091; width: 360px; max-width: calc(100vw - 32px); background: var(--cm-surface); color: var(--cm-ink); border: 1px solid var(--cm-line); border-radius: 16px; padding: 20px; box-shadow: 0 24px 60px -20px rgba(20, 16, 31, .5); transition: left .25s ease, top .25s ease; }
.cm-tour-pop.center { width: 440px; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); text-align: center; padding: 30px; }
.cm-tour-pop .ic { width: 52px; height: 52px; border-radius: 16px; background: var(--cm-accent-soft); display: inline-grid; place-items: center; margin-bottom: 14px; }
.cm-tour-pop .ic i { font-size: 1.8rem; color: var(--cm-accent); }
.cm-tour-pop h4 { font-size: 1.05rem; font-weight: 600; margin: 0 0 6px; }
.cm-tour-pop.center h4 { font-size: 1.35rem; }
.cm-tour-pop p { color: var(--cm-muted); font-size: .9rem; line-height: 1.55; margin: 0; }
.cm-tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.cm-tour-pop.center .cm-tour-foot { justify-content: center; }
.cm-tour-count { margin-right: auto; font-size: .8rem; color: var(--cm-muted); font-weight: 500; }
.cm-tour-pop.center .cm-tour-count { display: none; }

@media (max-width: 1199.98px) {
  .cm-onb { grid-template-columns: 1fr; }
  .cm-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .cm-steps { grid-template-columns: 1fr; }
}

/* ---------- Shared: language switch, fan-out illustration ---------- */
.cm-lang { display: inline-flex; border: 1px solid var(--cm-line); border-radius: 8px; overflow: hidden; background: var(--cm-surface); }
.cm-lang a { font-size: .72rem; font-weight: 600; padding: 4px 9px; color: var(--cm-muted); letter-spacing: .04em; }
.cm-lang a.on { background: var(--cm-accent-soft); color: var(--cm-accent); }

.cm-fan { text-align: left; }
.cm-fan-compose { background: var(--cm-surface); border: 1px solid var(--cm-line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(40, 25, 100, .45); color: var(--cm-ink); }
.cm-fan-compose .hd { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-bottom: 1px solid var(--cm-line); font-size: .82rem; color: var(--cm-muted); background: var(--cm-surface-2); }
.cm-fan-compose .hd i { font-size: 1.1rem; color: var(--cm-muted); }
.cm-fan-compose .row-f { display: flex; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--cm-line); font-size: .9rem; }
.cm-fan-compose .row-f span { color: var(--cm-muted); width: 62px; flex: none; }
.cm-fan-compose .row-f b { color: var(--cm-accent); font-weight: 500; font-size: .85rem; }
.cm-fan-compose .row-f em { font-style: normal; }
.cm-fan-compose .bd { padding: 16px 18px 18px; font-size: .92rem; line-height: 1.7; }
.cm-fan-arrow { display: grid; place-items: center; height: 34px; }
.cm-fan-arrow i { font-size: 1.3rem; color: var(--cm-accent); }
.cm-fan-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cm-fan-out > div { display: flex; align-items: center; gap: 10px; background: var(--cm-surface); border: 1px solid var(--cm-line); border-radius: 10px; padding: 9px 12px; font-size: .85rem; color: var(--cm-ink); }
.cm-fan-out > div > i { font-size: 1.15rem; color: var(--cm-accent); flex: none; }
.cm-fan-out > div > span:not(.st) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cm-fan-out .st { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--cm-accent-soft); color: var(--cm-accent); }
.cm-fan-out .st.ok { background: var(--cm-ok-soft); color: var(--cm-ok); }
.cm-fan-out .st i { font-size: .95rem; color: inherit; }

/* ---------- Sign in, sign up, password pages ---------- */
.cm-auth { background: var(--cm-surface); min-height: 100vh; }
.cm-auth-title { font-size: 1.9rem; font-weight: 600; color: var(--cm-ink); margin: 0 0 6px; }
.cm-auth-sub { color: var(--cm-muted); font-size: 1rem; }
.cm-auth .form-label { font-size: .88rem; font-weight: 600; color: var(--cm-ink); margin-bottom: 6px; }
.cm-auth .form-control { background: var(--cm-surface); padding: .8rem 1rem; }
.cm-auth .btn-primary, .cm-auth .cm-auth-google { padding-top: .85rem; padding-bottom: .85rem; }
.cm-auth-brand { background: #1A1629; background-image: radial-gradient(900px 500px at 85% -10%, rgba(165, 148, 249, .28), transparent 60%), radial-gradient(700px 500px at 0% 110%, rgba(107, 91, 210, .30), transparent 60%); color: #ECE9F5;
  --cm-surface: #221D33; --cm-surface-2: #1D192C; --cm-line: #342E4D; --cm-ink: #ECE9F5; --cm-muted: #A39DB8; --cm-accent: #B3A5FA; --cm-accent-soft: #322A57; --cm-ok: #6FD3A8; --cm-ok-soft: #17302A; }
.cm-auth-brand h1 { color: #fff; font-size: 2.35rem; line-height: 1.12; font-weight: 600; letter-spacing: -0.03em; margin: 0 0 14px; }
.cm-auth-brand p { color: #B5B0C9; font-size: 1.05rem; line-height: 1.55; margin: 0 0 34px; }
.cm-auth-brand p b { color: #CFC6FC; font-weight: 600; }
.cm-auth-brand .cap { color: #8A849F; font-size: .85rem; margin-top: 16px; text-align: center; }
.cm-auth-brand code { background: var(--cm-accent-soft); }

/* ---------- Landing ---------- */
.cm-landing { background: var(--bs-app-bg-color); color: var(--cm-ink); scroll-behavior: smooth; }
html:has(.cm-landing) { scroll-behavior: smooth; scroll-padding-top: 84px; }
.cm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.cm-wrap.narrow { max-width: 820px; }
.cm-lnav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bs-app-bg-color) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cm-line); }
.cm-lnav .cm-wrap { display: flex; align-items: center; gap: 12px; height: 68px; }
.cm-lnav .logo { margin-right: auto; }
.cm-lnav .logo img, .cm-lfoot img { height: 26px; }
.cm-lnav nav { display: flex; gap: 4px; margin-right: 10px; }
.cm-lnav nav a { color: var(--cm-muted); font-weight: 500; font-size: .95rem; padding: 8px 12px; border-radius: 8px; }
.cm-lnav nav a:hover { color: var(--cm-ink); background: var(--cm-accent-soft); }
.cm-hero { padding: 72px 0 64px; }
.cm-hero .cm-wrap { display: grid; grid-template-columns: 1.08fr 1fr; gap: 64px; align-items: center; }
.cm-hero h1 { font-size: 3.6rem; line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; margin: 20px 0 20px; color: var(--cm-ink); }
.cm-hero p { color: var(--cm-muted); font-size: 1.06rem; line-height: 1.6; max-width: 540px; margin: 0 0 12px; }
.cm-hero p.lead { color: var(--cm-ink); font-size: 1.22rem; }
.cm-hero p.lead b { color: var(--cm-accent); font-weight: 600; }
.cm-hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cm-landing .btn-lg { padding: .95rem 1.5rem; font-size: 1.02rem; }
.cm-landing .btn i { color: inherit; font-size: 1.1rem; }
.cm-trust { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; color: var(--cm-muted); }
.cm-trust li, .cm-checks li { display: flex; align-items: center; gap: 7px; }
.cm-trust i, .cm-checks i { color: var(--cm-ok); font-size: 1.15rem; }
.cm-hero .cm-wrap > *, .cm-split > * { min-width: 0; }
.cm-landing { overflow-x: hidden; }
.cm-hero .visual { position: relative; }
.cm-hero .visual::before { content: ""; position: absolute; inset: -30px -20px; background: radial-gradient(closest-side, var(--cm-accent-soft), transparent); z-index: 0; }
.cm-hero .visual > * { position: relative; }

.cm-sec { padding: 84px 0; }
.cm-sec.tight { padding: 40px 0; }
.cm-sec.alt { background: var(--cm-surface); border-top: 1px solid var(--cm-line); border-bottom: 1px solid var(--cm-line); }
.cm-sec h2 { font-size: 2.2rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; margin: 0 0 10px; max-width: 720px; color: var(--cm-ink); }
.cm-sec h2.center, .cm-sec .sub.center { text-align: center; margin-left: auto; margin-right: auto; }
.cm-sec .sub { color: var(--cm-muted); font-size: 1.1rem; line-height: 1.6; max-width: 640px; margin: 0; }
.cm-sec .cm-tag { margin-bottom: 14px; }

.cm-vs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.cm-vs > div { border: 1px solid var(--cm-line); border-radius: var(--cm-radius); padding: 22px; background: var(--cm-surface); }
.cm-vs .k { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; color: var(--cm-ink); }
.cm-vs .k i { font-size: 1.35rem; color: var(--cm-muted); }
.cm-vs p { color: var(--cm-muted); margin: 8px 0 0; line-height: 1.55; }
.cm-vs .yes { border-color: var(--cm-accent); box-shadow: 0 0 0 3px var(--cm-accent-soft); }
.cm-vs .yes .k i { color: var(--cm-ok); }

.cm-hows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.cm-how { border: 1px solid var(--cm-line); border-radius: var(--cm-radius); padding: 26px; background: var(--cm-surface); }
.cm-how .top { display: flex; justify-content: space-between; align-items: center; color: var(--cm-accent); font-size: .85rem; }
.cm-how .top i { font-size: 1.7rem; color: var(--cm-accent); }
.cm-how h3, .cm-feat h3 { font-size: 1.15rem; font-weight: 600; margin: 14px 0 6px; color: var(--cm-ink); }
.cm-how p, .cm-feat p { color: var(--cm-muted); margin: 0; line-height: 1.55; }

.cm-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 28px; margin-top: 44px; }
.cm-feat .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--cm-accent-soft); display: grid; place-items: center; }
.cm-feat .ic i { font-size: 1.4rem; color: var(--cm-accent); }
.cm-feat h3 { font-size: 1.02rem; }
.cm-feat p { font-size: .93rem; }

.cm-split { display: grid; grid-template-columns: 1fr 420px; gap: 72px; align-items: center; }
.cm-checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; font-size: 1rem; color: var(--cm-ink); }
.cm-chat { background: var(--cm-surface); border: 1px solid var(--cm-line); border-radius: 20px; padding: 18px; box-shadow: 0 30px 60px -34px rgba(40, 25, 100, .4); }
.cm-chat .who { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--cm-line); margin-bottom: 14px; }
.cm-chat .av { width: 36px; height: 36px; border-radius: 50%; background: var(--cm-accent); color: var(--bs-primary-inverse); display: grid; place-items: center; font-weight: 700; font-size: .78rem; }
.cm-chat .who b { display: block; font-size: .92rem; } .cm-chat .who small { color: var(--cm-muted); font-size: .76rem; }
.cm-chat .msg { max-width: 82%; background: var(--cm-surface-2); border: 1px solid var(--cm-line); border-radius: 14px 14px 14px 4px; padding: 9px 12px 6px; font-size: .9rem; margin-bottom: 8px; }
.cm-chat .msg.me { margin-left: auto; background: var(--cm-ok-soft); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.cm-chat time { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: .68rem; color: var(--cm-muted); margin-top: 2px; }
.cm-chat time i { font-size: .9rem; color: var(--cm-accent); }
.cm-chat .outs { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--cm-line); display: grid; gap: 7px; }
.cm-chat .outs div { display: flex; align-items: center; gap: 10px; font-size: .84rem; border: 1px solid var(--cm-line); border-radius: 10px; padding: 7px 10px; }
.cm-chat .outs b { width: 52px; flex: none; } .cm-chat .outs span { color: var(--cm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-chat .outs em { margin-left: auto; } .cm-chat .outs em i { font-size: 1rem; color: var(--cm-accent); } .cm-chat .outs em.g i { color: var(--cm-muted); }

.cm-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; align-items: stretch; }
.cm-plan { border: 1px solid var(--cm-line); border-radius: 18px; padding: 28px; background: var(--bs-app-bg-color); display: flex; flex-direction: column; position: relative; }
.cm-plan.pop { border-color: var(--cm-accent); box-shadow: 0 0 0 3px var(--cm-accent-soft); background: var(--cm-surface); }
.cm-plan .cm-tag { position: absolute; top: 22px; right: 22px; margin: 0; }
.cm-plan h3 { font-size: 1.2rem; font-weight: 600; margin: 0; }
.cm-plan > p { color: var(--cm-muted); margin: 4px 0 0; font-size: .92rem; }
.cm-plan .price { display: flex; align-items: baseline; gap: 4px; margin: 22px 0; }
.cm-plan .price span { color: var(--cm-muted); font-size: 1.1rem; }
.cm-plan .price b { font-size: 2.8rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.cm-plan .price em { color: var(--cm-muted); font-style: normal; font-size: .9rem; }
.cm-plan ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.cm-plan li { display: flex; align-items: center; gap: 9px; font-size: .95rem; }
.cm-plan li i { color: var(--cm-ok); font-size: 1.2rem; }
.cm-plan li.off { opacity: .55; }
.cm-plan li.off span { text-decoration: line-through; }
.cm-plan li.off i { color: var(--cm-muted); }
.cm-sec.cm-wa .cm-tag { margin: 0 auto 16px; display: inline-flex; }
.cm-sec.cm-wa h2.center, .cm-sec.cm-wa .sub.center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.cm-plan .btn { margin-top: auto; }

.cm-faq { margin-top: 30px; border-top: 1px solid var(--cm-line); }
.cm-faq-item { border-bottom: 1px solid var(--cm-line); }
.cm-faq-item button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: none; border: 0; padding: 20px 2px; text-align: left; font-size: 1.05rem; font-weight: 600; color: var(--cm-ink); }
.cm-faq-item button i { font-size: 1.1rem; color: var(--cm-accent); transition: transform .2s; flex: none; }
.cm-faq-item button:not(.collapsed) i { transform: rotate(45deg); }
.cm-faq-item p { color: var(--cm-muted); margin: 0; padding: 0 2px 20px; line-height: 1.6; max-width: 700px; }

.cm-final { border-radius: 24px; padding: 56px 32px; text-align: center; background: #1A1629; background-image: radial-gradient(700px 320px at 80% 0%, rgba(165, 148, 249, .35), transparent 65%), radial-gradient(600px 320px at 10% 100%, rgba(107, 91, 210, .35), transparent 65%); }
.cm-final h2 { color: #fff; margin: 0 auto 10px; }
.cm-final p { color: #B5B0C9; font-size: 1.1rem; margin: 0 0 26px; }
.cm-final .btn { background: #fff; color: #2B2640; }
.cm-final .btn:hover { background: #EEEBFB; color: #2B2640; }
.cm-lfoot { padding: 34px 0 44px; }
.cm-lfoot .cm-wrap { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-end; }
.cm-lfoot p { color: var(--cm-muted); margin: 10px 0 0; font-size: .9rem; }
.cm-lfoot .r { display: grid; gap: 4px; text-align: right; color: var(--cm-muted); font-size: .88rem; }

@media (max-width: 991.98px) {
  .cm-lnav nav { display: none; }
  .cm-hero { padding: 44px 0; }
  .cm-hero .cm-wrap, .cm-split { grid-template-columns: 1fr; gap: 40px; }
  .cm-hero h1 { font-size: 2.6rem; }
  .cm-vs, .cm-hows, .cm-plans { grid-template-columns: 1fr; }
  .cm-feats { grid-template-columns: repeat(2, 1fr); }
  .cm-sec { padding: 56px 0; }
  .cm-sec h2 { font-size: 1.8rem; }
}
@media (max-width: 575.98px) {
  .cm-feats { grid-template-columns: 1fr; }
  .cm-lfoot .r { text-align: left; }
}

/* ---------- First access wizard (partials/setup-wizard.html) ---------- */
.cm-setup { border-radius: var(--cm-radius); overflow: hidden; }
.cm-setup-head { padding: 22px 32px 0; }
.cm-setup-steps { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: cm-step; }
.cm-setup-steps li { flex: 1; font-size: .8rem; font-weight: 500; color: var(--cm-muted); padding-top: 10px; border-top: 3px solid var(--cm-line); counter-increment: cm-step; }
.cm-setup-steps li::before { content: counter(cm-step) ". "; }
.cm-setup-steps li.active { color: var(--cm-ink); border-top-color: var(--cm-accent); }
.cm-setup-steps li.done { color: var(--cm-accent); border-top-color: var(--cm-accent); }
.cm-setup-steps li.skipped { text-decoration: line-through; opacity: .6; }
.cm-setup-body { padding: 26px 32px 8px; }
.cm-setup-body h2 { font-size: 1.45rem; font-weight: 600; margin: 0 0 6px; color: var(--cm-ink); }
.cm-setup-lead { color: var(--cm-muted); margin-bottom: 22px; }
.cm-setup-foot { padding: 16px 32px 24px; border-top: 0; }
.cm-setup-preview { display: flex; gap: 12px; align-items: baseline; margin-top: 18px; padding: 12px 14px; border: 1px dashed var(--cm-line); border-radius: 10px; font-size: .95rem; overflow-wrap: anywhere; }
.cm-setup-preview .k { color: var(--cm-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

.cm-choice-list { display: grid; gap: 12px; }
.cm-choice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--cm-line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.cm-choice:hover { border-color: var(--cm-accent); }
.cm-choice:has(input:checked) { border-color: var(--cm-accent); background: var(--cm-accent-soft); }
.cm-choice input { margin-top: 4px; accent-color: var(--cm-accent); width: 18px; height: 18px; flex-shrink: 0; }
.cm-choice-body { display: grid; gap: 4px; }
.cm-choice-title { font-weight: 600; color: var(--cm-ink); }
.cm-choice-text { color: var(--cm-muted); font-size: .92rem; overflow-wrap: anywhere; }

.cm-providers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cm-provider { border: 1px solid var(--cm-line); background: var(--cm-surface); color: var(--cm-ink); border-radius: 999px; padding: 6px 14px; font-size: .9rem; font-weight: 500; }
.cm-provider:hover { border-color: var(--cm-accent); }
.cm-provider.active { background: var(--cm-accent); border-color: var(--cm-accent); color: #fff; }
.cm-setup-hint { background: var(--cm-accent-soft); color: var(--cm-ink); border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; font-size: .9rem; }
.cm-setup-hint a { font-weight: 600; margin-left: 4px; }
.cm-setup-advanced { margin-top: 14px; }
.cm-setup-advanced summary { cursor: pointer; color: var(--cm-accent); font-weight: 500; font-size: .92rem; }

.cm-test { margin-top: 18px; border-radius: 12px; padding: 14px 16px; border: 1px solid var(--cm-line); }
.cm-test.ok { border-color: var(--cm-ok); background: var(--cm-ok-soft); }
.cm-test.ko { border-color: #E5A3A3; background: #FDF1F1; }
[data-bs-theme=dark] .cm-test.ko { background: rgba(229, 83, 83, .12); }
.cm-test-title { font-weight: 600; margin-bottom: 8px; color: var(--cm-ink); }
.cm-test-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cm-test-steps li { display: grid; padding-left: 26px; position: relative; font-size: .9rem; }
.cm-test-steps li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.cm-test-steps li.ok::before { content: "\2713"; color: var(--cm-ok); }
.cm-test-steps li.ko::before { content: "\2717"; color: #C93C3C; }
.cm-test-steps li span { color: var(--cm-muted); overflow-wrap: anywhere; }
.cm-test-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: .9rem; }
.cm-test-actions .btn-link { color: var(--cm-accent); font-weight: 600; font-size: .9rem; }

.cm-setup-done-icon { width: 64px; height: 64px; margin: 6px auto 16px; border-radius: 50%; background: var(--cm-ok-soft); color: var(--cm-ok); display: flex; align-items: center; justify-content: center; }
.cm-setup-done-icon i, .cm-setup-done-icon .ki-duotone { color: var(--cm-ok) !important; }
.cm-setup-alias { margin: 6px auto 10px; padding: 14px; border-radius: 12px; background: var(--cm-surface-2); border: 1px solid var(--cm-line); }
.cm-setup-alias code { font-family: var(--cm-mono); font-size: .95rem; color: var(--cm-accent); background: transparent !important; box-shadow: none; padding: 0; overflow-wrap: anywhere; }

@media (max-width: 575px) {
  .cm-setup-head, .cm-setup-body, .cm-setup-foot { padding-left: 20px; padding-right: 20px; }
  .cm-setup-steps li { font-size: 0; }
  .cm-setup-steps li::before { font-size: .8rem; }
}