/* =====================================================================
   Painel AURIOS — design system
   Paleta neutra (cinza frio) + acento laranja da marca. Tema claro e
   escuro: automático pelo SO e alternável (data-theme no <html>).
   Sem framework CSS. Fonte: Inter + Material Symbols.
   ===================================================================== */

/* ---------- Tokens não-cromáticos ---------- */
:root {
    --radius-sm: 8px;
    --radius: 11px;
    --radius-lg: 16px;
    --sidebar-w: 244px;
    --topbar-h: 60px;
    --global-search-w: clamp(220px, 21vw, 340px);
    --content-max: 1680px;
    --font: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

/* Quadro de agenda operacional */
.operations-page {
    min-width: 0;
}

.operations-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.operations-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 280px;
    max-width: 460px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-3);
}

.operations-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
}

.operations-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
}

.operations-toolbar select {
    height: 38px;
    min-width: 150px;
    padding: 0 30px 0 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}

.operations-total {
    margin-left: auto;
    color: var(--text-3);
    font-size: 12px;
}

[data-operations-board-wrap] {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.operations-board {
    display: grid;
    grid-template-columns: repeat(6, minmax(200px, 1fr));
    gap: 12px;
    min-width: 1230px;
    align-items: start;
}

.operations-lane {
    min-width: 0;
    min-height: 170px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    box-shadow: var(--shadow-xs);
}

.operations-lane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 13px 11px;
    border-bottom: 1px solid var(--border);
}

.operations-lane-head>div,
.operations-card-top,
.operations-card-meta {
    display: flex;
    align-items: center;
    gap: 7px;
}

.operations-lane-head>div {
    min-width: 0;
}

.operations-lane-head h2 {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operations-lane-head>div>.ic {
    color: var(--text-3);
}

.operations-lane--bad .operations-lane-head>div>.ic,
.operations-lane--bad .operations-lane-count {
    color: var(--bad);
}

.operations-lane--warn .operations-lane-head>div>.ic,
.operations-lane--warn .operations-lane-count {
    color: var(--warn);
}

.operations-lane-count {
    flex: 0 0 auto;
    min-width: 21px;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 11px;
    text-align: center;
}

.operations-lane-list {
    display: grid;
    gap: 8px;
    padding: 9px;
}

.operations-card {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    color: var(--text);
}

.operations-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.operations-card-top {
    justify-content: space-between;
    min-width: 0;
    color: var(--text-3);
    font-size: 10.5px;
}

.operations-card-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operations-card-type .ic {
    color: var(--accent);
}

.operations-card-title,
.operations-card-subtitle,
.operations-card-extra {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operations-card-title {
    font-size: 12.5px;
}

.operations-card-title:hover {
    color: var(--accent-hover);
}

.operations-card-subtitle,
.operations-card-extra {
    color: var(--text-3);
    font-size: 11px;
}

.operations-card-meta {
    justify-content: space-between;
    min-width: 0;
    color: var(--text-2);
    font-size: 10.5px;
}

.operations-card-meta>span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operations-card-amount {
    flex: 0 0 auto;
    color: var(--ok);
    font-size: 11px;
}

.operations-card-status {
    flex: 0 0 auto;
    color: var(--text-3);
}

.operations-lane-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 80px;
    color: var(--text-3);
    font-size: 11px;
}

.operations-card-editor {
    border-top: 1px solid var(--border);
    padding-top: 7px;
    color: var(--text-3);
    font-size: 10.5px;
}

.operations-card-editor summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    list-style: none;
}

.operations-card-editor summary::-webkit-details-marker {
    display: none;
}

.operations-card-editor form {
    display: grid;
    gap: 7px;
    margin-top: 8px;
}

.operations-card-editor label {
    display: grid;
    gap: 4px;
}

.operations-card-editor label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 6px;
}

.operations-card-editor input[type="datetime-local"] {
    width: 100%;
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 11px;
}

[data-operations-board-wrap][aria-busy="true"] {
    opacity: .58;
    pointer-events: none;
}

@media (max-width: 700px) {
    .operations-toolbar {
        align-items: stretch;
    }

    .operations-search {
        flex-basis: 100%;
        max-width: none;
    }

    .operations-toolbar select {
        flex: 1 1 0;
        min-width: 0;
    }

    .operations-total {
        width: 100%;
        margin-left: 0;
    }

    .operations-board {
        grid-template-columns: repeat(6, minmax(280px, 1fr));
        min-width: 1728px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .operations-card:hover {
        transform: none;
    }
}

/* ---------- Tema claro (padrão) ---------- */
:root {
    color-scheme: light;

    --bg: #f7f7f8;
    --surface: #ffffff;
    --surface-2: #f2f2f4;
    --surface-3: #e8e8ec;
    --border: #e6e6ea;
    --border-strong: #d3d3da;

    --text: #191a1f;
    --text-2: #53535d;
    --text-3: #8b8b96;

    --accent: #e2620f;
    --accent-hover: var(--accent-hover-light, #c8560c);
    --accent-weak: var(--accent-weak-custom, #fdeee2);
    --accent-weak-2: var(--accent-weak-2-custom, #f8e0cf);
    --on-accent: #ffffff;

    --ok: #177a3c;
    --ok-bg: #e6f5eb;
    --warn: #986410;
    --warn-bg: #fbf0da;
    --bad: #c12a26;
    --bad-bg: #fdebe9;
    --info: #2058c8;
    --info-bg: #e9effb;
    --muted-bg: #ececef;

    --track: #e4e4e9;
    --snackbar-bg: #1a1a1e;
    --snackbar-fg: #ffffff;

    --ring: var(--accent-ring-custom, rgba(226, 98, 15, .32));
    --shadow-xs: 0 1px 2px rgba(17, 17, 20, .06);
    --shadow-sm: 0 1px 2px rgba(17, 17, 20, .05), 0 2px 6px rgba(17, 17, 20, .06);
    --shadow-md: 0 6px 20px rgba(17, 17, 20, .10), 0 2px 6px rgba(17, 17, 20, .05);
    --shadow-pop: 0 14px 40px rgba(17, 17, 20, .16);

    --chart-1: #c9c9d0;
    --chart-2: var(--accent);
    --chart-3: #e0a83c;
    --chart-4: #3f9d69;
    --chart-5: #c0564e;
    --chart-grid: rgba(17, 17, 20, .07);
}

/* ---------- Tema escuro ---------- */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0f0f11;
    --surface: #171719;
    --surface-2: #1e1e21;
    --surface-3: #28282d;
    --border: #2b2b31;
    --border-strong: #3c3c44;

    --text: #f3f3f5;
    --text-2: #a6a6b1;
    --text-3: #74747f;

    --accent: #ef6a1c;
    --accent-hover: var(--accent-hover-dark, #ff7d36);
    --accent-weak: var(--accent-weak-custom, rgba(239, 106, 28, .16));
    --accent-weak-2: var(--accent-weak-2-custom, rgba(239, 106, 28, .26));
    --on-accent: #ffffff;

    --ok: #46c983;
    --ok-bg: rgba(70, 201, 131, .15);
    --warn: #e2ab45;
    --warn-bg: rgba(226, 171, 69, .15);
    --bad: #f2726b;
    --bad-bg: rgba(242, 114, 107, .15);
    --info: #6ea3f5;
    --info-bg: rgba(110, 163, 245, .15);
    --muted-bg: #26262b;

    --track: #303036;
    --snackbar-bg: #f3f3f5;
    --snackbar-fg: #17171a;

    --ring: var(--accent-ring-custom, rgba(239, 106, 28, .40));
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 6px rgba(0, 0, 0, .40);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .50), 0 2px 8px rgba(0, 0, 0, .40);
    --shadow-pop: 0 16px 44px rgba(0, 0, 0, .60);

    --chart-1: #3a3a42;
    --chart-2: var(--accent);
    --chart-3: #e2ab45;
    --chart-4: #46c983;
    --chart-5: #f2726b;
    --chart-grid: rgba(255, 255, 255, .08);
}

/* Segue o SO quando o usuário não escolheu manualmente */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg: #0f0f11;
        --surface: #171719;
        --surface-2: #1e1e21;
        --surface-3: #28282d;
        --border: #2b2b31;
        --border-strong: #3c3c44;

        --text: #f3f3f5;
        --text-2: #a6a6b1;
        --text-3: #74747f;

        --accent: #ef6a1c;
        --accent-hover: var(--accent-hover-dark, #ff7d36);
        --accent-weak: var(--accent-weak-custom, rgba(239, 106, 28, .16));
        --accent-weak-2: var(--accent-weak-2-custom, rgba(239, 106, 28, .26));
        --on-accent: #ffffff;

        --ok: #46c983;
        --ok-bg: rgba(70, 201, 131, .15);
        --warn: #e2ab45;
        --warn-bg: rgba(226, 171, 69, .15);
        --bad: #f2726b;
        --bad-bg: rgba(242, 114, 107, .15);
        --info: #6ea3f5;
        --info-bg: rgba(110, 163, 245, .15);
        --muted-bg: #26262b;

        --track: #303036;
        --snackbar-bg: #f3f3f5;
        --snackbar-fg: #17171a;

        --ring: var(--accent-ring-custom, rgba(239, 106, 28, .40));
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 6px rgba(0, 0, 0, .40);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, .50), 0 2px 8px rgba(0, 0, 0, .40);
        --shadow-pop: 0 16px 44px rgba(0, 0, 0, .60);

        --chart-1: #3a3a42;
        --chart-2: var(--accent);
        --chart-3: #e2ab45;
        --chart-4: #46c983;
        --chart-5: #f2726b;
        --chart-grid: rgba(255, 255, 255, .08);
    }
}

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

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

html {
    -webkit-text-size-adjust: 100%;
    background-color: var(--bg);
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

html,
.sidebar,
.notification-list,
.gsearch-pop,
.ticket-conversation,
.knowledge-source,
.knowledge-chunks,
[data-scroll] {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--app-grid-color, #a6a6ae) var(--app-grid-opacity, 2%), transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--app-grid-color, #a6a6ae) var(--app-grid-opacity, 2%), transparent) 1px, transparent 1px);
    background-size: var(--app-grid-size, 36px) var(--app-grid-size, 36px);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

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

.meta-list .val a,
.lead a,
.detail-hero .lead a,
.card-body p a {
    color: var(--accent-hover);
}

.meta-list .val a:hover,
.lead a:hover,
.card-body p a:hover {
    text-decoration: underline;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: none;
    border: none;
}

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

img {
    max-width: 100%;
    display: block;
}

[hidden] {
    display: none !important;
}

[x-cloak] {
    display: none !important;
}

.field-inline-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.category-dialog {
    width: min(440px, calc(100vw - 28px));
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

.category-dialog::backdrop {
    background: rgba(0, 0, 0, .62);
}

.category-dialog .card-head {
    margin: 0;
}

::selection {
    background: var(--accent-weak-2);
}

/* Transição suave ao alternar tema */
body,
.sidebar,
.topbar,
.topsearch,
.card,
.stat,
.data,
.data thead th,
.btn,
.chip,
.segmented,
.field input,
.field select,
.field textarea,
.badge {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

@media (prefers-reduced-motion: reduce) {

    *,
    html {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Ícones (Material Symbols) ---------- */
i.ic {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    width: 1em;
    min-width: 1em;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    flex-shrink: 0;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    user-select: none;
}

html.icons-loading i.ic {
    visibility: hidden;
}

i.ic.sm {
    font-size: 17px;
}

i.ic.lg {
    font-size: 24px;
}

i.ic.xl {
    font-size: 32px;
}

/* =====================================================================
   Shell: sidebar + topbar + conteúdo (desktop) / bottom-nav (mobile)
   ===================================================================== */
.app {
    min-height: 100vh;
}

/* ----- Sidebar ----- (fixa à viewport; nunca rola junto com a página) */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 14px;
    background: var(--surface);
    border-right: 0;
    box-shadow: 8px 0 26px rgba(0, 0, 0, .14);
    overflow: hidden;
    overscroll-behavior: contain;
    z-index: 40;
    isolation: isolate;
}

.sidebar-toggle {
    position: fixed;
    top: auto;
    bottom: 10%;
    left: calc(var(--sidebar-w) - 16px);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-3);
    background: var(--surface-2);
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .2s ease;
}

.sidebar-toggle .ic {
    font-size: 18px;
    transition: transform .22s ease;
}

.sidebar-toggle span {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    z-index: 120;
    width: max-content;
    max-width: 180px;
    padding: 6px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-4px, -50%);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.sidebar-toggle:hover {
    background: var(--surface-2);
    color: var(--accent);
    border-color: var(--accent);
    transform: scale(1.06);
}

.sidebar-toggle:active {
    transform: scale(.94);
}

.sidebar-toggle:hover span,
.sidebar-toggle:focus-visible span {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

.sidebar-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 36px 16px 8px;
}

.sidebar .brand img {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.sidebar .brand b {
    font-size: 15px;
    letter-spacing: -.01em;
}

.sidebar .brand span {
    font-size: 11px;
    color: var(--text-3);
    display: block;
    margin-top: -2px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-weight: 500;
    transition: background .12s, color .12s;
}

.nav-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-link .nav-count {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent-weak);
    color: var(--accent-hover);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.nav-link:hover {
    background: var(--surface-2);
    color: var(--text);
}

.nav-link.active {
    background: var(--accent-weak);
    color: var(--accent-hover);
    font-weight: 600;
    box-shadow: inset 0 0 24px color-mix(in srgb, var(--accent) 9%, transparent);
}

.nav-link.active i.ic {
    color: var(--accent);
}

.nav-link i.ic {
    color: var(--text-3);
    font-size: 20px;
}

.nav-link:hover i.ic,
.nav-link:focus-visible i.ic {
    color: var(--accent);
}

/* Sidebar compacta: mantém ícone e legenda pequena em cada módulo. */
html[data-sidebar="collapsed"] {
    --sidebar-w: 100px;
}

html[data-sidebar="collapsed"] .sidebar {
    padding-inline: 10px;
}

html[data-sidebar="collapsed"] .sidebar .brand {
    justify-content: center;
    padding: 6px 0 16px;
}

html[data-sidebar="collapsed"] .sidebar .brand>span {
    display: none;
}

html[data-sidebar="collapsed"] .sidebar .brand img {
    width: 32px;
    height: 32px;
}

html[data-sidebar="collapsed"] .sidebar-toggle {
    width: 34px;
    align-self: center;
    padding-inline: 4px;
}

html[data-sidebar="collapsed"] .sidebar-toggle .ic {
    transform: rotate(180deg);
}

html[data-sidebar="collapsed"] .nav-link {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    padding: 7px 3px;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
}

html[data-sidebar="collapsed"] .nav-link i.ic {
    font-size: 21px;
}

html[data-sidebar="collapsed"] .nav-link span {
    max-width: 100%;
}

html[data-sidebar="collapsed"] .nav-link .nav-count {
    position: absolute;
    top: 3px;
    right: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 1px solid var(--surface);
    font-size: 9px;
}

html[data-sidebar="collapsed"] .sidebar .side-foot {
    padding-top: 10px;
}

html[data-sidebar="collapsed"] .user-card {
    padding: 8px 4px;
}

html[data-sidebar="collapsed"] .user-identity {
    justify-content: center;
}

html[data-sidebar="collapsed"] .user-copy,
html[data-sidebar="collapsed"] .user-open {
    display: none;
}

html[data-sidebar="collapsed"] .user-actions {
    grid-template-columns: 1fr;
}

.sidebar .spacer {
    flex: 1;
}

.sidebar-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 0;
}

html[data-sidebar="collapsed"] .sidebar-footer {
    margin-top: 8px;
    padding-top: 8px;
}

.sidebar .side-foot {
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.user-card {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(145deg, var(--surface-2), var(--surface));
    box-shadow: var(--shadow-xs);
}

.user-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.user-identity-link {
    width: 100%;
    padding: 4px;
    margin: -4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.user-identity-link:hover {
    background: var(--surface-3);
}

.user-identity-link .user-open {
    margin-left: auto;
    color: var(--text-3);
}

.user-card.is-active .user-open {
    color: var(--accent);
}

.user-card.is-open .user-open {
    transform: rotate(90deg);
    color: var(--accent);
}

.user-avatar {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--accent-weak);
    color: var(--accent-hover);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.user-status {
    position: absolute;
    right: -1px;
    bottom: 0;
    width: 10px;
    height: 10px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--ok);
}

.user-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.user-name,
.user-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-name {
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
}

.user-email {
    color: var(--text-3);
    font-size: 11px;
}

.user-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid var(--border);
    overflow: hidden;
    opacity: 0;
    transition: max-height .2s ease, margin-top .2s ease, padding-top .2s ease, opacity .15s ease;
}

.user-card.is-open .user-actions {
    max-height: 120px;
    margin-top: 10px;
    padding-top: 9px;
    opacity: 1;
}

.user-actions form {
    min-width: 0;
    grid-column: auto;
}

.user-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    padding: 8px 6px 7px;
    border-radius: 9px;
    color: var(--text-2);
    font-size: 10.5px;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
}

.user-action .ic {
    font-size: 21px;
    line-height: 1;
    color: var(--text-3);
}

.user-action>span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-action:hover .ic,
.user-action--danger:hover .ic {
    color: currentColor;
}

.user-action:hover {
    background: var(--surface-3);
    color: var(--text);
}

.user-action--danger:hover {
    color: var(--bad);
}

/* ----- Main column ----- */
.main {
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--topbar-h);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, var(--global-search-w)) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 0 24px;
    background: var(--surface);
    border-bottom: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    transition: transform .22s ease, box-shadow .22s ease;
}

.topbar.is-scroll-hidden {
    transform: translateY(calc(-100% - 8px));
}

@media (prefers-reduced-motion: reduce) {
    .topbar {
        transition: none;
    }
}

/* Chrome compartilhado: sidebar, topbar e navbar mobile usam a mesma
   superfície, sem variações de cor entre os estados. */
.sidebar,
.topbar,
.tabbar {
    background-color: var(--surface);
    border-color: color-mix(in srgb, var(--border-strong) 72%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}

.sidebar {
    box-shadow: 8px 0 26px rgba(0, 0, 0, .14), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}

.topbar {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}

.topbar .crumbs {
    display: flex;
    align-items: center;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
}

.crumbs-track {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.crumb-trail {
    display: flex;
    align-items: center;
    min-width: 0;
    flex-shrink: 0;
}

.crumb-trail:last-child {
    flex-shrink: 1;
}

.crumb-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    min-width: 0;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

.crumb-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.crumb-item::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 80;
    max-width: min(280px, calc(100vw - 32px));
    padding: 7px 9px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -2px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

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

.crumb-link {
    color: var(--text-3);
    font-weight: 500;
}

.crumb-link:hover {
    background: var(--surface-2);
    color: var(--text);
}

.crumb-current {
    max-width: min(300px, 28vw);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-weight: 650;
}

.crumb-current .crumb-icon {
    color: var(--accent);
}

.crumb-icon {
    color: var(--text-3);
}

.crumb-sep {
    flex: 0 0 auto;
    margin: 0 2px;
    color: var(--text-3);
    font-size: 17px;
}

.topbar>.grow {
    display: none;
}

.topbar .icon-btn {
    color: var(--text-2);
}

.topbar .icon-btn.is-on {
    background: var(--surface-2);
    color: var(--text);
}

.topbar-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.topbar-actions .notification-menu {
    grid-column: auto;
}

.topbar-user-menu {
    position: relative;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.topbar-user-menu .user-identity {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 4px;
    justify-content: center;
    gap: 6px;
}

.topbar-user-menu .user-avatar {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    font-size: 11px;
}

.topbar-user-menu .user-actions {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 110;
    width: min(224px, calc(100vw - 20px));
    max-height: 0;
    margin-top: 0;
    padding: 5px;
    grid-template-columns: 1fr;
    gap: 2px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.topbar-user-menu.is-open .user-actions {
    max-height: 270px;
    margin-top: 0;
    padding-top: 5px;
    opacity: 1;
}

.topbar-user-menu .user-action {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 8px;
    text-align: left;
    font-size: 12px;
    line-height: 1.2;
}

.topbar-user-menu .user-action .ic {
    flex: 0 0 19px;
    font-size: 19px;
}

/* ----- Central de notificações ----- */
.notification-menu {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    z-index: 100;
}

.popup-focus-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147483001;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: default;
    animation: popup-focus-backdrop-in .18s ease-out;
}

.popup-focus-backdrop[hidden] {
    display: none;
}

@keyframes popup-focus-backdrop-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body.popup-focus-open .topbar.popup-focus-layer {
    z-index: 2147483002 !important;
    transform: none;
    background: color-mix(in srgb, var(--surface) 42%, rgb(8 8 10) 58%);
    -webkit-backdrop-filter: blur(8px) saturate(.72);
    backdrop-filter: blur(8px) saturate(.72);
}

body.popup-focus-open .topbar.popup-focus-layer>.crumbs,
body.popup-focus-open .topbar.popup-focus-layer>.grow,
body.popup-focus-open .topbar.popup-focus-layer>.gsearch,
body.popup-focus-open .topbar.popup-focus-layer>.gsearch-toggle,
body.popup-focus-open .topbar.popup-focus-layer>.mobile-more-menu:not(.popup-focus-active),
body.popup-focus-open .topbar.popup-focus-layer>.topbar-profile,
body.popup-focus-open .topbar.popup-focus-layer>.topbar-theme,
body.popup-focus-open .topbar.popup-focus-layer>.topbar-logout,
body.popup-focus-open .topbar.popup-focus-layer .topbar-actions>:not(.popup-focus-active) {
    opacity: .58;
    pointer-events: none;
    filter: blur(2px);
}

body.popup-focus-open .popup-focus-active {
    position: relative;
    z-index: 2147483003 !important;
    opacity: 1;
    pointer-events: auto;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .popup-focus-backdrop {
        animation: none;
    }
}

.notification-trigger {
    position: relative;
}

.notification-trigger.has-arrival>.ic {
    animation: notification-bell-arrival 900ms ease-in-out;
    transform-origin: 50% 18%;
}

.notification-edge-light {
    position: fixed;
    inset: 0;
    /* Fica sobre a tela bloqueada, mas é apenas visual e não intercepta toques. */
    z-index: 2147483646;
    pointer-events: none;
    visibility: hidden;
}

.notification-edge-light.is-active {
    visibility: visible;
}

.notification-edge-light__side {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 7px;
    opacity: 0;
    background: linear-gradient(180deg, transparent 0%, var(--accent) 24%, var(--accent) 76%, transparent 100%);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 82%, transparent));
}

.notification-edge-light__side--left {
    left: 0;
    box-shadow: 5px 0 24px 2px color-mix(in srgb, var(--accent) 62%, transparent);
}

.notification-edge-light__side--right {
    right: 0;
    box-shadow: -5px 0 24px 2px color-mix(in srgb, var(--accent) 62%, transparent);
}

.notification-edge-light.is-active .notification-edge-light__side {
    animation: notification-edge-arrival 2.6s ease-out both;
}

@keyframes notification-bell-arrival {

    0%,
    100% {
        transform: rotate(0);
    }

    14%,
    42%,
    70% {
        transform: rotate(14deg);
    }

    28%,
    56%,
    84% {
        transform: rotate(-14deg);
    }
}

@keyframes notification-edge-arrival {
    0% {
        opacity: .82;
    }

    10%,
    34%,
    58% {
        opacity: 1;
    }

    22%,
    46%,
    76% {
        opacity: .32;
    }

    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .notification-trigger.has-arrival,
    .notification-trigger.has-arrival>.ic,
    .notification-edge-light__side {
        animation: none;
    }
}

.notification-badge {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 9px;
    font-weight: 750;
    line-height: 1;
}

.notification-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(480px, calc(100vw - 24px));
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

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

.notification-head>div:not(.notification-head-actions) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notification-head strong {
    font-size: 14px;
}

.notification-head span {
    color: var(--text-3);
    font-size: 11.5px;
}

.notification-head>i {
    color: var(--accent);
}

.notification-head-actions {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 8px;
    min-width: 0;
}

.notification-view-all {
    color: var(--accent);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.notification-sound-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 7px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 10px;
    font-weight: 650;
}

.notification-sound-toggle:hover {
    border-color: var(--border-strong);
    color: var(--accent);
}

.notification-sound-toggle .ic {
    font-size: 16px;
}

.notification-list {
    max-height: min(440px, 65vh);
    overflow-y: auto;
}

.notification-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 5px 14px 10px;
    color: var(--text-3);
    font-size: 11.5px;
}

.notification-loading[hidden] {
    display: none;
}

.notification-loading .ic {
    color: var(--accent);
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

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

.notification-item:hover {
    background: var(--surface-2);
}

.notification-item.is-read {
    opacity: .68;
}

.notification-entry {
    position: relative;
}

.notification-entry>.notification-item {
    padding-right: 44px;
}

.notification-entry .notification-arrow {
    align-self: center;
    margin-top: 0;
    margin-right: 24px;
}

.notification-mark-read {
    display: grid;
    place-items: center;
    position: absolute;
    right: 10px;
    top: 50%;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-3);
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
}

.notification-mark-read:hover,
.notification-mark-read:focus-visible {
    background: var(--surface-3);
    color: var(--accent);
}

.notification-mark-read:disabled {
    display: none;
}

.notification-group>.notification-group-toggle {
    align-items: center;
    min-height: 68px;
    padding-right: 76px;
}

.notification-group>.notification-mark-read {
    right: 40px;
}

.notification-group {
    position: relative;
    border-bottom: 1px solid var(--border);
}

.notification-group:nth-child(odd) {
    background: var(--surface);
}

.notification-group:nth-child(even) {
    background: color-mix(in srgb, var(--surface-2) 52%, var(--surface));
}

.notification-group-toggle {
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.notification-group-toggle .notification-copy {
    order: 2;
}

.notification-group-toggle .notification-time {
    order: 3;
    align-self: center;
    margin-left: auto;
}

.notification-group-toggle .notification-group-count {
    order: 4;
    margin-left: 10px;
}

.notification-group-toggle .notification-arrow {
    order: 5;
    align-self: center;
    margin-top: 0;
    margin-left: 8px;
    margin-right: 0;
}

.notification-group-toggle .notification-arrow {
    transition: transform .18s ease;
}

.notification-group.is-expanded .notification-group-toggle .notification-arrow {
    transform: rotate(180deg);
}

.notification-group-count {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--accent-bg, var(--surface-2));
    color: var(--accent);
    font-size: 10px;
    font-weight: 750;
}

.notification-group-items {
    position: relative;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 35%, transparent);
}

.notification-group-child {
    padding-left: 28px;
    background: transparent;
}

.notification-group-child:last-child {
    border-bottom: 0;
}

.notification-icon {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

.notification-icon--bad {
    color: var(--bad);
    background: var(--bad-bg);
}

.notification-icon--warn {
    color: var(--warn);
    background: var(--warn-bg);
}

.notification-icon--info {
    color: var(--info);
    background: var(--info-bg);
}

.notification-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.notification-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
}

.notification-copy>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-2);
    font-size: 12px;
}

.notification-copy small {
    color: var(--text-3);
    font-size: 10.5px;
}

.notification-time {
    align-self: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
    padding-bottom: 1px;
    color: var(--text-3);
    font-size: 10.5px;
    white-space: nowrap;
}

.notification-arrow {
    flex: 0 0 auto;
    margin-top: 7px;
    color: var(--text-3);
}

.notification-empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 4px;
    padding: 30px 18px 32px;
    text-align: center;
}

.notification-empty>i {
    margin-bottom: 4px;
    color: var(--ok);
}

.notification-empty strong {
    font-size: 13px;
}

.notification-empty span {
    max-width: 230px;
    color: var(--text-3);
    font-size: 11.5px;
}

/* ----- Página de notificações ----- */
.notifications-page-card {
    overflow: hidden;
}

.notifications-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.notifications-bulkbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.notifications-bulkbar form {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.notifications-select-all,
.notification-select {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-2);
    font-size: 11px;
    white-space: nowrap;
}

.notification-select {
    align-self: center;
}

.notifications-select-all-pages {
    display: flex;
    justify-content: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.notifications-select-all-pages[hidden] {
    display: none;
}

.notifications-select-all-pages [data-notification-all-pages-selected] {
    color: var(--text-2);
    font-size: 11px;
}

.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
}

.notification-select-spacer {
    width: 16px;
    height: 16px;
}

.notifications-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.notifications-tabs::-webkit-scrollbar {
    display: none;
}

.notifications-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.notifications-tab:hover {
    background: var(--surface-2);
    color: var(--text);
}

