:root {
    color-scheme: light;
    --bg: #f4f7f9;
    --panel: #ffffff;
    --line: #d9e2e7;
    --text: #172026;
    --muted: #63717b;
    --brand: #126c79;
    --brand-dark: #0c4d58;
    --ok: #16835a;
    --warn: #ad6b00;
    --bad: #b42318;
    --shadow: 0 16px 40px rgba(28, 46, 55, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", Arial, sans-serif;
    letter-spacing: 0;
}

.login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
    background:
        linear-gradient(135deg, rgba(18, 108, 121, 0.12), rgba(49, 209, 144, 0.08)),
        var(--bg);
}

.login-card {
    width: min(100%, 380px);
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.login-brand {
    margin-bottom: 24px;
    color: var(--text);
}

.login-brand span {
    color: var(--muted);
}

.login-form {
    display: grid;
    gap: 14px;
}

.login-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}

.login-form input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text);
    font: inherit;
}

.login-button {
    width: 100%;
}

.login-message {
    min-height: 18px;
    color: var(--bad);
    font-size: 13px;
}

.login-message.success {
    color: var(--ok);
}

.login-hint {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.login-link-button {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--brand);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.login-link-button:hover {
    color: var(--brand-dark);
}

.password-rules {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f7fafb;
}

.password-rules strong,
.password-rules span {
    display: block;
    font-size: 13px;
}

.password-rules span {
    color: var(--muted);
    line-height: 1.4;
}

.shell {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2.2vh, 24px);
    height: 100dvh;
    padding: clamp(16px, 2.4vh, 24px);
    background: #10252d;
    color: #eef7f8;
    overflow: auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #d7f2ed;
    color: #0f4f58;
    font-weight: 800;
}

.brand strong,
.brand span,
.side-status strong,
.side-status span {
    display: block;
}

.brand span,
.side-status span {
    color: #b9ced2;
    font-size: 13px;
    margin-top: 2px;
}

.nav {
    display: grid;
    gap: 3px;
    flex: 0 1 auto;
}

.nav button {
    color: #c9dcdf;
    display: block;
    width: 100%;
    height: auto;
    padding: clamp(7px, 1.2vh, 10px) 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.15;
    text-align: left;
}

.nav button.active,
.nav button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.sidebar-status-stack {
    display: grid;
    align-content: end;
    gap: clamp(6px, 1vh, 9px);
    margin-top: auto;
}

.side-status {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-top: 0;
    padding: clamp(8px, 1.2vh, 12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}

.monitor-status {
    padding: clamp(6px, 1vh, 9px) 10px;
}

.side-status > div {
    min-width: 0;
}

.pulse {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #31d190;
    box-shadow: 0 0 0 5px rgba(49, 209, 144, 0.15);
    flex: 0 0 auto;
}

.pulse.warn {
    background: #e0a22b;
    box-shadow: 0 0 0 5px rgba(224, 162, 43, 0.15);
}

.pulse.off {
    background: #7f949a;
    box-shadow: 0 0 0 5px rgba(127, 148, 154, 0.13);
}

.pulse.bad {
    background: #e04f43;
    box-shadow: 0 0 0 5px rgba(224, 79, 67, 0.15);
}

.side-status small {
    display: block;
    min-width: 0;
    margin-top: 2px;
    overflow: hidden;
    color: #93adb3;
    font-size: 11px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-status strong,
.side-status span {
    min-width: 0;
    overflow: hidden;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.monitor-status span {
    font-size: 12px;
    margin-top: 1px;
}

.main {
    padding: 26px;
    min-width: 0;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

h1,
h2,
p {
    margin: 0;
}

h1 {
    font-size: 28px;
    line-height: 1.2;
}

h2 {
    font-size: 17px;
}

.topbar p,
.panel-head p {
    color: var(--muted);
    margin-top: 4px;
}

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

.participant-context {
    display: grid;
    gap: 5px;
    min-width: min(420px, 36vw);
}

.participant-context span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.participant-context select {
    width: 100%;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    background: #ffffff;
    color: var(--text);
    font: inherit;
    font-weight: 700;
}

.mobile-menu-button {
    display: none;
    flex: 0 0 auto;
}

.mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgba(15, 32, 38, 0.42);
}

.user-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--brand-dark);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(28, 46, 55, 0.06);
}

button:hover {
    border-color: #9db6bf;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.text-button {
    width: auto;
    min-width: 70px;
    padding: 0 12px;
    font-weight: 800;
}

.icon {
    font-size: 22px;
    line-height: 1;
}

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

.metrics article,
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.metrics article {
    padding: 18px;
}

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

.metrics strong {
    display: block;
    margin-top: 8px;
    font-size: 26px;
    line-height: 1;
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
    gap: 14px;
    align-items: start;
}

.content-grid.documents-view {
    grid-template-columns: minmax(0, 1fr);
}

.content-grid.key-query-view {
    grid-template-columns: minmax(0, 1fr);
}

.content-grid.panel-view {
    grid-template-columns: minmax(0, 1fr);
}

.content-grid.settings-embedded-view {
    grid-template-columns: minmax(0, 1fr);
}

.content-grid.certificate-modal-view {
    grid-template-columns: minmax(0, 1fr);
}

.content-grid.documents-view .participant-panel,
.content-grid.key-query-view .participant-panel,
.content-grid.panel-view .participant-panel {
    display: none;
}

.content-grid.settings-embedded-view .detail-panel,
.content-grid.certificate-modal-view .detail-panel {
    display: none;
}

.audit-panel {
    margin-top: 14px;
}

.panel {
    min-width: 0;
    overflow: hidden;
}

.hidden,
[hidden] {
    display: none !important;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid var(--line);
}

.detail-header-aside {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.header-countdown {
    display: grid;
    justify-items: center;
    min-width: 158px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
    text-align: center;
}

.header-countdown span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
}

.header-countdown strong {
    display: block;
    color: var(--text);
    font-size: 15px;
    line-height: 1.1;
    white-space: nowrap;
}

.header-countdown.ok {
    border-color: #b8e8d0;
    background: #f0fbf5;
}

.header-countdown.warn {
    border-color: #f0d6a8;
    background: #fff8ea;
}

.header-countdown.off {
    border-color: #c8d4d7;
    background: #f6f8f9;
}

.header-countdown.bad {
    border-color: #efb5ad;
    background: #fff4f2;
}

.participants {
    display: grid;
}

.settings-participants {
    gap: 0;
}

.participant {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 16px 18px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    text-align: left;
    box-shadow: none;
    width: 100%;
    height: auto;
}

.participant:hover,
.participant.selected {
    background: #eef6f7;
}

.participant strong {
    display: block;
    font-size: 15px;
    margin-bottom: 5px;
}

.certificate-participants .participant {
    grid-template-columns: minmax(0, 1fr);
}

.certificate-participants .new-participant {
    grid-template-columns: minmax(0, 1fr) auto;
}

.participant-certificate-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: stretch;
}

.participant-certificate-side {
    display: grid;
    align-content: space-between;
    justify-items: end;
    gap: 14px;
    min-height: 70px;
}

.participant-certificate-valid {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    margin-top: 6px;
}

.participant-certificate-valid strong {
    display: inline !important;
    margin-bottom: 0;
    color: var(--text);
    font-size: 13px;
}

