/**
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║  FLUXAI OS™ — DESIGN SYSTEM OFICIAL                             ║
 * ║  Versão: 2.1.0 | Único arquivo de tokens e utilitários base     ║
 * ║  ESTA É A ÚNICA FONTE DE VERDADE DE DESIGN DO SISTEMA           ║
 * ╚══════════════════════════════════════════════════════════════════╝
 *
 * REGRA: Nenhuma página deve definir :root inline.
 * Nenhum valor de cor, radius, spacing ou tipografia deve ser hardcoded.
 * Todo componente visual usa as classes deste arquivo.
 */

/* ═══════════════════════════════════════════════
   CAMADA 1 — TOKENS PRIMITIVOS
   ═══════════════════════════════════════════════ */
:root {
    /* IDENTIDADE CROMÁTICA */
    --os-primary:        #8e9e68;   /* Verde FluxAI — principal */
    --os-primary-dim:    #6b7a45;   /* Verde mais escuro — hover, bordas ativas */
    --os-primary-glow:   rgba(142, 158, 104, 0.12);  /* Verde translúcido — backgrounds ativos */
    --os-primary-border: rgba(142, 158, 104, 0.18);  /* Verde borda — cards e separadores */

    /* BACKGROUNDS */
    --os-bg:             #080a08;   /* Background absoluto do sistema */
    --os-surface:        rgba(12, 15, 12, 0.75);  /* Surface dos cards */
    --os-surface-raised: rgba(18, 22, 18, 0.85);  /* Surface elevada — modais */
    --os-sidebar-bg:     rgba(8, 10, 8, 0.92);    /* Sidebar */
    --os-topbar-bg:      rgba(8, 10, 8, 0.70);    /* Topbar */

    /* BORDAS */
    --os-border:         rgba(142, 158, 104, 0.12);  /* Borda padrão */
    --os-border-strong:  rgba(142, 158, 104, 0.25);  /* Borda ativa / hover */
    --os-border-subtle:  rgba(255, 255, 255, 0.04);  /* Borda quase invisível */

    /* TIPOGRAFIA */
    --os-text:           #e8e8e6;   /* Texto principal */
    --os-text-muted:     #6b6b6b;   /* Texto secundário / labels */
    --os-text-dim:       #4a4a4a;   /* Texto terciário / placeholders */
    --os-text-inverse:   #080a08;   /* Texto sobre fundo primário */

    /* FEEDBACK */
    --os-success:        #5cb87a;   /* Verde sucesso — discreto */
    --os-warning:        #c9973a;   /* Âmbar atenção */
    --os-danger:         #c25454;   /* Vermelho crítico */
    --os-info:           #4f88c6;   /* Azul informação */

    /* SEMÂNTICOS — backgrounds de feedback */
    --os-success-bg:     rgba(92, 184, 122, 0.08);
    --os-success-border: rgba(92, 184, 122, 0.20);
    --os-warning-bg:     rgba(201, 151, 58, 0.08);
    --os-warning-border: rgba(201, 151, 58, 0.20);
    --os-danger-bg:      rgba(194, 84, 84, 0.08);
    --os-danger-border:  rgba(194, 84, 84, 0.20);
    --os-info-bg:        rgba(79, 136, 198, 0.08);
    --os-info-border:    rgba(79, 136, 198, 0.20);

    /* TIPOGRAFIA */
    --os-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --os-font-mono:  'JetBrains Mono', 'Fira Code', monospace;

    --os-text-2xs:  0.65rem;
    --os-text-xs:   0.75rem;
    --os-text-sm:   0.85rem;
    --os-text-base: 0.95rem;
    --os-text-md:   1.1rem;
    --os-text-lg:   1.4rem;
    --os-text-xl:   1.75rem;
    --os-text-2xl:  2.2rem;

    --os-weight-normal:  400;
    --os-weight-medium:  500;
    --os-weight-semibold:600;
    --os-weight-bold:    700;
    --os-weight-black:   800;

    /* RADIUS */
    --os-radius-sm:   4px;    /* Botões, badges, inputs */
    --os-radius-md:   8px;    /* Cards secundários */
    --os-radius-lg:   12px;   /* Cards principais */
    --os-radius-full: 999px;  /* Pills */

    /* SPACING */
    --os-space-1:  4px;
    --os-space-2:  8px;
    --os-space-3:  12px;
    --os-space-4:  16px;
    --os-space-5:  20px;
    --os-space-6:  24px;
    --os-space-8:  32px;
    --os-space-10: 40px;

    /* LAYOUT */
    --os-sidebar-w:  264px;
    --os-topbar-h:   64px;

    /* SOMBRAS */
    --os-shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
    --os-shadow-md:  0 4px 16px rgba(0,0,0,0.4);
    --os-shadow-lg:  0 8px 32px rgba(0,0,0,0.5);

    /* TRANSIÇÕES */
    --os-transition: all 0.2s ease;
    --os-transition-slow: all 0.35s ease;
}