.notifications-tab.active {
    background: var(--surface-2);
    color: var(--accent);
}

.notifications-tab span {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-3);
    font-size: 10px;
    font-weight: 700;
}

.notifications-tab.active span {
    background: var(--accent-weak);
    color: var(--accent);
}

.notifications-page-list {
    display: grid;
}

.notification-page-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.notification-page-row:last-child {
    border-bottom: 0;
}

.notification-page-row:hover {
    background: var(--surface-2);
}

.notification-page-row.is-archived {
    opacity: .72;
}

.notification-page-row.is-read .notification-page-title strong {
    font-weight: 550;
}

.notification-page-copy {
    min-width: 0;
}

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

.notification-page-title strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.notification-page-title .badge {
    flex: 0 0 auto;
}

.notification-page-copy p {
    margin: 3px 0 2px;
    overflow: hidden;
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-page-copy small {
    color: var(--text-3);
    font-size: 10.5px;
}

.notification-page-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.notification-page-actions form {
    margin: 0;
}

.notifications-empty {
    padding: 56px 16px;
}

.notifications-empty span {
    display: block;
    margin-top: 2px;
}

.notifications-page-pagination {
    border-top: 1px solid var(--border);
}

/* ----- Indicador do worker ----- */
.worker-status {
    position: relative;
    flex: 0 0 auto;
    z-index: 100;
}

.worker-status-trigger {
    position: relative;
}

.worker-status-icon {
    position: relative;
    display: grid;
    place-items: center;
}

.worker-status-svg {
    display: block;
    width: 1.4em;
    height: 1.4em;
    transition: color .18s ease;
}

.worker-status[data-tone="ok"] .worker-status-svg--active {
    color: var(--ok);
}

.worker-status[data-tone="warn"] .worker-status-svg--inactive {
    color: var(--warn);
}

.worker-status[data-tone="bad"] .worker-status-svg--inactive,
.worker-status[data-tone="unknown"] .worker-status-svg--inactive {
    color: var(--bad);
}

.worker-status-dot {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 8px;
    height: 8px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--text-3);
}

.worker-status[data-tone="ok"] .worker-status-dot {
    background: var(--ok);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent);
    animation: worker-status-pulse 2.2s ease-out infinite;
}

.worker-status[data-tone="warn"] .worker-status-dot {
    background: var(--warn);
}

.worker-status[data-tone="bad"] .worker-status-dot {
    background: var(--bad);
}

@keyframes worker-status-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent);
    }

    70% {
        box-shadow: 0 0 0 5px transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

.worker-status-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(380px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

/* Agenda compacta da navbar: lista sob demanda, com ações confortáveis no toque. */
.meeting-navbar {
    position: relative;
    flex: 0 0 auto;
    z-index: 100;
}

.meeting-navbar__trigger {
    position: relative;
    color: var(--text-2);
}

.meeting-navbar__trigger[aria-expanded="true"],
.topbar-health-link.is-on {
    background: var(--surface-2);
    color: var(--accent);
}

.meeting-navbar__badge {
    position: absolute;
    top: 1px;
    right: 0;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 9px;
    font-weight: 750;
    line-height: 1;
}

.meeting-navbar__popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(430px, calc(100vw - 24px));
    max-height: min(620px, calc(100dvh - var(--topbar-h) - 24px));
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.meeting-navbar__popover[hidden] {
    display: none;
}

.meeting-navbar__head,
.meeting-navbar__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
}

.meeting-navbar__head {
    border-bottom: 1px solid var(--border);
}

.meeting-navbar__head>div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.meeting-navbar__head strong {
    font-size: 13px;
}

.meeting-navbar__head>div span,
.meeting-navbar__item-copy>span {
    color: var(--text-3);
    font-size: 11px;
}

.meeting-navbar__head .btn {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 11px;
}

.meeting-navbar__list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.meeting-navbar__item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.meeting-navbar__item:hover {
    background: var(--surface-2);
}

.meeting-navbar__when {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 40px;
    border-radius: 9px;
    background: var(--accent-weak);
    color: var(--accent-hover);
    line-height: 1.1;
}

.meeting-navbar__when strong {
    font-size: 14px;
}

.meeting-navbar__when span {
    font-size: 9px;
    text-transform: uppercase;
}

.meeting-navbar__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.meeting-navbar__title,
.meeting-navbar__copy>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meeting-navbar__title {
    font-size: 12px;
    font-weight: 650;
}

.meeting-navbar__title:hover {
    color: var(--accent-hover);
}

.meeting-navbar__actions {
    display: flex;
    gap: 2px;
}

.meeting-navbar__actions .icon-btn {
    width: 34px;
    height: 34px;
    min-height: 34px;
}

.meeting-navbar__foot {
    border-top: 1px solid var(--border);
}

.meeting-navbar__foot a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 600;
}

.meeting-navbar__foot a:hover {
    color: var(--accent);
}

.meeting-navbar__loading,
.meeting-navbar__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    min-height: 112px;
    padding: 18px;
    color: var(--text-3);
    font-size: 11px;
    text-align: center;
}

.meeting-navbar__empty .ic {
    color: var(--accent);
}

.meeting-navbar__empty strong {
    color: var(--text-2);
    font-size: 12px;
}

.worker-status-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 15px 12px;
    border-bottom: 1px solid var(--border);
}

.worker-status-head>div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.worker-status-head strong {
    font-size: 13px;
}

.worker-status-head span:not(.worker-status-badge) {
    color: var(--text-3);
    font-size: 11px;
}

.worker-status-badge {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 10px;
    font-weight: 700;
}

.worker-status-badge[data-tone="ok"] {
    background: var(--ok-bg);
    color: var(--ok);
}

.worker-status-badge[data-tone="warn"] {
    background: var(--warn-bg);
    color: var(--warn);
}

.worker-status-badge[data-tone="bad"] {
    background: var(--bad-bg);
    color: var(--bad);
}

.worker-status-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 13px 15px;
}

.worker-status-metrics div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.worker-status-metrics span,
.worker-status-foot span {
    color: var(--text-3);
    font-size: 10px;
}

.worker-status-metrics strong {
    font-size: 16px;
}

.worker-status-updated {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 15px 10px;
    color: var(--text-3);
    font-size: 10px;
}

.worker-status-updated .ic {
    font-size: 13px;
}

.worker-status-last,
.worker-status-trend {
    margin: 0 15px 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.worker-status-last div,
.worker-status-trend>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.worker-status-last span,
.worker-status-trend span {
    color: var(--text-3);
    font-size: 10px;
}

.worker-status-last strong,
.worker-status-trend strong {
    color: var(--text);
    font-size: 11px;
}

.worker-status-last>span {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.worker-status-trend svg {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 7px;
    overflow: visible;
}

.worker-status-trend polyline {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: d .35s ease;
}

.worker-status-queues {
    max-height: 226px;
    margin: 0 15px 10px;
    overflow-y: auto;
}

.worker-status-queues-title {
    margin: 2px 0 6px;
    color: var(--text-3);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.worker-status-queue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.worker-status-queue>div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.worker-status-queue strong {
    font-size: 11px;
}

.worker-status-queue small,
.worker-status-queue>span {
    overflow: hidden;
    color: var(--text-3);
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.worker-status-queue[data-tone="warn"] strong,
.worker-status-queue[data-tone="warn"] b {
    color: var(--warn);
}

.worker-status-queue[data-tone="bad"] strong,
.worker-status-queue[data-tone="bad"] b {
    color: var(--bad);
}

.worker-status-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 15px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.worker-status-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 15px 10px;
}

.worker-status-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    gap: 5px;
    padding: 6px 8px;
    font-size: 11px;
}

.worker-status-actions .btn .ic {
    flex: 0 0 auto;
    font-size: 16px;
}

.worker-status-actions .btn[disabled] {
    opacity: .6;
    cursor: wait;
}

.worker-status-consolidated {
    padding: 0 15px 10px;
    color: var(--text-3);
    font-size: 10px;
}

.worker-status-foot a {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-2);
    font-size: 10.5px;
    font-weight: 650;
}

.worker-status-foot a:hover {
    color: var(--accent);
}

/* ----- Mais ações (mobile) ----- */
.mobile-more-menu {
    display: none;
    position: relative;
    flex: 0 0 auto;
    z-index: 100;
}

.mobile-more-trigger {
    color: var(--text-2);
}

.mobile-more-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(240px, calc(100vw - 20px));
    max-height: min(620px, calc(100dvh - var(--topbar-h) - 24px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.mobile-more-section+.mobile-more-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.mobile-more-operations {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 6px;
}

.mobile-more-operations .worker-status,
.mobile-more-operations .ai-usage-gadget,
.mobile-more-operations .topbar-health-link {
    display: block;
}

.mobile-more-operations .ai-usage-gadget__trigger {
    min-width: 40px;
    min-height: 36px;
}

.mobile-more-operations .topbar-health-link {
    display: inline-flex;
    flex: 0 0 40px;
    width: 40px;
    height: 36px;
}

.mobile-more-heading {
    display: block;
    padding: 3px 10px 6px;
    color: var(--text-3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mobile-more-item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    color: var(--text-2);
    font-size: 12.5px;
    text-align: left;
}

.mobile-more-item:hover {
    background: var(--surface-2);
    color: var(--text);
}

.mobile-more-item.is-active {
    background: var(--accent-weak);
    color: var(--accent);
}

.mobile-more-item i.ic {
    color: var(--text-3);
}

.mobile-more-item--danger:hover,
.mobile-more-item--danger:hover i.ic {
    color: var(--bad);
}

.mobile-more-popover form {
    margin: 0;
}

/* Ações equivalentes ficam na sidebar no desktop e reaparecem na topbar
   somente quando a sidebar é substituída pela navegação mobile. */
.topbar .gsearch-toggle,
.topbar .topbar-profile,
.topbar .topbar-theme,
.topbar-logout {
    display: none;
}

/* Linha de busca colapsável (mobile) */
.topsearch {
    display: none;
}

/* ----- Preloader global ----- */
#app-preloader {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    pointer-events: auto;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    color: var(--text-2);
    background: var(--bg);
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease, visibility .18s ease;
}

#app-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Evita que a divisão inferior da topbar apareça como uma linha no topo do
   preloader durante a navegação entre páginas. */
#app-preloader:not(.is-hidden) ~ .app .topbar {
    visibility: hidden;
}

#app-preloader img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    animation: preloader-pulse 1.2s ease-in-out infinite;
}

#app-preloader .preloader-progress {
    width: min(220px, 56vw);
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-3);
}

#app-preloader .preloader-progress span {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
    animation: preloader-progress 1.15s ease-in-out infinite;
}

@keyframes preloader-pulse {
    50% {
        transform: scale(.92);
        opacity: .62;
    }
}

@keyframes preloader-progress {
    0% {
        transform: translateX(-110%);
    }

    55% {
        transform: translateX(175%);
    }

    100% {
        transform: translateX(285%);
    }
}

@media (prefers-reduced-motion: reduce) {

    #app-preloader img,
    #app-preloader .preloader-progress span {
        animation: none;
    }

    #app-preloader .preloader-progress span {
        width: 100%;
    }
}

/* ----- Global search ----- */
.gsearch {
    position: relative;
    /* Cresce com a viewport, mas mantém uma largura confortável para não
       disputar espaço com breadcrumbs e ações da topbar. */
    width: var(--global-search-w);
}

/* No desktop, a busca fica no centro visual da janela, compensando a sidebar
   e sem depender do tamanho dos breadcrumbs ou dos controles. */
.topbar>.gsearch {
    position: absolute;
    left: calc(50vw - var(--sidebar-w));
    transform: translateX(-50%);
    width: var(--global-search-w);
    max-width: calc(100% - 320px);
}

.gsearch>i.ic {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    font-size: 18px;
    pointer-events: none;
}

.gsearch input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}

.gsearch input::placeholder {
    color: var(--text-3);
}

.gsearch input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
}

.gsearch-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    padding: 6px;
    max-height: 60vh;
    overflow: auto;
    z-index: 40;
}

.gsearch-pop .grp {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-3);
    padding: 8px 10px 4px;
}

.gsearch-pop a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
}

.gsearch-pop a:hover,
.gsearch-pop a.is-active {
    background: var(--surface-2);
}

.gsearch-pop a i.ic {
    color: var(--text-3);
    font-size: 18px;
}

.gsearch-pop .none {
    padding: 14px 10px;
    color: var(--text-3);
}

/* ----- Content ----- */
.content {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 26px clamp(20px, 2.4vw, 40px) 50px;
    flex: 1;
    min-width: 0;
}

/* Formulários usam toda a largura útil, como um col-12 do conteúdo. */
.content.content--narrow {
    max-width: var(--content-max);
}

.content.content--wide {
    max-width: none;
}

/* Listas em tabela nunca empurram a página: rolam dentro da própria caixa */
#client-results,
#project-results,
#meeting-results,
#tx-results,
#lead-results {
    overflow-x: auto;
}

.page-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.page-head .t {
    flex: 1;
    min-width: 0;
}

.page-head>.context-back {
    flex: 0 0 34px;
}

.page-head h1 {
    font-size: 22px;
    letter-spacing: -.02em;
}

.page-head .lead {
    color: var(--text-2);
    margin-top: 3px;
}

.page-head .actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.page-head--rich {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(220px, 260px);
    align-items: start;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.page-head--rich .actions {
    width: 100%;
    max-width: 260px;
    min-width: 0;
    padding-left: 20px;
    border-left: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.page-head--rich .t {
    grid-column: 2;
}

.page-head--rich .actions {
    grid-column: 3;
}

.page-head--rich .actions>.btn,
.page-head--rich .actions>form,
.page-head--rich .actions>form .btn {
    width: 100%;
}

.page-head--rich .actions>.btn,
.page-head--rich .actions>form .btn {
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.2;
}

.page-head--rich .actions>.btn i.ic,
.page-head--rich .actions>form .btn i.ic {
    font-size: 17px;
}

.page-head--rich .page-head__secondary-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding-top: 2px;
}

.page-head--rich .t,
.page-head--rich .detail-hero,
.page-head--rich .detail-identity {
    min-width: 0;
}

.page-head--rich .detail-hero {
    display: grid;
    gap: 9px;
}

.page-head--rich .detail-identity {
    gap: 14px;
}

.page-head--rich .detail-identity h1,
.page-head--rich .detail-hero>h1 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.page-head__secondary-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.page-head__secondary-actions .btn {
    flex: 1 1 auto;
}

/* Cabeçalho de detalhe de sistema: conteúdo 10/12 e ações 2/12, sem deixar
   que nomes longos comprimam ou atravessem os botões. */
.system-detail-head {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas: "back content";
    align-items: start;
}

.system-detail-head>.context-back {
    grid-area: back;
}

.system-detail-columns {
    grid-area: content;
    display: grid;
    grid-template-columns: minmax(0, 10fr) minmax(0, 2fr);
    align-items: start;
    gap: 20px;
    width: 100%;
    min-width: 0;
}

.system-detail-columns>.t {
    grid-column: 1;
    min-width: 0;
}

/* O seletor do cabeçalho rico também define grid-column para `.t`. Fixar
   explicitamente a área e o estiramento impede que o resumo colapse em uma
   coluna mínima ao lado das ações. */
.page-head--rich.system-detail-head .system-detail-columns>.t {
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-self: stretch;
}

.page-head--rich.system-detail-head .system-detail-columns>.t .detail-hero {
    width: 100%;
    min-width: 0;
}

.system-detail-columns>.system-detail-actions {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-self: stretch;
    padding: 0 0 0 16px;
    border-left: 1px solid var(--border);
    display: grid;
    gap: 10px;
    align-content: start;
    justify-items: stretch;
}

.system-detail-actions .btn {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.2;
}

.system-detail-actions .btn i.ic {
    font-size: 17px;
}

.system-detail-actions .system-action-links {
    display: grid;
    gap: 10px;
    justify-items: stretch;
    width: 100%;
}

.system-detail-actions .system-action-main {
    min-height: 36px;
}

.system-detail-head .detail-hero {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.system-detail-head .detail-identity {
    min-width: 0;
    gap: 14px;
}

.system-detail-head .detail-identity h1 {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: clamp(22px, 2.1vw, 30px);
}

.system-detail-head .detail-hero .lead {
    max-width: 70ch;
}

.context-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 7px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    white-space: nowrap;
}

.context-back:hover {
    color: var(--accent-hover);
    background: var(--accent-weak);
    border-color: var(--accent-weak-2);
}

.context-back:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Perfil */
.profile-layout {
    display: grid;
    grid-template-columns: minmax(230px, .62fr) minmax(0, 1.38fr);
    gap: 20px;
    align-items: start;
}

.profile-summary {
    position: sticky;
    top: calc(var(--topbar-h) + 20px);
}

.profile-summary-head {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.profile-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--accent-weak);
    color: var(--accent-hover);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.profile-summary-copy {
    min-width: 0;
}

.profile-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.profile-summary h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
}

.profile-summary-copy p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
    color: var(--text-3);
    font-size: 12px;
}

.profile-status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
    color: var(--ok);
    font-size: 12.5px;
    font-weight: 600;
}

.profile-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
}

.profile-note {
    margin-top: 16px;
    color: var(--text-3);
    font-size: 12.5px;
    line-height: 1.55;
}

.profile-form {
    max-width: none;
}

.profile-form-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.profile-form-head>div {
    flex: 1;
    min-width: 0;
}

.profile-form-head h2 {
    font-size: 16px;
}

.profile-form-head p {
    margin-top: 3px;
    color: var(--text-3);
    font-size: 12.5px;
}

.profile-form-head>i.ic {
    color: var(--accent);
}

/* ----- Bottom nav (mobile) ----- */
.tabbar {
    display: none;
}

/* =====================================================================
   Componentes
   ===================================================================== */

/* Cards */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}

.card.pad {
    padding: 18px;
}

.card.pad-lg {
    padding: 22px;
}

.card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.card-head h2 {
    font-size: 14px;
    font-weight: 600;
}

.card-head .grow {
    flex: 1;
}

/* Busca embutida nos cabeçalhos de cards, como em Cobranças. */
.card-head>.search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 520px;
    min-width: 260px;
    max-width: 100%;
}

.card-head>.search .search-field {
    position: relative;
    display: block;
    flex: 1 1 240px;
    min-width: 0;
}

.card-head>.search .search-field>i.ic {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    pointer-events: none;
}

.card-head>.search input,
.card-head>.search select {
    height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
}

.card-head>.search input {
    width: 100%;
    padding: 8px 12px 8px 35px;
}

.card-head>.search select {
    max-width: 152px;
    padding: 0 28px 0 10px;
}

.card-head>.search input::placeholder {
    color: var(--text-3);
}

.card-head>.search input:focus,
.card-head>.search select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
}

.card-head>.search .icon-btn {
    flex: 0 0 36px;
    height: 36px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
}

.card-head a.more {
    font-size: 13px;
    color: var(--accent-hover);
    font-weight: 500;
}

.card-body {
    padding: 6px 18px 10px;
}

.card-body.flush {
    padding: 0;
}

/* Catálogo de sistemas e agentes Aurélio */
.system-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.system-card {
    position: relative;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    transition: border-color .12s, box-shadow .12s, transform .12s;
}

.system-card-main {
    display: block;
    min-width: 0;
    padding: 18px;
}

.system-card--billing-missing {
    background: linear-gradient(135deg, rgba(239, 68, 68, .08), transparent 62%), var(--surface);
    border-color: rgba(239, 68, 68, .38);
}

.system-card--billing-missing:hover {
    border-color: rgba(239, 68, 68, .62);
}

.system-billing-alert {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    color: var(--bad);
    font-size: 12px;
    font-weight: 600;
}

.system-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    z-index: 2;
}

.system-opportunity {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 500;
}

.system-client-peek {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin: -8px 18px 12px;
    z-index: 3;
}

.system-client-peek summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.system-client-peek summary::-webkit-details-marker {
    display: none;
}

.system-client-peek summary:hover,
.system-client-peek:focus-within summary {
    color: var(--accent);
    border-color: var(--border-strong);
}

.system-client-popover {
    position: absolute;
    right: 0;
    bottom: calc(100% + 7px);
    width: max-content;
    min-width: 190px;
    max-width: min(280px, 75vw);
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface-2);
    box-shadow: var(--shadow-md);
    color: var(--text);
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .12s, transform .12s, visibility .12s;
    pointer-events: none;
}

.system-client-peek:hover .system-client-popover,
.system-client-peek:focus-within .system-client-popover,
.system-client-peek[open] .system-client-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.system-client-popover strong {
    display: block;
    margin-bottom: 7px;
}

.system-client-popover ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.system-client-popover li {
    overflow-wrap: anywhere;
}

.system-client-popover li span {
    display: block;
    color: var(--text-3);
    font-size: 11px;
}

@media (max-width: 640px) {
    .system-client-peek {
        margin: -8px 14px 12px;
    }

    .system-client-popover {
        max-height: min(50dvh, 280px);
        overflow: auto;
    }
}

.system-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.system-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 12px;
    color: var(--accent);
    background: var(--accent-weak);
}

.system-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.system-card h2 {
    margin-top: 16px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-slug,
.system-client {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    color: var(--text-3);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-card-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--text-3);
    font-size: 11.5px;
}

