/* ============================================================================
   NC HUB — Design System v2 (nchub-ui.css)
   Baseado no branding oficial (system-design.md + mockups).
   Fonte: Geist (self-hosted). Tema: light default + dark via [data-theme="dark"].
   Carregado PELAS páginas migradas (substitui nchub.css nelas). Aditivo — não
   afeta as páginas ainda no design antigo.
   ============================================================================ */

/* ---- Geist (self-hosted, OFL) ---- */
@font-face { font-family:'Geist'; font-weight:400; font-style:normal; font-display:swap; src:url('/geist-400.woff2') format('woff2'); }
/* ---- JetBrains Mono (self-hosted, OFL) — LOW-19 ---- */
@font-face { font-family:'JetBrains Mono'; font-weight:400; font-style:normal; font-display:swap; src:url('/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:500; font-style:normal; font-display:swap; src:url('/geist-500.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:600; font-style:normal; font-display:swap; src:url('/geist-600.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:700; font-style:normal; font-display:swap; src:url('/geist-700.woff2') format('woff2'); }

:root {
  --primary:#2563EB; --primary-dark:#1E40AF;
  --secondary:#0F172A; --background:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9;
  --border:#E2E8F0; --border-strong:#CBD5E1;
  --success:#16A34A; --warning:#F59E0B; --danger:#DC2626; --info:#0284C7;
  --backup:#2563EB; --cbpolicyd:#10B981; --fail2ban:#8B5CF6;
  --shared:#F97316; --storage:#0EA5E9; --volumes:#14B8A6;
  --logs:#64748B; --monitoring:#22C55E;
  --text-primary:#0F172A; --text-secondary:#475569; --text-muted:#94A3B8; --text-faint:#CBD5E1;
  --sidebar-width:220px; --topbar-height:50px;
  --radius:8px; --radius-sm:6px; --radius-xs:4px;
  --transition:140ms cubic-bezier(.4,0,.2,1);
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow:0 1px 3px rgba(15,23,42,.05);
  --shadow-lg:0 8px 24px rgba(15,23,42,.10);
}

/* Dark — paleta COMPLETA (o mockup só trocava 5 vars) */
[data-theme="dark"] {
  --background:#0B1120; --surface:#111827; --surface-2:#1F2937;
  --border:#1F2937; --border-strong:#374151;
  --text-primary:#E5E7EB; --text-secondary:#9CA3AF; --text-muted:#6B7280; --text-faint:#4B5563;
  --shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --shadow:0 1px 3px rgba(0,0,0,.40);
  --shadow-lg:0 8px 24px rgba(0,0,0,.55);
  --info:#38BDF8;
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:12.5px; line-height:1.45;
  color:var(--text-primary); background:var(--background);
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.mono { font-family:'JetBrains Mono',ui-monospace,monospace; }

.app {
  display:grid;
  grid-template-columns:var(--sidebar-width) 1fr;
  grid-template-rows:var(--topbar-height) 1fr;
  grid-template-areas:"sidebar topbar" "sidebar main";
  height:100vh;
}

/* ---- SIDEBAR (sempre dark, independe do tema) ---- */
.sidebar { grid-area:sidebar; background:var(--secondary); color:#E5E7EB; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.sidebar__brand { display:flex; align-items:center; gap:9px; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.05); flex-shrink:0; }
.sidebar__title { font-size:14px; font-weight:600; letter-spacing:-.02em; color:#fff; }
.sidebar__title span { color:var(--primary); }
.sidebar__version { font-size:9px; font-weight:500; color:rgba(255,255,255,.3); margin-left:auto; text-transform:uppercase; letter-spacing:.1em; font-family:'JetBrains Mono',monospace; }
.sidebar__nav { padding:8px 10px; flex:1; overflow-y:auto; }
.sidebar__nav::-webkit-scrollbar { width:3px; }
.sidebar__nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:2px; }
.sidebar__group { font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.3); padding:10px 8px 4px; }
.sidebar__group:first-child { padding-top:0; }
.sidebar__item { position:relative; display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:6px; color:rgba(255,255,255,.6); font-size:12px; font-weight:500; cursor:pointer; transition:all var(--transition); margin-bottom:1px; }
.sidebar__item:hover { background:rgba(255,255,255,.04); color:#fff; }
.sidebar__item.is-active { background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(37,99,235,.04)); color:#fff; box-shadow:inset 0 0 0 1px rgba(37,99,235,.3); }
.sidebar__item.is-active::before { content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%); width:2px; height:12px; background:var(--primary); border-radius:0 2px 2px 0; }
.sidebar__icon { width:14px; height:14px; flex-shrink:0; color:rgba(255,255,255,.4); }
.sidebar__item:hover .sidebar__icon { color:rgba(255,255,255,.7); }
.sidebar__item.is-active .sidebar__icon { color:var(--primary); }
.sidebar__footer { border-top:1px solid rgba(255,255,255,.05); padding:6px; flex-shrink:0; }
.sidebar__user { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; }
.sidebar__user:hover { background:rgba(255,255,255,.04); }
.sidebar__avatar { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#6366F1,#2563EB); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:10px; flex-shrink:0; }
.sidebar__user-info { flex:1; min-width:0; }
.sidebar__user-name { font-size:11.5px; font-weight:500; color:#fff; line-height:1.2; }
.sidebar__user-role { font-size:10px; color:rgba(255,255,255,.4); line-height:1.2; }

/* ---- TOPBAR (glassmorphism) ---- */
.topbar { grid-area:topbar; background:color-mix(in srgb,var(--surface) 75%,transparent); backdrop-filter:blur(12px) saturate(180%); -webkit-backdrop-filter:blur(12px) saturate(180%); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 14px; gap:10px; position:relative; z-index:10; }
.topbar__breadcrumb { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted); }
.topbar__breadcrumb i { width:13px; height:13px; }
.topbar__breadcrumb .current { color:var(--text-primary); font-weight:500; }
.topbar__spacer { flex:1; }
.topbar__status { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-muted); font-family:'JetBrains Mono',monospace; }
.topbar__actions { display:flex; align-items:center; gap:1px; }
.topbar__icon-btn { width:28px; height:28px; border-radius:6px; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; transition:all var(--transition); position:relative; }
.topbar__icon-btn:hover { background:var(--background); color:var(--text-primary); }
.topbar__icon-btn i { width:15px; height:15px; }

/* ---- MAIN ---- */
.main { grid-area:main; overflow-y:auto; padding:14px 16px 24px; }

/* display:flex fica na classe (não inline) porque x-show alterna o
   display inline do elemento — se display:flex estivesse só no style="",
   Alpine perderia a propriedade após o primeiro hide/show e o painel
   caía pra display:block, quebrando o layout em coluna (input some). */
.chat-panel { display:flex; flex-direction:column; }
.chat-quick-actions { display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0; }
.chat-image-preview-row { display:flex; align-items:center; gap:8px; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.page-header__title { font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1.2; display:flex; align-items:center; gap:6px; }
.page-header__title .tag { font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; padding:1px 5px; background:var(--background); border:1px solid var(--border); border-radius:3px; color:var(--text-muted); font-family:'JetBrains Mono',monospace; }
.page-header__subtitle { font-size:11px; color:var(--text-muted); margin-top:2px; display:flex; align-items:center; gap:5px; }
.page-header__subtitle .dot { width:5px; height:5px; border-radius:50%; background:var(--success); }
.page-header__actions { display:flex; align-items:center; gap:4px; }

/* ---- BUTTONS ---- */
.btn { display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 9px; border-radius:5px; font-size:11.5px; font-weight:500; transition:all var(--transition); white-space:nowrap; border:1px solid transparent; }
.btn i { width:12px; height:12px; }
.btn--primary { background:linear-gradient(180deg,var(--primary),var(--primary-dark)); color:#fff; box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.1); }
.btn--primary:hover { box-shadow:0 0 0 1px rgba(37,99,235,.15),0 4px 12px rgba(37,99,235,.18); }
.btn--ghost { background:transparent; color:var(--text-secondary); }
.btn--ghost:hover { background:var(--background); color:var(--text-primary); }
.btn--outline { background:var(--surface); color:var(--text-primary); border-color:var(--border); }
.btn--outline:hover { border-color:var(--text-muted); }
.btn--sm { height:22px; padding:0 7px; font-size:11px; }

/* ---- METRICS ---- */
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.metric { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:9px 12px; box-shadow:var(--shadow-sm); transition:all var(--transition); display:flex; align-items:center; gap:10px; }
.metric:hover { border-color:var(--border-strong); }
.metric__icon { width:26px; height:26px; border-radius:6px; background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.metric__icon i { width:13px; height:13px; }
.metric__body { flex:1; min-width:0; }
.metric__label { font-size:10px; font-weight:500; color:var(--text-muted); letter-spacing:.04em; text-transform:uppercase; line-height:1.1; }
.metric__value-row { display:flex; align-items:baseline; gap:5px; margin-top:2px; }
.metric__value { font-size:17px; font-weight:600; letter-spacing:-.02em; line-height:1; }
.metric__value .unit { font-size:10px; font-weight:500; color:var(--text-muted); font-family:'JetBrains Mono',monospace; }
.metric__bar { height:4px; background:var(--surface-2); border-radius:2px; overflow:hidden; margin-top:6px; }
.metric__bar > span { display:block; height:100%; background:var(--accent); border-radius:2px; transition:width var(--transition); }
.metric--primary { --accent:var(--primary); } .metric--success { --accent:var(--success); }
.metric--info { --accent:var(--info); } .metric--warning { --accent:var(--warning); }
.metric--storage { --accent:var(--storage); }
@media (max-width:1280px){ .metrics{ grid-template-columns:repeat(2,1fr); } }

/* ---- SECTION HEADER ---- */
.section-header { display:flex; align-items:center; justify-content:space-between; margin:14px 0 6px; }
.section-header__title { font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; gap:8px; }
.section-header__actions { display:flex; gap:3px; }

/* ---- CARDS ---- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
@media (max-width:1100px){ .grid-2{ grid-template-columns:1fr; } }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card__header { padding:8px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.card__title { font-size:11.5px; font-weight:600; display:flex; align-items:center; gap:6px; }
.card__title .accent { width:2px; height:10px; background:var(--primary); border-radius:2px; }
.card__subtitle { font-size:10px; color:var(--text-muted); margin-top:1px; }
.card__body { padding:12px; }
.card__body--chart { height:190px; }
.card__body--flush { padding:0; }

/* ---- TABLE ---- */
.tbl { width:100%; border-collapse:collapse; font-size:11.5px; }
.tbl thead th { text-align:left; font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); padding:7px 12px; border-bottom:1px solid var(--border); }
.tbl tbody td { padding:7px 12px; border-bottom:1px solid var(--border); color:var(--text-primary); }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl tbody tr:hover { background:var(--surface-2); }
.num { font-family:'JetBrains Mono',monospace; text-align:right; }

/* ---- STATUS DOTS / PILLS ---- */
.dot { width:6px; height:6px; border-radius:50%; background:var(--text-faint); flex-shrink:0; display:inline-block; }
.dot--ok { background:var(--success); box-shadow:0 0 0 2px color-mix(in srgb,var(--success) 15%,transparent); }
.dot--warn { background:var(--warning); }
.dot--down { background:var(--danger); }
.pill { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text-secondary); }

/* ---- SERVICES ---- */
.services { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:6px; padding:12px; }
.service { display:flex; align-items:center; gap:7px; padding:7px 9px; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; font-size:11.5px; }
.service__name { font-weight:500; color:var(--text-primary); }
.service__meta { margin-left:auto; font-size:10px; color:var(--text-muted); font-family:'JetBrains Mono',monospace; }

/* ---- THEME TOGGLE ---- */
.theme-toggle .sun { display:none; } .theme-toggle .moon { display:inline-flex; }
[data-theme="dark"] .theme-toggle .sun { display:inline-flex; }
[data-theme="dark"] .theme-toggle .moon { display:none; }
.sidebar__version-foot { text-align:center; padding:8px 6px 4px; margin-top:4px; color:rgba(255,255,255,.35); font-size:10px; font-family:'JetBrains Mono',monospace; border-top:1px solid rgba(255,255,255,.05); }
.sidebar__foot-row { display:flex; gap:6px; padding:2px 2px 8px; }
.sidebar__foot-btn { flex:0 0 auto; width:32px; height:28px; border-radius:6px; color:rgba(255,255,255,.6); display:inline-flex; align-items:center; justify-content:center; }
.sidebar__foot-btn:hover { background:rgba(255,255,255,.06); color:#fff; }
.sidebar__foot-btn i { width:15px; height:15px; }
.sidebar__foot-lang { flex:1; height:28px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.08); border-radius:6px; font-size:11px; padding:0 6px; }

/* topbar antigo (compat — páginas migradas mantêm o topbar de contexto) */
.topbar-host,.topbar-status { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
.topbar-status { color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:11px; }
.topbar-spacer { flex:1; }
.topbar-actions { display:flex; align-items:center; gap:2px; }
.topbar-icon-btn { width:28px; height:28px; border-radius:6px; color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; }
.topbar-icon-btn:hover { background:var(--surface-2); color:var(--text-primary); }

/* ============================================================================
   COMPAT — variáveis + classes do design ANTIGO (nchub.css) mapeadas pro tema
   novo. Permite migrar cada página trocando só o SHELL: o conteúdo (classes
   antigas + inline styles que usam --bg-tertiary/--accent) já adota o tema novo
   e o dark. Depois refina módulo a módulo pra tokens nativos.
   ============================================================================ */
:root {
  --bg-primary:var(--background); --bg-secondary:var(--surface); --bg-tertiary:var(--surface-2);
  --bg-overlay:color-mix(in srgb,var(--background) 85%,transparent);
  --border-default:var(--border); --border-muted:var(--border);
  --text-inverse:#fff;
  --accent:var(--primary); --accent-hover:var(--primary-dark); --accent-muted:color-mix(in srgb,var(--primary) 12%,transparent);
  --success-muted:color-mix(in srgb,var(--success) 12%,transparent);
  --warning-muted:color-mix(in srgb,var(--warning) 12%,transparent);
  --danger-muted:color-mix(in srgb,var(--danger) 12%,transparent);
  --info-muted:color-mix(in srgb,var(--info) 12%,transparent);
  --font-sans:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --radius-md:8px; --radius-lg:8px; --radius-xl:12px;
}

/* layout antigo (shell/content) — caso alguma página ainda não tenha o app grid */
.shell { display:grid; grid-template-columns:var(--sidebar-width) 1fr; min-height:100vh; }
.shell .content, .content { padding:14px 16px 24px; overflow-y:auto; }
.shell > .topbar { grid-column:2; }

/* botões antigos */
.btn-primary { background:linear-gradient(180deg,var(--primary),var(--primary-dark)); color:#fff; box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.1); }
.btn-secondary { background:var(--surface); color:var(--text-primary); border-color:var(--border); }
.btn-secondary:hover { border-color:var(--text-muted); }
.btn-ghost { background:transparent; color:var(--text-secondary); }
.btn-ghost:hover { background:var(--surface-2); color:var(--text-primary); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-warning { background:var(--warning); color:#fff; }
.btn-warning:hover { filter:brightness(.95); }
.btn-sm { height:22px; padding:0 8px; font-size:11px; }
.btn-lg { height:32px; padding:0 14px; font-size:13px; }

/* cards antigos */
.card-header { padding:9px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card-body { padding:12px; }
.card-title { font-size:12px; font-weight:600; color:var(--text-primary); }
.card-subtitle, .card-description { font-size:10.5px; color:var(--text-muted); margin-top:1px; }

/* forms antigos + inputs base */
.form-group { margin-bottom:10px; }
.form-label, label { display:block; font-size:11px; font-weight:500; color:var(--text-secondary); margin-bottom:4px; }
.form-hint { font-size:10px; color:var(--text-muted); margin-top:3px; }
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea {
  background:var(--surface); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:6px 9px; font-family:inherit; font-size:12px; transition:all var(--transition);
}
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent); }
input::placeholder,textarea::placeholder { color:var(--text-muted); }

/* tabelas antigas */
.table { width:100%; border-collapse:collapse; font-size:11.5px; }
.table thead th { text-align:left; font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); padding:7px 12px; border-bottom:1px solid var(--border); }
.table tbody td { padding:7px 12px; border-bottom:1px solid var(--border); color:var(--text-primary); }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr:hover { background:var(--surface-2); }
.table-hover tbody tr:hover { background:var(--surface-2); }

/* status / pills / dots antigos */
.status-pill { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text-secondary); }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--text-faint); display:inline-block; flex-shrink:0; }
.status-dot.running,.status-dot.ok { background:var(--success); box-shadow:0 0 0 2px color-mix(in srgb,var(--success) 15%,transparent); }
.status-dot.warning { background:var(--warning); }
.status-dot.down,.status-dot.error { background:var(--danger); }

/* alerts antigos */
.alert { padding:9px 12px; border-radius:var(--radius-sm); font-size:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-primary); }
.alert-danger,.text-danger { color:var(--danger); }
.alert-success,.text-success { color:var(--success); }
.alert-warning,.text-warning { color:var(--warning); }
.alert-info,.text-info { color:var(--info); }
.text-secondary { color:var(--text-secondary); }

/* tabs antigas */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.tab { padding:8px 12px; font-size:12px; color:var(--text-secondary); border:none; border-bottom:2px solid transparent; background:none; cursor:pointer; }
.tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }

/* stats antigos */
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; display:flex; flex-direction:column; gap:2px; box-shadow:var(--shadow-sm); }
.stat-label { font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.stat-value { font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--text-primary); }
.stat-trend { font-size:10px; color:var(--text-muted); }

/* grids / clusters / stacks antigos */
.grid { display:grid; gap:10px; } .grid-2 { grid-template-columns:1fr 1fr; } .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .grid-4{ grid-template-columns:repeat(2,1fr);} .grid-3,.grid-2{ grid-template-columns:1fr;} }
.cluster { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.stack-4 { display:flex; flex-direction:column; gap:4px; }

/* page headers antigos */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.page-title { font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--text-primary); }
.page-subtitle { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* empty state antigo */
.empty { text-align:center; padding:24px; color:var(--text-muted); }
.empty-title { font-size:13px; font-weight:500; color:var(--text-secondary); }

/* ============================================================================
   COMPONENTES DOS MOCKUPS (design v2) — reutilizados na migração de conteúdo
   ============================================================================ */
.alert { display:flex; align-items:flex-start; gap:8px; }
.alert i, .alert svg { width:14px; height:14px; flex-shrink:0; margin-top:1px; }
.alert code { font-size:10.5px; padding:0 3px; background:color-mix(in srgb,var(--text-primary) 8%,transparent); border-radius:2px; }
.alert--warning { background:color-mix(in srgb,var(--warning) 10%,transparent); color:color-mix(in srgb,var(--warning) 82%,var(--text-primary)); border:1px solid color-mix(in srgb,var(--warning) 30%,transparent); }
.alert--info    { background:color-mix(in srgb,var(--info) 10%,transparent);    color:color-mix(in srgb,var(--info) 82%,var(--text-primary));    border:1px solid color-mix(in srgb,var(--info) 30%,transparent); }
.alert--success { background:color-mix(in srgb,var(--success) 10%,transparent); color:color-mix(in srgb,var(--success) 82%,var(--text-primary)); border:1px solid color-mix(in srgb,var(--success) 30%,transparent); }
.alert--danger  { background:color-mix(in srgb,var(--danger) 10%,transparent);  color:color-mix(in srgb,var(--danger) 82%,var(--text-primary));  border:1px solid color-mix(in srgb,var(--danger) 30%,transparent); }
.btn--danger { background:var(--surface); color:var(--danger); border-color:var(--border); }
.btn--danger:hover { background:color-mix(in srgb,var(--danger) 8%,var(--surface)); }
.topbar__pill, .pill-badge { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--text-muted); padding:0 8px; height:22px; background:var(--background); border:1px solid var(--border); border-radius:5px; font-family:'JetBrains Mono',monospace; }
.topbar__pill .dot, .pill-badge .dot { width:5px; height:5px; }
.rights-row { display:flex; gap:6px; flex-wrap:wrap; }
.right-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; background:var(--background); border:1px solid var(--border); border-radius:5px; font-size:11px; cursor:pointer; transition:all var(--transition); }
.right-chip input { margin:0; width:auto; }
.right-chip.is-on { background:color-mix(in srgb,var(--primary) 10%,var(--surface)); border-color:var(--primary); color:var(--primary); }
.empty__icon { display:block; margin:0 auto 6px; opacity:.4; }
.empty__title { font-size:12px; font-weight:500; color:var(--text-secondary); margin-bottom:2px; }
.empty__text { font-size:11px; color:var(--text-muted); }
.table .r, .tbl .r, .table th.r, .table td.r { text-align:right; }
.table .name, .tbl .name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.split { display:grid; grid-template-columns:1fr 1.2fr; gap:12px; }
.split-1-2 { display:grid; grid-template-columns:1fr 2fr; gap:12px; }
@media (max-width:1100px){ .split,.split-1-2{ grid-template-columns:1fr; } }

