:root {
    /* Shared type scale: regular content, medium controls, restrained emphasis. */
    --font-weight-regular: 400;
    --font-weight-control: 500;
    --font-weight-heading: 600;
    --font-weight-number: 600;
    --font-weight-title: 700;
    --font-weight-critical: 600;
    --bg: #dfe6ee;
    --surface: #ffffff;
    --surface-2: #f4f6f9;
    --text: #171c26;
    --muted: #667085;
    --border: #e4e8ef;
    --primary: #176b91;
    --primary-2: #0f526e;
    --success: #16784e;
    --warning: #996515;
    --danger: #b73939;
    --info: #326db5;
    --shadow: 0 10px 24px rgba(31, 42, 68, 0.08);
    --soft-shadow: 0 3px 12px rgba(31, 42, 68, 0.08);
}

.task-employee-shortcuts {
    min-width: 0;
    margin-top: 6px;
    font-size: 12px;
}

.task-employee-shortcut-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 5px 2px;
}

.task-employee-shortcut {
    flex: 0 0 156px;
    min-height: 48px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

.task-employee-shortcut span,
.task-employee-shortcut small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-employee-shortcut small {
    color: var(--muted);
    font-size: 11px;
}

.task-employee-shortcut:hover,
.task-employee-shortcut[aria-pressed="true"] {
    border-color: var(--primary);
    background: var(--surface-2);
}

.task-employee-shortcut:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.task-employee-shortcuts[hidden],
.task-employee-shortcut[hidden] {
    display: none;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* Authenticated CRM typography. Content-authored emphasis keeps its meaning;
   ordinary UI labels and table text do not inherit browser-default bold. */
body[data-app-base] {
    font-weight: var(--font-weight-regular);
}
:where(body[data-app-base]) :is(h2, h3, h4, h5, h6) {
    font-weight: var(--font-weight-heading);
}
:where(body[data-app-base]) h1 {
    font-weight: var(--font-weight-title);
}
:where(body[data-app-base]) :is(strong, b) {
    font-weight: var(--font-weight-heading);
}
:where(body[data-app-base]) :is(input, select, textarea, td, .muted) {
    font-weight: var(--font-weight-regular);
}
:where(body[data-app-base]) :is(td > strong, td > b, td > a > strong, label strong, label b) {
    font-weight: var(--font-weight-regular);
}
:where(body[data-app-base]) :is(button, .button, summary) {
    font-weight: var(--font-weight-control);
}

.sidebar {
    position: relative;
    flex: 0 0 236px;
    width: 236px;
    min-height: 100vh;
    background: #172434;
    color: #e8f0fb;
    border-right: 0;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 20;
    transition: margin-left 180ms ease, transform 180ms ease;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0f2d74;
    border-radius: 8px;
    font-size: 12px;
    font-weight: var(--font-weight-control);
    color: #fff;
}

.brand-logo {
    display: block;
    width: min(100%, 188px);
    height: auto;
    object-fit: contain;
}

.brand strong,
.user-chip strong {
    display: block;
    font-size: 14px;
}

.brand small,
.user-chip small {
    color: var(--muted);
    display: block;
    font-size: 12px;
}

.nav {
    display: grid;
    gap: 3px;
}

.nav a,
.logout-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #e1e8f2;
    font-size: 13px;
    font-weight: var(--font-weight-regular);
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.nav a.active,
.nav a:hover,
.logout-link:hover {
    background: #233952;
    border-color: #304861;
    color: #fff;
}

.nav a.active {
    box-shadow: inset 2px 0 0 #3090ff;
}

.nav a > svg {
    flex: 0 0 18px;
}

.nav a:focus-visible,
.logout-link:focus-visible {
    outline: 2px solid #80b6ff;
    outline-offset: 2px;
}

.logout-link {
    color: rgba(232, 240, 251, 0.72);
}

.nav svg,
.logout-link svg,
.topbar svg,
.button svg,
.icon-button svg {
    width: 18px;
    height: 18px;
}

.sidebar-footer {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}

.sidebar-play-store {
    min-height: 62px;
    padding: 12px;
    border: 1px solid #304155;
    border-radius: 8px;
    background: #203145;
    color: #fff;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    box-shadow: none;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.sidebar-play-store:hover,
.sidebar-play-store:focus-visible {
    border-color: #3b536c;
    background: #233952;
    transform: translateY(-1px);
    box-shadow: none;
    outline: 0;
}

.sidebar-play-store-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-play-store svg {
    width: 18px;
    height: 18px;
}

.sidebar-play-store > span:nth-child(2) {
    min-width: 0;
}

.sidebar-play-store strong,
.sidebar-play-store small {
    display: block;
}

.sidebar-play-store strong {
    font-size: 14px;
    line-height: 1.2;
}

.sidebar-play-store small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

.sidebar-play-store > svg:last-child {
    opacity: 0.72;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #fff;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.user-chip:hover,
.user-chip:focus-visible,
.user-chip.active {
    background: #203145;
    border-color: #304861;
    transform: translateY(-1px);
    outline: 0;
}

.user-chip small {
    color: rgba(232, 240, 251, 0.72);
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5f4ef;
    color: #12614e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-control);
}

.main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100vh;
    padding: 0 28px 28px;
    background: var(--surface);
    transition: margin-left 180ms ease;
}

body.sidebar-collapsed .sidebar {
    margin-left: -236px;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    margin: 0 -28px 22px;
    padding: 0 28px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.topbar h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
}

.topbar p {
    margin: 4px 0 0;
    color: var(--muted);
}

.topbar-title {
    min-width: 0;
}

.topbar-billing-badge {
    margin-left: auto;
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid #b9d8e6;
    border-radius: 999px;
    background: #eef8fb;
    color: #0f526e;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: var(--soft-shadow);
}

.topbar-billing-badge span {
    font-size: 11px;
    font-weight: var(--font-weight-control);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
}

.topbar-billing-badge strong {
    font-size: 14px;
    line-height: 1;
    font-weight: var(--font-weight-number);
}

.topbar-billing-badge.active {
    border-color: #9fd4b2;
    background: #eefaf3;
    color: var(--success);
}

.topbar-billing-badge.warning {
    border-color: #f3d08e;
    background: #fff8e6;
    color: var(--warning);
}

.topbar-billing-badge.danger {
    border-color: #efc0c0;
    background: #fff1f1;
    color: var(--danger);
}

.menu-toggle {
    display: inline-flex;
}

.grid {
    display: grid;
    gap: 16px;
}

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

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

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

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

.metric {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px;
    box-shadow: var(--soft-shadow);
}

.metric-link {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.metric-link:hover,
.metric-link:focus-visible,
.metric-link.active {
    border-color: var(--primary);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.metric-link.active {
    background: #eef6ff;
}

.metric span,
.metric small {
    color: var(--muted);
    font-size: 13px;
}

.metric strong {
    display: block;
    font-size: 28px;
    margin-top: 16px;
    letter-spacing: 0;
}

/* Keep duplicate-resolution counts compact without changing dashboard KPIs. */
.duplicate-metric-row {
    gap: 12px;
    margin-bottom: 0;
}

.duplicate-metric-row .metric {
    min-height: 112px;
    padding: 14px 18px;
}

.duplicate-metric-row .metric strong {
    font-size: 26px;
    margin-top: 10px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--soft-shadow);
}

.panel-header {
    min-height: 58px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.panel-header h2 {
    margin: 0;
    font-size: 16px;
}

.panel-body {
    padding: 16px;
}

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

.actions form {
    margin: 0;
}

.inline-confirm {
    min-width: 230px;
    padding: 10px;
    border: 1px solid #f0c1c1;
    border-radius: 8px;
    background: #fff7f7;
    display: grid;
    gap: 8px;
}

.inline-confirm strong {
    color: var(--danger);
}

.inline-confirm .muted {
    font-size: 12px;
    line-height: 1.4;
}

.button,
button.button {
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.button.dark {
    background: #121722;
    border-color: #121722;
    color: #fff;
}

.button.small {
    min-height: 32px;
    padding: 0 10px;
    font-size: 13px;
}

.button.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.button.primary:hover {
    background: var(--primary-2);
}

.button:disabled,
button.button:disabled {
    opacity: 0.62;
    cursor: wait;
}

.button.danger {
    border-color: #f0c1c1;
    color: var(--danger);
}

.button.success {
    border-color: #bde8d4;
    color: var(--success);
}

.icon-button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
}

th,
td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

th {
    color: var(--muted);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f8fafc;
}

.table-sort-link {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.table-sort-link:hover {
    color: var(--primary);
}

[data-team-page][aria-busy="true"] {
    pointer-events: none;
}

[data-team-page][aria-busy="true"] .table-wrap {
    opacity: 0.58;
}

[data-page-content].is-loading {
    pointer-events: none;
}

[data-page-content].is-loading > * {
    opacity: 0.62;
}

tr:last-child td {
    border-bottom: 0;
}

.pagination-bar {
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
}

.muted {
    color: var(--muted);
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: var(--font-weight-control);
    background: var(--surface-2);
    color: var(--muted);
    white-space: nowrap;
}

.badge.success {
    background: #e7f5ee;
    color: var(--success);
}

.badge.warning {
    background: #fff2d8;
    color: var(--warning);
}

.badge.danger {
    background: #fde8e8;
    color: var(--danger);
}

.badge.info {
    background: #e8f1fb;
    color: var(--info);
}

a.badge {
    text-decoration: none;
    cursor: pointer;
}

.task-table-row {
    transition: background 160ms ease, box-shadow 160ms ease;
}

.task-table-row:hover {
    background: #fbfdff;
}

.task-deadline-cell {
    min-width: 150px;
    display: grid;
    gap: 4px;
}

.task-deadline-cell strong {
    font-size: 13px;
}

.task-deadline-track {
    display: block;
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.task-deadline-track i {
    display: block;
    height: 100%;
    min-width: 7px;
    border-radius: inherit;
    background: var(--info);
    transition: width 220ms ease, background 220ms ease;
}

.task-deadline-none .task-deadline-track i,
.task-deadline-scheduled .task-deadline-track i {
    background: #98a2b3;
}

.task-deadline-upcoming .task-deadline-track i,
.task-deadline-today .task-deadline-track i {
    background: var(--info);
}

.task-deadline-due_soon .task-deadline-track i {
    background: var(--danger);
}

.task-table-row.task-display-completed {
    background: color-mix(in srgb, var(--success) 9%, transparent);
}
.task-table-row.task-display-review {
    background: color-mix(in srgb, var(--info) 10%, transparent);
}
.task-table-row.task-display-pending {
    background: color-mix(in srgb, var(--danger) 13%, transparent);
}
.task-unread { animation: task-unread-pulse 2.4s ease-in-out infinite; }
@keyframes task-unread-pulse { 50% { opacity: 0.65; } }
@media (prefers-reduced-motion: reduce) { .task-unread { animation: none; }}
.task-update-notices {
    position: fixed;
    right: 16px;
    bottom: 24px;
    z-index: 1000;
    width: min(340px, calc(100vw - 32px));
    max-height: 40vh;
    overflow-y: auto;
    display: grid;
    gap: 8px;
}
.task-update-notices a {
    padding: 12px 16px;
    border: 1px solid var(--info);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--text, #152536);
    box-shadow: 0 4px 16px #0002;
    overflow-wrap: anywhere;
}

.task-deadline-critical .task-deadline-track i,
.task-deadline-overdue .task-deadline-track i {
    background: var(--danger);
}

.task-deadline-completed .task-deadline-track i {
    background: var(--success);
}

.task-detail-deadline {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.duplicate-decision-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.duplicate-resolution {
    position: relative;
}

.duplicate-resolution > summary {
    list-style: none;
}

.duplicate-resolution > summary::-webkit-details-marker {
    display: none;
}

.duplicate-resolution[open] > summary {
    border-color: var(--primary);
    color: var(--primary);
}

.duplicate-resolution-form {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    width: min(560px, calc(100vw - 48px));
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
    display: grid;
    gap: 10px;
}

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

.duplicate-action-option {
    min-height: 70px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 4px;
    align-content: start;
}

.duplicate-action-option:has(input:checked) {
    border-color: var(--primary);
    background: #eef6ff;
}

.duplicate-action-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.duplicate-action-option strong {
    font-size: 13px;
    line-height: 1.2;
}

.duplicate-action-option small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
}

.duplicate-resolution-fields {
    display: grid;
    grid-template-columns: minmax(170px, 220px) 1fr;
    gap: 10px;
}

.duplicate-resolution-fields label {
    display: grid;
    gap: 5px;
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    color: var(--muted);
}

.duplicate-resolution-fields select,
.duplicate-resolution-fields textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 9px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: #fff;
}

.duplicate-resolution-fields textarea {
    resize: vertical;
    min-height: 58px;
}

.duplicate-resolution-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

@media (max-width: 820px) {
    .duplicate-resolution-form {
        position: fixed;
        inset: auto 12px 12px 12px;
        width: auto;
        max-height: calc(100vh - 24px);
        overflow: auto;
    }

    .duplicate-action-grid,
    .duplicate-resolution-fields {
        grid-template-columns: 1fr;
    }

    .duplicate-resolution-footer {
        align-items: stretch;
        flex-direction: column;
    }}

.member-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 210px;
}

.member-title strong {
    min-width: 0;
}

.readiness-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 360px;
}

.company-capacity-mini {
    display: grid;
    grid-template-columns: repeat(3, minmax(58px, 1fr));
    gap: 6px;
    min-width: 210px;
}

.company-capacity-mini span {
    min-height: 48px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.company-capacity-mini b,
.company-capacity-mini small {
    display: block;
}

.company-capacity-mini b {
    color: var(--text);
    font-size: 14px;
}

.company-capacity-mini small {
    color: var(--muted);
    font-size: 11px;
}

.signal-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
}

.status-signal {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    display: inline-block;
    background: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1);
}

.status-signal.active {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}

.status-signal.online {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}

.status-signal.available {
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.status-signal.idle {
    background: #d97706;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16);
}

.status-signal.inactive {
    background: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}

.status-signal.offline {
    background: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}

.source-split {
    color: var(--muted);
    white-space: nowrap;
}

.source-split strong {
    color: var(--text);
}

.agent-drilldown-link {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: var(--font-weight-regular);
}

.action-stack {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.drilldown-kpis {
    display: grid;
    grid-template-columns: repeat(8, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.drilldown-kpis div {
    min-height: 76px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
    padding: 12px;
}

.drilldown-kpis span {
    color: var(--muted);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

.drilldown-kpis strong {
    display: block;
    margin-top: 8px;
    font-size: 20px;
}

.detail-talk-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.detail-talk-filter span {
    color: var(--muted);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

.call-day-group {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}

.call-day-group + .call-day-group {
    margin-top: 12px;
}

.call-day-group summary {
    min-height: 48px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    cursor: pointer;
    background: #f3f6fa;
    color: var(--muted);
    font-weight: var(--font-weight-control);
}

.call-day-group summary strong {
    color: var(--text);
    margin-right: auto;
}

.day-call-table table {
    min-width: 1080px;
}

.executive-report-hero .panel-header {
    align-items: flex-start;
}

.executive-report-filters {
    grid-template-columns: minmax(180px, 260px) minmax(220px, 1fr) minmax(180px, 270px);
}

.executive-range-tabs {
    gap: 8px;
    flex-wrap: wrap;
}

.executive-kpis {
    grid-template-columns: repeat(6, minmax(130px, 1fr));
}

.executive-trend-panel .panel-body {
    padding-top: 14px;
}

.executive-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.executive-day-card {
    min-height: 150px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 14px;
    display: grid;
    gap: 12px;
}

.executive-day-card > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.executive-day-card strong {
    color: var(--text);
    font-size: 16px;
}

.executive-day-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

.executive-day-bars {
    display: grid;
    gap: 8px;
}

.executive-day-bars span {
    height: 9px;
    border-radius: 999px;
    background: #e8eef5;
    overflow: hidden;
}

.executive-day-bars i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.executive-day-bars span + span i {
    background: #2f9e75;
}

.executive-day-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
}

@media (max-width: 900px) {
    .executive-report-filters,
    .executive-kpis {
        grid-template-columns: 1fr;
    }}

.live-report-strip {
    min-height: 38px;
    margin-top: 14px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: var(--font-weight-control);
}

.realtime-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.realtime-kpi {
    min-height: 118px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.realtime-kpi span,
.realtime-kpi small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.realtime-kpi strong {
    color: var(--text);
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0;
}

.report-live-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.report-live-filters .button {
    white-space: nowrap;
}

.report-live-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.report-fullscreen-button {
    width: 32px;
    height: 32px;
    color: var(--primary);
    border-color: #c8dfeb;
    background: #eef7fb;
}

.report-fullscreen-button:hover,
.report-fullscreen-button:focus-visible {
    border-color: var(--primary);
    background: #e1f0f7;
}

body:has([data-report-fullscreen-source]) .sidebar,
body:has([data-report-fullscreen-source]) .topbar {
    display: none;
}

body:has([data-report-fullscreen-source]) .main {
    padding: 18px;
}

.filter-count {
    min-width: 22px;
    min-height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef3f8;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--font-weight-number);
}

.button.primary .filter-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.realtime-agent-table {
    border: 1px solid var(--border);
    border-radius: 8px;
}

.realtime-agent-table table {
    min-width: 980px;
}

.realtime-agent-table th {
    background: #f3f6fa;
}

.agent-summary-cell {
    min-width: 230px;
}

.agent-meta-line,
.agent-under-line {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.agent-under-line {
    margin-top: 2px;
}

.agent-search-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.agent-search-box input {
    min-width: 0;
}

.agent-search-box .button {
    white-space: nowrap;
}

.agent-token-search {
    align-items: start;
}

.agent-token-input {
    min-height: 40px;
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.agent-token-input:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 107, 145, 0.12);
}

.agent-selected-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.agent-token {
    max-width: 100%;
    min-height: 28px;
    padding: 0 6px 0 8px;
    border: 1px solid #cfe2f3;
    border-radius: 999px;
    background: #eef6ff;
    color: var(--primary-2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: var(--font-weight-control);
}

.agent-token > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-token.is-muted {
    border-color: var(--border);
    background: #f3f6fa;
    color: var(--muted);
}

.agent-token-remove {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.agent-token-remove:hover {
    background: rgba(15, 82, 110, 0.12);
}

.agent-token-remove svg {
    width: 14px;
    height: 14px;
}

.agent-token-input input,
.report-filters .agent-token-input input {
    flex: 1 1 150px;
    min-width: 130px;
    min-height: 30px;
    height: 30px;
    border: 0;
    padding: 0;
    background: transparent;
    outline: 0;
}

.agent-suggestions {
    max-height: 260px;
    margin-top: 6px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
    overflow-y: auto;
    display: grid;
    gap: 2px;
}

.agent-suggestions[hidden] {
    display: none;
}

.agent-suggestion {
    min-height: 42px;
    width: 100%;
    border: 0;
    border-radius: 6px;
    padding: 7px 8px;
    background: transparent;
    color: var(--text);
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 2px;
    text-align: left;
    cursor: pointer;
}

.agent-suggestion:hover,
.agent-suggestion.is-active {
    background: #eef6ff;
}

.agent-suggestion.is-selected {
    background: #f5fbf8;
}

.agent-suggestion-check {
    width: 18px;
    height: 18px;
    border: 1px solid #bfd0df;
    border-radius: 5px;
    background: #fff;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.agent-suggestion.is-selected .agent-suggestion-check {
    border-color: var(--success);
    background: var(--success);
}

.agent-suggestion-check svg {
    width: 13px;
    height: 13px;
}

.agent-suggestion-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.agent-suggestion strong,
.agent-suggestion small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-suggestion strong {
    font-size: 13px;
    line-height: 1.2;
}

.agent-suggestion small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
}

@media (max-width: 640px) {
    .agent-search-box {
        grid-template-columns: 1fr;
    }

    .agent-search-box .button {
        width: 100%;
    }}

.agent-search-status {
    min-height: 18px;
    color: var(--muted);
    font-size: 12px;
}

.report-compact-cell {
    min-width: 156px;
}

.report-action-cell {
    min-width: 132px;
}

.report-metric-stack {
    display: grid;
    gap: 8px;
}

.report-inline-metric {
    display: grid;
    gap: 2px;
}

.report-inline-metric strong {
    color: var(--text);
    font-size: 15px;
    line-height: 1.2;
    font-weight: var(--font-weight-number);
}

.report-inline-metric small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
}

.color-significance .panel-body {
    padding-top: 14px;
}

.color-legend-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(210px, 1fr));
    gap: 10px 16px;
}

.color-legend-grid span {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.legend-chip {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 auto;
}

.legend-chip.info {
    background: var(--info);
    box-shadow: 0 0 0 3px rgba(50, 109, 181, 0.12);
}

.legend-chip.neutral {
    background: #64748b;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.12);
}

.legend-chip.danger {
    background: var(--danger);
    box-shadow: 0 0 0 3px rgba(183, 57, 57, 0.12);
}

.legend-chip.success {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(22, 120, 78, 0.12);
}

.role-tag {
    margin-left: auto;
    font-size: 11px;
    min-height: 22px;
    padding: 0 7px;
}

.filters,
.form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.report-filters {
    grid-template-columns: minmax(190px, 230px) minmax(340px, 1fr) minmax(220px, 270px) minmax(128px, 150px);
    align-items: start;
}

.report-filters .field {
    align-self: start;
    align-content: start;
}

.report-filters input,
.report-filters select {
    min-height: 40px;
    height: 40px;
}

.report-date-field input[type="date"] {
    max-width: 230px;
}

.report-agent-field select {
    margin-top: 0;
}

.report-agent-field .agent-search-box .button {
    min-height: 40px;
}

.report-quick-field .actions {
    min-height: 40px;
    align-items: center;
    flex-wrap: nowrap;
}

.report-apply-field .button {
    width: 100%;
    min-height: 40px;
}

.calls-agent-field {
    grid-column: span 2;
    position: relative;
    z-index: 4;
    align-self: start;
}

.calls-agent-field:focus-within {
    z-index: 20;
}

.calls-agent-field .agent-search-box .button {
    min-height: 40px;
}

.calls-agent-field .agent-suggestions {
    position: absolute;
    top: var(--agent-suggestions-top, 64px);
    left: 0;
    right: 0;
    z-index: 30;
    margin-top: 0;
}

.calls-agent-field:has(.agent-suggestions:not([hidden])) .agent-search-status {
    visibility: hidden;
}

[data-calls-results-root] {
    position: relative;
}

[data-calls-results-root].is-loading {
    opacity: 0.72;
    pointer-events: none;
}

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

.field {
    display: grid;
    gap: 6px;
}

.password-field {
    position: relative;
}

.password-field input {
    position: relative;
    z-index: 1;
    padding-right: 84px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 3;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: var(--font-weight-control);
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.password-toggle:hover {
    background: #f8fafc;
}

.field.full {
    grid-column: 1 / -1;
}

.danger-text {
    color: var(--danger) !important;
    font-weight: var(--font-weight-critical);
}

.billing-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -2px 0 16px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.billing-tabs a {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-weight: var(--font-weight-control);
}

.billing-tabs a:hover,
.billing-tabs a:focus-visible {
    border-color: var(--primary);
    color: var(--text);
}

.billing-company-hero {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 2fr);
    gap: 14px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--soft-shadow);
}

.billing-company-summary h2 {
    margin: 10px 0 4px;
    font-size: 20px;
}

.billing-company-summary p {
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.billing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.billing-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.billing-mini-grid div,
.billing-command-card,
.billing-calculator-card,
.billing-ticket-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.billing-mini-grid div {
    min-height: 94px;
    padding: 12px;
}

.billing-mini-grid span,
.billing-mini-grid small,
.billing-command-card span,
.billing-command-card small,
.billing-calculator-card span,
.billing-calculator-card small,
.billing-ticket-card small {
    color: var(--muted);
    font-size: 12px;
}

.billing-mini-grid strong,
.billing-command-card strong,
.billing-ticket-amount strong {
    display: block;
    margin-top: 8px;
    font-size: 18px;
}

.billing-smart-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.billing-smart-strip span,
.billing-smart-strip small {
    color: var(--muted);
    font-size: 12px;
}

.billing-smart-strip strong {
    display: block;
    margin-top: 3px;
    font-size: 16px;
}

.billing-smart-strip.success {
    border-color: rgba(22, 120, 78, 0.28);
    background: #eefaf3;
}

.billing-smart-strip.warning {
    border-color: rgba(153, 101, 21, 0.3);
    background: #fff8e8;
}

.billing-smart-strip.danger {
    border-color: rgba(183, 57, 57, 0.28);
    background: #fff1f1;
}

.billing-command-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) minmax(180px, 0.8fr) minmax(220px, 0.9fr);
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}

.billing-command-card {
    min-height: 68px;
    padding: 11px 12px;
}

.billing-access-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.billing-access-actions .button {
    width: fit-content;
}

.billing-details {
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fbfcfe;
}

.billing-details summary {
    min-height: 46px;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: var(--font-weight-control);
}

.billing-details summary small {
    margin-left: 8px;
    color: var(--muted);
    font-weight: var(--font-weight-regular);
}

.billing-details .form-grid {
    padding: 0 14px 14px;
}

.billing-profile-view {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 0 14px 14px;
}

.billing-profile-view div {
    min-height: 64px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.billing-profile-view .full {
    grid-column: span 3;
}

.billing-profile-view span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.billing-profile-view strong {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.billing-profile-view .button {
    align-self: end;
    justify-content: center;
}

.billing-pay-box {
    max-width: 520px;
}

.billing-payment-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 14px;
    align-items: start;
}

.billing-calculator-card {
    position: sticky;
    top: 76px;
    display: grid;
    gap: 10px;
    padding: 14px;
}

.billing-calculator-card > strong {
    display: block;
    font-size: 26px;
    letter-spacing: 0;
}

.billing-calculator-card div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 30px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

.billing-calculator-card p {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff1f1;
    color: var(--danger);
    font-size: 12px;
    font-weight: var(--font-weight-critical);
}

.billing-calculator-card p.warning {
    background: #fff8e8;
    color: var(--warning);
}

.billing-seat-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.billing-seat-presets button {
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: var(--font-weight-control);
    cursor: pointer;
}

.billing-seat-presets button:hover,
.billing-seat-presets button:focus-visible {
    border-color: var(--primary);
    color: var(--text);
}

.billing-primary-actions .button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.billing-ticket-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.billing-ticket-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(150px, 0.8fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
}

.billing-ticket-card strong {
    overflow-wrap: anywhere;
}

.billing-ticket-amount strong {
    margin-top: 0;
}

.billing-ticket-paid-form {
    margin: 0;
}

.billing-status-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: #fbfcfe;
}

.billing-status-summary div {
    min-height: 74px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.billing-status-summary span,
.billing-status-summary small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.billing-status-summary strong {
    display: block;
    margin: 5px 0 2px;
    font-size: 20px;
}

.billing-user-status-cell {
    min-width: 300px;
}

.billing-capacity-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.billing-capacity-line strong {
    font-size: 13px;
}

.billing-capacity-line span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

.billing-capacity-bar {
    height: 8px;
    margin: 8px 0;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.billing-capacity-bar span {
    display: block;
    width: var(--billing-usage, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #16a34a);
}

.billing-capacity-bar.over span {
    background: linear-gradient(90deg, #d97706, #dc2626);
}

.billing-capacity-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 6px;
}

.billing-capacity-stats span {
    min-height: 46px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.billing-capacity-stats b,
.billing-capacity-stats small {
    display: block;
}

.billing-capacity-stats b {
    color: var(--text);
    font-size: 14px;
}

.billing-capacity-stats small {
    color: var(--muted);
    font-size: 11px;
}

.billing-capacity-warning {
    display: block;
    margin-bottom: 4px;
    color: var(--danger);
    font-size: 12px;
    font-weight: var(--font-weight-critical);
}

@media (max-width: 1100px) {
    .billing-company-hero,
    .billing-payment-layout,
    .billing-command-grid {
        grid-template-columns: 1fr;
    }

    .billing-mini-grid,
    .billing-ticket-grid,
    .billing-status-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .billing-calculator-card {
        position: static;
    }

    .billing-ticket-card {
        grid-template-columns: 1fr;
    }}

@media (max-width: 760px) {
    .company-capacity-mini {
        min-width: 0;
    }

    .billing-tabs,
    .billing-smart-strip,
    .billing-ticket-card .actions {
        align-items: stretch;
        flex-direction: column;
    }

    .billing-mini-grid,
    .billing-ticket-grid,
    .billing-status-summary {
        grid-template-columns: 1fr;
    }

    .billing-calculator-card > strong {
        font-size: 22px;
    }

    .billing-details summary small {
        display: block;
        margin: 2px 0 0;
    }

    .billing-profile-view,
    .billing-profile-view .full {
        grid-template-columns: 1fr;
        grid-column: auto;
    }}
.form-section-title {
    margin: 18px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
    font-weight: var(--font-weight-heading);
}

.form-note {
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--muted);
    font-size: 13px;
}

.modal-open {
    overflow: hidden;
}

.team-chart-modal[hidden] {
    display: none;
}

.team-chart-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 28px;
}

.team-chart-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    background: rgba(15, 23, 42, 0.44);
}

.team-chart-dialog {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100vw - 56px));
    max-height: calc(100vh - 56px);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.team-chart-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.team-chart-header h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.icon-button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.team-chart-body {
    padding: 18px;
    overflow: auto;
    display: grid;
    gap: 18px;
}

.org-company {
    min-width: 860px;
    display: grid;
    gap: 14px;
}

.org-company-node,
.org-person {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.org-company-node {
    padding: 14px;
    background: #f8fafc;
}

.org-company-node strong,
.org-person strong {
    display: block;
    color: var(--text);
}

.org-company-node span,
.org-person small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.org-node-icon,
.org-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-control);
    font-size: 12px;
    flex: 0 0 auto;
}

.org-manager-list {
    display: grid;
    gap: 14px;
}

.org-manager-branch {
    padding-left: 22px;
    border-left: 2px solid #dbe7f3;
    display: grid;
    gap: 12px;
}

.org-person {
    padding: 10px 12px;
}

.org-person-link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.org-person-link:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

.org-person-link:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.3);
    outline-offset: 2px;
}

.org-person.manager {
    max-width: 340px;
    background: #eef6fb;
}

.org-manager-branch.company-admins {
    border-left-color: #cde8dd;
}

.org-person.company-admin {
    max-width: 360px;
    background: #eefaf5;
}

.org-person.company-admin .org-avatar {
    background: #16784e;
}

.org-person.team-leader {
    max-width: 330px;
    background: #f4f8ff;
}

.org-person.executive {
    min-width: 230px;
}

.org-person.team-leader .org-avatar {
    background: #2563eb;
}

.org-person.executive .org-avatar {
    background: #0f766e;
}

.org-team-leader-list {
    margin-left: 34px;
    display: grid;
    gap: 12px;
}

.org-team-leader-branch {
    padding-left: 20px;
    border-left: 2px solid #e5edf7;
    display: grid;
    gap: 10px;
}

.org-executive-list {
    margin-left: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.org-executive-list.standalone {
    margin-left: 24px;
}

.org-manager-branch.unassigned {
    border-left-color: #f0c36a;
}

.org-person.muted-node {
    background: #fff8e8;
}

.org-person.muted-node .org-avatar {
    background: #ca8a04;
}

.org-empty {
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--muted);
    background: #fbfdff;
    font-size: 13px;
}

label {
    color: var(--muted);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

input,
select,
textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
    padding: 8px 10px;
    outline: none;
}

textarea {
    min-height: 88px;
    resize: vertical;
}

.attachment-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.attachment-list-editor {
    display: grid;
    gap: 10px;
}

.attachment-editor-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.existing-attachment-row {
    grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr) minmax(150px, 180px);
}

.attachment-description {
    grid-column: 1 / -1;
}

.attachment-description textarea {
    min-height: 170px;
    line-height: 1.5;
    resize: vertical;
}

.existing-attachment-row .attachment-description {
    grid-column: 1 / -1;
}

.file-chip {
    display: grid;
    gap: 4px;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.file-chip strong,
.file-chip small {
    overflow-wrap: anywhere;
}

.file-chip small {
    color: var(--muted);
}

.upload-preview {
    margin-top: 8px;
    min-height: 78px;
    border: 1px dashed #c9d7e8;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.upload-preview-media {
    min-height: 78px;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.upload-preview-media img,
.upload-preview-media video {
    width: 96px;
    height: 78px;
    object-fit: cover;
    background: #e8eef6;
}

.upload-preview-file {
    width: 96px;
    height: 78px;
    background: linear-gradient(135deg, rgba(23, 107, 145, 0.16), rgba(23, 107, 145, 0.06));
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.upload-preview-file i {
    width: 28px;
    height: 28px;
}

.upload-preview-copy {
    min-width: 0;
    padding: 8px 10px 8px 0;
}

.upload-preview-copy strong,
.upload-preview-copy small {
    display: block;
    overflow-wrap: anywhere;
}

.upload-preview-copy small {
    margin-top: 3px;
    color: var(--muted);
}

.attachment-summary {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    min-width: 240px;
}

.attachment-summary div {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.attachment-summary strong,
.attachment-summary small {
    display: block;
}

.attachment-summary strong {
    font-size: 13px;
}

.attachment-summary small {
    margin-top: 2px;
    color: var(--muted);
}

.attachment-preview-grid {
    min-width: 280px;
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
    gap: 8px;
}

.attachment-preview-card {
    min-width: 0;
    min-height: 82px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #f8fafc;
    color: var(--text);
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.attachment-preview-card:hover,
.attachment-preview-card:focus-visible {
    border-color: rgba(23, 107, 145, 0.42);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
    outline: 0;
}

.attachment-preview-thumb {
    min-width: 0;
    width: 82px;
    height: 82px;
    background: linear-gradient(135deg, #eaf4fb, #f8fafc);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.attachment-preview-thumb img,
.attachment-preview-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.attachment-preview-thumb > i {
    width: 30px;
    height: 30px;
}

.attachment-play-badge {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.attachment-play-badge i {
    width: 16px;
    height: 16px;
}

.attachment-preview-info {
    min-width: 0;
    padding: 10px;
    display: grid;
    align-content: center;
}

.attachment-preview-info strong,
.attachment-preview-info small {
    display: block;
    overflow-wrap: anywhere;
}

.attachment-preview-info strong {
    font-size: 13px;
    line-height: 1.25;
}

.attachment-preview-info small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.attachment-preview-empty {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.content-preview-modal[hidden] {
    display: none;
}

.content-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    padding: 28px;
    background: rgba(15, 23, 42, 0.72);
    display: grid;
    align-items: center;
    justify-items: center;
}

.content-preview-dialog {
    width: min(960px, 100%);
    max-height: calc(100vh - 56px);
    border: 1px solid rgba(226, 232, 240, 0.18);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.32);
    display: grid;
    grid-template-rows: auto minmax(220px, 1fr) auto;
    overflow: hidden;
    position: relative;
}

.content-preview-head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.content-preview-head h2 {
    margin: 8px 0 0;
    font-size: 20px;
    line-height: 1.2;
}

.content-preview-head p {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.content-preview-frame {
    min-height: 320px;
    background: #0f172a;
    display: grid;
    align-items: center;
    justify-items: center;
}

.content-preview-frame img,
.content-preview-frame video {
    max-width: 100%;
    max-height: min(68vh, 640px);
    width: auto;
    height: auto;
    display: block;
}

.content-preview-frame iframe {
    width: 100%;
    height: min(68vh, 640px);
    min-height: 420px;
    border: 0;
    background: #fff;
}

.content-preview-fallback {
    padding: 28px;
    color: #fff;
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
}

.content-preview-fallback i {
    width: 44px;
    height: 44px;
}

.content-preview-actions {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

.soft-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    padding: 24px;
    background: rgba(15, 23, 42, 0.58);
    display: grid;
    align-items: center;
    justify-items: center;
}

.soft-delete-modal.is-hiding {
    opacity: 0;
    transition: opacity 160ms ease;
}

.soft-delete-dialog {
    width: min(440px, 100%);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
    padding: 18px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
}

.soft-delete-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #fff0f0;
    color: var(--danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.soft-delete-copy h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
}

.soft-delete-copy p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.soft-delete-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(22, 106, 143, 0.12);
}

.alert {
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    background: #fff;
}

.alert.success {
    border-color: #b8e4cf;
    background: #ecf9f3;
    color: var(--success);
}

.alert.danger {
    border-color: #efc0c0;
    background: #fff0f0;
    color: var(--danger);
}

.alert.warning {
    border-color: #f4d58d;
    background: #fff8e6;
    color: #8a5a00;
}

.alert a {
    color: inherit;
    font-weight: var(--font-weight-control);
}

.app-popup-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 10050;
    display: grid;
    gap: 10px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

.app-popup {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
    pointer-events: auto;
    animation: appPopupIn 160ms ease-out;
}

.app-popup.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.app-popup.danger {
    border-color: #efc0c0;
    border-left-color: var(--danger);
}

.app-popup.warning {
    border-color: #f4d58d;
    border-left-color: #b77900;
}

.app-popup.success {
    border-color: #b8e4cf;
    border-left-color: var(--success);
}

.app-popup.info {
    border-left-color: var(--primary);
}

.app-popup-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f8fafc;
}

.app-popup-icon svg,
.app-popup-close svg {
    width: 18px;
    height: 18px;
}

.app-popup.danger .app-popup-icon {
    background: #fff0f0;
    color: var(--danger);
}

.app-popup.warning .app-popup-icon {
    background: #fff8e6;
    color: #8a5a00;
}

.app-popup.success .app-popup-icon {
    background: #ecf9f3;
    color: var(--success);
}

.app-popup-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.app-popup-copy strong {
    color: var(--text);
    font-size: 14px;
}

.app-popup-copy span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.app-popup-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.app-popup-close:hover,
.app-popup-close:focus-visible {
    background: #eef2f7;
    color: var(--text);
}

@keyframes appPopupIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .app-popup-stack {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
    }}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 22px;
    background: linear-gradient(135deg, #f5f7fb 0%, #e8f1ef 100%);
}

.login-box {
    width: min(440px, 100%);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 26px;
}

.login-box.register-box {
    width: min(720px, 100%);
}

.login-logo {
    display: block;
    width: min(100%, 230px);
    height: auto;
    margin: 0 auto 18px;
    object-fit: contain;
}

.login-box h1 {
    margin: 0 0 8px;
    font-size: 24px;
    text-align: center;
}

.login-box p {
    margin: 0 0 20px;
    color: var(--muted);
    text-align: center;
}

.login-box .login-policy-link {
    margin: 16px 0 0;
    font-size: 13px;
}

.login-policy-link a {
    color: var(--primary);
    font-weight: var(--font-weight-control);
}

.login-policy-link a:hover {
    color: var(--primary-dark);
}

.user-chip .user-company-name {
    color: rgba(232, 240, 251, 0.72);
}

.profile-panel {
    max-width: 980px;
}

.profile-panel .panel-header {
    align-items: flex-start;
}

.profile-panel .panel-header p {
    margin: 4px 0 0;
}

.profile-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}

.profile-summary strong,
.profile-summary span,
.profile-summary small {
    display: block;
}

.profile-summary span,
.profile-summary small {
    color: var(--muted);
}

.profile-form {
    display: grid;
    gap: 16px;
}

.profile-restrictions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid #d3e4ef;
    border-radius: 8px;
    background: #f4f9fc;
    color: #315b72;
}

.profile-restrictions svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.login-company-link {
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px;
}

.login-company-link a {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #cfe0ec;
    border-radius: 8px;
    background: #f8fbfd;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-control);
}

.login-company-link a:hover {
    border-color: var(--primary);
    background: #eef6fb;
    color: var(--primary-dark);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    color: #718096;
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    text-transform: uppercase;
    letter-spacing: 0;
}

.login-divider::before,
.login-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--border);
}

.login-register-panel {
    padding: 16px;
    border: 1px solid #cfe0ec;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fbfd 0%, #eef6fb 100%);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    text-align: left;
}

.login-register-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: var(--font-weight-control);
    line-height: 1;
}

.login-register-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.login-register-eyebrow {
    color: var(--primary);
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    text-transform: uppercase;
}

.login-register-panel strong {
    color: var(--text);
    font-size: 15px;
    line-height: 1.3;
}

.login-register-panel span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.login-register-action {
    grid-column: 1 / -1;
    min-height: 38px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    background: #fff;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--font-weight-control);
}

.login-register-action:hover {
    background: var(--primary);
    color: #fff;
}

.login-register-panel a,
.register-consent a {
    color: var(--primary);
    font-weight: var(--font-weight-control);
}

.register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
    text-align: left;
}