.system-card-foot span {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-token-notice {
    margin-bottom: 14px;
}

.system-snippet {
    margin-bottom: 18px;
}

.token-line {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.token-line input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

.system-snippet pre {
    overflow-x: auto;
    margin: 12px 0 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font: 11.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.system-snippet code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.system-agent-card .card-head {
    background: linear-gradient(90deg, var(--accent-weak), transparent 68%);
}

.system-agent-card .card-head h2 i.ic {
    color: var(--accent);
}

.system-agent-card .card-body {
    padding: 16px 18px 18px;
}

.system-agent-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.system-agent-meta .m {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.system-agent-meta .m .val {
    overflow: hidden;
    margin-top: 5px;
    color: var(--text-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-agent-card form {
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

.system-agent-card form .btn {
    width: auto;
}

.memory-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.memory-actions form {
    display: flex;
}

.knowledge-source {
    max-height: 650px;
    margin: 0;
    padding: 14px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.knowledge-chunks {
    display: grid;
    gap: 10px;
    max-height: 650px;
    overflow: auto;
}

.knowledge-chunks article {
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.knowledge-chunks article p {
    margin-top: 8px;
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.conversation-links {
    display: grid;
    gap: 7px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.conversation-links strong {
    color: var(--text-2);
    font-size: 12px;
}

.conversation-links .badge {
    width: fit-content;
}

.aurelio-toolbar {
    align-items: center;
    margin-bottom: 16px;
}

.aurelio-toolbar .search {
    flex: 1 1 300px;
    min-width: 180px;
}

.aurelio-toolbar>select {
    min-width: 150px;
}

.aurelio-graph-card {
    margin-bottom: 20px;
}

.graph-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-3);
    font-size: 11px;
    white-space: nowrap;
}

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

.graph-legend span::before {
    content: "";
    display: block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border-strong);
}

.graph-legend__memory::before {
    background: var(--accent) !important;
}

.graph-legend__document::before {
    background: var(--info) !important;
}

.graph-legend__conversation::before {
    background: var(--ok) !important;
}

.aurelio-graph-scroll {
    overflow: auto;
    max-height: 570px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    scroll-behavior: smooth;
}

.aurelio-graph {
    display: block;
    width: 100%;
    min-width: 780px;
    height: 420px;
}

.aurelio-graph__edge {
    fill: none;
    stroke: var(--border-strong);
    stroke-width: 1.5;
    opacity: .72;
}

.aurelio-graph__node rect {
    fill: var(--surface);
    stroke: var(--border-strong);
    stroke-width: 1.5;
}

.aurelio-graph__node--document rect {
    stroke: var(--info);
}

.aurelio-graph__node--conversation rect {
    stroke: var(--ok);
}

.aurelio-graph__node--memory circle {
    fill: var(--accent);
    stroke: var(--accent-hover);
    stroke-width: 2;
}

.aurelio-graph__node text {
    fill: var(--text);
    font: 600 12px var(--font);
    pointer-events: none;
}

.aurelio-graph__node--memory text {
    fill: var(--text);
}

.aurelio-graph__node .aurelio-graph__meta {
    fill: var(--text-3);
    font-size: 10px;
    font-weight: 500;
}

.aurelio-graph__node.is-link {
    cursor: pointer;
}

.aurelio-graph__node.is-link:hover rect {
    fill: var(--surface-3);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    color: var(--text-3);
    font-size: 12px;
}

.pagination .icon-btn {
    width: 30px;
    height: 30px;
}

.ticket-id {
    color: var(--accent-hover);
    font-size: 11px;
    font-weight: 650;
    margin-right: 5px;
}

.ticket-description {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.6;
    color: var(--text-2);
}

.ticket-requester {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: var(--text-3);
    font-size: 12.5px;
}

.ticket-requester i.ic {
    color: var(--accent);
}

.ticket-conversation {
    display: grid;
    gap: 10px;
    max-height: 560px;
    overflow-y: auto;
}

.ticket-message {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.ticket-message--user {
    border-left: 3px solid var(--info);
}

.ticket-message--assistant {
    border-left: 3px solid var(--accent);
}

.ticket-message-role {
    display: block;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ticket-message p {
    margin-top: 4px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text-2);
}

.ticket-message small {
    display: block;
    margin-top: 6px;
    color: var(--text-3);
    font-size: 10.5px;
}

.ticket-side-title {
    margin-bottom: 16px;
    font-size: 15px;
}

.ticket-meta {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

.ticket-meta>div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ticket-meta .key {
    color: var(--text-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ticket-meta .val {
    overflow: hidden;
    color: var(--text-2);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grades utilitárias */
.grid {
    display: grid;
    gap: 16px;
    min-width: 0;
}

/* Grid/flex items keep their own content inside the available track instead
   of forcing a wider parent (especially in nested dashboard cards). */
.grid > *,
.stack > *,
.card {
    min-width: 0;
}

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

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

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

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

.grid.dash {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
}

.stack {
    display: grid;
    gap: 20px;
}

/* Dashboard: densidade própria para evitar colunas estreitas e espaços
   verticais desnecessários quando a largura muda. */
.dashboard-page {
    min-width: 0;
}

.dashboard-stats {
    align-items: stretch;
    margin-bottom: 22px;
}

.dashboard-stats .stat {
    height: 100%;
    box-sizing: border-box;
}

.dashboard-quick-menu {
    position: relative;
}

.dashboard-quick-menu>summary {
    list-style: none;
}

.dashboard-quick-menu>summary::-webkit-details-marker {
    display: none;
}

.dashboard-quick-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    display: grid;
    width: min(330px, calc(100vw - 32px));
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-pop);
}

.dashboard-quick-menu__panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--text-2);
    text-decoration: none;
}

.dashboard-quick-menu__panel a:hover,
.dashboard-quick-menu__panel a:focus-visible {
    background: var(--accent-weak);
    color: var(--accent-hover);
}

.dashboard-quick-menu__panel .ic {
    color: var(--accent);
}

.dashboard-priorities {
    margin-bottom: 20px;
    min-width: 0;
}

.dashboard-priority-counts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.dashboard-priority-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--text-2);
    text-decoration: none;
}

.dashboard-priority-count:hover {
    border-color: var(--accent);
    color: var(--text);
}

.dashboard-priority-count span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-priority-count strong {
    font-size: 18px;
    color: var(--text);
}

.dashboard-priority-count--bad strong {
    color: var(--bad);
}

.dashboard-priority-count--warn strong {
    color: var(--warn);
}

.dashboard-priority-list {
    display: grid;
}

.dashboard-priority-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px 2px;
    border-top: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.dashboard-priority-item:hover .dashboard-priority-item__content strong {
    color: var(--accent-hover);
}

.dashboard-priority-item .ico {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
}

.dashboard-priority-item__content {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.dashboard-priority-item__meta,
.dashboard-priority-item__content strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-priority-item__meta,
.dashboard-priority-item__date {
    color: var(--text-3);
    font-size: 12px;
}

.dashboard-priority-item__amount {
    color: var(--ok);
    white-space: nowrap;
}

.dashboard-priorities-empty {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 2px 2px;
    border-top: 1px solid var(--border);
    color: var(--text-3);
}

.dashboard-priorities-empty .ic {
    color: var(--ok);
}

.dashboard-page .empty.dashboard-meetings-empty {
    min-height: 0;
    padding: 14px 12px;
}

.dashboard-page .empty.dashboard-leads-empty {
    padding: 22px 12px;
}

.dashboard-stats .stat--cashflow .cashflow-progress {
    display: flex;
    height: 5px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--track);
}

.cashflow-progress>span {
    height: 100%;
    flex: 0 0 auto;
    transition: width .25s ease;
}

.cashflow-progress__receive {
    background: var(--ok);
}

.cashflow-progress__pay {
    background: var(--warn);
}

.financial-values-hidden [data-financial-progress] {
    visibility: hidden;
}

.dashboard-chart {
    position: relative;
    width: min(220px, 100%);
    height: 220px;
    margin-inline: auto;
}

.dashboard-chart canvas {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

.dashboard-chart-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    gap: 1px;
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.dashboard-chart-center strong {
    font-size: 26px;
    line-height: 1.1;
}

.dashboard-chart-center small {
    color: var(--text-3);
}

.dashboard-project-status {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.dashboard-projects-card {
    container: dashboard-projects / inline-size;
}

.dashboard-overview {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(220px, 5fr);
    align-items: stretch;
    gap: 16px;
    min-width: 0;
}

.dashboard-overview>.card {
    min-width: 0;
}

.dashboard-scheduler-queues-card {
    min-width: 0;
    overflow: hidden;
}

.dashboard-scheduler-queues-card .card-body {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 250px;
    min-width: 0;
}

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

.dashboard-execution-summary>div {
    display: grid;
    gap: 2px;
}

.dashboard-execution-summary strong {
    font-size: 20px;
    line-height: 1.15;
}

.dashboard-execution-summary span,
.dashboard-execution-failures {
    color: var(--text-3);
    font-size: 11px;
}

.dashboard-execution-chart {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 142px;
    overflow: hidden;
}

.dashboard-execution-chart canvas {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

.dashboard-execution-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
    min-width: 0;
    color: var(--text-3);
    font-size: 10px;
}

.dashboard-execution-legend>span {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    line-height: 1.3;
}

.dashboard-execution-legend__dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dashboard-execution-legend__dot--schedule {
    background: var(--accent);
}

.dashboard-execution-legend__dot--queue {
    background: var(--ok);
}

.dashboard-execution-legend__dot--failure {
    background: var(--bad);
}

.dashboard-execution-failures {
    margin: 0;
}

.dashboard-project-legend {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.dashboard-project-legend a {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border-radius: 8px;
    color: var(--text-2);
    text-decoration: none;
    min-width: 0;
}

.dashboard-project-legend a > span:nth-child(2) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dashboard-project-legend a:hover,
.dashboard-project-legend a:focus-visible {
    background: var(--surface-2);
    color: var(--text);
}

.dashboard-project-legend__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dashboard-project-legend strong {
    color: var(--text);
}

@container dashboard-projects (max-width: 560px) {
    .dashboard-project-status {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .dashboard-project-status .dashboard-chart {
        width: min(180px, 100%);
        height: 180px;
    }

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

.dashboard-project-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 16px 8px 20px;
    color: var(--text-3);
    text-align: center;
}

.dashboard-project-empty strong {
    color: var(--text);
}

.dashboard-project-empty__ring {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 7px solid var(--surface-3);
    border-radius: 50%;
    color: var(--accent);
}

.dashboard-project-empty .btn {
    margin-top: 5px;
}

.dashboard-lead-stages {
    display: grid;
    gap: 12px;
}

.dashboard-lead-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 12px;
    color: var(--text-2);
    text-decoration: none;
}

.dashboard-lead-stage:hover,
.dashboard-lead-stage:focus-visible {
    color: var(--text);
}

.dashboard-lead-stage strong {
    color: var(--text);
}

.dashboard-lead-stage__track {
    grid-column: 1 / -1;
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--track);
}

.dashboard-lead-stage__track>span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--lead-stage-color, var(--accent));
}

.dashboard-finance-summary {
    gap: 10px;
    margin-bottom: 4px;
}

.dashboard-finance-list {
    margin-top: 6px;
}

.dashboard-finance-count {
    font-size: 0.9em;
}

.dashboard-finance-preview {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.dashboard-meetings-empty {
    min-height: 72px;
    padding: 10px 8px;
}

.dashboard-meetings-empty .ic {
    font-size: 22px;
}

.dashboard-meetings-empty a {
    color: var(--accent);
    font-size: 12px;
    text-decoration: none;
}

.dashboard-agenda-card {
    margin-top: 20px;
    min-width: 0;
}

.dashboard-agenda-caption {
    margin: 3px 0 0;
    color: var(--text-3);
    font-size: 12px;
}

.dashboard-activity-card {
    min-width: 0;
    margin-bottom: 20px;
}

.dashboard-activity-head {
    gap: 14px;
}

.dashboard-activity-scopes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
    margin-left: auto;
}

.dashboard-activity-scopes .btn {
    min-height: 28px;
    padding: 3px 9px;
    font-size: 12px;
    line-height: 1.2;
}

.dashboard-activity-body {
    min-width: 0;
}

.dashboard-activity-risks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.dashboard-activity-risk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-2);
    text-decoration: none;
    font-size: 12px;
}

.dashboard-activity-risk strong {
    color: var(--text);
    font-size: 14px;
}

.dashboard-activity-risk:hover {
    border-color: currentColor;
}

.dashboard-activity-risk--danger {
    color: var(--bad);
    background: color-mix(in srgb, var(--bad) 8%, var(--surface));
}

.dashboard-activity-risk--warning {
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 8%, var(--surface));
}

.dashboard-activity-risk--upcoming {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.dashboard-activity-calendar {
    min-width: 0;
    overflow-x: auto;
    padding: 2px 0 6px;
}

.dashboard-activity-months,
.dashboard-activity-map {
    display: grid;
    grid-template-columns: repeat(20, minmax(12px, 1fr));
    gap: 4px;
    min-width: 320px;
}

.dashboard-activity-months {
    margin-bottom: 6px;
    color: var(--text-3);
    font-size: 10px;
}

.dashboard-activity-months span {
    min-height: 13px;
}

.dashboard-activity-week {
    display: grid;
    grid-template-rows: repeat(7, 12px);
    gap: 4px;
}

.dashboard-activity-day,
.dashboard-activity-legend i {
    width: 100%;
    height: 12px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: var(--activity-level-0, color-mix(in srgb, var(--text-3) 12%, transparent));
}

.dashboard-activity-day {
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}

.dashboard-activity-day:hover:not(:disabled),
.dashboard-activity-day:focus-visible {
    filter: brightness(1.25);
    transform: scale(1.14);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.dashboard-activity-day:disabled {
    visibility: hidden;
    cursor: default;
}

.dashboard-activity-day[data-activity-level="1"],
.dashboard-activity-legend i[data-activity-level="1"] {
    background: color-mix(in srgb, var(--ok) 26%, var(--surface));
}

.dashboard-activity-day[data-activity-level="2"],
.dashboard-activity-legend i[data-activity-level="2"] {
    background: color-mix(in srgb, var(--ok) 48%, var(--surface));
}

.dashboard-activity-day[data-activity-level="3"],
.dashboard-activity-legend i[data-activity-level="3"] {
    background: color-mix(in srgb, var(--ok) 72%, var(--surface));
}

.dashboard-activity-day[data-activity-level="4"],
.dashboard-activity-legend i[data-activity-level="4"] {
    background: var(--ok);
}

.dashboard-activity-day[data-activity-impact="negative"][data-activity-level="1"],
.dashboard-activity-legend i[data-activity-impact="negative"] {
    background: color-mix(in srgb, var(--bad) 28%, var(--surface));
}

.dashboard-activity-day[data-activity-impact="negative"][data-activity-level="2"] {
    background: color-mix(in srgb, var(--bad) 50%, var(--surface));
}

.dashboard-activity-day[data-activity-impact="negative"][data-activity-level="3"] {
    background: color-mix(in srgb, var(--bad) 74%, var(--surface));
}

.dashboard-activity-day[data-activity-impact="negative"][data-activity-level="4"] {
    background: var(--bad);
}

.dashboard-activity-day[data-activity-impact="mixed"][data-activity-level="1"],
.dashboard-activity-legend i[data-activity-impact="mixed"] {
    background: color-mix(in srgb, var(--warn) 28%, var(--surface));
}

.dashboard-activity-day[data-activity-impact="mixed"][data-activity-level="2"] {
    background: color-mix(in srgb, var(--warn) 50%, var(--surface));
}

.dashboard-activity-day[data-activity-impact="mixed"][data-activity-level="3"] {
    background: color-mix(in srgb, var(--warn) 74%, var(--surface));
}

.dashboard-activity-day[data-activity-impact="mixed"][data-activity-level="4"] {
    background: var(--warn);
}

.dashboard-activity-day[data-activity-impact="neutral"][data-activity-level="1"] {
    background: color-mix(in srgb, var(--text-3) 22%, var(--surface));
}

.dashboard-activity-day[data-activity-impact="neutral"][data-activity-level="2"] {
    background: color-mix(in srgb, var(--text-3) 34%, var(--surface));
}

.dashboard-activity-day[data-activity-impact="neutral"][data-activity-level="3"] {
    background: color-mix(in srgb, var(--text-3) 48%, var(--surface));
}

.dashboard-activity-day[data-activity-impact="neutral"][data-activity-level="4"] {
    background: color-mix(in srgb, var(--text-3) 62%, var(--surface));
}

.dashboard-activity-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 8px;
    color: var(--text-3);
    font-size: 11px;
}

.dashboard-activity-legend>span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dashboard-activity-legend i {
    width: 12px;
    min-width: 12px;
    border-radius: 3px;
}

.dashboard-activity-legend i[data-activity-impact="neutral"] {
    background: color-mix(in srgb, var(--text-3) 35%, var(--surface));
}

.dashboard-activity-legend i[data-activity-impact="positive"] {
    background: var(--ok);
}

.dashboard-activity-score {
    font-weight: 700;
}

.dashboard-activity-score--positive {
    color: var(--ok);
}

.dashboard-activity-score--negative {
    color: var(--bad);
}

.dashboard-activity-score--neutral {
    color: var(--text-2);
}

.dashboard-activity-dialog {
    width: min(520px, calc(100vw - 28px));
    max-height: min(75dvh, 620px);
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 24px 70px #0008;
}

.dashboard-activity-dialog::backdrop {
    background: #08090bb8;
    backdrop-filter: blur(4px);
}

.dashboard-activity-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.dashboard-activity-dialog__head h2 {
    margin: 0;
    font-size: 17px;
}

.dashboard-activity-dialog__head p {
    margin: 4px 0 0;
    color: var(--text-3);
    font-size: 13px;
}

.dashboard-activity-dialog__items {
    max-height: calc(min(75dvh, 620px) - 72px);
    overflow-y: auto;
    padding: 8px 18px 14px;
}

.dashboard-activity-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}

.dashboard-activity-event--success {
    border-left: 3px solid var(--ok);
    padding-left: 10px;
}

.dashboard-activity-event--warning {
    border-left: 3px solid var(--warn);
    padding-left: 10px;
}

.dashboard-activity-event--danger {
    border-left: 3px solid var(--bad);
    padding-left: 10px;
}

.dashboard-activity-event--muted {
    opacity: .72;
}

.dashboard-activity-event:last-child {
    border-bottom: 0;
}

.dashboard-activity-event>span {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 4px;
}

.dashboard-activity-impact {
    flex: 0 0 auto;
    min-width: 34px;
    padding: 4px 7px;
    border-radius: 999px;
    text-align: center;
    font-size: 12px;
}

.dashboard-activity-impact--positive {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 14%, transparent);
}

.dashboard-activity-impact--negative {
    color: var(--bad);
    background: color-mix(in srgb, var(--bad) 14%, transparent);
}

.dashboard-activity-impact--neutral {
    color: var(--text-3);
    background: color-mix(in srgb, var(--text-3) 12%, transparent);
}

.dashboard-activity-event strong {
    font-size: 14px;
}

.dashboard-activity-event span span {
    color: var(--text-2);
    font-size: 13px;
}

.dashboard-activity-event small,
.dashboard-activity-empty {
    color: var(--text-3);
    font-size: 12px;
}

.dashboard-activity-event:hover strong {
    color: var(--accent);
}

@media (max-width: 640px) {
    .dashboard-activity-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-activity-scopes {
        align-self: flex-end;
        width: auto;
        margin-left: 0;
    }

    .dashboard-activity-scopes .btn {
        flex: 0 1 auto;
    }

    .dashboard-activity-risks {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .dashboard-activity-months,
    .dashboard-activity-map {
        min-width: 360px;
    }
}

@media (max-width: 1080px) {
    .dashboard-activity-card {
        margin-bottom: 14px;
    }
}

.dashboard-agenda-wrap {
    max-height: 520px;
    min-width: 0;
    padding: 16px 16px 16px;
    overflow: auto;
}

.dashboard-agenda-wrap .operations-board {
    min-width: 0;
}

.dashboard-agenda-wrap .operations-lane-list {
    max-height: 330px;
    overflow-y: auto;
}

@media (max-width: 900px) {
    .dashboard-agenda-wrap .operations-board {
        min-width: 1230px;
    }
}

@media (max-width: 560px) {
    .dashboard-agenda-card {
        margin-top: 14px;
    }

    .dashboard-agenda-wrap {
        max-height: 460px;
        padding: 12px 10px 10px;
    }
}

.row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.row.wrap {
    flex-wrap: wrap;
}

.spread {
    justify-content: space-between;
}

.grow {
    flex: 1;
    min-width: 0;
}

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

.dim {
    color: var(--text-2);
}

.small {
    font-size: 12.5px;
}

.section-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 4px 0 10px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-3);
}

.section-title a {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    color: var(--accent-hover);
    font-weight: 500;
}

/* Stat cards */
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 15px 16px;
    box-shadow: var(--shadow-xs);
    display: block;
    transition: border-color .12s, box-shadow .12s;
}

a.stat:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.stat .k {
    font-size: 12px;
    color: var(--text-3);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat .k i.ic {
    font-size: 16px;
}

.stat .v {
    display: block;
    font-size: 24px;
    font-weight: 680;
    letter-spacing: -.02em;
    margin-top: 8px;
}

.stat .v.sm {
    font-size: 18px;
}

.stat .sub {
    display: block;
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px;
}

/* Botões */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-weight: 550;
    white-space: nowrap;
    transition: background .12s, border-color .12s, opacity .12s;
}

.btn i.ic {
    font-size: 18px;
}

.btn--primary {
    background: var(--accent);
    color: var(--on-accent);
}

.btn--primary:hover {
    background: var(--accent-hover);
}

.btn--ghost {
    border-color: var(--border-strong);
    color: var(--text);
    background: var(--surface);
}

.btn--ghost:hover {
    background: var(--surface-2);
}

.btn--subtle {
    background: var(--surface-2);
    color: var(--text);
}

.btn--subtle:hover {
    background: var(--surface-3);
}

.btn--whatsapp {
    background: var(--ok-bg);
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 24%, transparent);
}

.btn--whatsapp:hover {
    background: color-mix(in srgb, var(--ok-bg) 72%, var(--ok));
    color: var(--ok);
}

.btn--danger {
    border-color: var(--bad);
    color: var(--bad);
    background: var(--surface);
}

.btn--danger:hover {
    background: var(--bad-bg);
}

.btn--sm {
    padding: 6px 10px;
    font-size: 13px;
}

.btn--block {
    width: 100%;
}

.btn:disabled {
    opacity: .55;
    cursor: progress;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
}

.icon-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}

.icon-btn.is-confirming {
    position: relative;
    background: var(--bad-bg);
    color: var(--bad);
}

.icon-btn.is-confirming::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 80;
    width: max-content;
    max-width: 220px;
    padding: 7px 9px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Badges / pills */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    background: var(--muted-bg);
    color: var(--text-2);
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .8;
}

.badge.plain::before {
    display: none;
}

.badge--ok {
    background: var(--ok-bg);
    color: var(--ok);
}

.badge--warn {
    background: var(--warn-bg);
    color: var(--warn);
}

.badge--bad {
    background: var(--bad-bg);
    color: var(--bad);
}

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

.badge--accent {
    background: var(--accent-weak);
    color: var(--accent-hover);
}

.badge--muted {
    background: var(--muted-bg);
    color: var(--text-2);
}

/* Estado encerrado de afiliado: preto, sem competir com alertas ativos. */
.badge--black {
    background: #171719;
    color: #ffffff;
}

:root[data-theme="dark"] .badge--black {
    background: #050506;
    color: #f3f3f5;
    border: 1px solid #303036;
}

/* Segmented control */
.segmented {
    display: inline-flex;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 3px;
    gap: 2px;
}

.segmented a,
.segmented button {
    padding: 6px 13px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 550;
    color: var(--text-2);
}

.segmented a:hover,
.segmented button:hover {
    color: var(--text);
}

.segmented a.active,
.segmented button.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}

/* Filter chips */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
}

.chip:hover {
    background: var(--surface-2);
    color: var(--text);
}

.chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.chip .n {
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

/* Toolbar (filtros + busca acima das listas) */
.toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.toolbar .search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 360px;
}

.toolbar .search i.ic {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    font-size: 18px;
    pointer-events: none;
}

.toolbar .search input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.toolbar .search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
}

/* Selects de filtros seguem a mesma linguagem visual da busca e dos campos. */
.toolbar>select {
    box-sizing: border-box;
    height: 42px;
    min-width: 180px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23908f9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 11px center;
    background-repeat: no-repeat;
    background-size: 16px;
    color: var(--text-2);
    font-size: 13px;
    appearance: none;
    -webkit-appearance: none;
}

.toolbar>select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
}

.toolbar>select option {
    background: var(--surface);
    color: var(--text);
}

.finance-filter-form {
    position: relative;
    overflow: visible;
}

.finance-search-row {
    padding: 14px 14px 0;
}

.finance-search-control {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 3px 4px 3px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.finance-search-control>.ic {
    flex: 0 0 auto;
    color: var(--text-3);
    font-size: 19px;
}

.finance-search-control input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
}

.finance-search-control:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
}

.finance-advanced-filters {
    margin-top: 12px;
    border-top: 1px solid var(--border);
}

.finance-advanced-filters>summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 16px;
    color: var(--text-2);
    cursor: pointer;
    list-style: none;
}

.finance-advanced-filters>summary::-webkit-details-marker {
    display: none;
}

.finance-advanced-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}

.finance-filter-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-soft, color-mix(in srgb, var(--accent) 16%, transparent));
    color: var(--accent);
    font-size: 11px;
}

.finance-advanced-period {
    margin-left: auto;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 500;
}

.finance-advanced-chevron {
    color: var(--text-3);
    transition: transform .18s ease;
}

.finance-advanced-filters[open] .finance-advanced-chevron {
    transform: rotate(180deg);
}

.finance-advanced-body {
    padding: 4px 14px 14px;
}

.finance-advanced-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(150px, 1fr));
    gap: 12px;
    align-items: start;
}

.finance-advanced-grid .field {
    min-width: 0;
    margin-bottom: 0;
}

.finance-range-field {
    position: relative;
    z-index: 1;
}

.finance-range-field:focus-within {
    z-index: 50;
}

.finance-range-input-wrap {
    position: relative;
    display: none;
}

.finance-filter-form.has-range-picker .finance-range-input-wrap {
    display: block;
}

.finance-range-input-wrap>.ic:first-child {
    position: absolute;
    top: 50%;
    left: 11px;
    transform: translateY(-50%);
    color: var(--text-3);
    font-size: 18px;
    pointer-events: none;
}

.finance-range-input-wrap .finance-range-picker-input {
    width: 100%;
    padding-right: 34px;
    padding-left: 38px;
    cursor: pointer;
}

.finance-range-picker-input {
    display: none;
}

.finance-filter-form.has-range-picker .finance-range-picker-input {
    display: block;
}

.finance-range-picker-input::placeholder {
    color: var(--text-3);
}

.finance-range-fallback {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.finance-range-fallback[hidden] {
    display: none;
}

.finance-range-fallback label {
    display: grid;
    gap: 5px;
    color: var(--text-3);
    font-size: 11px;
}

.finance-range-fallback input {
    width: 100%;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}

.finance-range-caret {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 9px;
    height: 9px;
    transform: translateY(-70%) rotate(45deg);
    border-right: 2px solid var(--text-3);
    border-bottom: 2px solid var(--text-3);
    color: var(--text-3);
    pointer-events: none;
}

.finance-range-presets {
    display: none;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.finance-filter-form.has-range-picker .finance-range-presets {
    display: flex;
}

.finance-range-presets button {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-3);
    font-size: 11px;
    cursor: pointer;
}

.finance-range-presets button:hover,
.finance-range-presets button.active {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent);
}

.finance-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.flatpickr-calendar.finance-range-calendar {
    z-index: 10000;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
}

.flatpickr-calendar.finance-range-calendar,
.flatpickr-calendar.finance-range-calendar .flatpickr-months,
.flatpickr-calendar.finance-range-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar.finance-range-calendar .flatpickr-weekdays,
.flatpickr-calendar.finance-range-calendar span.flatpickr-weekday,
.flatpickr-calendar.finance-range-calendar .flatpickr-day,
.flatpickr-calendar.finance-range-calendar .flatpickr-monthDropdown-months,
.flatpickr-calendar.finance-range-calendar .numInputWrapper input {
    color: var(--text);
}

.flatpickr-calendar.finance-range-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar.finance-range-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar.finance-range-calendar .flatpickr-months .flatpickr-next-month {
    background: var(--surface);
    fill: var(--text);
    color: var(--text);
}

.flatpickr-calendar.finance-range-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar.finance-range-calendar .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--accent);
}

.flatpickr-calendar.finance-range-calendar .flatpickr-day:hover,
.flatpickr-calendar.finance-range-calendar .flatpickr-day:focus {
    border-color: var(--accent);
    background: var(--surface-2);
}

.flatpickr-calendar.finance-range-calendar .flatpickr-day.selected,
.flatpickr-calendar.finance-range-calendar .flatpickr-day.startRange,
.flatpickr-calendar.finance-range-calendar .flatpickr-day.endRange,
.flatpickr-calendar.finance-range-calendar .flatpickr-day.selected.inRange,
.flatpickr-calendar.finance-range-calendar .flatpickr-day.startRange.inRange,
.flatpickr-calendar.finance-range-calendar .flatpickr-day.endRange.inRange {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent, #fff);
}

.flatpickr-calendar.finance-range-calendar .flatpickr-day.inRange {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--surface));
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    box-shadow: -5px 0 0 color-mix(in srgb, var(--accent) 16%, var(--surface)), 5px 0 0 color-mix(in srgb, var(--accent) 16%, var(--surface));
}

.flatpickr-calendar.finance-range-calendar.arrowTop::after {
    border-bottom-color: var(--surface);
}

.flatpickr-calendar.finance-range-calendar.arrowTop::before {
    border-bottom-color: var(--border-strong);
}

.flatpickr-calendar.finance-range-calendar.arrowBottom::after {
    border-top-color: var(--surface);
}

.flatpickr-calendar.finance-range-calendar.arrowBottom::before {
    border-top-color: var(--border-strong);
}

/* Pipeline de leads */
.lead-toolbar {
    align-items: end;
}

.lead-toolbar .lead-search {
    flex: 1 1 360px;
    min-width: 0;
}

.lead-stage-filter {
    display: grid;
    flex: 0 1 230px;
    gap: 4px;
    color: var(--text-3);
    font-size: 11px;
}

.lead-stage-filter select {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}

.pipeline {
    display: grid;
    grid-template-columns: repeat(7, minmax(260px, 1fr));
    gap: 12px;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 5px;
}

.pipeline-column {
    min-width: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.pipeline-column.is-drop-target {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--ring), var(--shadow-sm);
}

.pipeline-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-height: 56px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.pipeline-head h2 {
    font-size: 12.5px;
    font-weight: 650;
}

.pipeline-head span {
    display: block;
    margin-top: 3px;
    color: var(--text-3);
    font-size: 11.5px;
}

.pipeline-head>i {
    color: var(--text-3);
}

.pipeline-column[data-stage="ganho"] .pipeline-head>i {
    color: var(--ok);
}

.pipeline-column[data-stage="perdido"] .pipeline-head>i {
    color: var(--bad);
}

.pipeline-cards {
    display: grid;
    gap: 8px;
    padding: 8px;
    min-height: 92px;
}

.pipeline-empty {
    padding: 16px 8px;
    color: var(--text-3);
    font-size: 12px;
    text-align: center;
}

.lead-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.lead-card.is-dragging {
    opacity: .48;
}

.lead-card-main {
    display: block;
    padding: 11px;
    color: var(--text);
}

.lead-card-main:hover {
    background: var(--surface-2);
}

.lead-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 650;
}

.lead-card-company {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 3px;
    color: var(--text-3);
    font-size: 11.5px;
}

.lead-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    color: var(--text-2);
    font-size: 11px;
}

.lead-card-meta .badge {
    padding: 1px 6px;
    font-size: 10px;
}

.lead-card-next {
    margin-top: 8px;
    color: var(--text-3);
    font-size: 11px;
}

.lead-card-next i.ic {
    vertical-align: -3px;
    font-size: 14px;
}

.lead-card-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.lead-card-actions form {
    display: flex;
    align-items: center;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.lead-card-actions select {
    min-width: 0;
    flex: 1;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    color: var(--text-3);
    font-size: 10.5px;
}

.lead-card-actions select:focus {
    outline: none;
    color: var(--text);
}

.lead-card-actions .icon-btn {
    width: 28px;
    height: 28px;
}

.lead-card-drag {
    flex: 0 0 28px;
    cursor: grab;
    touch-action: none;
}

.lead-card-drag:active {
    cursor: grabbing;
}

.notice {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
}

.notice--ok {
    background: var(--ok-bg);
    color: var(--ok);
}

.notice a {
    color: inherit;
    text-decoration: underline;
    font-weight: 650;
}

.sales-copy {
    margin: 0;
    color: var(--text-2);
    line-height: 1.65;
    white-space: pre-wrap;
}

.sales-card-intro {
    margin: 0 0 12px;
}

.lead-sales-list .item {
    align-items: flex-start;
}

.lead-sales-list .item .tx {
    min-width: 0;
}

.sales-description-preview {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.lead-sales-list .btn {
    flex: 0 0 auto;
    margin-left: 8px;
}

.lead-tracked-whatsapp-form .btn {
    margin-left: 0;
}

.lead-tracked-whatsapp-form {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0 0 0 8px;
}

.lead-card-actions .lead-tracked-whatsapp-form {
    margin: 0;
}

.lead-tracked-links {
    display: grid;
    gap: 12px;
}

.lead-tracked-link {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border);
}

.lead-tracked-link:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.lead-tracked-link__copy {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.lead-tracked-link__copy input {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 11px;
}

.sales-copy-card {
    grid-column: 1 / -1;
}

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

/* Tabela de dados (colapsa em cards no mobile) */
.data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.data thead th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-3);
    padding: 11px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data tbody tr:last-child td {
    border-bottom: none;
}

.data tbody tr[data-href] {
    cursor: pointer;
    transition: background .1s;
}

.data tbody tr[data-href]:hover {
    background: var(--surface-2);
}

.data .primary-cell {
    display: table-cell;
    vertical-align: middle;
    font-weight: 600;
}

.data .primary-cell>.entity-avatar,
.data .primary-cell>.ticket-id {
    display: inline-flex;
    margin-right: 9px;
    vertical-align: middle;
}

.client-identity {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.client-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-company {
    min-width: 0;
    overflow: hidden;
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.contact-action {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    color: var(--accent);
}

.whatsapp-mark {
    width: 18px;
    height: 18px;
    display: block;
}

.btn--whatsapp .whatsapp-mark {
    width: 18px;
    height: 18px;
}

.contact-action:hover {
    background: var(--accent-weak);
    color: var(--accent-hover);
}

.contact-action.is-muted {
    color: var(--text-3);
    opacity: .62;
    cursor: default;
}

.data .sub {
    color: var(--text-3);
    font-size: 12.5px;
}

.data td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data td.shrink {
    width: 1%;
    white-space: nowrap;
}

/* Lista simples (dashboard, detalhes) */
.rows {
    display: flex;
    flex-direction: column;
}

.rows .item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.rows .item:last-child {
    border-bottom: none;
}

.rows a.item:hover {
    background: var(--surface-2);
}

.rows .item .ico {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text-2);
}

.rows .item .ico.accent {
    background: var(--accent-weak);
    color: var(--accent);
}

.rows .item .tx {
    flex: 1;
    min-width: 0;
}

.rows .item .tx p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rows .item .tx .sub {
    color: var(--text-3);
    font-size: 12.5px;
}

.file-upload {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.file-upload input[type="file"] {
    min-width: 0;
    flex: 1;
    padding: 7px;
}

.file-list {
    margin-top: 10px;
}

.file-list .item form {
    display: contents;
}

/* Detalhe: layout 2 colunas */
.detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}

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

.detail,
.detail>*,
.card,
.stat {
    min-width: 0;
}

.meta-list {
    display: grid;
    gap: 12px;
}

.meta-list .m .l {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-3);
}

.meta-list .m .val {
    margin-top: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.detail-hero h1 {
    font-size: 24px;
    letter-spacing: -.02em;
    margin: 6px 0 4px;
}

.detail-hero .tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.detail-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-identity h1 {
    margin: 0;
}

/* Identidade visual de clientes, projetos e sistemas */
.entity-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
    color: var(--accent);
    background: var(--accent-weak);
}

.entity-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.entity-avatar--square {
    border-radius: 10px;
}

.entity-avatar--sm {
    width: 30px;
    height: 30px;
    font-size: 15px;
}

.entity-avatar--lg {
    width: 56px;
    height: 56px;
    font-size: 23px;
}

.entity-avatar--xl {
    width: 48px;
    height: 48px;
    font-size: 21px;
}

.upload-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.upload-preview input[type="file"] {
    max-width: 100%;
    padding: 8px;
}

/* Tarefas */
.tasklist {
    display: flex;
    flex-direction: column;
}

.task {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--border);
}