/* ============================================================================
   COMPONENTES v3 — segmented control, presets, switch, status chip,
   dropzone de imagem, cards de problema (módulo Diagnose v2, reutilizáveis
   por outros módulos que precisarem do mesmo padrão)
   ============================================================================ */
.segmented { display:inline-flex; padding:3px; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; gap:2px; }
.segmented__btn { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:6px; font-size:12px; font-weight:500; color:var(--text-secondary); transition:all var(--transition); }
.segmented__btn i { width:13px; height:13px; }
.segmented__btn.is-active { background:var(--surface); color:var(--text-primary); box-shadow:var(--shadow-sm); }
.segmented__btn:not(.is-active):hover { color:var(--text-primary); }

.preset-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:900px){ .preset-grid{ grid-template-columns:repeat(2,1fr); } }
.preset-card { border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; cursor:pointer; transition:all var(--transition); position:relative; background:var(--surface); }
.preset-card:hover { border-color:var(--border-strong); }
.preset-card.is-selected { border-color:var(--primary); background:color-mix(in srgb,var(--primary) 6%,var(--surface)); }
.preset-card.is-selected::after { content:''; position:absolute; top:8px; right:8px; width:15px; height:15px; border-radius:50%; background:var(--primary); }
.preset-card.is-selected::before { content:''; position:absolute; top:12.5px; right:12.5px; width:6px; height:3px; border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:rotate(-45deg); z-index:1; }
.preset-card__name { font-size:12px; font-weight:600; margin-bottom:1px; }
.preset-card__meta { font-size:10px; color:var(--text-muted); }

