:root {
    color-scheme: light;
    --ink: #162036;
    --muted: #69748a;
    --muted-strong: #4f5a71;
    --line: #e5e9f1;
    --line-strong: #d9deea;
    --canvas: #f5f7fb;
    --surface: #ffffff;
    --surface-soft: #f9fafc;
    --shadow: 0 24px 70px rgba(37, 47, 77, 0.14), 0 4px 14px rgba(37, 47, 77, 0.06);
    --accent: #5268f6;
    --accent-dark: #3d4fd4;
    --accent-soft: #eef0ff;
    --accent-faint: #f7f8ff;
    --accent-rgb: 82, 104, 246;
    --green: #1c9a68;
    --green-soft: #e9f8f1;
    --amber: #d99019;
    --amber-soft: #fff6e6;
    --violet: #7657d7;
    --violet-soft: #f2edff;
    --blue: #3779e6;
    --blue-soft: #eaf2ff;
    --rose: #d95878;
    --rose-soft: #fff0f4;
    --slate-soft: #edf1f6;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 11px;
}

.theme-action-sender {
    --accent: #7257e8;
    --accent-dark: #5941c7;
    --accent-soft: #f1edff;
    --accent-faint: #faf8ff;
    --accent-rgb: 114, 87, 232;
}

.theme-vehicle-ops {
    --accent: #137d70;
    --accent-dark: #0b665d;
    --accent-soft: #e5f6f2;
    --accent-faint: #f5fbf9;
    --accent-rgb: 19, 125, 112;
}

.theme-poisha {
    --accent: #20865c;
    --accent-dark: #146b48;
    --accent-soft: #e6f5ed;
    --accent-faint: #f4fbf7;
    --accent-rgb: 32, 134, 92;
}

.theme-property-crm {
    --accent: #e66b3c;
    --accent-dark: #c94f24;
    --accent-soft: #fff0e9;
    --accent-faint: #fff9f5;
    --accent-rgb: 230, 107, 60;
}

.theme-automation-studio {
    --accent: #5c5bdc;
    --accent-dark: #4645bd;
    --accent-soft: #ececff;
    --accent-faint: #f7f7ff;
    --accent-rgb: 92, 91, 220;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 8%, rgba(var(--accent-rgb), 0.09), transparent 28rem),
        radial-gradient(circle at 92% 30%, rgba(var(--accent-rgb), 0.07), transparent 32rem),
        linear-gradient(180deg, #fbfcfe 0%, #f4f6fa 100%);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(108, 119, 144, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(108, 119, 144, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    content: "";
    mask-image: linear-gradient(to bottom, black, transparent 70%);
    pointer-events: none;
}

button,
input {
    color: inherit;
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    border: 0;
    cursor: pointer;
}

a {
    color: inherit;
}

svg {
    display: block;
}

i,
em {
    font-style: normal;
}

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100;
    padding: 10px 14px;
    border-radius: 10px;
    color: #fff;
    background: var(--ink);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 180ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid #203b91;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.96);
}

.preview-header {
    display: flex;
    width: min(1500px, calc(100% - 48px));
    margin: 0 auto;
    padding: 28px 0 18px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.portfolio-return {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--muted-strong);
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    transition: color 160ms ease, transform 160ms ease;
}

.portfolio-return svg {
    width: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.portfolio-return:hover {
    color: var(--accent-dark);
    transform: translateX(-3px);
}

.preview-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.preview-pill {
    display: inline-flex;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    align-items: center;
    gap: 7px;
    color: var(--muted-strong);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 5px 15px rgba(45, 55, 82, 0.04);
    font-size: 12px;
    font-weight: 750;
    backdrop-filter: blur(12px);
}

.preview-pill--interactive {
    border-color: rgba(var(--accent-rgb), 0.19);
    color: var(--accent-dark);
    background: var(--accent-soft);
}

.preview-pill--interactive i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.1);
    animation: soft-pulse 2.4s ease-in-out infinite;
}

.preview-main {
    width: min(1500px, calc(100% - 48px));
    margin: 0 auto;
    padding-bottom: 42px;
}

.preview-intro {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(300px, 0.65fr);
    padding: 26px 4px 28px;
    align-items: end;
    justify-content: space-between;
    gap: 36px;
}

