/* Estilos do OpPack OS. Extraidos do index.html em 19/09/2026, sem alteracao visual. */

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: var(--bg-canvas);
      background-image: 
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
      background-size: 24px 24px;
      color: var(--ink);
      font-family: var(--fonte-texto);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 20px 80px 20px;
      -webkit-font-smoothing: antialiased;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .app-viewport {
      width: 100%;
      max-width: 1440px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* CABEÇALHO SUPERIOR (Com Símbolo Random, Código de Barras e Theme Toggle) */
    .top-header-box {
      background: var(--card-bg);
      border: var(--border-ink);
      box-shadow: var(--shadow-ink);
      padding: 18px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .random-symbol-wrap {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      transition: transform 0.18s ease, filter 0.2s ease;
    }

    .random-symbol-wrap:hover {
      transform: scale(1.08);
    }

    .header-main-title {
      cursor: pointer;
      user-select: none;
      transition: opacity 0.15s ease;
    }

    .header-main-title:hover {
      opacity: 0.85;
    }

    .header-subtitle {
      cursor: pointer;
      user-select: none;
    }

    .random-symbol-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: var(--logo-filter);
      transition: filter 0.2s ease;
    }

    .header-text-group {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .header-sys-version {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      color: var(--ink);
      background: var(--card-inner);
      border: var(--border-thin);
      padding: 3px 8px;
      width: fit-content;
      margin-bottom: 3px;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
    }
    .header-sys-version:hover {
      border-color: #10b981;
      background: rgba(16, 185, 129, 0.06);
    }
    .sys-live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 8px #10b981;
      animation: sysPulse 1.2s infinite ease-in-out;
      display: inline-block;
      flex-shrink: 0;
    }
    @keyframes sysPulse {
      0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px #10b981; }
      50% { opacity: 0.35; transform: scale(0.75); box-shadow: 0 0 2px #10b981; }
    }
    .sys-ver-title {
      font-weight: 800;
      color: var(--ink);
      letter-spacing: 0.05em;
    }
    .sys-live-clock {
      color: #10b981;
      font-weight: 700;
    }
    .sys-pill-sep {
      color: var(--ink-dim);
      opacity: 0.5;
    }
    .sys-commit-tag {
      color: var(--ink-dim);
      font-size: 12px;
      background: rgba(125, 125, 125, 0.1);
      border: 1px solid var(--border-thin);
      padding: 0 4px;
    }

    .header-main-title {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: -0.03em;
      color: var(--ink);
      line-height: 1.1;
      text-transform: none;
    }

    .header-subtitle {
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      color: var(--ink-dim);
      letter-spacing: 0.08em;
      text-transform: none;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }

    /* Código de Barras Industrial SVG */
    .barcode-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .barcode-svg {
      width: 130px;
      height: 34px;
    }

    .barcode-label {
      font-family: var(--fonte-texto);
      font-size: 12px;
      letter-spacing: 0.12em;
      color: var(--ink-dim);
    }

    /* Theme Toggle Switch */
    .theme-toggle-btn {
      background: transparent;
      border: var(--border-ink);
      color: var(--ink);
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      font-weight: 700;
      padding: 0 10px;
      height: 32px;
      box-sizing: border-box;
      white-space: nowrap;
      cursor: pointer;
      text-transform: none;
      letter-spacing: 0.04em;
      box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
      transition: all 0.15s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .theme-toggle-btn:hover {
      background: var(--btn-hover-bg);
      color: var(--btn-hover-ink);
    }

    /* VISÃO GERAL: Grid de Cards de Clientes (Cada card com seu repositório) */
    .fleet-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      transition: all 0.25s ease;
    }

    .fleet-card {
      background: var(--card-bg);
      border: var(--border-ink);
      box-shadow: var(--shadow-ink);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      cursor: pointer;
      transition: all 0.15s ease;
      position: relative;
    }

    .fleet-card:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
    }

    .fleet-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: var(--border-thin);
      padding-bottom: 8px;
    }

    .fleet-card-title {
      font-size: 13px;
      font-weight: 800;
      text-transform: none;
      line-height: 1.25;
      color: var(--ink);
    }

    .fleet-card-id {
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--ink-dim);
      text-align: right;
    }

    .status-stamp {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-family: var(--fonte-texto);
      font-size: 12px;
      font-weight: 700;
      padding: 1px 4px;
      border: var(--border-thin);
      text-transform: none;
      margin-top: 2px;
    }

    .status-stamp.online {
      background: var(--ink);
      color: var(--card-bg);
    }

    /* Faixa de Repositório Específica do Card */
    .card-repo-strip {
      background: var(--card-inner);
      border: var(--border-thin);
      padding: 4px 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--fonte-texto);
      font-size: 12px;
      font-weight: 700;
      color: var(--ink-dim);
      gap: 8px;
    }

    .card-repo-name {
      color: var(--ink);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
      min-width: 0;
    }

    /* O selo e o botão de copiar não podem ser espremidos pelo nome do repositório:
       o nome encolhe, eles ficam inteiros. */
    .card-repo-actions {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex: none;
      flex-shrink: 0;
    }

    .card-repo-actions .badge-repo-status,
    .card-repo-actions .btn-card-copy-repo {
      flex: none;
      white-space: nowrap;
    }

    .card-workers-strip {
      background: var(--card-inner);
      border: var(--border-thin);
      padding: 3px 6px;
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      overflow: hidden;
      white-space: nowrap;
    }
    .card-workers-team {
      color: var(--ink);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11.5px;
      opacity: 0.85;
    }

    .card-skills-strip {
      background: var(--card-inner);
      border: var(--border-thin);
      padding: 3px 6px;
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      overflow: hidden;
      white-space: nowrap;
    }
    .card-skills-list {
      display: flex;
      gap: 4px;
      align-items: center;
      overflow-x: auto;
      max-width: 100%;
    }
    .card-skill-badge {
      background: rgba(56, 189, 248, 0.12);
      border: 1px solid rgba(56, 189, 248, 0.4);
      color: #38bdf8;
      font-size: 11px;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 2px;
      white-space: nowrap;
      letter-spacing: 0.02em;
    }
    .card-skill-badge.badge-4d {
      background: rgba(168, 85, 247, 0.15);
      border-color: rgba(168, 85, 247, 0.5);
      color: #c084fc;
    }

    .btn-card-connect {
      background: transparent;
      border: 1px solid var(--ink);
      color: var(--ink);
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      font-weight: 700;
      padding: 2px 4px;
      cursor: pointer;
      text-transform: none;
    }

    .btn-card-connect:hover {
      background: var(--ink);
      color: var(--card-bg);
    }

    /* Gráfico Técnico no Card & Cadência 7 Dias */
    .technical-mini-graph-box {
      border: var(--border-thin);
      background: var(--card-inner);
      padding: 6px 8px 5px 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .graph-cadence-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      letter-spacing: 0.04em;
      color: var(--ink-dim);
    }

    .graph-cadence-stat {
      font-weight: 700;
      color: var(--ink-dim);
    }

    .graph-cadence-stat.active {
      color: #10b981;
    }

    .technical-mini-graph {
      height: 48px;
      display: flex;
      align-items: flex-end;
      gap: 5px;
      padding-top: 4px;
    }

    .graph-col {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      gap: 3px;
      cursor: pointer;
      position: relative;
    }

    .graph-bar-ink {
      width: 100%;
      background: var(--ink-dim);
      border-radius: 1px 1px 0 0;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      min-height: 5px;
      display: flex;
      justify-content: center;
    }

    .graph-bar-ink.active-ai {
      background: rgba(56, 189, 248, 0.75);
    }

    .graph-bar-ink.active-pulse {
      background: #10b981;
      box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
      animation: barPulse 2s infinite ease-in-out;
    }

    @keyframes barPulse {
      0%, 100% { box-shadow: 0 0 3px rgba(16, 185, 129, 0.4); }
      50% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.85); }
    }

    .graph-bar-ink.standby {
      background: rgba(255, 255, 255, 0.18);
    }

    .theme-paper .graph-bar-ink.standby {
      background: rgba(15, 23, 42, 0.22);
    }

    .graph-col:hover .graph-bar-ink {
      background: #38bdf8 !important;
      box-shadow: 0 0 8px rgba(56, 189, 248, 0.7);
      transform: scaleY(1.06);
      transform-origin: bottom;
    }

    .graph-bar-val-badge {
      display: none;
      position: absolute;
      top: -18px;
      background: #0f172a;
      border: 1px solid #38bdf8;
      color: #38bdf8;
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      font-weight: 700;
      padding: 1px 3px;
      border-radius: 2px;
      white-space: nowrap;
      z-index: 10;
      pointer-events: none;
    }

    .graph-col:hover .graph-bar-val-badge {
      display: block;
    }

    .graph-day-label {
      font-family: var(--fonte-texto);
      font-size: 11px;
      color: var(--ink-dim);
      letter-spacing: -0.02em;
      text-transform: none;
      user-select: none;
    }

    .graph-day-label.today {
      color: var(--ink);
      font-weight: 700;
    }

    .fleet-card-footer {
      display: flex;
      justify-content: space-between;
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      font-weight: 700;
      border-top: var(--border-thin);
      padding-top: 6px;
      color: var(--ink-dim);
    }

    /* De onde saiu o número e quando foi lido. Sem esta linha, dois números de
       idades diferentes ficavam lado a lado sem ninguém conseguir saber qual era
       o de agora. */
    .fleet-card-source {
      font-family: var(--fonte-texto);
      font-size: 11px;
      color: var(--ink-dim);
      opacity: 0.75;
      margin-top: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .graph-sem-dado {
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      color: var(--ink-dim);
      min-height: 62px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 8px;
      border: 1px dashed var(--border-thin);
      opacity: 0.9;
    }

    /* MODO FOCO / PRIMEIRO PLANO (Card Selecionado em Destaque) */
    .focus-card-container {
      display: none;
      background: var(--card-bg);
      border: var(--border-ink);
      box-shadow: var(--shadow-ink);
      padding: 24px;
      flex-direction: column;
      gap: 18px;
      animation: popIn 0.2s ease-out;
    }

    @keyframes popIn {
      from { opacity: 0; transform: scale(0.99); }
      to { opacity: 1; transform: scale(1); }
    }

    /* Topo do Card em Foco */
    .focus-card-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: var(--border-ink);
      padding-bottom: 14px;
    }

    .focus-client-info {
      display: flex;
      align-items: baseline;
      gap: 12px;
    }

    .focus-client-label {
      font-size: 18px;
      font-weight: 900;
      text-transform: none;
      letter-spacing: -0.02em;
      color: var(--ink);
    }

    .focus-client-id {
      font-family: var(--fonte-texto);
      font-size: 12px;
      font-weight: 700;
      color: var(--ink-dim);
    }

    .btn-back-fleet {
      background: transparent;
      border: var(--border-ink);
      font-family: var(--fonte-texto);
      font-size: 13px;
      font-weight: 700;
      padding: 6px 14px;
      cursor: pointer;
      text-transform: none;
      box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
      transition: all 0.15s ease;
      color: var(--ink);
    }

    .btn-back-fleet:hover {
      background: var(--btn-hover-bg);
      color: var(--btn-hover-ink);
      box-shadow: none;
      transform: translate(1px, 1px);
    }

    /* Seletor de Repositório Específico do Cliente Selecionado */
    .repo-select-strip {
      border: var(--border-ink);
      padding: 10px 14px;
      background: var(--card-inner);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .repo-select-label-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .repo-select-label {
      font-family: var(--fonte-texto);
      font-size: 13px;
      font-weight: 700;
      text-transform: none;
      color: var(--ink);
    }

    .repo-dropdown-input {
      background: var(--card-bg);
      border: var(--border-thin);
      font-family: var(--fonte-texto);
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      outline: none;
      cursor: pointer;
      color: var(--ink);
    }

    .repo-telemetry-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
    }

    .repo-telemetry-badge {
      font-family: var(--fonte-texto);
      font-size: 12px;
      font-weight: 700;
      padding: 4px 8px;
      border: var(--border-thin);
      background: var(--card-bg);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      letter-spacing: 0.04em;
    }

    .repo-telemetry-badge.active {
      border-color: rgba(16, 185, 129, 0.45);
      color: #10b981;
      background: rgba(16, 185, 129, 0.08);
    }

    .repo-telemetry-badge.standby {
      color: var(--ink-dim);
    }

    .btn-copy-repo-url {
      background: var(--ink);
      color: var(--card-bg);
      border: var(--border-ink);
      box-shadow: 2px 2px 0px rgba(0,0,0,0.2);
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      font-weight: 700;
      padding: 5px 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-transform: none;
      transition: all 0.12s ease;
    }

    .btn-copy-repo-url:hover {
      transform: translate(-1px, -1px);
      box-shadow: 3px 3px 0px rgba(0,0,0,0.3);
    }

    .btn-open-repo-github {
      background: transparent;
      border: var(--border-thin);
      color: var(--ink);
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      font-weight: 700;
      padding: 5px 10px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.15s ease;
    }

    .btn-open-repo-github:hover {
      background: var(--btn-hover-bg);
      color: var(--btn-hover-ink);
    }

    .btn-card-copy-repo {
      background: transparent;
      border: 1px solid var(--border-thin);
      color: var(--ink-dim);
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      font-weight: 700;
      padding: 2px 6px;
      cursor: pointer;
      transition: all 0.12s ease;
    }

    .btn-card-copy-repo:hover {
      border-color: var(--ink);
      color: var(--ink);
    }

    .badge-repo-status {
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      font-weight: 800;
      padding: 1px 5px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      letter-spacing: 0.04em;
    }

    .badge-repo-status.active {
      color: #10b981;
      background: rgba(16, 185, 129, 0.12);
      border: 1px solid rgba(16, 185, 129, 0.4);
    }

    .badge-repo-status.standby {
      color: var(--ink-dim);
      background: rgba(125, 125, 125, 0.1);
      border: 1px solid var(--border-thin);
    }

    /* Leitura que não aconteceu não tem a mesma cara de leitura que deu silêncio. */
    .badge-repo-status.nodata {
      color: #a1a1aa;
      background: transparent;
      border: 1px dashed rgba(161, 161, 170, 0.5);
    }

    /* BORDA GRADIENTE 1PX TÉCNICA & DISCRETA - CARD EM ATIVIDADE COM IA */
    .card-ai-active {
      border: 1px solid transparent !important;
      background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                  linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, #38bdf8 18%, #047857 38%, #1e3a8a 58%, #065f46 78%, rgba(255, 255, 255, 0.9) 100%) border-box !important;
      background-size: 100% 100%, 300% 300% !important;
      animation: aiGradientShift 10s ease infinite !important;
      box-shadow: 0 0 14px rgba(4, 120, 87, 0.18), 0 0 6px rgba(56, 189, 248, 0.12), var(--shadow-ink) !important;
      transition: all 0.2s ease;
    }

    @keyframes aiGradientShift {
      0% { background-position: 0% 0%, 0% 50%; }
      50% { background-position: 0% 0%, 100% 50%; }
      100% { background-position: 0% 0%, 0% 50%; }
    }

    /* SINALIZADORES DE IA EM ATIVIDADE */
    .ai-active-indicator-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      font-weight: 700;
      color: #38bdf8;
      background: rgba(56, 189, 248, 0.1);
      border: 1px solid rgba(56, 189, 248, 0.4);
      padding: 3px 8px;
      letter-spacing: 0.04em;
    }

    .ai-pulse-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 8px #10b981;
      animation: aiPulseBlink 1.2s infinite ease-in-out;
      display: inline-block;
      flex-shrink: 0;
    }

    @keyframes aiPulseBlink {
      0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px #10b981; }
      50% { opacity: 0.35; transform: scale(0.75); box-shadow: 0 0 2px #10b981; }
    }

    .boxed-stamp.ai-active-stamp {
      border: 1px solid rgba(56, 189, 248, 0.45);
      background: rgba(56, 189, 248, 0.08);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 0 8px rgba(56, 189, 248, 0.12);
    }

    .ai-status-tag {
      font-size: 11.5px;
      font-weight: 800;
      color: #10b981;
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.4);
      padding: 1px 5px;
      letter-spacing: 0.05em;
    }

    .boxed-stamp.ai-standby-stamp {
      border: 1px solid var(--border-thin);
      background: var(--card-inner);
      color: var(--ink-dim);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      opacity: 0.85;
    }
    .ai-standby-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #71717a;
      display: inline-block;
      flex-shrink: 0;
    }
    .ai-status-tag.standby {
      color: #a1a1aa;
      background: rgba(161, 161, 170, 0.12);
      border-color: rgba(161, 161, 170, 0.3);
    }
    .ai-standby-indicator-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11.5px;
      font-weight: 700;
      color: var(--ink-dim);
      background: var(--card-inner);
      border: 1px solid var(--border-thin);
      padding: 1px 6px;
      letter-spacing: 0.04em;
    }

    /* Sinalização nos cards da frota */
    .fleet-ai-badge {
      font-size: 11.5px;
      font-family: var(--fonte-texto);
      font-weight: 800;
      color: #38bdf8;
      background: rgba(56, 189, 248, 0.1);
      border: 1px solid rgba(56, 189, 248, 0.35);
      padding: 1px 4px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      margin-top: 3px;
      letter-spacing: 0.04em;
    }

    /* Modelo visto num commit recente, mas que não está se anunciando agora. */
    .fleet-ai-badge.recente {
      color: var(--ink-dim);
      background: transparent;
      border-color: var(--border-thin);
    }

    /* Leitura feita e nenhuma IA: é afirmação, não ausência de informação. */
    .fleet-ai-badge.sem-ia {
      color: var(--ink-dim);
      background: transparent;
      border: 1px dashed rgba(125, 125, 125, 0.45);
      font-weight: 700;
    }

    .btn-card-connect.connected {
      border-color: #10b981;
      color: #10b981;
      background: rgba(16, 185, 129, 0.08);
    }

    /* Tabela Técnica: As 5 Informações Solicitadas */
    .telemetry-table-sheet {
      border: var(--border-ink);
      background: var(--card-bg);
      display: flex;
      flex-direction: column;
    }

    .telemetry-row {
      display: grid;
      grid-template-columns: 240px 1fr;
      border-bottom: var(--border-thin);
      font-size: 12px;
    }

    .telemetry-row:last-child {
      border-bottom: none;
    }

    .telemetry-col-label {
      background: var(--card-inner);
      border-right: var(--border-thin);
      padding: 10px 14px;
      font-family: var(--fonte-texto);
      font-size: 13px;
      font-weight: 700;
      text-transform: none;
      color: var(--ink);
      display: flex;
      align-items: center;
    }

    .telemetry-col-val {
      padding: 10px 16px;
      font-weight: 500;
      color: var(--ink);
      line-height: 1.5;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .boxed-stamp {
      border: var(--border-thin);
      padding: 3px 8px;
      font-family: var(--fonte-texto);
      font-size: 13px;
      font-weight: 700;
      text-transform: none;
      background: var(--card-bg);
      color: var(--ink);
    }

    .boxed-stamp.active-stamp {
      background: var(--ink);
      color: var(--card-bg);
    }

    /* ÁREA DE COMBINAÇÃO DE SKILLS & INVENTÁRIO */
    .skills-assembly-deck {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Dropzone tracejada */
    .skills-dropzone {
      border: var(--border-dash);
      background: var(--card-inner);
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: background-color 0.15s ease;
    }

    .skills-dropzone.drag-over {
      background: rgba(255, 255, 255, 0.1);
      border-style: solid;
    }

    .dropzone-label-bar {
      display: flex;
      justify-content: space-between;
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--ink);
      text-transform: none;
      letter-spacing: 0.05em;
    }

    .docked-skills-stream {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      min-height: 36px;
      align-items: center;
    }

    .empty-dock-msg {
      font-family: var(--fonte-texto);
      font-size: 13px;
      color: var(--ink-light);
      font-style: italic;
    }

    /* Bandeja do Inventário Inferior */
    .inventory-tray {
      border: var(--border-ink);
      background: var(--card-inner);
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .inventory-label-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      font-weight: 700;
      text-transform: none;
      color: var(--ink);
      letter-spacing: 0.05em;
    }

    .inventory-blocks-pool {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    /* Blocos de Skill */
    .skill-chip-block {
      background: var(--card-bg);
      border: var(--border-thin);
      padding: 5px 10px;
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      font-weight: 700;
      text-transform: none;
      cursor: grab;
      user-select: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
      color: var(--ink);
      transition: all 0.12s ease;
    }

    .skill-chip-block:hover {
      transform: translate(-1px, -1px);
      box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
    }

    .skill-chip-block:active {
      cursor: grabbing;
      opacity: 0.6;
    }

    .skill-chip-block.docked-chip {
      background: var(--ink);
      color: var(--card-bg);
      border-color: var(--ink);
    }

    .skill-chip-block.docked-chip .btn-unplug {
      color: var(--ink-light);
      font-weight: 800;
      cursor: pointer;
      margin-left: 4px;
    }

    /* Skills Recomendadas com Alto Fit */
    .skill-chip-block.recommended {
      border: 1px solid #10b981;
      box-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
    }

    .skill-chip-block .rec-badge {
      font-size: 11.5px;
      font-weight: 800;
      color: #10b981;
      background: rgba(16, 185, 129, 0.12);
      border: 1px solid rgba(16, 185, 129, 0.4);
      padding: 1px 4px;
      margin-left: 4px;
      letter-spacing: 0.05em;
    }

    .btn-dock-all-recommended {
      background: rgba(16, 185, 129, 0.12);
      border: 1px dashed #10b981;
      color: #10b981;
      font-family: var(--fonte-texto);
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      cursor: pointer;
      margin-left: 10px;
      transition: all 0.12s ease;
      vertical-align: middle;
    }

    .btn-dock-all-recommended:hover {
      background: #10b981;
      color: #0b0d12;
    }

    .suggested-skill-tag {
      font-size: 11.5px;
      color: #10b981;
      font-weight: 800;
      background: rgba(16, 185, 129, 0.1);
      border: 1px solid #10b981;
      padding: 1px 4px;
      margin-left: 4px;
    }

    /* Botão de Conectar Repositório de Skill */
    .btn-import-skill-repo {
      background: transparent;
      border: 1px dashed var(--ink);
      color: var(--ink);
      font-family: var(--fonte-texto);
      font-size: 12px;
      font-weight: 700;
      padding: 3px 9px;
      cursor: pointer;
      transition: all 0.12s ease;
      text-transform: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .btn-import-skill-repo:hover {
      background: var(--ink);
      color: var(--card-bg);
    }

    /* Meta-Skill 4D Chips */
    .skill-chip-block.meta-4d {
      border: 1.5px solid #3b82f6 !important;
      box-shadow: 0 0 10px rgba(59, 130, 246, 0.35);
      background: var(--card-inner);
    }
    .skill-chip-block.meta-4d .meta-4d-badge {
      font-size: 11.5px;
      font-weight: 800;
      color: #3b82f6;
      background: rgba(59, 130, 246, 0.15);
      border: 1px solid rgba(59, 130, 246, 0.5);
      padding: 1px 5px;
      margin-left: 4px;
      letter-spacing: 0.05em;
    }
    .skill-chip-block.meta-4d.docked-chip {
      background: #1e3a8a !important;
      border-color: #3b82f6 !important;
      color: #ffffff !important;
    }

    /* MOTION & FEEDBACK VISUAL */
    @keyframes ledPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.35; transform: scale(0.85); }
    }

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

    @keyframes snapPop {
      0% { transform: scale(0.92); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }

    @keyframes modalFadeIn {
      from { opacity: 0; transform: scale(0.97); }
      to { opacity: 1; transform: scale(1); }
    }

    /* LEDs de Sinalização de Status */
    .status-led {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;
      vertical-align: middle;
      margin-right: 6px;
      flex-shrink: 0;
    }
    .status-led.online {
      background-color: #10b981;
      box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
      animation: ledPulse 1.8s infinite ease-in-out;
    }
    .status-led.standby {
      background-color: #f59e0b;
      box-shadow: 0 0 6px rgba(245, 158, 11, 0.7);
    }
    .status-led.nodata {
      background-color: transparent;
      border: 1px solid #a1a1aa;
      box-shadow: none;
    }
    .status-led.syncing {
      background-color: #3b82f6;
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
      animation: ledPulse 0.9s infinite ease-in-out;
    }

    /* Botão Primário de Cadastro no Header */
    .action-btn-register {
      background: var(--ink);
      color: var(--card-bg);
      border: var(--border-ink);
      box-shadow: var(--shadow-ink);
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      font-weight: 700;
      padding: 0 12px;
      height: 32px;
      box-sizing: border-box;
      white-space: nowrap;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      letter-spacing: 0.04em;
      transition: all 0.12s ease;
      text-transform: none;
      flex-shrink: 0;
    }
    .action-btn-register:hover {
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0px rgba(0,0,0,0.25);
    }
    .action-btn-register:active {
      transform: translate(1px, 1px);
      box-shadow: none;
    }

    .btn-secondary-header {
      background: rgba(56, 189, 248, 0.12) !important;
      border: 1px solid #38bdf8 !important;
      color: #38bdf8 !important;
    }
    .btn-secondary-header:hover {
      background: rgba(56, 189, 248, 0.22) !important;
      color: #ffffff !important;
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
    }

    /* Barra de Operações e Telemetria da Agência */
    .agency-ops-bar {
      background: var(--card-bg);
      border: var(--border-thin);
      padding: 8px 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      color: var(--ink-dim);
      letter-spacing: 0.04em;
      gap: 12px;
    }
    .ops-bar-left {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
    }
    .ops-shields-wrap {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: 10px;
      padding-left: 10px;
      border-left: 1px solid var(--border-thin);
    }
    .ops-bar-center strong {
      color: var(--ink);
      font-weight: 700;
    }
    .ops-bar-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .btn-db-reset {
      background: transparent;
      border: none;
      color: var(--ink-light);
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      cursor: pointer;
      padding: 0;
      text-decoration: underline;
    }
    .btn-db-reset:hover {
      color: var(--ink);
    }

    /* Ticker Tático Inferior */
    .tactical-log-bar {
      background: var(--card-bg);
      border: var(--border-thin);
      padding: 8px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      color: var(--ink-dim);
      margin-top: 8px;
    }
    .log-bar-tag {
      font-weight: 700;
      color: var(--ink);
      margin-right: 12px;
      border-right: 1px solid var(--ink-dim);
      padding-right: 12px;
    }
    .log-bar-ticker {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--ink);
      transition: opacity 0.2s ease;
    }
    .log-bar-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--ink-dim);
    }
    .pulse-dot-mini {
      width: 6px;
      height: 6px;
      background: #10b981;
      border-radius: 50%;
      display: inline-block;
      animation: ledPulse 1.2s infinite ease-in-out;
    }

    /* MODAL DE CADASTRO DE CLIENTE / SONDAGEM */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.78);
      backdrop-filter: blur(4px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .modal-blueprint-card {
      background: var(--card-bg);
      border: var(--border-ink);
      box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.4);
      width: 100%;
      max-width: 680px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      animation: modalFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
    }
    .modal-header-strip {
      background: var(--ink);
      color: var(--card-bg);
      padding: 12px 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--fonte-texto);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.06em;
    }
    .modal-header-title {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .modal-close-btn {
      background: transparent;
      border: none;
      color: var(--card-bg);
      font-family: var(--fonte-texto);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      padding: 2px 6px;
    }
    .modal-close-btn:hover {
      opacity: 0.7;
    }
    .modal-body-section {
      padding: 20px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .blueprint-input-label {
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--ink);
      text-transform: none;
      letter-spacing: 0.05em;
      margin-bottom: 6px;
      display: block;
    }
    .blueprint-text-input, .blueprint-text-area, .blueprint-select {
      background: var(--card-inner);
      border: var(--border-thin);
      color: var(--ink);
      font-family: var(--fonte-texto);
      font-size: 13px;
      padding: 9px 12px;
      width: 100%;
      outline: none;
      transition: border-color 0.15s ease;
    }
    .blueprint-text-input:focus, .blueprint-text-area:focus, .blueprint-select:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 1px #3b82f6;
    }
    .input-with-button {
      display: flex;
      gap: 8px;
    }
    .btn-scan-repo {
      background: var(--card-inner);
      border: var(--border-ink);
      color: var(--ink);
      font-family: var(--fonte-texto);
      font-size: 13px;
      font-weight: 700;
      padding: 0 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      transition: all 0.12s ease;
    }
    .btn-scan-repo:hover {
      background: var(--ink);
      color: var(--card-bg);
    }
    .repo-quick-presets {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    .preset-tag-btn {
      background: var(--card-inner);
      border: 1px dashed var(--ink-dim);
      color: var(--ink-dim);
      font-family: var(--fonte-texto);
      font-size: 12px;
      padding: 3px 8px;
      cursor: pointer;
      transition: all 0.12s ease;
    }
    .preset-tag-btn:hover {
      border-color: var(--ink);
      color: var(--ink);
      background: var(--card-bg);
    }

    /* Terminal de Sondagem */
    .scanner-terminal {
      background: #050608;
      border: 1px solid rgba(255, 255, 255, 0.15);
      padding: 12px;
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      color: #10b981;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .terminal-line {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .terminal-prompt {
      color: #3b82f6;
      font-weight: 700;
    }
    .terminal-progress-bar {
      height: 4px;
      width: 100%;
      background: rgba(255, 255, 255, 0.1);
      overflow: hidden;
      position: relative;
    }
    .terminal-progress-fill {
      height: 100%;
      background: #10b981;
      width: 0%;
      transition: width 0.3s ease;
    }

    /* Grid de Dados Extraídos */
    .extracted-data-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-top: 12px;
      border-top: 1px dashed var(--ink-dim);
    }
    .extracted-alert-banner {
      background: rgba(16, 185, 129, 0.1);
      border: 1px solid #10b981;
      color: #10b981;
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      font-weight: 700;
      padding: 6px 10px;
      display: flex;
      align-items: center;
    }
    .extracted-fields-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .input-full {
      width: 100%;
    }
    .suggested-skills-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 6px;
      background: var(--card-inner);
      border: var(--border-thin);
      min-height: 42px;
    }

    .modal-footer-strip {
      background: var(--card-inner);
      border-top: var(--border-ink);
      padding: 12px 20px;
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }
    .btn-cancel-modal {
      background: transparent;
      border: var(--border-thin);
      color: var(--ink-dim);
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      font-weight: 700;
      padding: 8px 16px;
      cursor: pointer;
    }
    .btn-cancel-modal:hover {
      color: var(--ink);
      border-color: var(--ink);
    }
    .btn-confirm-register {
      background: var(--ink);
      color: var(--card-bg);
      border: var(--border-ink);
      font-family: var(--fonte-texto);
      font-size: 13px;
      font-weight: 700;
      padding: 8px 20px;
      cursor: pointer;
      box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.25);
      transition: all 0.12s ease;
    }
    .btn-confirm-register:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      box-shadow: none;
    }
    .btn-confirm-register:not(:disabled):hover {
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
    }

    /* ==========================================
       AUTENTICAÇÃO EXCLUSIVA VIA GITHUB (GATE SOBERANO)
       ========================================== */
    .auth-gate-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(11, 13, 18, 0.95);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    :root[data-theme="paper"] .auth-gate-overlay {
      background: rgba(234, 230, 218, 0.95);
    }
    .auth-gate-card {
      background: var(--card-bg);
      border: var(--border-ink);
      box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.4);
      max-width: 520px;
      width: 100%;
      padding: 28px 26px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      animation: popIn 0.25s ease-out;
    }
    .auth-gate-header {
      display: flex;
      align-items: center;
      gap: 16px;
      border-bottom: var(--border-thin);
      padding-bottom: 14px;
    }
    .auth-gate-logo {
      width: 44px;
      height: 44px;
      object-fit: contain;
      filter: var(--logo-filter);
    }
    .auth-gate-title-group h2 {
      font-size: 20px;
      font-weight: 900;
      letter-spacing: -0.02em;
      color: var(--ink);
      line-height: 1.1;
      text-transform: none;
      margin: 0;
    }
    .auth-gate-subtitle {
      font-family: var(--fonte-texto);
      font-size: 12px;
      color: var(--ink-dim);
      letter-spacing: 0.05em;
      margin-top: 3px;
    }
    .auth-gate-notice {
      background: var(--card-inner);
      border: var(--border-thin);
      padding: 10px 12px;
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      color: var(--ink);
      line-height: 1.5;
    }
    .btn-github-login {
      background: #24292e;
      border: 1.5px solid #ffffff;
      color: #ffffff;
      font-family: var(--fonte-texto);
      font-size: 13px;
      font-weight: 800;
      padding: 12px 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-transform: none;
      letter-spacing: 0.04em;
      transition: all 0.15s ease;
      box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
      width: 100%;
    }
    .btn-github-login:hover {
      background: #000000;
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.4);
    }
    .auth-gate-pill-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--fonte-texto);
      font-size: 10px;
      font-weight: 700;
      color: #10b981;
      letter-spacing: 0.08em;
      background: rgba(16, 185, 129, 0.08);
      border: 1px solid rgba(16, 185, 129, 0.25);
      padding: 3px 8px;
      width: fit-content;
      text-transform: none;
      margin-bottom: 2px;
    }
    .auth-status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10b981;
    }
    .auth-status-dot.pulse {
      box-shadow: 0 0 6px #10b981;
    }
    .btn-github-hero {
      font-size: 14px;
      padding: 13px 20px;
      border: 1.5px solid #ffffff;
      background: #1e2329;
      color: #ffffff;
      letter-spacing: 0.05em;
      box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.4);
    }
    .btn-github-hero:hover {
      background: #000000;
      transform: translate(-1px, -1px);
      box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.5);
    }
    .auth-gate-meta-hint {
      font-family: var(--fonte-texto);
      font-size: 11px;
      color: var(--ink-dim);
      text-align: center;
      line-height: 1.4;
    }
    .auth-whitelist-box {
      background: var(--card-inner);
      border: var(--border-thin);
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .auth-whitelist-title {
      font-family: var(--fonte-texto);
      font-size: 10px;
      color: var(--ink-dim);
      letter-spacing: 0.06em;
    }
    .auth-whitelist-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .auth-whitelist-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--fonte-texto);
      font-size: 11px;
      color: var(--ink);
      background: var(--card-bg);
      border: var(--border-thin);
      padding: 2px 7px;
    }
    .auth-whitelist-chip.highlight {
      border-color: #3b82f6;
      background: rgba(59, 130, 246, 0.08);
    }
    .auth-whitelist-chip .chip-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #10b981;
    }
    .auth-whitelist-chip code {
      font-size: 10px;
      color: var(--ink-dim);
    }
    .btn-toggle-pat {
      background: transparent;
      border: none;
      color: var(--ink-dim);
      font-family: var(--fonte-texto);
      font-size: 11px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 4px 0;
      transition: color 0.15s ease;
    }
    .btn-toggle-pat:hover {
      color: var(--ink);
    }
    .btn-secondary-token {
      background: var(--card-inner);
      border: var(--border-thin);
      color: var(--ink);
      font-family: var(--fonte-texto);
      font-size: 11px;
      font-weight: 700;
      padding: 9px 12px;
      cursor: pointer;
      letter-spacing: 0.04em;
      transition: all 0.15s ease;
      text-transform: none;
    }
    .btn-secondary-token:hover {
      background: var(--ink);
      color: var(--card-bg);
    }
    .auth-pat-collapsible {
      border-top: 1px dashed var(--ink-dim);
      padding-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .auth-error-banner {
      background: rgba(239, 68, 68, 0.12);
      border: 1px solid #ef4444;
      color: #ef4444;
      font-family: var(--fonte-texto);
      font-size: 12.5px;
      padding: 8px 10px;
      line-height: 1.4;
      display: none;
    }
    .auth-operator-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--card-inner);
      border: var(--border-thin);
      padding: 0 8px;
      height: 32px;
      box-sizing: border-box;
      white-space: nowrap;
      font-family: var(--fonte-texto);
      flex-shrink: 0;
    }
    .auth-avatar-mini {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid var(--ink);
    }
    .auth-operator-meta {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }
    .auth-username {
      font-size: 12.5px;
      font-weight: 800;
      color: var(--ink);
    }
    .auth-repo-verified {
      font-size: 11.5px;
      font-weight: 700;
      color: #10b981;
      letter-spacing: 0.05em;
    }
    .btn-auth-logout {
      background: transparent;
      border: 1px solid var(--border-thin);
      color: var(--ink-dim);
      font-family: var(--fonte-texto);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      padding: 2px 5px;
      transition: all 0.15s ease;
    }
    .btn-auth-logout:hover {
      color: #ef4444;
      border-color: #ef4444;
    }

    /* ==========================================
       COFRE DE DILIGÊNCIA & COMPLIANCE FORENSE
       ========================================== */
    .btn-open-audit-vault {
      background: var(--card-inner);
      border: 1px solid var(--border-thin);
      color: var(--ink);
      font-family: var(--fonte-texto);
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.15s ease;
    }
    .btn-open-audit-vault:hover {
      border-color: #38bdf8;
      background: rgba(56, 189, 248, 0.1);
    }
    .compliance-modal-card {
      max-width: 980px !important;
      width: 95vw;
    }
    .compliance-filter-strip {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      padding-bottom: 12px;
      border-bottom: var(--border-thin);
    }
    .audit-table-wrapper {
      max-height: 440px;
      overflow-y: auto;
      border: var(--border-thin);
      background: var(--card-inner);
    }
    .audit-table {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--fonte-texto);
      font-size: 12px;
      text-align: left;
    }
    .audit-table th {
      background: var(--card-bg);
      color: var(--ink);
      padding: 8px 10px;
      font-weight: 800;
      border-bottom: var(--border-thin);
      position: sticky;
      top: 0;
      z-index: 2;
      letter-spacing: 0.04em;
    }
    .audit-table td {
      padding: 8px 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      color: var(--ink);
      vertical-align: top;
      line-height: 1.4;
    }
    :root[data-theme="paper"] .audit-table td {
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .audit-table tr:hover td {
      background: rgba(56, 189, 248, 0.04);
    }
    .audit-hash-badge {
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      color: var(--ink-dim);
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid var(--border-thin);
      padding: 1px 4px;
      letter-spacing: 0.05em;
    }
    .worker-chip-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--card-inner);
      border: 1px solid var(--border-thin);
      padding: 2px 6px;
      font-family: var(--fonte-texto);
      font-size: 12px;
      font-weight: 700;
      color: var(--ink);
    }
    .worker-chip-badge.active-worker {
      border-color: #38bdf8;
      background: rgba(56, 189, 248, 0.08);
      color: #38bdf8;
    }

    /* ==========================================
       GESTÃO DE PERMISSÕES & WHITELIST (SUPERADMIN: NEI MACIEL)
       ========================================== */
    .permissions-modal-card {
      max-width: 1060px !important;
      width: 95vw;
    }
    .perm-badge-active {
      display: inline-block;
      padding: 2px 6px;
      font-size: 11.5px;
      font-weight: 800;
      color: #22c55e;
      border: 1px solid #22c55e;
      background: rgba(34, 197, 94, 0.12);
      letter-spacing: 0.05em;
    }
    .perm-badge-revoked {
      display: inline-block;
      padding: 2px 6px;
      font-size: 11.5px;
      font-weight: 800;
      color: #ef4444;
      border: 1px solid #ef4444;
      background: rgba(239, 68, 68, 0.12);
      letter-spacing: 0.05em;
    }
    .perm-role-tag {
      font-size: 11.5px;
      padding: 2px 6px;
      border: 1px solid var(--border-thin);
      background: var(--card-bg);
      font-weight: 700;
      color: var(--ink);
      font-family: var(--fonte-texto);
    }
    .perm-role-superadmin {
      border-color: #eab308;
      color: #eab308;
      background: rgba(234, 179, 8, 0.1);
    }
    .perm-repo-tag {
      display: inline-block;
      font-size: 11.5px;
      padding: 1px 5px;
      margin: 1px 2px;
      border: 1px solid var(--border-thin);
      background: rgba(0, 0, 0, 0.25);
      color: var(--ink);
      font-family: var(--fonte-texto);
    }
    .card-locked-by-permission {
      opacity: 0.42 !important;
      cursor: not-allowed !important;
      filter: grayscale(0.9);
      position: relative;
    }
    .card-locked-by-permission:hover {
      transform: none !important;
      box-shadow: none !important;
      border-color: rgba(239, 68, 68, 0.4) !important;
    }
    .badge-repo-restricted {
      font-size: 11.5px;
      padding: 1px 4px;
      background: rgba(239, 68, 68, 0.2);
      color: #ef4444;
      border: 1px solid #ef4444;
      font-weight: 800;
    }

    /* ==========================================
       TOOLTIP DETALHADA DE SKILLS & META-SKILLS 4D
       ========================================== */
    .skill-tooltip {
      position: fixed;
      z-index: 99999;
      background: var(--card-bg);
      border: 1.5px solid #38bdf8;
      box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.5);
      width: 350px;
      max-width: 90vw;
      padding: 14px 16px;
      font-family: var(--fonte-texto);
      color: var(--ink);
      pointer-events: none;
      display: none;
      flex-direction: column;
      gap: 10px;
      transition: opacity 0.08s ease;
    }
    :root[data-theme="paper"] .skill-tooltip {
      background: #ffffff;
      border: 1.5px solid #0284c7;
      box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.25);
    }
    .tooltip-header-strip {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: var(--border-thin);
      padding-bottom: 6px;
    }
    .tooltip-tier-badge {
      font-size: 11.5px;
      font-weight: 800;
      padding: 2px 6px;
      border: 1px solid #38bdf8;
      background: rgba(56, 189, 248, 0.12);
      color: #38bdf8;
      letter-spacing: 0.05em;
    }
    .tooltip-tier-badge.standard {
      border-color: var(--ink-dim);
      background: var(--card-inner);
      color: var(--ink);
    }
    .tooltip-title {
      font-size: 13px;
      font-weight: 900;
      color: var(--ink);
      text-transform: none;
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .tooltip-desc {
      font-size: 12px;
      color: var(--ink-dim);
      line-height: 1.5;
    }
    .tooltip-ais-row {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
    }
    .tooltip-ai-chip {
      font-size: 11.5px;
      font-weight: 700;
      background: var(--card-inner);
      border: 1px solid var(--border-thin);
      padding: 2px 5px;
      color: var(--ink);
      text-transform: none;
    }
    .tooltip-4d-box {
      background: rgba(56, 189, 248, 0.04);
      border: 1px dashed #38bdf8;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 11.5px;
      line-height: 1.4;
    }
    .tooltip-4d-row strong {
      color: #38bdf8;
    }
    .tooltip-footer-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11.5px;
      color: var(--ink-dim);
      border-top: var(--border-thin);
      padding-top: 6px;
      margin-top: 2px;
    }

    /* SELOS SOBERANOS NA BARRA DE OPERAÇÕES */
    .header-shields-group, .ops-shields-wrap {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: nowrap;
      flex-shrink: 0;
    }
    .sovereign-shield-badge {
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.03em;
      padding: 0 7px;
      height: 22px;
      box-sizing: border-box;
      white-space: nowrap;
      background: var(--card-inner);
      border: 1px solid var(--border-thin);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      text-decoration: none;
      transition: all 0.15s ease;
    }
    .sovereign-shield-badge:hover {
      border-color: var(--ink);
      color: var(--ink);
    }
    .badge-github-project {
      border-color: #a855f7 !important;
      color: #c084fc !important;
    }
    .badge-github-project:hover {
      background: rgba(168, 85, 247, 0.15) !important;
      color: #ffffff !important;
    }
    .shield-dot-green {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
      display: inline-block;
    }
    .shield-dot-amber {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #f59e0b;
      display: inline-block;
    }
    .shield-dot-red {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ef4444;
      display: inline-block;
    }
    .shield-dot-blue {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #38bdf8;
      box-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
      display: inline-block;
    }
    .shield-dot-purple {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #a855f7;
      box-shadow: 0 0 6px rgba(168, 85, 247, 0.8);
      display: inline-block;
    }

    /* BADGE DE SUB-SKILLS ORQUESTRADAS */
    .meta-subskills-badge {
      font-size: 11px;
      font-weight: 700;
      color: #10b981;
      background: rgba(16, 185, 129, 0.12);
      border: 1px solid rgba(16, 185, 129, 0.4);
      padding: 1px 4px;
      margin-left: 4px;
      letter-spacing: 0.03em;
    }

    /* TOOLTIP: CAIXA DE SKILLS ORQUESTRADAS PELA META */
    .tooltip-orchestrated-box {
      background: rgba(16, 185, 129, 0.05);
      border: 1px dashed #10b981;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      font-size: 11.5px;
      line-height: 1.4;
    }
    .tooltip-orchestrated-title {
      font-size: 11.5px;
      font-weight: 800;
      color: #10b981;
      text-transform: none;
      letter-spacing: 0.04em;
    }
    .tooltip-subskills-list {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .tooltip-subskill-chip {
      font-size: 11.5px;
      font-weight: 600;
      background: var(--card-inner);
      border: 1px solid rgba(16, 185, 129, 0.4);
      color: var(--ink);
      padding: 1px 5px;
      letter-spacing: 0.02em;
    }

    /* =========================================================
       SEÇÕES EXECUTIVAS NO CARD DO CLIENTE (BI, TOKENS, HIGHLIGHTS)
       ========================================================= */
    .focus-card-section {
      border-top: var(--border-thin);
      padding: 14px 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      font-family: var(--fonte-texto);
      background: var(--card-bg);
    }
    .section-title-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: 0.05em;
      color: var(--ink);
      border-bottom: 1px dashed var(--border-thin);
      padding-bottom: 6px;
    }

    /* BI SEMANAL */
    .bi-status-banner {
      padding: 8px 12px;
      border: 1.5px solid #10b981;
      background: rgba(16, 185, 129, 0.08);
      color: #10b981;
      font-size: 12.5px;
      font-weight: 800;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      letter-spacing: 0.03em;
    }
    .bi-status-banner.regular {
      border-color: #f59e0b;
      background: rgba(245, 158, 11, 0.08);
      color: #f59e0b;
    }
    .bi-status-banner.critico {
      border-color: #ef4444;
      background: rgba(239, 68, 68, 0.08);
      color: #ef4444;
    }
    .bi-kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 8px;
    }
    .bi-kpi-card {
      background: var(--card-inner);
      border: var(--border-thin);
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .bi-kpi-label {
      font-size: 11.5px;
      color: var(--ink-dim);
      text-transform: none;
    }
    .bi-kpi-val {
      font-size: 12px;
      font-weight: 900;
      color: var(--ink);
    }
    .bi-diagnosis-box {
      background: var(--card-inner);
      border: var(--border-thin);
      padding: 10px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--ink);
    }

    /* VAULT DE TOKENS POR MODELO DE IA */
    .vault-tokens-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }
    .vault-tokens-table th, .vault-tokens-table td {
      border: var(--border-thin);
      padding: 6px 8px;
      text-align: left;
    }
    .vault-tokens-table th {
      background: var(--card-inner);
      color: var(--ink-dim);
      font-weight: 700;
      font-size: 11.5px;
    }
    .token-secret-masked {
      font-family: var(--fonte-texto);
      letter-spacing: 0.1em;
      color: var(--ink);
      background: rgba(0,0,0,0.25);
      padding: 2px 6px;
      border-radius: 2px;
    }
    .token-model-badge {
      font-size: 11px;
      padding: 1px 5px;
      background: rgba(56, 189, 248, 0.12);
      border: 1px solid rgba(56, 189, 248, 0.4);
      color: #38bdf8;
      font-weight: 700;
      margin-right: 3px;
      display: inline-block;
    }
    .btn-mcp-test {
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      font-weight: 700;
      padding: 3px 6px;
      background: transparent;
      border: 1px solid #38bdf8;
      color: #38bdf8;
      cursor: pointer;
      text-transform: none;
    }
    .btn-mcp-test:hover {
      background: rgba(56, 189, 248, 0.15);
    }
    .btn-mcp-edit {
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      font-weight: 700;
      padding: 3px 6px;
      background: transparent;
      border: 1px solid #eab308;
      color: #eab308;
      cursor: pointer;
      text-transform: none;
      transition: all 0.15s ease;
    }
    .btn-mcp-edit:hover {
      background: rgba(234, 179, 8, 0.18);
    }
    .btn-mcp-history {
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      padding: 3px 6px;
      background: transparent;
      border: 1px solid var(--ink-dim);
      color: var(--ink-dim);
      cursor: pointer;
      text-transform: none;
      transition: all 0.15s ease;
    }
    .btn-mcp-history:hover {
      border-color: var(--ink);
      color: var(--ink);
      background: rgba(255, 255, 255, 0.05);
    }
    .token-history-row {
      border: var(--border-thin);
      background: var(--card-inner);
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      font-family: var(--fonte-texto);
    }
    .token-history-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11.5px;
    }
    .token-history-action {
      font-weight: 800;
      color: #38bdf8;
    }
    .token-history-hash {
      color: #10b981;
      font-size: 11.5px;
    }
    .token-history-details {
      font-size: 12px;
      color: var(--ink);
      line-height: 1.35;
    }

    /* HIGHLIGHTS DA SESSÃO: ROTATIVO 1 POR VEZ (10s) & LISTA DISCRETA */
    .highlights-controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .btn-highlight-view {
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      font-weight: 700;
      background: transparent;
      border: 1px solid var(--border-thin);
      color: var(--ink-dim);
      padding: 3px 7px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.15s ease;
    }
    .btn-highlight-view:hover {
      border-color: var(--ink);
      color: var(--ink);
    }
    .btn-highlight-view.active {
      background: var(--card-inner);
      border-color: var(--ink);
      color: var(--ink);
    }
    .icon-list-discrete {
      font-size: 13px;
      line-height: 1;
      font-weight: bold;
    }
    /* CONTAINER DO HIGHLIGHT ÚNICO ROTATIVO (1 POR VEZ) */
    .highlight-ticker-container {
      position: relative;
      background: var(--card-inner);
      border: 1px solid var(--border-thin);
      border-left: 3px solid #10b981;
      padding: 10px 14px 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 72px;
      justify-content: center;
      transition: border-color 0.25s ease;
      overflow: hidden;
      box-shadow: inset 0 0 12px rgba(0,0,0,0.15);
    }
    .highlight-ticker-container:hover {
      border-color: #10b981;
    }
    /* Barra de progresso micro dos 10 segundos */
    .highlight-ticker-progress-bar {
      position: absolute;
      top: 0;
      left: 0;
      height: 2px;
      background: linear-gradient(90deg, #10b981, #38bdf8);
      width: 0%;
      opacity: 0.9;
      transition: width 0.1s linear;
    }
    .highlight-ticker-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 11.5px;
    }
    .highlight-ticker-badges {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .highlight-pulse-live {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-weight: 800;
      color: #10b981;
      letter-spacing: 0.5px;
      font-size: 11px;
    }
    .pulse-dot-green {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 6px #10b981;
      animation: pulseGlow 1.5s infinite alternate;
    }
    @keyframes pulseGlow {
      from { opacity: 0.35; transform: scale(0.85); }
      to { opacity: 1; transform: scale(1.2); }
    }
    .highlight-chip-cat {
      background: rgba(16, 185, 129, 0.12);
      border: 1px solid rgba(16, 185, 129, 0.3);
      color: #10b981;
      padding: 1px 5px;
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.3px;
    }
    .highlight-chip-actor {
      background: var(--card-bg);
      border: 1px solid var(--border-thin);
      color: var(--ink);
      padding: 1px 5px;
      font-weight: 700;
      font-size: 11px;
    }
    .highlight-ticker-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--ink-dim);
      font-size: 11px;
      white-space: nowrap;
    }
    .highlight-ticker-body {
      font-size: 12.5px;
      line-height: 1.45;
      color: var(--ink);
      font-weight: 500;
      transition: opacity 0.25s ease, transform 0.25s ease;
      opacity: 1;
      transform: translateY(0);
      padding-right: 50px;
    }
    .highlight-ticker-body.fade-out {
      opacity: 0;
      transform: translateY(-3px);
    }
    .highlight-ticker-body.fade-in {
      opacity: 1;
      transform: translateY(0);
    }
    .highlight-ticker-body strong {
      color: #10b981;
      font-weight: 700;
    }
    .highlight-ticker-nav {
      position: absolute;
      right: 8px;
      bottom: 6px;
      display: flex;
      align-items: center;
      gap: 3px;
      opacity: 0.35;
      transition: opacity 0.2s;
    }
    .highlight-ticker-container:hover .highlight-ticker-nav {
      opacity: 0.95;
    }
    .btn-ticker-step {
      background: var(--card-bg);
      border: 1px solid var(--border-thin);
      color: var(--ink-dim);
      font-size: 11.5px;
      padding: 2px 4px;
      cursor: pointer;
      line-height: 1;
      font-family: inherit;
    }
    .btn-ticker-step:hover {
      color: var(--ink);
      border-color: var(--ink);
    }
    .highlights-list-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 220px;
      overflow-y: auto;
      padding-right: 4px;
      margin-top: 4px;
    }
    .highlight-list-row {
      background: var(--card-inner);
      border: var(--border-thin);
      padding: 6px 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      font-size: 12px;
    }
    .highlight-list-text {
      flex: 1;
      min-width: 0;
      color: var(--ink);
    }
    .highlight-list-meta {
      font-size: 11.5px;
      color: var(--ink-dim);
      white-space: nowrap;
    }

    /* RESPONSIVIDADE E AJUSTES DE TELA */
    @media (max-width: 1200px) {
      .fleet-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 1050px) {
      .top-header-box {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
      }
      .header-right {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
      }
      .agency-ops-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
      .ops-shields-wrap {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
      }
    }
    @media (max-width: 650px) {
      .fleet-grid {
        grid-template-columns: 1fr;
      }
      .tactical-log-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }
      .telemetry-row {
        flex-direction: column;
        gap: 4px;
      }
      .telemetry-col-label {
        width: 100%;
      }
    }

    /* ==========================================================
       CAMADA RESPONSIVA (mobile). Os breakpoints anteriores
       paravam em 650px: abaixo disso nada era tratado.
       ========================================================== */
    @media (max-width: 820px) {
      body { padding: 18px 12px 56px 12px; }
      .app-viewport { gap: 14px; }
      .top-header-box { padding: 14px 14px; }
      .agency-ops-bar { padding: 8px 12px; }
      .fleet-grid { grid-template-columns: 1fr; gap: 12px; }
      .focus-card-container { padding: 14px; gap: 12px; }
      .modal-overlay { padding: 10px; align-items: flex-start; }
      .modal-blueprint-card { width: 100% !important; max-width: 100% !important; max-height: 92vh; overflow-y: auto; }
      .auth-gate-card { max-width: 100%; padding: 22px 16px; }
      .repo-select-strip, .telemetry-table-sheet, .skills-assembly-deck, .skills-dropzone {
        max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
      }
      .repo-select-strip { flex-wrap: wrap; gap: 8px; }
      .repo-dropdown-input { max-width: 100%; }
      button, .btn-connect-this-repo, .btn-back-fleet, .modal-close-btn { min-height: 44px; }
    }

    @media (max-width: 480px) {
      body { padding: 12px 8px 48px 8px; }
      .top-header-box { flex-direction: column; align-items: stretch; gap: 10px; }
      .telemetry-row { grid-template-columns: 1fr; gap: 4px; }
      .telemetry-col-label { width: 100%; }
      .focus-card-top { flex-direction: column; align-items: stretch; gap: 10px; }
      .btn-back-fleet { width: 100%; }
      html, body { max-width: 100%; overflow-x: hidden; }
      img, svg, canvas, table, pre { max-width: 100%; }
    }