/* ═══════════════════════════════════════════════
   CAMADA 2 — RESET E BASE
   ═══════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    min-height: 100%;
}

body.os-mode {
    background-color: var(--os-bg);
    color: var(--os-text);
    font-family: var(--os-font-sans);
    font-size: var(--os-text-base);
    line-height: 1.5;
    overflow: hidden;
    height: 100vh;
    max-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Glow de background — sutil, não exagerado */
.os-bg-glow {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 0% 0%, rgba(142, 158, 104, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(142, 158, 104, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ═══════════════════════════════════════════════
   CAMADA 3 — SHELL (Estrutura principal)
   ═══════════════════════════════════════════════ */
.os-shell {
    display: grid;
    grid-template-columns: var(--os-sidebar-w) 1fr;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════
   CAMADA 4 — SIDEBAR
   ═══════════════════════════════════════════════ */
.os-sidebar { 
    background: var(--os-sidebar-bg); 
    border-right: 1px solid var(--os-border); 
    display: flex; 
    flex-direction: column; 
    z-index: 200; 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    max-height: 100vh;
    padding-bottom: 96px;
}

.os-sidebar-header {
    padding: var(--os-space-6) var(--os-space-5);
    border-bottom: 1px solid var(--os-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.os-sidebar-nav {
    padding: var(--os-space-3) var(--os-space-3);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--os-border) transparent;
}

.os-sidebar-nav::-webkit-scrollbar { width: 3px; }
.os-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.os-sidebar-nav::-webkit-scrollbar-thumb { background: var(--os-border); border-radius: 2px; }

.os-nav-label {
    display: block;
    font-size: var(--os-text-2xs);
    font-weight: var(--os-weight-black);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--os-text-dim);
    padding: var(--os-space-3) var(--os-space-3);
    margin-top: var(--os-space-4);
}

.os-nav-label:first-child { margin-top: var(--os-space-2); }

.os-nav-link {
    display: flex;
    align-items: center;
    gap: var(--os-space-3);
    padding: var(--os-space-2) var(--os-space-3);
    color: var(--os-text-muted);
    text-decoration: none;
    font-size: var(--os-text-sm);
    font-weight: var(--os-weight-medium);
    border-radius: var(--os-radius-sm);
    transition: var(--os-transition);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.os-nav-link i {
    font-size: 0.9rem;
    width: 18px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: var(--os-transition);
}

.os-nav-link:hover {
    background: var(--os-primary-glow);
    color: var(--os-text);
    border-color: var(--os-primary-border);
}

.os-nav-link:hover i { opacity: 1; }

.os-nav-link.active {
    background: var(--os-primary-glow);
    color: var(--os-primary);
    border-left: 2px solid var(--os-primary);
    padding-left: calc(var(--os-space-3) - 2px);
}

.os-nav-link.active i { opacity: 1; color: var(--os-primary); }

.os-sidebar-footer {
    padding: var(--os-space-4) var(--os-space-3);
    border-top: 1px solid var(--os-border-subtle);
    flex-shrink: 0;
}

.os-menu-close {
    display: none;
    background: none;
    border: none;
    color: var(--os-text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: var(--os-space-1);
    transition: var(--os-transition);
}

.os-menu-close:hover { color: var(--os-text); }

/* ═══════════════════════════════════════════════
   CAMADA 5 — TOPBAR
   ═══════════════════════════════════════════════ */
.os-viewport-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    min-width: 0;
}

.os-topbar {
    height: var(--os-topbar-h);
    background: var(--os-topbar-bg);
    border-bottom: 1px solid var(--os-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--os-space-10);
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
}

.os-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--os-space-4);
    min-width: 0;
}

.os-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--os-space-5);
    flex-shrink: 0;
}

.os-status-indicator {
    display: flex;
    align-items: center;
    gap: var(--os-space-2);
    font-size: var(--os-text-xs);
    color: var(--os-text-muted);
    font-family: var(--os-font-mono);
    font-weight: var(--os-weight-medium);
    letter-spacing: 0.5px;
}

.os-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--os-success);
    flex-shrink: 0;
    box-shadow: 0 0 6px var(--os-success);
}

