:root {
    --bg: #eef3f8;
    --panel: rgba(255, 255, 255, 0.94);
    --panel-soft: #f3f8fb;
    --text: #111827;
    --muted: #607083;
    --line: #d4dee9;
    --line-strong: #b8c6d6;
    --primary: #008f8c;
    --primary-dark: #006f6d;
    --blue: #1d63ed;
    --green: #15803d;
    --yellow: #9a6a00;
    --orange: #c2410c;
    --red: #b42318;
    --shadow: 0 18px 48px rgba(9, 30, 66, 0.12);
}

body {
    background:
        linear-gradient(90deg, rgba(15, 118, 110, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(29, 99, 237, 0.045) 1px, transparent 1px),
        #eef3f8;
    background-size: 36px 36px;
}

.login-screen {
    background:
        linear-gradient(135deg, rgba(7, 20, 38, 0.94), rgba(12, 43, 58, 0.93)),
        url("data:image/svg+xml,%3Csvg width='1200' height='700' viewBox='0 0 1200 700' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2322d3ee' stroke-opacity='.18'%3E%3Cpath d='M80 130h210v120H80zM385 90h320v170H385zM780 150h280v120H780zM210 360h240v160H210zM560 380h390v140H560z'/%3E%3Cpath d='M290 190h95M705 174h75M450 440h110M950 450h120M200 250v110M640 260v120'/%3E%3C/g%3E%3Cg fill='%232dd4bf' fill-opacity='.42'%3E%3Ccircle cx='80' cy='130' r='4'/%3E%3Ccircle cx='290' cy='190' r='4'/%3E%3Ccircle cx='385' cy='190' r='4'/%3E%3Ccircle cx='705' cy='174' r='4'/%3E%3Ccircle cx='780' cy='174' r='4'/%3E%3Ccircle cx='450' cy='440' r='4'/%3E%3Ccircle cx='560' cy='440' r='4'/%3E%3Ccircle cx='950' cy='450' r='4'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
}

.login-panel {
    color: #e5eef7;
    background: rgba(8, 20, 35, 0.86);
    border-color: rgba(45, 212, 191, 0.35);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(18px);
}

.login-panel h1,
.login-panel label {
    color: #f8fbff;
}

.login-copy,
.login-panel .form-error {
    color: #b8c7d8;
}

.login-panel input {
    color: #f8fbff;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(184, 198, 214, 0.3);
}

.brand-mark {
    background: linear-gradient(135deg, #00a8a5, #1d63ed);
    box-shadow: 0 12px 34px rgba(0, 143, 140, 0.28);
}

.sidebar {
    background: #071426;
    border-right-color: rgba(128, 152, 179, 0.22);
}

.sidebar-brand {
    border-bottom-color: rgba(128, 152, 179, 0.22);
}

.sidebar-brand strong {
    color: #f8fbff;
}

.sidebar-brand span,
.nav-group {
    color: #8fa2b8;
}

.nav-button {
    color: #cfdae8;
}

.nav-button .nav-icon {
    width: 26px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    color: #7dd3fc;
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 12px;
    font-weight: 800;
}

.nav-button:hover,
.nav-button.active {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(0, 143, 140, 0.34), rgba(29, 99, 237, 0.18));
}

.nav-button.active .nav-icon {
    color: #ffffff;
    background: linear-gradient(135deg, #008f8c, #1d63ed);
    border-color: transparent;
}

.topbar {
    min-height: 64px;
    background: rgba(248, 251, 255, 0.9);
    border-bottom-color: rgba(184, 198, 214, 0.7);
}

.search-wrap input,
.global-filters label,
.kpi-card,
.panel,
.mini-card,
.tool-card,
.table-panel {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(184, 198, 214, 0.72);
    box-shadow: 0 10px 30px rgba(9, 30, 66, 0.06);
}

.global-filters label {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
}

.view-head {
    padding: 4px 0 2px;
}

.view-head h1 {
    font-size: 28px;
    letter-spacing: 0;
}

.view-head h1::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin-top: 10px;
    border-radius: 99px;
    background: linear-gradient(90deg, #008f8c, #1d63ed);
}

.kpi-card {
    position: relative;
    overflow: hidden;
}

.kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #008f8c, #1d63ed, #7c3aed);
}

.kpi-card strong {
    font-size: 27px;
    font-variant-numeric: tabular-nums;
}

.primary-button {
    background: linear-gradient(135deg, #008f8c, #1d63ed);
    box-shadow: 0 10px 24px rgba(29, 99, 237, 0.22);
}

.primary-button:hover {
    background: linear-gradient(135deg, #007b78, #1857ce);
}

.secondary-button,
.user-chip button,
.alert-button,
.close-button,
.icon-button {
    background: #f9fcff;
    border-color: #b8c6d6;
}

.tool-card {
    position: relative;
    overflow: hidden;
}

.tool-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 143, 140, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(29, 99, 237, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(180deg, #000, transparent 62%);
}

.tool-card > * {
    position: relative;
}

.tool-logo {
    background: linear-gradient(135deg, #071426, #008f8c 55%, #1d63ed);
    border: 1px solid rgba(125, 211, 252, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 24px rgba(7, 20, 38, 0.22);
}

.chart-wrap {
    border: 1px solid rgba(184, 198, 214, 0.62);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f5f9fd);
    padding: 8px;
}

th {
    color: #243548;
    background: #eef5fb;
}

td {
    color: #243548;
}

.bar-track {
    background: #dfe8f2;
}

.bar-fill {
    background: linear-gradient(90deg, #008f8c, #1d63ed);
}

.badge {
    border-radius: 6px;
    text-transform: none;
}

.badge.active,
.badge.paid,
.badge.success,
.badge.confirmed,
.badge.healthy,
.badge.saudável {
    color: #05603a;
    background: #e8fbf0;
}

.badge.warning,
.badge.open,
.badge.requested,
.badge.imported,
.badge.alto {
    color: #875400;
    background: #fff5d6;
}

.badge.high,
.badge.risk,
.badge.manual,
.badge.baixa,
.badge.baixa-utilização {
    color: #a33b05;
    background: #fff0e5;
}

.badge.critical,
.badge.overdue,
.badge.expired,
.badge.terminated,
.badge.crítico,
.badge.excedido {
    color: #a4150d;
    background: #ffeceb;
}

.matrix-panel {
    box-shadow: 0 16px 42px rgba(9, 30, 66, 0.08);
}

.access-dot {
    background: linear-gradient(135deg, #e9fbff, #eef4ff);
}

.drawer-card,
.modal-card {
    border: 1px solid rgba(184, 198, 214, 0.75);
}

@media (max-width: 860px) {
    .sidebar {
        box-shadow: 18px 0 50px rgba(7, 20, 38, 0.28);
    }
}
/* Motion layer */
body {
    animation: gridDrift 28s linear infinite;
}

.login-panel {
    animation: panelRise 520ms ease both;
}

.app-shell {
    animation: appReveal 360ms ease both;
}

.nav-button,
.primary-button,
.secondary-button,
.user-chip button,
.alert-button,
.close-button,
.icon-button,
.tool-card,
.tool-logo,
.access-dot,
.badge {
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.nav-button:hover {
    transform: translateX(3px);
}

.primary-button:hover,
.secondary-button:hover,
.user-chip button:hover,
.alert-button:hover,
.close-button:hover,
.icon-button:hover {
    transform: translateY(-1px);
}

.kpi-card,
.panel,
.mini-card,
.tool-card,
.table-panel {
    animation: cardEnter 440ms ease both;
}

.kpi-card:nth-child(2),
.panel:nth-child(2),
.mini-card:nth-child(2),
.tool-card:nth-child(2) {
    animation-delay: 45ms;
}

.kpi-card:nth-child(3),
.panel:nth-child(3),
.mini-card:nth-child(3),
.tool-card:nth-child(3) {
    animation-delay: 90ms;
}

.kpi-card:nth-child(4),
.panel:nth-child(4),
.mini-card:nth-child(4),
.tool-card:nth-child(4) {
    animation-delay: 135ms;
}

.tool-card::before {
    animation: circuitScan 7s ease-in-out infinite;
}

.tool-card:hover {
    border-color: rgba(0, 143, 140, 0.48);
    box-shadow: 0 18px 46px rgba(9, 30, 66, 0.14);
    transform: translateY(-3px);
}

.tool-card:hover .tool-logo {
    transform: scale(1.05);
}

.bar-fill {
    animation: barGrow 680ms ease both;
    transform-origin: left;
}

.badge.critical,
.badge.crítico,
.badge.excedido {
    animation: alertPulse 2.4s ease-in-out infinite;
}

.access-dot:hover {
    box-shadow: 0 8px 20px rgba(29, 99, 237, 0.18);
    transform: scale(1.08);
}

.modal-card {
    animation: modalIn 180ms ease both;
}

.drawer-card {
    animation: drawerIn 220ms ease both;
}

@keyframes gridDrift {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 36px 36px, 36px 36px, 0 0; }
}

@keyframes panelRise {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes appReveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cardEnter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes circuitScan {
    0%, 100% { opacity: 0.58; background-position: 0 0; }
    50% { opacity: 0.9; background-position: 24px 12px; }
}

@keyframes barGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes alertPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0); }
    50% { box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.12); }
}

@keyframes modalIn {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.985); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes drawerIn {
    from { transform: translateX(28px); }
    to { transform: translateX(0); }
}

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