.participant-certificate-action {
    margin-top: 6px;
    color: var(--brand-dark) !important;
    font-size: 12px !important;
    font-weight: 800;
}

.certificate-update-button {
    min-width: 82px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    box-shadow: none;
}

.participant-certificate-detail {
    margin-top: 10px;
    cursor: default;
}

.participant-certificate-detail summary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 126px;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid #6bbcc5;
    border-radius: 999px;
    background: #e6f7f8;
    color: #0f6974;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}

.participant-certificate-detail summary::-webkit-details-marker {
    display: none;
}

.participant-certificate-detail summary::after {
    content: "Detalhes ▼";
}

.participant-certificate-detail[open] > summary::after {
    content: "Detalhes ▲";
}

.participant-certificate-detail summary > span {
    display: none;
}

.participant-certificate-detail summary strong,
.participant-certificate-detail summary span {
    display: block;
}

.participant-certificate-detail summary strong {
    font-size: 15px;
}

.participant-certificate-body {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.participant-certificate-body .info-grid {
    grid-template-columns: 1fr;
}

.participant-certificate-body .info strong {
    margin-bottom: 0;
    font-size: 14px;
}

.settings-participant-detail {
    border-bottom: 1px solid var(--line);
    background: transparent;
}

.settings-participant-detail:last-child {
    border-bottom: 0;
}

.settings-participant-detail[open],
.settings-participant-detail:hover,
.settings-participant-detail.selected {
    background: #eef6f7;
}

.settings-participant-summary {
    position: relative;
    display: block;
    min-height: 70px;
    padding: 16px 196px 16px 18px;
    cursor: pointer;
    list-style: none;
}

.settings-participant-summary::-webkit-details-marker {
    display: none;
}

.settings-participant-summary::after {
    content: "Expandir configurações ▼";
    position: absolute;
    top: 50%;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 164px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #6bbcc5;
    border-radius: 999px;
    background: #e6f7f8;
    color: #0f6974;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    transform: translateY(-50%);
}

.settings-participant-detail[open] .settings-participant-summary::after {
    content: "Recolher configurações ▲";
}

.settings-participant-summary strong,
.settings-participant-summary span {
    display: block;
}

.settings-participant-heading {
    max-width: 100%;
    min-width: 0;
}

.settings-participant-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 10px;
    max-width: 100%;
    min-width: 0;
}

.settings-participant-summary strong {
    font-size: 15px;
}

.settings-participant-title strong {
    margin-bottom: 0;
}

.settings-participant-title .settings-participant-cert-status {
    display: inline-flex;
    margin-top: 0;
    color: inherit;
    white-space: nowrap;
}

.settings-participant-document {
    margin-top: 5px;
}

.settings-participant-body {
    padding: 18px;
    border-top: 1px solid var(--line);
    background: #ffffff;
}

.settings-participant-empty {
    padding: 18px;
    color: var(--muted);
}

.participant span,
.settings-participant-summary span,
.muted {
    color: var(--muted);
    font-size: 13px;
}

.badge {
    align-self: start;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.badge.ok {
    background: #dff5eb;
    color: var(--ok);
}

.badge.warn {
    background: #fff1d6;
    color: var(--warn);
}

.badge.sim {
    background: #e8f0ff;
    color: #315a9f;
}

.badge.bad {
    background: #ffe7e3;
    color: var(--bad);
}

.details {
    padding: 18px;
}

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

.detail-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.detail-title strong {
    display: block;
    font-size: 20px;
}

.compact-title {
    margin-top: 18px;
    margin-bottom: 10px;
}

.compact-title strong {
    font-size: 16px;
}

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

.info-grid.compact {
    margin-top: 12px;
}

.section-heading {
    margin-top: 16px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.status-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.status-strip div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.status-strip span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 6px;
}

.status-strip strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.query-rules-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    margin-bottom: 18px;
}

.query-rules-panel .detail-title,
.query-rules-panel .status-strip,
.query-rules-panel .settings-form {
    margin-bottom: 0;
}

.query-rules-panel .detail-title {
    align-items: center;
}

.monitor-intervals-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
}

.monitor-intervals-form .actions {
    margin-top: 0;
}