.os-user-profile {
    display: flex;
    align-items: center;
    gap: var(--os-space-2);
    font-size: var(--os-text-sm);
    color: var(--os-text-muted);
    cursor: pointer;
    padding: var(--os-space-1) var(--os-space-2);
    border-radius: var(--os-radius-sm);
    transition: var(--os-transition);
}

.os-user-profile:hover { background: var(--os-primary-glow); color: var(--os-text); }

.os-avatar {
    width: 28px;
    height: 28px;
    background: var(--os-primary-dim);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--os-weight-black);
    font-size: var(--os-text-2xs);
    color: var(--os-text-inverse);
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.os-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--os-text);
    font-size: 1.1rem;
    cursor: pointer;
    padding: var(--os-space-1);
}

/* ═══════════════════════════════════════════════
   CAMADA 6 — VIEWPORT / CONTEÚDO
   ═══════════════════════════════════════════════ */
.os-viewport {
    flex: 1;
    padding: var(--os-space-10);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 96px;
    scrollbar-width: thin;
    scrollbar-color: var(--os-border) transparent;
}

.os-viewport::-webkit-scrollbar { width: 5px; }
.os-viewport::-webkit-scrollbar-track { background: transparent; }
.os-viewport::-webkit-scrollbar-thumb { background: var(--os-border); border-radius: 2px; }
.os-viewport::-webkit-scrollbar-thumb:hover { background: var(--os-border-strong); }

/* ═══════════════════════════════════════════════
   CAMADA 7 — TIPOGRAFIA DE PÁGINA
   ═══════════════════════════════════════════════ */
.os-page-title {
    margin-bottom: var(--os-space-8);
}

.os-page-title h1 {
    font-size: var(--os-text-xl);
    font-weight: var(--os-weight-black);
    letter-spacing: -0.03em;
    color: var(--os-text);
    line-height: 1.1;
    margin: 0;
}

.os-page-title h1.gradient {
    background: linear-gradient(135deg, var(--os-text) 30%, var(--os-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.os-page-title p {
    color: var(--os-text-muted);
    font-size: var(--os-text-sm);
    margin-top: var(--os-space-2);
    line-height: 1.5;
}

.os-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--os-space-4);
    margin-bottom: var(--os-space-8);
}

/* ═══════════════════════════════════════════════
   CAMADA 8 — GRID DE WIDGETS
   ═══════════════════════════════════════════════ */
.os-widget-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--os-space-5);
    margin-top: var(--os-space-6);
}

/* ═══════════════════════════════════════════════
   CAMADA 9 — CARDS / WIDGETS
   ═══════════════════════════════════════════════ */
.os-widget {
    background: var(--os-surface);
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-lg);
    padding: var(--os-space-6);
    position: relative;
    overflow: hidden;
    transition: var(--os-transition-slow);
}

.os-widget::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--os-primary-border), transparent);
}

.os-widget:hover {
    border-color: var(--os-primary-border);
}

.os-widget-sm { padding: var(--os-space-4); }
.os-widget-flat { border-radius: var(--os-radius-sm); }

.os-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--os-space-5);
    gap: var(--os-space-3);
}

.os-widget-label {
    font-size: var(--os-text-2xs);
    font-weight: var(--os-weight-black);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--os-primary);
}

/* Animações de entrada dos widgets */
@keyframes os-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.os-widget { animation: os-fade-up 0.4s ease backwards; }
.os-widget:nth-child(1) { animation-delay: 0.05s; }
.os-widget:nth-child(2) { animation-delay: 0.10s; }
.os-widget:nth-child(3) { animation-delay: 0.15s; }
.os-widget:nth-child(4) { animation-delay: 0.20s; }
.os-widget:nth-child(5) { animation-delay: 0.25s; }

/* ═══════════════════════════════════════════════
   CAMADA 10 — MÉTRICAS
   ═══════════════════════════════════════════════ */
.os-metric-value {
    font-size: 2rem;
    font-weight: var(--os-weight-black);
    color: var(--os-text);
    line-height: 1;
    margin: var(--os-space-2) 0 var(--os-space-1);
    font-family: var(--os-font-mono);
    letter-spacing: -1px;
}

.os-metric-meta {
    display: flex;
    align-items: center;
    gap: var(--os-space-2);
    font-size: var(--os-text-xs);
    color: var(--os-text-muted);
}