.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; gap:16px; }
.toggle-row__label { font-size:12px; font-weight:500; }
.toggle-row__hint { font-size:10.5px; color:var(--text-muted); margin-top:2px; max-width:420px; }
.switch { width:34px; height:19px; border-radius:99px; background:var(--border-strong); position:relative; flex-shrink:0; transition:background var(--transition); cursor:pointer; }
.switch.is-on { background:var(--primary); }
.switch::after { content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left var(--transition); }
.switch.is-on::after { left:17px; }

.status-chip { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:99px; white-space:nowrap; }
.status-chip i { width:11px; height:11px; }
.status-chip--ok { background:color-mix(in srgb,var(--success) 14%,transparent); color:var(--success); }
.status-chip--fail { background:color-mix(in srgb,var(--danger) 12%,transparent); color:var(--danger); }
.status-chip--untested { background:var(--surface-2); color:var(--text-muted); }

.input-icon-wrap { position:relative; }
.input-icon-wrap input { padding-right:36px; }
.input-icon-btn { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:5px; color:var(--text-muted); }
.input-icon-btn:hover { background:var(--surface-2); color:var(--text-primary); }
.input-icon-btn i { width:15px; height:15px; }

.icon-btn { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
.icon-btn:hover { background:var(--surface-2); color:var(--text-primary); }
.icon-btn i { width:14px; height:14px; }
.icon-btn--danger:hover { color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,transparent); }