.monitor-overview {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.monitor-card {
    border-left-width: 4px !important;
}

.monitor-card.ok {
    border-left-color: var(--ok) !important;
}

.monitor-card.warn {
    border-left-color: #e0a22b !important;
}

.monitor-card.bad {
    border-left-color: var(--bad) !important;
}

.monitor-card.off {
    border-left-color: #9aaeb4 !important;
    background: #f6f8f9;
}

.monitor-card span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.monitor-card .pulse {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 4px rgba(49, 209, 144, 0.12);
}

.monitor-card .pulse.warn {
    box-shadow: 0 0 0 4px rgba(224, 162, 43, 0.12);
}

.monitor-card .pulse.off {
    box-shadow: 0 0 0 4px rgba(127, 148, 154, 0.12);
}

.monitor-card .pulse.bad {
    box-shadow: 0 0 0 4px rgba(224, 79, 67, 0.12);
}

.monitor-card-meta {
    display: grid;
    gap: 3px;
    margin-top: 6px;
}

.monitor-card small {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
}

.monitor-card small span {
    min-width: 0;
}

.monitor-card small strong {
    display: inline;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}

.panel-participant-stack {
    display: grid;
    gap: 12px;
}

.distribution-service-panel {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.distribution-service-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.distribution-service-head .section-heading {
    display: block;
    margin-top: 0;
    margin-bottom: 6px;
}

.distribution-service-head strong,
.distribution-service-head span {
    display: block;
}

.distribution-service-head strong {
    font-size: 17px;
}

.redistribution-service-strip {
    margin-bottom: 0;
}

.distribution-service-actions {
    margin-top: 0;
}

.panel-participant-detail {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
    overflow: hidden;
}

.panel-participant-detail.selected {
    border-color: #8ccfd7;
}

.panel-participant-detail summary {
    position: relative;
    display: block;
    padding: 18px 14px 58px;
    cursor: pointer;
    list-style: none;
}

.panel-participant-detail summary::-webkit-details-marker {
    display: none;
}

.panel-participant-detail summary::after {
    content: "Expandir configurações ▼";
    position: absolute;
    left: 50%;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid #6bbcc5;
    border-radius: 999px;
    background: #e6f7f8;
    color: #0f6974;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    transform: translateX(-50%);
}

.panel-participant-detail[open] summary::after {
    content: "Recolher configurações ▲";
}

.panel-operational-log-toggle {
    position: absolute;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 142px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid #6bbcc5;
    border-radius: 999px;
    background: #e6f7f8;
    color: #0f6974;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.panel-operational-log-toggle.bottom {
    bottom: 10px;
}

.panel-operational-log-toggle.inside {
    position: static;
    min-width: 142px;
    flex: 0 0 auto;
}

.panel-operational-log-toggle strong {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 1;
    transition: transform 0.15s ease;
}

.panel-operational-log-toggle.open strong {
    transform: rotate(180deg);
}

.panel-operational-log-panel {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #f0b5ad;
    border-radius: 8px;
    background: #fffafa;
    cursor: default;
}

.panel-operational-log-title {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.panel-operational-log-title strong,
.panel-operational-log-title span {
    display: block;
}

.panel-participant-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.panel-participant-summary-head strong,
.panel-participant-summary-head span {
    display: block;
}

.panel-participant-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.panel-participant-summary-head strong {
    font-size: 17px;
}

.panel-participant-summary-head span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
}

.panel-participant-title .panel-participant-cert-status {
    display: inline-flex;
    margin-top: 0;
    color: inherit;
    font-size: 12px;
    white-space: nowrap;
}

.panel-participant-detail .monitor-overview {
    margin-bottom: 0;
}

.panel-participant-detail-body {
    padding: 0 14px 14px;
    border-top: 1px solid var(--line);
    background: #ffffff;
}

.panel-participants-summary {
    margin: 0 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.panel-participants-summary summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

.panel-participants-summary summary::-webkit-details-marker {
    display: none;
}

.panel-participants-summary summary::after {
    content: "Expandir participantes ▼";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 164px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #6bbcc5;
    border-radius: 999px;
    background: #e6f7f8;
    color: #0f6974;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    flex: 0 0 auto;
}

.panel-participants-summary[open] summary::after {
    content: "Recolher participantes ▲";
}

.panel-participants-summary summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.panel-participants-summary summary strong {
    margin-left: auto;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.panel-participants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    padding: 0 12px 12px;
}

.panel-participant-card {
    display: grid;
    gap: 6px;
    width: 100%;
    height: auto;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    text-align: left;
    box-shadow: none;
}

.panel-participant-card:hover,
.panel-participant-card.selected {
    border-color: #8ccfd7;
    background: #f1fbfc;
}

.panel-participant-name {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

.panel-participant-doc,
.panel-participant-footer {
    color: var(--muted);
    font-size: 12px;
}

.panel-participant-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
}

.panel-participant-line .pulse {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 4px rgba(49, 209, 144, 0.12);
}

.panel-participant-line .pulse.warn {
    box-shadow: 0 0 0 4px rgba(224, 162, 43, 0.12);
}

.panel-participant-line .pulse.off {
    box-shadow: 0 0 0 4px rgba(127, 148, 154, 0.12);
}

.panel-participant-line .pulse.bad {
    box-shadow: 0 0 0 4px rgba(224, 79, 67, 0.12);
}

.panel-participant-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

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

.nfse-summary {
    grid-template-columns: repeat(5, minmax(130px, 1fr)) minmax(220px, 1.4fr);
}

.nfse-summary .wide {
    min-width: 0;
}

.info {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
    min-width: 0;
}

.info span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 6px;
}

.info strong,
.info code {
    display: block;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.info code {
    font-family: Consolas, "Courier New", monospace;
    color: #26343a;
}

.wide {
    grid-column: 1 / -1;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.actions.vertical {
    display: grid;
    margin-top: 0;
}

.actions.vertical .command {
    width: 100%;
}

.action-group {
    display: grid;
    gap: 8px;
    padding-top: 2px;
}

.action-group > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.certificate-form,
.filters,
.settings-form {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.filters {
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto minmax(150px, 0.75fr);
    align-items: end;
}

.notes-filters {
    grid-template-columns: minmax(210px, 1fr) 132px 132px minmax(210px, 1fr) minmax(190px, 0.92fr) minmax(112px, 0.52fr) minmax(140px, 0.66fr) minmax(140px, 0.66fr) auto minmax(136px, 0.6fr);
}

.nfse-filters {
    grid-template-columns: 142px 142px minmax(220px, 1.05fr) minmax(190px, 0.9fr) minmax(112px, 0.52fr) minmax(150px, 0.75fr) minmax(130px, 0.65fr) auto auto;
}

.filters .command {
    height: 42px;
    min-width: 108px;
    margin-top: 0;
}

.filters.is-loading {
    opacity: 0.88;
}

.filter-state {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.filter-state.warn {
    color: var(--warn);
}

.filter-state.loading {
    color: var(--brand-dark);
}

.certificate-form label,
.filters label,
.settings-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}

.filters label small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.certificate-form input,
.certificate-form textarea,
.filters input,
.filters select,
.settings-form input,
.settings-form select,
.settings-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    background: #ffffff;
    color: var(--text);
    font: inherit;
}

.certificate-form input,
.filters input,
.filters select,
.settings-form input,
.settings-form select {
    height: 42px;
}

.certificate-form textarea,
.settings-form textarea {
    min-height: 160px;
    resize: vertical;
    line-height: 1.45;
}

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

.user-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
        "user-name user-login user-profile user-email"
        "user-participants user-participants user-participants user-password"
        "user-participants user-participants user-participants user-twofactor"
        "user-actions user-actions user-actions user-actions";
    align-items: end;
}

.user-form .user-field-name {
    grid-area: user-name;
}

.user-form .user-field-login {
    grid-area: user-login;
}

.user-form .user-field-profile {
    grid-area: user-profile;
}

.user-form .user-field-email {
    grid-area: user-email;
}

.user-form .user-field-participants {
    grid-area: user-participants;
}

.user-form .user-field-password {
    grid-area: user-password;
    align-self: start;
}

.user-form .user-field-twofactor {
    grid-area: user-twofactor;
    align-self: end;
    min-height: 42px;
}

.user-form .user-form-actions {
    grid-area: user-actions;
    display: flex;
    justify-content: flex-start;
}

.user-form .user-form-actions .command {
    width: auto;
    min-width: 132px;
}

.temporary-password-note {
    display: grid;
    gap: 4px;
    min-height: 42px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f7fafb;
}

.temporary-password-note strong {
    font-size: 13px;
}

.temporary-password-note span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.settings-form input:disabled,
.settings-form select:disabled {
    color: #53656d;
    background: #f3f6f7;
}

.certificate-identification-box {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f7fafb;
}

.certificate-identification-toggle {
    justify-self: start;
    min-width: 156px;
    height: 34px;
    padding: 0 12px;
    box-shadow: none;
}

.certificate-identification-fields {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.certificate-identification-box.open .certificate-identification-fields {
    display: grid;
}

.certificate-identification-fields .wide {
    grid-column: 1 / -1;
}

.key-query-main {
    display: grid;
    gap: 14px;
}

.key-query-form {
    grid-template-columns: minmax(260px, 0.45fr) minmax(360px, 1fr);
    align-items: start;
}

.key-query-field {
    grid-row: span 2;
}

.key-query-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.key-query-actions .command {
    min-width: 132px;
}

.key-query-note {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #cbdce2;
    border-radius: 8px;
    background: #f5fafb;
}

.key-query-note strong {
    color: var(--text);
    font-size: 13px;
}

.key-query-note div {
    display: grid;
    gap: 6px;
    color: #405862;
    font-size: 13px;
    line-height: 1.4;
}

.xml-import-form input[type="file"] {
    padding: 8px 10px;
}

.participant-ie-summary {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.participant-ie-summary > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.participant-ie-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.participant-ie-chips code {
    padding: 5px 8px;
    border: 1px solid #d8e4e8;
    border-radius: 6px;
    background: #ffffff;
    color: #26343a;
    font-size: 12px;
}

.xml-import-company-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.xml-import-company-picker select {
    height: auto;
    min-height: 96px;
}

.xml-import-company-picker .command {
    min-width: 150px;
}

.xml-import-auto-status {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
    color: var(--muted);
}

.xml-import-auto-status span,
.xml-import-auto-status small {
    color: var(--muted);
    font-size: 12px;
}

.xml-import-auto-status strong {
    color: var(--text);
    font-size: 13px;
}

.xml-import-auto-status.ok {
    border-color: #9bd9c1;
    background: #f4fbf7;
}

.xml-import-auto-status.running {
    border-color: #9fc7d0;
    background: #f0f8fa;
}

.xml-import-toggle {
    min-height: 42px;
    padding: 0 12px;
}

.key-query-results {
    display: grid;
    gap: 12px;
}

.key-query-results.empty {
    color: var(--muted);
}

.key-query-summary {
    margin-bottom: 0;
}

.key-query-result-list {
    display: grid;
    gap: 10px;
}

.key-query-result-item {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.key-query-result-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.key-query-result-head > div {
    min-width: 0;
}

.key-query-result-head span:first-child {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
}

.key-query-results .copyable-key {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

.key-query-message {
    color: var(--muted);
    font-size: 13px;
}

.key-query-message.warn {
    color: #8d5b00;
    font-weight: 700;
}

.key-query-paths {
    display: grid;
    gap: 6px;
}

.key-query-paths code {
    display: block;
    overflow-wrap: anywhere;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f7fafb;
    color: #36525d;
    font-size: 12px;
}

.toggle-line,
.settings-options {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.toggle-line,
.settings-options label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-line input,
.settings-options input {
    width: 16px;
    height: 16px;
    padding: 0;
}

.settings-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
}

.redistribution-destinations {
    display: grid;
    gap: 10px;
}

.redistribution-destination-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.7fr) minmax(260px, 1.8fr) auto;
    align-items: end;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.redistribution-destination-row .command {
    height: 42px;
    margin-top: 0;
}

.redistribution-address-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.redistribution-address-header {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.redistribution-address-header .command {
    height: 42px;
    margin-top: 0;
}

.redistribution-address-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.redistribution-type-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: #ffffff;
}

.redistribution-period-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.redistribution-period-toggle {
    background: #ffffff;
}

.redistribution-period-fields input:disabled {
    background: #eef3f4;
    color: #7d8b91;
    cursor: not-allowed;
}

.certificate-info-detail,
.redistribution-settings-detail,
.redistribution-logs-detail,
.redistribution-log-group {
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.certificate-info-detail summary,
.redistribution-settings-detail summary,
.redistribution-logs-detail summary,
.redistribution-log-group summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 52px;
    cursor: pointer;
    list-style: none;
}

.redistribution-settings-detail > summary {
    padding: 16px 14px 54px;
}

.certificate-info-detail summary .badge,
.redistribution-settings-detail summary .badge {
    margin-left: auto;
}

.certificate-info-detail summary::-webkit-details-marker,
.redistribution-settings-detail summary::-webkit-details-marker,
.redistribution-logs-detail summary::-webkit-details-marker,
.redistribution-log-group summary::-webkit-details-marker {
    display: none;
}

.certificate-info-detail summary::after,
.redistribution-settings-detail summary::after,
.redistribution-logs-detail summary::after,
.redistribution-log-group summary::after {
    content: "Expandir ▼";
    position: absolute;
    left: 50%;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #6bbcc5;
    border-radius: 999px;
    background: #e6f7f8;
    color: #0f6974;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    transform: translateX(-50%);
}

.certificate-info-detail summary::after {
    content: "Expandir detalhes ▼";
    min-width: 154px;
}

.redistribution-settings-detail summary::after {
    content: "Expandir configurações ▼";
    min-width: 170px;
}

.redistribution-logs-detail summary::after {
    content: "Expandir logs ▼";
    min-width: 142px;
}

.redistribution-log-group summary::after {
    content: "Expandir fila ▼";
    min-width: 128px;
}

.redistribution-log-group.transfer-log-group summary::after {
    content: "Expandir transferências ▼";
    min-width: 184px;
}

.certificate-info-detail[open] > summary::after,
.redistribution-settings-detail[open] > summary::after,
.redistribution-logs-detail[open] > summary::after,
.redistribution-log-group[open] > summary::after {
    content: "Recolher ▲";
}

.certificate-info-detail[open] > summary::after {
    content: "Recolher detalhes ▲";
}

.redistribution-settings-detail[open] > summary::after {
    content: "Recolher configurações ▲";
}

.redistribution-logs-detail[open] > summary::after {
    content: "Recolher logs ▲";
}

.redistribution-log-group[open] > summary::after {
    content: "Recolher fila ▲";
}

.redistribution-log-group.transfer-log-group[open] > summary::after {
    content: "Recolher transferências ▲";
}

.certificate-info-detail summary strong,
.certificate-info-detail summary span,
.redistribution-settings-detail summary strong,
.redistribution-settings-detail summary span,
.redistribution-logs-detail summary strong,
.redistribution-logs-detail summary span,
.redistribution-log-group summary strong,
.redistribution-log-group summary span {
    display: block;
}

.certificate-info-detail summary strong,
.redistribution-settings-detail summary strong,
.redistribution-logs-detail summary strong,
.redistribution-log-group summary strong {
    font-size: 16px;
}

.certificate-info-body,
.redistribution-settings-body,
.redistribution-logs-body,
.redistribution-log-group-body {
    padding: 0 14px 14px;
    border-top: 1px solid var(--line);
    background: #ffffff;
}

.redistribution-settings-body {
    padding-top: 1px;
}

.certificate-info-body {
    padding-top: 14px;
}

.redistribution-logs-body {
    display: grid;
    gap: 12px;
    padding-top: 14px;
}

.redistribution-log-group {
    margin-top: 0;
}

.quick-redistribution-logs {
    margin-top: 12px;
}

.redistribution-log-group-body {
    padding-top: 12px;
}

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

.queue-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.queue-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.queue-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 92px;
    height: 36px;
    padding: 0 10px;
    box-shadow: none;
    font-weight: 700;
    color: var(--muted);
}

.queue-filter-button.active {
    background: #dff5eb;
    color: var(--ok);
    border-color: #9bd9c1;
}

.queue-list.empty {
    color: var(--muted);
}

.queue-item-summary-main span,
.queue-item-summary-meta span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.queue-item-summary-main strong {
    display: block;
    margin-top: 4px;
    font-size: 14px;
}

.queue-item-summary-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 10px;
}

.queue-item-summary-meta strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
}

.queue-item-direct-head {
    display: grid;
    grid-template-columns: minmax(160px, 0.75fr) minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.history-list {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.history-list.empty {
    color: var(--muted);
}

.monitor-log-list {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.monitor-log-list.compact {
    margin-bottom: 0;
}

.monitor-log-list.empty {
    color: var(--muted);
}

.monitor-log-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.monitor-log-list.compact .monitor-log-item {
    padding: 10px;
    background: #ffffff;
}

.monitor-log-item strong,
.monitor-log-item span {
    display: block;
    overflow-wrap: anywhere;
}

.monitor-log-item span {
    color: var(--muted);
    font-size: 12px;
}

.monitor-log-item strong {
    margin-bottom: 4px;
    font-size: 13px;
}

.history-item {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.history-item span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.history-item strong,
.history-item code {
    display: block;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.history-item code {
    color: #26343a;
    font-family: Consolas, "Courier New", monospace;
}

.history-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.history-stats span {
    margin: 0;
}

.history-stats strong {
    display: inline;
}

.queue-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.queue-item span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 5px;
}

.queue-item strong,
.queue-item code {
    display: block;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.queue-item code {
    color: #26343a;
    font-family: Consolas, "Courier New", monospace;
}

.queue-status.ok {
    color: var(--ok);
}

.queue-status.warn {
    color: #a46500;
}

.queue-status.bad,
.queue-error code {
    color: var(--bad);
}

.nfse-history-panel {
    margin-bottom: 14px;
}

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

.nfse-history-list.compact {
    margin-bottom: 12px;
}

.nfse-history-list.empty {
    color: var(--muted);
}

.nfse-history-item {
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) minmax(90px, 0.5fr) minmax(90px, 0.45fr) minmax(150px, 0.75fr) minmax(110px, 0.55fr) minmax(270px, 1.25fr);
    gap: 10px 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.nfse-history-item span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 5px;
}

.nfse-history-item strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.nfse-history-list.compact .nfse-history-item {
    grid-template-columns: minmax(135px, 0.75fr) minmax(90px, 0.45fr) minmax(90px, 0.45fr) minmax(110px, 0.55fr) minmax(220px, 1fr);
}

.nfse-history-list.compact .nfse-history-item div:nth-child(4) {
    display: none;
}

.queue-actions {
    display: flex;
    justify-content: flex-end;
}

.session-settings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.session-settings.empty {
    color: var(--muted);
}

.session-settings div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.session-settings span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
}

.session-settings strong {
    display: block;
    font-size: 17px;
}

.sessions-list {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.sessions-list.empty {
    color: var(--muted);
}

.session-item {
    display: grid;
    grid-template-columns: minmax(140px, 0.9fr) minmax(150px, 0.85fr) minmax(110px, 0.65fr) minmax(120px, 0.7fr) minmax(64px, 0.35fr) minmax(130px, 0.55fr);
    gap: 10px 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.session-item.inactive {
    opacity: 0.55;
    background: #f2f6f7;
}

.session-actions {
    display: grid;
    gap: 5px;
}

.session-disconnect {
    min-width: 116px;
    height: 34px;
    padding: 0 10px;
}

.session-item span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 5px;
}

.session-item strong,
.session-item code {
    display: block;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.session-item code {
    color: #53656d;
    font-family: Consolas, "Courier New", monospace;
}

.user-audit-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin-bottom: 10px;
}

.user-audit-toolbar label {
    display: grid;
    gap: 5px;
}

.user-audit-toolbar label span {
    color: var(--muted);
    font-size: 12px;
}

.user-audit-toolbar select,
.user-audit-toolbar input[type="date"] {
    min-width: 220px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text);
    font: inherit;
}

.user-audit-list {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.local-maintenance-panel,
.ibge-admin-panel {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.ibge-summary {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ibge-summary.empty {
    display: block;
    color: var(--muted);
}

.ibge-summary code {
    display: block;
    margin-top: 4px;
    color: #53656d;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.ibge-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.email-admin-panel {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.email-settings-form {
    grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1.2fr) minmax(110px, 0.55fr) minmax(120px, 0.55fr);
    align-items: end;
}

.email-settings-form .wide {
    grid-column: 1 / -1;
}

.email-field-url {
    grid-column: span 2;
}

.email-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0;
}

.email-summary.empty {
    display: block;
    color: var(--muted);
}

.email-summary code {
    display: block;
    margin-top: 4px;
    color: #53656d;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
}

.email-actions,
.email-test-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.email-test-form {
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: end;
    margin-bottom: 0;
}

.email-test-form label {
    flex: 1 1 260px;
}

.user-audit-list.empty {
    color: var(--muted);
}

.user-audit-item {
    display: grid;
    grid-template-columns: minmax(140px, 0.75fr) minmax(120px, 0.6fr) minmax(150px, 0.75fr) minmax(220px, 1.15fr);
    gap: 10px 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.user-audit-item.failed {
    border-color: #f0b5ad;
    background: #fff8f7;
}

.user-audit-item span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 5px;
}

.user-audit-item strong,
.user-audit-item code {
    display: block;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.user-audit-item code {
    color: #53656d;
    font-family: Consolas, "Courier New", monospace;
}

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

.users-list.empty {
    color: var(--muted);
}

.user-item {
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) minmax(190px, 1fr) minmax(260px, 1.35fr) minmax(170px, 0.9fr) 86px;
    grid-template-areas:
        "identity profile participants email actions"
        "status profile participants login actions";
    gap: 10px 12px;
    align-items: stretch;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.user-item.master-user {
    border-color: #9bd9c1;
    background: #f6fffb;
}

.user-cell {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
}

.user-main-cell {
    grid-area: identity;
}

.user-profile-cell {
    grid-area: profile;
}

.user-email-cell {
    grid-area: email;
}

.user-participants-cell {
    grid-area: participants;
}

.user-status-cell {
    grid-area: status;
}

.user-login-cell {
    grid-area: login;
}

.user-actions {
    grid-area: actions;
}

.user-item span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 5px;
}

.user-item strong,
.user-item code {
    display: block;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.user-item code {
    color: #53656d;
    font-family: Consolas, "Courier New", monospace;
}

.profile-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 6px;
}

.profile-control select {
    width: 100%;
    min-width: 0;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--text);
    font: inherit;
}

.profile-control .command {
    justify-self: start;
    min-width: 68px;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
}

.participant-access-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: start;
}

.participant-access-control select,
.participant-access-create select {
    width: 100%;
    min-height: 82px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--text);
    font: inherit;
}

.participant-access-control .command {
    justify-self: start;
    min-width: 68px;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
}

.user-actions {
    display: grid;
    align-content: center;
    gap: 6px;
    justify-items: stretch;
}

.compact-user-actions .command {
    min-width: 0;
    width: 100%;
    height: 28px;
    padding: 0 6px;
    font-size: 11.5px;
}

.profile-panel {
    display: grid;
    gap: 8px;
}

.profile-form {
    grid-template-columns: minmax(160px, 0.9fr) minmax(240px, 1.35fr) minmax(92px, auto) minmax(120px, auto) auto;
    gap: 8px;
    padding: 12px;
}

.profile-form .profile-description-field {
    grid-column: auto;
}

.profile-form label {
    gap: 4px;
    font-size: 12px;
}

.profile-form input,
.profile-form select {
    height: 36px;
    padding: 6px 8px;
    font-size: 12px;
}

.profile-form .check-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    font-weight: 700;
}

.profile-form .check-pill input {
    width: 14px;
    height: 14px;
    accent-color: var(--brand);
}

.profile-form .command {
    height: 36px;
}

.permissions-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 6px;
}

.permissions-matrix.empty {
    display: block;
    color: var(--muted);
    font-weight: 700;
}

.permission-module {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.permission-module legend {
    padding: 0 4px;
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
}

.permission-check {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
}

.permission-check input {
    width: 12px;
    height: 12px;
    accent-color: var(--brand);
}

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

.profiles-list {
    display: grid;
    gap: 6px;
}

.profiles-list.empty {
    color: var(--muted);
    font-weight: 700;
}

.profile-item {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.15fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.profile-item.inactive {
    background: #fff8ea;
}

.profile-summary {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.profile-summary strong,
.profile-summary span,
.profile-meta-row code {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-summary strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.profile-summary span {
    color: var(--muted);
    font-size: 11px;
}

.profile-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.profile-chip,
.profile-meta-row code {
    display: inline-flex;
    align-items: center;
    max-width: 180px;
    min-height: 23px;
    padding: 3px 7px;
    border: 1px solid #c9d6dc;
    border-radius: 999px;
    background: #ffffff;
    color: #40525a;
    font-size: 10.5px;
    font-weight: 800;
}

.profile-chip.ok {
    border-color: #9bd9c1;
    background: #f0fbf6;
    color: var(--ok);
}

.profile-chip.warn {
    border-color: #efcf93;
    background: #fff8ea;
    color: var(--warn);
}

.profile-meta-row code {
    border-radius: 7px;
    font-family: Consolas, "Courier New", monospace;
    font-weight: 700;
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.profile-actions .command {
    min-width: 68px;
    height: 30px;
    padding: 0 9px;
    font-size: 12px;
}

.filters .checkbox-filter {
    align-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    font-size: 13px;
}

.filters .checkbox-filter input {
    width: 16px;
    height: 16px;
    padding: 0;
}

.filters .checkbox-filter span {
    color: var(--text);
}

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

.notes-list.empty {
    color: var(--muted);
}

.notes-list.loading {
    min-height: 76px;
    place-items: center;
}

.notes-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.notes-pagination[hidden] {
    display: none;
}

.notes-pagination .command {
    min-width: 170px;
    height: 36px;
}

.loading-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-dark);
    font-weight: 800;
}

.mini-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #d8e6ea;
    border-top-color: var(--brand);
    border-radius: 999px;
    animation: spin 0.8s linear infinite;
    flex: 0 0 auto;
}

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

.dfe-main,
.dfe-status {
    min-width: 0;
}

.dfe-status {
    display: grid;
    gap: 10px;
}

.dfe-status h3 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
}

.status-card {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
    min-width: 0;
}

.status-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 6px;
}

.status-card strong,
.status-card code {
    display: block;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.status-card code {
    font-family: Consolas, "Courier New", monospace;
}

.audit-chart {
    padding: 18px;
}

.audit-chart.empty {
    color: var(--muted);
}

.audit-general-detail {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
    overflow: hidden;
}

.audit-general-detail summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    cursor: pointer;
    list-style: none;
}

.audit-general-detail summary::-webkit-details-marker {
    display: none;
}

.audit-general-detail summary strong,
.audit-general-detail summary span {
    display: block;
}

.audit-general-detail summary > div > strong {
    font-size: 16px;
}

.audit-logs-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 196px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #6bbcc5;
    border-radius: 999px;
    background: #e6f7f8;
    color: #0f6974;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    flex: 0 0 auto;
    cursor: pointer;
    box-shadow: none;
}

.audit-logs-toggle strong {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 1;
    transition: transform 0.15s ease;
}

.audit-general-detail[open] .audit-logs-toggle strong {
    transform: rotate(180deg);
}

.audit-collapse-label,
.audit-general-detail[open] .audit-expand-label {
    display: none;
}

.audit-general-detail[open] .audit-collapse-label {
    display: block;
}

.audit-general-body {
    padding: 0;
    background: transparent;
}

.audit-list-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.audit-list-heading strong,
.audit-list-heading span {
    display: block;
}

.audit-list-heading strong {
    font-size: 15px;
}

.audit-list-footer {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.audit-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 13px;
}

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

.audit-legend i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.audit-legend .ok,
.audit-bar.ok {
    background: var(--ok);
}

.audit-legend .sim,
.audit-bar.sim {
    background: #4d78c7;
}

.audit-legend .warn,
.audit-bar.warn {
    background: var(--warn);
}

.audit-legend .bad,
.audit-bar.bad {
    background: var(--bad);
}

.audit-bars-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(56px, 1fr));
    gap: 10px;
    align-items: end;
    min-height: 132px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--line);
}