.trend-up   { color: var(--os-success); font-weight: var(--os-weight-bold); }
.trend-down { color: var(--os-danger);  font-weight: var(--os-weight-bold); }

/* ═══════════════════════════════════════════════
   CAMADA 11 — BOTÕES
   ═══════════════════════════════════════════════ */
.os-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--os-space-2);
    padding: var(--os-space-2) var(--os-space-4);
    border-radius: var(--os-radius-sm);
    font-family: var(--os-font-sans);
    font-size: var(--os-text-xs);
    font-weight: var(--os-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--os-transition);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.os-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primário */
.os-btn-primary {
    background: var(--os-primary);
    color: var(--os-text-inverse);
    border-color: var(--os-primary);
}
.os-btn-primary:hover {
    background: var(--os-primary-dim);
    border-color: var(--os-primary-dim);
    box-shadow: 0 4px 12px rgba(142, 158, 104, 0.25);
}

/* Outline */
.os-btn-outline {
    background: transparent;
    color: var(--os-text-muted);
    border-color: var(--os-border-strong);
}
.os-btn-outline:hover {
    color: var(--os-text);
    border-color: var(--os-primary-border);
    background: var(--os-primary-glow);
}

/* Ghost */
.os-btn-ghost {
    background: transparent;
    color: var(--os-text-muted);
    border-color: transparent;
}
.os-btn-ghost:hover {
    background: var(--os-primary-glow);
    color: var(--os-text);
}

/* Danger */
.os-btn-danger {
    background: var(--os-danger-bg);
    color: var(--os-danger);
    border-color: var(--os-danger-border);
}
.os-btn-danger:hover {
    background: var(--os-danger);
    color: #fff;
}

/* Success */
.os-btn-success {
    background: var(--os-success-bg);
    color: var(--os-success);
    border-color: var(--os-success-border);
}
.os-btn-success:hover {
    background: var(--os-success);
    color: #fff;
}

/* Tamanhos */
.os-btn-sm { padding: var(--os-space-1) var(--os-space-3); font-size: 0.68rem; }
.os-btn-lg { padding: var(--os-space-3) var(--os-space-6); font-size: var(--os-text-sm); }

/* ═══════════════════════════════════════════════
   CAMADA 12 — FORMULÁRIOS
   ═══════════════════════════════════════════════ */
.os-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--os-space-2);
}

.os-label {
    font-size: var(--os-text-xs);
    font-weight: var(--os-weight-bold);
    color: var(--os-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.os-input,
.os-select,
.os-textarea {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--os-border-strong);
    border-radius: var(--os-radius-sm);
    padding: var(--os-space-3) var(--os-space-4);
    color: var(--os-text);
    font-family: var(--os-font-sans);
    font-size: var(--os-text-sm);
    width: 100%;
    outline: none;
    transition: var(--os-transition);
    appearance: none;
    -webkit-appearance: none;
}

.os-input::placeholder,
.os-textarea::placeholder { color: var(--os-text-dim); }

.os-input:focus,
.os-select:focus,
.os-textarea:focus {
    border-color: var(--os-primary);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 2px var(--os-primary-glow);
}

.os-input:hover,
.os-select:hover,
.os-textarea:hover {
    border-color: var(--os-border-strong);
}

.os-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.os-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b6b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.os-select option { background: #111; color: var(--os-text); }

.os-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--os-space-5);
}

.os-form-grid .span-2 { grid-column: span 2; }

/* Checkbox customizado */
.os-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--os-space-3);
    cursor: pointer;
    font-size: var(--os-text-sm);
    color: var(--os-text);
    font-weight: var(--os-weight-semibold);
    padding: var(--os-space-2) 0;
}

.os-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--os-primary);
    cursor: pointer;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   CAMADA 13 — TABELAS
   ═══════════════════════════════════════════════ */
.os-table-wrapper {
    overflow-x: auto;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--os-border) transparent;
}

.os-table {
    width: 100%;
    border-collapse: collapse;
}

.os-table thead th {
    text-align: left;
    padding: var(--os-space-3) var(--os-space-4);
    border-bottom: 1px solid var(--os-border);
    font-size: var(--os-text-2xs);
    font-weight: var(--os-weight-black);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--os-text-muted);
    white-space: nowrap;
}

.os-table tbody tr {
    border-bottom: 1px solid var(--os-border-subtle);
    transition: background 0.15s;
}

.os-table tbody tr:last-child { border-bottom: none; }