/* ==========================================================================
   ACESSIBILIDADE
   ========================================================================== */

/* Foco visível em tudo que recebe teclado. O painel não tinha nenhum. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* Rótulo lido por leitor de tela, invisível na tela. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Quem pediu menos movimento no sistema recebe a interface parada. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Celular: as faixas do card e a barra de operações precisam quebrar linha,
   senão o conteúdo some cortado na borda direita. */
@media (max-width: 650px) {
  .fleet-card,
  .fleet-card-header,
  .card-repo-strip,
  .card-workers-strip,
  .card-skills-strip {
    min-width: 0;
  }

  .card-repo-strip,
  .card-workers-strip,
  .card-skills-strip,
  .card-skills-list,
  .card-workers-live-list,
  .agency-ops-bar,
  .ops-bar-left,
  .ops-shields-wrap,
  .fleet-card-footer {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .card-repo-name {
    overflow-wrap: anywhere;
  }

  .technical-mini-graph-box {
    overflow-x: auto;
  }
}

    /* =====================================================================
       HISTÓRICO VIVO: a conversa entre operador e IA, como ela aconteceu.
       Pessoa e máquina se distinguem pela matéria (fundo e peso), não por
       rótulo; a origem de cada turno vem escrita, porque relato não é prova.
       ===================================================================== */
    .historico-rolagem {
      max-height: 360px;
      overflow-y: auto;
      border: var(--border-thin);
      background: var(--card-inner);
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* Aviso de gravação: não é rodapé nem letra miúda. Quem vai ter a conversa
       guardada precisa ler isso antes, e por isso ele fica acima do log. */
    .aviso-gravacao {
      font-size: 12px;
      line-height: 1.55;
      color: var(--ink);
      background: rgba(217, 119, 6, 0.08);
      border: 1px solid rgba(217, 119, 6, 0.45);
      padding: 7px 9px;
      margin: 0 0 6px;
      max-width: 78ch;
    }

    .historico-idade {
      font-family: var(--fonte-texto);
      font-size: 10px;
      color: var(--ink-dim);
      font-weight: 700;
    }

    .historico-vazio {
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      color: var(--ink-dim);
      line-height: 1.6;
      padding: 10px 6px;
    }
    .historico-vazio code {
      font-size: 11px;
      color: var(--ink);
    }

    .historico-dia {
      font-family: var(--fonte-texto);
      font-size: 10px;
      font-weight: 700;
      color: var(--ink-dim);
      text-transform: none;
      border-bottom: var(--border-thin);
      padding-bottom: 2px;
      margin-top: 6px;
    }

    .historico-faixa-operador {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-top: 4px;
    }
    .historico-quem-nome {
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      font-weight: 800;
      color: var(--ink);
    }
    .historico-ferramenta {
      font-family: var(--fonte-texto);
      font-size: 10px;
      color: var(--ink-dim);
    }

    .historico-turno {
      border: var(--border-thin);
      padding: 6px 8px;
      background: var(--card-bg);
    }
    .historico-turno.de-pessoa {
      background: var(--card-bg);
    }
    .historico-turno.de-maquina {
      background: rgba(125, 125, 125, 0.06);
    }

    .historico-cabeca {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 3px;
    }
    .historico-autor {
      font-family: var(--fonte-texto);
      font-size: 10.5px;
      font-weight: 800;
      color: var(--ink);
      text-transform: none;
      letter-spacing: 0.03em;
    }
    .historico-hora {
      font-family: var(--fonte-texto);
      font-size: 10px;
      color: var(--ink-dim);
      font-variant-numeric: tabular-nums;
    }

    .historico-selo {
      font-family: var(--fonte-texto);
      font-size: 9.5px;
      font-weight: 700;
      padding: 0 4px;
      letter-spacing: 0.04em;
    }
    .historico-selo.prova {
      color: #10b981;
      border: 1px solid rgba(16, 185, 129, 0.4);
      background: rgba(16, 185, 129, 0.1);
    }
    .historico-selo.relato {
      color: #d97706;
      border: 1px dashed rgba(217, 119, 6, 0.55);
      background: transparent;
    }

    .historico-texto {
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--ink);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .historico-corte {
      display: block;
      font-family: var(--fonte-texto);
      font-size: 10px;
      color: var(--ink-dim);
      margin-top: 3px;
    }

    .historico-ferramentas {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 5px;
    }
    .historico-ferr {
      font-family: var(--fonte-texto);
      font-size: 10px;
      color: var(--ink-dim);
      border: 1px solid var(--border-thin);
      padding: 0 4px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @media (max-width: 640px) {
      .historico-rolagem { max-height: 280px; }
      .historico-texto { font-size: 12px; }
    }

    /* =====================================================================
       TERMO COM EXPLICAÇÃO: parado 2 segundos em cima, o balão abre.
       Marca discreta: sublinhado pontilhado, sem cor de link e sem ícone.
       ===================================================================== */
    .termo {
      border-bottom: 1px dotted var(--ink-dim);
      cursor: help;
    }
    .termo:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }

    .oppack-tooltip {
      position: fixed;
      /* Acima dos modais (99999): explicação que abre atrás da janela não explica. */
      z-index: 100000;
      max-width: 330px;
      background: var(--card-bg);
      border: var(--border-ink);
      box-shadow: var(--shadow-ink);
      padding: 8px 10px;
      pointer-events: none;
    }
    .oppack-tooltip[hidden] { display: none !important; }

    .oppack-tooltip-titulo {
      font-family: var(--fonte-texto);
      font-size: 10.5px;
      font-weight: 800;
      text-transform: none;
      letter-spacing: 0.06em;
      color: var(--ink);
      margin-bottom: 4px;
    }
    .oppack-tooltip-corpo {
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--ink);
    }

    @media (max-width: 640px) {
      .oppack-tooltip { max-width: calc(100vw - 32px); }
    }

    /* =====================================================================
       CONTEXTO DE TRABALHO: o de agora, com fonte e idade. A descrição do
       cadastro continua acessível, mas dobrada e datada.
       ===================================================================== */
    .contexto-agora {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 3px;
    }
    .contexto-fonte,
    .contexto-idade,
    .contexto-autor {
      font-family: var(--fonte-texto);
      font-size: 10px;
      font-weight: 700;
      color: var(--ink-dim);
    }
    .contexto-fonte {
      color: var(--ink);
      border: 1px solid var(--border-thin);
      padding: 0 4px;
      text-transform: none;
      letter-spacing: 0.04em;
    }
    .contexto-texto {
      font-size: 13px;
      line-height: 1.55;
      color: var(--ink);
      overflow-wrap: anywhere;
    }
    .contexto-vazio {
      font-family: var(--fonte-texto);
      font-size: 11.5px;
      color: var(--ink-dim);
    }
    .contexto-descricao {
      margin-top: 6px;
    }
    .contexto-descricao > summary {
      font-family: var(--fonte-texto);
      font-size: 10px;
      color: var(--ink-dim);
      cursor: pointer;
      text-transform: none;
      letter-spacing: 0.04em;
    }
    .contexto-descricao-texto {
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--ink-dim);
      margin-top: 4px;
      padding-left: 8px;
      border-left: 1px solid var(--border-thin);
    }
    .contexto-ver-evolucao {
      margin-top: 6px;
    }

    /* =====================================================================
       RESPOSTAS AO VIVO: doca de OpPack Contexts (config real, do servidor) e
       as sessões vivas (do pulso real). Sem dado de demonstração.
       ===================================================================== */
    .respostas-resumo { font-family: var(--fonte-texto); font-size: 10px; color: var(--ink-dim); font-weight: 700; }

    .dock-oppack { border: 1px solid var(--rule); background: var(--card-inner); padding: 10px 11px; margin-bottom: 10px; }
    .dock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    .dock-titulo { font-family: var(--fonte-texto); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: none; color: var(--ink-dim); }
    .dock-nota { font-family: var(--fonte-texto); font-size: 9.5px; color: var(--ink-dim); opacity: 0.8; }
    .dock-trilho { display: flex; flex-wrap: wrap; gap: 7px; }
    .pkg { position: relative; font-family: var(--fonte-texto); border: 1px solid var(--rule-strong, #9EA9A2); background: var(--card-bg); padding: 6px 10px; display: inline-flex; align-items: center; gap: 8px; transition: transform .14s, box-shadow .14s, border-color .14s, background .14s; }
    .pkg[role="button"] { cursor: pointer; }
    .pkg[aria-disabled="true"] { cursor: default; }
    .pkg:focus-visible { outline: 2px solid #0B6B46; outline-offset: 2px; }
    .pkg .pkg-pino { width: 8px; height: 8px; border: 1px solid var(--rule-strong, #9EA9A2); background: var(--card-bg); flex: none; transition: background .14s, border-color .14s; }
    .pkg .pkg-nome { font-size: 12px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
    .pkg .pkg-qtd { font-size: 9.5px; color: var(--ink-dim); border-left: 1px solid var(--rule); padding-left: 7px; }
    .pkg[aria-pressed="false"] { background: transparent; }
    .pkg[aria-pressed="false"] .pkg-nome { color: var(--ink-dim); font-weight: 400; }
    .pkg[aria-pressed="false"][role="button"]:hover { transform: translateY(-1px); border-color: var(--ink); }
    .pkg[aria-pressed="true"] { border-color: #0B6B46; box-shadow: 3px 3px 0 rgba(11,107,70,0.12), 0 0 0 1px #0B6B46 inset; transform: translateY(-1px); }
    .pkg[aria-pressed="true"] .pkg-pino { background: #0B6B46; border-color: #0B6B46; }

    .respostas-sessoes { display: flex; flex-direction: column; gap: 8px; }
    .respostas-vazio { font-family: var(--fonte-texto); font-size: 11.5px; color: var(--ink-dim); line-height: 1.6; padding: 8px 4px; }
    .respostas-vazio b { color: var(--ink); }
    .sessao-viva { border: 1px solid #0B6B46; background: var(--card-inner); padding: 9px 11px; }
    .sessao-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
    .sessao-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .sessao-op { font-weight: 700; font-size: 13px; color: var(--ink); }
    .sessao-ia { font-family: var(--fonte-texto); font-size: 10.5px; color: var(--ink-dim); }
    .sessao-chip { font-family: var(--fonte-texto); font-size: 10px; font-weight: 700; border: 1px solid var(--rule-strong, #9EA9A2); padding: 0 4px; color: var(--ink); }
    .sessao-sinal { font-family: var(--fonte-texto); font-size: 10px; color: #0B6B46; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
    .sessao-dot { width: 7px; height: 7px; border-radius: 50%; background: #0B6B46; box-shadow: 0 0 6px rgba(11,107,70,0.6); }
    .sessao-aguardando { font-family: var(--fonte-texto); font-size: 10.5px; color: var(--ink-dim); line-height: 1.5; margin-top: 6px; }

    /* tooltip do pacote: parado 2s, as perguntas e a fonte */
    .pkg-tip { position: fixed; z-index: 100000; width: 340px; max-width: calc(100vw - 24px); background: var(--card-bg); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--rule-strong, #9EA9A2); padding: 13px 14px; pointer-events: none; }
    .pkg-tip[hidden] { display: none !important; }
    .pkg-tip .t-nome { font-family: var(--fonte-texto); font-size: 13px; font-weight: 700; color: var(--ink); }
    .pkg-tip .t-sub { font-family: var(--fonte-texto); font-size: 10px; color: var(--ink-dim); margin: 2px 0 10px; }
    .pkg-tip ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
    .pkg-tip li { display: grid; grid-template-columns: 16px 1fr; gap: 2px 7px; align-items: baseline; }
    .pkg-tip .num { font-family: var(--fonte-texto); font-size: 10px; color: var(--ink-dim); }
    .pkg-tip .q { font-size: 12.5px; line-height: 1.4; color: var(--ink); }
    .pkg-tip .fonte { grid-column: 2; font-family: var(--fonte-texto); font-size: 9.5px; color: #0B6B46; border: 1px solid #0B6B46; padding: 0 4px; justify-self: start; margin-top: 1px; }

    /* entrevista: uma sessão por operador × IA, cada pergunta com a resposta ou o vazio */
    .respostas-carrossel { display: flex; flex-direction: column; gap: 10px; }
    .respostas-carrossel.varias { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
    .respostas-carrossel.varias > .sessao-viva { flex: 0 0 min(560px, 88%); scroll-snap-align: start; }
    .sessao-parada { border-color: var(--rule-strong); }
    .sessao-sinal-parado { color: var(--ink-dim); }
    .rp-context { margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 8px; }
    .rp-context-head { display: flex; justify-content: space-between; font-family: var(--fonte-texto); font-size: 11px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
    .rp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
    .rp-item { display: grid; grid-template-columns: 16px 1fr; gap: 2px 8px; align-items: baseline; }
    .rp-n { font-family: var(--fonte-texto); font-size: 11px; color: var(--ink-dim); }
    .rp-q { font-size: 12px; color: var(--ink-dim); line-height: 1.4; }
    .rp-a { grid-column: 2; font-size: 13px; color: var(--ink); line-height: 1.45; }
    .rp-meta { grid-column: 2; font-family: var(--fonte-texto); font-size: 11px; color: #0B6B46; }
    .rp-pendente .rp-a, .rp-semdado .rp-a { font-family: var(--fonte-texto); font-size: 11px; color: var(--ink-dim); font-style: italic; }

    /* histórico das respostas: um lote por linha, aberto sob demanda */
    .historico-respostas { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
    .hr-titulo { font-family: var(--fonte-texto); font-size: 11px; color: var(--ink-dim); }
    .hr-lote { border: 1px solid var(--rule); background: var(--card-inner); padding: 7px 10px; }
    .hr-lote summary { cursor: pointer; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-family: var(--fonte-texto); font-size: 11px; color: var(--ink); }
    .hr-quando { font-weight: 700; }
    .hr-quem { color: var(--ink-dim); }
    .hr-qtd { margin-left: auto; color: #0B6B46; }
    .hr-lote .rp-lista { margin-top: 8px; }
    .bi-kpi-fonte { display: block; margin-top: 4px; font-family: var(--fonte-texto); font-size: 10.5px; font-weight: 400; color: var(--ink-dim); line-height: 1.4; }

    /* estado do pedido de cada context (fase 3) */
    .rp-pedido { font-weight: 400; font-size: 10.5px; }
    .pedido-ok { color: #0B6B46; }
    .pedido-vivo { color: var(--ink-dim); }
    .pedido-atrasado { color: #b45309; font-weight: 700; }

    /* selo de verificação da citação (fase 4) */
    .rp-selo { display: inline-block; font-family: var(--fonte-texto); font-size: 10px; font-weight: 700; padding: 0 5px; border: 1px solid currentColor; }
    .selo-ok { color: #0B6B46; }
    .selo-falha { color: #b45309; }
    .selo-neutro { color: var(--ink-dim); font-weight: 400; }

    /* Barra Dinâmica de Sinais 4D da Frota (Multi-Cliente / Multi-Conta) */
    .fleet-signals-stream-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--card-bg);
      border: 1px solid var(--border-thin);
      padding: 6px 14px;
      margin-bottom: 12px;
      font-family: var(--fonte-texto);
      overflow-x: auto;
      white-space: nowrap;
    }
    .signals-badge-title {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 9px;
      font-weight: 800;
      color: #10b981;
      text-transform: none;
      flex-shrink: 0;
    }
    .signals-stream-scroll {
      display: flex;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      flex-grow: 1;
    }
    .btn-refresh-signals {
      background: transparent;
      border: 1px solid var(--border-thin);
      color: var(--ink-dim);
      font-family: var(--fonte-texto);
      font-size: 8px;
      font-weight: 700;
      padding: 3px 8px;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.2s;
    }
    .btn-refresh-signals:hover {
      border-color: #10b981;
      color: #10b981;
    }
    .fleet-signal-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 2.5px 8px;
      font-family: var(--fonte-texto);
      font-size: 8.5px;
      white-space: nowrap;
    }