.task:last-child {
    border-bottom: none;
}

.task input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: 5px;
    flex-shrink: 0;
    display: grid;
    place-content: center;
    transition: background .12s, border-color .12s;
}

.task input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.task input[type="checkbox"]:checked::after {
    content: "";
    width: 5px;
    height: 9px;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Tarefas universais: leitura rápida, contexto preservado e operação confortável no mobile. */
.task-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.task-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
}

.task-summary strong {
    font-size: 26px;
    letter-spacing: -.04em;
}

.task-summary--warn strong {
    color: var(--warn);
}

.task-toolbar select {
    min-width: 180px;
}

.task-toolbar>select {
    flex: 1 1 200px;
    max-width: 240px;
}

.task-board-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-board-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(90px, 130px) minmax(210px, auto) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.task-board-item:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.task-board-main,
.task-board-progress,
.task-board-meta,
.task-board-actions {
    min-width: 0;
}

.task-board-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.task-board-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-2);
}

.task-board-icon--bad {
    color: var(--bad);
    background: var(--bad-bg);
}

.task-board-icon--warn {
    color: var(--warn);
    background: var(--warn-bg);
}

.task-board-icon--info {
    color: var(--info);
    background: var(--info-bg);
}

.task-board-icon--ok {
    color: var(--ok);
    background: var(--ok-bg);
}

.task-board-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.task-board-title {
    overflow: hidden;
    color: var(--text);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-board-context {
    overflow: hidden;
    color: var(--text-3);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-board-context .ic {
    margin-right: 4px;
    vertical-align: middle;
}

.task-board-schedule {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: var(--text-3);
    font-size: 12px;
}

.task-board-schedule>span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.task-board-schedule .ic {
    color: var(--text-3);
}

.task-board-schedule small {
    color: var(--text-2);
    font-size: 11px;
}

.task-board-schedule time {
    font-variant-numeric: tabular-nums;
}

.task-board-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-board-progress>span {
    height: 6px;
    min-width: 60px;
    flex: 1;
    overflow: hidden;
    border-radius: 99px;
    background: var(--track);
}

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

.task-board-progress small {
    min-width: 32px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.task-board-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.task-board-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-3);
    font-size: 12px;
    white-space: nowrap;
}

.task-board-due.is-overdue {
    color: var(--bad);
}

.task-board-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.task-board-item.is-complete {
    opacity: .72;
}

.task-board-item.is-complete .task-board-title {
    color: var(--text-3);
    text-decoration: line-through;
}

.task-context-field {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.task-context-field .card-head {
    padding: 0 0 8px;
    border: 0;
}

.task-context-field .card-head h2 {
    font-size: 15px;
}

.task-checklist-editor {
    margin: 8px 0 18px;
    padding: 12px 0 0;
    border-top: 1px solid var(--border);
}

.task-checklist-editor>.card-head {
    padding: 0 0 8px;
    border: 0;
}

.task-checklist-editor>.muted {
    margin-bottom: 10px;
}

.task-checklist-editor__items,
.task-checklist {
    display: grid;
    gap: 7px;
    margin-bottom: 10px;
}

.task-checklist-editor__item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.task-checklist-editor__item input[type="checkbox"],
.task-checklist__item input {
    width: 17px;
    height: 17px;
    accent-color: var(--accent);
}

.task-checklist-editor__item input[type="text"] {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
}

.task-checklist-editor__item .icon-btn {
    grid-column: 3;
}

.task-checklist {
    margin: 14px 0 18px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.task-checklist h3 {
    margin-bottom: 3px;
    font-size: 13px;
}

.task-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 0;
    border-top: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
}

.task-checklist__item span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.task-checklist__item:has(input:checked) span {
    color: var(--text-3);
    text-decoration: line-through;
}

.task-description {
    margin-top: 16px;
    padding: 14px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-2);
    line-height: 1.65;
    white-space: pre-wrap;
}

.task-workflow-form {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.task-detail-progress {
    height: 8px;
    margin: 4px 0 16px;
}

.task-event-list {
    display: flex;
    flex-direction: column;
}

.task-event {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.task-event:last-child {
    border-bottom: 0;
}

.task-event-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    background: var(--accent-weak);
    color: var(--accent);
}

.task-event>div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

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

.task-event span {
    color: var(--text-3);
    font-size: 12px;
}

.task-side-title {
    margin-bottom: 14px;
    font-size: 16px;
}

.task-context-links {
    display: grid;
    gap: 8px;
    font-size: 13px;
}

.task-context-links a {
    overflow-wrap: anywhere;
    color: var(--accent-hover);
}

@media (max-width: 900px) {
    .task-summary-grid {
        gap: 4px;
    }

    .task-summary {
        padding: 12px;
    }

    .task-summary strong {
        font-size: 22px;
    }

    .task-board-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 12px;
    }

    .task-board-main {
        grid-column: 1;
    }

    .task-board-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .task-board-progress,
    .task-board-meta {
        grid-column: 1 / -1;
    }

    .task-board-meta {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .task-summary-grid {
        grid-template-columns: 1fr;
    }

    .task-toolbar select,
    .task-toolbar .btn {
        width: 100%;
    }

    .task-board-item {
        padding: 12px;
    }

    .task-board-title {
        white-space: normal;
    }

    .task-board-meta {
        align-items: flex-start;
    }

    .task-workflow-form .form-grid.thirds {
        grid-template-columns: 1fr;
    }
}

.task .t {
    flex: 1;
}

.task.done .t {
    text-decoration: line-through;
    color: var(--text-3);
}

.task .del {
    color: var(--text-3);
    opacity: 0;
    transition: opacity .12s;
}

.task:hover .del {
    opacity: 1;
}

.task .del:hover {
    color: var(--bad);
}

/* Progress */
.progress {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--track);
    overflow: hidden;
    min-width: 90px;
}

.progress>span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width .25s;
}

/* Formulários */
.form {
    width: 100%;
    max-width: none;
}

.form.wide {
    max-width: none;
}

.finance-form {
    max-width: none;
}

.finance-form-dates .field {
    min-width: 0;
}

[data-financial-value] {
    display: inline-block;
    white-space: nowrap;
}

/* Controle de privacidade inline, seguindo o tratamento discreto do AnaFarma. */
.finance-values-toggle {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-left: 3px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-3);
    vertical-align: -5px;
    line-height: 1;
}

.finance-values-toggle:hover,
.finance-values-toggle:focus-visible {
    background: var(--surface-2);
    color: var(--text-2);
    outline: none;
}

.finance-values-toggle .ic {
    font-size: 16px;
}

.financial-values-hidden [data-financial-value] {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    text-shadow: none !important;
    user-select: none;
}

.financial-values-hidden [data-financial-label] {
    display: none;
}

.financial-values-hidden [data-financial-value]::after {
    content: '••••••';
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    color: var(--text-3);
    letter-spacing: .06em;
}

[data-financial-chart] {
    position: relative;
}

.financial-values-hidden [data-financial-chart] canvas {
    visibility: hidden;
}

.financial-values-hidden [data-financial-chart]::after {
    content: 'Valores ocultos';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text-3);
    font-size: 13px;
}

.finance-form .segmented {
    min-height: 38px;
}

.finance-form .segmented button {
    font-weight: 600;
    padding-block: 5px;
}

.field {
    margin-bottom: 15px;
}

.field>label {
    display: block;
    font-size: 13px;
    font-weight: 550;
    margin-bottom: 6px;
    color: var(--text-2);
}

.field .hint {
    font-weight: 400;
    color: var(--text-3);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 9px 11px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.field textarea {
    min-height: 92px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
}

.field.invalid input,
.field.invalid select,
.field.invalid textarea {
    border-color: var(--bad);
}

.field .error-text {
    color: var(--bad);
    font-size: 12.5px;
    margin-top: 5px;
}

.meeting-participants {
    position: relative;
}

.meeting-participants .field-help {
    margin-top: 6px;
    color: var(--text-3);
    font-size: 12px;
}

.mention-suggestions {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% - 18px);
    padding: 5px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    box-shadow: 0 12px 28px rgb(0 0 0 / 24%);
}

.mention-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 6px;
    text-align: left;
    color: var(--text);
}

.mention-suggestion:hover,
.mention-suggestion:focus-visible {
    background: var(--surface-3);
    outline: none;
}

.mention-suggestion small {
    color: var(--text-3);
    white-space: nowrap;
}

/* Editor editorial leve reutilizado nos campos narrativos do OPS. */
.rich-editor {
    position: relative;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.rich-editor-mention-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 8px;
    z-index: 35;
    display: grid;
    width: min(360px, calc(100% - 16px));
    max-height: 240px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.rich-editor-mention-suggestions[hidden] {
    display: none;
}

.rich-editor-mention-suggestions button {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 6px;
    text-align: left;
}

.rich-editor-mention-suggestions button:hover,
.rich-editor-mention-suggestions button:focus-visible {
    background: var(--surface-2);
    outline: none;
}

.rich-editor-mention-suggestions button span {
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.rich-editor-mention-suggestions button small {
    overflow: hidden;
    color: var(--text-3);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
}

.rich-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 82%, var(--surface));
}

.rich-editor-toolbar button {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    color: var(--text-3);
}

.rich-editor-toolbar button:hover,
.rich-editor-toolbar button:focus-visible {
    background: var(--surface-3);
    color: var(--text);
    outline: none;
}

.rich-editor-toolbar button:disabled {
    opacity: .45;
    cursor: wait;
}

.rich-editor-surface {
    min-height: 230px;
    padding: 15px 16px;
    line-height: 1.65;
    color: var(--text);
}

.rich-editor-surface:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.rich-editor-surface:empty::before {
    content: attr(data-placeholder);
    color: var(--text-3);
    pointer-events: none;
}

.rich-editor-surface h2,
.rich-editor-surface h3 {
    margin: 1em 0 .45em;
    line-height: 1.25;
}

.rich-editor-surface p,
.rich-editor-surface ul,
.rich-editor-surface ol,
.rich-editor-surface blockquote,
.rich-editor-surface pre {
    margin: 0 0 .7em;
}

.rich-editor-surface ul,
.rich-editor-surface ol {
    padding-left: 1.4em;
}

.rich-editor-surface blockquote {
    padding-left: 12px;
    border-left: 3px solid var(--accent);
    color: var(--text-2);
}

.rich-editor-surface a {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rich-editor-surface img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 10px 0;
}

.rich-content {
    line-height: 1.7;
    color: var(--text-2);
}

.rich-content p,
.rich-content ul,
.rich-content ol,
.rich-content blockquote,
.rich-content pre {
    margin: 0 0 .8em;
}

.rich-content ul,
.rich-content ol {
    padding-left: 1.4em;
}

.rich-content blockquote {
    padding-left: 12px;
    border-left: 3px solid var(--accent);
}

.rich-content a {
    color: var(--accent-hover);
    text-decoration: underline;
}

.lead-destination {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid var(--border);
}

.lead-destination>.ic {
    color: var(--accent);
}

.lead-destination>span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.lead-destination small {
    color: var(--text-3);
    font-size: 11px;
}

.lead-destination a {
    color: var(--accent-hover);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 12px 0;
}

.rich-editor-hint {
    display: block;
    padding: 0 16px 12px;
    color: var(--text-3);
}

@media (max-width: 620px) {
    .rich-editor-surface {
        min-height: 190px;
    }

    .rich-editor-toolbar {
        overflow-x: auto;
    }
}

.password-control {
    position: relative;
}

.password-control input {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    border-radius: 7px;
    color: var(--text-3);
}

.password-toggle:hover,
.password-toggle[aria-pressed="true"] {
    background: var(--surface-2);
    color: var(--accent);
}

.password-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ring);
}

.password-toggle__horus {
    display: block;
    width: 20px;
    height: 20px;
}

.password-toggle__slash {
    opacity: 0;
    transition: opacity .16s ease;
}

.password-toggle[aria-pressed="false"] .password-toggle__slash {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .password-toggle__slash {
        transition: none;
    }
}

.remember-login {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -2px 0 14px;
    color: var(--text-2);
    font-size: 12.5px;
    cursor: pointer;
}

.remember-login input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

.form-grid .col-3 {
    grid-column: span 3;
}

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

.affiliate-code {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--accent);
    font: 600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .04em;
}

.affiliate-overview {
    gap: 12px;
    margin-bottom: 16px;
}

.affiliate-detail {
    margin-top: 0;
}

.affiliate-overview .stat {
    padding: 14px 16px;
}

.affiliate-table tbody tr[data-href] {
    transition: background .16s, box-shadow .16s;
}

.affiliate-table tbody tr[data-href]:hover {
    box-shadow: inset 3px 0 0 var(--accent);
}

.affiliate-table .primary-cell {
    gap: 10px;
}

.affiliate-attribution {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--text-2);
}

.affiliate-attribution a {
    margin-left: auto;
}

.affiliate-points {
    color: var(--accent);
}

.affiliate-history {
    margin-top: 14px;
}

.affiliate-event {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.affiliate-event-value {
    min-width: 42px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.points-positive {
    color: var(--ok);
}

.points-negative {
    color: var(--danger);
}

@media (max-width: 760px) {
    .affiliate-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 12px;
    }

    .affiliate-overview .stat {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 12px;
        row-gap: 2px;
        padding: 13px 14px;
    }

    .affiliate-overview .stat .k,
    .affiliate-overview .stat .sub {
        grid-column: 1;
    }

    .affiliate-overview .stat .v {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: 0;
    }

    .affiliate-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 0;
        padding: 13px;
    }

    .affiliate-table tbody td.primary-cell {
        grid-column: 1 / -1;
        gap: 8px;
        margin-bottom: 8px;
        padding-right: 72px;
    }

    .affiliate-table tbody td[data-label="Código"] {
        display: grid;
        grid-template-columns: minmax(112px, 128px) minmax(0, 1fr);
        grid-column: 1 / -1;
        align-items: center;
        gap: 8px;
        min-height: 29px;
        margin-bottom: 2px;
        padding-top: 6px;
        border-top: 1px solid var(--border);
    }

    .affiliate-table tbody td[data-label="Código"] .affiliate-code {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .affiliate-table tbody td[data-label="Código"]::before {
        min-width: 0;
        text-align: left;
    }

    .affiliate-table tbody td[data-label="Leads indicados"],
    .affiliate-table tbody td[data-label="Pontos"] {
        display: grid;
        grid-template-columns: minmax(112px, 128px) minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding-top: 6px;
        border-top: 1px solid var(--border);
        text-align: right;
    }

    .affiliate-table tbody td[data-label="Leads indicados"]::before,
    .affiliate-table tbody td[data-label="Pontos"]::before {
        min-width: 0;
        font-size: 10px;
        text-align: left;
    }

    .affiliate-table tbody td.badge-cell {
        top: 14px;
        right: 14px;
    }

    .affiliate-table tbody td.badge-cell .badge {
        padding-inline: 9px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .affiliate-overview {
        grid-template-columns: 1fr;
    }

    .affiliate-overview .stat {
        padding-block: 12px;
    }
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

/* Estado vazio */
.empty {
    text-align: center;
    color: var(--text-3);
    padding: 40px 16px;
}

.empty i.ic {
    font-size: 34px;
    opacity: .5;
}

.empty p {
    margin-top: 8px;
}

.empty .btn {
    margin-top: 14px;
}

/* Snackbar */
#snackbar {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%) translateY(8px);
    background: var(--snackbar-bg);
    color: var(--snackbar-fg);
    padding: 11px 18px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: var(--shadow-pop);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
    z-index: 90;
    max-width: calc(100vw - 32px);
}

#snackbar.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#snackbar.error {
    background: #c0392f;
    color: #fff;
}

/* Estado de conectividade e fila offline */
.network-status {
    position: fixed;
    top: calc(var(--topbar-h) + 10px);
    right: 16px;
    z-index: 1400;
    max-width: min(360px, calc(100vw - 32px));
    padding: 9px 13px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-md);
    font-size: 12px;
    font-weight: 600;
}

.network-status.is-syncing {
    color: var(--accent);
}

/* Bloqueio local do PWA */
.pin-setup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(8, 10, 13, .72);
    backdrop-filter: blur(5px);
}

.pin-setup-card {
    width: min(100%, 520px);
    max-height: min(92vh, 760px);
    overflow: auto;
    padding: 28px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
}

.pin-setup-card>.lock-mark {
    margin-inline: 0;
}

.pin-setup-card h2 {
    margin: 0 0 8px;
}

.pin-setup-card>p {
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.55;
}

.pin-setup-form {
    margin-top: 20px;
}

.pin-setup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.pin-setup-note {
    margin-bottom: 0;
    font-size: 12px !important;
}

#lock-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    /* Abaixo do edge-light e acima dos widgets, incluindo o Aurélio. */
    z-index: 2147483600;
    display: grid;
    place-items: center;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    overflow: hidden;
    isolation: isolate;
    touch-action: pan-y;
    background: var(--bg);
}

html.screen-locked,
body.screen-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
}

#lock-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--app-grid-color, #a6a6ae) var(--app-grid-opacity, 2%), transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--app-grid-color, #a6a6ae) var(--app-grid-opacity, 2%), transparent) 1px, transparent 1px);
    background-size: var(--app-grid-size, 36px) var(--app-grid-size, 36px);
    mask-image: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .32) 66%, #000 100%);
    pointer-events: none;
}

#lock-screen[hidden] {
    display: none;
}

body.screen-locked #aurelio-widget-host {
    visibility: hidden !important;
    pointer-events: none !important;
}

.lock-card {
    position: relative;
    z-index: 1;
    width: min(100%, 380px);
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 28px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    text-align: center;
}

.lock-mark {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: var(--accent-weak);
    color: var(--accent);
}

.lock-mark .ic {
    font-size: 28px;
}

.lock-mark--brand {
    width: 60px;
    height: 60px;
    background: transparent;
}

.lock-mark--brand img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.lock-card h1 {
    font-size: 21px;
}

.lock-copy {
    margin: 7px 0 18px;
    color: var(--text-2);
    font-size: 13px;
}

.lock-card .field {
    text-align: left;
}

.lock-card input {
    text-align: center;
    letter-spacing: .24em;
    font-variant-numeric: tabular-nums;
    caret-color: transparent;
    cursor: pointer;
}

.lock-card .field.is-active input {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-weak);
}

.lock-keypad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    max-width: 270px;
    margin: 18px auto 0;
}

.lock-key {
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 650;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.lock-key {
    min-height: 48px;
    font-size: 17px;
}

.lock-key--delete {
    grid-column: span 2;
    font-size: 15px;
}

.lock-key:hover,
.lock-key:focus-visible,
.lock-key--delete:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    outline: 2px solid var(--accent-weak);
    outline-offset: 1px;
}

.lock-key:active {
    transform: scale(.97);
}

.lock-card .form-actions {
    justify-content: center;
}

.lock-no-pin {
    margin-top: 20px;
}

.lock-no-pin form {
    margin: 0;
}

@media (max-width: 520px) {
    .pin-setup-card {
        padding: 22px;
    }

    .pin-setup-actions {
        flex-direction: column-reverse;
    }

    .pin-setup-actions .btn {
        width: 100%;
    }
}

.lock-reset {
    margin-top: 16px;
    border: 0;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
}

.lock-reset:hover {
    color: var(--accent);
}

/* FAB (só mobile) */
.fab {
    display: none;
}

/* Divisor */
.hr {
    height: 1px;
    background: var(--border);
    border: 0;
    margin: 20px 0;
}

/* Avatar */
.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-weak);
    color: var(--accent-hover);
    display: grid;
    place-items: center;
    font-weight: 650;
    font-size: 12px;
}

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 1080px) {
    :root {
        --global-search-w: clamp(220px, 21vw, 340px);
    }

    .topbar {
        padding-inline: 18px;
        gap: 10px;
    }

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

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

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

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

    .detail .aside {
        order: initial;
    }

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

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

@media (max-width: 1240px) and (min-width: 1081px) {
    .content {
        padding-inline: 24px;
    }

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

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

@media (max-width: 900px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-summary {
        position: static;
    }
}

@media (max-width: 900px) {
    :root {
        --topbar-h: calc(56px + env(safe-area-inset-top));
    }

    .network-status {
        top: calc(var(--topbar-h) + 8px);
        right: 10px;
    }

    .lock-card {
        padding: 24px 18px;
    }

    .sidebar {
        display: none;
    }

    .sidebar-toggle {
        display: none;
    }

    .main {
        margin-left: 0;
    }

    .topbar .gsearch-toggle {
        display: inline-flex;
    }

    .topbar-actions .notification-menu {
        display: block;
    }

    .topbar-actions {
        display: contents;
    }

    .topbar-user-menu {
        display: none;
    }

    .mobile-more-menu {
        display: block;
    }

    .topbar {
        display: flex;
        height: var(--topbar-h);
        padding-top: env(safe-area-inset-top);
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: 0;
        padding-left: max(12px, env(safe-area-inset-left));
        gap: 4px;
        border-bottom: 0;
        box-shadow: none;
    }

    .topbar>.grow {
        display: none;
    }

    .topbar .crumbs {
        flex: 1 1 0;
        max-width: none;
    }

    .crumbs-track {
        width: 100%;
    }

    .crumb-trail:last-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .crumb-trail:last-child .crumb-current {
        width: 34px;
        max-width: 34px;
    }

    .notification-popover {
        position: fixed;
        top: calc(var(--topbar-h) + 8px);
        right: 12px;
    }

    .worker-status-popover {
        position: fixed;
        top: calc(var(--topbar-h) + 8px);
        right: 12px;
    }

    .meeting-navbar__popover {
        position: fixed;
        top: calc(var(--topbar-h) + 8px);
        right: max(12px, env(safe-area-inset-right));
        width: min(430px, calc(100vw - 24px));
        max-height: min(68dvh, 620px);
    }

    .gsearch {
        display: none;
    }

    .topsearch {
        display: block;
        position: sticky;
        top: var(--topbar-h);
        z-index: 25;
        padding: 9px 12px;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
    }

    .topsearch .gsearch {
        display: block;
        width: 100%;
    }

    .topsearch .gsearch-pop {
        max-height: 66vh;
    }

    .content {
        padding: 18px max(14px, env(safe-area-inset-right)) calc(180px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
        scroll-padding-bottom: calc(180px + env(safe-area-inset-bottom));
    }

    .page-head h1 {
        font-size: 20px;
    }

    .page-head {
        gap: 12px;
        margin-bottom: 16px;
    }

    .page-head .lead {
        font-size: 13px;
    }

    .page-head--rich {
        display: flex;
        gap: 16px;
        padding-bottom: 16px;
    }

    .page-head--rich .actions {
        min-width: 0;
        padding-left: 0;
        border-left: 0;
    }

    .page-head--rich .actions>.btn,
    .page-head--rich .actions>form,
    .page-head--rich .actions>form .btn {
        width: auto;
    }

    .page-head--rich .actions>.btn,
    .page-head--rich .actions>form .btn {
        justify-content: flex-start;
    }

    .page-head--rich .page-head__secondary-actions {
        justify-content: flex-end;
    }

    .page-head--dashboard .actions {
        display: none;
    }

    .card-head {
        padding: 13px 14px;
        flex-wrap: wrap;
    }

    .card-head>.search {
        flex: 1 1 100%;
        min-width: 0;
    }

    .card-head>.search select {
        max-width: none;
        flex: 0 1 145px;
    }

    .card-body {
        padding-inline: 14px;
    }

    .card.pad,
    .card.pad-lg {
        padding: 16px;
    }

    .stat {
        padding: 14px;
    }

    /* No mobile, a busca de listas ganha uma linha própria e não compete
       com os chips/filtros. */
    .toolbar {
        align-items: stretch;
        gap: 10px;
    }

    .toolbar .search {
        order: -1;
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }

    .grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid.cols-5 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid.cols-3,
    .grid.cols-2 {
        grid-template-columns: 1fr;
    }

    /* Tabela -> cards */
    .data {
        border: none;
        background: none;
        box-shadow: none;
        overflow: visible;
    }

    .data thead {
        display: none;
    }

    .data tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .data tbody tr {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: relative;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 16px;
        box-shadow: var(--shadow-xs);
    }

    .data tbody td {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 0;
        border: none;
    }

    .data tbody td::before {
        content: attr(data-label);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-3);
        font-weight: 600;
        min-width: 84px;
        flex-shrink: 0;
    }

    .data tbody td.primary-cell {
        align-items: center;
        font-size: 15.5px;
        font-weight: 650;
        min-height: 38px;
        margin-bottom: 13px;
        padding-right: 82px;
    }

    /* A célula já usa gap no mobile; não acumular a margem da tabela desktop. */
    .data tbody td.primary-cell>.entity-avatar {
        margin-right: 0;
    }

    .data tbody td.primary-cell .client-identity {
        display: grid;
        align-items: start;
        gap: 2px;
        min-width: 0;
    }

    .data tbody td.primary-cell .client-name {
        overflow: visible;
        white-space: normal;
        line-height: 1.25;
    }

    .data tbody td.primary-cell .client-company {
        max-width: 100%;
        font-size: 12.5px;
        line-height: 1.25;
        white-space: normal;
    }

    .data tbody td.primary-cell::before {
        display: none;
    }

    .data tbody td[data-label] {
        display: grid;
        grid-template-columns: minmax(76px, 84px) minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        min-height: 34px;
    }

    .data tbody td[data-label]::before {
        min-width: 0;
    }

    .data tbody td.client-contact {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-height: 46px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
    }

    .data tbody td.client-contact::before {
        display: none;
    }

    .data tbody td.client-contact .contact-actions {
        justify-content: flex-end;
        gap: 7px;
    }

    .data tbody td.client-systems {
        display: grid;
        grid-template-columns: minmax(76px, 84px) minmax(0, 1fr);
        justify-content: initial;
        margin-top: 3px;
    }

    .data tbody td.client-systems .client-system-value {
        grid-column: 2;
        justify-self: end;
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
    }

    .data tbody td.num {
        justify-content: initial;
    }

    .data tbody td.badge-cell {
        position: absolute;
        top: 16px;
        right: 16px;
        padding: 0;
    }

    .data tbody td.badge-cell::before {
        display: none;
    }

    .data tbody td[data-label]:empty {
        display: none;
    }

    .form-grid,
    .form-grid.thirds {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions .btn {
        width: 100%;
    }

    .form-actions.inline-mobile {
        flex-direction: row;
    }

    /* Bottom nav pill */
    .tabbar {
        display: flex;
        position: fixed;
        /* Reserva a mesma faixa dos dois lados: à direita para o Aurélio
           flutuante e à esquerda para manter a barra visualmente centrada. */
        left: calc(58px + max(10px, env(safe-area-inset-left)));
        right: calc(58px + max(10px, env(safe-area-inset-right)));
        bottom: max(10px, env(safe-area-inset-bottom));
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        background: var(--surface);
        border: 0;
        border-radius: 18px;
        padding: 6px 4px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .28), inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent);
        z-index: 60;
    }

    .tabbar::-webkit-scrollbar {
        display: none;
    }

    .tabbar,
    .tabbar * {
        -webkit-tap-highlight-color: transparent;
    }

    .tabbar a {
        position: relative;
        flex: 0 0 68px;
        width: 68px;
        min-width: 68px;
        display: block;
        flex-shrink: 0;
        box-sizing: border-box;
        padding: 0 4px;
        scroll-snap-align: start;
    }

    .tabbar-count {
        position: absolute;
        top: 1px;
        right: 12px;
        display: inline-grid;
        place-items: center;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border: 1px solid var(--surface);
        border-radius: 999px;
        background: var(--accent);
        color: var(--on-accent);
        font-size: 9px;
        font-weight: 750;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        pointer-events: none;
    }

    .tabbar a:focus {
        outline: none;
    }

    .tabbar a:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
        border-radius: 12px;
    }

    .tabbar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: 100%;
        height: 48px;
        border-radius: 12px;
        color: var(--text-3);
        font-size: 9.5px;
        font-weight: 550;
        letter-spacing: -.01em;
        white-space: nowrap;
    }

    .tabbar-item i.ic {
        font-size: 20px;
    }

    .tabbar a.active .tabbar-item {
        background: var(--accent-weak);
        color: var(--accent-hover);
    }

    .tabbar a.active .tabbar-item i.ic {
        color: var(--accent);
    }

    .tabbar a:active .tabbar-item {
        background: var(--accent-weak);
        color: var(--accent-hover);
    }

    .fab {
        display: grid;
        place-items: center;
        position: fixed;
        left: 16px;
        right: auto;
        bottom: calc(84px + env(safe-area-inset-bottom));
        width: 52px;
        height: 52px;
        border-radius: 16px;
        background: var(--accent);
        color: #fff;
        box-shadow: var(--shadow-pop);
        z-index: 55;
    }

    .fab i.ic {
        font-size: 26px;
    }

    /* Página com FAB: esconde a ação repetida do cabeçalho */
    .page-head:has(~ .fab) .actions {
        display: none;
    }

    .page-head .actions .btn span.lbl {
        display: none;
    }

    .page-head .actions .btn {
        padding: 8px 10px;
    }

    .lead-toolbar .lead-search,
    .lead-stage-filter {
        flex-basis: 100%;
    }

    .lead-stage-filter {
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
    }

    .pipeline {
        grid-template-columns: minmax(0, 1fr);
        overflow: visible;
        gap: 10px;
    }

    .pipeline-column {
        width: 100%;
    }

    .pipeline-head {
        min-height: 0;
        align-items: center;
        padding: 10px 12px;
    }

    .pipeline-cards {
        min-height: 0;
    }

    .pipeline-empty {
        padding-block: 12px;
    }

    .lead-card-drag {
        display: none;
    }
}