.register-grid .full {
    grid-column: 1 / -1;
}

.coupon-apply-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.coupon-apply-row .button {
    min-width: 92px;
}

.register-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.register-consent input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex: 0 0 auto;
}

.register-trial-note {
    margin-top: 16px;
    padding: 13px 14px;
    border: 1px solid #bfe5d0;
    border-radius: 8px;
    background: #f0fdf4;
    color: #166534;
    font-size: 13px;
    line-height: 1.5;
}

.register-switch {
    margin-top: 16px;
}

.register-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 720px) {
    .login-page {
        align-items: start;
        padding: 16px;
    }

    .login-box,
    .login-box.register-box {
        padding: 22px;
    }

    .register-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .coupon-apply-row {
        grid-template-columns: 1fr;
    }}

.timeline {
    display: grid;
    gap: 12px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.timeline-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.chart-bars {
    display: grid;
    gap: 12px;
}

.chart-bar {
    display: grid;
    grid-template-columns: 130px 1fr 52px;
    gap: 10px;
    align-items: center;
}

.bar-track {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: var(--primary);
}

.dashboard-toolbar {
    min-height: 62px;
    border-bottom: 1px solid var(--border);
    margin: -22px -28px 26px;
    padding: 12px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--surface);
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-live-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fresh-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #15935f;
    font-weight: var(--font-weight-control);
    padding: 0 10px;
    min-height: 34px;
}

.fresh-chip svg {
    width: 17px;
    height: 17px;
}

.fullscreen-frame-shell {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: #101722;
    color: #fff;
}

body.fullscreen-frame-open {
    overflow: hidden;
}

.fullscreen-frame-head {
    min-height: 54px;
    padding: 8px 14px 8px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fullscreen-frame-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-weight: var(--font-weight-heading);
}

.fullscreen-frame-title svg {
    width: 18px;
    height: 18px;
    color: #7fc6ff;
}