.audit-day {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.audit-bars {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 92px;
}

.audit-bar {
    display: block;
    width: 12px;
    min-height: 4px;
    border-radius: 4px 4px 0 0;
}

.audit-day strong {
    color: var(--muted);
    font-size: 12px;
}

.audit-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    max-height: 280px;
    overflow: auto;
    padding-right: 6px;
    overscroll-behavior: contain;
}

.audit-list.expanded {
    max-height: 560px;
}

.audit-list::-webkit-scrollbar {
    width: 8px;
}

.audit-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c3d1d7;
}

.audit-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.audit-row.rejected {
    border-color: #f0d38a;
    background: #fffaf0;
}

.audit-row strong,
.audit-row span {
    display: block;
}

.audit-row span {
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.audit-row .audit-warning {
    color: #8a5f00;
    font-weight: 700;
}

.audit-xml-detail {
    margin-top: 8px;
}

.audit-xml-detail summary {
    width: fit-content;
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.audit-xml-detail pre {
    max-height: 220px;
    overflow: auto;
    margin: 8px 0 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: #26343a;
    font: 12px/1.45 Consolas, "Courier New", monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.note-item {
    --note-label-size: 12px;
    --note-value-size: 14px;
    --note-key-size: 12.2px;
    --note-action-size: 11.5px;
    --note-badge-size: 12px;
    container-type: inline-size;
    display: grid;
    grid-template-columns: 58px 72px 150px 110px 190px 148px 420px 92px 112px 34px;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
    align-items: start;
}

.nfse-item {
    grid-template-columns: 72px 150px 280px 148px 390px 104px 150px 220px;
}

.notes-list.nfse-list .nfse-item {
    grid-template-columns:
        minmax(50px, 0.45fr)
        minmax(118px, 0.9fr)
        minmax(190px, 1.35fr)
        minmax(148px, 0.95fr)
        minmax(230px, 1.6fr)
        minmax(88px, 0.7fr)
        minmax(118px, 0.9fr)
        minmax(150px, 1.1fr);
    gap: 8px 12px;
    overflow: visible;
}

.notes-list.nfse-list .note-key-value {
    white-space: normal;
}

.notes-list.nfse-list .note-actions {
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

@media (max-width: 1280px) {
    .notes-list.nfse-list .nfse-item {
        grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr));
        gap: 8px;
    }
}

@media (max-width: 960px) {
    .notes-list.nfse-list .nfse-item {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .notes-list.nfse-list .note-number strong,
    .notes-list.nfse-list .note-document strong,
    .notes-list.nfse-list .note-date strong {
        white-space: normal;
    }

    .notes-list.nfse-list .note-key,
    .notes-list.nfse-list .nfse-provider,
    .notes-list.nfse-list .note-service-location,
    .notes-list.nfse-list .note-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .notes-list.nfse-list .nfse-item {
        grid-template-columns: 1fr;
    }
}

@supports (font-size: 1cqi) {
    .note-item {
        --note-label-size: clamp(10.5px, calc(9.4px + 0.16cqi), 12px);
        --note-value-size: clamp(12px, calc(10.7px + 0.22cqi), 14px);
        --note-key-size: clamp(10.4px, calc(9.1px + 0.18cqi), 12.2px);
        --note-action-size: clamp(10.2px, calc(9.2px + 0.15cqi), 11.5px);
        --note-badge-size: clamp(10.8px, calc(9.7px + 0.15cqi), 12px);
    }
}

.note-item.canceled {
    border-color: #e49a93;
    background: #fff7f6;
    box-shadow: inset 5px 0 0 var(--bad);
}

.note-item strong,
.note-item span {
    display: block;
}

.note-item span {
    color: var(--muted);
    font-size: 13px;
    margin-top: 5px;
    overflow-wrap: anywhere;
}

.note-item > div {
    min-width: 0;
}

.note-item > div > strong {
    font-size: var(--note-value-size);
    overflow-wrap: anywhere;
}

.note-field > span:first-child {
    margin-top: 0;
    color: var(--muted);
    font-size: var(--note-label-size);
    font-weight: 700;
}

.note-field > strong {
    margin-top: 5px;
}

.note-type {
    flex: 0 0 58px;
}

.note-number {
    flex: 0 0 72px;
}

.note-document {
    flex: 0 0 150px;
}

.note-ie {
    flex: 0 0 148px;
}

.note-supplier {
    flex: 1 1 190px;
    min-width: 160px;
}

.note-date {
    flex: 0 0 148px;
}

.note-key {
    flex: 1 1 318px;
    min-width: 300px;
    max-width: 100%;
    container-type: inline-size;
}

.note-value {
    flex: 0 0 92px;
}

.note-city {
    flex: 1 1 110px;
    min-width: 92px;
}

.note-uf {
    flex: 0 0 34px;
    margin-left: auto;
}

.note-service-location {
    min-width: 170px;
}

.note-light-value {
    font-weight: 500;
}

.note-key-value {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: var(--note-key-size);
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-family: Consolas, "Courier New", monospace;
}

.copyable-key {
    position: relative;
    cursor: pointer;
    color: var(--brand-dark);
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.note-key .copyable-key {
    width: fit-content;
    max-width: 100%;
    margin-top: 5px;
    padding: 2px 4px;
}

.copyable-key:hover,
.copyable-key:focus-visible {
    background: #e6f7f8;
    color: #0f6974;
    outline: 2px solid #9bd8df;
    outline-offset: 2px;
}

.copyable-key.copied {
    background: #dff5eb;
    color: var(--ok);
}

.copy-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;
    padding: 10px 14px;
    border: 1px solid #9bd8df;
    border-radius: 8px;
    background: #ffffff;
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 800;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.copy-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.note-document strong,
.note-date strong {
    white-space: nowrap;
}

.note-supplier strong {
    line-height: 1.25;
}

.nfse-provider strong {
    line-height: 1.25;
}

.note-service-location strong {
    line-height: 1.25;
}

.cancel-badge {
    font-size: 13px;
    text-transform: uppercase;
}

.note-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.note-actions-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.note-actions .badge {
    font-size: var(--note-badge-size);
    margin-top: 0;
}

.note-actions .command {
    min-width: 58px;
    height: 26px;
    padding: 0 8px;
    font-size: var(--note-action-size);
    box-shadow: none;
}

.note-actions .manifest-command {
    min-width: 68px;
}

.note-actions .manifest-command-tooltip {
    display: inline-flex;
    min-width: 68px;
    cursor: not-allowed;
}

.note-actions .manifest-command-tooltip .manifest-command {
    width: 100%;
}

.note-actions .command.watermark,
.note-actions .command.watermark:disabled {
    background: transparent;
    border-color: #c9d5da;
    border-style: dashed;
    color: #718189;
    opacity: 0.48;
    filter: grayscale(1);
    cursor: not-allowed;
}

.command {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 122px;
    height: 40px;
    padding: 0 14px;
    font-weight: 700;
}

.command.selected {
    background: #dff5eb;
    color: var(--ok);
    border-color: #9bd9c1;
}

.command.primary {
    background: var(--brand);
    color: #ffffff;
    border-color: var(--brand);
}

.command.restricted {
    background: #fff4da;
    color: #835400;
    border-color: #efc36d;
}

.command.danger {
    color: var(--bad);
    border-color: #f0b5ad;
}

.command.primary:disabled {
    background: #d7e2e5;
    color: #51636b;
    border-color: #c8d6dc;
}

.command:disabled {
    background: #eef3f4;
    color: #819097;
    border-color: #d9e2e5;
    box-shadow: none;
}

.note-actions .command.blocked-perfil,
.note-actions .command.blocked-perfil:disabled {
    background: #eef3f4;
    color: #8b989e;
    border-color: #d8e1e5;
    opacity: 0.58;
    filter: grayscale(1);
    cursor: not-allowed;
    pointer-events: none;
}

.modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 32, 38, 0.38);
    z-index: 20;
}

.modal.hidden {
    display: none;
}

.modal-panel {
    width: min(520px, 100%);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 24px 70px rgba(15, 32, 38, 0.2);
}

.certificate-modal-panel {
    width: min(560px, 100%);
}

.certificate-modal-body {
    padding: 18px;
}

.certificate-modal-form {
    margin-bottom: 0;
}

.certificate-modal-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-top: 4px;
}

.certificate-modal-close {
    min-width: 76px;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    box-shadow: none;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid var(--line);
}

.modal-head strong,
.modal-head span {
    display: block;
}

.modal-head span {
    color: var(--muted);
    font-size: 13px;
    margin-top: 3px;
}

.spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #d8e6ea;
    border-top-color: var(--brand);
    border-radius: 999px;
    animation: spin 0.8s linear infinite;
}