@media (max-width: 560px) {
    .content {
        padding-top: 14px;
    }

    .page-head {
        flex-wrap: wrap;
    }

    .page-head .t {
        flex: 1 1 calc(100% - 50px);
    }

    .page-head .actions {
        width: 100%;
        justify-content: flex-end;
    }

    .page-head--rich .actions {
        align-items: stretch;
    }

    .page-head--rich .page-head__secondary-actions {
        justify-content: flex-start;
    }

    .crumb-trail:not(:first-child):not(:last-child) {
        display: none;
    }

    .crumb-trail:first-child:not(:last-child) .crumb-label {
        display: none;
    }

    .crumb-item {
        padding: 6px;
    }

    .crumb-current {
        max-width: 58vw;
    }

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

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

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

    .system-agent-meta {
        grid-template-columns: 1fr;
    }

    .detail-hero h1,
    .page-head h1 {
        font-size: 19px;
    }

    .card-head {
        gap: 7px;
    }

    .card-head a.more {
        font-size: 12px;
    }

    .stat .v {
        font-size: 22px;
    }
}

/* Dashboard em larguras intermediárias: mantém os resumos financeiros
   compactos sem forçar três colunas estreitas. */
@media (max-width: 1080px) {
    .dashboard-stats {
        gap: 12px;
        margin-bottom: 18px;
    }

    .dashboard-page .dashboard-layout {
        gap: 14px;
    }

    .dashboard-page .stack {
        gap: 14px;
    }

    .dashboard-chart {
        height: 170px;
    }
}

@media (max-width: 900px) and (min-width: 641px) {
    .dashboard-page .dashboard-finance-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 640px) {
    .dashboard-priority-counts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-overview {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-scheduler-queues-card .card-body {
        min-height: 0;
    }

    .dashboard-priority-item {
        flex-wrap: wrap;
        gap: 8px;
    }

    .dashboard-priority-item__content {
        flex-basis: calc(100% - 52px);
    }

    .dashboard-priority-item .badge,
    .dashboard-priority-item__date,
    .dashboard-priority-item__amount {
        margin-left: 48px;
    }

    .dashboard-project-status {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .dashboard-page .dashboard-finance-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-page .rows .item {
        gap: 9px;
        padding-inline: 2px;
    }

    .dashboard-page .rows .item .badge {
        max-width: 38%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-chart {
        height: 150px;
    }
}

@media (max-width: 560px) {
    .dashboard-stats {
        gap: 10px;
        margin-bottom: 14px;
    }

    .dashboard-page .dashboard-finance-summary {
        grid-template-columns: 1fr;
    }

    .dashboard-page .card-head {
        padding-block: 12px;
    }

    .dashboard-page .card-body {
        padding-bottom: 8px;
    }
}

/* Em tablets, conserva a proporção 10/2 com um mínimo legível para as ações. */

@media (max-width: 900px) {
    .page-head--rich.system-detail-head {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-areas: "back content";
        align-items: start;
    }

    .page-head--rich.system-detail-head .system-detail-columns {
        grid-template-columns: minmax(0, 10fr) minmax(160px, 2fr);
        gap: 12px;
    }

    .page-head--rich.system-detail-head .system-detail-columns>.system-detail-actions {
        display: grid;
        grid-column: 2;
        width: 100%;
        max-width: none;
        margin-top: 0;
        padding: 0 0 0 10px;
        border-top: 0;
        border-left: 1px solid var(--border);
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        justify-items: stretch;
    }

    .page-head--rich.system-detail-head .system-detail-columns>.system-detail-actions>.system-action-links {
        display: grid;
        justify-items: stretch;
        gap: 6px;
    }

    .page-head--rich.system-detail-head .system-detail-columns>.system-detail-actions .btn {
        width: 100%;
        justify-self: stretch;
    }
}

@media (max-width: 560px) {
    .page-head--rich.system-detail-head .system-detail-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .page-head--rich.system-detail-head .system-detail-columns>.system-detail-actions {
        grid-column: 1;
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        padding: 10px 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .page-head--rich.system-detail-head .system-action-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-items: stretch;
        gap: 8px;
    }

    .page-head--rich.system-detail-head .system-detail-columns .system-detail-actions .btn {
        height: auto;
        min-height: 38px;
        padding: 8px 12px;
        flex-direction: row;
        justify-content: center;
        gap: 7px;
        text-align: center;
        white-space: normal;
    }

    .page-head--rich.system-detail-head .system-detail-columns>.system-detail-actions>.system-action-main {
        grid-column: 1 / -1;
    }

    .page-head--rich.system-detail-head .system-detail-columns .system-detail-actions .btn i.ic {
        font-size: 17px;
    }

    .page-head--rich.system-detail-head .system-detail-columns .system-detail-actions .btn .lbl {
        display: inline;
        max-width: none;
        font-size: inherit;
        line-height: inherit;
        overflow-wrap: normal;
    }

}

@media (max-width: 380px) {
    .page-head--rich.system-detail-head .system-action-links {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Os demais cabeçalhos de detalhe seguem a mesma quebra do sistema, sem
   alterar o cabeçalho de dashboard ou as barras de ferramentas das listas. */
@media (max-width: 1080px) and (min-width: 901px) {
    .page-head--rich:not(.system-detail-head) {
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-areas:
            "back content"
            ". actions";
        row-gap: 14px;
    }

    .page-head--rich:not(.system-detail-head)>.context-back {
        grid-area: back;
    }

    .page-head--rich:not(.system-detail-head)>.t {
        grid-area: content;
        /* context-back é opcional; preserve o slot de conteúdo mesmo ausente. */
        grid-column: 2;
    }

    .page-head--rich:not(.system-detail-head)>.actions {
        grid-area: actions;
        grid-column: auto;
        width: 100%;
        max-width: none;
        padding: 14px 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .page-head--rich:not(.system-detail-head)>.actions>.btn,
    .page-head--rich:not(.system-detail-head)>.actions>form,
    .page-head--rich:not(.system-detail-head)>.actions>form .btn {
        width: auto;
    }

    .page-head--rich:not(.system-detail-head) .page-head__secondary-actions {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .page-head--rich:not(.system-detail-head) {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-areas:
            "back content"
            ". actions";
        align-items: start;
        row-gap: 12px;
    }

    .page-head--rich:not(.system-detail-head)>.context-back {
        grid-area: back;
    }

    .page-head--rich:not(.system-detail-head)>.t {
        grid-area: content;
        /* Sem o botão contextual, auto-placement jogava o título na coluna de 34px. */
        grid-column: 2;
        flex: none;
    }

    .page-head--rich:not(.system-detail-head)>.actions {
        display: flex;
        grid-area: actions;
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        margin-top: 0;
        padding: 12px 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }

    .page-head--rich:not(.system-detail-head)>.actions>.btn,
    .page-head--rich:not(.system-detail-head)>.actions>form,
    .page-head--rich:not(.system-detail-head)>.actions>form .btn {
        width: auto;
    }

    .page-head--rich:not(.system-detail-head) .page-head__secondary-actions {
        display: flex;
        flex-wrap: wrap;
        width: auto;
        padding-top: 0;
    }
}

@media (max-width: 560px) {
    .page-head--rich:not(.system-detail-head) {
        row-gap: 10px;
    }

    .page-head--rich:not(.system-detail-head)>.actions {
        padding-top: 10px;
        justify-content: flex-start;
    }
}

/* Janela limpa do espelho: mantém somente o grafo e seus controles essenciais. */
html[data-snapshot-graph-window="1"],
html[data-snapshot-graph-window="1"] body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
}

html[data-snapshot-graph-window="1"] .sidebar,
html[data-snapshot-graph-window="1"] .sidebar-toggle,
html[data-snapshot-graph-window="1"] .topbar,
html[data-snapshot-graph-window="1"] .topsearch,
html[data-snapshot-graph-window="1"] .mobile-navigation-drawer,
html[data-snapshot-graph-window="1"] .tabbar,
html[data-snapshot-graph-window="1"] .fab,
html[data-snapshot-graph-window="1"] .float-notes,
html[data-snapshot-graph-window="1"] #snackbar,
html[data-snapshot-graph-window="1"] #network-status {
    display: none !important;
}

html[data-snapshot-graph-window="1"] .app,
html[data-snapshot-graph-window="1"] .main {
    width: 100%;
    height: 100dvh;
    min-height: 0;
}

html[data-snapshot-graph-window="1"] .main {
    margin-left: 0;
}

html[data-snapshot-graph-window="1"] .content {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 8px;
}

html[data-snapshot-graph-window="1"] .snapshot-graph--window {
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.snapshot-graph__toolbar-action {
    min-height: 38px;
    gap: 5px;
    padding-inline: 9px;
    white-space: nowrap;
}

.snapshot-graph__motion {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 2px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.snapshot-graph__motion>.icon-btn {
    width: 30px;
    height: 30px;
    color: var(--text-2);
}

.snapshot-graph__motion output {
    min-width: 34px;
    color: var(--text-2);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.snapshot-graph__motion [data-snapshot-graph-motion-toggle] {
    min-height: 30px;
    margin-left: 2px;
    padding-inline: 7px;
}

.snapshot-graph__toolbar [data-snapshot-graph-effects-toggle][aria-pressed="false"] {
    color: var(--text-3);
    border-color: var(--border);
}

.snapshot-graph__toolbar [data-snapshot-graph-effects-toggle][aria-pressed="false"] .ic {
    color: var(--text-3);
}

.snapshot-graph.is-tools-collapsed:not(.snapshot-graph--window) .snapshot-graph__explorer {
    grid-template-columns: minmax(0, 1fr);
}

.snapshot-graph.is-tools-collapsed .snapshot-graph__side {
    display: none;
}

.snapshot-graph--window > .profile-form-head,
.snapshot-graph--window > .snapshot-graph__privacy {
    display: none;
}

.snapshot-graph--window .snapshot-graph__workspace {
    height: 100%;
    min-height: 0;
    margin: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.snapshot-graph--window .snapshot-graph__explorer {
    position: relative;
    display: block;
    min-height: 0;
    height: 100%;
}

.snapshot-graph--window .snapshot-graph__canvas-wrap {
    height: 100%;
    min-height: 240px;
}

.snapshot-graph--window .snapshot-graph__side {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    width: min(340px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    padding: 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px);
}

@media (max-width: 700px) {
    html[data-snapshot-graph-window="1"] .content {
        padding: 5px;
    }

    html[data-snapshot-graph-window="1"] .snapshot-graph--window {
        padding: 5px;
    }

    .snapshot-graph--window .snapshot-graph__toolbar {
        gap: 5px;
    }

    .snapshot-graph__toolbar-action {
        min-height: 36px;
        padding-inline: 7px;
        font-size: 11px;
    }

    .snapshot-graph__toolbar-action .ic {
        font-size: 16px;
    }

    .snapshot-graph__motion {
        min-height: 36px;
    }
}

/* =====================================================================
   Login
   ===================================================================== */
.auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    position: relative;
    isolation: isolate;
    padding: 24px;
    background:
        radial-gradient(1200px 500px at 50% -12%, var(--surface), transparent),
        var(--bg);
}

.auth::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--app-grid-color, #a6a6ae) var(--app-grid-opacity, 2%), transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--app-grid-color, #a6a6ae) var(--app-grid-opacity, 2%), transparent) 1px, transparent 1px);
    background-size: var(--app-grid-size, 36px) var(--app-grid-size, 36px);
    mask-image: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .32) 66%, #000 100%);
    pointer-events: none;
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 30px 28px;
}

.auth-card .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 24px;
}

.auth-card .brand img {
    width: 56px;
    height: 56px;
    border-radius: 9px;
}

.auth-card .auth-brand img {
    transform: perspective(500px) rotateY(0) scale(1);
    transform-origin: center;
    transition: transform 360ms cubic-bezier(.2, .75, .25, 1), filter 360ms ease;
    will-change: transform;
}

.auth>[data-theme-toggle] {
    z-index: 1;
}

.auth-card:has(#email:focus) .auth-brand img {
    transform: perspective(500px) rotateY(-14deg) scale(1.04);
    filter: drop-shadow(0 0 10px var(--ring));
}

.auth-card:has(#password:focus) .auth-brand img {
    transform: perspective(500px) rotateY(14deg) scale(1.04);
    filter: drop-shadow(0 0 10px var(--ring));
}

@media (prefers-reduced-motion: reduce) {
    .auth-card .auth-brand img {
        transition: none;
        transform: none;
        will-change: auto;
    }
}

.auth-card h1 {
    font-size: 18px;
}

.auth-card .sub {
    color: var(--text-3);
    font-size: 13px;
    margin: 2px 0 22px;
}

.auth-card .alert {
    background: var(--bad-bg);
    color: var(--bad);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: 13px;
    margin-bottom: 14px;
}

/* Configurações de aparência */
.settings-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 18px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    overflow-x: auto;
}

.settings-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 7px;
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .18s, color .18s, box-shadow .18s;
}

.settings-tab:hover {
    color: var(--text);
}

.settings-tab.active {
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    color: var(--text);
}

.settings-tab.active .ic {
    color: var(--accent);
}

.settings-panel[hidden] {
    display: none;
}

.ai-settings-form,
.ai-settings-note {
    width: 100%;
    max-width: none;
    margin: 0 0 18px;
}

.ai-provider-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.ai-provider-card {
    padding: 16px;
    min-width: 0;
}

.ai-provider-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ai-provider-card__head h3 {
    margin: 0 0 7px;
}

.ai-provider-card .field {
    margin-bottom: 8px;
}

.ai-provider-clear {
    margin-top: 12px;
}

.ai-provider-result {
    min-height: 18px;
    margin: 10px 0 0;
}

.ai-provider-result.is-error,
[data-ai-save-status].is-error {
    color: var(--danger, #f87171);
}

.ai-usage-section {
    width: 100%;
    margin: 28px 0 18px;
}

.ai-usage-gadget {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}

.ai-usage-gadget__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--text-2);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    transition: border-color .16s, color .16s, background .16s;
}

.ai-usage-gadget__trigger:hover,
.ai-usage-gadget__trigger:focus-visible,
.ai-usage-gadget.is-open .ai-usage-gadget__trigger {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
    outline: none;
}

.ai-usage-gadget__trigger .ic {
    color: var(--accent);
}

.ai-usage-gadget__value {
    max-width: 70px;
    font-variant-numeric: tabular-nums;
}

.ai-usage-gadget__popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 2147483500;
    display: none;
    grid-auto-rows: max-content;
    gap: 12px;
    width: min(410px, calc(100vw - 24px));
    max-height: min(76vh, 620px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 16px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-md, 0 18px 48px #0008);
}

.ai-usage-gadget__popover[aria-hidden="false"] {
    display: grid;
}

.ai-usage-gadget__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.ai-usage-gadget__head strong {
    font-size: 16px;
}

.ai-usage-gadget__head>span,
.ai-usage-gadget__empty {
    color: var(--text-2);
    font-size: 12px;
}

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

.ai-usage-gadget__stat {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.ai-usage-gadget__stat>span,
.ai-usage-gadget__stat>strong {
    overflow-wrap: anywhere;
}

.ai-usage-gadget__stat>span,
.ai-usage-gadget__model small,
.ai-usage-gadget__model-metrics small,
.ai-usage-gadget__quota-row small,
.ai-usage-gadget__spend small {
    color: var(--text-2);
    font-size: 11px;
}

.ai-usage-gadget__stat>strong {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.ai-usage-gadget__subline {
    margin: -5px 0 0;
    color: var(--text-2);
    font-size: 11px;
}

.ai-usage-gadget__section-title {
    margin: 2px 0 -5px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-2);
}

.ai-usage-gadget__models,
.ai-usage-gadget__quota {
    display: grid;
    gap: 0;
}

.ai-usage-gadget__model,
.ai-usage-gadget__quota-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.ai-usage-gadget__model:last-child,
.ai-usage-gadget__quota-row:last-child {
    border-bottom: 0;
}

.ai-usage-gadget__model-name,
.ai-usage-gadget__model-metrics {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ai-usage-gadget__model-name strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.ai-usage-gadget__model-metrics {
    flex: 0 0 auto;
    text-align: right;
}

.ai-usage-gadget__model-metrics strong,
.ai-usage-gadget__quota-row>span {
    font-size: 11px;
}

.ai-usage-gadget__quota-row {
    flex-wrap: wrap;
}

.ai-usage-gadget__quota-row>strong {
    flex: 0 0 74px;
    font-size: 12px;
}

.ai-usage-gadget__quota-row>span {
    flex: 1;
    text-align: right;
}

.ai-usage-gadget__quota-row small {
    flex: 1 0 100%;
    text-align: right;
}

.ai-usage-gadget__spend {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.ai-usage-gadget__spend>strong,
.ai-usage-gadget__spend>span {
    font-size: 12px;
}

.ai-usage-gadget__spend>small {
    grid-column: 1 / -1;
}

.ai-usage-gadget__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
}

.ai-usage-gadget__footer:hover {
    text-decoration: underline;
}

.ai-usage-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.ai-usage-stat {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 18px;
}

.ai-usage-stat>span,
.ai-usage-stat>small {
    color: var(--text-2);
}

.ai-usage-stat>strong {
    font-size: clamp(22px, 2vw, 30px);
    overflow-wrap: anywhere;
}

.ai-usage-stat>strong small {
    font-size: 13px;
    color: var(--text-2);
}

.ai-usage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

.ai-usage-card {
    min-width: 0;
    margin: 0 0 14px;
}

.ai-usage-grid .ai-usage-card {
    margin: 0;
}

.ai-usage-card h3 {
    margin: 0 0 16px;
}

.ai-usage-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-2);
}

.ai-usage-empty .ic {
    color: var(--accent);
}

.ai-usage-chart {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
    height: 150px;
    padding-top: 10px;
}

.ai-usage-chart__day {
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    height: 100%;
    gap: 8px;
}

.ai-usage-chart__day>span {
    align-self: end;
    width: min(34px, 70%);
    min-height: 3px;
    border-radius: 7px 7px 2px 2px;
    background: var(--accent);
}

.ai-usage-chart__bar--1 {
    height: 10%;
}

.ai-usage-chart__bar--2 {
    height: 20%;
}

.ai-usage-chart__bar--3 {
    height: 30%;
}

.ai-usage-chart__bar--4 {
    height: 40%;
}

.ai-usage-chart__bar--5 {
    height: 50%;
}

.ai-usage-chart__bar--6 {
    height: 60%;
}

.ai-usage-chart__bar--7 {
    height: 70%;
}

.ai-usage-chart__bar--8 {
    height: 80%;
}

.ai-usage-chart__bar--9 {
    height: 90%;
}

.ai-usage-chart__bar--10 {
    height: 100%;
}

.ai-usage-chart__day>small {
    color: var(--text-2);
    font-size: 11px;
}

.ai-usage-scope-list {
    display: grid;
    gap: 12px;
}

.ai-usage-scope-list>div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.ai-usage-scope-list>div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ai-usage-scope-list span {
    color: var(--text-2);
}

.ai-usage-scope-list strong {
    text-align: right;
    font-size: 13px;
}

.ai-usage-scope-list__system {
    padding-left: 14px;
    font-size: 12px;
}

.ai-usage-table-wrap {
    overflow: hidden;
}

.ai-usage-table td,
.ai-usage-table th {
    white-space: nowrap;
}

.ai-usage-table td code {
    overflow-wrap: anywhere;
    white-space: normal;
}

.ai-quota-card {
    margin-top: 14px;
}

.ai-quota-row {
    display: grid;
    grid-template-columns: minmax(120px, .4fr) minmax(0, 1fr);
    gap: 6px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.ai-quota-row small {
    grid-column: 2;
    color: var(--text-2);
}

.ai-quota-card>.hint {
    margin: 14px 0 0;
}

.ai-settings-security {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.6;
}

.ai-settings-security .ic {
    color: var(--accent);
}

.settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
    gap: 20px;
    align-items: stretch;
}

.appearance-preview {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-content: start;
    min-height: 0;
    background: linear-gradient(145deg, color-mix(in srgb, var(--preview-accent) 5%, var(--surface)), var(--surface));
}

.appearance-preview::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 70%;
    height: 150px;
    right: -12%;
    top: -32px;
    opacity: .5;
    pointer-events: none;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--preview-aurora) 34%, transparent), transparent 68%);
    transform: rotate(-8deg);
}

.appearance-preview>* {
    position: relative;
}

.appearance-preview__swatch {
    width: 58px;
    height: 58px;
    border-radius: 17px;
    background: var(--preview-accent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--preview-accent) 14%, transparent), 0 12px 28px color-mix(in srgb, var(--preview-accent) 20%, transparent);
}

.appearance-preview h2 {
    margin: 4px 0 7px;
    font-size: 19px;
    letter-spacing: -.01em;
}

.appearance-preview p {
    max-width: 580px;
    margin: 0;
    line-height: 1.55;
}

.appearance-preview__samples {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 17px;
    border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.appearance-preview__samples .btn {
    min-height: 38px;
}

.appearance-focus-sample {
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    color: var(--accent-hover);
    box-shadow: 0 0 0 3px var(--ring);
}

.appearance-form {
    max-width: none;
}

.appearance-form .profile-form-head {
    margin-bottom: 22px;
}

.appearance-form .field {
    margin-bottom: 21px;
}

.appearance-form .field>label {
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
}

.appearance-color-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.appearance-color-control input {
    width: 62px;
    height: 44px;
    padding: 3px;
    cursor: pointer;
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.appearance-color-control input:disabled {
    cursor: not-allowed;
    opacity: .42;
    filter: grayscale(1);
}

.appearance-color-control code {
    color: var(--text-2);
    font-size: 13px;
    letter-spacing: .02em;
}

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

.appearance-choice {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s;
}

.appearance-choice:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.appearance-choice:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
    background: var(--accent-weak);
    color: var(--text);
}

.appearance-choice input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--accent);
}

.appearance-choice span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.appearance-choice strong {
    font-size: 13px;
    font-weight: 600;
}

.appearance-choice small {
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.35;
}

.appearance-aurora-custom {
    margin-top: 11px;
}

.appearance-aurora-sample {
    display: block;
    width: 116px;
    height: 30px;
    border-radius: 999px;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--preview-aurora) 75%, transparent), transparent 70%);
}

.appearance-form .form-actions {
    margin-top: 2px;
}

.background-settings-form {
    max-width: none;
}

.background-settings-form .profile-form-head {
    margin-bottom: 20px;
}

.background-settings-controls {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.2fr);
    gap: 24px;
    align-items: start;
}

.background-settings-controls .field {
    margin-bottom: 16px;
}

.background-settings-controls label output {
    float: right;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.background-settings-controls input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

.background-grid-preview {
    display: grid;
    place-items: center;
    min-height: 112px;
    margin: 2px 0 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface-2);
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--preview-grid-color) var(--preview-grid-opacity), transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--preview-grid-color) var(--preview-grid-opacity), transparent) 1px, transparent 1px);
    background-size: var(--preview-grid-size, 36px) var(--preview-grid-size, 36px);
    color: var(--text-2);
    font-size: 13px;
}

@media (max-width: 700px) {
    .background-settings-controls {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.settings-mail-card {
    max-width: none;
}

.settings-internal-card {
    max-width: 920px;
}

.snapshot-graph {
    width: 100%;
    min-width: 0;
}

.snapshot-graph__privacy,
.snapshot-graph__message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--text-3);
    font-size: 12px;
}

.snapshot-graph__privacy {
    margin: 0 0 18px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.snapshot-graph__privacy .ic {
    color: var(--accent);
}

.snapshot-graph__unlock {
    display: grid;
    grid-template-columns: minmax(180px, 260px) auto minmax(0, 1fr);
    align-items: end;
    gap: 12px;
}

.snapshot-graph__unlock .field {
    margin: 0;
}

.snapshot-graph__message {
    grid-column: 1 / -1;
    margin: 0;
}

.snapshot-graph__message:empty {
    display: none;
}

.snapshot-graph__message.is-error {
    color: var(--bad);
}

.snapshot-graph__workspace {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin-top: 16px;
}

.snapshot-graph__explorer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
    align-items: start;
    gap: 12px;
    min-width: 0;
}

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

.snapshot-graph__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 300px;
    min-width: 120px;
}

.snapshot-graph__search .ic {
    position: absolute;
    left: 10px;
    color: var(--text-3);
    pointer-events: none;
}

.snapshot-graph__search input,
.snapshot-graph__toolbar select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
}

.snapshot-graph__search input {
    padding-left: 34px;
}

.snapshot-graph__meta {
    color: var(--text-3);
    font-size: 11.5px;
}

.snapshot-graph__canvas-wrap {
    position: relative;
    height: min(72vh, 780px);
    min-height: 360px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface-2);
    background-image: radial-gradient(color-mix(in srgb, var(--text-3) 22%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
    touch-action: none;
}

.snapshot-graph__canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.snapshot-graph__canvas-wrap canvas:active {
    cursor: grabbing;
}

.snapshot-graph__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--text-3);
    text-align: center;
    pointer-events: none;
}

.snapshot-graph__selection {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-2);
    font-size: 12px;
}

.snapshot-graph__side {
    display: grid;
    gap: 10px;
    min-width: 0;
    max-height: min(72vh, 780px);
    overflow: auto;
    overscroll-behavior: contain;
}

.snapshot-graph__filters {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.snapshot-graph__side-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 2px;
}

.snapshot-graph__side-heading .ic {
    color: var(--accent);
}

.snapshot-graph__side-heading h3 {
    font-size: 13px;
}

.snapshot-graph__filters>label {
    display: grid;
    gap: 4px;
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 600;
}

.snapshot-graph__filters select {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: 12px;
}

.snapshot-graph__filters select:focus,
.snapshot-graph__search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
}

.snapshot-graph__clear {
    justify-content: center;
    min-height: 34px;
    padding: 6px 9px;
    font-size: 11px;
}

.snapshot-graph__filter-count {
    color: var(--text-3);
    font-size: 10.5px;
}

.snapshot-graph__selection-empty {
    color: var(--text-3);
    line-height: 1.5;
}

.snapshot-graph__selected-title,
.snapshot-graph__selected-kind {
    display: block;
}