.preview-kicker {
    margin: 0 0 8px;
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.preview-intro h1 {
    margin: 0;
    color: #131c30;
    font-size: clamp(34px, 4.2vw, 62px);
    font-weight: 790;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.preview-intro > p {
    max-width: 650px;
    margin: 0 0 2px;
    color: var(--muted);
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.65;
}

.browser-window {
    overflow: hidden;
    border: 1px solid rgba(161, 171, 194, 0.44);
    border-radius: 23px;
    background: #fff;
    box-shadow: var(--shadow);
}

.browser-chrome {
    display: grid;
    min-height: 58px;
    padding: 10px 16px;
    grid-template-columns: 90px minmax(180px, 560px) 1fr;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid #e4e8ef;
    background: linear-gradient(180deg, #fbfcfd, #f5f7fa);
}

.browser-dots {
    display: flex;
    gap: 7px;
}

.browser-dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ff6d6a;
    box-shadow: inset 0 0 0 1px rgba(78, 35, 34, 0.08);
}

.browser-dots span:nth-child(2) {
    background: #ffc557;
}

.browser-dots span:nth-child(3) {
    background: #5acb72;
}

.browser-address {
    display: flex;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #e2e6ee;
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    color: #6e788c;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(31, 40, 62, 0.02);
    font-size: 12px;
    font-weight: 650;
}

.browser-address svg {
    width: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: #8a94a8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.browser-address span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browser-environment {
    display: inline-flex;
    justify-self: end;
    align-items: center;
    gap: 7px;
    color: #758096;
    font-size: 11px;
    font-weight: 720;
}

.browser-environment i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.browser-viewport {
    overflow: hidden;
    background: var(--canvas);
}

.preview-note {
    display: flex;
    max-width: 920px;
    margin: 20px auto 0;
    padding: 14px 18px;
    align-items: flex-start;
    justify-content: center;
    gap: 11px;
    color: #717c90;
    font-size: 12px;
    text-align: center;
}

.preview-note svg {
    width: 17px;
    flex: 0 0 auto;
    margin-top: 1px;
    fill: none;
    stroke: var(--accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.preview-note p {
    margin: 0;
}

.preview-note strong {
    color: var(--muted-strong);
}

.demo-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    max-width: min(390px, calc(100vw - 44px));
    padding: 13px 17px 13px 42px;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 13px;
    color: #354158;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 48px rgba(34, 44, 75, 0.17);
    font-size: 13px;
    font-weight: 650;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(0.97);
    transition: opacity 170ms ease, transform 170ms ease;
    backdrop-filter: blur(12px);
}

.demo-toast::before {
    position: absolute;
    top: 13px;
    left: 15px;
    display: grid;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    place-items: center;
    color: #fff;
    background: var(--accent);
    content: "✓";
    font-size: 11px;
    font-weight: 900;
}

.demo-toast.is-visible {
    opacity: 1;
    transform: none;
}

/* Shared product shell */

.mock-product {
    display: grid;
    min-height: 760px;
    grid-template-columns: 224px minmax(0, 1fr);
    color: var(--ink);
    background: var(--canvas);
    font-size: 13px;
    line-height: 1.4;
}

.mock-product button,
.mock-product input {
    font-size: inherit;
}

.app-sidebar {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    padding: 20px 14px 15px;
    border-right: 1px solid var(--line);
    flex-direction: column;
    color: #445068;
    background: rgba(255, 255, 255, 0.94);
}

.app-brand {
    display: flex;
    min-height: 49px;
    padding: 3px 6px 13px;
    align-items: center;
    gap: 10px;
}

.app-brand > span:last-child,
.app-user > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.app-brand strong {
    color: #1c263a;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.app-brand small,
.app-user small {
    color: #929bad;
    font-size: 10px;
}

.brand-mark {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.34), transparent 38%),
        linear-gradient(145deg, var(--accent), var(--accent-dark));
    box-shadow: 0 7px 18px rgba(var(--accent-rgb), 0.2);
    font-size: 15px;
    font-weight: 850;
}

.side-nav {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-top: 1px solid #eef1f5;
}

.side-nav button {
    display: grid;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 10px;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    color: #69758a;
    background: transparent;
    font-size: 11px;
    font-weight: 680;
    text-align: left;
    transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

.side-nav button:hover {
    color: var(--accent-dark);
    background: var(--accent-faint);
    transform: translateX(2px);
}

.side-nav button.is-active {
    color: var(--accent-dark);
    background: var(--accent-soft);
    box-shadow: inset 3px 0 var(--accent);
}

.side-nav button i {
    display: grid;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    place-items: center;
    color: #7a8497;
    background: #edf0f5;
    font-size: 9px;
}

.side-nav button.is-active i {
    color: var(--accent-dark);
    background: rgba(255, 255, 255, 0.75);
}

.nav-icon {
    color: #8b95a7;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

.side-nav button.is-active .nav-icon {
    color: var(--accent);
}

.sidebar-card {
    display: flex;
    margin: auto 1px 12px;
    padding: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.13);
    border-radius: 13px;
    align-items: flex-start;
    gap: 9px;
    background: var(--accent-faint);
}

.sidebar-card > div {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.sidebar-card strong {
    color: #465168;
    font-size: 10px;
    font-weight: 750;
}

.sidebar-card small {
    color: #8a94a6;
    font-size: 9px;
    line-height: 1.45;
}

.live-orb {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(28, 154, 104, 0.1);
}

.mini-icon {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    border-radius: 8px;
    place-items: center;
    color: var(--accent-dark);
    background: var(--accent-soft);
    font-size: 11px;
    font-weight: 800;
}

.app-user {
    display: flex;
    padding: 13px 6px 2px;
    border-top: 1px solid #eef1f5;
    align-items: center;
    gap: 9px;
}

.app-user strong {
    overflow: hidden;
    color: #485368;
    font-size: 10px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    border-radius: 10px;
    place-items: center;
    color: #375177;
    background: #e5efff;
    font-size: 9px;
    font-weight: 850;
}

.avatar--violet {
    color: #5b43bd;
    background: #eee9ff;
}

.avatar--teal,
.avatar--green {
    color: #116f60;
    background: #def3ed;
}

.avatar--orange,
.avatar--peach {
    color: #aa542f;
    background: #ffeadf;
}

.avatar--blue {
    color: #3c67b3;
    background: #e5efff;
}

.avatar--lavender,
.avatar--indigo {
    color: #5e54b5;
    background: #eceaff;
}

.app-stage {
    min-width: 0;
}

.app-topbar {
    display: flex;
    min-height: 66px;
    padding: 10px 22px;
    border-bottom: 1px solid var(--line);
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
}

.mobile-brand {
    display: none;
    align-items: center;
    gap: 8px;
}

.app-search {
    display: flex;
    width: min(355px, 45%);
    min-width: 210px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    color: #8a94a7;
    background: #f8f9fb;
}

.app-search svg {
    width: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
}

.app-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    flex: 1;
    color: #4c586e;
    background: transparent;
    font-size: 10px;
}

.app-search input::placeholder {
    color: #9aa2b2;
}

.app-search kbd {
    padding: 3px 6px;
    border: 1px solid #e0e4eb;
    border-radius: 5px;
    color: #949daf;
    background: #fff;
    box-shadow: 0 1px 1px rgba(31, 40, 62, 0.04);
    font: 8px inherit;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #919aac;
    font-size: 10px;
}

.breadcrumb i {
    color: #c1c7d2;
    font-size: 14px;
}

.breadcrumb strong {
    color: #4d586d;
}

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.icon-button {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    place-items: center;
    color: #8b95a8;
    background: #fff;
    font-size: 8px;
}

.button {
    display: inline-flex;
    min-height: 34px;
    padding: 8px 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 10px !important;
    font-weight: 760;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button--primary {
    color: #fff;
    background: linear-gradient(145deg, var(--accent), var(--accent-dark));
    box-shadow: 0 7px 16px rgba(var(--accent-rgb), 0.18);
}

.button--primary:hover {
    box-shadow: 0 9px 22px rgba(var(--accent-rgb), 0.24);
}

.button--soft {
    border-color: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-dark);
    background: var(--accent-soft);
}

.button--ghost {
    border-color: var(--line);
    color: #687388;
    background: #fff;
}

.button--wide {
    width: 100%;
}

.saved-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8a94a6;
    font-size: 9px;
    font-weight: 650;
}

.saved-state i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

.app-content {
    padding: 24px;
}

.app-heading {
    display: flex;
    margin-bottom: 19px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.app-heading h2 {
    margin: 2px 0 3px;
    color: #1b2538;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 790;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.app-heading p {
    margin: 0;
    color: #8892a5;
    font-size: 10px;
}

.app-heading .app-eyebrow,
.app-eyebrow {
    margin: 0;
    color: var(--accent-dark);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.segmented-tabs,
.tiny-tabs,
.filter-pills,
.view-switch {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 9px;
    align-items: center;
    gap: 2px;
    background: #f7f8fa;
}

.segmented-tabs button,
.tiny-tabs button,
.filter-pills button,
.view-switch button {
    min-height: 27px;
    padding: 5px 9px;
    border-radius: 6px;
    color: #8992a4;
    background: transparent;
    font-size: 9px;
    font-weight: 720;
}

.segmented-tabs button.is-active,
.tiny-tabs button.is-active,
.filter-pills button.is-active,
.view-switch button.is-active {
    color: #3b465b;
    background: #fff;
    box-shadow: 0 2px 7px rgba(38, 47, 70, 0.08);
}

.metric-grid {
    display: grid;
    margin-bottom: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.metric-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 104px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(34, 43, 68, 0.025);
}

.metric-card > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.metric-card small {
    color: #8993a6;
    font-size: 8px;
    font-weight: 650;
}

.metric-card strong {
    margin-top: 2px;
    color: #263147;
    font-size: 20px;
    font-weight: 780;
    letter-spacing: -0.03em;
}

.metric-card em {
    margin-top: 2px;
    color: #9aa2b2;
    font-size: 8px;
}

.metric-card em i {
    color: var(--green);
    font-weight: 750;
}

.metric-icon {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    border-radius: 9px;
    place-items: center;
    color: var(--accent-dark);
    background: var(--accent-soft);
    font-size: 13px;
    font-weight: 850;
}

.metric-icon--blue {
    color: var(--blue);
    background: var(--blue-soft);
}

.metric-icon--green {
    color: var(--green);
    background: var(--green-soft);
}

.metric-icon--violet {
    color: var(--violet);
    background: var(--violet-soft);
}

.metric-icon--amber {
    color: var(--amber);
    background: var(--amber-soft);
}

.sparkline {
    position: absolute;
    right: 10px;
    bottom: 12px;
    width: 58px;
    height: 22px;
    opacity: 0.62;
}

.sparkline::before {
    position: absolute;
    inset: 0;
    background: var(--accent);
    content: "";
    clip-path: polygon(0 80%, 14% 54%, 27% 72%, 44% 25%, 59% 48%, 75% 14%, 100% 34%, 100% 100%, 0 100%);
    opacity: 0.15;
}

.sparkline::after {
    position: absolute;
    inset: 0;
    background: var(--accent);
    content: "";
    clip-path: polygon(0 76%, 14% 50%, 27% 68%, 44% 21%, 59% 44%, 75% 10%, 100% 30%, 100% 35%, 75% 15%, 59% 49%, 44% 26%, 27% 73%, 14% 55%, 0 81%);
}

.sparkline--two::after,
.sparkline--two::before {
    background: var(--green);
}

.sparkline--three::after,
.sparkline--three::before {
    background: var(--violet);
}

.sparkline--four::after,
.sparkline--four::before {
    background: var(--amber);
}

.dashboard-grid {
    display: grid;
    margin-bottom: 14px;
    grid-template-columns: minmax(0, 1.6fr) minmax(250px, 0.8fr);
    gap: 14px;
}

.dashboard-grid--balanced {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
}

.surface {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 3px 10px rgba(34, 43, 68, 0.025);
}

.surface-heading {
    display: flex;
    min-height: 35px;
    margin-bottom: 13px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.surface-heading--wrap {
    flex-wrap: wrap;
}

.surface-heading h3,
.surface-heading h4 {
    margin: 0;
    color: #303a4f;
    font-size: 12px;
    font-weight: 770;
    letter-spacing: -0.015em;
}

.surface-heading p {
    margin: 2px 0 0;
    color: #969eae;
    font-size: 8px;
}

.surface-controls {
    display: flex;
    align-items: center;
    gap: 9px;
}

.subtle-count {
    color: #9aa2b2;
    font-size: 8px;
}

.status {
    display: inline-flex;
    min-height: 21px;
    padding: 4px 7px;
    border-radius: 999px;
    align-items: center;
    gap: 4px;
    color: #6f7a8e;
    background: #f0f2f6;
    font-size: 7px;
    font-weight: 750;
    white-space: nowrap;
}

.status--healthy {
    color: #16805a;
    background: var(--green-soft);
}

.status--neutral {
    color: #68748a;
    background: #f0f2f6;
}

.status--blue {
    color: #326cc8;
    background: var(--blue-soft);
}

.status--violet {
    color: #684ac4;
    background: var(--violet-soft);
}

.status--amber {
    color: #a96c0a;
    background: var(--amber-soft);
}

.dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9aa4b5;
}

.dot--green {
    background: var(--green);
}

.dot--blue {
    background: var(--blue);
}

.dot--violet {
    background: var(--violet);
}

.dot--amber {
    background: var(--amber);
}

.empty-view {
    display: flex;
    min-height: 500px;
    padding: 56px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background:
        radial-gradient(circle at 50% 28%, rgba(var(--accent-rgb), 0.12), transparent 14rem),
        #fff;
    text-align: center;
}

.empty-view__icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 15px;
    border-radius: 18px;
    place-items: center;
    color: var(--accent-dark);
    background: var(--accent-soft);
    box-shadow: 0 14px 30px rgba(var(--accent-rgb), 0.12);
    font-size: 25px;
}

.empty-view h3 {
    margin: 7px 0;
    font-size: 20px;
    letter-spacing: -0.025em;
}

.empty-view > p:not(.app-eyebrow) {
    max-width: 520px;
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

/* Panelavo */

.chart-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #8e97a8;
    font-size: 8px;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.chart-legend i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
}

.legend-blue {
    background: var(--accent);
}

.legend-soft {
    background: rgba(var(--accent-rgb), 0.17);
}

.chart-legend strong {
    margin-left: auto;
    color: var(--green);
    font-size: 8px;
}

.bar-chart {
    position: relative;
    display: flex;
    height: 110px;
    margin-top: 12px;
    padding: 0 5px;
    align-items: end;
    justify-content: space-around;
    gap: 8px;
    background:
        repeating-linear-gradient(to bottom, transparent 0, transparent 35px, #eef1f5 36px);
}

.bar-chart span {
    position: relative;
    display: block;
    width: min(22px, 6.5%);
    height: var(--bar-height);
    min-height: 9px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), 0.55));
    box-shadow: 0 4px 10px rgba(var(--accent-rgb), 0.08);
    transform-origin: bottom;
    animation: rise-bar 550ms cubic-bezier(.2,.75,.2,1) both;
    animation-delay: var(--bar-delay);
    transition: height 420ms cubic-bezier(.2,.75,.2,1);
}

.bar-chart span:nth-child(even) {
    opacity: 0.62;
}

.chart-axis {
    display: flex;
    margin-top: 7px;
    justify-content: space-between;
    color: #a2a9b7;
    font-size: 7px;
}

.health-score {
    display: flex;
    margin: 5px 0 13px;
    padding: 10px;
    border-radius: 13px;
    align-items: center;
    gap: 13px;
    background: #f8fafb;
}

.score-ring {
    position: relative;
    display: grid;
    width: 63px;
    height: 63px;
    flex: 0 0 auto;
    border-radius: 50%;
    place-items: center;
    background: conic-gradient(var(--green) 0 96%, #e7ecef 96%);
}

.score-ring::before {
    position: absolute;
    inset: 6px;
    border-radius: inherit;
    background: #fff;
    content: "";
}

.score-ring strong,
.score-ring small {
    position: relative;
    z-index: 1;
}

.score-ring strong {
    margin-top: 7px;
    color: #2e3b50;
    font-size: 16px;
}

.score-ring small {
    margin-top: -17px;
    color: #a0a8b6;
    font-size: 6px;
}

.health-score > div:last-child strong {
    color: #334056;
    font-size: 11px;
}

.health-score > div:last-child p {
    margin: 3px 0 0;
    color: #919bac;
    font-size: 8px;
    line-height: 1.5;
}

.health-list {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 0;
    list-style: none;
}

.health-list li {
    display: flex;
    padding: 9px 2px;
    border-top: 1px solid #eff1f5;
    align-items: center;
    justify-content: space-between;
    color: #6f7a8e;
    font-size: 8px;
}

.health-list li span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.health-list li strong {
    color: #515c70;
    font-size: 8px;
}

.sites-card {
    padding-bottom: 8px;
}

.data-table {
    min-width: 0;
}

.table-row {
    display: grid;
    min-height: 46px;
    padding: 7px 3px;
    border-top: 1px solid #eff1f5;
    grid-template-columns: minmax(180px, 1.5fr) .7fr .65fr .85fr 28px;
    align-items: center;
    gap: 10px;
    color: #717b8e;
    font-size: 8px;
}

.table-row[hidden] {
    display: none;
}

.table-head {
    min-height: 27px;
    padding-top: 0;
    border-top: 0;
    color: #a0a7b5;
    font-size: 7px;
    text-transform: uppercase;
}

.site-name {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.site-name > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.site-name strong {
    overflow: hidden;
    color: #3c475c;
    font-size: 9px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-name small {
    color: #9ca4b3;
    font-size: 7px;
}

.site-favicon {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 8px;
    place-items: center;
    color: #fff;
    background: var(--accent);
    font-size: 9px;
    font-weight: 800;
}

.site-favicon--cyan {
    background: #2ba5b6;
}

.site-favicon--amber {
    background: #d79625;
}

.site-favicon--rose {
    background: #d85f7d;
}

.row-action {
    display: grid;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    place-items: center;
    color: #8f98a9;
    background: transparent;
    font-size: 10px;
}

.row-action:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.server-gauges {
    display: grid;
    width: min(650px, 100%);
    margin: 15px 0 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.server-gauges article {
    display: flex;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.75);
    text-align: left;
}

.server-gauges article > div {
    display: flex;
    flex-direction: column;
}

.server-gauges article strong {
    font-size: 9px;
}

.server-gauges article small {
    color: #929bad;
    font-size: 7px;
}

.radial {
    position: relative;
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 50%;
    place-items: center;
    background: conic-gradient(var(--accent) 0 42%, #e7eaf0 42%);
}

.radial::before {
    position: absolute;
    inset: 5px;
    border-radius: inherit;
    background: #fff;
    content: "";
}

.radial strong {
    position: relative;
    z-index: 1;
    font-size: 8px !important;
}

.radial--ram {
    background: conic-gradient(var(--violet) 0 61%, #e7eaf0 61%);
}

.radial--disk {
    background: conic-gradient(var(--green) 0 38%, #e7eaf0 38%);
}

.activity-view {
    max-width: 820px;
    margin: 0 auto;
}

.activity-list,
.run-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-list li {
    display: grid;
    padding: 13px 2px;
    border-top: 1px solid #eef1f5;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
}

.activity-icon {
    display: grid;
    width: 31px;
    height: 31px;
    border-radius: 9px;
    place-items: center;
    color: var(--accent-dark);
    background: var(--accent-soft);
    font-weight: 800;
}

.activity-list div {
    display: flex;
    flex-direction: column;
}

.activity-list strong {
    color: #3e495e;
    font-size: 9px;
}

.activity-list p {
    margin: 1px 0 0;
    color: #959dad;
    font-size: 7px;
}

.activity-list time {
    color: #99a1b0;
    font-size: 8px;
}

/* Action Sender */

.sender-app {
    --sender-chat: #e9f8ef;
}

.sender-mark {
    border-radius: 50% 50% 50% 12px;
}

.sidebar-card--violet {
    background: linear-gradient(145deg, #faf8ff, #f0ecff);
}

.campaign-status {
    display: inline-flex;
    padding: 7px 10px;
    border: 1px solid #e6e1f6;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    color: #776a94;
    background: #faf8ff;
    font-size: 8px;
    font-weight: 720;
}

.campaign-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.composer-content {
    padding-bottom: 20px;
}

.composer-heading {
    margin-bottom: 14px;
}

.campaign-progress {
    display: flex;
    max-width: 850px;
    margin: 0 auto 17px;
    padding: 0 8px;
    align-items: center;
}

.campaign-progress > span {
    height: 1px;
    flex: 1;
    background: #e1e4eb;
}

.campaign-progress button {
    display: flex;
    padding: 0;
    align-items: center;
    gap: 6px;
    color: #8a94a5;
    background: transparent;
    text-align: left;
}

.campaign-progress button > i {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border: 1px solid #dfe3eb;
    border-radius: 50%;
    place-items: center;
    color: #8f98aa;
    background: #fff;
    font-size: 8px;
    font-weight: 800;
}

.campaign-progress button > span {
    display: flex;
    flex-direction: column;
}

.campaign-progress button strong,
.campaign-progress button > span {
    font-size: 8px;
    font-weight: 750;
}

.campaign-progress button small {
    display: none;
    color: #a0a7b6;
    font-size: 6px;
    font-weight: 500;
}

.campaign-progress button.is-complete > i {
    border-color: var(--accent);
    color: #fff;
    background: var(--accent);
}

.campaign-progress button.is-current {
    color: var(--accent-dark);
}

.campaign-progress button.is-current > i {
    border-color: var(--accent);
    color: #fff;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.11);
}

.composer-grid {
    display: grid;
    max-width: 1020px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .62fr);
    align-items: start;
    gap: 15px;
}

.composer-editor {
    padding: 0;
    overflow: hidden;
}

.composer-toolbar {
    min-height: 63px;
    margin: 0;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    align-items: center;
}

.composer-toolbar h3 {
    margin-top: 4px;
}

.step-chip {
    color: #929bac;
    font-size: 7px;
}

.step-chip strong {
    color: var(--accent-dark);
}

.sender-tabs {
    margin: 11px 16px 0;
}

.editor-panel {
    min-height: 363px;
    padding: 15px 16px;
}

.field-label,
.config-section > label,
.config-section .field-heading label {
    display: block;
    margin-bottom: 7px;
    color: #5d687d;
    font-size: 8px;
    font-weight: 750;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.template-card {
    display: flex;
    min-height: 72px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    align-items: flex-start;
    flex-direction: column;
    color: #5c677b;
    background: #fff;
    text-align: left;
}

.template-card:hover,
.template-card.is-selected {
    border-color: rgba(var(--accent-rgb), 0.45);
    background: var(--accent-faint);
    box-shadow: 0 5px 15px rgba(var(--accent-rgb), 0.06);
}

.template-card span {
    margin-bottom: 5px;
    font-size: 13px;
}

.template-card strong {
    font-size: 8px;
}

.template-card small {
    color: #9aa2b1;
    font-size: 7px;
}

.message-field {
    margin-top: 14px;
}

.field-heading,
.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.field-heading label {
    color: #5d687d;
    font-size: 8px;
    font-weight: 750;
}

.field-heading span {
    color: #9aa3b2;
    font-size: 7px;
}

.mock-textarea {
    min-height: 78px;
    margin-top: 7px;
    padding: 12px;
    border: 1px solid #dfe3eb;
    border-radius: 10px 10px 0 0;
    color: #535f74;
    background: #fbfcfd;
    font-size: 9px;
    line-height: 1.65;
}

.token {
    padding: 2px 4px;
    border-radius: 4px;
    color: var(--accent-dark);
    background: var(--accent-soft);
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-size: .92em;
}

.field-tools {
    display: flex;
    padding: 6px 8px;
    border: 1px solid #dfe3eb;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    gap: 5px;
    background: #fff;
}

.field-tools button {
    padding: 4px 6px;
    border-radius: 5px;
    color: #7d8799;
    background: transparent;
    font-size: 7px;
}

.field-tools button:hover {
    color: var(--accent-dark);
    background: var(--accent-soft);
}

.selection-summary {
    display: flex;
    margin-top: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    background: #f8f9fb;
}

.selection-summary > div {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.selection-summary strong {
    color: #596478;
    font-size: 8px;
}

.selection-summary p {
    margin: 1px 0 0;
    color: #9aa2b2;
    font-size: 7px;
}

.selection-icon {
    display: grid;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    place-items: center;
    color: var(--accent-dark);
    background: var(--accent-soft);
    font-size: 10px;
}

.composer-footer {
    display: flex;
    min-height: 57px;
    padding: 11px 16px;
    border-top: 1px solid var(--line);
    align-items: center;
    justify-content: space-between;
}

.composer-footer > div {
    display: flex;
    gap: 7px;
}

.audience-hero {
    display: flex;
    padding: 15px;
    border: 1px solid #e5e1f5;
    border-radius: 12px;
    align-items: center;
    gap: 13px;
    background: #faf9ff;
}

.audience-avatars {
    display: flex;
    padding-left: 7px;
}

.audience-avatars i {
    display: grid;
    width: 29px;
    height: 29px;
    margin-left: -7px;
    border: 2px solid #faf9ff;
    border-radius: 50%;
    place-items: center;
    color: #62517e;
    background: #e9e4fa;
    font-size: 6px;
    font-weight: 800;
}

.audience-hero strong {
    font-size: 10px;
}

.audience-hero p {
    margin: 2px 0 0;
    color: #8f98aa;
    font-size: 8px;
}

.check-list {
    display: grid;
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    display: flex;
    padding: 11px 2px;
    border-top: 1px solid #eef0f4;
    align-items: center;
    gap: 9px;
}

.check-list li > i {
    display: grid;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    place-items: center;
    color: var(--green);
    background: var(--green-soft);
    font-size: 8px;
}

.check-list li span {
    display: flex;
    flex-direction: column;
}

.check-list strong {
    font-size: 9px;
}

.check-list small {
    color: #969fae;
    font-size: 7px;
}

.safeguard-list {
    display: grid;
    gap: 8px;
}

.safeguard-list > div {
    display: flex;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    align-items: center;
    gap: 9px;
}

.safeguard-list p {
    display: flex;
    min-width: 0;
    margin: 0;
    flex: 1;
    flex-direction: column;
}

.safeguard-list strong {
    font-size: 9px;
}

.safeguard-list small {
    color: #969fae;
    font-size: 7px;
}

.safeguard-icon {
    display: grid;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    place-items: center;
    color: var(--accent-dark);
    background: var(--accent-soft);
}

.switch {
    position: relative;
    width: 31px;
    height: 18px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 999px;
    background: #d8dde6;
    transition: background 170ms ease;
}

.switch i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(34, 42, 61, .15);
    transition: transform 170ms ease;
}

.switch.is-active {
    background: var(--accent);
}

.switch.is-active i {
    transform: translateX(13px);
}

.phone-preview {
    min-width: 0;
}

.phone-label {
    display: flex;
    margin: 0 4px 8px;
    align-items: center;
    justify-content: space-between;
    color: #7a8497;
    font-size: 8px;
    font-weight: 750;
}

.phone-label button {
    color: var(--accent-dark);
    background: transparent;
    font-size: 7px;
    font-weight: 750;
}

.phone-shell {
    max-width: 280px;
    margin: 0 auto;
    padding: 6px;
    border: 1px solid #dfe3eb;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 15px 35px rgba(48, 42, 75, .11);
}

.phone-top {
    display: flex;
    height: 22px;
    padding: 0 10px;
    align-items: center;
    justify-content: space-between;
    color: #354158;
    font-size: 6px;
    font-weight: 750;
}

.phone-top i {
    width: 42px;
    height: 13px;
    border-radius: 0 0 9px 9px;
    background: #202535;
}

.chat-head {
    display: flex;
    height: 47px;
    padding: 7px 8px;
    align-items: center;
    gap: 7px;
    color: #fff;
    background: #3b725c;
}

.chat-head > button {
    padding: 0;
    color: #fff;
    background: transparent;
    font-size: 20px;
}

.chat-avatar {
    display: grid;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    place-items: center;
    color: #32634f;
    background: #e0f2ea;
    font-size: 10px;
    font-weight: 800;
}

.chat-head div {
    display: flex;
    flex-direction: column;
}

.chat-head strong {
    font-size: 8px;
}

.chat-head small {
    font-size: 6px;
    opacity: .8;
}

.chat-head small i {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #80e2b8;
}

.chat-canvas {
    position: relative;
    display: flex;
    min-height: 292px;
    padding: 32px 12px 14px;
    overflow: hidden;
    align-items: flex-end;
    flex-direction: column;
    background:
        radial-gradient(circle at 15% 20%, rgba(60, 104, 80, .04) 0 2px, transparent 2.5px),
        radial-gradient(circle at 70% 60%, rgba(60, 104, 80, .04) 0 2px, transparent 2.5px),
        #eef4f0;
    background-size: 24px 24px, 31px 31px;
}

.chat-date {
    position: absolute;
    top: 9px;
    left: 50%;
    padding: 3px 7px;
    border-radius: 999px;
    color: #748278;
    background: rgba(255, 255, 255, .78);
    font-size: 6px;
    transform: translateX(-50%);
}

.chat-bubble {
    width: 88%;
    padding: 9px 9px 5px;
    border-radius: 10px 2px 10px 10px;
    color: #34433d;
    background: #d8f3e3;
    box-shadow: 0 2px 4px rgba(37, 65, 52, .07);
    font-size: 8px;
}

.chat-bubble p {
    margin: 0;
    line-height: 1.5;
}

.chat-bubble small {
    display: block;
    color: #6b8579;
    font-size: 5px;
    text-align: right;
}

.chat-action {
    width: 88%;
    margin-top: 5px;
    padding: 7px;
    border: 1px solid #c8e9d6;
    border-radius: 8px;
    color: #38715a;
    background: #fff;
    font-size: 7px;
    font-weight: 750;
}

.consent-caption {
    width: 88%;
    margin-top: 6px;
    color: #8b978f;
    font-size: 5px;
    text-align: center;
}

.chat-compose {
    display: grid;
    height: 43px;
    padding: 7px 8px;
    grid-template-columns: 20px 1fr 24px;
    align-items: center;
    gap: 5px;
    color: #839087;
    background: #f8faf8;
    font-size: 10px;
}

.chat-compose p {
    margin: 0;
    padding: 7px 9px;
    border: 1px solid #e0e6e2;
    border-radius: 999px;
    color: #a1aaa4;
    background: #fff;
    font-size: 7px;
}

.phone-summary {
    display: flex;
    max-width: 280px;
    margin: 9px auto 0;
    padding: 9px 10px;
    border: 1px solid #e5e8ee;
    border-radius: 11px;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.75);
}

.phone-summary > i {
    display: grid;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    place-items: center;
    color: var(--green);
    background: var(--green-soft);
    font-size: 7px;
}

.phone-summary p {
    display: flex;
    margin: 0;
    flex-direction: column;
}

.phone-summary strong {
    font-size: 8px;
}

.phone-summary small {
    color: #929bac;
    font-size: 6px;
}

/* Vehicle Ops */

.vehicle-app {
    --ink: #19262c;
}

.vehicle-mark {
    border-radius: 10px 10px 10px 2px;
}

.shift-card,
.property-goal,
.automation-usage {
    display: grid;
    margin: auto 1px 12px;
    padding: 12px;
    border: 1px solid rgba(var(--accent-rgb), .13);
    border-radius: 13px;
    gap: 6px;
    background: var(--accent-faint);
}

.shift-card > div,
.property-goal > div,
.automation-usage > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #596579;
    font-size: 9px;
}

.shift-card > div strong,
.property-goal > div span,
.automation-usage > div span {
    color: var(--accent-dark);
}

.progress-track {
    display: block;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), .12);
}

.progress-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.shift-card small,
.property-goal small,
.automation-usage small {
    color: #8d97a8;
    font-size: 7px;
}

.date-control {
    display: flex;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    align-items: center;
    gap: 7px;
    background: #fff;
}

.date-control button {
    display: grid;
    width: 25px;
    height: 25px;
    border-radius: 7px;
    place-items: center;
    color: #8c96a8;
    background: #f7f8fa;
}

.date-control span {
    display: flex;
    min-width: 75px;
    flex-direction: column;
    text-align: center;
}

.date-control small {
    color: #9aa3b2;
    font-size: 6px;
}

.date-control strong {
    color: #526075;
    font-size: 8px;
}

.metric-card--dark {
    border-color: #213c3a;
    color: #fff;
    background:
        radial-gradient(circle at 90% 20%, rgba(55, 202, 171, .22), transparent 8rem),
        linear-gradient(145deg, #173d39, #122e2d);
}

.metric-card--dark .metric-icon {
    color: #dcfff7;
    background: rgba(255, 255, 255, .1);
}

.metric-card--dark small,
.metric-card--dark em {
    color: rgba(230, 255, 250, .57);
}

.metric-card--dark strong {
    color: #fff;
}

.vehicle-outline {
    position: absolute;
    right: -4px;
    bottom: 8px;
    width: 88px;
    height: 40px;
    opacity: .18;
}

.vehicle-outline::before {
    position: absolute;
    inset: 9px 4px 7px;
    border: 2px solid #b5fff0;
    border-radius: 40% 52% 28% 25%;
    content: "";
    transform: skewX(-8deg);
}

.vehicle-outline::after {
    position: absolute;
    right: 15px;
    bottom: 1px;
    width: 13px;
    height: 13px;
    border: 3px solid #b5fff0;
    border-radius: 50%;
    content: "";
    box-shadow: -51px 0 0 -3px #163b39, -51px 0 0 0 #b5fff0;
}

.metric-mini-bars {
    position: absolute;
    right: 13px;
    bottom: 16px;
    display: flex;
    height: 28px;
    align-items: end;
    gap: 4px;
}

.metric-mini-bars i {
    width: 5px;
    height: 35%;
    border-radius: 3px;
    background: rgba(var(--accent-rgb), .24);
}

.metric-mini-bars i:nth-child(2) { height: 65%; }
.metric-mini-bars i:nth-child(3) { height: 48%; }
.metric-mini-bars i:nth-child(4) { height: 88%; background: var(--accent); }

.metric-donut {
    position: absolute;
    right: 12px;
    bottom: 14px;
    display: grid;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    place-items: center;
    color: var(--green);
    background: radial-gradient(circle, #fff 53%, transparent 54%), conic-gradient(var(--green) 72%, #e8eee9 72%);
    font-size: 6px;
    font-weight: 800;
}

.vehicle-layout {
    display: grid;
    grid-template-columns: minmax(410px, 1.15fr) minmax(310px, .85fr);
    align-items: start;
    gap: 14px;
}

.compact-filters {
    padding: 2px;
}

.compact-filters button {
    min-height: 23px;
    padding: 4px 7px;
    font-size: 7px;
}

.queue-list {
    display: grid;
}

.vehicle-row {
    display: grid;
    min-width: 0;
    min-height: 62px;
    padding: 8px 3px;
    border-top: 1px solid #eef1f4;
    grid-template-columns: 54px minmax(120px, 1fr) auto 58px 15px;
    align-items: center;
    gap: 8px;
    color: #657186;
    background: transparent;
    text-align: left;
}

.vehicle-row:hover,
.vehicle-row.is-selected {
    margin: 0 -7px;
    padding-right: 10px;
    padding-left: 10px;
    border-color: transparent;
    border-radius: 10px;
    background: var(--accent-faint);
}

.vehicle-row > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.vehicle-row > span:nth-child(2) strong {
    overflow: hidden;
    color: #3e4a5f;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vehicle-row > span:nth-child(2) small {
    color: #99a1b1;
    font-size: 7px;
}

.vehicle-thumb {
    position: relative;
    display: block;
    width: 50px;
    height: 33px;
    overflow: hidden;
    border-radius: 9px;
    background: linear-gradient(145deg, #dce8f5, #f4f8fb);
}

.vehicle-thumb::before {
    position: absolute;
    right: 7px;
    bottom: 9px;
    left: 7px;
    height: 10px;
    border-radius: 45% 55% 27% 25%;
    background: #56789b;
    content: "";
    box-shadow: inset 0 3px rgba(255,255,255,.18);
}

.vehicle-thumb::after {
    position: absolute;
    right: 10px;
    bottom: 6px;
    width: 6px;
    height: 6px;
    border: 2px solid #31475d;
    border-radius: 50%;
    content: "";
    box-shadow: -23px 0 0 -2px #eef5fa, -23px 0 0 0 #31475d;
}

.vehicle-thumb--navy { background: linear-gradient(145deg, #d8dce6, #f3f4f8); }
.vehicle-thumb--navy::before { background: #34465c; }
.vehicle-thumb--sage { background: linear-gradient(145deg, #dce9e4, #f4f8f6); }
.vehicle-thumb--sage::before { background: #69867b; }
.vehicle-thumb--silver { background: linear-gradient(145deg, #e2e5e8, #f9fafb); }
.vehicle-thumb--silver::before { background: #949da7; }

.row-progress {
    display: grid;
    gap: 3px;
}

.row-progress > i {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: var(--accent);
}

.row-progress small {
    color: #99a2b1;
    font-size: 6px;
}

.chevron {
    color: #a5adba;
    font-size: 15px;
}

.vehicle-detail {
    padding: 0;
    overflow: hidden;
}

.detail-hero {
    position: relative;
    padding: 15px;
    background:
        linear-gradient(135deg, rgba(var(--accent-rgb), .08), transparent 60%),
        #fbfdfc;
}

.detail-hero .row-action {
    position: absolute;
    top: 11px;
    right: 11px;
}

.vehicle-render {
    position: absolute;
    top: 31px;
    right: 17px;
    width: 108px;
    height: 62px;
    opacity: .9;
}

.vehicle-render::before {
    position: absolute;
    right: 8px;
    bottom: 14px;
    left: 8px;
    height: 27px;
    border-radius: 45% 56% 24% 23%;
    background: linear-gradient(160deg, #6f96b6, #27475f);
    box-shadow: inset 0 8px rgba(255, 255, 255, .16), 0 9px 16px rgba(46, 73, 90, .16);
    content: "";
    transform: skewX(-7deg);
}

.vehicle-render::after {
    position: absolute;
    right: 19px;
    bottom: 9px;
    width: 13px;
    height: 13px;
    border: 3px solid #263943;
    border-radius: 50%;
    background: #c7d6de;
    box-shadow: -53px 0 0 -3px #c7d6de, -53px 0 0 0 #263943;
    content: "";
}

.detail-title {
    min-height: 94px;
    padding-top: 8px;
    padding-right: 110px;
}

.detail-title h3 {
    margin: 7px 0 2px;
    color: #2d3b48;
    font-size: 14px;
    letter-spacing: -0.025em;
}

.detail-title p {
    margin: 0;
    color: #8c97a7;
    font-size: 8px;
}

.vehicle-facts {
    display: grid;
    padding: 11px 15px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.vehicle-facts span {
    display: flex;
    flex-direction: column;
}

.vehicle-facts small {
    color: #9aa3b2;
    font-size: 6px;
}

.vehicle-facts strong {
    color: #556174;
    font-size: 8px;
}

.workflow-panel {
    padding: 13px 15px 5px;
}

.workflow-panel .surface-heading {
    margin-bottom: 8px;
}

.workflow-panel .surface-heading > span {
    color: var(--accent);
    font-size: 7px;
    font-weight: 750;
}

.vehicle-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.vehicle-timeline button {
    position: relative;
    display: flex;
    width: 20%;
    padding: 0;
    align-items: center;
    flex-direction: column;
    color: #9aa3b2;
    background: transparent;
    text-align: center;
}

.vehicle-timeline button:not(:last-child)::after {
    position: absolute;
    top: 12px;
    left: calc(50% + 13px);
    width: calc(100% - 26px);
    height: 1px;
    background: #dde2e8;
    content: "";
}

.vehicle-timeline button > i {
    position: relative;
    z-index: 1;
    display: grid;
    width: 24px;
    height: 24px;
    border: 1px solid #dbe0e7;
    border-radius: 50%;
    place-items: center;
    background: #fff;
    font-size: 7px;
    font-weight: 800;
}

.vehicle-timeline button > span {
    display: flex;
    margin-top: 5px;
    flex-direction: column;
    font-size: 6px;
    font-weight: 700;
}

.vehicle-timeline button small {
    color: #adb4c0;
    font-size: 5px;
    font-weight: 500;
}

.vehicle-timeline button.is-complete > i,
.vehicle-timeline button.is-current > i {
    border-color: var(--accent);
    color: #fff;
    background: var(--accent);
}

.vehicle-timeline button.is-complete:not(:last-child)::after {
    background: var(--accent);
}

.vehicle-timeline button.is-current {
    color: var(--accent-dark);
}

.job-summary {
    display: grid;
    padding: 5px 15px 12px;
}

.job-summary > div {
    display: flex;
    min-height: 42px;
    padding: 8px 0;
    border-top: 1px solid #eef1f4;
    align-items: center;
    gap: 8px;
}

.job-summary p {
    display: flex;
    min-width: 0;
    margin: 0;
    flex: 1;
    flex-direction: column;
}

.job-summary p strong {
    color: #4e5b6d;
    font-size: 8px;
}

.job-summary p small {
    color: #99a2b1;
    font-size: 6px;
}

.job-summary > div > strong {
    color: #435064;
    font-size: 8px;
}

.job-icon {
    display: grid;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    place-items: center;
    color: var(--green);
    background: var(--green-soft);
    font-size: 8px;
}

.job-icon--amber {
    color: var(--amber);
    background: var(--amber-soft);
}

.job-icon--teal {
    color: var(--accent);
    background: var(--accent-soft);
}

.detail-actions,
.inspector-actions {
    display: flex;
    padding: 11px 15px;
    border-top: 1px solid var(--line);
    justify-content: flex-end;
    gap: 7px;
    background: #fbfcfd;
}

/* Poisha */

.poisha-mark {
    font-family: "Nirmala UI", sans-serif;
    font-size: 17px;
}

.poisha-tip {
    background:
        radial-gradient(circle at 90% 10%, rgba(var(--accent-rgb), .14), transparent 5rem),
        var(--accent-faint);
}

.poisha-balance {
    position: relative;
    display: grid;
    min-height: 137px;
    margin-bottom: 14px;
    padding: 21px 24px;
    overflow: hidden;
    border-radius: 18px;
    grid-template-columns: 1fr minmax(280px, .9fr);
    align-items: center;
    gap: 35px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 0%, rgba(139, 236, 184, .23), transparent 18rem),
        linear-gradient(125deg, #143d31, #1e644a 62%, #287a57);
    box-shadow: 0 13px 30px rgba(26, 83, 61, .15);
}

.balance-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.balance-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(234, 255, 244, .73);
    font-size: 9px;
}

.balance-label button {
    display: grid;
    width: 15px;
    height: 15px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    place-items: center;
    color: rgba(255,255,255,.72);
    background: transparent;
    font-size: 7px;
}

.balance-copy > strong {
    margin: 2px 0;
    color: #fff;
    font-size: 30px;
    font-weight: 760;
    letter-spacing: -.035em;
}

.balance-copy > strong small {
    color: #b4ead1;
    font-size: 17px;
}

.balance-copy p {
    margin: 0;
    color: rgba(230, 255, 242, .65);
    font-size: 8px;
}

.balance-copy p i {
    color: #a8f0cc;
    font-weight: 750;
}

.balance-segments {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.balance-segments > div {
    display: flex;
    flex-direction: column;
}

.balance-segments span:not(.stacked-balance) {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(235, 255, 245, .66);
    font-size: 7px;
}

.balance-segments strong {
    color: #fff;
    font-size: 9px;
}

.segment-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #82e2ae;
}

.segment-dot--reserved { background: #f5c66b; }
.segment-dot--due { background: #c4b4ff; }

.stacked-balance {
    display: flex;
    height: 6px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    grid-column: 1 / -1;
    gap: 2px;
    background: rgba(255,255,255,.12);
}

.stacked-balance i {
    display: block;
    height: 100%;
    background: #83e2ae;
}

.stacked-balance i:nth-child(2) { background: #f5c66b; }
.stacked-balance i:nth-child(3) { background: #c4b4ff; }

.balance-art {
    position: absolute;
    top: -45px;
    right: -50px;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}

.balance-art::before,
.balance-art::after,
.balance-art i {
    position: absolute;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 50%;
    content: "";
}

.balance-art::before { inset: 28px; }
.balance-art::after { inset: 58px; }
.balance-art i:first-child { inset: 88px; background: rgba(255,255,255,.03); }

.poisha-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
}

.cashflow-summary {
    display: flex;
    align-items: flex-end;
    gap: 17px;
}

.cashflow-summary span {
    display: flex;
    flex-direction: column;
}

.cashflow-summary small {
    color: #9aa3b2;
    font-size: 7px;
}

.cashflow-summary strong {
    color: #455267;
    font-size: 10px;
}

.cashflow-summary em {
    margin-left: auto;
    color: var(--green);
    font-size: 8px;
    font-weight: 750;
}

.cashflow-chart {
    position: relative;
    height: 136px;
    margin-top: 8px;
    overflow: hidden;
}

.cashflow-bars {
    position: absolute;
    inset: 0 5px 18px;
    display: flex;
    align-items: end;
    justify-content: space-around;
    gap: 8px;
    background: repeating-linear-gradient(to bottom, transparent 0 37px, #eff2f4 38px);
}

.cashflow-bars > span {
    position: relative;
    width: 11px;
    height: var(--bar-height);
    border-radius: 5px 5px 2px 2px;
    background: rgba(var(--accent-rgb), .11);
    transition: height 420ms ease;
}

.cashflow-bars > span i {
    position: absolute;
    right: -4px;
    bottom: 0;
    width: 5px;
    height: 58%;
    border-radius: 4px 4px 2px 2px;
    background: rgba(219, 116, 91, .38);
}

.cashflow-line {
    position: absolute;
    inset: 7px 5px 18px;
    width: calc(100% - 10px);
    height: calc(100% - 25px);
    overflow: visible;
    pointer-events: none;
}

.cashflow-line path:first-child {
    fill: none;
    stroke: var(--accent);
    stroke-linecap: round;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.cashflow-area {
    fill: url("#none");
    opacity: 0;
}

.cashflow-chart .chart-axis {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

.text-action {
    padding: 4px;
    color: var(--accent-dark);
    background: transparent;
    font-size: 7px;
    font-weight: 750;
}

.account-list {
    display: grid;
}

.account-row {
    display: grid;
    min-height: 48px;
    padding: 7px 3px;
    border-top: 1px solid #eef1f4;
    grid-template-columns: 31px 1fr auto;
    align-items: center;
    gap: 8px;
    background: transparent;
    text-align: left;
}

.account-row:hover,
.account-row.is-selected {
    margin: 0 -6px;
    padding-right: 9px;
    padding-left: 9px;
    border-color: transparent;
    border-radius: 9px;
    background: var(--accent-faint);
}

.account-row > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.account-row strong {
    color: #455166;
    font-size: 8px;
}

.account-row small {
    color: #9aa3b2;
    font-size: 6px;
}

.account-icon {
    display: grid;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    place-items: center;
    color: var(--blue);
    background: var(--blue-soft);
}

.account-icon--green {
    color: var(--green);
    background: var(--green-soft);
}

.account-icon--amber {
    color: var(--amber);
    background: var(--amber-soft);
}

.account-focus {
    display: flex;
    margin-top: 9px;
    padding: 9px;
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    background: #f6f9f7;
}

.account-focus > div {
    display: flex;
    flex-direction: column;
}

.account-focus strong {
    color: #536074;
    font-size: 8px;
}

.account-focus small {
    color: #98a1b0;
    font-size: 6px;
}

.poisha-lower-grid {
    grid-template-columns: .78fr 1.22fr;
}

.people-balance,
.transaction-list {
    display: grid;
}

.people-balance > div,
.transaction-list > div {
    display: flex;
    min-height: 43px;
    padding: 7px 1px;
    border-top: 1px solid #eef1f4;
    align-items: center;
    gap: 8px;
}

.people-balance p,
.transaction-list p {
    display: flex;
    min-width: 0;
    margin: 0;
    flex: 1;
    flex-direction: column;
}

.people-balance p strong,
.transaction-list p strong {
    color: #4b576c;
    font-size: 8px;
}

.people-balance p small,
.transaction-list p small {
    color: #9aa3b2;
    font-size: 6px;
}

.people-balance > div > strong,
.transaction-list > div > strong {
    font-size: 8px;
}

.positive {
    color: var(--green) !important;
}

.negative {
    color: #cb675c !important;
}

.transaction-icon {
    display: grid;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    place-items: center;
    color: #69768b;
    background: #eef1f5;
}

.transaction-icon--green {
    color: var(--green);
    background: var(--green-soft);
}

.transaction-icon--amber {
    color: var(--amber);
    background: var(--amber-soft);
}

.quarter-stats {
    display: grid;
    width: min(600px, 100%);
    margin: 4px 0 21px;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.quarter-stats span {
    display: flex;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    flex-direction: column;
    background: rgba(255,255,255,.8);
}

.quarter-stats small {
    color: #919bac;
    font-size: 7px;
}

.quarter-stats strong {
    color: #415063;
    font-size: 12px;
}

/* Property CRM */

.property-mark {
    clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%);
    border-radius: 7px;
}

.pipeline-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.property-metrics {
    display: grid;
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
}

.property-metrics article {
    display: grid;
    min-width: 0;
    min-height: 48px;
    padding: 4px 15px;
    border-right: 1px solid #edf0f4;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 8px;
}

.property-metrics article:first-child {
    padding-left: 3px;
}

.property-metrics article:last-child {
    border-right: 0;
}

.property-metrics article > div {
    display: flex;
    flex-direction: column;
}

.property-metrics small {
    color: #9099aa;
    font-size: 7px;
}

.property-metrics strong {
    color: #3e4a5f;
    font-size: 16px;
}

.property-metrics em {
    grid-column: 2;
    margin-top: -10px;
    color: #9ba3b2;
    font-size: 6px;
}

.property-metric-icon {
    display: grid;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    place-items: center;
    color: var(--accent-dark);
    background: var(--accent-soft);
}

.property-metric-icon--blue { color: var(--blue); background: var(--blue-soft); }
.property-metric-icon--green { color: var(--green); background: var(--green-soft); }
.property-metric-icon--violet { color: var(--violet); background: var(--violet-soft); }

.property-layout {
    display: grid;
    grid-template-columns: minmax(560px, 1.45fr) minmax(290px, .55fr);
    align-items: start;
    gap: 14px;
}

.view-switch {
    padding: 2px;
}

.view-switch button {
    min-height: 24px;
    padding: 4px 7px;
    font-size: 7px;
}

.kanban-board {
    display: grid;
    overflow-x: auto;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    gap: 9px;
    scrollbar-width: thin;
}

.kanban-column {
    min-width: 0;
    padding: 8px;
    border-radius: 11px;
    background: #f6f8fa;
}

.kanban-column > header {
    display: flex;
    min-height: 30px;
    padding: 2px 3px 8px;
    align-items: center;
    justify-content: space-between;
    color: #586479;
    font-size: 8px;
    font-weight: 750;
}

.kanban-column > header span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.kanban-column > header > strong {
    display: grid;
    width: 19px;
    height: 19px;
    border-radius: 6px;
    place-items: center;
    color: #7f899b;
    background: #e9edf2;
    font-size: 7px;
}

.kanban-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
}

.kanban-dot--amber { background: var(--amber); }
.kanban-dot--violet { background: var(--violet); }

.property-card {
    display: grid;
    width: 100%;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid #e7eaf0;
    border-radius: 10px;
    gap: 8px;
    color: #667287;
    background: #fff;
    box-shadow: 0 2px 5px rgba(36, 44, 65, .03);
    text-align: left;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.property-card:hover,
.property-card.is-selected {
    border-color: rgba(var(--accent-rgb), .42);
    box-shadow: 0 7px 18px rgba(var(--accent-rgb), .09);
    transform: translateY(-1px);
}

.property-card > div {
    display: grid;
    grid-template-columns: 27px 1fr auto;
    align-items: center;
    gap: 7px;
}

.property-card p {
    display: flex;
    min-width: 0;
    margin: 0;
    flex-direction: column;
}

.property-card p strong {
    overflow: hidden;
    color: #465267;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-card p small {
    overflow: hidden;
    color: #929bac;
    font-size: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-card em {
    color: #a1a9b7;
    font-size: 6px;
}

.lead-avatar {
    display: grid;
    width: 27px;
    height: 27px;
    border-radius: 9px;
    place-items: center;
    color: #3d69af;
    background: #e5efff;
    font-size: 6px;
    font-weight: 800;
}

.lead-avatar--peach { color: #aa542f; background: #ffeadf; }
.lead-avatar--sage { color: #317361; background: #e0f3ed; }
.lead-avatar--violet { color: #624ab5; background: #ece8ff; }
.lead-avatar--rose { color: #af4767; background: #ffebf1; }
.lead-avatar--amber { color: #a56a10; background: #fff2dc; }

.property-chip {
    justify-self: start;
    padding: 4px 6px;
    border-radius: 6px;
    color: #7f899a;
    background: #f3f5f8;
    font-size: 6px;
}

.property-card footer {
    display: flex;
    padding-top: 6px;
    border-top: 1px solid #eff1f4;
    align-items: center;
    justify-content: space-between;
    color: #9099aa;
    font-size: 6px;
}

.temperature {
    padding: 3px 5px;
    border-radius: 999px;
    color: #718097;
    background: #eef1f5;
    font-size: 5px;
    font-weight: 750;
}

.temperature--hot {
    color: #b5522e;
    background: #ffede6;
}

.temperature--warm {
    color: #9c6817;
    background: #fff3dd;
}

.lead-inspector {
    padding: 0;
    overflow: hidden;
}

.inspector-head {
    position: relative;
    min-height: 135px;
    padding: 57px 15px 14px;
    background:
        linear-gradient(to bottom, rgba(var(--accent-rgb), .07), transparent),
        #fbfcfd;
}

.inspector-head .row-action {
    position: absolute;
    top: 10px;
    right: 10px;
}

.inspector-head h3 {
    margin: 7px 0 1px;
    color: #3c485b;
    font-size: 13px;
}

.inspector-head p {
    margin: 0;
    color: #8f98a9;
    font-size: 7px;
}

.property-illustration {
    position: absolute;
    top: 12px;
    left: 15px;
    width: 76px;
    height: 40px;
}

.property-illustration::before {
    position: absolute;
    right: 7px;
    bottom: 0;
    left: 7px;
    height: 28px;
    border-radius: 3px;
    background: linear-gradient(145deg, #f4c3a7, #e89970);
    content: "";
    clip-path: polygon(0 36%, 50% 0, 100% 36%, 92% 36%, 92% 100%, 8% 100%, 8% 36%);
}

.property-illustration::after {
    position: absolute;
    right: 25px;
    bottom: 0;
    width: 14px;
    height: 18px;
    border-radius: 3px 3px 0 0;
    background: #fff5ee;
    content: "";
}

.valuation-band {
    display: flex;
    padding: 12px 15px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
}

.valuation-band > span:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.valuation-band small {
    color: #969fae;
    font-size: 6px;
}

.valuation-band strong {
    color: #3d4a5e;
    font-size: 10px;
}

.confidence {
    height: 5px;
    margin: 8px 0 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0f4;
}

.confidence i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #efb354);
}

.inspector-section {
    padding: 12px 15px;
    border-bottom: 1px solid var(--line);
}

.section-title h4 {
    margin: 0;
    color: #4b576a;
    font-size: 9px;
}

.section-title button,
.section-title span {
    padding: 0;
    color: var(--accent-dark);
    background: transparent;
    font-size: 7px;
    font-weight: 750;
}

.property-facts {
    display: grid;
    margin: 10px 0 0;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.property-facts div {
    display: flex;
    flex-direction: column;
}

.property-facts dt {
    color: #9aa3b2;
    font-size: 6px;
}

.property-facts dd {
    margin: 1px 0 0;
    color: #566277;
    font-size: 8px;
    font-weight: 650;
}

.activity-section {
    display: grid;
    gap: 7px;
}

.activity-section label {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.activity-section input {
    width: 12px;
    height: 12px;
    margin: 2px 0 0;
    accent-color: var(--accent);
}

.activity-section label span {
    display: flex;
    flex-direction: column;
}

.activity-section label strong {
    color: #566276;
    font-size: 7px;
}

.activity-section label small {
    color: #9ba3b2;
    font-size: 6px;
}

/* Automation Studio */

.automation-mark {
    border-radius: 11px;
}

.automation-app {
    min-height: 760px;
}

.automation-topbar {
    min-height: 65px;
}

.workflow-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.workflow-title > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.workflow-title strong {
    color: #3c475b;
    font-size: 10px;
}

.workflow-title small {
    color: #949dae;
    font-size: 7px;
}

.workflow-title small i {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
}

.workflow-title > button {
    color: #969faf;
    background: transparent;
}

.workflow-icon {
    display: grid;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    place-items: center;
    color: var(--accent-dark);
    background: var(--accent-soft);
}

.automation-run.is-running span {
    animation: spin .7s linear infinite;
}

.automation-workspace {
    position: relative;
    display: grid;
    min-height: 695px;
    grid-template-columns: 42px minmax(480px, 1fr) 295px;
    background: #f4f5fa;
}

.tool-rail {
    position: relative;
    z-index: 3;
    display: flex;
    padding: 12px 7px;
    border-right: 1px solid var(--line);
    align-items: center;
    flex-direction: column;
    gap: 5px;
    background: #fff;
}

.tool-rail button {
    display: grid;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    place-items: center;
    color: #7f899d;
    background: transparent;
    font-size: 10px;
}

.tool-rail button:hover,
.tool-rail button.is-active {
    color: var(--accent-dark);
    background: var(--accent-soft);
}

.tool-rail > span {
    width: 20px;
    height: 1px;
    margin: 3px 0;
    background: #e7eaf0;
}

.workflow-canvas {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background-color: #f5f6fb;
    background-image: radial-gradient(#cbd0de 0.8px, transparent 0.8px);
    background-size: 18px 18px;
}

.canvas-meta {
    position: absolute;
    top: 13px;
    left: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #969eae;
    font-size: 7px;
}

.canvas-meta .status i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
}

.flow-card {
    position: absolute;
    z-index: 3;
    display: grid;
    width: 190px;
    min-height: 72px;
    padding: 11px;
    border: 1px solid #dfe3ec;
    border-radius: 12px;
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 8px;
    color: #566276;
    background: #fff;
    box-shadow: 0 8px 18px rgba(39, 46, 73, .07);
    text-align: left;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.flow-card:hover {
    border-color: rgba(var(--accent-rgb), .45);
    box-shadow: 0 12px 25px rgba(39, 46, 73, .11);
    transform: translateY(-2px);
}

.flow-card > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.flow-card small {
    color: #9aa3b2;
    font-size: 6px;
    font-weight: 650;
    text-transform: uppercase;
}

.flow-card strong {
    overflow: hidden;
    margin: 2px 0;
    color: #3f4b5f;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-card em {
    color: #939cad;
    font-size: 6px;
}

.flow-type-icon {
    display: grid;
    width: 31px;
    height: 31px;
    border-radius: 9px;
    place-items: center;
    color: var(--accent-dark);
    background: var(--accent-soft);
    font-size: 11px;
    font-weight: 800;
}

.flow-type-icon--amber { color: var(--amber); background: var(--amber-soft); }
.flow-type-icon--violet { color: var(--violet); background: var(--violet-soft); }
.flow-type-icon--blue { color: var(--blue); background: var(--blue-soft); }
.flow-type-icon--green { color: var(--green); background: var(--green-soft); }
.flow-type-icon--slate { color: #738095; background: #edf1f5; }

.flow-status {
    display: grid;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    place-items: center;
    color: #788398;
    background: #f0f2f6;
    font-size: 6px;
}

.flow-card.is-running {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .11), 0 13px 27px rgba(var(--accent-rgb), .13);
}

.flow-card.is-running .flow-status {
    color: transparent;
    border: 2px solid rgba(var(--accent-rgb), .25);
    border-top-color: var(--accent);
    background: transparent;
    animation: spin .7s linear infinite;
}

.flow-card.is-done .flow-status {
    color: #fff;
    background: var(--green);
}

.flow-card--trigger {
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
}

.flow-card--trigger:hover {
    transform: translateX(-50%) translateY(-2px);
}

.flow-card--decision {
    top: 197px;
    left: 50%;
    transform: translateX(-50%);
}

.flow-card--decision:hover {
    transform: translateX(-50%) translateY(-2px);
}

.flow-card--enrich {
    top: 337px;
    left: 29%;
    transform: translateX(-50%);
}

.flow-card--enrich:hover {
    transform: translateX(-50%) translateY(-2px);
}

.flow-card--action {
    top: 487px;
    left: 29%;
    transform: translateX(-50%);
}

.flow-card--action:hover {
    transform: translateX(-50%) translateY(-2px);
}

.flow-card--fallback {
    top: 337px;
    left: 73%;
    transform: translateX(-50%);
}

.flow-card--fallback:hover {
    transform: translateX(-50%) translateY(-2px);
}

.flow-path {
    position: absolute;
    z-index: 1;
    width: 2px;
    background: #c9cfdd;
}

.flow-path::after {
    position: absolute;
    right: -3px;
    bottom: -1px;
    width: 6px;
    height: 6px;
    border-right: 2px solid #c9cfdd;
    border-bottom: 2px solid #c9cfdd;
    content: "";
    transform: rotate(45deg);
}

.flow-path--one {
    top: 134px;
    left: 50%;
    height: 63px;
}

.flow-path--two {
    top: 269px;
    left: 50%;
    width: 21%;
    height: 68px;
    border-bottom: 2px solid #c9cfdd;
    background: transparent;
}

.flow-path--two::after {
    right: auto;
    bottom: -4px;
    left: -3px;
}

.flow-path--three {
    top: 409px;
    left: 29%;
    height: 78px;
}

.flow-path--branch {
    top: 269px;
    left: 50%;
    width: 23%;
    height: 68px;
    border-right: 2px solid #c9cfdd;
    border-bottom: 2px solid #c9cfdd;
    background: transparent;
}

.add-node {
    position: absolute;
    z-index: 5;
    display: grid;
    width: 20px;
    height: 20px;
    border: 1px solid #d9deea;
    border-radius: 50%;
    place-items: center;
    color: var(--accent);
    background: #fff;
    box-shadow: 0 3px 8px rgba(39,47,70,.08);
    font-size: 10px;
}

.add-node--one { top: 155px; left: calc(50% - 9px); }
.add-node--two { top: 429px; left: calc(29% - 9px); }

.branch-label {
    position: absolute;
    z-index: 2;
    top: 285px;
    padding: 2px 5px;
    border-radius: 999px;
    color: #7c8799;
    background: #fff;
    font-size: 6px;
    box-shadow: 0 2px 5px rgba(36,44,66,.06);
}

.branch-label--yes { left: 34%; }
.branch-label--no { left: 67%; }

.canvas-controls {
    position: absolute;
    right: 13px;
    bottom: 13px;
    z-index: 5;
    display: flex;
    padding: 3px;
    border: 1px solid #dfe3ea;
    border-radius: 9px;
    align-items: center;
    background: rgba(255,255,255,.92);
    box-shadow: 0 6px 16px rgba(39,47,70,.08);
}

.canvas-controls button {
    display: grid;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    place-items: center;
    color: #7c879a;
    background: transparent;
}

.canvas-controls span {
    padding: 0 7px;
    border-left: 1px solid #e6e9ee;
    color: #7d8799;
    font-size: 7px;
}

.automation-inspector {
    position: relative;
    z-index: 4;
    min-width: 0;
    border-left: 1px solid var(--line);
    background: #fff;
}

.inspector-tabs {
    display: flex;
    margin: 11px 13px 4px;
}

.inspector-tabs button {
    flex: 1;
}

.automation-panel {
    padding: 10px 14px 14px;
}

.automation-panel-head {
    display: grid;
    padding: 9px 0 14px;
    border-bottom: 1px solid #eef0f4;
    grid-template-columns: 36px 1fr 20px;
    align-items: center;
    gap: 8px;
}

.automation-panel-head > div {
    display: flex;
    flex-direction: column;
}

.automation-panel-head small {
    color: #9aa3b2;
    font-size: 6px;
}

.automation-panel-head h3 {
    margin: 2px 0 0;
    color: #3f4b60;
    font-size: 10px;
}

.automation-panel-head > button {
    color: #9aa3b2;
    background: transparent;
}

.config-section {
    padding: 12px 0;
    border-bottom: 1px solid #eef0f4;
}

.select-field {
    display: grid;
    width: 100%;
    min-height: 47px;
    padding: 8px;
    border: 1px solid #e1e5ec;
    border-radius: 9px;
    grid-template-columns: 27px 1fr auto;
    align-items: center;
    gap: 8px;
    background: #fbfcfd;
    text-align: left;
}

.select-field > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.select-field strong {
    overflow: hidden;
    color: #4a566a;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-field small {
    color: #98a1b0;
    font-size: 6px;
}

.connection-icon {
    display: grid;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    place-items: center;
    color: #fff;
    background: #2e8a65;
    font-size: 8px;
    font-weight: 800;
}

.connection-icon--violet {
    background: var(--accent);
}

.safeguard-mini {
    display: grid;
    gap: 7px;
}

.safeguard-mini > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #647084;
    font-size: 8px;
}

.safeguard-mini > div > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.safeguard-mini > div > span i {
    display: grid;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    place-items: center;
    color: var(--accent-dark);
    background: var(--accent-soft);
    font-size: 7px;
}

.automation-message {
    padding: 10px;
    border: 1px solid #e1e5ec;
    border-radius: 9px;
    color: #566276;
    background: #fbfcfd;
    font-size: 8px;
    line-height: 1.55;
}

.config-help {
    display: block;
    margin-top: 5px;
    color: #9ba3b2;
    font-size: 6px;
}

.automation-panel .inspector-actions {
    margin: 12px -14px -14px;
}

.run-summary {
    display: flex;
    margin: 9px 0 14px;
    padding: 11px;
    border-radius: 11px;
    align-items: center;
    gap: 10px;
    background: #f7f9f8;
}

.score-ring--small {
    width: 49px;
    height: 49px;
    background: conic-gradient(var(--green) 0 98%, #e7ecef 98%);
}

.score-ring--small strong {
    margin: 0;
    font-size: 9px;
}

.run-summary > div {
    display: flex;
    flex-direction: column;
}

.run-summary > div strong {
    color: #465267;
    font-size: 9px;
}

.run-summary p {
    margin: 2px 0 0;
    color: #929bac;
    font-size: 7px;
    line-height: 1.45;
}

.run-list li {
    display: grid;
    min-height: 46px;
    padding: 8px 2px;
    border-top: 1px solid #eef0f4;
    grid-template-columns: 7px 1fr auto;
    align-items: center;
    gap: 8px;
}

.run-list span {
    display: flex;
    flex-direction: column;
}

.run-list strong {
    color: #4b576b;
    font-size: 8px;
}

.run-list small,
.run-list time {
    color: #99a2b1;
    font-size: 6px;
}

/* Motion and responsive behavior */

@keyframes soft-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .08); }
    50% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), .02); }
}

@keyframes rise-bar {
    from { transform: scaleY(.08); opacity: .35; }
    to { transform: scaleY(1); opacity: 1; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (min-width: 1240px) {
    .campaign-progress button small {
        display: block;
    }
}

@media (max-width: 1160px) {
    .mock-product {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .app-sidebar {
        padding-right: 10px;
        padding-left: 10px;
    }

    .app-content {
        padding: 19px;
    }

    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metric-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .property-layout {
        grid-template-columns: minmax(490px, 1.35fr) minmax(270px, .65fr);
    }

    .property-metrics article {
        padding-right: 8px;
        padding-left: 8px;
    }

    .automation-workspace {
        grid-template-columns: 42px minmax(420px, 1fr) 270px;
    }

    .flow-card {
        width: 170px;
    }
}

@media (max-width: 930px) {
    .preview-header,
    .preview-main {
        width: min(100% - 28px, 1500px);
    }

    .preview-intro {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .browser-chrome {
        grid-template-columns: 70px minmax(150px, 1fr);
    }

    .browser-environment {
        display: none;
    }

    .mock-product {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        display: none;
    }

    .mobile-brand {
        display: flex;
    }

    .mobile-brand .brand-mark {
        width: 29px;
        height: 29px;
        font-size: 12px;
    }

    .mobile-brand strong {
        font-size: 10px;
    }

    .app-search {
        margin-right: auto;
        margin-left: 8px;
    }

    .breadcrumb {
        margin-right: auto;
    }

    .dashboard-grid,
    .dashboard-grid--balanced,
    .poisha-grid,
    .poisha-lower-grid {
        grid-template-columns: 1fr;
    }

    .composer-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr);
    }

    .vehicle-layout {
        grid-template-columns: minmax(390px, 1.15fr) minmax(290px, .85fr);
    }

    .property-layout {
        grid-template-columns: 1fr;
    }

    .lead-inspector {
        display: grid;
        grid-template-columns: .9fr 1fr;
    }

    .inspector-head {
        min-height: 146px;
        grid-row: span 2;
    }

    .valuation-band {
        justify-content: center;
    }

    .lead-inspector .inspector-actions {
        grid-column: 1 / -1;
    }

    .automation-workspace {
        grid-template-columns: 42px minmax(420px, 1fr);
    }

    .automation-inspector {
        display: none;
    }
}

@media (max-width: 720px) {
    .preview-header {
        padding-top: 18px;
    }

    .preview-main {
        padding-bottom: 24px;
    }

    .preview-intro {
        padding: 18px 2px 21px;
    }

    .browser-window {
        border-radius: 17px;
    }

    .browser-chrome {
        min-height: 50px;
        padding: 8px 11px;
        grid-template-columns: 53px minmax(0, 1fr);
        gap: 9px;
    }

    .browser-dots {
        gap: 5px;
    }

    .browser-dots span {
        width: 9px;
        height: 9px;
    }

    .browser-address {
        height: 32px;
        padding: 0 9px;
        font-size: 10px;
    }

    .mock-product {
        min-height: 680px;
    }

    .app-topbar {
        min-height: 59px;
        padding: 9px 13px;
    }

    .app-topbar .app-search,
    .app-topbar .breadcrumb,
    .app-topbar .saved-state {
        display: none;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .topbar-actions .button--soft {
        display: none;
    }

    .app-content {
        padding: 15px;
    }

    .app-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .metric-grid,
    .metric-grid--three {
        grid-template-columns: 1fr 1fr;
    }

    .metric-card {
        min-height: 99px;
    }

    .metric-card--dark {
        grid-column: 1 / -1;
    }

    .table-row {
        grid-template-columns: minmax(150px, 1.3fr) .65fr 28px;
    }

    .table-row > :nth-child(3),
    .table-row > :nth-child(4) {
        display: none;
    }

    .table-head {
        grid-template-columns: minmax(150px, 1.3fr) .65fr 28px;
    }

    .server-gauges {
        grid-template-columns: 1fr;
    }

    .campaign-progress {
        overflow-x: auto;
        justify-content: flex-start;
        gap: 5px;
        scrollbar-width: none;
    }

    .campaign-progress > span {
        min-width: 15px;
        flex: 0 0 15px;
    }

    .campaign-progress button {
        flex: 0 0 auto;
    }

    .campaign-progress button > span {
        display: none;
    }

    .composer-grid {
        grid-template-columns: 1fr;
    }

    .phone-preview {
        padding: 4px 0 12px;
    }

    .phone-shell {
        max-width: 320px;
    }

    .chat-canvas {
        min-height: 260px;
    }

    .vehicle-layout {
        grid-template-columns: 1fr;
    }

    .vehicle-row {
        grid-template-columns: 51px minmax(130px, 1fr) auto 15px;
    }

    .vehicle-row .row-progress {
        display: none;
    }

    .poisha-balance {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .balance-segments {
        max-width: 450px;
    }

    .property-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .property-metrics article:nth-child(2) {
        border-right: 0;
    }

    .property-metrics article:nth-child(-n + 2) {
        border-bottom: 1px solid #edf0f4;
    }

    .kanban-board {
        grid-template-columns: repeat(3, 210px);
    }

    .lead-inspector {
        display: block;
    }

    .automation-workspace {
        min-height: 650px;
        grid-template-columns: 36px minmax(560px, 1fr);
        overflow-x: auto;
    }

    .tool-rail {
        position: sticky;
        left: 0;
    }
}

@media (max-width: 520px) {
    .preview-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .preview-status {
        justify-content: flex-start;
    }

    .preview-intro h1 {
        font-size: 38px;
    }

    .app-content {
        padding: 12px;
    }

    .app-heading h2 {
        font-size: 19px;
    }

    .metric-grid,
    .metric-grid--three {
        grid-template-columns: 1fr;
    }

    .metric-card--dark {
        grid-column: auto;
    }

    .surface {
        padding: 13px;
    }

    .surface-heading--wrap {
        align-items: flex-start;
        flex-direction: column;
    }

    .surface-controls {
        width: 100%;
        justify-content: space-between;
    }

    .template-grid {
        grid-template-columns: 1fr;
    }

    .template-card {
        min-height: 58px;
    }

    .composer-footer {
        align-items: stretch;
        flex-direction: column-reverse;
        gap: 7px;
    }

    .composer-footer > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vehicle-row {
        grid-template-columns: 46px minmax(105px, 1fr) auto;
    }

    .vehicle-row .chevron {
        display: none;
    }

    .vehicle-facts {
        grid-template-columns: 1fr 1fr;
    }

    .vehicle-facts span:last-child {
        grid-column: 1 / -1;
    }

    .balance-segments {
        grid-template-columns: 1fr 1fr;
    }

    .stacked-balance {
        grid-column: 1 / -1;
    }

    .balance-segments > div:nth-child(3) {
        grid-column: 1 / -1;
    }

    .cashflow-summary {
        flex-wrap: wrap;
    }

    .cashflow-summary em {
        width: 100%;
        margin-left: 0;
    }

    .quarter-stats {
        grid-template-columns: 1fr;
    }

    .property-metrics {
        grid-template-columns: 1fr;
    }

    .property-metrics article {
        border-right: 0;
        border-bottom: 1px solid #edf0f4;
    }

    .property-metrics article:last-child {
        border-bottom: 0;
    }

    .pipeline-actions {
        width: 100%;
        justify-content: space-between;
    }

    .property-facts {
        grid-template-columns: 1fr;
    }

    .browser-window {
        margin-right: -5px;
        margin-left: -5px;
    }

    .preview-note {
        padding-right: 3px;
        padding-left: 3px;
        text-align: left;
    }
}

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

@media (forced-colors: active) {
    .brand-mark,
    .metric-icon,
    .status,
    .preview-pill,
    .flow-type-icon {
        border: 1px solid currentColor;
    }
}