.provider-row { display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; background:var(--surface); transition:border-color var(--transition); }
.provider-row:hover { border-color:var(--border-strong); }
.provider-row__icon { width:34px; height:34px; border-radius:8px; background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.provider-row__icon i { width:17px; height:17px; }
.provider-row__body { flex:1; min-width:0; }
.provider-row__name { font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.provider-row__meta { font-size:10.5px; color:var(--text-muted); margin-top:2px; font-family:'JetBrains Mono',monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.provider-row__actions { display:flex; gap:4px; flex-shrink:0; }

.composer-textarea { min-height:150px; resize:vertical; line-height:1.6; }
.dropzone { border:1.5px dashed var(--border-strong); border-radius:var(--radius-sm); padding:18px; text-align:center; transition:all var(--transition); background:var(--surface-2); cursor:pointer; }
.dropzone:hover { border-color:var(--primary); background:color-mix(in srgb,var(--primary) 4%,var(--surface-2)); }
.dropzone i { width:22px; height:22px; color:var(--text-muted); margin:0 auto 6px; display:block; }
.dropzone__title { font-size:12px; font-weight:600; color:var(--text-secondary); }
.dropzone__hint { font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.attach-preview { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); }
.attach-preview__thumb { width:44px; height:44px; border-radius:6px; overflow:hidden; flex-shrink:0; border:1px solid var(--border); background:var(--surface); }
.attach-preview__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.attach-preview__body { flex:1; min-width:0; }
.attach-preview__name { font-size:11.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attach-preview__meta { font-size:10px; color:var(--text-muted); }

.problem-card { border:1px solid var(--border); border-left:3px solid var(--border-strong); border-radius:var(--radius-sm); margin-bottom:10px; overflow:hidden; }
.problem-card--alta { border-left-color:var(--danger); }
.problem-card--media { border-left-color:var(--warning); }
.problem-card--baixa { border-left-color:var(--info); }
.problem-card__head { padding:11px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface-2); flex-wrap:wrap; }
.problem-card__title { font-size:12.5px; font-weight:600; }
.problem-card__body { padding:13px 14px; }
.problem-card__row { margin-bottom:9px; }
.problem-card__row:last-child { margin-bottom:0; }
.problem-card__label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:3px; }
.problem-card__text { font-size:12px; line-height:1.6; }
.sev-badge { display:inline-flex; align-items:center; font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px; text-transform:uppercase; letter-spacing:.03em; }
.sev-badge--alta { background:color-mix(in srgb,var(--danger) 14%,transparent); color:var(--danger); }
.sev-badge--media { background:color-mix(in srgb,var(--warning) 16%,transparent); color:color-mix(in srgb,var(--warning) 80%,var(--text-primary)); }
.sev-badge--baixa { background:color-mix(in srgb,var(--info) 14%,transparent); color:var(--info); }
.conf-badge { display:inline-flex; align-items:center; font-size:10px; font-weight:600; padding:3px 8px; border-radius:5px; background:var(--surface-2); color:var(--text-secondary); border:1px solid var(--border); }