.fullscreen-frame-close {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.fullscreen-frame-close:hover,
.fullscreen-frame-close:focus-visible {
    background: rgba(255, 255, 255, 0.16);
}

.fullscreen-frame-content {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    background: var(--surface-2);
}

.live-updated {
    animation: livePulse 0.5s ease;
}

[data-reports-live-root] {
    position: relative;
}

[data-reports-live-root].is-loading {
    pointer-events: none;
}

[data-reports-live-root].is-loading::before {
    content: "Loading...";
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 10;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

[data-reports-live-root].is-loading > * {
    opacity: 0.58;
}

[data-reports-filter-panel].is-loading .report-filters {
    pointer-events: none;
    opacity: 0.64;
}

@keyframes livePulse {
    0% {
        background-color: rgba(35, 153, 213, 0.14);
    }
    100% {
        background-color: transparent;
    }
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.dashboard-main {
    display: grid;
    gap: 18px;
}

.dashboard-main .metric-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0;
}

.dashboard-main .metric {
    padding: 16px 18px;
}

.dashboard-main .metric strong {
    font-size: 24px;
    margin-top: 14px;
}

.dashboard-main .metric-top {
    gap: 8px;
}

.dashboard-main .metric-top span,
.dashboard-main .metric small {
    font-size: 12px;
}

.metric-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.trend {
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 999px;
    font-style: normal;
    font-size: 12px;
    font-weight: var(--font-weight-control);
}

.trend.good {
    background: #dff5eb;
    color: #126e4b;
}

.trend.info {
    background: #e8f1fb;
    color: #175d86;
}

.chart-panel .panel-header {
    border-bottom: 0;
    padding-bottom: 0;
    flex-wrap: wrap;
    gap: 14px;
}

.analytics-period {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 6px 0 4px;
    font-size: 14px;
    font-weight: var(--font-weight-regular);
}

.analytics-period small,
.analytics-conversion-note {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.analytics-conversion-note {
    margin: 0;
    padding: 0 16px 14px;
}

.analytics-sync-status {
    margin: 12px 16px 0;
    color: #805400;
    font-size: 13px;
}

.analytics-sync-status[hidden] { display: none; }

.analytics-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    min-height: 220px;
    padding: 24px;
    color: var(--muted);
    text-align: center;
}

.analytics-empty svg { width: 28px; height: 28px; }
.analytics-empty strong { color: var(--text); font-size: 16px; font-weight: 500; }
.analytics-empty span { font-size: 13px; }
[data-dashboard-refresh].is-loading svg { animation: analytics-refresh-spin 1s linear infinite; }
@keyframes analytics-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    [data-dashboard-refresh].is-loading svg { animation: none; }
    .call-chart-bar { animation: none; }
    .call-chart-zoom-stage { transition: none; }}

.chart-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chart-actions .date-picker { max-width: 100%; }
.chart-actions .date-picker input { min-width: 0; max-width: 155px; }

.chart-help {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}

.chart-help svg {
    width: 17px;
    height: 17px;
}

.range-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    background: #f7f9fc;
    color: #9aa4b2;
}

.range-tabs a,
.range-tabs span {
    min-width: 42px;
    min-height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-control);
    padding: 0 10px;
    color: inherit;
    cursor: pointer;
}

.range-tabs .active {
    background: #fff;
    color: var(--text);
    box-shadow: var(--soft-shadow);
}

.call-metric-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 2px;
}

.call-metric-card {
    position: relative;
    min-width: 0;
    min-height: 78px;
    padding: 13px 14px;
    border: 1px solid #dbe7f2;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--call-metric-soft, #eaf3ff) 34%, #ffffff), #ffffff 46%),
        #fff;
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(31, 42, 68, 0.045);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.call-metric-card::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--call-metric-accent, #176bff);
    opacity: 0.22;
}