.operation-state {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.operation-state.ok {
    background: #dff5eb;
    color: var(--ok);
}

.operation-state.warn {
    background: #fff1d6;
    color: var(--warn);
}

.operation-body {
    display: grid;
    gap: 8px;
    padding: 18px;
}

.operation-step {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: #fbfcfd;
    font-size: 14px;
}

.operation-step.running {
    border-color: #9db6bf;
    color: var(--brand-dark);
}

.operation-step.ok {
    border-color: #9bd9c1;
    color: var(--ok);
    background: #f0fbf6;
}

.operation-step.sim,
.operation-state.sim {
    border-color: #b8cafa;
    color: #315a9f;
    background: #f1f5ff;
}

.operation-step.warn {
    border-color: #f0ca86;
    color: var(--warn);
    background: #fff8eb;
}

.operation-progress {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.operation-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--text);
}

.operation-progress-block {
    display: grid;
    gap: 6px;
}

.operation-progress-head span {
    color: var(--muted);
    font-weight: 700;
}

.operation-progress-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7eef1;
}

.operation-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: var(--brand);
    transition: width 0.2s ease;
}

.operation-progress-bar.secondary {
    background: #547381;
}

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

.operation-progress-grid div {
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.operation-progress-grid span,
.operation-progress-file span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.operation-progress-grid strong {
    display: block;
    margin-top: 3px;
}

.operation-progress-file {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.operation-progress-file code {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--brand-dark);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0 18px 18px;
}

.modal-actions.inline {
    gap: 8px;
    padding: 0;
}

.password-confirm-form {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.password-confirm-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}

.password-confirm-form input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    background: #ffffff;
    color: var(--text);
    font: inherit;
}