.snapshot-graph__selected-title {
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 13px;
}

.snapshot-graph__selected-kind,
.snapshot-graph__relations-count {
    margin-top: 4px;
    color: var(--text-3);
    font-size: 10.5px;
}

.snapshot-graph__relations-count {
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
}

.snapshot-graph__relations-list {
    display: grid;
    gap: 3px;
    max-height: 360px;
    margin: 7px -5px -5px;
    padding: 2px 5px 5px;
    overflow: auto;
}

.snapshot-graph__relation {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 7px 6px;
    border-radius: 7px;
    color: var(--text-2);
    text-align: left;
}

.snapshot-graph__relation:hover,
.snapshot-graph__relation:focus-visible {
    background: var(--surface-2);
    color: var(--text);
    outline: none;
}

.snapshot-graph__relation-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.snapshot-graph__relation-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.snapshot-graph__relation-copy strong,
.snapshot-graph__relation-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snapshot-graph__relation-copy strong {
    color: inherit;
    font-size: 11px;
    font-weight: 600;
}

.snapshot-graph__relation-copy small {
    color: var(--text-3);
    font-size: 9.5px;
}

.snapshot-graph__relation>.ic {
    color: var(--text-3);
    font-size: 16px;
}

.snapshot-graph__relations-note {
    padding: 6px;
    color: var(--text-3);
    font-size: 10px;
}

.snapshot-graph__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 2px;
}

.snapshot-graph__legend span {
    padding: 3px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-3);
    font-size: 10px;
}

.snapshot-graph__selection strong {
    color: var(--text);
}

@media (max-width: 700px) {
    .snapshot-graph__unlock {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .snapshot-graph__unlock>.btn {
        justify-content: center;
    }

    .snapshot-graph__toolbar {
        flex-wrap: wrap;
    }

    .snapshot-graph__search {
        flex-basis: 100%;
    }

    .snapshot-graph__explorer {
        grid-template-columns: minmax(0, 1fr);
    }

    .snapshot-graph__side {
        max-height: none;
        overflow: visible;
    }

    .snapshot-graph__relations-list {
        max-height: 280px;
    }

    .snapshot-graph__canvas-wrap {
        height: 58vh;
        min-height: 320px;
    }
}

/* Na aba de e-mail, SMTP e relatório dividem a faixa disponível; a identidade
   continua ocupando a largura inteira em seu próprio painel. */
.settings-panel[data-settings-panel="email"]:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 18px;
}

.settings-panel[data-settings-panel="email"]:not([hidden])>.card {
    width: auto;
    min-width: 0;
    margin-top: 0;
}

.settings-panel[data-settings-panel="email"]:not([hidden])>.email-branding-card {
    grid-column: 1 / -1;
    margin-top: 18px;
}

.settings-mail-card .profile-form-head,
.settings-internal-card .profile-form-head {
    margin-bottom: 18px;
}

.settings-mail-status {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

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

.settings-mail-grid>div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.settings-mail-label {
    color: var(--text-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.settings-mail-grid strong {
    overflow: hidden;
    color: var(--text-2);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-mail-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 13px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    color: var(--text-2);
}

.settings-mail-note>.ic {
    margin-top: 1px;
    color: var(--accent);
}

.settings-mail-note p {
    font-size: 12.5px;
    line-height: 1.45;
}

.settings-mail-card code {
    font-size: .92em;
}

.settings-weekly-report {
    max-width: none;
}

.settings-weekly-report__grid {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 18px;
}

.settings-weekly-report fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.settings-weekly-report legend {
    margin-bottom: 10px;
    color: var(--text-2);
    font-weight: 600;
}

.settings-weekly-report__day-field {
    margin-bottom: 18px;
    width: 100%;
    min-width: 0;
}

.settings-weekly-report__days {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

.settings-weekly-report__days .check-row {
    align-items: center;
    flex: 0 0 clamp(150px, 16vw, 190px);
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    white-space: nowrap;
    scroll-snap-align: start;
}

.settings-weekly-report__days .check-row span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-weekly-report__checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}

.settings-weekly-report .check-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--text-2);
}

.settings-weekly-report .check-row input {
    flex: 0 0 auto;
    width: 18px !important;
    height: 18px;
    padding: 0;
    margin-top: 3px;
    accent-color: var(--accent);
}

.settings-weekly-report .check-row span {
    display: grid;
    gap: 3px;
}

.settings-weekly-report .check-row small {
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.35;
}

.settings-push-card {
    max-width: none;
}

.settings-push-card .profile-form-head {
    margin-bottom: 18px;
}

.settings-push-status {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.settings-push-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 18px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    color: var(--text-2);
}

.settings-push-note>.ic {
    margin-top: 1px;
    color: var(--accent);
}

.settings-push-note p {
    font-size: 12.5px;
    line-height: 1.45;
}

.settings-push-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.settings-push-actions .btn:disabled {
    cursor: wait;
    opacity: .56;
}

.settings-push-card[aria-busy="true"] {
    cursor: progress;
}

/* A aba de notificações funciona melhor como uma pequena central de controle:
   os dois cards compartilham a mesma faixa no desktop e voltam a empilhar
   somente quando a largura deixa de comportar uma leitura confortável. */
.settings-panel[data-settings-panel="notificacoes"]:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    align-items: start;
    gap: 16px;
}

.settings-panel[data-settings-panel="notificacoes"]:not([hidden])>.card {
    width: auto;
    min-width: 0;
    padding: 18px;
    box-shadow: var(--shadow-xs);
}

.settings-panel[data-settings-panel="notificacoes"] .profile-form-head {
    margin-bottom: 14px;
}

.settings-panel[data-settings-panel="notificacoes"] .profile-form-head p {
    max-width: 62ch;
}

.settings-push-status {
    margin-bottom: 14px;
    padding-bottom: 13px;
}

.settings-push-note {
    margin-bottom: 14px;
    padding: 10px 11px;
}

.settings-push-actions {
    gap: 7px;
}

.settings-push-actions .btn {
    min-height: 36px;
    padding: 8px 11px;
    font-size: 12px;
}

.settings-push-card .hint {
    margin-top: 12px;
}

.push-preferences {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

.push-preferences-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.push-preferences-head h3 {
    margin: 0 0 4px;
    font-size: 15px;
}

.push-preferences-head .hint {
    margin: 0;
}

.push-preferences-head>.ic {
    color: var(--accent);
}

.push-preference-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
}

.push-preference-preset {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
}

.push-preference-preset.is-active {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.push-preference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.push-preference-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.push-preference-item input {
    margin-top: 2px;
    accent-color: var(--accent);
}

.push-preference-item strong,
.push-preference-item small {
    display: block;
}

.push-preference-item strong {
    font-size: 12px;
}

.push-preference-item small {
    margin-top: 2px;
    color: var(--text-3);
    font-size: 10.5px;
    line-height: 1.3;
}

.push-preference-item.is-locked {
    cursor: default;
    opacity: .72;
}

.push-preferences-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.push-preferences-actions .hint {
    margin: 0;
}

@media (max-width:760px) {
    .push-preference-grid {
        grid-template-columns: 1fr;
    }

    .push-preferences-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}

.notification-sound-settings {
    max-width: none;
    margin-top: 0;
}

.notification-sound-intro {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 14px;
    padding: 10px 11px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.45;
}

.notification-sound-intro>.ic {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--accent);
}

.notification-sound-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.notification-sound-presets .btn {
    font-size: 12px;
}

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

.notification-sound-row {
    display: grid;
    grid-template-columns: minmax(110px, .72fr) minmax(150px, 1fr);
    align-items: center;
    gap: 14px;
    padding: 8px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 12.5px;
}

.notification-sound-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.notification-sound-choice select {
    min-width: 0;
    flex: 1 1 auto;
}

.notification-sound-preview {
    flex: 0 0 auto;
}

.notification-sound-volume {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
    margin-top: 14px;
    color: var(--text-2);
    font-size: 12.5px;
}

.notification-sound-volume output {
    min-width: 44px;
    color: var(--accent);
    font-weight: 700;
    text-align: right;
}

.notification-sound-volume input {
    grid-column: 1 / -1;
    width: 100%;
    accent-color: var(--accent);
}

.notification-sound-actions {
    margin-top: 16px;
}

.notification-sound-upload-block {
    display: grid;
    gap: 13px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.notification-sound-upload-block strong {
    color: var(--text);
    font-size: 13px;
}

.notification-sound-upload-block .hint {
    margin-top: 4px;
}

.notification-sound-upload-fields {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) minmax(220px, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.notification-sound-upload-fields input[type="file"] {
    min-width: 0;
    padding: 7px 8px;
    font-size: 11.5px;
}

.notification-sound-library {
    display: grid;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.notification-sound-library[hidden] {
    display: none;
}

.notification-sound-library-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 7px 0;
    color: var(--text-2);
    font-size: 12.5px;
}

.notification-sound-library-item>span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-sound-library-item>span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
}

.system-saas-field {
    margin-top: -2px;
}

.check-control {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .18s, background .18s;
}

.check-control:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.check-control input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--accent);
}

.check-control span {
    display: grid;
    gap: 2px;
}

.check-control strong {
    color: var(--text);
    font-size: 13px;
}

.check-control small {
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.35;
}

.system-client--saas {
    color: var(--accent-hover);
}

@media (max-width: 980px) {
    .settings-panel[data-settings-panel="notificacoes"]:not([hidden]) {
        grid-template-columns: 1fr;
    }

    .settings-panel[data-settings-panel="email"]:not([hidden]) {
        grid-template-columns: 1fr;
    }

    .settings-panel[data-settings-panel="email"]:not([hidden])>.email-branding-card {
        grid-column: auto;
        margin-top: 18px;
    }

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

@media (max-width: 760px) {
    .ai-usage-gadget__trigger {
        min-width: 40px;
        min-height: 36px;
        padding: 0 7px;
    }

    .ai-usage-gadget__popover {
        position: fixed;
        top: calc(var(--topbar-h) + 8px);
        right: max(12px, env(safe-area-inset-right));
        width: min(410px, calc(100vw - 24px));
        max-height: min(78dvh, 620px);
    }

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

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

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

    .settings-tabs {
        margin-inline: -2px;
    }

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

    .appearance-preview {
        min-height: 0;
    }

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

    .settings-weekly-report__grid,
    .settings-weekly-report__checks {
        grid-template-columns: 1fr;
    }

    .notification-sound-row,
    .notification-sound-upload-fields {
        grid-template-columns: 1fr;
    }

    .settings-panel[data-settings-panel="notificacoes"]:not([hidden]) {
        display: grid;
        grid-template-columns: 1fr;
    }

    .notification-sound-map {
        grid-template-columns: 1fr;
    }

    .notification-sound-choice {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .ai-usage-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .ai-usage-stat {
        padding: 12px;
    }

    .ai-usage-stat>strong {
        font-size: 20px;
    }

    .ai-quota-row {
        grid-template-columns: 1fr;
    }

    .ai-quota-row small {
        grid-column: 1;
    }

    .ai-usage-scope-list>div {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .ai-usage-scope-list strong {
        text-align: left;
    }
}

@media (max-width: 420px) {
    .settings-mail-grid {
        grid-template-columns: 1fr;
    }
}

/* Navegação mobile selecionável: off-canvas é o padrão; a tabbar atual segue como alternativa. */
.mobile-navigation-control {
    display: none;
    flex: 0 0 auto;
}

.mobile-navigation-trigger {
    color: var(--text-2);
}

.mobile-navigation-drawer {
    display: none;
}

.mobile-navigation-drawer__head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 62px;
    padding: 8px 10px 12px 8px;
    border-bottom: 1px solid var(--border);
}

.mobile-navigation-drawer__head .brand {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    padding: 4px;
}

.mobile-navigation-drawer__head .brand img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.mobile-navigation-drawer__head .brand b {
    font-size: 14px;
}

.mobile-navigation-drawer__head .brand span span {
    display: block;
    color: var(--text-3);
    font-size: 10px;
}

.mobile-navigation-drawer__links {
    display: grid;
    align-content: start;
    gap: 3px;
    min-height: 0;
    padding: 10px 8px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.mobile-navigation-drawer .nav-link {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
}

.mobile-navigation-drawer .nav-link span:not(.nav-count) {
    max-width: none;
}

.mobile-navigation-drawer .nav-link i.ic {
    font-size: 20px;
}

.mobile-navigation-drawer .nav-link .nav-count {
    margin-left: auto;
}

html.mobile-nav-drawer-open,
body.mobile-nav-drawer-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.popup-focus-open .topbar.popup-focus-layer>.mobile-navigation-control:not(.popup-focus-active) {
    opacity: .58;
    pointer-events: none;
    filter: blur(2px);
}

body.popup-focus-open .mobile-navigation-control.popup-focus-active {
    position: relative;
    z-index: 2147483003 !important;
    opacity: 1;
    pointer-events: auto;
    filter: none;
}

@media (min-width: 901px) {

    .mobile-navigation-control,
    .mobile-navigation-drawer {
        display: none !important;
    }
}

@media (max-width: 900px) {
    :root[data-mobile-navigation="drawer"] .topbar.is-scroll-hidden {
        transform: none;
    }

    :root[data-mobile-navigation="drawer"] .mobile-navigation-control {
        display: flex;
    }

    :root[data-mobile-navigation="drawer"] [data-mobile-tabbar] {
        display: none !important;
    }

    :root[data-mobile-navigation="tabbar"] .mobile-navigation-control,
    :root[data-mobile-navigation="drawer"] .tabbar {
        display: none;
    }

    :root[data-mobile-navigation="tabbar"] .tabbar {
        display: flex;
    }

    :root[data-mobile-navigation="drawer"] .content {
        padding-bottom: calc(50px + env(safe-area-inset-bottom));
        scroll-padding-bottom: calc(50px + env(safe-area-inset-bottom));
    }

    :root[data-mobile-navigation="drawer"] .fab {
        bottom: max(16px, env(safe-area-inset-bottom));
    }

    .mobile-navigation-drawer {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 2147483003;
        display: flex;
        flex-direction: column;
        width: min(248px, calc(100vw - 64px));
        height: 100vh;
        height: 100dvh;
        padding: max(10px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom));
        overflow: hidden;
        border-right: 1px solid var(--border-strong);
        border-radius: 0 16px 16px 0;
        background: var(--surface);
        box-shadow: var(--shadow-pop);
        color: var(--text);
        isolation: isolate;
        outline: none;
        touch-action: pan-y;
        transition: transform .2s cubic-bezier(.2, .75, .25, 1);
    }

    .mobile-navigation-drawer.is-dragging {
        transition: none;
    }

    .mobile-navigation-drawer__head .brand {
        padding-top: 4px;
    }

    html[data-sidebar="collapsed"] .mobile-navigation-drawer .nav-link {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        min-height: 46px;
        padding: 10px 12px;
        font-size: 13px;
        line-height: 1.3;
        text-align: left;
    }

    html[data-sidebar="collapsed"] .mobile-navigation-drawer .nav-link i.ic {
        font-size: 20px;
    }
}

/* =====================================================================
   FullCalendar (visão de calendário das reuniões) — tema AURIOS
   ===================================================================== */
#calendar {
    --fc-border-color: var(--border);
    --fc-page-bg-color: var(--surface);
    --fc-neutral-bg-color: var(--surface-2);
    --fc-today-bg-color: var(--accent-weak);
    --fc-highlight-color: var(--accent-weak-2);
    --fc-list-event-hover-bg-color: var(--surface-2);
    --fc-now-indicator-color: var(--accent);
    color: var(--text);
    font-size: 13.5px;
    min-height: 60vh;
}

.fc .fc-toolbar-title {
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number {
    color: var(--text-2);
    text-decoration: none;
    padding: 6px 8px;
}

.fc .fc-day-today .fc-daygrid-day-number {
    color: var(--accent-hover);
    font-weight: 700;
}

.fc-theme-standard th {
    background: var(--surface-2);
}

.fc .fc-daygrid-day.fc-day-other {
    background: var(--bg);
}

/* Botões */
.fc .fc-button {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-2);
    font-weight: 550;
    font-size: 12.5px;
    padding: 6px 11px;
    box-shadow: none;
    text-transform: capitalize;
    border-radius: var(--radius-sm);
}

.fc .fc-button:hover {
    background: var(--surface-2);
    color: var(--text);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.fc .fc-button:focus {
    box-shadow: 0 0 0 3px var(--ring);
}

.fc .fc-button .fc-icon {
    font-size: 1.3em;
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 14px;
    gap: 8px;
    flex-wrap: wrap;
}

/* Eventos — cor por situação (herda dos tokens, adapta ao tema) */
.fc-event {
    border-radius: 6px;
    padding: 1px 4px;
    font-weight: 550;
    cursor: pointer;
}

.fc-daygrid-block-event .fc-event-title {
    font-weight: 550;
}

.fc-ev-agendada {
    background: var(--info-bg);
    border-color: var(--info);
    color: var(--info);
}

.fc-ev-realizada {
    background: var(--ok-bg);
    border-color: var(--ok);
    color: var(--ok);
}

.fc-ev-remarcada {
    background: var(--warn-bg);
    border-color: var(--warn);
    color: var(--warn);
}

.fc-ev-cancelada {
    background: var(--bad-bg);
    border-color: var(--bad);
    color: var(--bad);
    text-decoration: line-through;
}

.fc-ev-agendada .fc-daygrid-event-dot {
    border-color: var(--info);
}

.fc-ev-realizada .fc-daygrid-event-dot {
    border-color: var(--ok);
}

.fc-ev-remarcada .fc-daygrid-event-dot {
    border-color: var(--warn);
}

.fc-ev-cancelada .fc-daygrid-event-dot {
    border-color: var(--bad);
}

.fc .fc-list-event:hover td {
    background: var(--surface-2);
}

.fc .fc-list-day-cushion {
    background: var(--surface-2);
}

.fc-list-empty {
    color: var(--text-3);
}

@media (max-width: 640px) {
    .fc .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
}

/* ----- Operação técnica ----- */
.observability-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.observability-metrics .stat {
    min-width: 0;
}

.observability-metrics .stat .v {
    display: block;
    line-height: 1.05;
}

.observability-metrics .stat .sub {
    display: block;
    margin-top: 6px;
    line-height: 1.35;
}

.health-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.observability-grid {
    margin-bottom: 18px;
}

.observability-card {
    overflow: hidden;
    margin-bottom: 18px;
}

.observability-card--logs {
    max-height: 590px;
    display: flex;
    flex-direction: column;
}

.observability-queue-list,
.observability-system-list,
.observability-log-list,
.observability-job-list {
    display: grid;
}

.observability-queue-row,
.observability-system-row,
.observability-log-row,
.observability-job-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
}

.observability-queue-row:last-child,
.observability-system-row:last-child,
.observability-log-row:last-child,
.observability-job-row:last-child {
    border-bottom: 0;
}

.observability-queue-row>span {
    margin-left: auto;
    color: var(--text-3);
    font-size: 11px;
}

.observability-queue-row>.health-dot {
    flex: 0 0 auto;
    margin-left: 0;
}

.observability-queue-main {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 3px;
}

.observability-queue-main strong,
.observability-queue-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.observability-queue-main small {
    color: var(--text-3);
    font-size: 11px;
}

.observability-queue-main code,
.observability-job-row code {
    color: var(--text-3);
    font-family: inherit;
    font-size: .95em;
}

.observability-job-row:hover {
    background: var(--surface-2);
}

.observability-job-row:hover .observability-log-main strong {
    color: var(--accent-hover);
}

.health-queue-main strong a {
    color: inherit;
}

.health-queue-main strong a:hover {
    color: var(--accent-hover);
}

.health-queue-jobs-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    color: var(--accent-hover);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.health-queue-jobs-link:hover {
    text-decoration: underline;
}

.health-jobs-filters {
    display: flex;
    align-items: end;
    gap: 9px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.health-jobs-filters label {
    display: grid;
    gap: 4px;
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 650;
}

.health-jobs-filters select {
    min-width: 170px;
    height: 34px;
    padding: 0 28px 0 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12px;
}

.health-jobs-filters .btn {
    min-height: 34px;
}

@media (max-width: 640px) {
    .health-jobs-filters label {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }

    .health-jobs-filters select {
        width: 100%;
        min-width: 0;
    }

    .health-jobs-filters .btn {
        flex: 1 1 auto;
    }
}

.observability-system-row {
    color: var(--text-2);
    text-decoration: none;
    transition: background .15s ease;
}

.observability-system-row:hover {
    background: var(--surface-2);
}

.observability-system-name,
.observability-log-main {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 3px;
}

.observability-system-name strong,
.observability-system-name small,
.observability-log-main strong,
.observability-log-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.observability-system-name small,
.observability-log-main small {
    color: var(--text-3);
    font-size: 11px;
}

.observability-overview-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.observability-card .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.monitoring-overview-table-card .observability-overview-table th,
.monitoring-overview-table-card .observability-overview-table td {
    min-width: 0;
    overflow-wrap: anywhere;
}

#monitoring-requests .observability-overview-table th:nth-child(1) { width: 20%; }
#monitoring-requests .observability-overview-table th:nth-child(2) { width: 40%; }
#monitoring-requests .observability-overview-table th:nth-child(6) { width: 40%; }

#monitoring-requests .show-extra-columns .observability-overview-table th:nth-child(1) { width: 12%; }
#monitoring-requests .show-extra-columns .observability-overview-table th:nth-child(2) { width: 22%; }
#monitoring-requests .show-extra-columns .observability-overview-table th:nth-child(3) { width: 26%; }
#monitoring-requests .show-extra-columns .observability-overview-table th:nth-child(4),
#monitoring-requests .show-extra-columns .observability-overview-table th:nth-child(5) { width: 10%; }
#monitoring-requests .show-extra-columns .observability-overview-table th:nth-child(6) { width: 20%; }

.monitoring-overview-grid > .observability-card .observability-overview-table th:nth-child(1) { width: 30%; }
.monitoring-overview-grid > .observability-card .observability-overview-table th:nth-child(2) { width: 30%; }
.monitoring-overview-grid > .observability-card .observability-overview-table th:nth-child(4) { width: 40%; }

.monitoring-overview-grid > .observability-card.show-extra-columns .observability-overview-table th:nth-child(1) { width: 16%; }
.monitoring-overview-grid > .observability-card.show-extra-columns .observability-overview-table th:nth-child(2) { width: 18%; }
.monitoring-overview-grid > .observability-card.show-extra-columns .observability-overview-table th:nth-child(3) { width: 22%; }
.monitoring-overview-grid > .observability-card.show-extra-columns .observability-overview-table th:nth-child(4) { width: 18%; }
.monitoring-overview-grid > .observability-card.show-extra-columns .observability-overview-table th:nth-child(5) { width: 12%; }
.monitoring-overview-grid > .observability-card.show-extra-columns .observability-overview-table th:nth-child(6) { width: 14%; }

.monitoring-overview-grid:has(#monitoring-requests .show-extra-columns) > #monitoring-requests {
    grid-column: 1 / -1;
    order: -1;
}

.monitoring-overview-grid:has(> .observability-card.show-extra-columns) > .observability-card.show-extra-columns {
    grid-column: 1 / -1;
    order: -1;
}

.monitoring-overview-grid:has(.show-extra-columns) > #monitoring-requests:not(:has(.show-extra-columns)),
.monitoring-overview-grid:has(.show-extra-columns) > .observability-card:not(.show-extra-columns) {
    order: 0;
}

.observability-overview-table td a {
    color: var(--accent-hover);
    font-weight: 600;
}

.observability-overview-table td a:hover {
    text-decoration: underline;
}

.observability-endpoint {
    color: var(--text-2);
    font-size: 11.5px;
    overflow-wrap: anywhere;
}

.observability-backup-date {
    display: block;
    margin-top: 3px;
    color: var(--text-3);
    font-size: 10.5px;
}

.observability-table-note {
    padding: 10px 16px 13px;
    color: var(--text-3);
    font-size: 11px;
}

/* As duas tabelas de /monitoramentos dividem a faixa em telas amplas. */
.monitoring-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.monitoring-overview-grid > .observability-card {
    min-width: 0;
    margin: 0;
}

.monitoring-overview-grid > #monitoring-requests {
    min-width: 0;
}

.monitoring-overview-table-card .card-head {
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.monitoring-overview-table-card .card-head h2 {
    min-width: 0;
    font-size: 14px;
}

.observability-columns-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 32px;
    gap: 5px;
    padding: 6px 8px;
    font-size: 11px;
}

.observability-columns-toggle .ic {
    font-size: 16px;
}

.monitoring-overview-table-card .observability-column-extra {
    display: none;
}

.monitoring-overview-table-card.show-extra-columns .observability-overview-table .observability-column-extra {
    display: table-cell;
}

@media (min-width: 1180px) {
    .monitoring-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 1600px) {
    .monitoring-overview-table-card .card-head>.muted {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 900px) {
    .observability-overview-table {
        min-width: 0;
    }

    .observability-card .table-wrap {
        overflow-x: visible;
    }

    .monitoring-overview-table-card .observability-overview-table th:nth-child(n) {
        width: auto;
    }

    .monitoring-overview-table-card.show-extra-columns .observability-overview-table td.observability-column-extra {
        display: grid;
    }
}

.observability-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 145px;
    color: var(--text-3);
    font-size: 11px;
}

.observability-log-row time,
.observability-job-row time {
    color: var(--text-3);
    font-size: 11px;
    white-space: nowrap;
}

.observability-card--logs .card-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    transition: opacity .15s ease;
}

.observability-card--logs .card-body[aria-busy="true"] {
    opacity: .55;
    pointer-events: none;
}

[data-table-pagination][aria-busy="true"] {
    opacity: .55;
    pointer-events: none;
}

.observability-backups-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.observability-backup-list {
    display: grid;
    gap: 0;
    max-height: 190px;
    overflow: auto;
}

.observability-backup-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.observability-backup-row:last-child {
    border-bottom: 0;
}

.observability-backup-main {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 2px;
}

.observability-backup-main strong,
.observability-backup-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.observability-backup-main small,
.observability-backup-meta {
    color: var(--text-3);
    font-size: 10px;
}

.observability-backup-meta {
    min-width: 76px;
    text-align: right;
    line-height: 1.35;
}

.observability-backup-meta small {
    font-size: 10px;
}

.observability-empty-inline {
    margin: 0;
    color: var(--text-3);
    font-size: 12px;
}

.observability-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 18px;
    border-top: 1px solid var(--border);
}

.observability-pagination .btn.btn--sm {
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 550;
}

.observability-pagination .btn.btn--sm i.ic {
    font-size: 16px;
}

.table-pagination__pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.observability-pagination .btn[aria-disabled="true"] {
    cursor: default;
    opacity: .42;
}

.observability-pagination .btn.is-current {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    background: var(--accent-weak);
    color: var(--accent-hover);
    font-weight: 700;
}

.observability-generated {
    margin: 12px 0;
    text-align: right;
}

/* ----- Saúde da aplicação ----- */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 650;
}

.health-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--text-3);
}

.health-dot--ok {
    background: var(--ok);
}

.health-dot--warn {
    background: var(--warn);
}

.health-dot--bad {
    background: var(--bad);
}

.health-chart-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px;
}

.health-chart-card {
    min-width: 0;
    overflow: hidden;
}

.health-chart-card .card-head {
    min-height: 48px;
    padding-block: 12px;
}

.health-chart {
    height: 164px;
    padding: 2px 0 0;
}

.health-chart-card .card-body {
    padding: 4px 16px 12px;
}

.health-summary-grid .stat .v,
.health-summary-grid .stat .sub {
    display: block;
}