.call-metric-card:hover,
.call-metric-card:focus-visible {
    border-color: color-mix(in srgb, var(--call-metric-accent, #176bff) 38%, #dbe7f2);
    box-shadow: 0 14px 34px rgba(31, 42, 68, 0.085);
    transform: translateY(-1px);
    outline: none;
}

.call-metric-card.active {
    border-color: color-mix(in srgb, var(--call-metric-accent, #176bff) 72%, #ffffff);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--call-metric-soft, #eaf3ff) 70%, #ffffff), #ffffff 52%),
        #fff;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--call-metric-accent, #176bff) 56%, #ffffff),
        0 14px 34px color-mix(in srgb, var(--call-metric-accent, #176bff) 13%, transparent);
}

.call-metric-card.is-talk-time {
    --call-metric-accent: #0f8f72;
    --call-metric-soft: #e4f8f2;
}

.call-metric-card.is-screen-time {
    --call-metric-accent: #6f47d8;
    --call-metric-soft: #f0ebff;
}

.call-metric-card.is-call-volume {
    --call-metric-accent: #176bff;
    --call-metric-soft: #eaf3ff;
}

.call-metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--call-metric-soft, #eaf3ff);
    color: var(--call-metric-accent, #176bff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--call-metric-accent, #176bff) 12%, transparent);
}

.call-metric-icon svg {
    width: 22px;
    height: 22px;
}

.call-metric-copy {
    min-width: 0;
}

.call-metric-copy small,
.call-metric-copy em {
    display: block;
    color: #607086;
    font-style: normal;
    font-weight: 400;
}

.call-metric-copy small {
    font-size: 12px;
}

.call-metric-copy strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: 20px;
    font-weight: var(--font-weight-number);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.call-metric-copy em {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.25;
}

.call-metric-card.active .call-metric-copy small,
.call-metric-card.active .call-metric-copy strong {
    color: var(--call-metric-accent, #176bff);
}

.line-chart {
    position: relative;
    min-height: 430px;
    padding: 16px 18px 20px;
    display: grid;
    gap: 14px;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.call-trend-scroll {
    --call-chart-accent: #176bff;
    --call-chart-glow: rgba(23, 126, 230, 0.075);
    position: relative;
    min-height: 342px;
    overflow: hidden;
    padding: 10px 12px 4px;
    border: 1px solid #e6eef7;
    border-radius: 14px;
    background:
        radial-gradient(circle at 48% 18%, var(--call-chart-glow), transparent 32%),
        linear-gradient(180deg, rgba(248, 251, 255, 0.88), rgba(255, 255, 255, 0) 72%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    perspective: 900px;
}

.call-trend-scroll.is-metric-talk-time {
    --call-chart-accent: #0f8f72;
    --call-chart-glow: rgba(15, 143, 114, 0.1);
}

.call-trend-scroll.is-metric-screen-time {
    --call-chart-accent: #6f47d8;
    --call-chart-glow: rgba(111, 71, 216, 0.1);
}

.call-trend-scroll.is-metric-call-volume {
    --call-chart-accent: #176bff;
    --call-chart-glow: rgba(23, 126, 230, 0.09);
}

.call-chart-viewport {
    position: relative;
    min-height: 342px;
    overflow: hidden;
    border-radius: 12px;
    cursor: grab;
    transform-style: preserve-3d;
    touch-action: none;
    user-select: none;
}

.call-chart-viewport.is-dragging {
    cursor: grabbing;
}

.call-chart-zoom-stage {
    width: 100%;
    transform-origin: 0 0;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.call-chart-viewport.is-dragging .call-chart-zoom-stage {
    transition: filter 0.18s ease;
}

.call-chart-viewport.is-zoomed .call-chart-zoom-stage,
.call-chart-viewport.is-dragging .call-chart-zoom-stage {
    filter: drop-shadow(0 18px 22px rgba(31, 42, 68, 0.12));
}

.call-chart-zoom-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 24;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(216, 227, 239, 0.96);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(31, 42, 68, 0.10);
    backdrop-filter: blur(12px);
}

.call-chart-zoom-controls button {
    width: 29px;
    height: 29px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #526176;
    cursor: pointer;
}

.call-chart-zoom-controls button:hover,
.call-chart-zoom-controls button:focus-visible {
    background: #eef6ff;
    color: #176bff;
    outline: none;
}

.call-chart-zoom-controls svg {
    width: 17px;
    height: 17px;
}

.call-trend-svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 330px;
    overflow: visible;
}

.call-chart-axis-title {
    fill: #43536a;
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

.call-chart-grid {
    stroke: #e7eef7;
    stroke-width: 1;
    stroke-dasharray: 3 7;
    opacity: 0.86;
}

.call-chart-y-label,
.call-chart-x-label {
    fill: #596a83;
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

.call-chart-y-label {
    text-anchor: end;
}

.call-chart-x-label {
    text-anchor: middle;
}

.call-chart-area {
    fill: url(#callTrendAreaGradient);
    opacity: 0.66;
}

.call-chart-bar-bg,
.call-chart-bar {
    transform-box: fill-box;
    transform-origin: center bottom;
}

.call-chart-bar-bg {
    fill: rgba(15, 82, 110, 0.026);
}

.call-chart-bar {
    fill: var(--call-chart-accent, #176bff);
    opacity: 0.34;
    animation: callChartBarGrow 0.42s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: var(--bar-delay, 0ms);
}

.call-chart-bar.is-growth {
    fill: #16a75a;
    opacity: 0.34;
}

.call-chart-bar.is-decline {
    fill: #f04444;
    opacity: 0.32;
}

.call-chart-bar.is-flat,
.call-chart-bar.is-first {
    fill: color-mix(in srgb, var(--call-chart-accent, #176bff) 78%, #ffffff);
    opacity: 0.3;
}

@keyframes callChartBarGrow {
    0% {
        transform: scaleY(0.04);
        opacity: 0;
    }
    100% {
        transform: scaleY(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .call-chart-bar {
        animation: none;
    }}

.call-chart-line-base,
.call-chart-line-segment {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.call-chart-line-base {
    stroke: var(--call-chart-accent, #147ee6);
    stroke-width: 4.4;
    opacity: 0.10;
}

.call-chart-line-segment {
    stroke-width: 5.1;
    filter: drop-shadow(0 7px 10px rgba(31, 42, 68, 0.11));
}

.call-chart-line-segment.is-growth {
    stroke: #16a75a;
}

.call-chart-line-segment.is-decline {
    stroke: #f04444;
}

.call-chart-line-segment.is-flat {
    stroke: var(--call-chart-accent, #147ee6);
}

.call-chart-average-line {
    stroke: var(--call-chart-accent, #176bff);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1 8;
}

.call-chart-average-label {
    fill: var(--call-chart-accent, #176bff);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    text-anchor: end;
}

.call-chart-point-hit {
    fill: transparent;
    stroke: transparent;
    cursor: help;
    pointer-events: all;
}

.call-chart-hover-point {
    outline: none;
}

.call-chart-hover-guide {
    opacity: 0;
    stroke: var(--call-chart-accent, #176bff);
    stroke-width: 1.4;
    stroke-dasharray: 3 6;
    transition: opacity 0.16s ease;
}

.call-chart-hover-dot {
    opacity: 0;
    fill: #fff;
    stroke: var(--call-chart-accent, #176bff);
    stroke-width: 3;
    filter: drop-shadow(0 6px 10px rgba(31, 42, 68, 0.24));
    transition: opacity 0.16s ease, r 0.16s ease;
}

.call-chart-hover-point:hover .call-chart-hover-guide,
.call-chart-hover-point:hover .call-chart-hover-dot,
.call-chart-hover-point:focus-visible .call-chart-hover-guide,
.call-chart-hover-point:focus-visible .call-chart-hover-dot,
.call-chart-hover-point.is-active .call-chart-hover-guide,
.call-chart-hover-point.is-active .call-chart-hover-dot {
    opacity: 1;
}

.call-chart-hover-point.is-growth .call-chart-hover-dot {
    stroke: #16a75a;
}

.call-chart-hover-point.is-decline .call-chart-hover-dot {
    stroke: #f04444;
}

.call-chart-hover-point.is-flat .call-chart-hover-dot,
.call-chart-hover-point.is-first .call-chart-hover-dot {
    stroke: var(--call-chart-accent, #147ee6);
}

.call-chart-hover-card {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 18;
    width: min(284px, calc(100% - 28px));
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--call-chart-accent, #176bff) 28%, #dce8f5);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.98);
    color: #1f2a44;
    box-shadow: 0 18px 42px rgba(31, 42, 68, 0.18);
    pointer-events: none;
    transform: translate3d(var(--hover-x, 12px), var(--hover-y, 12px), 0);
    backdrop-filter: blur(10px);
}

.call-chart-hover-card[hidden] {
    display: none;
}

.call-chart-hover-card small {
    display: block;
    color: #176bff;
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

.call-chart-hover-card strong {
    display: block;
    margin-top: 3px;
    color: #101828;
    font-size: 18px;
    line-height: 1.2;
}

.call-chart-hover-label {
    display: block;
    margin-top: 2px;
    color: #607086;
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

.call-chart-hover-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.call-chart-hover-grid > span {
    min-width: 0;
    padding: 8px;
    border: 1px solid #e8eef6;
    border-radius: 9px;
    background: #f8fbff;
    color: #607086;
    font-size: 11px;
    font-weight: var(--font-weight-regular);
}

.call-chart-hover-grid-label {
    display: block;
}

.call-chart-hover-grid b {
    display: block;
    margin-top: 2px;
    color: #1f2a44;
    font-size: 12px;
}

.call-chart-hover-card em {
    display: block;
    margin-top: 8px;
    color: #5d6b81;
    font-size: 12px;
    font-style: normal;
    font-weight: var(--font-weight-regular);
}

.call-chart-hover-card.is-growth {
    border-color: #8fd9ad;
}

.call-chart-hover-card.is-growth small,
.call-chart-hover-card.is-growth em:first-of-type {
    color: #138a4c;
}

.call-chart-hover-card.is-decline {
    border-color: #ffaaa8;
}

.call-chart-hover-card.is-decline small,
.call-chart-hover-card.is-decline em:first-of-type {
    color: #d92f2f;
}

.call-chart-marker {
    stroke: #fff;
    stroke-width: 3;
    filter: drop-shadow(0 6px 10px rgba(31, 42, 68, 0.24));
}

.call-chart-marker.is-high {
    fill: var(--call-chart-accent, #176bff);
}

.call-chart-marker.is-low {
    fill: #f04444;
}

.call-chart-callout line {
    stroke-width: 2;
}

.call-chart-callout rect {
    fill: #fff;
    stroke-width: 1.2;
    filter: drop-shadow(0 10px 18px rgba(31, 42, 68, 0.15));
}

.call-chart-callout text {
    font-size: 13px;
}

.call-chart-callout-title {
    font-weight: var(--font-weight-regular);
}

.call-chart-callout-value {
    fill: #1f2a44;
    font-weight: var(--font-weight-number);
}

.call-chart-callout.is-high line,
.call-chart-callout.is-high rect {
    stroke: color-mix(in srgb, var(--call-chart-accent, #176bff) 55%, #ffffff);
}

.call-chart-callout.is-high .call-chart-callout-title {
    fill: var(--call-chart-accent, #176bff);
}

.call-chart-callout.is-low line,
.call-chart-callout.is-low rect {
    stroke: #ffaaa8;
}

.call-chart-callout.is-low .call-chart-callout-title {
    fill: #e43737;
}

.call-chart-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    color: #5d6b81;
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

.call-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid #e6eef6;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31, 42, 68, 0.04);
}

.call-chart-legend i {
    width: 24px;
    height: 0;
    border-top: 3px solid #147ee6;
    border-radius: 999px;
}

.call-chart-legend .legend-growth {
    border-color: #16a75a;
}

.call-chart-legend .legend-decline {
    border-color: #f04444;
}

.call-chart-legend .legend-average {
    border-top-style: dotted;
    border-color: #176bff;
}

.call-chart-insights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.call-chart-insight {
    min-width: 0;
    min-height: 82px;
    padding: 14px;
    border: 1px solid #e4edf5;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    background: linear-gradient(135deg, #ffffff, #fbfdff);
    box-shadow: 0 8px 24px rgba(31, 42, 68, 0.04);
}

.call-chart-insight + .call-chart-insight {
    border-left: 1px solid #e4edf5;
}

.call-chart-insight-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #edf6ff;
    color: #147ee6;
}

.call-chart-insight-icon svg {
    width: 20px;
    height: 20px;
}

.call-chart-insight small,
.call-chart-insight em {
    color: #5d6b81;
    font-style: normal;
    font-weight: var(--font-weight-regular);
}

.call-chart-insight small {
    display: block;
    font-size: 12px;
}

.call-chart-insight strong {
    display: block;
    margin-top: 4px;
    color: #147ee6;
    font-size: 18px;
    line-height: 1.2;
}

.call-chart-insight em {
    display: block;
    margin-top: 3px;
    font-size: 12px;
}

.call-chart-insight.is-up .call-chart-insight-icon,
.call-chart-insight.is-growth .call-chart-insight-icon {
    background: #e3f7ec;
    color: #16a75a;
}

.call-chart-insight.is-up strong,
.call-chart-insight.is-growth strong {
    color: #16a75a;
}

.call-chart-insight.is-down .call-chart-insight-icon,
.call-chart-insight.is-low .call-chart-insight-icon {
    background: #feecee;
    color: #e43737;
}

.call-chart-insight.is-down strong,
.call-chart-insight.is-low strong {
    color: #e43737;
}

.call-chart-insight.is-flat .call-chart-insight-icon {
    background: #f1f5f9;
    color: #607086;
}

.call-chart-insight.is-flat strong {
    color: #526176;
}

.tooltip-target {
    position: relative;
}

.tooltip-target::after,
.tooltip-target::before {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.tooltip-target::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translate(-50%, 6px);
    z-index: 30;
    width: max-content;
    max-width: min(310px, calc(100vw - 56px));
    padding: 10px 12px;
    border: 1px solid rgba(15, 82, 110, 0.18);
    border-radius: 8px;
    background: #101828;
    color: #fff;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    line-height: 1.45;
    text-align: left;
    white-space: normal;
}

.tooltip-target::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translate(-50%, 6px);
    z-index: 31;
    border: 6px solid transparent;
    border-top-color: #101828;
}

.tooltip-target:hover::after,
.tooltip-target:hover::before,
.tooltip-target:focus-visible::after,
.tooltip-target:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.dashboard-lower {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.panel-header.compact {
    min-height: 54px;
    padding: 14px 16px;
}

.pipeline-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pipeline-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}

.pipeline-card span {
    display: block;
    width: 34px;
    height: 5px;
    border-radius: 999px;
    background: #2399d5;
    margin-bottom: 14px;
}

.pipeline-card:nth-child(2) span {
    background: #176b91;
}

.pipeline-card:nth-child(3) span {
    background: #0f526e;
}

.pipeline-card:nth-child(4) span {
    background: #c9d2de;
}

.pipeline-card strong {
    display: block;
    margin-bottom: 6px;
}

.pipeline-card p {
    margin: 0;
    color: var(--muted);
}

.chart-bars.modern {
    gap: 14px;
}

.performance-list {
    gap: 16px;
}

.performance-row {
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: center;
    padding: 6px 0 10px;
    border-bottom: 1px solid rgba(15, 82, 110, 0.08);
}

.performance-row:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
}

.performance-main {
    min-width: 0;
}

.performance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.performance-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.performance-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.performance-link:hover,
.performance-link:focus-visible {
    color: var(--primary);
    border-bottom-color: rgba(35, 153, 213, 0.35);
    outline: none;
}

.performance-meta {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: var(--font-weight-regular);
}

.performance-breakdown {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    font-size: 11px;
    font-weight: var(--font-weight-regular);
}

.performance-breakdown span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
}

.performance-breakdown i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
}

.performance-breakdown .dial i {
    background: #2399d5;
}

.performance-breakdown .talk i {
    background: #2ac08b;
}

.performance-breakdown .connect {
    color: #176b91;
}

.performance-track {
    display: block;
    width: clamp(180px, 68%, 320px);
    max-width: 100%;
    position: relative;
    height: 10px;
    margin-top: 8px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(35, 153, 213, 0.06), rgba(38, 186, 136, 0.08)),
        var(--surface-2);
    box-shadow: inset 0 0 0 1px rgba(15, 82, 110, 0.06);
}

.performance-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
}

.performance-fill.dial {
    left: 0;
    background: linear-gradient(90deg, #2399d5 0%, #176b91 100%);
    box-shadow: 0 4px 10px rgba(23, 107, 145, 0.14);
}

.performance-fill.talk {
    background: linear-gradient(90deg, #2ac08b 0%, #16845f 100%);
    box-shadow: 0 4px 10px rgba(22, 132, 95, 0.14);
}

.loser-row .performance-activity {
    background: #fff6eb;
    color: #b45b12;
    box-shadow: inset 0 0 0 1px rgba(230, 147, 46, 0.16);
}

.loser-row .performance-breakdown .connect {
    color: #b45b12;
}

.loser-row .performance-fill.dial {
    background: linear-gradient(90deg, #f2a33b 0%, #cf6f1d 100%);
    box-shadow: 0 4px 10px rgba(207, 111, 29, 0.16);
}

.loser-row .performance-fill.talk {
    background: linear-gradient(90deg, #f0c66e 0%, #d89c25 100%);
    box-shadow: 0 4px 10px rgba(216, 156, 37, 0.16);
}

.performance-activity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef6ff;
    color: #0f5f84;
    font-size: 13px;
    font-weight: var(--font-weight-control);
    box-shadow: inset 0 0 0 1px rgba(35, 153, 213, 0.12);
}

.dashboard-side {
    display: grid;
    gap: 18px;
}

.date-pill {
    min-height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-weight: var(--font-weight-regular);
    color: var(--muted);
    background: #fff;
}

.date-picker {
    min-height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    background: #fff;
    cursor: pointer;
}

.date-picker svg {
    width: 17px;
    height: 17px;
}

.date-picker input {
    width: 126px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: var(--font-weight-regular);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.date-picker input:focus {
    border-color: transparent;
    box-shadow: none;
}

.agenda-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 16px;
}

.agenda-list div {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    background: #fbfcfe;
}

.agenda-list small {
    color: var(--muted);
    font-weight: var(--font-weight-regular);
}

.agenda-list strong {
    display: block;
    margin-top: 6px;
    font-size: 22px;
}

.task-dashboard-card .panel-header {
    border-bottom: 0;
    padding-bottom: 8px;
}

.task-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 14px 12px;
}

.task-stat {
    display: grid;
    gap: 2px;
    padding: 11px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fbfcfe;
    text-align: center;
}

.task-stat strong {
    font-size: 20px;
    line-height: 1;
}

.task-stat small {
    color: var(--muted);
    font-size: 11px;
    font-weight: var(--font-weight-regular);
}

.task-stat.pending strong {
    color: var(--danger);
}

.task-stat.done strong {
    color: var(--success);
}

.task-stat.overdue strong {
    color: var(--danger);
}

.task-dashboard-list {
    display: grid;
    gap: 8px;
    padding: 0 14px 14px;
}

.task-dashboard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: inherit;
    background: #fbfcfe;
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.task-dashboard-item:hover,
.task-dashboard-item:focus-visible {
    border-color: var(--primary);
    box-shadow: var(--soft-shadow);
    transform: translateY(-1px);
}

.task-dashboard-item.task-display-pending {
    background: color-mix(in srgb, var(--danger) 13%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

.task-dashboard-item.task-display-review {
    background: color-mix(in srgb, var(--info) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--info) 35%, var(--border));
}

.task-dashboard-item.task-display-completed {
    background: color-mix(in srgb, var(--success) 9%, var(--surface));
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
}

.task-dashboard-item span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.task-dashboard-item strong,
.task-dashboard-item small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-dashboard-item small {
    color: var(--muted);
    font-size: 12px;
}

.task-dashboard-item em {
    flex: 0 0 auto;
    max-width: 98px;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: var(--font-weight-critical);
    text-align: right;
}

.task-dashboard-item.task-deadline-overdue em,
.task-dashboard-item.task-deadline-critical em {
    color: var(--danger);
}

.task-dashboard-item.task-deadline-due_soon em {
    color: var(--warning);
}

.task-dashboard-item.task-deadline-completed em {
    color: var(--success);
}

.schedule-list,
.activity-feed {
    padding: 14px;
    display: grid;
    gap: 10px;
}

.schedule-card {
    display: grid;
    gap: 3px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fbfcfe;
}

.schedule-card span,
.schedule-card small {
    color: var(--muted);
}

.activity-item {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.activity-item > span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2399d5;
    margin-top: 5px;
}

.activity-item strong {
    text-transform: capitalize;
}

.activity-item p {
    margin: 2px 0;
    color: var(--muted);
}

.activity-item small {
    color: #98a2b3;
}

.empty.slim {
    padding: 16px;
}

.dashboard-table {
    margin-top: 20px;
}

.empty {
    padding: 24px;
    color: var(--muted);
    text-align: center;
}

/* Premium enterprise dashboard refresh. Scoped to the CRM dashboard only. */
.nav-count[data-nav-count] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 999px;
    background: #df3450;
    color: #fff;
    font-size: 11px;
    font-weight: var(--font-weight-number);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.nav-count[data-nav-count][hidden] {
    display: none;
}

body:has([data-dashboard-live]) {
    --dashboard-bg: #f6f9fc;
    --dashboard-card: #fff;
    --dashboard-line: #e2eaf3;
    --dashboard-ink: #15233c;
    --dashboard-muted: #657590;
    --dashboard-blue: #176bff;
    --dashboard-deep: #172434;
    background: var(--dashboard-bg);
}

body:has([data-dashboard-live]) .main {
    background: var(--dashboard-bg);
}

body:has([data-dashboard-live]) .topbar {
    position: sticky;
    top: 0;
    z-index: 14;
    min-height: 66px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--dashboard-line);
    background: #fff;
    box-shadow: none;
}

body:has([data-dashboard-live]) .topbar h1 {
    color: var(--dashboard-ink);
    font-size: 20px;
    font-weight: var(--font-weight-title);
}

body:has([data-dashboard-live]) .topbar p {
    color: var(--dashboard-muted);
    font-size: 13px;
}

.dashboard-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: dashboardCardIn 0.34s ease both;
}

.dashboard-welcome-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-welcome-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #f2a00c;
    box-shadow: none;
}

.dashboard-welcome-icon svg {
    width: 26px;
    height: 26px;
}

.dashboard-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #5f7290;
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    text-transform: uppercase;
}

.dashboard-welcome h2 {
    margin: 0;
    color: var(--dashboard-ink, #0d1b3d);
    font-size: 20px;
    font-weight: var(--font-weight-title);
    line-height: 1.35;
}

.dashboard-welcome p {
    margin: 5px 0 0;
    color: var(--dashboard-muted, #61708a);
    font-size: 13px;
    line-height: 1.5;
}

.dashboard-welcome-note {
    display: grid;
    justify-items: end;
    gap: 6px;
    color: var(--dashboard-muted, #61708a);
    text-align: right;
}

.dashboard-welcome-note span {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #dce8f4;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--dashboard-ink, #0d1b3d);
    font-size: 13px;
    font-weight: var(--font-weight-regular);
}

.dashboard-welcome-note svg {
    width: 16px;
    height: 16px;
    color: var(--dashboard-blue, #176bff);
}

body:has([data-dashboard-live]) .dashboard-toolbar {
    min-height: auto;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: transparent;
}

body:has([data-dashboard-live]) .toolbar-left,
body:has([data-dashboard-live]) .toolbar-right {
    gap: 10px;
}

body:has([data-dashboard-live]) .button,
body:has([data-dashboard-live]) button.button,
body:has([data-dashboard-live]) .icon-button {
    border-radius: 6px;
    border-color: var(--dashboard-line);
    box-shadow: none;
    font-weight: var(--font-weight-control);
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

body:has([data-dashboard-live]) .button:hover,
body:has([data-dashboard-live]) .button:focus-visible,
body:has([data-dashboard-live]) .icon-button:hover,
body:has([data-dashboard-live]) .icon-button:focus-visible {
    transform: translateY(-1px);
    border-color: #afc7e2;
    box-shadow: none;
}

body:has([data-dashboard-live]) .button:focus-visible,
body:has([data-dashboard-live]) .icon-button:focus-visible {
    outline: 2px solid #80b6ff;
    outline-offset: 2px;
}

body:has([data-dashboard-live]) .button.primary {
    border-color: #176bff;
    background: #176bff;
    box-shadow: 0 2px 6px rgba(23, 107, 255, 0.12);
}

body:has([data-dashboard-live]) .button.dark {
    border-color: #0e1b2c;
    background: #0e1b2c;
}

body:has([data-dashboard-live]) .fresh-chip {
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(17, 166, 95, 0.18);
    border-radius: 999px;
    background: #eafaf3;
    box-shadow: none;
}

body:has([data-dashboard-live]) .ds-dashboard {
    margin: 14px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: dashboardCardIn 0.34s ease both;
}

body:has([data-dashboard-live]) .ds-dashboard .ds-toolbar {
    align-items: center;
    gap: 10px;
}

body:has([data-dashboard-live]) .ds-dashboard .ds-toolbar h2 {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: var(--font-weight-heading);
}

body:has([data-dashboard-live]) .ds-dashboard .ds-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 0;
    border: 0;
}

body:has([data-dashboard-live]) .ds-dashboard .ds-summary > div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-content: center;
    column-gap: 12px;
    min-width: 0;
    min-height: 100px;
    padding: 16px;
    border: 1px solid var(--dashboard-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(24, 45, 78, 0.025);
}

body:has([data-dashboard-live]) .ds-dashboard .ds-summary > div > span,
body:has([data-dashboard-live]) .ds-dashboard .ds-summary > div > strong {
    grid-column: 2;
}

body:has([data-dashboard-live]) .ds-dashboard .ds-metric-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 42px;
    padding: 8px;
    border-radius: 7px;
    color: #176bff;
    background: #eaf3ff;
}

body:has([data-dashboard-live]) .ds-dashboard .ds-metric-icon svg {
    width: 22px;
    height: 22px;
}

body:has([data-dashboard-live]) .ds-dashboard .ds-metric-icon.is-verified { color: #128666; background: #e6f8ef; }
body:has([data-dashboard-live]) .ds-dashboard .ds-metric-icon.is-pending { color: #bb780b; background: #fff4e1; }
body:has([data-dashboard-live]) .ds-dashboard .ds-metric-icon.is-rejected { color: #d83454; background: #fff0f3; }

body:has([data-dashboard-live]) .ds-dashboard .ds-summary > div > strong {
    margin-top: 9px;
    font-size: 21px;
    font-weight: var(--font-weight-number);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

body:has([data-dashboard-live]) .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 286px;
    gap: 14px;
}

body:has([data-dashboard-live]) .dashboard-main {
    min-width: 0;
    gap: 14px;
}

body:has([data-dashboard-live]) .dashboard-main .metric-row {
    gap: 12px;
}

body:has([data-dashboard-live]) .metric {
    position: relative;
    min-width: 0;
    min-height: 106px;
    padding: 14px;
    border-color: var(--dashboard-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(24, 45, 78, 0.025);
    overflow: visible;
    animation: dashboardCardIn 0.32s ease both;
}

body:has([data-dashboard-live]) .dashboard-main .metric {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    align-content: center;
}

body:has([data-dashboard-live]) .metric-icon {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 32px;
    height: 36px;
    margin: 2px 0 0;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #176bff;
    background: #eaf3ff;
    box-shadow: none;
}

body:has([data-dashboard-live]) .metric-icon svg {
    width: 19px;
    height: 19px;
}

body:has([data-dashboard-live]) .metric-icon.is-leads { color: #0f8f72; background: #e5f8f2; }
body:has([data-dashboard-live]) .metric-icon.is-connect { color: #176bff; background: #eaf3ff; }
body:has([data-dashboard-live]) .metric-icon.is-time { color: #0f6fb3; background: #e8f5ff; }
body:has([data-dashboard-live]) .metric-icon.is-team { color: #176bff; background: #eaf3ff; }

body:has([data-dashboard-live]) .dashboard-main .metric strong {
    grid-column: 2;
    margin-top: 7px;
    color: var(--dashboard-ink, #0d1b3d);
    font-size: 21px;
    font-weight: var(--font-weight-number);
    line-height: 1.3;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

body:has([data-dashboard-live]) .dashboard-main .metric-top {
    grid-column: 2;
    flex-wrap: wrap;
    gap: 4px 6px;
}

body:has([data-dashboard-live]) .dashboard-main .metric-top span,
body:has([data-dashboard-live]) .dashboard-main .metric small {
    grid-column: 2;
    color: var(--dashboard-muted, #61708a);
    font-weight: 400;
    line-height: 1.4;
}

body:has([data-dashboard-live]) .dashboard-main .metric small {
    margin-top: 4px;
}

body:has([data-dashboard-live]) .trend {
    min-height: 22px;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: var(--font-weight-control);
    box-shadow: none;
}

body:has([data-dashboard-live]) .panel {
    min-width: 0;
    border-color: var(--dashboard-line);
    border-radius: 8px;
    background: var(--dashboard-card, #fff);
    box-shadow: 0 2px 7px rgba(24, 45, 78, 0.025);
    overflow: hidden;
    animation: dashboardCardIn 0.34s ease both;
}

body:has([data-dashboard-live]) .panel-header {
    padding: 14px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    border-bottom-color: #e7eef6;
}

body:has([data-dashboard-live]) .panel-header h2 {
    color: var(--dashboard-ink, #0d1b3d);
    font-size: 14px;
    font-weight: var(--font-weight-heading);
}

body:has([data-dashboard-live]) .chart-panel .panel-header {
    min-height: 64px;
    padding: 16px 16px 8px;
}

body:has([data-dashboard-live]) .chart-panel .panel-header h2 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
}

body:has([data-dashboard-live]) .analytics-period {
    margin-top: 4px;
    color: var(--dashboard-ink, #0d1b3d);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

body:has([data-dashboard-live]) .chart-actions {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body:has([data-dashboard-live]) .date-picker,
body:has([data-dashboard-live]) .chart-help,
body:has([data-dashboard-live]) .range-tabs,
body:has([data-dashboard-live]) [data-dashboard-refresh] {
    border-radius: 6px;
}

body:has([data-dashboard-live]) .range-tabs {
    background: #eef4fb;
}

body:has([data-dashboard-live]) .range-tabs .active {
    color: #176bff;
    box-shadow: 0 1px 3px rgba(23, 107, 255, 0.08);
}

body:has([data-dashboard-live]) .line-chart {
    gap: 12px;
    padding: 10px 16px 16px;
    background: #fff;
}

body:has([data-dashboard-live]) .call-metric-selector {
    gap: 8px;
}

body:has([data-dashboard-live]) .call-metric-card {
    min-height: 74px;
    padding: 10px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    border-radius: 6px;
    border-color: var(--dashboard-line);
    background: #fff;
    box-shadow: none;
}

body:has([data-dashboard-live]) .call-metric-card.active,
body:has([data-dashboard-live]) .call-metric-card:hover,
body:has([data-dashboard-live]) .call-metric-card:focus-visible {
    border-color: var(--call-metric-accent);
    background: var(--call-metric-soft);
    box-shadow: none;
}

body:has([data-dashboard-live]) .call-metric-card::before {
    content: none;
}

body:has([data-dashboard-live]) .call-metric-icon {
    width: 30px;
    height: 34px;
    border-radius: 6px;
    box-shadow: none;
}

body:has([data-dashboard-live]) .call-metric-icon svg {
    width: 18px;
    height: 18px;
}

body:has([data-dashboard-live]) .call-metric-copy strong {
    font-size: 17px;
    font-weight: var(--font-weight-number);
}

body:has([data-dashboard-live]) .call-metric-copy small,
body:has([data-dashboard-live]) .call-metric-copy em {
    font-size: 11px;
}

body:has([data-dashboard-live]) .call-trend-scroll {
    padding: 8px 0 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

body:has([data-dashboard-live]) .call-chart-hover-card {
    max-width: calc(100% - 16px);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(21, 35, 60, 0.12);
}

body:has([data-dashboard-live]) .call-chart-zoom-controls {
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(21, 35, 60, 0.06);
}

body:has([data-dashboard-live]) .call-chart-legend {
    justify-content: flex-start;
    gap: 8px 16px;
    margin: 0;
}

body:has([data-dashboard-live]) .call-chart-legend span {
    font-weight: 400;
    font-size: 11px;
}

body:has([data-dashboard-live]) .call-chart-insights {
    border-radius: 6px;
    box-shadow: none;
}

body:has([data-dashboard-live]) .call-chart-insight {
    min-height: 78px;
    padding: 12px;
    gap: 10px;
}

body:has([data-dashboard-live]) .call-chart-insight-icon {
    width: 32px;
    height: 32px;
}

body:has([data-dashboard-live]) .call-chart-insight strong {
    font-size: 16px;
    font-weight: var(--font-weight-number);
}

body:has([data-dashboard-live]) .dashboard-side {
    min-width: 0;
    gap: 12px;
}

body:has([data-dashboard-live]) .agenda-list {
    padding: 0 12px 12px;
}

body:has([data-dashboard-live]) .agenda-list div,
body:has([data-dashboard-live]) .task-stat,
body:has([data-dashboard-live]) .schedule-card {
    border-color: #dfe9f4;
    border-radius: 6px;
    background: #fbfdff;
}

body:has([data-dashboard-live]) .agenda-list strong {
    color: var(--dashboard-ink, #0d1b3d);
    font-size: 21px;
    font-weight: var(--font-weight-number);
}

body:has([data-dashboard-live]) .task-dashboard-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 0 12px 14px;
}

body:has([data-dashboard-live]) .task-stat {
    padding: 10px 3px;
    border: 1px solid #e7eef6;
    background: #f5f9ff;
}

body:has([data-dashboard-live]) .task-stat strong {
    font-size: 18px;
    font-weight: var(--font-weight-number);
}

body:has([data-dashboard-live]) .task-stat small {
    font-size: 10px;
    font-weight: 400;
}

body:has([data-dashboard-live]) .task-stat.pending,
body:has([data-dashboard-live]) .task-stat.overdue {
    border-color: #ffe3e9;
    background: #fff3f6;
}

body:has([data-dashboard-live]) .task-stat.done {
    border-color: #dff1ea;
    background: #eefaf5;
}

body:has([data-dashboard-live]) .task-stat.today strong {
    color: var(--dashboard-blue);
}

body:has([data-dashboard-live]) .task-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 12px;
    padding: 14px 0 6px;
    border-top: 1px solid var(--dashboard-line);
}

body:has([data-dashboard-live]) .task-dashboard-heading h3 {
    margin: 0;
    color: var(--dashboard-ink);
    font-size: 13px;
    font-weight: var(--font-weight-heading);
}

body:has([data-dashboard-live]) .task-dashboard-heading a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--dashboard-blue);
    font-size: 11px;
}

body:has([data-dashboard-live]) .task-dashboard-heading svg {
    width: 13px;
    height: 13px;
}

body:has([data-dashboard-live]) .task-dashboard-list {
    gap: 0;
    padding: 0 12px 8px;
}

body:has([data-dashboard-live]) .task-dashboard-item {
    --task-indicator: #176bff;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 12px;
    align-items: start;
    gap: 9px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid #eef2f7;
    border-radius: 0;
    background: transparent;
    transition: background 0.16s ease;
}

body:has([data-dashboard-live]) .task-dashboard-item:last-child {
    border-bottom: 0;
}

body:has([data-dashboard-live]) .task-dashboard-item.task-indicator-tone-danger { --task-indicator: #e13c57; }
body:has([data-dashboard-live]) .task-dashboard-item.task-indicator-tone-warning { --task-indicator: #c77b00; }
body:has([data-dashboard-live]) .task-dashboard-item.task-indicator-tone-info { --task-indicator: #176bff; }
body:has([data-dashboard-live]) .task-dashboard-item.task-indicator-tone-success { --task-indicator: #128666; }

body:has([data-dashboard-live]) .task-status-ring {
    display: block;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border: 2px solid var(--task-indicator);
    border-radius: 50%;
    background: transparent;
}

body:has([data-dashboard-live]) .task-dashboard-item > svg {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    color: #8a99ac;
}

body:has([data-dashboard-live]) .task-dashboard-item:hover,
body:has([data-dashboard-live]) .task-dashboard-item:focus-visible {
    border-color: #eef2f7;
    background: #f6f9fd;
    box-shadow: none;
    transform: none;
}

body:has([data-dashboard-live]) .task-dashboard-item:focus-visible {
    outline: 2px solid #80b6ff;
    outline-offset: 2px;
}

body:has([data-dashboard-live]) .task-dashboard-item strong {
    color: var(--dashboard-ink, #0d1b3d);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    line-height: 1.45;
}

body:has([data-dashboard-live]) .task-dashboard-item strong,
body:has([data-dashboard-live]) .task-dashboard-item small {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

body:has([data-dashboard-live]) .task-dashboard-item small {
    font-size: 11px;
    line-height: 1.5;
}

body:has([data-dashboard-live]) .task-dashboard-item .task-dashboard-deadline {
    display: block;
    color: var(--dashboard-muted);
}

body:has([data-dashboard-live]) .task-dashboard-item .task-dashboard-deadline em {
    max-width: none;
    color: var(--task-indicator);
    font-weight: 500;
    text-align: left;
}

body:has([data-dashboard-live]) .task-dashboard-item .task-unread {
    padding: 0;
    background: transparent;
    color: var(--dashboard-blue);
    border: 0;
    box-shadow: none;
    animation: none;
}

body:has([data-dashboard-live]) .activity-feed {
    gap: 0;
}

body:has([data-dashboard-live]) .activity-item {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
}

body:has([data-dashboard-live]) .activity-item > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: 0;
    border-radius: 6px;
    background: #eaf3ff;
    color: #176bff;
    box-shadow: none;
}

body:has([data-dashboard-live]) .activity-item > span svg {
    width: 16px;
    height: 16px;
}

body:has([data-dashboard-live]) .activity-item strong {
    color: var(--dashboard-ink, #0d1b3d);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

body:has([data-dashboard-live]) .activity-item p {
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body:has([data-dashboard-live]) .dashboard-lower {
    gap: 14px;
}

body:has([data-dashboard-live]) .performance-row {
    padding: 8px 0 12px;
}

body:has([data-dashboard-live]) .performance-head strong {
    color: var(--dashboard-ink, #0d1b3d);
}

body:has([data-dashboard-live]) .performance-track {
    height: 6px;
    background: #edf3f9;
}

body:has([data-dashboard-live]) .dashboard-table {
    margin-top: 14px;
}

body:has([data-dashboard-live]) .dashboard-table .panel-header {
    min-height: 54px;
}

body:has([data-dashboard-live]) .table-wrap {
    background: #fff;
}

body:has([data-dashboard-live]) table {
    min-width: 760px;
}

body:has([data-dashboard-live]) th {
    background: #f8fbff;
    color: #5b6d87;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: uppercase;
}

body:has([data-dashboard-live]) td {
    color: #23324a;
}

@keyframes dashboardCardIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-welcome,
    body:has([data-dashboard-live]) .metric,
    body:has([data-dashboard-live]) .panel,
    body:has([data-dashboard-live]) .ds-dashboard {
        animation: none;
    }

    body:has([data-dashboard-live]) .nav a,
    body:has([data-dashboard-live]) .button,
    body:has([data-dashboard-live]) .icon-button,
    body:has([data-dashboard-live]) .task-dashboard-item,
    body:has([data-dashboard-live]) .call-metric-card {
        transition: none;
    }}

@media (max-width: 1240px) {
    body:has([data-dashboard-live]) .dashboard-grid {
        grid-template-columns: 1fr;
    }

    body:has([data-dashboard-live]) .dashboard-side {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }}

@media (max-width: 1120px) {
    body:has([data-dashboard-live]) .dashboard-main .metric-row,
    body:has([data-dashboard-live]) .ds-dashboard .ds-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:has([data-dashboard-live]) .dashboard-lower {
        grid-template-columns: 1fr;
    }}

@media (max-width: 760px) {
    .dashboard-welcome {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0;
    }

    .dashboard-welcome-note {
        justify-items: start;
        text-align: left;
    }

    body:has([data-dashboard-live]) .dashboard-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    body:has([data-dashboard-live]) .toolbar-left,
    body:has([data-dashboard-live]) .toolbar-right {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    body:has([data-dashboard-live]) .toolbar-left .button,
    body:has([data-dashboard-live]) .toolbar-right > .button {
        flex: 1 1 auto;
    }

    body:has([data-dashboard-live]) .dashboard-main .metric-row,
    body:has([data-dashboard-live]) .ds-dashboard .ds-summary,
    body:has([data-dashboard-live]) .dashboard-side {
        grid-template-columns: 1fr;
    }

    body:has([data-dashboard-live]) .agenda-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:has([data-dashboard-live]) .task-dashboard-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body:has([data-dashboard-live]) .chart-panel .panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body:has([data-dashboard-live]) .chart-actions {
        width: 100%;
        align-items: center;
        justify-content: flex-start;
    }

    body:has([data-dashboard-live]) .chart-actions .date-picker {
        flex: 1 1 150px;
    }

    body:has([data-dashboard-live]) .range-tabs {
        flex: 1 1 auto;
    }

    body:has([data-dashboard-live]) .range-tabs a,
    body:has([data-dashboard-live]) .range-tabs span {
        flex: 1 1 auto;
    }

    body:has([data-dashboard-live]) .call-metric-selector {
        grid-template-columns: 1fr;
    }

    body:has([data-dashboard-live]) .call-chart-insights {
        grid-template-columns: 1fr;
    }}

.super-dashboard-body {
    --dashboard-card-shadow: 0 16px 40px rgba(33, 53, 84, 0.08);
    --dashboard-card-shadow-hover: 0 24px 54px rgba(33, 53, 84, 0.13);
    --dashboard-soft-blue: #edf6ff;
    --dashboard-soft-green: #eafaf3;
    --dashboard-soft-red: #fff1f4;
    --dashboard-soft-amber: #fff6e6;
    --dashboard-soft-violet: #f3edff;
    position: relative;
    isolation: isolate;
    padding-bottom: 10px;
}

.super-dashboard-body::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -18px -18px auto;
    height: 330px;
    background:
        linear-gradient(180deg, rgba(231, 241, 255, 0.92), rgba(246, 249, 252, 0.2) 72%, rgba(246, 249, 252, 0));
    pointer-events: none;
}

.super-dashboard-body .dashboard-welcome {
    margin-bottom: 20px;
    padding-top: 6px;
}

.super-dashboard-body .dashboard-welcome-main {
    align-items: flex-start;
    gap: 14px;
}

.super-dashboard-body .dashboard-welcome-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #fff6df;
    color: #f0a000;
    box-shadow: inset 0 0 0 1px #ffe7a8, 0 12px 24px rgba(240, 160, 0, 0.13);
}

.super-dashboard-body .dashboard-welcome-icon svg {
    width: 24px;
    height: 24px;
}

.super-dashboard-body .dashboard-eyebrow {
    margin-bottom: 5px;
    color: #49719f;
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    letter-spacing: 0.08em;
}

.super-dashboard-body .dashboard-welcome h2 {
    font-size: clamp(24px, 2.3vw, 32px);
    font-weight: var(--font-weight-title);
    line-height: 1.16;
    letter-spacing: 0;
}

.super-dashboard-body .dashboard-welcome p {
    color: #5d6f8c;
    font-size: 16px;
}

.super-dashboard-body .dashboard-welcome-note {
    max-width: 360px;
    gap: 5px;
}

.super-dashboard-body .dashboard-welcome-note span {
    border-color: rgba(205, 222, 241, 0.88);
    box-shadow: 0 8px 22px rgba(33, 53, 84, 0.05);
}

.super-dashboard-body .dashboard-welcome-note p {
    margin: 4px 0 0;
    color: #67768e;
    font-size: 14px;
    font-style: italic;
}

.super-dashboard-body .dashboard-welcome-note small {
    color: #7e8ca2;
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

.super-dashboard-body .super-dashboard-toolbar {
    margin-bottom: 18px;
}

.super-dashboard-body .dashboard-billing-row {
    margin-top: 0;
    margin-bottom: 18px;
}

.super-dashboard-body .metric-accent-blue { --metric-accent: #176bff; --metric-soft: var(--dashboard-soft-blue); }
.super-dashboard-body .metric-accent-green { --metric-accent: #19a873; --metric-soft: var(--dashboard-soft-green); }
.super-dashboard-body .metric-accent-red { --metric-accent: #e33f5d; --metric-soft: var(--dashboard-soft-red); }
.super-dashboard-body .metric-accent-amber { --metric-accent: #f1a617; --metric-soft: var(--dashboard-soft-amber); }
.super-dashboard-body .metric-accent-violet { --metric-accent: #8b5cf6; --metric-soft: var(--dashboard-soft-violet); }
.super-dashboard-body .metric-accent-cyan { --metric-accent: #0f8fc9; --metric-soft: #e8f7ff; }

body:has([data-dashboard-live]) .super-dashboard-body .metric,
body:has([data-dashboard-live]) .super-dashboard-body .panel,
body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-summary > div {
    border-color: rgba(213, 226, 240, 0.95);
    box-shadow: var(--dashboard-card-shadow);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body:has([data-dashboard-live]) .super-dashboard-body .metric:hover,
body:has([data-dashboard-live]) .super-dashboard-body .panel:hover,
body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-summary > div:hover {
    border-color: color-mix(in srgb, var(--metric-accent, #176bff) 24%, #d5e2f0);
    box-shadow: var(--dashboard-card-shadow-hover);
    transform: translateY(-2px);
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-kpi-card {
    min-height: 132px;
    padding: 18px;
    overflow: hidden;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--metric-soft, #edf6ff) 58%, #ffffff), #ffffff 54%);
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--metric-accent, #176bff);
    opacity: 0.76;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-kpi-card::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 76px;
    height: 34px;
    opacity: 0.22;
    background:
        linear-gradient(135deg, transparent 0 21%, var(--metric-accent, #176bff) 22% 26%, transparent 27% 45%, var(--metric-accent, #176bff) 46% 51%, transparent 52% 65%, var(--metric-accent, #176bff) 66% 72%, transparent 73%);
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-kpi-card .metric-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    color: var(--metric-accent, #176bff);
    background: color-mix(in srgb, var(--metric-soft, #edf6ff) 82%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metric-accent, #176bff) 14%, transparent);
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-kpi-card .metric-icon svg {
    width: 22px;
    height: 22px;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-main .dashboard-kpi-card {
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-main .metric strong {
    margin-top: 9px;
    color: #0a1020;
    font-size: clamp(22px, 1.8vw, 29px);
    font-weight: var(--font-weight-number);
}

body:has([data-dashboard-live]) .super-dashboard-body .metric-top span,
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-main .metric small {
    font-size: 13px;
    font-weight: var(--font-weight-regular);
}

body:has([data-dashboard-live]) .super-dashboard-body .trend {
    color: var(--metric-accent, #176bff);
    background: color-mix(in srgb, var(--metric-soft, #edf6ff) 84%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metric-accent, #176bff) 14%, transparent);
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row .metric {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    align-content: center;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row .metric-icon {
    grid-column: 1;
    grid-row: 1 / 4;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row .metric-top,
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row strong,
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row small {
    grid-column: 2;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row strong {
    margin-top: 9px;
    color: #0a1020;
    font-size: clamp(20px, 1.55vw, 26px);
    font-weight: var(--font-weight-number);
    line-height: 1.24;
    overflow-wrap: anywhere;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 18px;
    align-items: start;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-main {
    display: grid;
    gap: 18px;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-main .metric-row {
    gap: 16px;
    margin-bottom: 0;
}

body:has([data-dashboard-live]) .super-dashboard-body .panel {
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 253, 255, 0.98));
}

body:has([data-dashboard-live]) .super-dashboard-body .panel-header {
    min-height: 64px;
    padding: 16px 18px;
    border-bottom-color: #e9f0f8;
}

body:has([data-dashboard-live]) .super-dashboard-body .panel-header h2 {
    color: #101828;
    font-size: 16px;
    font-weight: var(--font-weight-heading);
}

body:has([data-dashboard-live]) .super-dashboard-body .chart-panel {
    background: #fff;
}

body:has([data-dashboard-live]) .super-dashboard-body .chart-panel .panel-header {
    padding: 18px 20px 10px;
}

body:has([data-dashboard-live]) .super-dashboard-body .chart-panel .panel-header h2 {
    font-size: 18px;
}

body:has([data-dashboard-live]) .super-dashboard-body .analytics-period {
    color: #37506f;
    font-size: 13px;
}

body:has([data-dashboard-live]) .super-dashboard-body .chart-actions {
    gap: 8px;
}

body:has([data-dashboard-live]) .super-dashboard-body .date-picker,
body:has([data-dashboard-live]) .super-dashboard-body .chart-help,
body:has([data-dashboard-live]) .super-dashboard-body .range-tabs,
body:has([data-dashboard-live]) .super-dashboard-body [data-dashboard-refresh] {
    border-color: #dce8f4;
    box-shadow: 0 8px 20px rgba(33, 53, 84, 0.05);
}

body:has([data-dashboard-live]) .super-dashboard-body .line-chart {
    min-height: 470px;
    padding: 12px 20px 20px;
    background:
        linear-gradient(180deg, #ffffff, #f8fbff);
}

body:has([data-dashboard-live]) .super-dashboard-body .call-metric-selector {
    gap: 10px;
}

body:has([data-dashboard-live]) .super-dashboard-body .call-metric-card {
    min-height: 86px;
    border-radius: 8px;
    border-color: #dce8f4;
    box-shadow: 0 12px 28px rgba(33, 53, 84, 0.07);
}

body:has([data-dashboard-live]) .super-dashboard-body .call-metric-card:hover,
body:has([data-dashboard-live]) .super-dashboard-body .call-metric-card:focus-visible,
body:has([data-dashboard-live]) .super-dashboard-body .call-metric-card.active {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(33, 53, 84, 0.12);
}

body:has([data-dashboard-live]) .super-dashboard-body .call-trend-scroll {
    padding: 12px;
    border: 1px solid #dce8f4;
    border-radius: 8px;
    background:
        linear-gradient(180deg, #f8fbff, #ffffff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body:has([data-dashboard-live]) .super-dashboard-body .call-chart-insights {
    gap: 12px;
}

body:has([data-dashboard-live]) .super-dashboard-body .call-chart-insight {
    min-height: 90px;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(33, 53, 84, 0.06);
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-lower {
    gap: 18px;
}

body:has([data-dashboard-live]) .super-dashboard-body .performance-row {
    padding: 12px;
    border: 1px solid #e7eef6;
    border-radius: 8px;
    background: #fbfdff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body:has([data-dashboard-live]) .super-dashboard-body .performance-row:hover {
    border-color: #d6e5f4;
    box-shadow: 0 12px 26px rgba(33, 53, 84, 0.07);
    transform: translateY(-1px);
}

body:has([data-dashboard-live]) .super-dashboard-body .performance-track {
    width: 100%;
    height: 8px;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-side {
    position: sticky;
    top: 84px;
    display: grid;
    gap: 18px;
}

body:has([data-dashboard-live]) .super-dashboard-body .agenda-list {
    padding: 0 16px 16px;
}

body:has([data-dashboard-live]) .super-dashboard-body .agenda-list div,
body:has([data-dashboard-live]) .super-dashboard-body .task-stat {
    border-radius: 8px;
    border-color: #e2ebf5;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    box-shadow: 0 8px 18px rgba(33, 53, 84, 0.04);
}

body:has([data-dashboard-live]) .super-dashboard-body .agenda-list strong {
    font-size: 25px;
    font-weight: var(--font-weight-number);
}

body:has([data-dashboard-live]) .super-dashboard-body .task-dashboard-stats {
    gap: 8px;
    padding: 0 16px 16px;
}

body:has([data-dashboard-live]) .super-dashboard-body .task-stat {
    min-height: 70px;
    align-content: center;
}

body:has([data-dashboard-live]) .super-dashboard-body .task-stat strong {
    font-size: 22px;
}

body:has([data-dashboard-live]) .super-dashboard-body .task-dashboard-heading {
    margin: 0 16px;
    padding-top: 16px;
}

body:has([data-dashboard-live]) .super-dashboard-body .task-dashboard-list {
    padding: 0 16px 14px;
}

body:has([data-dashboard-live]) .super-dashboard-body .task-dashboard-item {
    padding: 12px 2px;
}

body:has([data-dashboard-live]) .super-dashboard-body .activity-feed {
    padding: 4px 16px 16px;
}

body:has([data-dashboard-live]) .super-dashboard-body .activity-item {
    padding: 12px 0;
}

body:has([data-dashboard-live]) .super-dashboard-body .activity-item > span {
    border-radius: 8px;
    background: #edf6ff;
    color: #176bff;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-table {
    margin-top: 18px;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-table table {
    border-collapse: separate;
    border-spacing: 0;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-table tbody tr {
    transition: background 0.16s ease;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-table tbody tr:hover {
    background: #f8fbff;
}

body:has([data-dashboard-live]) .super-dashboard-body .dashboard-table th {
    background: #f3f8ff;
}

body:has([data-dashboard-live]) .super-dashboard-body .fresh-chip {
    color: #0f8d63;
    background: #e9faf2;
}

@media (prefers-reduced-motion: reduce) {
    body:has([data-dashboard-live]) .super-dashboard-body .metric,
    body:has([data-dashboard-live]) .super-dashboard-body .panel,
    body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-summary > div,
    body:has([data-dashboard-live]) .super-dashboard-body .performance-row,
    body:has([data-dashboard-live]) .super-dashboard-body .call-metric-card {
        transition: none;
        transform: none;
    }}

@media (max-width: 1240px) {
    body:has([data-dashboard-live]) .super-dashboard-body .dashboard-grid {
        grid-template-columns: 1fr;
    }

    body:has([data-dashboard-live]) .super-dashboard-body .dashboard-side {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }}

@media (max-width: 1120px) {
    body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row,
    body:has([data-dashboard-live]) .super-dashboard-body .dashboard-main .metric-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }}

@media (max-width: 760px) {
    .super-dashboard-body::before {
        inset-inline: -12px;
        height: 430px;
    }

    .super-dashboard-body .dashboard-welcome-main {
        align-items: center;
    }

    .super-dashboard-body .dashboard-welcome h2 {
        font-size: 24px;
    }

    .super-dashboard-body .dashboard-welcome p {
        font-size: 14px;
    }

    body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row,
    body:has([data-dashboard-live]) .super-dashboard-body .dashboard-main .metric-row,
    body:has([data-dashboard-live]) .super-dashboard-body .dashboard-side {
        grid-template-columns: 1fr;
    }

    body:has([data-dashboard-live]) .super-dashboard-body .dashboard-kpi-card {
        min-height: 118px;
    }

    body:has([data-dashboard-live]) .super-dashboard-body .line-chart {
        min-height: 430px;
        padding-inline: 14px;
    }}

@media (max-width: 1100px) {
    .realtime-kpis,
    .color-legend-grid,
    .drilldown-kpis,
    .metric-row,
    .dashboard-main .metric-row,
    .dashboard-lower,
    .grid.four,
    .grid.three,
    .filters,
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .report-date-field input[type="date"] {
        max-width: none;
    }

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

@media (max-width: 760px) {
    body {
        display: block;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        min-height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        margin-left: 0;
        transform: translateX(-100%);
    }

    body.menu-open .sidebar {
        transform: translateX(0);
    }

    .main {
        margin-left: 0;
        padding: 0 16px 18px;
    }

    body.sidebar-collapsed .main {
        margin-left: 0;
    }

    body.sidebar-collapsed .sidebar {
        margin-left: 0;
        transform: translateX(-100%);
    }

    .topbar {
        flex-wrap: wrap;
        margin: 0 -16px 18px;
        padding: 0 16px;
    }

    .topbar-billing-badge {
        width: auto;
        flex: 0 0 calc(100% - 52px);
        margin-left: 52px;
        justify-content: space-between;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .metric-row,
    .realtime-kpis,
    .color-legend-grid,
    .drilldown-kpis,
    .dashboard-main .metric-row,
    .dashboard-lower,
    .agenda-list,
    .grid.two,
    .grid.three,
    .grid.four,
    .filters,
    .form-grid,
    .form-grid.two {
        grid-template-columns: 1fr;
    }

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

    .report-quick-field .actions {
        flex-wrap: wrap;
    }

    .panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .team-chart-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .team-chart-header {
        align-items: flex-start;
        padding: 14px;
    }

    .team-chart-body {
        padding: 14px;
    }

    .org-company {
        min-width: 720px;
    }

    .timeline-item,
    .chart-bar {
        grid-template-columns: 1fr;
    }

    .dashboard-toolbar {
        align-items: flex-start;
        flex-direction: column;
        margin: -18px -16px 18px;
        padding: 12px 16px;
    }

    .attachment-header,
    .attachment-editor-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .attachment-description {
        grid-column: auto;
        grid-row: auto;
    }

    .attachment-header {
        flex-direction: column;
    }

    .line-chart {
        gap: 8px;
        min-height: auto;
        padding: 14px;
    }

    .call-metric-selector {
        grid-template-columns: 1fr;
    }

    .call-metric-card {
        min-height: 82px;
    }

    .call-chart-zoom-stage {
        min-width: var(--call-chart-min-width, 760px);
    }

    .call-chart-legend {
        margin-left: 0;
        gap: 10px 18px;
    }

    .call-chart-insights {
        grid-template-columns: 1fr;
    }

    .call-chart-insight {
        min-height: 86px;
        padding: 15px;
    }

    .call-chart-insight + .call-chart-insight {
        border-left: 0;
        border-top: 1px solid var(--border);
    }}

/* TDO CRM public landing page */
html.public-page {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html.public-page {
        scroll-behavior: auto;
    }}

body.tdo-home {
    background: #f1f5f9;
    color: var(--text);
}

html.public-page,
body.public-home {
    max-width: 100%;
    overflow-x: hidden;
}

.public-home main [id] {
    scroll-margin-top: 104px;
}

@keyframes tdoLivePulse {
    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(22, 120, 78, 0.14);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(22, 120, 78, 0.06);
    }
}

@keyframes tdoMetricPulse {
    0% {
        transform: translateY(0);
        border-color: var(--border);
    }

    45% {
        transform: translateY(-2px);
        border-color: #bed2e2;
    }

    100% {
        transform: translateY(0);
        border-color: var(--border);
    }
}

@keyframes tdoPreviewRise {
    0% {
        transform: translateY(8px);
        opacity: 0.55;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.tdo-disabled-button,
.tdo-disabled-button:hover {
    border-color: #d7dde6;
    background: #eef2f6;
    color: #667085;
    cursor: default;
}

@media (max-width: 760px) {
    .public-home main [id] {
        scroll-margin-top: 156px;
    }}

@media (max-width: 760px) {
    body.tdo-home {
        font-size: 14px;
    }

    .attachment-preview-grid {
        min-width: 220px;
        grid-template-columns: 1fr;
    }

    .content-preview-modal {
        padding: 12px;
    }

    .content-preview-dialog {
        max-height: calc(100vh - 24px);
    }

    .content-preview-head {
        padding: 14px;
    }

    .content-preview-frame iframe {
        min-height: 320px;
    }}

@media (max-width: 560px) {
    .public-home main [id] {
        scroll-margin-top: 220px;
    }}

@media (max-width: 480px) {
    .public-home main [id] {
        scroll-margin-top: 220px;
    }

    .upload-preview-media {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .upload-preview-media img,
    .upload-preview-media video,
    .upload-preview-file {
        width: 82px;
        height: 72px;
    }

    .attachment-preview-card {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .attachment-preview-thumb {
        width: 74px;
        height: 74px;
    }

    .content-preview-head {
        flex-direction: column;
    }

    .content-preview-head .icon-button {
        position: absolute;
        top: 10px;
        right: 10px;
    }}

/* Premium enterprise duplicate lead dashboard */
.duplicate-dashboard {
    --dup-blue:#0f6fff;
    --dup-cyan:#52b6ff;
    --dup-navy:#0b1730;
    --dup-ink:#101f3d;
    --dup-muted:#607491;
    --dup-border:#dbe7f7;
    --dup-glass:rgba(255,255,255,.76);
    --dup-shadow:0 22px 56px rgba(24,48,88,.12);
    --dup-shadow-soft:0 12px 32px rgba(24,48,88,.08);
    position:relative;
    padding:24px clamp(14px,2vw,28px) 34px;
    border-radius:28px;
    color:var(--dup-ink);
    background:
        radial-gradient(circle at 10% 0%, rgba(18,107,255,.16), transparent 34%),
        radial-gradient(circle at 94% 8%, rgba(42,207,157,.13), transparent 32%),
        linear-gradient(135deg,#f8fbff,#eef5ff 50%,#fbfdff);
    overflow:hidden;
}
.duplicate-dashboard::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.34) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.32) 1px, transparent 1px);
    background-size:46px 46px;
    mask-image:linear-gradient(to bottom,#000 0%,transparent 62%);
}
.duplicate-dashboard > * { position:relative; z-index:1; }
.duplicate-hero {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:20px;
}
.duplicate-hero-title { display:flex; align-items:center; gap:16px; min-width:0; }
.duplicate-hero-icon {
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:20px;
    color:#0f6fff;
    background:linear-gradient(145deg,#e8f2ff,#fff);
    box-shadow:10px 10px 24px rgba(31,74,130,.13), -10px -10px 24px rgba(255,255,255,.92);
}
.duplicate-hero-icon svg { width:30px; height:30px; }
.duplicate-hero h2 { margin:0; color:#0a1833; font-size:clamp(28px,3vw,38px); line-height:1; letter-spacing:-.04em; }
.duplicate-hero p { margin:7px 0 0; color:#58708f; font-size:15px; max-width:720px; }
.duplicate-hero-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.duplicate-subscription {
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:44px;
    padding:0 18px;
    border-radius:999px;
    color:#07824d;
    font-weight: var(--font-weight-control);
    background:linear-gradient(135deg,rgba(224,255,239,.92),rgba(246,255,251,.78));
    border:1px solid rgba(83,215,151,.42);
    box-shadow:0 14px 34px rgba(29,168,99,.14), inset 0 1px rgba(255,255,255,.86);
}
.duplicate-help-action { background:#fff; font-weight: var(--font-weight-control); }
.duplicate-intro-card, .duplicate-whitelist-card, .duplicate-list-card, .duplicate-match-card {
    border:1px solid rgba(213,226,244,.9);
    border-radius:24px;
    background:var(--dup-glass);
    box-shadow:var(--dup-shadow-soft), inset 0 1px rgba(255,255,255,.86);
    backdrop-filter:blur(18px);
}
.duplicate-intro-card {
    min-height:108px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:20px 24px;
    margin-bottom:20px;
    overflow:hidden;
}
.duplicate-intro-card::after {
    content:"";
    position:absolute;
    inset:-80px 22% auto auto;
    width:360px;
    height:190px;
    border-radius:50%;
    background:rgba(79,159,255,.13);
    filter:blur(1px);
}
.duplicate-intro-card > * { position:relative; z-index:1; }
.duplicate-intro-icon {
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    border-radius:20px;
    color:#0f6fff;
    background:linear-gradient(145deg,#e8f2ff,#ffffff);
}
.duplicate-intro-icon svg { width:32px; height:32px; }
.duplicate-intro-card h3, .duplicate-whitelist-card h3, .duplicate-list-header h3, .duplicate-match-header h3 { margin:0; color:#10213e; letter-spacing:-.025em; }
.duplicate-intro-card p, .duplicate-whitelist-card p, .duplicate-list-header p, .duplicate-match-header p { margin:5px 0 0; color:#607491; }
.duplicate-intro-card strong { margin-left:auto; color:#075df2; font-size:17px; text-align:right; }
.duplicate-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(170px,1fr)); gap:18px; margin-bottom:20px; }
.duplicate-kpi-card {
    position:relative;
    min-height:112px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:20px;
    border:1px solid rgba(213,226,244,.92);
    border-radius:22px;
    background:rgba(255,255,255,.78);
    box-shadow:var(--dup-shadow-soft), inset 0 1px rgba(255,255,255,.88);
    overflow:hidden;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.duplicate-kpi-card::after {
    content:"";
    position:absolute;
    inset:auto -20% -48% 35%;
    height:100px;
    border-radius:999px;
    background:var(--dup-glow,rgba(15,111,255,.16));
    filter:blur(24px);
}
.duplicate-kpi-card:hover, .duplicate-kpi-card.is-active { transform:translateY(-4px); box-shadow:0 26px 60px rgba(22,47,91,.15); border-color:#bdd5f7; }
.duplicate-kpi-card > span {
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:18px;
    color:var(--dup-tone,#0f6fff);
    background:linear-gradient(145deg,#fff,var(--dup-bg,#e8f2ff));
    box-shadow:0 12px 24px rgba(28,57,102,.11), inset 0 1px rgba(255,255,255,.9);
}
.duplicate-kpi-card svg { width:28px; height:28px; }
.duplicate-kpi-card small { display:block; color:var(--dup-tone,#4776bd); font-size:13px; font-weight: var(--font-weight-regular); }
.duplicate-kpi-card strong { display:block; margin:5px 0 3px; color:#0d1c39; font-size:32px; line-height:1; letter-spacing:-.04em; font-weight: var(--font-weight-number); }
.duplicate-kpi-card em { color:#607491; font-size:12px; font-style:normal; }
.duplicate-kpi-active { --dup-tone:#0f6fff; --dup-bg:#e8f2ff; --dup-glow:rgba(15,111,255,.16); }
.duplicate-kpi-review { --dup-tone:#f59e0b; --dup-bg:#fff2d3; --dup-glow:rgba(245,158,11,.16); }
.duplicate-kpi-archive { --dup-tone:#8b5cf6; --dup-bg:#f0e9ff; --dup-glow:rgba(139,92,246,.16); }
.duplicate-kpi-whitelist { --dup-tone:#0caf63; --dup-bg:#ddfaeb; --dup-glow:rgba(12,175,99,.16); }
.duplicate-whitelist-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:20px 24px;
    margin-bottom:22px;
}
.duplicate-card-heading { display:flex; align-items:center; gap:14px; }
.duplicate-card-heading > span {
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:15px;
    color:#0f6fff;
    background:#e8f2ff;
}
.duplicate-card-heading svg { width:22px; height:22px; }
.duplicate-whitelist-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.duplicate-empty-inline { flex-basis:100%; display:flex; align-items:center; gap:8px; margin:0; color:#7a8aa3; font-size:13px; }
.duplicate-list-card { margin:0 0 22px; overflow:hidden; }
.duplicate-list-header, .duplicate-match-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 24px;
}
.duplicate-match-card { margin-top:18px; overflow:hidden; }
.duplicate-match-header { border-bottom:1px solid rgba(218,229,244,.78); }
.duplicate-match-header > div:first-child { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:14px; min-width:0; }
.duplicate-phone-icon {
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:#0f6fff;
    background:#e8f2ff;
}
.duplicate-decision-line { grid-column:2; margin-top:8px; }
.duplicate-resolution > summary { min-height:42px; border-radius:14px; font-weight: var(--font-weight-control); }
.duplicate-resolution[open] > summary { margin-bottom:12px; }
.duplicate-resolution-form {
    position:absolute;
    right:24px;
    z-index:10;
    width:min(560px, calc(100vw - 48px));
    padding:18px;
    border:1px solid #d6e4f5;
    border-radius:20px;
    background:rgba(255,255,255,.96);
    box-shadow:0 26px 72px rgba(16,38,75,.2);
    backdrop-filter:blur(18px);
}
.duplicate-action-option { border-radius:16px; background:#f7faff; }
.duplicate-action-option:has(input:checked) { border-color:#9dc4ff; background:#eef6ff; box-shadow:0 10px 24px rgba(15,111,255,.1); }
.duplicate-lead-table, .duplicate-dial-table { margin:0 16px 16px; border:1px solid #e2ebf7; border-radius:18px; overflow:hidden; background:#fff; }
.duplicate-dashboard table { border-collapse:separate; border-spacing:0; }
.duplicate-dashboard thead th {
    background:linear-gradient(180deg,#f8fbff,#eef5ff);
    color:#607491;
    font-size:12px;
    letter-spacing:.035em;
    text-transform:uppercase;
    border-bottom:1px solid #e2ebf7;
}
.duplicate-dashboard tbody td { padding:16px 18px; border-bottom:1px solid #edf2f9; vertical-align:middle; }
.duplicate-dashboard tbody tr { transition:background-color .18s ease, transform .18s ease; }
.duplicate-dashboard tbody tr:hover { background:#f8fbff; }
.duplicate-table-shell { padding-bottom:16px; }
.duplicate-table-title {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:16px 24px 10px;
    color:#607491;
    font-size:13px;
}
.duplicate-table-title span { color:#10213e; font-weight: var(--font-weight-regular); }
.duplicate-table-title em { font-style:normal; }
.duplicate-user-cell { display:flex; align-items:flex-start; gap:12px; min-width:260px; }
.duplicate-avatar {
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    font-weight: var(--font-weight-control);
    background:linear-gradient(135deg,#6fb6ff,#173a92);
    box-shadow:0 10px 20px rgba(31,81,150,.17);
}
.duplicate-user-cell strong { display:block; color:#10213e; margin-bottom:3px; }
.duplicate-user-cell span, .duplicate-user-cell small { display:block; color:#607491; line-height:1.45; }
.duplicate-lead-pill { display:inline-flex; align-items:center; gap:5px; padding:7px 10px; border-radius:999px; background:#f2f7ff; color:#315a97; }
.duplicate-attempts {
    display:inline-grid;
    place-items:center;
    min-width:34px;
    height:30px;
    padding:0 10px;
    border-radius:999px;
    color:#10213e;
    background:#eef4ff;
    font-weight: var(--font-weight-number);
}
.duplicate-status-badge {
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 11px;
    border-radius:999px;
    font-size:12px;
    font-weight: var(--font-weight-critical);
    white-space:nowrap;
}
.duplicate-status-no-answer { color:#e11d48; background:#ffe4eb; }
.duplicate-status-answered { color:#07824d; background:#dcfce9; }
.duplicate-status-busy { color:#bf7200; background:#fff1d6; }
.duplicate-status-unknown { color:#607491; background:#eef4fb; }
.duplicate-row-actions { display:flex; align-items:center; gap:8px; }
.duplicate-row-actions .icon-button, .duplicate-pagination .icon-button {
    width:38px;
    min-height:38px;
    border-radius:12px;
    color:#0f6fff;
    background:#edf6ff;
    border-color:#d7e9ff;
}
.duplicate-pagination {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:0 24px;
    color:#607491;
    font-size:13px;
}
.duplicate-pagination > span:last-child { display:flex; align-items:center; gap:8px; }
.duplicate-pagination strong { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#fff; background:#0f6fff; box-shadow:0 12px 24px rgba(15,111,255,.24); }
.duplicate-empty-state {
    display:grid;
    place-items:center;
    gap:10px;
    padding:44px 20px;
    text-align:center;
    color:#607491;
}
.duplicate-empty-state svg { width:36px; height:36px; color:#0f6fff; }
.duplicate-empty-state h3 { margin:0; color:#10213e; }
.duplicate-empty-state p { margin:0; }
.duplicate-hero, .duplicate-intro-card, .duplicate-kpi-card, .duplicate-whitelist-card, .duplicate-list-card, .duplicate-match-card { animation:duplicate-rise .34s ease both; }
.duplicate-kpi-card:nth-child(2) { animation-delay:.04s; }
.duplicate-kpi-card:nth-child(3) { animation-delay:.08s; }
.duplicate-kpi-card:nth-child(4) { animation-delay:.12s; }
@keyframes duplicate-rise { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(prefers-reduced-motion:reduce) { .duplicate-dashboard * { animation:none !important; transition:none !important; }}
@media(max-width:1100px) { .duplicate-kpi-grid { grid-template-columns:repeat(2,minmax(180px,1fr)); }}
@media(max-width:760px) {
    .duplicate-dashboard { padding:18px 12px 26px; border-radius:18px; }
    .duplicate-hero, .duplicate-intro-card, .duplicate-whitelist-card, .duplicate-list-header, .duplicate-match-header { align-items:flex-start; flex-direction:column; }
    .duplicate-kpi-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
    .duplicate-intro-card strong { margin-left:0; text-align:left; }
    .duplicate-resolution-form { position:static; width:100%; margin-top:12px; }
    .duplicate-match-header > div:first-child { grid-template-columns:40px minmax(0,1fr); }
    .duplicate-lead-table, .duplicate-dial-table { margin-inline:10px; overflow:auto; }
    .duplicate-table-title, .duplicate-pagination { align-items:flex-start; flex-direction:column; padding-inline:16px; }}

.duplicate-intro-card, .duplicate-whitelist-card, .duplicate-list-card, .duplicate-match-card, .duplicate-resolution { position:relative; }

/* Enterprise duplicate lead management refinement */
.duplicate-dashboard {
    --dup-blue:#176bff;
    --dup-navy:#172033;
    --dup-ink:#172033;
    --dup-muted:#667085;
    --dup-border:#e4e7ec;
    --dup-panel:#ffffff;
    --dup-subtle:#f8fafc;
    --dup-shadow:0 1px 2px rgba(16,24,40,.05),0 12px 28px rgba(16,24,40,.06);
    --dup-shadow-soft:0 1px 2px rgba(16,24,40,.05);
    padding:22px clamp(14px,2vw,28px) 32px;
    border:1px solid #edf1f7;
    border-radius:22px;
    background:#f6f8fb;
    color:var(--dup-ink);
    overflow:visible;
}
.duplicate-dashboard::before { display:none; }
.duplicate-dashboard a { text-decoration:none; }
.duplicate-hero {
    margin-bottom:16px;
    padding:4px 2px;
}
.duplicate-hero-title { gap:12px; }
.duplicate-hero-icon,
.duplicate-intro-icon,
.duplicate-card-heading > span,
.duplicate-phone-icon {
    background:#eff6ff;
    color:#175cd3;
    box-shadow:none;
}
.duplicate-hero-icon { width:46px; height:46px; border-radius:14px; }
.duplicate-hero-icon svg { width:24px; height:24px; }
.duplicate-hero h2 { color:#101828; font-size:clamp(24px,2.2vw,32px); letter-spacing:-.025em; }
.duplicate-hero p { margin-top:6px; color:#667085; font-size:14px; line-height:1.55; max-width:760px; }
.duplicate-subscription {
    min-height:38px;
    padding:0 14px;
    color:#067647;
    background:#ecfdf3;
    border:1px solid #abefc6;
    box-shadow:none;
    font-size:13px;
}
.duplicate-help-action,
.duplicate-whitelist-actions .button:not(.primary) {
    background:#fff;
    border-color:#d0d5dd;
    color:#344054;
    box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.duplicate-intro-card,
.duplicate-whitelist-card,
.duplicate-list-card,
.duplicate-match-card,
.duplicate-kpi-card {
    background:var(--dup-panel);
    border:1px solid var(--dup-border);
    box-shadow:var(--dup-shadow-soft);
    backdrop-filter:none;
}
.duplicate-intro-card {
    min-height:auto;
    gap:14px;
    padding:16px 18px;
    margin-bottom:16px;
    overflow:visible;
}
.duplicate-intro-card::after { display:none; }
.duplicate-intro-icon { width:46px; height:46px; border-radius:14px; }
.duplicate-intro-icon svg { width:24px; height:24px; }
.duplicate-intro-card h3,
.duplicate-whitelist-card h3,
.duplicate-list-header h3,
.duplicate-match-header h3 { color:#101828; font-size:18px; letter-spacing:-.015em; }
.duplicate-intro-card p,
.duplicate-whitelist-card p,
.duplicate-list-header p,
.duplicate-match-header p { color:#667085; font-size:13px; line-height:1.45; }
.duplicate-intro-card strong { color:#175cd3; font-size:14px; font-weight: var(--font-weight-control); }
.duplicate-kpi-grid { gap:14px; margin-bottom:16px; }
.duplicate-kpi-card {
    min-height:92px;
    gap:13px;
    padding:16px;
    border-radius:16px;
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.duplicate-kpi-card::after { display:none; }
.duplicate-kpi-card:hover,
.duplicate-kpi-card.is-active {
    transform:translateY(-2px);
    background:#fbfdff;
    border-color:#b2ccff;
    box-shadow:0 10px 24px rgba(16,24,40,.08);
}
.duplicate-kpi-card > span {
    width:44px;
    height:44px;
    border-radius:12px;
    background:#f2f4f7;
    box-shadow:none;
}
.duplicate-kpi-active > span { background:#eff6ff; color:#175cd3; }
.duplicate-kpi-review > span { background:#fffaeb; color:#dc6803; }
.duplicate-kpi-archive > span { background:#f4f3ff; color:#6941c6; }
.duplicate-kpi-whitelist > span { background:#ecfdf3; color:#079455; }
.duplicate-kpi-card svg { width:22px; height:22px; }
.duplicate-kpi-card small { color:#667085; font-size:12px; font-weight: var(--font-weight-regular); }
.duplicate-kpi-card strong { margin:4px 0 2px; color:#101828; font-size:26px; letter-spacing:-.03em; }
.duplicate-kpi-card em { color:#667085; font-size:12px; }
.duplicate-whitelist-card,
.duplicate-list-header,
.duplicate-match-header { padding:16px 18px; }
.duplicate-whitelist-card { margin-bottom:16px; border-radius:16px; }
.duplicate-card-heading > span,
.duplicate-phone-icon { width:38px; height:38px; border-radius:12px; }
.duplicate-card-heading svg,
.duplicate-phone-icon svg { width:19px; height:19px; }
.duplicate-empty-inline { color:#667085; font-size:13px; }
.duplicate-list-card,
.duplicate-match-card { border-radius:18px; overflow:visible; }
.duplicate-match-card { margin-top:14px; }
.duplicate-match-header {
    border-bottom:1px solid #eaecf0;
    background:#fff;
    border-radius:18px 18px 0 0;
    flex-wrap:wrap;
}
.duplicate-match-header > div:first-child { grid-template-columns:38px minmax(0,1fr); gap:12px; }
.duplicate-decision-line { margin-top:7px; }
.duplicate-resolution > summary { min-height:38px; border-radius:10px; font-weight: var(--font-weight-control); }
.duplicate-resolution-form {
    border-color:#d0d5dd;
    border-radius:16px;
    background:#fff;
    box-shadow:0 18px 42px rgba(16,24,40,.14);
    backdrop-filter:none;
}
.duplicate-action-option { border-radius:12px; background:#fff; border-color:#d0d5dd; }
.duplicate-action-option:has(input:checked) { border-color:#84adff; background:#eff6ff; box-shadow:none; }
.duplicate-lead-table,
.duplicate-dial-table {
    margin:0 14px 14px;
    border:1px solid #eaecf0;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
}
.duplicate-dashboard table {
    width:100%;
    border-collapse:separate;
    border-spacing:0;
}
.duplicate-dashboard thead th {
    padding:11px 14px;
    background:#f9fafb;
    color:#667085;
    font-size:11px;
    line-height:1.2;
    letter-spacing:.04em;
    text-transform:uppercase;
    border-bottom:1px solid #eaecf0;
    white-space:nowrap;
}
.duplicate-dashboard tbody td {
    padding:13px 14px;
    border-bottom:1px solid #f2f4f7;
    vertical-align:middle;
    color:#344054;
    font-size:14px;
}
.duplicate-dashboard tbody tr:last-child td { border-bottom:0; }
.duplicate-dashboard tbody tr { transition:background-color .16s ease, box-shadow .16s ease; }
.duplicate-dashboard tbody tr:hover { background:#fcfcfd; box-shadow:inset 3px 0 #2e90fa; }
.duplicate-table-shell { padding-bottom:14px; }
.duplicate-table-title {
    padding:14px 18px 10px;
    color:#667085;
    font-size:13px;
}
.duplicate-table-title span { color:#101828; font-weight: var(--font-weight-regular); }
.duplicate-user-cell { align-items:center; gap:11px; min-width:220px; }
.duplicate-avatar {
    width:36px;
    height:36px;
    flex-basis:36px;
    color:#175cd3;
    background:#eff6ff;
    border:1px solid #d1e9ff;
    box-shadow:none;
    font-size:13px;
}
.duplicate-user-cell strong { color:#101828; margin-bottom:2px; font-weight: var(--font-weight-regular); }
.duplicate-user-cell span,
.duplicate-user-cell small { color:#667085; line-height:1.35; font-size:12px; }
.duplicate-lead-pill { background:#f9fafb; color:#344054; border:1px solid #eaecf0; }
.duplicate-attempts {
    min-width:32px;
    height:28px;
    background:#f2f4f7;
    color:#101828;
    font-weight: var(--font-weight-number);
}
.duplicate-status-badge {
    min-height:26px;
    padding:0 10px;
    border-radius:999px;
    font-size:12px;
    font-weight: var(--font-weight-critical);
}
.duplicate-status-no-answer { color:#c01048; background:#fff1f3; border:1px solid #fecdd6; }
.duplicate-status-answered { color:#067647; background:#ecfdf3; border:1px solid #abefc6; }
.duplicate-status-busy { color:#b54708; background:#fffaeb; border:1px solid #fedf89; }
.duplicate-status-unknown { color:#475467; background:#f2f4f7; border:1px solid #eaecf0; }
.duplicate-row-actions { gap:7px; justify-content:flex-end; }
.duplicate-row-actions .icon-button,
.duplicate-pagination .icon-button {
    width:34px;
    min-height:34px;
    border-radius:10px;
    color:#175cd3;
    background:#fff;
    border:1px solid #d0d5dd;
    transition:background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.duplicate-row-actions .icon-button:hover {
    transform:translateY(-1px);
    color:#fff;
    background:#175cd3;
    border-color:#175cd3;
}
.duplicate-pagination {
    padding:0 18px;
    color:#667085;
}
.duplicate-pagination strong {
    width:34px;
    height:34px;
    border-radius:10px;
    background:#175cd3;
    box-shadow:none;
}
.duplicate-empty-state { padding:36px 18px; color:#667085; }
.duplicate-empty-state svg { color:#175cd3; }
.duplicate-empty-state h3 { color:#101828; }
.duplicate-hero,
.duplicate-intro-card,
.duplicate-kpi-card,
.duplicate-whitelist-card,
.duplicate-list-card,
.duplicate-match-card { animation:duplicate-rise .24s ease both; }
@keyframes duplicate-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:760px) {
    .duplicate-dashboard { border-radius:16px; padding:16px 10px 24px; }
    .duplicate-lead-table,
    .duplicate-dial-table { margin-inline:8px; }
    .duplicate-dashboard thead th,
    .duplicate-dashboard tbody td { padding-inline:12px; }
    .duplicate-user-cell { min-width:190px; }}

/* Duplicate resolution popup polish: Alert / Archive / Whitelist */
.duplicate-resolution {
    position:relative;
    isolation:isolate;
}
.duplicate-resolution[open] {
    flex:1 1 100%;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}
.duplicate-resolution > summary {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:164px;
    min-height:40px;
    padding:0 16px;
    border-radius:999px;
    background:#146c94;
    border:1px solid #146c94;
    color:#fff;
    font-weight: var(--font-weight-control);
    letter-spacing:-.01em;
    box-shadow:0 8px 18px rgba(20,108,148,.18);
    cursor:pointer;
    transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.duplicate-resolution > summary:hover {
    background:#105e82;
    border-color:#105e82;
    box-shadow:0 10px 24px rgba(20,108,148,.22);
    transform:translateY(-1px);
}
.duplicate-resolution[open] > summary {
    background:#0f5c7f;
    border-color:#0f5c7f;
    box-shadow:0 10px 24px rgba(20,108,148,.24);
    align-self:flex-end;
}
.duplicate-resolution[open] > summary::after {
    display:none;
}
.duplicate-resolution-form {
    position:static;
    right:0;
    top:calc(100% + 14px);
    width:100%;
    max-width:100%;
    margin-top:14px;
    padding:18px;
    border:1px solid #d9e3ef;
    border-radius:18px;
    background:linear-gradient(180deg,#fff,#fbfdff);
    box-shadow:0 14px 32px rgba(15,23,42,.10);
    backdrop-filter:none;
    animation:duplicate-popover-in .16s ease-out both;
}
.duplicate-resolution-form::before {
    content:"Duplicate decision";
    display:block;
    margin:0 0 12px;
    color:#101828;
    font-size:15px;
    font-weight: var(--font-weight-heading);
    letter-spacing:-.015em;
}
.duplicate-action-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:0 0 14px;
}
.duplicate-action-option {
    position:relative;
    min-height:96px;
    padding:14px 14px 12px 42px;
    border:1px solid #d0d5dd;
    border-radius:14px;
    background:#fff;
    cursor:pointer;
    transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.duplicate-action-option:hover {
    transform:translateY(-1px);
    border-color:#98a2b3;
    box-shadow:0 8px 18px rgba(16,24,40,.08);
}
.duplicate-action-option input {
    position:absolute;
    top:16px;
    left:14px;
    width:16px;
    height:16px;
    accent-color:#146c94;
}
.duplicate-action-option strong {
    display:block;
    margin:0 0 5px;
    color:#344054;
    font-size:14px;
    line-height:1.2;
    font-weight: var(--font-weight-regular);
}
.duplicate-action-option small {
    display:block;
    color:#667085;
    font-size:12px;
    line-height:1.35;
}
.duplicate-action-option:has(input[value="alert"]) { border-left:3px solid #f79009; }
.duplicate-action-option:has(input[value="archive"]) { border-left:3px solid #2e90fa; }
.duplicate-action-option:has(input[value="whitelist"]) { border-left:3px solid #12b76a; }
.duplicate-action-option:has(input:checked) {
    background:#f8fbff;
    border-color:#84adff;
    box-shadow:0 0 0 3px rgba(46,144,250,.12);
}
.duplicate-action-option:has(input:checked) strong { color:#175cd3; }
.duplicate-resolution-fields {
    display:grid;
    grid-template-columns:minmax(190px,.9fr) minmax(260px,1.1fr);
    gap:12px;
    align-items:start;
    padding-top:2px;
}
.duplicate-resolution-fields label {
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
}
.duplicate-resolution-fields label > span {
    color:#475467;
    font-size:12px;
    font-weight: var(--font-weight-regular);
}
.duplicate-resolution-fields select,
.duplicate-resolution-fields textarea {
    width:100%;
    border:1px solid #d0d5dd;
    border-radius:10px;
    background:#fff;
    color:#101828;
    font-size:13px;
    line-height:1.45;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
    transition:border-color .16s ease, box-shadow .16s ease;
}
.duplicate-resolution-fields select {
    height:42px;
    padding:0 38px 0 12px;
}
.duplicate-resolution-fields textarea {
    min-height:78px;
    padding:11px 12px;
    resize:vertical;
}
.duplicate-resolution-fields select:focus,
.duplicate-resolution-fields textarea:focus {
    outline:none;
    border-color:#84adff;
    box-shadow:0 0 0 3px rgba(46,144,250,.13);
}
.duplicate-resolution-footer {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid #eef2f6;
}
.duplicate-resolution-footer .button {
    min-height:38px;
    padding:0 16px;
    border-radius:10px;
    background:#146c94;
    border-color:#146c94;
    font-weight: var(--font-weight-control);
    box-shadow:0 8px 18px rgba(20,108,148,.16);
}
.duplicate-resolution-footer .button:hover {
    background:#105e82;
    border-color:#105e82;
}
@keyframes duplicate-popover-in {
    from { opacity:0; transform:translateY(-6px) scale(.985); }
    to { opacity:1; transform:translateY(0) scale(1); }
}
@media(max-width:900px) {
    .duplicate-resolution-form {
        width:100%;
    }}
@media(max-width:760px) {
    .duplicate-resolution {
        width:100%;
    }
    .duplicate-resolution > summary {
        width:100%;
    }
    .duplicate-resolution[open] > summary::after {
        display:none;
    }
    .duplicate-resolution-form {
        position:static;
        width:100%;
        margin-top:12px;
        padding:14px;
        box-shadow:0 12px 28px rgba(15,23,42,.12);
    }
    .duplicate-action-grid,
    .duplicate-resolution-fields {
        grid-template-columns:1fr;
    }
    .duplicate-action-option {
        min-height:auto;
    }
    .duplicate-resolution-footer .button {
        width:100%;
    }}
@media(prefers-reduced-motion:reduce) {
    .duplicate-resolution-form,
    .duplicate-action-option,
    .duplicate-resolution > summary {
        animation:none !important;
        transition:none !important;
    }}

/* Production CRM dashboard refinement: flat, lightweight SaaS presentation. */
body:has([data-dashboard-live]) {
    --dashboard-bg:#f5f7fb;
    --dashboard-card:#ffffff;
    --dashboard-line:#e3e8ef;
    --dashboard-ink:#111827;
    --dashboard-muted:#667085;
    --dashboard-blue:#155eef;
    --dashboard-soft-blue:#eff6ff;
    --dashboard-success:#067647;
    --dashboard-warning:#b54708;
    --dashboard-danger:#b42318;
    background:var(--dashboard-bg);
}
body:has([data-dashboard-live]) .main { background:var(--dashboard-bg); }
body:has([data-dashboard-live]) .content { padding-top:0; }
body:has([data-dashboard-live]) :is(.button,.icon-button,.metric,.panel,.call-metric-card,.task-dashboard-item,.activity-item,.performance-row,.ds-summary > div) {
    transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
body:has([data-dashboard-live]) .topbar {
    min-height:64px;
    margin-bottom:18px;
    border-bottom:1px solid var(--dashboard-line);
    background:rgba(255,255,255,.98);
    box-shadow:none;
    backdrop-filter:none;
}
body:has([data-dashboard-live]) .topbar h1 { font-size:19px; font-weight: var(--font-weight-title); letter-spacing:-.015em; }
body:has([data-dashboard-live]) .topbar p { color:var(--dashboard-muted); }
.super-dashboard-body {
    max-width:1680px;
    margin:0 auto;
}
.dashboard-welcome {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:18px;
    margin:0 0 14px;
    padding:4px 0 2px;
    background:transparent;
    animation:none;
}
.dashboard-welcome-main { gap:12px; }
.dashboard-welcome-icon {
    width:42px;
    height:42px;
    border:1px solid #fedf89;
    border-radius:10px;
    color:#dc6803;
    background:#fffaeb;
}
.dashboard-welcome-icon svg { width:20px; height:20px; }
.dashboard-eyebrow {
    margin-bottom:4px;
    color:#475467;
    font-size:11px;
    font-weight: var(--font-weight-regular);
    letter-spacing:.08em;
}
.dashboard-welcome h2 {
    font-size:28px;
    line-height:1.15;
    font-weight: var(--font-weight-title);
    letter-spacing:-.035em;
    color:var(--dashboard-ink);
}
.dashboard-welcome p { margin-top:6px; color:var(--dashboard-muted); font-size:14px; }
.dashboard-welcome-note { gap:8px; color:var(--dashboard-muted); }
.dashboard-welcome-note span {
    min-height:36px;
    border:1px solid var(--dashboard-line);
    border-radius:8px;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
    color:#344054;
    font-weight: var(--font-weight-regular);
}
.dashboard-welcome-note p { margin:0; font-size:13px; font-style:italic; }
.dashboard-welcome-note small { color:#475467; font-weight: var(--font-weight-regular); }
body:has([data-dashboard-live]) .dashboard-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 16px;
    padding:0;
    background:transparent;
}
body:has([data-dashboard-live]) .toolbar-left,
body:has([data-dashboard-live]) .toolbar-right { gap:8px; }
body:has([data-dashboard-live]) .button,
body:has([data-dashboard-live]) button.button,
body:has([data-dashboard-live]) .icon-button {
    min-height:38px;
    border:1px solid #d0d5dd;
    border-radius:8px;
    color:#344054;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
    font-weight: var(--font-weight-control);
}
body:has([data-dashboard-live]) .button:hover,
body:has([data-dashboard-live]) .icon-button:hover {
    transform:translateY(-1px);
    border-color:#98a2b3;
    background:#f9fafb;
    box-shadow:0 6px 14px rgba(16,24,40,.07);
}
body:has([data-dashboard-live]) .button.primary {
    border-color:var(--dashboard-blue);
    background:var(--dashboard-blue);
    color:#fff;
    box-shadow:0 1px 2px rgba(21,94,239,.18);
}
body:has([data-dashboard-live]) .button.primary:hover { background:#004eeb; border-color:#004eeb; }
body:has([data-dashboard-live]) .fresh-chip {
    min-height:34px;
    padding:0 12px;
    border:1px solid #abefc6;
    border-radius:999px;
    color:#067647;
    background:#ecfdf3;
    box-shadow:none;
    font-weight: var(--font-weight-control);
}
body:has([data-dashboard-live]) .dashboard-billing-row,
body:has([data-dashboard-live]) .metric-row {
    gap:12px;
}
body:has([data-dashboard-live]) .metric,
body:has([data-dashboard-live]) .ds-dashboard .ds-summary > div,
body:has([data-dashboard-live]) .panel {
    border:1px solid var(--dashboard-line);
    border-radius:10px;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
    animation:none;
}
body:has([data-dashboard-live]) .metric {
    min-height:104px;
    padding:16px;
    overflow:hidden;
}
body:has([data-dashboard-live]) .metric:hover,
body:has([data-dashboard-live]) .ds-dashboard .ds-summary > div:hover,
body:has([data-dashboard-live]) .panel:hover {
    border-color:#cbd5e1;
    box-shadow:0 8px 18px rgba(16,24,40,.06);
}
body:has([data-dashboard-live]) .metric::before,
body:has([data-dashboard-live]) .metric::after,
body:has([data-dashboard-live]) .dashboard-kpi-card::before,
body:has([data-dashboard-live]) .dashboard-kpi-card::after { content:none !important; display:none !important; }
body:has([data-dashboard-live]) .metric-icon,
body:has([data-dashboard-live]) .ds-dashboard .ds-metric-icon,
body:has([data-dashboard-live]) .activity-item > span,
body:has([data-dashboard-live]) .call-metric-icon {
    border-radius:9px;
    box-shadow:none;
}
body:has([data-dashboard-live]) .metric-icon { width:38px; height:38px; background:#eff6ff; color:var(--dashboard-blue); }
body:has([data-dashboard-live]) .metric-icon.is-leads { color:#079455; background:#ecfdf3; }
body:has([data-dashboard-live]) .metric-icon.is-connect { color:#155eef; background:#eff6ff; }
body:has([data-dashboard-live]) .metric-icon.is-time { color:#026aa2; background:#f0f9ff; }
body:has([data-dashboard-live]) .metric-icon.is-team { color:#6941c6; background:#f4f3ff; }
body:has([data-dashboard-live]) .metric-top span,
body:has([data-dashboard-live]) .metric small,
body:has([data-dashboard-live]) .ds-dashboard .ds-summary span { color:var(--dashboard-muted); font-weight: var(--font-weight-regular); }
body:has([data-dashboard-live]) .metric strong,
body:has([data-dashboard-live]) .ds-dashboard .ds-summary strong {
    color:var(--dashboard-ink);
    font-size:24px;
    font-weight: var(--font-weight-number);
    letter-spacing:-.025em;
}
body:has([data-dashboard-live]) .dashboard-billing-row .metric strong { font-size:22px; }
body:has([data-dashboard-live]) .trend {
    border-radius:999px;
    box-shadow:none;
    font-size:11px;
    font-weight: var(--font-weight-control);
}
body:has([data-dashboard-live]) .ds-dashboard {
    margin:16px 0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    animation:none;
}
body:has([data-dashboard-live]) .ds-dashboard .ds-toolbar { margin-bottom:10px; }
body:has([data-dashboard-live]) .ds-dashboard .ds-toolbar h2 { color:var(--dashboard-ink); font-size:16px; font-weight: var(--font-weight-heading); }
body:has([data-dashboard-live]) .ds-dashboard .ds-toolbar .muted { color:var(--dashboard-muted); }
body:has([data-dashboard-live]) .ds-dashboard .ds-summary { gap:12px; margin-top:12px; }
body:has([data-dashboard-live]) .ds-dashboard .ds-summary > div { min-height:96px; padding:16px; }
body:has([data-dashboard-live]) .dashboard-grid {
    grid-template-columns:minmax(0,1fr) 320px;
    gap:16px;
}
body:has([data-dashboard-live]) .dashboard-main,
body:has([data-dashboard-live]) .dashboard-side { gap:16px; }
body:has([data-dashboard-live]) .panel-header {
    min-height:58px;
    padding:15px 16px;
    border-bottom:1px solid var(--dashboard-line);
}
body:has([data-dashboard-live]) .panel-header h2 { color:var(--dashboard-ink); font-size:16px; font-weight: var(--font-weight-heading); letter-spacing:-.01em; }
body:has([data-dashboard-live]) .chart-panel .panel-header { padding:16px; }
body:has([data-dashboard-live]) .chart-actions { gap:8px; }
body:has([data-dashboard-live]) .date-picker,
body:has([data-dashboard-live]) .chart-help,
body:has([data-dashboard-live]) .range-tabs,
body:has([data-dashboard-live]) [data-dashboard-refresh] {
    border:1px solid #d0d5dd;
    border-radius:8px;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
}
body:has([data-dashboard-live]) .range-tabs { padding:3px; background:#f2f4f7; }
body:has([data-dashboard-live]) .range-tabs a,
body:has([data-dashboard-live]) .range-tabs button { border-radius:6px; color:#667085; font-weight: var(--font-weight-control); }
body:has([data-dashboard-live]) .range-tabs .active { color:var(--dashboard-blue); background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.06); }
body:has([data-dashboard-live]) .call-metric-selector { gap:10px; padding:0 16px; }
body:has([data-dashboard-live]) .call-metric-card {
    min-height:80px;
    border:1px solid var(--dashboard-line);
    border-radius:10px;
    background:#fff;
    box-shadow:none;
}
body:has([data-dashboard-live]) .call-metric-card::before { content:none; }
body:has([data-dashboard-live]) .call-metric-card:hover,
body:has([data-dashboard-live]) .call-metric-card:focus-visible,
body:has([data-dashboard-live]) .call-metric-card.active {
    transform:none;
    border-color:#b2ccff;
    background:#f8fbff;
    box-shadow:0 0 0 3px rgba(21,94,239,.06);
}
body:has([data-dashboard-live]) .call-metric-copy strong { color:var(--dashboard-ink); font-size:18px; font-weight: var(--font-weight-number); }
body:has([data-dashboard-live]) .call-trend-scroll,
body:has([data-dashboard-live]) .line-chart { background:#fff; box-shadow:none; }
body:has([data-dashboard-live]) .call-chart-insights { border:1px solid var(--dashboard-line); border-radius:10px; background:#fbfdff; box-shadow:none; }
body:has([data-dashboard-live]) .call-chart-insight { border-color:#edf2f7; background:#fff; }
body:has([data-dashboard-live]) .dashboard-side .panel { border-radius:10px; }
body:has([data-dashboard-live]) .agenda-list { padding:0 14px 14px; }
body:has([data-dashboard-live]) .agenda-list div,
body:has([data-dashboard-live]) .task-stat,
body:has([data-dashboard-live]) .schedule-card {
    border:1px solid var(--dashboard-line);
    border-radius:8px;
    background:#fff;
}
body:has([data-dashboard-live]) .task-dashboard-stats { gap:8px; padding:0 14px 14px; }
body:has([data-dashboard-live]) .task-stat { padding:11px 6px; }
body:has([data-dashboard-live]) .task-dashboard-heading { margin:0 14px; border-top:1px solid var(--dashboard-line); }
body:has([data-dashboard-live]) .task-dashboard-list { padding:0 14px 8px; }
body:has([data-dashboard-live]) .task-dashboard-item {
    padding:12px 0;
    border-bottom:1px solid #eef2f6;
    background:transparent;
}
body:has([data-dashboard-live]) .task-dashboard-item:hover,
body:has([data-dashboard-live]) .activity-item:hover,
body:has([data-dashboard-live]) .performance-row:hover { background:#f8fafc; }
body:has([data-dashboard-live]) .activity-feed { padding:2px 16px 14px; }
body:has([data-dashboard-live]) .activity-item { border-bottom:1px solid #eef2f6; }
body:has([data-dashboard-live]) .activity-item:last-child { border-bottom:0; }
body:has([data-dashboard-live]) .performance-list { padding:0 16px 14px; }
body:has([data-dashboard-live]) .performance-row { border-bottom:1px solid #eef2f6; }
body:has([data-dashboard-live]) .performance-row:last-child { border-bottom:0; }
body:has([data-dashboard-live]) .performance-track { height:6px; border-radius:999px; background:#eef2f6; }
body:has([data-dashboard-live]) .performance-fill { border-radius:999px; }
body:has([data-dashboard-live]) .dashboard-table { margin-top:16px; }
body:has([data-dashboard-live]) .table-wrap { background:#fff; }
body:has([data-dashboard-live]) table { border-collapse:separate; border-spacing:0; }
body:has([data-dashboard-live]) th {
    height:42px;
    border-bottom:1px solid var(--dashboard-line);
    background:#f8fafc;
    color:#667085;
    font-size:11px;
    font-weight: var(--font-weight-regular);
    letter-spacing:.04em;
}
body:has([data-dashboard-live]) td {
    border-bottom:1px solid #eef2f6;
    color:#344054;
}
body:has([data-dashboard-live]) tbody tr:hover td { background:#fcfcfd; }
@media (prefers-reduced-motion: reduce) {
    body:has([data-dashboard-live]) :is(.button,.icon-button,.metric,.panel,.call-metric-card,.task-dashboard-item,.activity-item,.performance-row,.ds-summary > div) { transition:none; }}
@media (max-width:1240px) {
    body:has([data-dashboard-live]) .dashboard-grid { grid-template-columns:1fr; }
    body:has([data-dashboard-live]) .dashboard-side { grid-template-columns:repeat(2,minmax(0,1fr)); }}
@media (max-width:1120px) {
    body:has([data-dashboard-live]) .metric-row,
    body:has([data-dashboard-live]) .ds-dashboard .ds-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }}
@media (max-width:760px) {
    .dashboard-welcome { grid-template-columns:1fr; align-items:start; gap:12px; }
    .dashboard-welcome-note { justify-items:start; text-align:left; }
    body:has([data-dashboard-live]) .dashboard-toolbar { align-items:stretch; flex-direction:column; }
    body:has([data-dashboard-live]) .toolbar-left,
    body:has([data-dashboard-live]) .toolbar-right { justify-content:flex-start; }
    body:has([data-dashboard-live]) .metric-row,
    body:has([data-dashboard-live]) .ds-dashboard .ds-summary,
    body:has([data-dashboard-live]) .dashboard-side { grid-template-columns:1fr; }
    body:has([data-dashboard-live]) .chart-panel .panel-header { align-items:flex-start; flex-direction:column; }
    body:has([data-dashboard-live]) .chart-actions { width:100%; justify-content:flex-start; }
    body:has([data-dashboard-live]) .call-metric-selector { grid-template-columns:1fr; }}

/* Compact premium dashboard density pass: preserve all dashboard data, reduce oversized cards. */
body:has([data-dashboard-live]) .super-dashboard-body {
    max-width: 1640px;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-welcome {
    margin-bottom: 10px;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-welcome-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-welcome h2 {
    font-size: 24px;
    letter-spacing: -0.025em;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-welcome p {
    margin-top: 3px;
    font-size: 13px;
}
body:has([data-dashboard-live]) .super-dashboard-body .super-dashboard-toolbar {
    margin-bottom: 10px;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row,
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-main .metric-row,
body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-summary {
    gap: 10px;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row {
    margin-bottom: 10px;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-kpi-card,
body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-summary > div {
    min-height: 78px;
    padding: 11px 13px;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-kpi-card::before,
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-kpi-card::after {
    content: none !important;
    display: none !important;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-kpi-card:hover,
body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-summary > div:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(16, 24, 40, 0.06);
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-main .dashboard-kpi-card,
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row .metric,
body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-summary > div {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 10px;
    align-content: center;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-kpi-card .metric-icon,
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row .metric-icon,
body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-metric-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    box-shadow: none;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-kpi-card .metric-icon svg,
body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-metric-icon svg {
    width: 17px;
    height: 17px;
}
body:has([data-dashboard-live]) .super-dashboard-body .metric-top {
    min-width: 0;
    gap: 4px;
}
body:has([data-dashboard-live]) .super-dashboard-body .metric-top span,
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-main .metric small,
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row small,
body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-summary span {
    font-size: 11px;
    line-height: 1.3;
    font-weight: var(--font-weight-regular);
}
body:has([data-dashboard-live]) .super-dashboard-body .trend {
    min-height: 20px;
    padding: 2px 6px;
    font-size: 10px;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-main .metric strong,
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row strong,
body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-summary strong {
    margin-top: 5px;
    font-size: clamp(18px, 1.25vw, 22px);
    line-height: 1.12;
    font-weight: var(--font-weight-number);
    letter-spacing: -0.02em;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row strong {
    font-size: clamp(17px, 1.1vw, 21px);
}
body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard {
    margin: 10px 0;
}
body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-toolbar {
    margin-bottom: 6px;
}
body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-toolbar h2 {
    font-size: 14px;
}
body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-summary {
    margin-top: 8px;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(286px, 320px);
    gap: 12px;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-main,
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-side {
    gap: 12px;
}
body:has([data-dashboard-live]) .super-dashboard-body .panel {
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
body:has([data-dashboard-live]) .super-dashboard-body .panel:hover {
    transform: none;
    box-shadow: 0 6px 14px rgba(16, 24, 40, 0.05);
}
body:has([data-dashboard-live]) .super-dashboard-body .panel-header,
body:has([data-dashboard-live]) .super-dashboard-body .chart-panel .panel-header {
    min-height: 48px;
    padding: 11px 14px;
}
body:has([data-dashboard-live]) .super-dashboard-body .panel-header h2,
body:has([data-dashboard-live]) .super-dashboard-body .chart-panel .panel-header h2 {
    font-size: 15px;
}
body:has([data-dashboard-live]) .super-dashboard-body .analytics-period,
body:has([data-dashboard-live]) .super-dashboard-body .analytics-conversion-note {
    font-size: 12px;
}
body:has([data-dashboard-live]) .super-dashboard-body .chart-actions {
    gap: 6px;
}
body:has([data-dashboard-live]) .super-dashboard-body .date-picker,
body:has([data-dashboard-live]) .super-dashboard-body .chart-help,
body:has([data-dashboard-live]) .super-dashboard-body .range-tabs,
body:has([data-dashboard-live]) .super-dashboard-body [data-dashboard-refresh] {
    min-height: 34px;
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
body:has([data-dashboard-live]) .super-dashboard-body .line-chart {
    min-height: 360px;
    padding: 8px 14px 14px;
    background: #fff;
}
body:has([data-dashboard-live]) .super-dashboard-body .call-metric-selector {
    gap: 8px;
    padding: 0 14px;
}
body:has([data-dashboard-live]) .super-dashboard-body .call-metric-card {
    min-height: 66px;
    padding: 9px 10px;
    border-radius: 8px;
    box-shadow: none;
}
body:has([data-dashboard-live]) .super-dashboard-body .call-metric-card:hover,
body:has([data-dashboard-live]) .super-dashboard-body .call-metric-card:focus-visible,
body:has([data-dashboard-live]) .super-dashboard-body .call-metric-card.active {
    transform: none;
    box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.06);
}
body:has([data-dashboard-live]) .super-dashboard-body .call-metric-icon {
    width: 28px;
    height: 30px;
}
body:has([data-dashboard-live]) .super-dashboard-body .call-metric-copy strong {
    font-size: 15px;
}
body:has([data-dashboard-live]) .super-dashboard-body .call-metric-copy small,
body:has([data-dashboard-live]) .super-dashboard-body .call-metric-copy em {
    font-size: 10px;
}
body:has([data-dashboard-live]) .super-dashboard-body .call-trend-scroll,
body:has([data-dashboard-live]) .super-dashboard-body .call-chart-viewport {
    min-height: 245px;
}
body:has([data-dashboard-live]) .super-dashboard-body .call-trend-scroll {
    padding: 8px;
    background: #fff;
    box-shadow: none;
}
body:has([data-dashboard-live]) .super-dashboard-body .analytics-empty {
    min-height: 210px;
    padding: 26px 16px;
}
body:has([data-dashboard-live]) .super-dashboard-body .analytics-empty svg {
    width: 24px;
    height: 24px;
}
body:has([data-dashboard-live]) .super-dashboard-body .call-chart-insights {
    gap: 8px;
}
body:has([data-dashboard-live]) .super-dashboard-body .call-chart-insight {
    min-height: 68px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: none;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-lower {
    gap: 12px;
}
body:has([data-dashboard-live]) .super-dashboard-body .performance-list,
body:has([data-dashboard-live]) .super-dashboard-body .activity-feed,
body:has([data-dashboard-live]) .super-dashboard-body .agenda-list,
body:has([data-dashboard-live]) .super-dashboard-body .task-dashboard-list {
    padding-left: 12px;
    padding-right: 12px;
}
body:has([data-dashboard-live]) .super-dashboard-body .performance-row {
    padding: 9px 0;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body:has([data-dashboard-live]) .super-dashboard-body .performance-row:hover {
    transform: none;
    box-shadow: none;
    background: #f8fafc;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-side {
    top: 76px;
    gap: 12px;
}
body:has([data-dashboard-live]) .super-dashboard-body .agenda-list div,
body:has([data-dashboard-live]) .super-dashboard-body .task-stat {
    border-radius: 7px;
    background: #fff;
    box-shadow: none;
}
body:has([data-dashboard-live]) .super-dashboard-body .agenda-list strong {
    font-size: 20px;
}
body:has([data-dashboard-live]) .super-dashboard-body .task-dashboard-stats {
    gap: 6px;
    padding: 0 12px 12px;
}
body:has([data-dashboard-live]) .super-dashboard-body .task-stat {
    min-height: 54px;
    padding: 8px 4px;
}
body:has([data-dashboard-live]) .super-dashboard-body .task-stat strong {
    font-size: 17px;
}
body:has([data-dashboard-live]) .super-dashboard-body .task-dashboard-heading {
    margin: 0 12px;
    padding-top: 12px;
}
body:has([data-dashboard-live]) .super-dashboard-body .task-dashboard-item,
body:has([data-dashboard-live]) .super-dashboard-body .activity-item {
    padding: 9px 0;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-table {
    margin-top: 12px;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-table th {
    height: 36px;
}
body:has([data-dashboard-live]) .super-dashboard-body .dashboard-table td {
    padding-top: 9px;
    padding-bottom: 9px;
}
@media (max-width: 1120px) {
    body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row,
    body:has([data-dashboard-live]) .super-dashboard-body .dashboard-main .metric-row,
    body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }}
@media (max-width: 760px) {
    body:has([data-dashboard-live]) .super-dashboard-body .dashboard-billing-row,
    body:has([data-dashboard-live]) .super-dashboard-body .dashboard-main .metric-row,
    body:has([data-dashboard-live]) .super-dashboard-body .ds-dashboard .ds-summary,
    body:has([data-dashboard-live]) .super-dashboard-body .dashboard-side {
        grid-template-columns: 1fr;
    }
    body:has([data-dashboard-live]) .super-dashboard-body .line-chart,
    body:has([data-dashboard-live]) .super-dashboard-body .call-trend-scroll,
    body:has([data-dashboard-live]) .super-dashboard-body .call-chart-viewport {
        min-height: 280px;
    }}

/* Global icon consistency: keep Lucide SVGs aligned across navigation, buttons, forms, tables and cards. */
svg.lucide {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
    stroke-width: 2;
}

:is(.nav a, .logout-link, .topbar, .button, .icon-button) svg.lucide {
    width: 18px;
    height: 18px;
}

:is(.button, .icon-button, .nav a, .logout-link) svg.lucide {
    pointer-events: none;
}

.icon-button svg.lucide {
    display: block;
    margin: auto;
}

/* Semantic exceptions for shared components rendered on every role panel. */
.brand strong,
.user-chip strong,
.sidebar-play-store strong,
.agent-suggestion strong,
.member-title strong,
.agent-summary-cell > strong,
.profile-summary strong,
.org-company-node strong,
.org-person strong,
.file-chip strong,
.upload-preview-copy strong,
.attachment-summary strong,
.attachment-preview-info strong,
.billing-profile-view strong,
.performance-head strong,
.task-deadline-cell strong,
.task-dashboard-item strong,
.activity-item strong {
    font-weight: var(--font-weight-regular);
}
.nav a.active,
body:has([data-dashboard-live]) .nav a.active,
.sidebar-play-store strong,
.call-day-group summary strong,
.billing-status-summary strong {
    font-weight: var(--font-weight-control);
}
.metric strong,
.numeric-value,
.drilldown-kpis strong,
.realtime-kpi strong,
.report-inline-metric strong,
.source-split strong,
.billing-mini-grid strong,
.billing-command-card strong,
.billing-ticket-amount strong,
.billing-calculator-card > strong,
.billing-capacity-line strong,
.call-chart-hover-card strong,
.call-chart-insight strong,
.agenda-list strong,
.task-stat strong {
    font-weight: var(--font-weight-number);
}
.badge.warning,
.badge.danger,
.inline-confirm strong,
.topbar-billing-badge:is(.warning, .danger) :is(span, strong) {
    font-weight: var(--font-weight-critical);
}

/* Login screens share the same scale, without changing public-site content. */
.login-page {
    font-weight: var(--font-weight-regular);
}
.login-page h1 {
    font-weight: var(--font-weight-title);
}
.login-page :is(h2, h3, .login-register-panel > strong) {
    font-weight: var(--font-weight-heading);
}
.login-page :is(input, select, textarea, label, small, p) {
    font-weight: var(--font-weight-regular);
}
.login-page :is(button, .button) {
    font-weight: var(--font-weight-control);
}

/* Performance containment: skip rendering off-screen heavy CRM sections without changing layout or permissions. */
@supports (content-visibility:auto) {
    [data-page-content] > .panel,
    .dashboard-main > .panel,
    .dashboard-side > .panel,
    .dashboard-lower > .panel,
    .table-wrap,
    .activity-item,
    .performance-row,
    .agenda-list > div,
    .task-dashboard-item {
        content-visibility:auto;
        contain-intrinsic-size:auto 180px;
    }
    .table-wrap,
    .dashboard-table {
        contain-intrinsic-size:auto 420px;
    }}

/* Premium compact Duplicate Decision popover */
.duplicate-match-header {
    position:relative;
}
.duplicate-resolution {
    position:relative;
    z-index:5;
}
.duplicate-resolution[open] {
    flex:0 0 auto;
    width:auto;
    display:block;
}
.duplicate-resolution > summary {
    min-width:164px;
    min-height:36px;
    padding:0 15px;
    border-radius:999px;
    background:#0f6f91;
    border-color:#0f6f91;
    box-shadow:0 10px 22px rgba(15,111,145,.18);
}
.duplicate-resolution[open] > summary {
    background:#0b5d7c;
    border-color:#0b5d7c;
}
.duplicate-resolution-form {
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    width:min(720px, calc(100vw - 80px));
    max-width:min(720px, calc(100vw - 80px));
    margin:0;
    padding:0;
    overflow:hidden;
    border:1px solid #d8e2ee;
    border-radius:16px;
    background:#fff;
    box-shadow:0 22px 55px rgba(15,23,42,.16), 0 1px 2px rgba(15,23,42,.05);
    animation:duplicate-decision-pop .18s cubic-bezier(.2,.8,.2,1) both;
}
.duplicate-resolution-form::before {
    content:none;
}
.duplicate-resolution-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:16px 18px 13px;
    border-bottom:1px solid #eef2f7;
    background:linear-gradient(180deg,#ffffff,#f9fbff);
}
.duplicate-resolution-header h4 {
    margin:0;
    color:#111827;
    font-size:16px;
    line-height:1.2;
    font-weight:var(--font-weight-heading);
    letter-spacing:0;
}
.duplicate-resolution-header p {
    margin:4px 0 0;
    color:#667085;
    font-size:12.5px;
    line-height:1.4;
}
.duplicate-resolution-close {
    flex:0 0 auto;
    width:32px;
    height:32px;
    border-radius:10px;
    color:#667085;
    background:#f8fafc;
    border-color:#e4e7ec;
}
.duplicate-resolution-close:hover,
.duplicate-resolution-close:focus-visible {
    color:#101828;
    background:#eef4ff;
    border-color:#c7d7fe;
}
.duplicate-action-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:0;
    padding:14px 18px;
    background:#fff;
}
.duplicate-action-option {
    position:relative;
    display:flex;
    gap:10px;
    min-height:104px;
    padding:13px 12px;
    border:1px solid #d9e2ec;
    border-radius:13px;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
    cursor:pointer;
    overflow:hidden;
    transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.duplicate-action-option:hover {
    transform:translateY(-1px);
    border-color:#b7c6d8;
    box-shadow:0 10px 22px rgba(15,23,42,.08);
}
.duplicate-action-option input {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    opacity:0;
    cursor:pointer;
}
.duplicate-action-icon {
    position:relative;
    z-index:1;
    flex:0 0 auto;
    width:34px;
    height:34px;
    border-radius:11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#175cd3;
    background:#eff6ff;
}
.duplicate-action-icon svg {
    width:17px;
    height:17px;
}
.duplicate-action-copy {
    position:relative;
    z-index:1;
    min-width:0;
}
.duplicate-action-option strong {
    margin:0 0 5px;
    color:#182230;
    font-size:13.5px;
    line-height:1.2;
    font-weight:var(--font-weight-heading);
}
.duplicate-action-option small {
    color:#667085;
    font-size:12px;
    line-height:1.35;
}
.duplicate-action-review .duplicate-action-icon {
    color:#b54708;
    background:#fff7ed;
}
.duplicate-action-archive .duplicate-action-icon {
    color:#175cd3;
    background:#eff6ff;
}
.duplicate-action-whitelist .duplicate-action-icon {
    color:#067647;
    background:#ecfdf3;
}
.duplicate-action-review,
.duplicate-action-archive,
.duplicate-action-whitelist {
    border-left-width:1px;
}
.duplicate-action-review:has(input:checked) {
    border-color:#f79009;
    background:#fffaf3;
    box-shadow:0 0 0 3px rgba(247,144,9,.13);
}
.duplicate-action-archive:has(input:checked) {
    border-color:#528bff;
    background:#f7fbff;
    box-shadow:0 0 0 3px rgba(46,144,250,.14);
}
.duplicate-action-whitelist:has(input:checked) {
    border-color:#12b76a;
    background:#f6fef9;
    box-shadow:0 0 0 3px rgba(18,183,106,.13);
}
.duplicate-action-review:has(input:checked) strong { color:#b54708; }
.duplicate-action-archive:has(input:checked) strong { color:#175cd3; }
.duplicate-action-whitelist:has(input:checked) strong { color:#067647; }
.duplicate-action-option:has(input:checked)::after {
    content:"";
    position:absolute;
    top:12px;
    right:12px;
    width:9px;
    height:9px;
    border-radius:999px;
    background:currentColor;
    box-shadow:0 0 0 4px rgba(255,255,255,.9);
}
.duplicate-action-review:has(input:checked)::after { color:#f79009; }
.duplicate-action-archive:has(input:checked)::after { color:#2e90fa; }
.duplicate-action-whitelist:has(input:checked)::after { color:#12b76a; }
.duplicate-resolution-fields {
    grid-template-columns:minmax(220px,.8fr) minmax(300px,1.2fr);
    gap:12px;
    padding:0 18px 14px;
}
.duplicate-resolution-fields label {
    gap:6px;
}
.duplicate-resolution-fields label > span {
    color:#475467;
    font-size:12px;
    line-height:1.2;
    font-weight:var(--font-weight-control);
}
.duplicate-resolution-fields select,
.duplicate-resolution-fields textarea {
    border-color:#d0d5dd;
    border-radius:10px;
    font-size:13px;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.duplicate-resolution-fields select {
    height:40px;
}
.duplicate-resolution-fields textarea {
    min-height:74px;
}
.duplicate-resolution-footer {
    margin:0;
    padding:13px 18px 16px;
    border-top:1px solid #eef2f7;
    background:#fbfcfe;
}
.duplicate-resolution-footer .button {
    min-height:38px;
    border-radius:10px;
    padding:0 16px;
    box-shadow:none;
}
.duplicate-resolution-footer .button:not(.primary) {
    background:#fff;
    color:#344054;
    border-color:#d0d5dd;
}
.duplicate-resolution-footer .button.primary {
    background:#0f6f91;
    border-color:#0f6f91;
    box-shadow:0 10px 20px rgba(15,111,145,.17);
}
@keyframes duplicate-decision-pop {
    from { opacity:0; transform:translateY(-8px) scale(.985); }
    to { opacity:1; transform:translateY(0) scale(1); }
}
@media(max-width:900px) {
    .duplicate-resolution[open] {
        width:100%;
    }
    .duplicate-resolution-form {
        position:static;
        width:100%;
        max-width:100%;
        margin-top:12px;
    }}
@media(max-width:760px) {
    .duplicate-resolution > summary,
    .duplicate-resolution-footer .button {
        width:100%;
    }
    .duplicate-resolution-header,
    .duplicate-action-grid,
    .duplicate-resolution-fields,
    .duplicate-resolution-footer {
        padding-inline:14px;
    }
    .duplicate-action-grid,
    .duplicate-resolution-fields {
        grid-template-columns:1fr;
    }
    .duplicate-action-option {
        min-height:auto;
    }
    .duplicate-resolution-footer {
        flex-direction:column-reverse;
    }}
@media(prefers-reduced-motion:reduce) {
    .duplicate-resolution-form,
    .duplicate-action-option {
        animation:none !important;
        transition:none !important;
    }}

.duplicate-list-card .table-wrap { overflow-x:auto; }
.duplicate-list-card table { min-width:900px; }
.duplicate-list-card th,
.duplicate-list-card td { vertical-align:top; }
.duplicate-note-cell { min-width:210px; max-width:330px; color:#344054; line-height:1.45; }
.duplicate-note-cell span,
.duplicate-note-expand summary,
.duplicate-note-expand div { white-space:pre-wrap; overflow-wrap:anywhere; }
.duplicate-note-expand summary { cursor:pointer; color:#344054; }
.duplicate-note-expand summary span { display:block; margin-top:4px; color:#176b91; font-weight:600; white-space:normal; }
.duplicate-note-expand[open] summary { color:#667085; }
.duplicate-note-expand div { margin-top:8px; padding:9px 11px; border-radius:9px; background:#f4f8fc; color:#24354d; }
.duplicate-edit-overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(10,22,39,.43); }
.duplicate-edit-overlay[hidden] { display:none; }
.duplicate-edit-dialog { width:min(520px,100%); max-height:calc(100vh - 36px); overflow:auto; border:1px solid #d8e2ee; border-radius:16px; background:#fff; box-shadow:0 28px 70px rgba(15,23,42,.23); }
.duplicate-edit-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:16px 18px; }
.duplicate-edit-fields label { display:grid; gap:6px; min-width:0; color:#475467; font-size:12px; font-weight:600; }
.duplicate-edit-fields select,
.duplicate-edit-fields textarea { width:100%; border:1px solid #d0d5dd; border-radius:10px; padding:10px 12px; color:#182230; background:#fff; font:inherit; font-size:13px; }
.duplicate-edit-fields textarea { min-height:92px; resize:vertical; line-height:1.5; }
.duplicate-edit-note-label,
.duplicate-edit-phone { grid-column:1 / -1; }
.duplicate-edit-phone { margin:0; color:#10213e; font-weight:700; font-size:14px; }
@media(max-width:600px) {
    .duplicate-edit-fields { grid-template-columns:1fr; padding:14px; }
    .duplicate-edit-overlay { padding:10px; align-items:flex-end; }
    .duplicate-edit-dialog { max-height:calc(100vh - 20px); border-radius:16px 16px 10px 10px; }}