.password-confirm-message {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

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

@media (max-width: 1680px) and (min-width: 1281px) {
    .note-item {
        grid-template-columns: 68px 142px 104px 170px 140px 390px 86px 102px 32px;
        gap: 8px;
    }
}

@media (max-width: 1480px) and (min-width: 1281px) {
    .note-item {
        grid-template-columns: 64px 132px 102px 150px 128px 370px 82px 92px 30px;
    }

    .nfse-item {
        grid-template-columns: 64px 132px 240px 128px 340px 92px 132px 200px;
    }
}

@media (max-height: 760px) and (min-width: 761px) {
    .sidebar {
        gap: 10px;
        padding: 14px 16px;
    }

    .brand {
        gap: 10px;
    }

    .brand-mark {
        width: 36px;
        height: 36px;
    }

    .brand span {
        font-size: 12px;
    }

    .nav {
        gap: 2px;
    }

    .nav button {
        padding: 6px 10px;
        font-size: 13px;
    }

    .sidebar-status-stack {
        gap: 6px;
    }

    .service-status {
        padding: 7px 9px;
    }

    .monitor-status {
        padding: 5px 9px;
    }

    .monitor-status small {
        display: none;
    }
}

@media (max-height: 640px) and (min-width: 761px) {
    .sidebar {
        gap: 8px;
    }

    .brand span,
    .service-status small {
        display: none;
    }

    .nav button {
        padding: 5px 9px;
    }

    .side-status span {
        font-size: 11px;
    }
}

@media (max-width: 1280px) {
    .notes-filters,
    .nfse-filters {
        grid-template-columns: 142px 142px minmax(300px, 1.4fr) minmax(180px, 0.9fr);
    }

    .note-item {
        grid-template-columns: 64px 132px 102px 132px 128px 360px 82px 82px 30px;
    }

    .nfse-item {
        grid-template-columns: 64px 132px 220px 128px 330px 82px 124px 190px;
    }
}

@media (max-width: 960px) {
    .shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
        overflow: visible;
        gap: 16px;
    }

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

    .nav button {
        text-align: center;
        padding-inline: 6px;
    }

    .side-status {
        margin-top: 0;
    }

    .sidebar-status-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0;
    }

    .service-status {
        grid-column: 1 / -1;
    }

    .metrics,
    .content-grid,
    .dfe-layout,
    .info-grid,
    .status-strip,
    .filters,
    .queue-item,
    .audit-bars-grid {
        grid-template-columns: 1fr;
    }

    .note-supplier,
    .note-key {
        grid-column: auto;
    }

    .note-uf {
        margin-left: auto;
        text-align: right;
    }

    .note-actions-status {
        width: 100%;
        margin-left: 0;
    }

    .panel-head {
        flex-wrap: wrap;
    }

    .detail-header-aside,
    .header-countdown {
        width: 100%;
    }

    .detail-header-aside {
        margin-left: 0;
    }

    .header-countdown {
        min-width: 0;
        text-align: center;
    }
}