.os-table tbody tr:hover { background: var(--os-primary-glow); }

.os-table tbody td {
    padding: var(--os-space-3) var(--os-space-4);
    font-size: var(--os-text-sm);
    color: var(--os-text-muted);
    vertical-align: middle;
}

.os-table tbody td.cell-primary {
    color: var(--os-text);
    font-weight: var(--os-weight-semibold);
}

.os-table tbody td.cell-mono {
    font-family: var(--os-font-mono);
    font-size: var(--os-text-xs);
}

/* ═══════════════════════════════════════════════
   CAMADA 14 — BADGES / STATUS
   ═══════════════════════════════════════════════ */
.os-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--os-space-1);
    padding: 3px var(--os-space-2);
    border-radius: var(--os-radius-full);
    font-size: 0.68rem;
    font-weight: var(--os-weight-black);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    border: 1px solid;
}

.os-badge-success { background: var(--os-success-bg); color: var(--os-success); border-color: var(--os-success-border); }
.os-badge-warning { background: var(--os-warning-bg); color: var(--os-warning); border-color: var(--os-warning-border); }
.os-badge-danger  { background: var(--os-danger-bg);  color: var(--os-danger);  border-color: var(--os-danger-border); }
.os-badge-info    { background: var(--os-info-bg);    color: var(--os-info);    border-color: var(--os-info-border); }
.os-badge-neutral { background: rgba(255,255,255,0.04); color: var(--os-text-muted); border-color: var(--os-border); }
.os-badge-primary { background: var(--os-primary-glow); color: var(--os-primary); border-color: var(--os-primary-border); }

/* Dot indicator */
.os-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   CAMADA 15 — MODAIS
   ═══════════════════════════════════════════════ */
.os-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--os-space-5);
}

.os-modal {
    background: var(--os-surface-raised);
    border: 1px solid var(--os-border-strong);
    border-radius: var(--os-radius-lg);
    padding: var(--os-space-8);
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--os-shadow-lg);
}

.os-modal-title {
    font-size: var(--os-text-md);
    font-weight: var(--os-weight-black);
    color: var(--os-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--os-space-6);
    padding-bottom: var(--os-space-4);
    border-bottom: 1px solid var(--os-border);
}

.os-modal-close {
    position: absolute;
    top: var(--os-space-5);
    right: var(--os-space-5);
    background: none;
    border: none;
    color: var(--os-text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: var(--os-space-1);
    border-radius: var(--os-radius-sm);
    transition: var(--os-transition);
    display: flex;
    align-items: center;
}
.os-modal-close:hover { color: var(--os-text); background: var(--os-primary-glow); }

.os-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--os-space-3);
    margin-top: var(--os-space-6);
    padding-top: var(--os-space-4);
    border-top: 1px solid var(--os-border);
}

/* ═══════════════════════════════════════════════
   CAMADA 16 — ESTADOS (Loading, Empty, Error)
   ═══════════════════════════════════════════════ */

/* Loading spinner */
.os-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--os-space-10);
    text-align: center;
    gap: var(--os-space-3);
    color: var(--os-text-muted);
}

.os-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--os-border);
    border-top-color: var(--os-primary);
    border-radius: 50%;
    animation: os-spin 0.7s linear infinite;
}

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

.os-state-text {
    font-size: var(--os-text-xs);
    font-weight: var(--os-weight-medium);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--os-text-dim);
}

/* Empty state */
.os-state-icon {
    font-size: 1.5rem;
    opacity: 0.2;
}

/* Error state */
.os-state-error { color: var(--os-danger); }
.os-state-error .os-state-icon { opacity: 0.5; }

/* Skeleton loader */
.os-skeleton {
    background: linear-gradient(
        90deg,
        var(--os-border-subtle) 25%,
        rgba(255,255,255,0.04) 50%,
        var(--os-border-subtle) 75%
    );
    background-size: 200% 100%;
    animation: os-skeleton-shimmer 1.4s infinite;
    border-radius: var(--os-radius-sm);
}

@keyframes os-skeleton-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

.os-skeleton-line { height: 14px; margin-bottom: var(--os-space-2); }
.os-skeleton-line:last-child { width: 60%; }

/* ═══════════════════════════════════════════════
   CAMADA 17 — TOAST
   ═══════════════════════════════════════════════ */
.os-toast-container {
    position: fixed;
    top: var(--os-space-5);
    right: var(--os-space-5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--os-space-2);
    pointer-events: none;
}