.health-summary-grid .stat .v small {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

.health-queues-card {
    margin-bottom: 18px;
    overflow: hidden;
}

.health-queue-list {
    display: grid;
}

.health-queue-row {
    display: grid;
    grid-template-columns: 8px minmax(150px, 1fr) minmax(280px, 1.4fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
}

.health-queue-row:last-child {
    border-bottom: 0;
}

.health-queue-main {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.health-queue-main strong,
.health-queue-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-queue-main small {
    color: var(--text-3);
    font-size: 11px;
}

.health-queue-alert {
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-queue-alert--warn {
    color: var(--warn);
}

.health-queue-alert--bad {
    color: var(--bad);
}

.health-queue-metrics {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--text-3);
    font-size: 11px;
}

.health-queue-capacity {
    color: var(--text-3);
    font-size: 11px;
    white-space: nowrap;
}

.health-status-card {
    margin-bottom: 18px;
    overflow: hidden;
}

.health-status-list {
    display: grid;
}

.health-status-row {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
}

.health-status-row:last-child {
    border-bottom: 0;
}

.health-status-row>span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.health-status-row strong,
.health-status-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-status-row strong {
    font-size: 12px;
}

.health-status-row small {
    color: var(--text-3);
    font-size: 11px;
}

.health-status-state {
    font-size: 11px;
    font-weight: 600;
}

.health-status-state--ok {
    color: var(--accent);
}

.health-status-state--warn {
    color: var(--warn);
}

.health-status-state--bad {
    color: var(--bad);
}

.health-sections {
    grid-template-columns: minmax(0, 3fr) minmax(230px, 1fr);
    align-items: start;
    margin-bottom: 18px;
}

.health-sections .health-status-card,
.health-sections .health-retention-card {
    margin-bottom: 0;
}

.health-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.health-metrics div {
    min-width: 0;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.health-metrics span {
    display: block;
    color: var(--text-3);
    font-size: 11px;
}

.health-metrics strong {
    display: block;
    margin-top: 5px;
    font-size: 21px;
}

.health-meta {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.health-meta div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
}

.health-meta dt {
    color: var(--text-3);
}

.health-meta dd {
    max-width: 65%;
    overflow: hidden;
    color: var(--text-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-note {
    margin-top: 14px;
    line-height: 1.5;
}

.health-table-card {
    overflow: hidden;
}

.health-table-card+.health-table-card {
    margin-top: 18px;
}

.health-job-list {
    display: grid;
    gap: 0;
}

.health-job {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .8fr) auto;
    gap: 16px;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
}

.health-job:last-child {
    border-bottom: 0;
}

.health-job strong,
.health-job span,
.health-job p,
.health-job time {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-job strong {
    font-size: 12px;
}

.health-job span,
.health-job p,
.health-job time {
    margin-top: 4px;
    color: var(--text-3);
    font-size: 11px;
}

.health-job p {
    color: var(--bad);
}

.health-job .health-job-attempts {
    color: inherit;
}

.health-job time {
    margin-top: 0;
    text-align: right;
}

.health-log-metrics {
    margin: 14px 18px 0;
}

.health-log-meta {
    margin-inline: 18px;
}

.health-log-list {
    margin-top: 8px;
}

.health-log-item strong .health-dot {
    display: inline-block;
    margin: 0 6px 0 0;
    vertical-align: middle;
}

.health-generated {
    margin-top: 12px;
    text-align: right;
}

.text-bad {
    color: var(--bad);
}

.installation-origins-form {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

.installation-origins-form .hint {
    margin-top: 5px;
    color: var(--text-3);
    font-size: 11px;
    line-height: 1.4;
}

@media (max-width: 1080px) {
    .finance-advanced-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .finance-range-field {
        grid-column: 1 / -1;
    }

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

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

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

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

@media (max-width: 560px) {
    .finance-advanced-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .finance-range-field {
        grid-column: 1 / -1;
    }

    .finance-search-row {
        padding: 10px 10px 0;
    }

    .finance-search-control {
        gap: 6px;
        padding-left: 9px;
    }

    .finance-search-control .btn {
        padding-inline: 9px;
    }

    .finance-advanced-filters>summary {
        gap: 7px;
        padding-inline: 11px;
    }

    .finance-advanced-period {
        max-width: 48%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .finance-advanced-body {
        padding-inline: 10px;
    }

    .finance-filter-actions>.btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .observability-metrics {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .observability-system-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .observability-status {
        min-width: calc(50% - 12px);
    }

    .observability-log-row,
    .observability-job-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .observability-card--logs {
        max-height: none;
    }

    .observability-pagination {
        justify-content: space-between;
    }

    .health-chart {
        height: 154px;
    }

    .health-status-row {
        align-items: flex-start;
    }

    .health-queue-row {
        grid-template-columns: 8px minmax(0, 1fr) auto;
        align-items: start;
    }

    .health-queue-metrics {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }

    .health-queue-capacity {
        grid-column: 2 / -1;
    }

    .health-status-state {
        padding-top: 1px;
    }

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

    .health-job {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .health-job time {
        text-align: left;
    }

    .notifications-page-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .notifications-bulkbar {
        flex-wrap: wrap;
        padding: 10px 14px;
    }

    .notifications-bulkbar form {
        width: 100%;
        margin-left: 0;
    }

    .notifications-bulkbar form .btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .notification-page-row {
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: start;
        padding: 13px 14px;
    }

    .notification-page-actions {
        grid-column: 2 / -1;
        justify-content: flex-end;
    }

    .notification-page-copy p {
        white-space: normal;
    }
}

/* Operação no mobile: mantém o cabeçalho legível e transforma as linhas
   técnicas em blocos compactos, sem deixar conteúdo sob a tabbar. */
@media (max-width: 560px) {
    .observability-page {
        min-width: 0;
    }

    .observability-page .page-head--rich {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "content"
            "actions";
        gap: 10px;
        width: 100%;
    }

    .observability-page .page-head--rich>.context-back {
        display: none;
    }

    .observability-page .page-head--rich>.t,
    .observability-page .page-head--rich>.actions {
        grid-column: 1;
        width: 100%;
        min-width: 0;
    }

    .observability-page .page-head--rich>.t {
        grid-area: content;
        flex: none;
    }

    .observability-page .page-head--rich>.actions {
        grid-area: actions;
        justify-content: flex-start;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }

    .observability-page .page-head--rich h1,
    .observability-page .page-head--rich .lead {
        max-width: none;
        overflow-wrap: normal;
        word-break: normal;
    }

    .observability-page .page-head--rich h1 {
        font-size: clamp(24px, 7vw, 30px);
        line-height: 1.12;
    }

    .observability-page .page-head--rich .lead {
        font-size: 15px;
        line-height: 1.45;
    }

    .observability-page .stat .v,
    .observability-page .stat .sub {
        display: block;
    }

    .observability-page .stat .v {
        margin-top: 6px;
    }

    .observability-page .observability-backup-list {
        max-height: 270px;
    }

    .observability-page .observability-backup-row {
        gap: 8px;
        padding: 10px 0;
    }

    .observability-page .observability-backup-main {
        min-width: 0;
    }

    .observability-page .observability-backup-meta {
        min-width: 68px;
        font-size: 11px;
    }

    .observability-page .observability-backups-body>.btn {
        width: 100%;
    }

    .observability-page .observability-system-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 22px;
        align-items: center;
        gap: 9px 12px;
        padding: 14px;
    }

    .observability-page .observability-system-name {
        grid-column: 1 / -1;
        width: 100%;
    }

    .observability-page .observability-status {
        min-width: 0;
        font-size: 12px;
        white-space: nowrap;
    }

    .observability-page .observability-system-row>.ic {
        grid-column: 3;
        grid-row: 2;
    }

    .observability-page .observability-log-row,
    .observability-page .observability-job-row {
        gap: 8px;
        padding: 13px 14px;
    }

    .observability-page .observability-log-main {
        min-width: 0;
    }

    .observability-page .observability-log-row>time,
    .observability-page .observability-job-row>time {
        margin-left: 26px;
    }

    .observability-page .observability-card--logs {
        max-height: none;
    }
}

/* Float Notes: captura privada acessível em todas as telas autenticadas. */
.float-notes {
    --fn-accent: var(--accent, #b88a10);
    position: fixed;
    z-index: 1200;
    right: 0;
    top: 50%;
    font-family: inherit;
    color: var(--text, #eee)
}

.float-notes-trigger {
    position: relative;
    z-index: 2;
    transform: translateY(-50%);
    width: 38px;
    height: 68px;
    border: 1px solid var(--border, #303037);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    background: var(--surface, #19191c);
    color: var(--fn-accent);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: .66;
    transition: width .2s ease, opacity .2s ease, background .2s ease
}

.float-notes-trigger {
    touch-action: none
}

.float-notes-trigger.is-reposition-armed {
    width: 50px;
    opacity: 1;
    cursor: grab;
    background: color-mix(in srgb, var(--fn-accent), var(--surface, #19191c) 84%);
    outline: 2px solid color-mix(in srgb, var(--fn-accent), transparent 30%);
    outline-offset: 3px;
    animation: float-notes-reposition-pulse .8s ease-in-out infinite alternate
}

.float-notes-trigger.is-reposition-armed::after {
    content: "⋮";
    position: absolute;
    left: 5px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    opacity: .8
}

.float-notes-trigger.is-reposition-armed:active {
    cursor: grabbing
}

@keyframes float-notes-reposition-pulse {
    from {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--fn-accent), transparent 70%)
    }

    to {
        box-shadow: 0 0 0 7px color-mix(in srgb, var(--fn-accent), transparent 84%)
    }
}

@media(prefers-reduced-motion:reduce) {
    .float-notes-trigger.is-reposition-armed {
        animation: none
    }
}

.float-notes-trigger:hover,
.float-notes-trigger:focus-visible {
    width: 46px;
    opacity: 1;
    background: var(--surface-2, #222226);
    outline: 2px solid color-mix(in srgb, var(--fn-accent), transparent 55%);
    outline-offset: 2px
}

.float-notes-trigger .ic {
    font-size: 21px
}

.float-notes-panel {
    position: fixed;
    right: 46px;
    top: 50%;
    transform: translateY(-50%);
    width: min(430px, calc(100vw - 58px));
    max-height: min(760px, calc(100dvh - 32px));
    overflow: auto;
    border: 1px solid var(--border, #303037);
    border-radius: 18px;
    background: var(--surface, #19191c);
    box-shadow: 0 18px 60px #0008;
    color: var(--text, #eee)
}

.float-notes.is-maximized .float-notes-panel {
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1040px, calc(100vw - 64px));
    max-height: calc(100dvh - 64px)
}

body.float-notes-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(2px);
    animation: float-notes-backdrop-in .18s ease-out
}

@keyframes float-notes-backdrop-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.float-notes-panel[hidden],
.float-notes-view[hidden],
.float-notes-proposal[hidden],
.float-notes-suggestions[hidden] {
    display: none !important
}

.float-notes [hidden] {
    display: none !important
}

.float-notes-panel {
    overflow-x: hidden
}

.float-notes-view,
.float-notes-editor,
.float-notes-text-wrap,
.float-note-rich-editor {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%
}

.float-note-rich-editor .rich-editor-toolbar {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: auto
}

/* Detalhe de log: diagnóstico legível também em telas estreitas. */
.observability-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 18px 24px;
    margin: 0
}

.observability-detail-grid>div {
    min-width: 0
}

.observability-detail-grid dt {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em
}

.observability-detail-grid dd {
    margin: 0;
    overflow-wrap: anywhere
}

.observability-context {
    max-height: 520px;
    overflow: auto;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
    font: .88rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

.observability-context--related {
    max-height: 220px;
    margin-top: 10px;
    padding: 10px;
    font-size: .78rem
}

.observability-copy-button {
    flex: 0 0 auto
}

.observability-context--highlighted .observability-json-key {
    color: var(--accent);
    font-weight: 600
}

.observability-context--highlighted .observability-json-string {
    color: var(--success, #64c990)
}

.observability-context--highlighted .observability-json-number {
    color: #b7a0ff
}

.observability-context--highlighted .observability-json-literal {
    color: #f2bd68;
    font-weight: 600
}

.observability-context--highlighted .observability-json-punctuation {
    color: var(--text-3)
}

.float-note-rich-editor .rich-editor-surface {
    overflow-wrap: anywhere;
    word-break: break-word
}

.float-notes-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border, #303037);
    background: var(--surface, #19191c)
}

.float-notes-header>div {
    display: grid;
    gap: 1px
}

.float-notes-header strong {
    font-size: 16px;
    line-height: 1.2
}

.float-notes-header span,
.float-notes-map-intro,
.float-notes-ai-disclosure {
    font-size: 12px;
    color: var(--muted, #92929d)
}

.float-notes-header span {
    line-height: 1.2
}

.float-notes-header>.float-notes-window-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding-left: 14px
}

.float-notes-window-control.icon-btn {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
    border: 1px solid #5a5a5d;
    border-radius: 50%;
    background: #48484b !important;
    color: #fff;
    box-shadow: inset 0 1px rgba(255, 255, 255, .16);
    transition: filter .15s ease, transform .15s ease, background-color .15s ease, border-color .15s ease
}

.float-notes-window-control .ic {
    font-size: 9px;
    opacity: 0;
    transition: opacity .12s ease
}

.float-notes-window-controls:is(:hover, :focus-within) .ic {
    opacity: 1
}

.float-notes-window-controls:is(:hover, :focus-within) .float-notes-window-control--close {
    background: #ff5f57 !important;
    border-color: #e0443e !important
}

.float-notes-window-controls:is(:hover, :focus-within) .float-notes-window-control--fullscreen {
    background: #28c840 !important;
    border-color: #1aab29 !important
}

.float-notes-window-control:hover {
    filter: brightness(1.08);
    transform: scale(1.06)
}

.float-notes-window-control:focus-visible {
    outline: 2px solid var(--text, #fff);
    outline-offset: 3px
}

.float-notes-library {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    margin-bottom: 10px
}

.float-notes-library input,
.float-notes-library select {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border, #34343c);
    border-radius: 9px;
    background: var(--surface-2, #151518);
    color: var(--text, #eee);
    font: inherit;
    padding: 8px 10px
}

.float-notes-list {
    display: grid;
    gap: 5px;
    max-height: 180px;
    overflow: auto;
    padding: 0 2px 9px;
    margin-bottom: 8px
}

.float-notes-list .float-note-list-item {
    width: 100%;
    max-width: none;
    text-align: left
}

.float-notes-empty {
    margin: 0;
    padding: 8px;
    color: var(--muted, #999);
    font-size: 12px
}

.float-notes-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--muted, #999);
    font-size: 11px
}

.float-notes-pagination .btn {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 11px
}

.float-notes-pagination button:disabled {
    opacity: .42;
    cursor: not-allowed
}

.float-notes-panel:focus {
    outline: none
}

.float-notes-panel :focus-visible {
    outline: 2px solid var(--fn-accent);
    outline-offset: 2px
}

.float-notes.is-archived .float-notes-editor {
    opacity: .78
}

.float-notes-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px 0
}

.float-notes-tabs button {
    border: 0;
    border-radius: 999px;
    padding: 7px 12px;
    background: transparent;
    color: var(--muted, #92929d);
    cursor: pointer
}

.float-notes-tabs button.is-active {
    background: color-mix(in srgb, var(--fn-accent), transparent 82%);
    color: var(--fn-accent)
}

.float-notes-view {
    padding: 12px 16px 16px
}

.float-notes-list {
    display: flex;
    gap: 7px;
    overflow: auto;
    padding: 0 0 11px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border, #303037)
}

.float-note-rich-editor {
    position: relative
}

.float-note-rich-editor .rich-editor-surface {
    box-sizing: border-box;
    height: 210px;
    min-height: 130px;
    max-height: 44vh;
    overflow-y: auto;
    padding-bottom: 52px
}

.float-notes.is-maximized .float-note-rich-editor .rich-editor-surface {
    height: 40vh;
    max-height: 52vh
}

.float-note-consolidate {
    position: absolute;
    right: 9px;
    bottom: 9px;
    z-index: 2;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--border-strong, #45454d);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.2;
    box-shadow: 0 2px 8px #0003;
    backdrop-filter: blur(8px)
}

.float-note-consolidate:hover:not(:disabled) {
    background: var(--surface-3);
    color: var(--accent)
}

.float-note-consolidate:disabled {
    opacity: .48;
    cursor: not-allowed
}

.float-notes-list button {
    flex: 0 0 auto;
    max-width: 165px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid var(--border, #303037);
    border-radius: 9px;
    padding: 7px 10px;
    background: transparent;
    color: var(--muted, #aaa);
    cursor: pointer
}

.float-notes-list button.is-active {
    border-color: var(--fn-accent);
    color: var(--text, #eee)
}

.float-notes-editor {
    display: grid;
    gap: 10px
}

.float-notes-editor input,
.float-notes-editor textarea,
.float-notes-proposal textarea {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--border, #34343c);
    border-radius: 10px;
    background: var(--surface-2, #151518);
    color: var(--text, #eee);
    font: inherit;
    padding: 10px 12px
}

.float-notes-editor textarea {
    height: 168px;
    resize: vertical;
    line-height: 1.5
}

.float-notes-text-wrap {
    position: relative
}

.float-notes-suggestions {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    top: calc(100% + 3px);
    max-height: 210px;
    overflow: auto;
    border: 1px solid var(--border, #393941);
    border-radius: 10px;
    background: var(--surface, #202024);
    box-shadow: 0 10px 30px #0008
}

.float-notes-suggestions button {
    display: grid;
    width: 100%;
    gap: 3px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--border, #303037);
    background: transparent;
    color: var(--text, #eee);
    text-align: left;
    cursor: pointer
}

.float-notes-suggestions button:hover,
.float-notes-suggestions button:focus {
    background: color-mix(in srgb, var(--fn-accent), transparent 88%)
}

.float-notes-suggestions small {
    color: var(--muted, #999)
}

.float-notes-references {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.float-note-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fn-accent), transparent 84%);
    color: var(--fn-accent);
    font-size: 11px
}

.float-note-chip button {
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 15px
}

.float-notes-status {
    min-height: 18px;
    font-size: 12px;
    color: var(--muted, #999)
}

.float-notes-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.float-notes .float-notes-actions .btn {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 13px;
    line-height: 1.2
}

.float-notes .float-notes-actions .btn .ic {
    font-size: 15px
}

.float-notes-actions button:disabled {
    opacity: .48;
    cursor: not-allowed
}

.float-notes-proposal {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--fn-accent), transparent 60%);
    border-radius: 12px
}

.float-notes-proposal>span {
    font-size: 12px;
    color: var(--muted, #aaa)
}

.float-notes-proposal textarea {
    height: 130px;
    resize: vertical
}

.float-notes-ai-disclosure {
    line-height: 1.4
}

.float-notes-graph {
    display: grid;
    gap: 8px
}

.float-note-graph-item {
    padding: 10px 12px;
    border: 1px solid var(--border, #303037);
    border-radius: 10px
}

.float-note-graph-item a {
    color: var(--fn-accent);
    text-decoration: none
}

.float-note-graph-item p {
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--muted, #999)
}

.float-note-graph-empty {
    padding: 20px;
    text-align: center;
    color: var(--muted, #999)
}

.float-notes .float-notes-list {
    display: grid;
    gap: 5px;
    max-height: 180px;
    overflow: auto;
    padding: 0 2px 9px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border, #303037)
}

.float-notes .float-notes-list .float-note-list-item {
    width: 100%;
    max-width: none;
    text-align: left;
    white-space: nowrap
}

.float-notes-graph {
    max-height: 60vh;
    overflow: auto;
    overscroll-behavior: contain
}

.float-notes-map-svg {
    display: block;
    width: 760px;
    min-width: 760px;
    height: auto;
    overflow: visible
}

.float-notes-map-edge {
    fill: none;
    stroke: color-mix(in srgb, var(--fn-accent), transparent 55%);
    stroke-width: 2
}

.float-notes-map-node {
    cursor: pointer
}

.float-notes-map-node rect {
    fill: var(--surface-2, #151518);
    stroke: var(--border-strong, #45454d);
    stroke-width: 1.5
}

.float-notes-map-node.is-note rect {
    stroke: color-mix(in srgb, var(--fn-accent), transparent 30%)
}

.float-notes-map-node text {
    fill: var(--text, #eee);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600
}

.float-notes-map-node .float-notes-map-meta {
    fill: var(--muted, #92929d);
    font-size: 10px;
    font-weight: 400
}

.float-notes-map-node:hover rect {
    stroke: var(--fn-accent);
    stroke-width: 2.5
}

.float-notes-map-limit {
    font-size: 12px;
    color: var(--muted, #92929d)
}

@media(max-width:600px) {
    .float-notes {
        top: 50%;
        left: auto;
        right: 0;
        bottom: auto
    }

    .float-notes-trigger,
    .float-notes-trigger:hover,
    .float-notes-trigger:focus-visible {
        width: 44px;
        height: 56px;
        min-width: 44px;
        transform: translateY(-50%);
        border: 1px solid var(--border-strong, #45454d);
        border-right: 0;
        border-radius: 14px 0 0 14px;
        background: var(--surface, #19191c);
        box-shadow: 0 6px 18px #0004;
        opacity: .88
    }

    .float-notes-trigger .ic {
        font-size: 20px
    }

    .float-notes-panel {
        left: 12px;
        right: 12px;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        max-height: calc(100dvh - 24px);
        width: auto;
        border-radius: 16px
    }

    .float-notes.is-maximized .float-notes-panel {
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: calc(100vw - 24px);
        max-height: 90dvh
    }

    .float-notes-view {
        padding: 10px 12px 14px
    }

    .float-note-rich-editor .rich-editor-surface {
        height: 160px
    }

    .float-notes.is-maximized .float-note-rich-editor .rich-editor-surface {
        height: 45vh;
        max-height: 56vh
    }
}

/* Float Notes: biblioteca e editor são telas distintas dentro do painel. */
.float-notes-library-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px
}

.float-notes-library-heading>div {
    display: grid;
    gap: 3px;
    min-width: 0
}

.float-notes-library-heading .float-notes-library-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px
}

.float-notes-library-heading strong {
    font-size: 14px
}

.float-notes-library-heading span,
.float-notes-library-status {
    font-size: 11px;
    color: var(--muted, #92929d)
}

.float-notes-library-heading .btn {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap
}

.float-notes-library-status {
    margin: 0 0 7px;
    min-height: 0
}

.float-notes-library-status:empty {
    display: none
}

.float-notes .float-notes-list {
    display: grid;
    gap: 7px;
    max-height: min(52dvh, 440px);
    overflow: auto;
    padding: 1px 2px 5px;
    margin: 0 0 9px;
    border: 0
}

.float-notes .float-notes-list .float-note-list-item {
    display: grid;
    gap: 4px;
    flex: none;
    max-width: none;
    white-space: normal;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--border, #303037);
    border-radius: 10px;
    background: var(--surface-2, #151518);
    color: var(--text, #eee);
    transition: border-color .15s ease, background .15s ease
}

.float-notes .float-notes-list .float-note-list-item:hover,
.float-notes .float-notes-list .float-note-list-item.is-active {
    border-color: var(--fn-accent);
    background: color-mix(in srgb, var(--fn-accent), var(--surface-2, #151518) 94%)
}

.float-notes-list-item strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600
}

.float-notes-list-item>span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
    font-size: 11px;
    color: var(--muted, #aaa)
}

.float-notes-list-item small {
    font-size: 10px;
    color: var(--muted, #92929d)
}

.float-notes .float-notes-list .float-notes-empty {
    padding: 24px 12px;
    border: 1px dashed var(--border, #303037);
    border-radius: 10px;
    text-align: center;
    line-height: 1.5
}

.float-notes-editor {
    gap: 9px
}

.float-notes-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    padding: 3px 0;
    border: 0;
    background: none;
    color: var(--muted, #aaa);
    font: inherit;
    font-size: 12px;
    cursor: pointer
}

.float-notes-back:hover {
    color: var(--fn-accent)
}

.float-notes-editor-heading {
    font-size: 14px;
    font-weight: 600
}

.float-notes.is-archived .float-notes-back {
    display: none
}

@media(max-width:600px) {
    .float-notes .float-notes-list {
        max-height: 45dvh
    }

    .float-notes-library-heading .btn {
        padding: 6px 8px
    }
}

.float-notes-delete {
    margin-left: auto;
    color: var(--danger, #ef7777) !important
}

.float-notes-delete:hover {
    border-color: color-mix(in srgb, var(--danger, #ef7777), transparent 35%);
    background: color-mix(in srgb, var(--danger, #ef7777), transparent 90%)
}

.content.content--notes-workspace {
    max-width: 2200px
}

.float-notes.is-page {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0 auto
}

.float-notes.is-page .float-notes-panel {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    border-radius: 18px;
    box-shadow: 0 12px 38px #0003
}

.float-notes.is-page .float-notes-header {
    position: static;
    padding: 16px 20px
}

.float-notes.is-page .float-notes-header strong {
    font-size: 20px
}

.float-notes.is-page .float-notes-header span {
    display: block;
    margin-top: 3px
}

.float-notes.is-page .float-notes-tabs {
    padding: 14px 20px 0
}

.float-notes.is-page .float-notes-view {
    padding: 18px 20px 24px
}

.float-notes.is-page .float-notes-list {
    max-height: min(62vh, 720px)
}

.float-notes.is-page .float-notes-graph {
    max-height: min(72vh, 820px)
}

.float-notes.is-page .float-note-rich-editor .rich-editor-surface {
    height: min(58vh, 620px);
    max-height: none
}

@media(max-width:600px) {
    .float-notes.is-page {
        max-width: none
    }

    .float-notes.is-page .float-notes-panel {
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        border-radius: 14px
    }

    .float-notes.is-page .float-notes-header {
        padding: 14px
    }

    .float-notes.is-page .float-notes-header .btn {
        min-height: 34px;
        padding: 6px 9px;
        font-size: 12px
    }

    .float-notes.is-page .float-notes-tabs {
        padding: 10px 12px 0
    }

    .float-notes.is-page .float-notes-view {
        padding: 14px 12px 18px
    }

    .float-notes.is-page .float-notes-library-heading {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .float-notes.is-page .float-notes-library-actions {
        width: 100%;
        justify-content: flex-start
    }

    .float-notes.is-page .float-notes-list {
        max-height: 52vh
    }

    .float-notes.is-page .float-note-rich-editor .rich-editor-surface {
        height: 42vh;
        max-height: 56vh
    }
}

.lead-instagram-preview {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--accent);
    text-decoration: none
}

.lead-instagram-preview:hover {
    text-decoration: underline
}

.icon-btn .instagram-mark {
    display: block;
    width: 16px;
    height: 16px
}

/* Float Notes: leitura primeiro, edição explícita e citações navegáveis. */
.float-note-reader {
    display: grid;
    gap: 16px;
    min-width: 0
}

.float-note-reader-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.float-note-reader-heading {
    display: grid;
    gap: 4px;
    min-width: 0
}

.float-note-reader-heading h2 {
    margin: 0;
    font-size: clamp(19px, 2vw, 26px);
    overflow-wrap: anywhere
}

.float-note-reader-heading time {
    color: var(--muted, #92929d);
    font-size: 12px
}

.float-note-reader-content {
    min-width: 0;
    max-height: min(58vh, 720px);
    overflow: auto;
    padding: clamp(16px, 3vw, 28px);
    border: 1px solid var(--border, #303037);
    border-radius: 12px;
    background: var(--surface-2, #151518);
    line-height: 1.65;
    overflow-wrap: anywhere
}

.float-note-reader-content>:first-child {
    margin-top: 0
}

.float-note-reader-content>:last-child {
    margin-bottom: 0
}

.float-note-inline-reference {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--accent, var(--fn-accent));
    font: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    cursor: pointer
}

.float-note-inline-reference:hover,
.float-note-inline-reference:focus-visible {
    color: var(--text, #fff);
    text-decoration-style: solid
}

.float-note-reader-references {
    padding-top: 2px
}

.float-note-reader-references .float-note-inline-reference {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, var(--fn-accent), transparent 58%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fn-accent), transparent 91%);
    font-size: 12px;
    text-decoration: none
}

.float-note-reference-dialog {
    box-sizing: border-box;
    width: min(520px, calc(100vw - 28px));
    max-height: min(78dvh, 680px);
    overflow: auto;
    padding: 20px;
    border: 1px solid var(--border-strong, #45454d);
    border-radius: 18px;
    background: var(--surface, #19191c);
    color: var(--text, #eee);
    box-shadow: 0 24px 80px #0009
}

.float-note-reference-dialog[open] {
    display: grid;
    gap: 18px
}

.float-note-reference-dialog::backdrop {
    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(3px)
}

.float-note-reference-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px
}

.float-note-reference-dialog-head>div {
    min-width: 0
}

.float-note-reference-dialog-head span {
    color: var(--fn-accent);
    font-size: 12px
}

.float-note-reference-dialog-head h2 {
    margin: 4px 0 0;
    font-size: 21px;
    overflow-wrap: anywhere
}

.float-note-reference-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 14px;
    margin: 0
}

.float-note-reference-fields>div {
    min-width: 0
}

.float-note-reference-fields dt {
    margin-bottom: 4px;
    color: var(--muted, #92929d);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em
}

.float-note-reference-fields dd {
    margin: 0;
    overflow-wrap: anywhere
}

.float-note-reference-dialog>[data-fn-ref-open] {
    width: max-content;
    max-width: 100%;
    min-height: 38px
}

.float-notes-map-edge.is-note-link {
    stroke-dasharray: 5 5;
    stroke-width: 2.5;
    opacity: .85
}

.float-notes-map-node:focus-visible rect {
    stroke: var(--fn-accent);
    stroke-width: 3
}

@media(max-width:600px) {
    .float-note-reader-content {
        max-height: 55vh;
        padding: 14px
    }

    .float-note-reference-dialog {
        padding: 16px
    }
}

.system-client-manager-head {
    display: grid;
    gap: 4px;
    margin-bottom: 10px
}

.system-client-manager-head label {
    font-weight: 600
}

.system-client-manager-head .hint {
    line-height: 1.45
}

.system-linked-clients {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 9px;
    margin-bottom: 10px
}

.system-linked-client {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2, rgba(255, 255, 255, .025));
    transition: border-color .16s ease, background .16s ease
}

.system-linked-client:hover,
.system-linked-client:focus-within {
    border-color: var(--border-strong, var(--accent));
    background: var(--surface-3, rgba(255, 255, 255, .045))
}

.system-linked-client-profile {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none
}

.system-linked-client-profile:hover .system-linked-client-copy strong {
    color: var(--accent)
}

.system-linked-client-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    color: var(--accent)
}

.system-linked-client-copy {
    display: grid;
    gap: 2px;
    min-width: 0
}

.system-linked-client-copy strong,
.system-linked-client-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.system-linked-client-copy strong {
    font-size: 13px
}

.system-linked-client-copy small {
    color: var(--text-3);
    font-size: 11px
}

.system-linked-client-remove {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer
}

.system-linked-client-remove:hover,
.system-linked-client-remove:focus-visible {
    border-color: color-mix(in srgb, var(--danger, #e66) 35%, transparent);
    background: color-mix(in srgb, var(--danger, #e66) 10%, transparent);
    color: var(--danger, #e66)
}

.system-linked-clients-empty {
    grid-column: 1/-1;
    margin: 0;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    color: var(--text-3);
    font-size: 13px;
    text-align: center
}

.system-linked-clients-empty.is-hidden {
    display: none
}

.system-client-picker-field {
    margin: 0
}

.system-client-picker-field select {
    width: 100%
}

@media(max-width:600px) {
    .system-linked-clients {
        grid-template-columns: 1fr
    }

    .system-client-manager-head .hint {
        font-size: 12px
    }
}

.aurelio-color-picker {
    display: block;
    width: 64px;
    height: 42px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-2);
    cursor: pointer
}

.aurelio-color-picker::-webkit-color-swatch-wrapper {
    padding: 2px
}

.aurelio-color-picker::-webkit-color-swatch {
    border: 0;
    border-radius: 5px
}

.aurelio-color-picker::-moz-color-swatch {
    border: 0;
    border-radius: 5px
}

.system-summary-field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 82px;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    line-height: 1.5
}

.system-summary-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.system-summary-label>label {
    font-weight: 600
}

.system-summary-field [data-system-summary-status] {
    display: block;
    min-height: 18px;
    color: var(--text-3);
    font-size: 12px
}

.system-summary-field [data-system-summary-ai]:disabled {
    opacity: .65;
    cursor: wait
}

.system-card-summary {
    display: -webkit-box;
    overflow: hidden;
    margin: 10px 0 0;
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
}

.system-detail-head .detail-hero .system-summary-display {
    margin: 0;
    color: var(--text-2);
    font-size: clamp(14px, 1.3vw, 17px);
    line-height: 1.55
}

.system-full-description {
    margin: -10px 0 20px;
    padding: 12px 16px
}

.system-full-description>summary {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none
}

.system-full-description>summary::-webkit-details-marker {
    display: none
}

.system-full-description[open]>summary {
    margin-bottom: 12px
}

.system-full-description .rich-content {
    max-width: 100ch
}

@media(max-width:600px) {
    .system-summary-label {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px
    }

    .system-summary-label .btn {
        align-self: flex-start
    }
}

.email-branding-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
    gap: 24px;
    align-items: start
}

.email-branding-fields {
    display: grid;
    gap: 14px;
    min-width: 0
}

.email-branding-fields .field {
    margin: 0
}

.email-branding-fields input[type=file] {
    max-width: 100%
}

.email-branding-preview {
    position: sticky;
    top: 20px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2, rgba(255, 255, 255, .025))
}

.email-branding-preview__mail {
    overflow: hidden;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: #202124;
    font: 14px/1.55 Arial, Helvetica, sans-serif
}

.email-branding-preview__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 4px solid var(--email-preview-accent);
    background: #121318;
    color: #fff;
    font-size: 16px
}

.email-branding-preview__head img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 9px
}

.email-branding-preview__body {
    padding: 20px 16px
}

.email-branding-preview__body p {
    margin: 9px 0 0
}

.email-branding-preview__foot {
    padding: 14px 16px;
    background: #f7f7f8;
    color: #707782;
    font-size: 11px;
    overflow-wrap: anywhere
}

.email-branding-preview+.hint {
    margin-top: 12px
}

.outbound-email-panel {
    scroll-margin-top: 24px
}

.outbound-email-panel>.card-head>div {
    min-width: 0
}

.outbound-email-panel>.card-head>div h2 {
    margin: 0
}

.outbound-email-panel>.card-head>div p {
    margin: 4px 0 0
}

.outbound-email-form {
    display: grid;
    gap: 14px
}

.outbound-email-form .field {
    margin: 0
}

.outbound-email-form textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.55
}

.outbound-email-form .form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px
}

.outbound-email-confirm {
    align-items: flex-start
}

.outbound-email-history {
    display: grid;
    gap: 0;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line)
}

.outbound-email-history h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 15px
}

.outbound-email-history__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line)
}

.outbound-email-history__item:last-child {
    border-bottom: 0
}

.outbound-email-history__content {
    display: grid;
    gap: 3px;
    min-width: 0
}

.outbound-email-history__content strong,
.outbound-email-history__content span,
.outbound-email-history__content small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.outbound-email-history__content span,
.outbound-email-history__content small {
    color: var(--text-3);
    font-size: 12px
}

.outbound-email-history__item form {
    margin: 0
}

.outbound-email-history .btn {
    white-space: nowrap
}

@media(max-width:900px) {
    .email-branding-grid {
        grid-template-columns: 1fr
    }

    .email-branding-preview {
        position: static
    }
}

@media(max-width:600px) {
    .outbound-email-history__item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px
    }

    .outbound-email-history__item form {
        grid-column: 1/-1
    }

    .outbound-email-history__item form .btn {
        width: 100%
    }

    .email-branding-preview {
        padding: 12px
    }
}

.email-branding-preview__purpose {
    margin: 12px 0 0
}

.email-branding-preview__foot {
    display: grid;
    gap: 4px
}

.email-branding-preview__foot [hidden] {
    display: none
}

.pwa-branding-preview,
.pwa-branding-form {
    align-self: start;
}

.pwa-icon-preview {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: fit-content;
    margin: 24px auto;
    padding: 18px 24px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--pwa-preview-bg) 35%, var(--surface, #19191c));
}

.pwa-icon-preview canvas {
    display: block;
    width: 144px;
    height: 144px;
    border-radius: 28%;
    box-shadow: 0 8px 24px #0005;
}

.pwa-icon-preview span {
    color: var(--text, #f4f4f5);
    font-size: .9rem;
    font-weight: 600;
}

.pwa-padding-control {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pwa-padding-control input {
    flex: 1;
    accent-color: var(--accent, #b18a12);
}

.pwa-padding-control output {
    min-width: 3.5rem;
    color: var(--muted, #999);
    text-align: right;
}

.pwa-remove-icon {
    margin-top: 14px;
}

@media (max-width: 760px) {
    .pwa-icon-preview canvas {
        width: 112px;
        height: 112px;
    }
}

/* Logs técnicos: triagem visual e responsiva dentro da própria Operação. */
.observability-logs-head {
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-block: 16px;
}

.observability-logs-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.observability-logs-head h2 .ic {
    color: var(--accent);
}

.observability-logs-head p {
    margin-top: 3px;
    color: var(--text-3);
    font-size: 12px;
}

.observability-logs-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.observability-logs-summary__label {
    color: var(--text-3);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.observability-logs-summary__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.observability-logs-summary__item .health-dot {
    width: 7px;
    height: 7px;
}

.observability-logs-summary__item .ic {
    color: var(--warn);
    font-size: 15px;
}

.observability-log-tools {
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
}

.observability-log-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(135px, .75fr)) auto auto;
    align-items: center;
    gap: 8px;
    padding: 13px 16px 10px;
}

.observability-log-search,
.observability-log-filter {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 38px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
}

.observability-log-search {
    gap: 8px;
    padding: 0 10px;
}

.observability-log-search>.ic {
    flex: 0 0 auto;
    color: var(--text-3);
    font-size: 18px;
}

.observability-log-search input,
.observability-log-filter select {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
}

.observability-log-search input::placeholder {
    color: var(--text-3);
}

.observability-log-search:focus-within,
.observability-log-filter:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
}

.observability-log-filter select {
    padding: 0 27px 0 10px;
    appearance: none;
    cursor: pointer;
}

.observability-log-filter::after {
    content: "expand_more";
    position: absolute;
    right: 8px;
    color: var(--text-3);
    font: 18px/1 "Material Symbols Outlined";
    pointer-events: none;
}

.observability-log-filters>.btn {
    min-height: 38px;
    padding-inline: 11px;
}

.observability-log-clear {
    justify-self: end;
}

.observability-log-results {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 17px 10px;
    color: var(--text-2);
    font-size: 11px;
}

.observability-log-results strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.observability-log-list {
    display: grid;
}

.observability-log-entry {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    align-items: start;
    gap: 10px;
    min-width: 0;
    padding: 13px 17px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    transition: background .14s ease, border-color .14s ease;
}

.observability-log-entry:last-child {
    border-bottom: 0;
}

.observability-log-entry:hover,
.observability-log-entry:focus-visible {
    background: var(--surface-2);
    outline: none;
}

.observability-log-entry:focus-visible {
    box-shadow: inset 0 0 0 2px var(--ring);
}

.observability-log-entry__marker {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text-3);
}

.observability-log-entry[data-tone="bad"] .observability-log-entry__marker {
    background: var(--bad-bg);
    color: var(--bad);
}

.observability-log-entry[data-tone="warn"] .observability-log-entry__marker {
    background: var(--warn-bg);
    color: var(--warn);
}

.observability-log-entry[data-tone="info"] .observability-log-entry__marker {
    background: var(--info-bg);
    color: var(--info);
}

.observability-log-entry__content {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.observability-log-entry__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.observability-log-entry__heading strong {
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.observability-log-entry__heading time {
    flex: 0 0 auto;
    color: var(--text-3);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
}

.observability-log-entry__message {
    overflow: hidden;
    color: var(--text-2);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.observability-log-entry__metadata {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 3px;
}

.observability-log-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: min(100%, 320px);
    min-height: 22px;
    padding: 2px 7px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-3);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.observability-log-tag .ic {
    flex: 0 0 auto;
    font-size: 13px;
}

.observability-log-tag b {
    color: var(--text-2);
    font-size: 9px;
}

.observability-log-tag--status[data-tone="bad"] {
    border-color: color-mix(in srgb, var(--bad) 30%, var(--border));
    background: var(--bad-bg);
    color: var(--bad);
}

.observability-log-tag--status[data-tone="warn"] {
    border-color: color-mix(in srgb, var(--warn) 30%, var(--border));
    background: var(--warn-bg);
    color: var(--warn);
}

.observability-log-tag--status[data-tone="ok"] {
    border-color: color-mix(in srgb, var(--ok) 26%, var(--border));
    background: var(--ok-bg);
    color: var(--ok);
}

.observability-log-tag--request {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.observability-log-entry__open {
    align-self: center;
    color: var(--text-3);
    font-size: 19px;
    transition: transform .14s ease, color .14s ease;
}

.observability-log-entry:hover .observability-log-entry__open {
    transform: translateX(2px);
    color: var(--accent);
}

.observability-log-empty {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 38px 18px;
    color: var(--text-3);
    text-align: center;
}

.observability-log-empty__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 3px;
    border-radius: 13px;
    background: var(--surface-2);
    color: var(--accent);
}

.observability-log-empty__icon .ic {
    font-size: 22px;
}

.observability-log-empty strong {
    color: var(--text);
    font-size: 13px;
}

.observability-log-empty>span:last-child {
    font-size: 11.5px;
}

.observability-detail-grid__wide {
    grid-column: 1 / -1;
}

.observability-log-modal {
    width: min(920px, calc(100vw - 32px));
    max-width: none;
    max-height: min(90dvh, 920px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-pop);
}

.observability-log-modal[open] {
    display: flex;
    flex-direction: column;
}

.observability-log-modal::backdrop {
    background: rgba(8, 8, 10, .66);
    backdrop-filter: blur(4px);
}

.observability-log-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex: 0 0 auto;
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.observability-log-modal__head>div {
    min-width: 0;
}

.observability-log-modal__head .eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-3);
    font-size: 11px;
}

.observability-log-modal__head .eyebrow .ic {
    color: var(--accent);
}

.observability-log-modal__head h2 {
    overflow: hidden;
    margin-top: 2px;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.observability-log-modal__body {
    min-height: 0;
    padding: 18px;
    overflow: auto;
    overscroll-behavior: contain;
}

.observability-log-modal__body .observability-card {
    margin-bottom: 12px;
}

.observability-log-modal__status {
    margin: 0 0 12px;
    color: var(--text-2);
}

.observability-log-modal-summary {
    margin-bottom: 16px;
}

.observability-log-modal-summary .eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--text-3);
    font-size: 11px;
}

.observability-log-modal-summary .lead {
    margin-top: 5px;
    color: var(--text-2);
}

.observability-log-privacy {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: -4px 0 18px;
    color: var(--text-3);
    font-size: 11px;
    line-height: 1.45;
}

.observability-log-privacy .ic {
    flex: 0 0 auto;
    color: var(--accent);
}

@media (max-width: 900px) {
    .observability-log-filters {
        grid-template-columns: minmax(0, 1fr) repeat(2, minmax(130px, .6fr));
    }

    .observability-log-search {
        grid-column: 1 / -1;
    }

    .observability-log-filters>.btn {
        justify-self: stretch;
    }

    .observability-log-clear {
        justify-self: stretch;
    }
}

@media (max-width: 560px) {
    .observability-log-modal {
        width: calc(100vw - 20px);
        max-height: min(92dvh, 920px);
        border-radius: 13px;
    }

    .observability-log-modal__head {
        padding: 12px 14px;
    }

    .observability-log-modal__body {
        padding: 12px;
    }

    .observability-logs-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .observability-logs-summary {
        justify-content: flex-start;
    }

    .observability-log-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 11px 12px 9px;
    }

    .observability-log-search {
        grid-column: 1 / -1;
    }

    .observability-log-filter select {
        font-size: 11px;
    }

    .observability-log-filters>.btn {
        width: 100%;
    }

    .observability-log-results {
        padding-inline: 13px;
    }

    .observability-log-entry {
        grid-template-columns: 27px minmax(0, 1fr) 14px;
        gap: 8px;
        padding: 12px;
    }

    .observability-log-entry__marker {
        width: 27px;
        height: 27px;
    }

    .observability-log-entry__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 1px;
    }

    .observability-log-entry__heading strong {
        max-width: 100%;
    }

    .observability-log-entry__message {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .observability-log-tag {
        max-width: 100%;
    }

    .observability-log-privacy {
        margin-top: 0;
    }
}

/* Atalhos para as seções operacionais que continuam dentro da Saúde. */
.health-observability-nav {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.health-observability-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.health-observability-nav a:hover,
.health-observability-nav a:focus-visible {
    background: var(--surface);
    color: var(--accent);
    outline: none;
}

.health-observability-nav a .ic {
    color: var(--accent);
}

#health-monitoring,
#health-queues,
#recent-jobs,
#technical-logs-card {
    scroll-margin-top: calc(var(--topbar-h) + 18px);
}

.internal-log-row[data-tone="bad"] .observability-log-entry__marker {
    color: var(--bad);
    background: var(--bad-bg);
}

.internal-log-row[data-tone="warn"] .observability-log-entry__marker {
    color: var(--warn);
    background: var(--warn-bg);
}

.internal-log-row[data-tone="info"] .observability-log-entry__marker {
    color: var(--ok);
    background: var(--ok-bg);
}

.internal-log-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.internal-log-heading strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.internal-log-heading time {
    flex: 0 0 auto;
    color: var(--text-3);
    font-size: 11px;
    white-space: nowrap;
}

.internal-log-row .observability-log-main>small {
    white-space: normal;
}

.internal-log-open {
    flex: 0 0 auto;
}

@media (max-width: 560px) {
    .health-observability-nav {
        flex-wrap: nowrap;
        margin-inline: -2px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .health-observability-nav::-webkit-scrollbar {
        display: none;
    }

    .internal-log-row {
        align-items: flex-start;
    }

    .internal-log-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 1px;
    }

    .internal-log-heading strong {
        white-space: normal;
    }

    .internal-log-open {
        margin-left: auto;
    }
}

/* As listas de LOGs e movimentações usam paginação, não scroll interno. */
.observability-card--logs {
    display: block;
    max-height: none;
}

.observability-card--logs .card-body {
    display: block;
    flex: initial;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

/* Portal público de afiliados: superfície própria, sem shell ou navegação administrativa. */
.affiliate-portal {
    min-height: 100vh;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--app-grid-color, #a6a6ae) var(--app-grid-opacity, 2%), transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--app-grid-color, #a6a6ae) var(--app-grid-opacity, 2%), transparent) 1px, transparent 1px);
    background-size: var(--app-grid-size, 36px) var(--app-grid-size, 36px);
}

.affiliate-portal__topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 8px max(20px, calc((100vw - 1120px) / 2));
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(14px);
}

.affiliate-portal__topbar form {
    margin: 0;
}

.affiliate-portal__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.affiliate-portal__brand img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.affiliate-portal__brand span {
    display: grid;
    line-height: 1.2;
}

.affiliate-portal__brand strong {
    font-size: 13px;
}

.affiliate-portal__brand small,
.affiliate-portal__eyebrow {
    color: var(--text-3);
    font-size: 10px;
}

.affiliate-portal__main {
    display: grid;
    gap: 18px;
    width: min(100% - 32px, 1080px);
    margin: 0 auto;
    padding: 30px 0 max(50px, env(safe-area-inset-bottom));
}

.affiliate-portal__main--auth {
    min-height: calc(100vh - 64px);
    min-height: calc(100dvh - 64px);
    align-content: center;
}

.affiliate-portal__notice {
    margin: 0;
}

.affiliate-portal__notice.notice--error {
    border: 1px solid color-mix(in srgb, var(--bad) 38%, transparent);
    background: var(--bad-bg);
    color: var(--bad);
}

.affiliate-portal-auth {
    width: min(100%, 420px);
    justify-self: center;
    padding: 30px;
    box-shadow: var(--shadow-md);
}

.affiliate-portal-auth__icon {
    display: grid;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    place-items: center;
    border-radius: 13px;
    background: var(--accent-weak);
    color: var(--accent);
}

.affiliate-portal-auth__icon .ic {
    font-size: 25px;
}

.affiliate-portal-auth h1,
.affiliate-portal-heading h1 {
    margin-top: 4px;
    font-size: clamp(22px, 3vw, 29px);
    letter-spacing: -.025em;
}

.affiliate-portal-auth h1 {
    margin-top: 0;
    text-align: center;
}

.affiliate-portal-auth>p,
.affiliate-portal-heading p {
    margin-top: 6px;
    color: var(--text-2);
    font-size: 13px;
}

.affiliate-portal-auth form {
    margin-top: 22px;
}

.affiliate-portal-auth__foot {
    margin-top: 16px !important;
    color: var(--text-3) !important;
    font-size: 11px !important;
    line-height: 1.5;
}

.affiliate-portal-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.affiliate-portal__eyebrow {
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.affiliate-portal-heading .affiliate-code {
    flex: 0 0 auto;
}

.affiliate-portal-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.affiliate-portal-stat {
    display: grid;
    gap: 7px;
    padding: 18px;
}

.affiliate-portal-stat>span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
}

.affiliate-portal-stat>span .ic {
    color: var(--accent);
}

.affiliate-portal-stat>strong {
    font-size: 30px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.affiliate-portal-stat>small {
    color: var(--text-3);
    font-size: 11px;
}

.affiliate-referral-performance {
    display: grid;
}

.affiliate-referral-performance__head,
.affiliate-referral-performance__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(72px, .2fr));
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
}

.affiliate-referral-performance__head {
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.affiliate-referral-performance__row {
    min-height: 48px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}

.affiliate-referral-performance__row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.affiliate-referral-performance__row>span {
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.affiliate-portal-card {
    overflow: hidden;
}

.affiliate-portal-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 18px;
    border-bottom: 1px solid var(--border);
}

.affiliate-portal-card__head h2 {
    font-size: 15px;
}

.affiliate-portal-card__head p {
    margin-top: 3px;
    color: var(--text-3);
    font-size: 11.5px;
}

.affiliate-portal-card__head>.ic {
    color: var(--accent);
}

.affiliate-referral-list,
.affiliate-portal-history {
    display: grid;
}

.affiliate-referral-item {
    display: grid;
    grid-template-columns: minmax(190px, .65fr) minmax(0, 1.35fr);
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.affiliate-referral-item:last-child,
.affiliate-portal-history__row:last-child {
    border-bottom: 0;
}

.affiliate-referral-item__copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 5px 8px;
    min-width: 0;
}

.affiliate-referral-item__copy .badge {
    grid-row: span 2;
}

.affiliate-referral-item__copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.affiliate-referral-item__copy small {
    grid-column: 2;
    color: var(--text-3);
    font-size: 10px;
}

.affiliate-referral-item__url {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.affiliate-referral-item__url input {
    min-width: 0;
    flex: 1 1 auto;
    height: 36px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 10px;
}

.affiliate-referral-item__url .btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 9px;
}

.affiliate-referral-item__url .icon-btn {
    flex: 0 0 34px;
    height: 34px;
}

.affiliate-portal-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 11px 18px 14px;
    color: var(--text-3);
    font-size: 10.5px;
    line-height: 1.45;
}

.affiliate-portal-note .ic {
    color: var(--accent);
}

.affiliate-portal-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 90px;
    padding: 18px;
    color: var(--text-3);
    font-size: 12px;
}

.affiliate-portal-empty .ic {
    color: var(--accent);
}

.affiliate-portal-history__row {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 60px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
}

.affiliate-portal-history__icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text-3);
}

.affiliate-portal-history__label {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.affiliate-portal-history__label strong {
    font-size: 12px;
}

.affiliate-portal-history__label small {
    color: var(--text-3);
    font-size: 10px;
}

.affiliate-portal-history__points {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.affiliate-portal-history__points.is-positive {
    color: var(--ok);
}

.affiliate-portal-history__points.is-negative {
    color: var(--bad);
}

.affiliate-portal-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px;
    border-top: 1px solid var(--border);
    font-size: 11px;
}

.affiliate-portal-pagination a {
    color: var(--accent);
    font-weight: 650;
}

.affiliate-portal-pagination span,
.affiliate-portal-pagination small {
    color: var(--text-3);
}

.affiliate-portal-admin-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.affiliate-portal-admin-card__head h2 {
    font-size: 14px;
}

.affiliate-portal-admin-card form {
    margin: 0;
}

.affiliate-portal-admin-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 700px) {
    .affiliate-portal__topbar {
        min-height: 58px;
        padding-inline: 14px;
    }

    .affiliate-portal__main {
        width: min(100% - 24px, 1080px);
        gap: 13px;
        padding-top: 18px;
    }

    .affiliate-portal__main--auth {
        min-height: calc(100vh - 58px);
        min-height: calc(100dvh - 58px);
    }

    .affiliate-portal-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .affiliate-portal-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .affiliate-portal-stat {
        padding: 13px;
    }

    .affiliate-portal-stat>strong {
        font-size: 24px;
    }

    .affiliate-referral-item {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 12px;
    }

    .affiliate-referral-item__url input {
        font-size: 9px;
    }

    .affiliate-referral-item__url .btn {
        width: 38px;
        padding: 6px;
    }

    .affiliate-referral-item__url .btn span {
        display: none;
    }

    .affiliate-referral-performance__head,
    .affiliate-referral-performance__row {
        grid-template-columns: minmax(0, 1fr) repeat(3, minmax(42px, auto));
        gap: 6px;
        padding-inline: 11px;
    }

    .affiliate-referral-performance__head {
        font-size: 8px;
    }

    .affiliate-referral-performance__row {
        font-size: 10px;
    }

    .affiliate-portal-auth {
        padding: 23px 19px;
    }
}

@media (max-width: 380px) {
    .affiliate-portal-stats {
        grid-template-columns: 1fr;
    }
}

.lead-affiliate-field {
    align-self: end;
}

.lead-affiliate-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.lead-affiliate-label>label {
    margin: 0;
}

.lead-affiliate-label .link-button {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 650;
}

.affiliate-quick-dialog {
    width: min(640px, calc(100vw - 28px));
    max-height: min(88dvh, 780px);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
}

.affiliate-quick-dialog::backdrop {
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(2px);
}

.affiliate-quick-dialog form {
    display: flex;
    max-height: inherit;
    flex-direction: column;
}

.affiliate-quick-dialog .card-head {
    flex: 0 0 auto;
    justify-content: space-between;
    padding: 15px 18px;
}

.affiliate-quick-dialog .card-head h2 {
    font-size: 16px;
}

.affiliate-quick-dialog .card-head .hint {
    display: block;
    margin-top: 2px;
}

.affiliate-quick-dialog__body {
    overflow-y: auto;
    padding: 16px 18px 2px;
}

.affiliate-quick-dialog__body .field {
    margin-bottom: 12px;
}

.affiliate-quick-dialog__body .form-grid {
    gap: 0 12px;
}

.affiliate-quick-convert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
}

.affiliate-quick-convert input {
    width: 17px;
    height: 17px;
    accent-color: var(--accent);
}

.searchable-select {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
}

.searchable-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 8px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    text-align: left;
}

.searchable-select__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select__trigger>.ic {
    flex: 0 0 auto;
    color: var(--text-3);
    transition: transform .16s ease, color .16s ease;
}

.searchable-select__trigger:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.searchable-select__trigger:focus-visible,
.searchable-select__trigger[aria-expanded="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
    outline: 0;
}

.searchable-select__trigger[aria-expanded="true"]>.ic {
    transform: rotate(180deg);
    color: var(--accent);
}

.searchable-select__trigger:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.searchable-select__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    overflow: hidden;
    padding: 7px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
}

.searchable-select__panel[hidden] {
    display: none;
}

.searchable-select__search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-3);
}

.searchable-select__search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--ring);
}

.searchable-select__search>.ic {
    font-size: 18px;
}

.searchable-select__search input {
    width: 100%;
    min-width: 0;
    padding: 7px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
}

.searchable-select__search input::placeholder {
    color: var(--text-3);
}

.searchable-select__options {
    display: grid;
    gap: 2px;
    max-height: 220px;
    margin-top: 6px;
    overflow-y: auto;
}

.searchable-select__option {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 8px 9px;
    border-radius: 7px;
    color: var(--text);
    text-align: left;
}

.searchable-select__option:hover,
.searchable-select__option:focus-visible,
.searchable-select__option[aria-selected="true"] {
    background: var(--accent-weak);
    color: var(--accent-hover);
    outline: 0;
}

.searchable-select__status {
    margin: 4px 2px 1px;
    color: var(--text-3);
    font-size: 11px;
}

.searchable-select__error {
    display: block;
    margin-top: 5px;
    color: var(--bad);
    font-size: 12px;
}

.searchable-select[aria-invalid="true"] .searchable-select__trigger {
    border-color: var(--bad);
}

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

.affiliate-quick-dialog .form-actions {
    flex: 0 0 auto;
    margin: 0;
    padding: 13px 18px 16px;
}

@media (max-width: 620px) {
    .affiliate-quick-dialog {
        max-height: min(92dvh, 820px);
    }

    .affiliate-quick-dialog__body {
        padding-inline: 14px;
    }

    .affiliate-quick-dialog__body .form-grid {
        grid-template-columns: 1fr;
    }

    .affiliate-quick-dialog .form-actions {
        flex-direction: row;
        padding-inline: 14px;
    }

    .affiliate-quick-dialog .form-actions .btn {
        width: auto;
        flex: 1;
    }
}