@media (max-width: 560px) {
    .main,
    .sidebar {
        padding: 16px;
    }

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

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

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

@media (max-width: 760px) {
    body.sidebar-open {
        overflow: hidden;
    }

    .shell {
        display: block;
        min-height: 100vh;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 30;
        width: min(86vw, 320px);
        height: 100dvh;
        padding: 18px;
        gap: 18px;
        overflow: auto;
        transform: translateX(-104%);
        transition: transform 0.18s ease;
        box-shadow: 18px 0 44px rgba(15, 32, 38, 0.24);
    }

    .sidebar-status-stack {
        grid-template-columns: 1fr;
        margin-top: auto;
    }

    .service-status {
        grid-column: auto;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

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

    .sidebar .nav button {
        text-align: left;
        padding-inline: 12px;
    }

    .mobile-menu-button {
        display: inline-flex;
        width: 42px;
        height: 42px;
        box-shadow: none;
    }

    .main {
        padding: 14px;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 12;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        margin: -14px -14px 14px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
        background: rgba(244, 247, 249, 0.96);
    }

    .topbar > div:first-of-type {
        min-width: 0;
    }

    .topbar h1 {
        font-size: 20px;
    }

    .topbar p {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .toolbar {
        grid-column: 1 / -1;
        justify-content: space-between;
        gap: 8px;
    }

    .participant-context {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .user-chip {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

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

    .metrics article,
    .panel-head,
    .details,
    .audit-chart {
        padding: 12px;
    }

    .metrics strong {
        font-size: 20px;
    }

    .content-grid,
    .content-grid.documents-view,
    .content-grid.key-query-view,
    .info-grid,
    .ibge-summary,
    .certificate-identification-fields,
    .session-settings,
    .settings-form,
    .key-query-form,
    .redistribution-destination-row,
    .redistribution-address-header,
    .redistribution-type-options,
    .status-strip,
    .redistribution-queue,
    .nfse-summary,
    .filters,
    .notes-filters,
    .nfse-filters {
        grid-template-columns: 1fr;
    }

    .filters .command,
    .actions .command,
    .settings-form .command,
    .certificate-form .command {
        width: 100%;
        min-width: 0;
    }

    .xml-import-company-picker {
        grid-template-columns: 1fr;
    }

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

    .email-field-url {
        grid-column: auto;
    }

    .email-actions,
    .email-test-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .key-query-field {
        grid-row: auto;
    }

    .key-query-actions,
    .key-query-result-head {
        display: grid;
        grid-template-columns: 1fr;
    }

    .participant {
        grid-template-columns: 1fr;
        padding: 14px 12px;
    }

    .panel-head {
        align-items: flex-start;
    }

    .detail-title {
        display: grid;
    }

    .note-item,
    .nfse-item {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        overflow: visible;
        padding: 12px;
    }

    .note-supplier,
    .note-key,
    .note-actions,
    .note-service-location,
    .nfse-provider {
        grid-column: 1 / -1;
    }

    .note-key-value {
        white-space: normal;
    }

    .note-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .note-actions .command,
    .note-actions .manifest-command {
        width: 100%;
        min-width: 0;
        height: 34px;
    }

    .note-actions .manifest-command-tooltip {
        width: 100%;
        min-width: 0;
    }

    .note-actions-status {
        grid-column: 1 / -1;
        justify-content: flex-start;
        width: 100%;
        margin-left: 0;
    }

    .queue-item,
    .nfse-history-item,
    .user-item,
    .profile-item,
    .permissions-matrix,
    .audit-row {
        grid-template-columns: 1fr;
    }

    .user-form,
    .user-item {
        grid-template-areas: none;
    }

    .user-form > *,
    .user-cell,
    .user-actions {
        grid-area: auto !important;
    }

    .user-actions,
    .profile-actions,
    .participant-access-control,
    .profile-control {
        justify-content: stretch;
    }

    .participant-access-control,
    .profile-control {
        display: grid;
        grid-template-columns: 1fr;
    }

    .profile-control select {
        width: 100%;
    }

    .modal {
        align-items: end;
        padding: 10px;
    }

    .modal-panel {
        max-height: 92dvh;
        overflow: auto;
    }
}

@media (max-width: 430px) {
    .main {
        padding: 10px;
    }

    .topbar {
        margin: -10px -10px 10px;
        padding: 10px;
    }

    .metrics,
    .note-item,
    .nfse-item,
    .note-actions {
        grid-template-columns: 1fr;
    }

    .toolbar {
        display: grid;
        grid-template-columns: 1fr auto auto;
    }

    .command,
    .text-button {
        min-width: 0;
    }
}