.os-toast {
    background: var(--os-surface-raised);
    border: 1px solid var(--os-border);
    border-left: 2px solid var(--os-primary);
    border-radius: var(--os-radius-sm);
    padding: var(--os-space-3) var(--os-space-4);
    display: flex;
    align-items: center;
    gap: var(--os-space-3);
    min-width: 280px;
    max-width: 380px;
    box-shadow: var(--os-shadow-md);
    animation: os-toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: all;
}

.os-toast-success { border-left-color: var(--os-success); }
.os-toast-warning { border-left-color: var(--os-warning); }
.os-toast-danger  { border-left-color: var(--os-danger); }

.os-toast-title   { font-size: var(--os-text-sm); font-weight: var(--os-weight-semibold); color: var(--os-text); margin-bottom: 2px; }
.os-toast-message { font-size: var(--os-text-xs); color: var(--os-text-muted); line-height: 1.4; }

@keyframes os-toast-in {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ═══════════════════════════════════════════════
   CAMADA 18 — LOG / FEED DE ATIVIDADE
   ═══════════════════════════════════════════════ */
.os-log-entry {
    display: flex;
    gap: var(--os-space-3);
    padding: var(--os-space-2) 0;
    border-bottom: 1px solid var(--os-border-subtle);
    font-size: var(--os-text-xs);
}

.os-log-entry:last-child { border-bottom: none; }
.os-log-time   { color: var(--os-primary); font-family: var(--os-font-mono); opacity: 0.7; white-space: nowrap; }
.os-log-actor  { font-weight: var(--os-weight-bold); color: var(--os-text); white-space: nowrap; }
.os-log-msg    { color: var(--os-text-muted); }

/* ═══════════════════════════════════════════════
   CAMADA 19 — SEÇÕES ONBOARDING
   ═══════════════════════════════════════════════ */
.os-section-block {
    background: var(--os-surface);
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-lg);
    padding: var(--os-space-8);
    margin-top: var(--os-space-6);
}

.os-section-title {
    font-size: var(--os-text-xs);
    font-weight: var(--os-weight-black);
    color: var(--os-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--os-space-5);
    padding-bottom: var(--os-space-4);
    border-bottom: 1px solid var(--os-border);
}

.os-service-box {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--os-border-subtle);
    border-radius: var(--os-radius-md);
    padding: var(--os-space-5);
    margin-bottom: var(--os-space-3);
}

.os-service-box.accent { border-left: 2px solid var(--os-primary); }

/* ═══════════════════════════════════════════════
   CAMADA 20 — ALERTAS INLINE
   ═══════════════════════════════════════════════ */
.os-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--os-space-3);
    padding: var(--os-space-4);
    border-radius: var(--os-radius-md);
    font-size: var(--os-text-sm);
    border: 1px solid;
    margin-bottom: var(--os-space-4);
}

.os-alert i { margin-top: 2px; flex-shrink: 0; }
.os-alert-success { background: var(--os-success-bg); border-color: var(--os-success-border); color: var(--os-success); }
.os-alert-warning { background: var(--os-warning-bg); border-color: var(--os-warning-border); color: var(--os-warning); }
.os-alert-danger  { background: var(--os-danger-bg);  border-color: var(--os-danger-border);  color: var(--os-danger); }
.os-alert-info    { background: var(--os-info-bg);    border-color: var(--os-info-border);    color: var(--os-info); }

/* ═══════════════════════════════════════════════
   CAMADA 21 — RESPONSIVIDADE
   ═══════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .os-widget-grid { gap: var(--os-space-4); }
}

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

    .os-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: var(--os-sidebar-w);
        transform: translateX(-100%);
        box-shadow: var(--os-shadow-lg);
        z-index: 300;
    }

    .os-sidebar.active { transform: translateX(0); }

    .os-sidebar-header { justify-content: space-between; }
    .os-menu-close  { display: flex !important; }
    .os-menu-toggle { display: block; }
    .os-topbar { padding: 0 var(--os-space-5); }
    .os-viewport { padding: var(--os-space-6); }

    .os-widget-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 600px) {
    .os-widget-grid { grid-template-columns: 1fr; gap: var(--os-space-3); }
    .os-page-title h1 { font-size: var(--os-text-lg); }
    .os-form-grid { grid-template-columns: 1fr; }
    .os-form-grid .span-2 { grid-column: span 1; }
    .os-viewport { padding: var(--os-space-4); }
    .os-topbar { padding: 0 var(--os-space-4); }
}