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

    :root {
      --bg:      #f1f5f9;
      --bg-alt:  #f8fafc;
      --card:    #ffffff;
      --border:  #e2e8f0;
      --text:    #1e293b;
      --muted:   #64748b;
      --blue:    #3b82f6;
      --red:     #ef4444;
      --amber:   #f59e0b;
      --green:   #22c55e;
      --radius:  10px;
      --shadow:  0 1px 4px rgba(0,0,0,.08);
      --hover-bg: #f8fafc;

      /* Spacing system */
      --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;
      --sp-4: 16px; --sp-6: 24px;  --sp-8: 32px;

      /* Font scale */
      --text-xs:   10px;
      --text-sm:   12px;
      --text-base: 13px;
      --text-md:   14px;
      --text-lg:   16px;
      --text-xl:   20px;

      /* Border radius system */
      --radius-sm:   6px;
      --radius-md:   10px;
      --radius-lg:   14px;
      --radius-full: 999px;

      /* Elevation */
      --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
      --shadow-md: 0 4px 12px rgba(0,0,0,.12);
      --shadow-lg: 0 8px 24px rgba(0,0,0,.18);
      --badge-alto-bg: #fee2e2;
      --badge-alto-color: #b91c1c;
      --badge-medio-bg: #fef3c7;
      --badge-medio-color: #92400e;
      --badge-baixo-bg: #dcfce7;
      --badge-baixo-color: #15803d;
      --badge-laranja-bg: #ffedd5;
      --badge-laranja-color: #c2410c;
      --badge-amarelo-bg: #fef9c3;
      --badge-amarelo-color: #854d0e;
      
      /* Pivot light */
      --pivot-bg: #ffffff;
      --pivot-border: #e2e8f0;
      --pivot-text: #1e293b;
      --pivot-muted: #94a3b8;
      --pivot-th-text: #64748b;
      --pivot-year: #1e293b;
      --pivot-toggle: #64748b;
      --pivot-row-cliente: #f8fafc;
      --pivot-row-cliente-text: #1e293b;
      --pivot-row-setor: #ffffff;
      --pivot-row-usuario: #ffffff;
      --pivot-row-tela: #fcfcfc;
    }

    [data-theme="dark"] {
      --bg:      #0f172a;
      --bg-alt:  #1e293b;
      --card:    #1e293b;
      --border:  #334155;
      --text:    #f8fafc;
      --muted:   #94a3b8;
      --shadow:  0 4px 6px rgba(0,0,0,.3);
      --hover-bg: #334155;
      --badge-alto-bg: rgba(239,68,68,0.2);
      --badge-alto-color: #fca5a5;
      --badge-medio-bg: rgba(245,158,11,0.2);
      --badge-medio-color: #fcd34d;
      --badge-baixo-bg: rgba(34,197,94,0.2);
      --badge-baixo-color: #86efac;
      --badge-laranja-bg: rgba(249,115,22,0.2);
      --badge-laranja-color: #fdba74;
      --badge-amarelo-bg: rgba(234,179,8,0.2);
      --badge-amarelo-color: #fde047;
      
      /* Pivot dark (as requested previously) */
      --pivot-bg: #1a1f2e;
      --pivot-border: #334155;
      --pivot-text: #e2e8f0;
      --pivot-muted: #475569;
      --pivot-th-text: #94a3b8;
      --pivot-year: #ffffff;
      --pivot-toggle: #cbd5e1;
      --pivot-row-cliente: #1e2538;
      --pivot-row-cliente-text: #ffffff;
      --pivot-row-setor: #1a1f2e;
      --pivot-row-usuario: #1a1f2e;
      --pivot-row-tela: #1f2937;
    }

    body {
      font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-feature-settings: "cv02","cv03","cv04","cv11";
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      line-height: 1.5;
    }

    /* ── Header ─────────────────────────────────────── */
    header {
      background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
      color: #fff;
      padding: 18px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    header h1 { font-size: 18px; font-weight: 600; letter-spacing: .3px; }
    header small { font-size: 12px; opacity: .75; }
    #btn-refresh {
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.35);
      color: #fff;
      padding: 6px 14px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
    }
    #btn-refresh:hover { background: rgba(255,255,255,.25); }

    /* ── Layout ──────────────────────────────────────── */
    main { padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; width: 100%; }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 20px;
    }
    .card-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 14px;
    }

    /* ── KPI row ─────────────────────────────────────── */
    .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .kpi { text-align: center; padding: 18px 12px; }
    .kpi .kpi-value { font-size: 32px; font-weight: 700; line-height: 1; margin: 6px 0 4px; }
    .kpi .kpi-label { font-size: 12px; color: var(--muted); }
    .kpi.alto  .kpi-value { color: var(--red); }
    .kpi.medio .kpi-value { color: var(--amber); }
    .kpi.baixo .kpi-value { color: var(--green); }
    .kpi.total .kpi-value { color: var(--blue); }

    /* ── Charts row ──────────────────────────────────── */
    .charts-row { display: grid; grid-template-columns: 340px 1fr; gap: 16px; }
    .chart-wrap { position: relative; height: 260px; }

    /* ── Table ───────────────────────────────────────── */
    .table-wrap { overflow-x: auto; max-height: 50vh; overflow-y: auto; }
    .table-wrap thead { position: sticky; top: 0; z-index: 2; background: var(--card); }
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    th { text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 600;
         color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
         border-bottom: 2px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; transition: color .2s; }
    th:hover { color: var(--text); }
    td { padding: 5px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: var(--hover-bg); }

    /* Score bar */
    .score-cell { display: flex; align-items: center; gap: 8px; }
    .score-bar-wrap { flex: 1; background: var(--bg); border-radius: 4px; height: 8px; overflow: hidden; }
    .score-bar { height: 100%; border-radius: 4px; transition: width .4s ease; }
    .score-num { font-weight: 600; font-size: 13px; width: 44px; text-align: right; flex-shrink: 0; }

    /* Badges */
    .badge {
      display: inline-block; padding: 2px 9px; border-radius: 20px;
      font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
    }
    .badge.alto  { background: var(--badge-alto-bg); color: var(--badge-alto-color); }
    .badge.medio { background: var(--badge-medio-bg); color: var(--badge-medio-color); }
    .badge.baixo { background: var(--badge-baixo-bg); color: var(--badge-baixo-color); }
    .badge.laranja { background: var(--badge-laranja-bg); color: var(--badge-laranja-color); }
    .badge.amarelo { background: var(--badge-amarelo-bg); color: var(--badge-amarelo-color); }

    /* ── Metrics grid ────────────────────────────────── */
    .metrics-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
    .metric-card { }
    .metric-card .horizon-label {
      font-size: 18px; font-weight: 700; color: var(--blue); margin-bottom: 10px;
    }
    .metric-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .metric-item { }
    .metric-item .m-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
    .metric-item .m-value { font-size: 22px; font-weight: 700; color: var(--text); }
    .metric-item .m-value.auc { color: var(--blue); }
    .meta-row { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
    .meta-item { font-size: 11px; color: var(--muted); }
    .meta-item span { color: var(--text); font-weight: 500; }

    /* ── Empty / loading states ──────────────────────── */
    .empty {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 40px 0; color: var(--muted); font-size: 13px;
      text-align: center; width: 100%; height: 100%;
    }
    .empty-icon { font-size: 28px; margin-bottom: 8px; }

    /* ── Variation cell ──────────────────────────────── */
    .var-pos { color: var(--green); font-weight: 600; }
    .var-neg { color: var(--red);   font-weight: 600; }
    .var-nil { color: var(--muted); }

    /* ── Pivot table ────────────────────── */
    .pivot-wrap { overflow-x: auto; background: var(--pivot-bg); border-radius: 6px; padding: 1px; border: 1px solid var(--border); }
    .pivot-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 700px; color: var(--pivot-text); }
    .pivot-table th {
      padding: 10px 12px; font-size: 11px; font-weight: 600;
      color: var(--pivot-th-text); text-transform: uppercase; letter-spacing: .4px;
      border-bottom: 1px solid var(--pivot-border); white-space: nowrap;
      text-align: center;
    }
    .pivot-table th.col-cliente { text-align: left; min-width: 240px; }
    .pivot-table th.col-year {
      font-size: 13px; font-weight: 600; color: var(--pivot-year);
      border-bottom: none; text-align: center; padding-bottom: 2px;
    }
    .pivot-table td { padding: 6px 12px; border-bottom: 1px solid var(--pivot-border); white-space: nowrap; }
    .pivot-table td.col-num { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
    .pivot-table td.col-num.pivot-empty { color: var(--pivot-muted); font-weight: 400; }
    
    .toggle-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 16px; height: 16px; border: 1px solid var(--pivot-toggle);
      background: transparent; cursor: pointer; font-size: 10px; margin-right: 8px;
      flex-shrink: 0; color: var(--pivot-toggle); user-select: none;
    }
    
    .pivot-row-cliente td { background: var(--pivot-row-cliente); font-weight: 700; color: var(--pivot-row-cliente-text); text-transform: uppercase; }
    .pivot-row-usuario td { background: var(--pivot-row-usuario); font-weight: 600; padding-left: 28px; border-bottom: 1px solid var(--pivot-border); }
    .pivot-row-tela td    { background: var(--pivot-row-tela); font-weight: 400; padding-left: 48px; font-size: 12px; border-bottom: 1px solid var(--pivot-border); }
    .carteira-user-cell {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .carteira-user-toggle {
      width: 18px;
      height: 18px;
      margin-right: 0;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
    }
    .carteira-user-toggle.is-disabled {
      cursor: default;
      opacity: .4;
    }

    /* ── CS Cockpit: abas de fase ───────────────── */
    .cs-fase-tab {
      padding: 8px 18px;
      border: none;
      border-bottom: 3px solid transparent;
      background: none;
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: color .15s, border-color .15s;
      margin-bottom: -2px;
    }
    .cs-fase-tab:hover { color: var(--text); }
    .cs-fase-tab-active { color: var(--text) !important; border-bottom-color: #3b82f6 !important; }

    /* ── CS Cockpit: pills de status ───────────── */
    .cs-status-pill {
      padding: 3px 12px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: none;
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: background .15s, color .15s;
    }
    .cs-status-pill:hover { background: var(--border); color: var(--text); }
    .cs-status-pill-active {
      background: #3b82f6 !important;
      border-color: #3b82f6 !important;
      color: #fff !important;
    }

    /* ── CS Cockpit: grid de linhas ─────────────────────────────────────── */
    .cs-row-wrap {
      background: var(--card);
      border: 1px solid var(--border);
      border-left: 3px solid var(--border);
      border-radius: 6px;
    }
    .cs-row-wrap > .cs-row-l1 { border-radius: 6px 6px 0 0; }
    .cs-row-wrap > .cs-row-l2 { border-radius: 0 0 6px 6px; }
    .cs-row-wrap + .cs-row-wrap { margin-top: 3px; }
    .cs-row-vencido { border-left-color: #dc2626 !important; }
    .cs-row-hoje    { border-left-color: #d97706 !important; }

    .cs-row-l1 {
      display: grid;
      grid-template-columns: 200px 1fr 130px 90px 120px;
      align-items: center;
      padding: 7px 12px;
      gap: 8px;
      min-height: 42px;
    }
    .cs-row-l2 {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 2px 12px 6px 12px;
      border-top: 1px solid var(--border);
      background: var(--bg);
    }

    .cs-col-sla  { display: flex; align-items: center; gap: 5px; }
    .cs-col-cliente { min-width: 0; }
    .cs-col-status  { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
    .cs-col-resp    { min-width: 0; }
    .cs-col-fu      { }
    .cs-col-acoes   { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }

    .cs-nome-cliente { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
    .cs-nome-usuario { font-size: 12px; color: var(--muted); }

    .cs-l2-tag  { font-size: 11px; color: var(--muted); background: var(--card); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
    .cs-l2-texto { font-size: 11px; color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cs-l2-data  { font-size: 10px; color: var(--border); flex-shrink: 0; }

    .cs-btn-primary {
      padding: 4px 14px; border: none; border-radius: 5px;
      background: #2563eb; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
      white-space: nowrap;
    }
    .cs-btn-primary:hover { background: #1d4ed8; }
    .cs-btn-muted { background: var(--border) !important; color: var(--muted) !important; }
    .cs-btn-more {
      padding: 3px 8px; border: 1px solid var(--border); border-radius: 5px;
      background: none; color: var(--muted); font-size: 14px; font-weight: 700;
      cursor: pointer; letter-spacing: 1px; line-height: 1;
    }
    .cs-btn-more:hover { background: var(--border); color: var(--text); }

    .cs-dropdown {
      position: absolute; right: 0; top: 100%; margin-top: 4px;
      background: var(--card); border: 1px solid var(--border); border-radius: 6px;
      box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 500;
      flex-direction: column; min-width: 140px; padding: 4px;
    }
    .cs-dropdown button {
      display: block; width: 100%; text-align: left;
      padding: 7px 12px; border: none; background: none;
      color: var(--text); font-size: 13px; cursor: pointer; border-radius: 4px;
    }
    .cs-dropdown button:hover { background: var(--bg); }

    .carteira-pivot-row td {
      background: transparent;
    }
    .carteira-user-pivot {
      margin-top: 2px;
      border: 1px solid rgba(148,163,184,.14);
      border-radius: 12px;
      background: rgba(15,23,42,.16);
      overflow: hidden;
    }
    .carteira-user-pivot-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px 10px;
      border-bottom: 1px solid rgba(148,163,184,.12);
      background: rgba(15,23,42,.22);
    }
    .carteira-user-pivot-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      text-transform: uppercase;
      letter-spacing: .35px;
    }
    .carteira-user-pivot-meta {
      font-size: 11px;
      color: var(--muted);
      text-align: right;
    }
    .carteira-user-pivot-wrap {
      border: none;
      border-radius: 0;
      background: transparent;
      padding: 0;
    }
    .carteira-user-pivot-table {
      min-width: 820px;
    }

    .trend-up   { color: #22c55e; font-size: 12px; margin-left: 6px; }
    .trend-down { color: #ef4444; font-size: 12px; margin-left: 6px; }
    .trend-same { color: #f59e0b; font-size: 12px; margin-left: 6px; }

    /* ── Tabs ────────────────────────────────────────── */
    .tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 12px; flex-wrap: wrap; }
    .tab-btn {
      background: transparent; border: none; padding: 8px 14px; font-size: 12px; font-weight: 600;
      color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
      text-transform: uppercase; letter-spacing: .4px; transition: all .2s ease;
    }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }
    /* Tabs inside header (blue background) */
    header .tabs { border-bottom: 2px solid rgba(255,255,255,.2); margin-bottom: 0; }
    header .tab-btn { color: rgba(255,255,255,.6); }
    header .tab-btn:hover { color: rgba(255,255,255,.9); }
    header .tab-btn.active { color: #fff; border-bottom-color: #fff; }

    /* ── Tab Dropdown ────────────────────────────────── */
    .tab-dropdown { position: relative; display: inline-flex; align-items: stretch; }
    .tab-dropdown-trigger { display: flex; align-items: center; gap: 5px; }
    .tab-dropdown-trigger .dd-arrow { font-size: 9px; opacity: .7; transition: transform .2s; }
    .tab-dropdown.open .dd-arrow { transform: rotate(180deg); }
    .tab-dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 180px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
      z-index: 999;
      padding: 4px 0;
      flex-direction: column;
    }
    .tab-dropdown.open .tab-dropdown-menu { display: flex; }
    .tab-dropdown-menu button {
      background: transparent;
      border: none;
      text-align: left;
      padding: 10px 18px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: .4px;
      transition: background .15s, color .15s;
      white-space: nowrap;
    }
    .tab-dropdown-menu button:hover { background: rgba(59,130,246,.15); color: var(--blue); }
    .tab-dropdown-menu button.active { color: var(--blue); }

    /* ── MySQL Contratos filtros ─────────────────────── */
    .mc-filtro-btn {
      background: var(--bg); border: 1px solid var(--border); color: var(--muted);
      padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600;
      cursor: pointer; transition: all .15s;
    }
    .mc-filtro-btn:hover { border-color: var(--blue); color: var(--blue); }
    .mc-filtro-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
    .tab-content { display: none; flex-direction: column; gap: 20px; }
    .tab-content.active { display: flex; }
    .feature-subtabs {
      display: inline-flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 14px;
    }
    .feature-subtab-btn {
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--muted);
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all .2s ease;
    }
    .feature-subtab-btn:hover { color: var(--text); border-color: var(--blue); }
    .feature-subtab-btn.active {
      background: rgba(59,130,246,.10);
      color: var(--blue);
      border-color: rgba(59,130,246,.35);
    }
    .feature-subtab-content { display: none; flex-direction: column; gap: 16px; }
    .feature-subtab-content.active { display: flex; }
    .report-definition-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 12px;
    }
    .report-definition-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg);
      padding: 14px;
    }
    .report-definition-card .def-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-bottom: 6px;
    }
    .report-definition-card .def-title {
      font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 14px;
      font-weight: 700;
      color: var(--blue);
      margin-bottom: 8px;
    }
    .report-definition-card .def-body {
      font-size: 12px;
      color: var(--text);
      margin-bottom: 8px;
    }
    .report-definition-card .def-formula {
      font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 11px;
      color: var(--muted);
      line-height: 1.5;
      word-break: break-word;
    }

    .cancel-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    .compare-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 12px;
    }
    .compare-card {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      padding: 14px;
    }
    .compare-card .compare-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-bottom: 10px;
    }
    .compare-card .compare-values {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      align-items: end;
    }
    .compare-card .compare-group {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .4px;
    }
    .compare-card .compare-number {
      font-size: 22px;
      font-weight: 700;
      line-height: 1.1;
      color: var(--text);
    }
    .compare-card .compare-number.cancel {
      color: var(--red);
    }
    .compare-card .compare-number.base {
      color: var(--blue);
    }
    .status-pill-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }
    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--bg);
      border: 1px solid var(--border);
      font-size: 12px;
      color: var(--text);
    }
    .status-pill strong {
      color: var(--blue);
    }

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

    @media (max-width: 640px) {
      .kpi-row { grid-template-columns: 1fr; }
      .carteira-user-pivot-head {
        flex-direction: column;
      }
      .carteira-user-pivot-meta {
        text-align: left;
      }
    }

    
    .metric-hero { display: flex; gap: 10px; margin-bottom: 14px; }
    .metric-hero-item {
      flex: 1; text-align: center; padding: 10px 6px;
      background: var(--bg); border-radius: 8px;
    }
    .metric-hero-item .h-label {
      font-size: 10px; font-weight: 600; color: var(--muted);
      text-transform: uppercase; letter-spacing: .4px;
    }
    .metric-hero-item .h-value {
      font-size: 24px; font-weight: 700; line-height: 1.2; margin-top: 4px;
    }
    .metric-hero-item .h-value.f1    { color: var(--blue); }
    .metric-hero-item .h-value.prauc { color: #8b5cf6; }
    .metric-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
    .metric-item .m-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
    .metric-item .m-value { font-size: 18px; font-weight: 700; color: var(--text); }
    .cv-section {
      margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
    }
    .cv-section .cv-title {
      font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase;
      letter-spacing: .4px; margin-bottom: 8px;
    }
    .cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
    .cv-item .cv-label { font-size: 10px; color: var(--muted); }
    .cv-item .cv-value { font-size: 14px; font-weight: 600; color: var(--text); }
    .cv-item .cv-std   { font-size: 11px; color: var(--muted); }

    /* ── Help icon ───────────────────────────────────────────────────── */
    .help-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--muted); color: #fff;
      font-size: 9px; font-weight: 700; cursor: help;
      margin-left: 4px; vertical-align: middle; flex-shrink: 0;
      opacity: 0.55; transition: opacity .2s;
      line-height: 1; text-transform: none; letter-spacing: 0;
    }
    .help-icon:hover { opacity: 1; }
    .insight-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 50%;
      background: #3b82f6; color: #fff;
      font-size: 10px; font-weight: 700; cursor: help;
      vertical-align: middle; flex-shrink: 0;
      opacity: 0.75; transition: opacity .2s;
    }
    .insight-icon:hover { opacity: 1; }
    .score-tip-trigger {
      display: inline-flex; align-items: center; justify-content: center;
      width: 14px; height: 14px; border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.35);
      background: rgba(15, 23, 42, 0.08);
      color: var(--muted);
      font-size: 9px; font-weight: 700; line-height: 1;
      padding: 0; cursor: help; flex-shrink: 0;
      transition: all .18s ease;
    }
    .score-tip-trigger:hover,
    .score-tip-trigger:focus-visible {
      outline: none;
      color: #fff;
      border-color: rgba(59, 130, 246, 0.55);
      background: rgba(59, 130, 246, 0.24);
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.16);
    }
    .score-tip-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 15px; }
    .score-tip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .score-tip-kicker {
      font-size: 10px; font-weight: 700; letter-spacing: .5px;
      text-transform: uppercase; color: #94a3b8; margin-bottom: 4px;
    }
    .score-tip-title { font-size: 13px; font-weight: 600; color: #f8fafc; line-height: 1.45; }
    .score-tip-pill {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 5px 8px; border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.22);
      background: rgba(30, 41, 59, 0.9);
      font-size: 11px; font-weight: 700; white-space: nowrap;
    }
    .score-tip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .score-tip-metric {
      background: rgba(15, 23, 42, 0.32);
      border: 1px solid rgba(148, 163, 184, 0.14);
      border-radius: 10px; padding: 8px 9px;
    }
    .score-tip-metric-label {
      font-size: 10px; font-weight: 600; color: #94a3b8;
      text-transform: uppercase; letter-spacing: .35px; margin-bottom: 4px;
    }
    .score-tip-metric-value { font-size: 13px; font-weight: 700; color: #f8fafc; line-height: 1.35; }
    .score-tip-callout {
      background: rgba(59, 130, 246, 0.1);
      border-left: 3px solid rgba(96, 165, 250, 0.95);
      border-radius: 8px; padding: 9px 10px;
      font-size: 12px; color: #dbeafe; line-height: 1.5;
    }
    .score-tip-section { display: flex; flex-direction: column; gap: 6px; }
    .score-tip-series {
      display: flex; flex-direction: column; gap: 6px;
      border: 1px solid rgba(148, 163, 184, 0.14);
      border-radius: 10px; padding: 8px 9px;
      background: rgba(15, 23, 42, 0.2);
    }
    .score-tip-series-row {
      display: grid; grid-template-columns: 1fr auto auto;
      gap: 8px; align-items: center;
      font-size: 11px; color: #cbd5e1;
    }
    .score-tip-series-row strong { color: #f8fafc; font-size: 11px; }
    .score-tip-note { font-size: 11px; color: #94a3b8; line-height: 1.55; }

/* ─── CS Kanban ──────────────────────────────────────────────────────────── */
.cs-kanban-col {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  min-height: 200px;
}
.cs-kanban-col-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}
.cs-kanban-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 12px;
  cursor: default;
  transition: box-shadow .15s;
}
.cs-kanban-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.cs-kanban-card-client {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-kanban-card-user {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.cs-kanban-card-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.cs-kanban-chip {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 9px;
  font-weight: 600;
}
.cs-kanban-card-passo {
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1200px) {
  #cs-kanban-board { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px) {
  #cs-kanban-board { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  #cs-kanban-board { grid-template-columns: 1fr !important; }
}

/* ─── CS Kanban drag-and-drop ─────────────────────────────────────────────── */
.cs-kanban-card[draggable="true"] {
  cursor: grab;
}
.cs-kanban-card-dragging {
  opacity: 0.35;
  cursor: grabbing;
  transform: rotate(2deg);
}
.cs-kanban-drag-over {
  outline: 2px dashed #3b82f6 !important;
  background: rgba(59,130,246,.06) !important;
}

/* ─── Editor.js Table — override de tema ─────────────────────────────────── */
/* Corrige o fundo branco padrão que o plugin injeta no DOM                   */

.tc-table,
.tc-table__wrap,
.tc-editor,
.tc-editor__wrap {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.tc-row {
  border-color: var(--border) !important;
}

.tc-cell {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  caret-color: var(--text) !important;
}

.tc-cell[contenteditable="true"]:focus,
.tc-cell[contenteditable]:focus {
  background: var(--bg) !important;
  outline: 1px solid var(--blue) !important;
  outline-offset: -1px;
}

/* Linha de cabeçalho (primeira linha quando ativado o header) */
.tc-row--selected .tc-cell,
.tc-table__heading .tc-cell,
.tc-row:first-child .tc-cell {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-weight: 600;
}

/* Botões de adicionar coluna/linha */
.tc-add-column,
.tc-add-row,
.tc-toolbox,
.tc-toolbox__toggler,
.tc-popover,
.tc-popover__item {
  background: var(--card) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

.tc-popover__item:hover {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Wrapper geral do editor dentro do tab-docs */
#docs-editorjs .codex-editor,
#docs-editorjs .codex-editor__redactor {
  background: var(--card) !important;
  color: var(--text) !important;
}

#docs-editorjs .ce-block__content,
#docs-editorjs .ce-paragraph {
  color: var(--text) !important;
}

/* Placeholder do editor */
#docs-editorjs .codex-editor--empty .ce-paragraph[data-placeholder]::before {
  color: var(--muted) !important;
}

/* ─── Dropdown ⚙️ Configuração — botões ───────────────────────────────────── */
.dd-config-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 18px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.dd-config-item:hover {
  background: rgba(59, 130, 246, .12);
  color: #3b82f6;
}
.dd-config-item--wa:hover {
  background: rgba(37, 211, 102, .12);
  color: #25D366;
}
.dd-config-item--sair {
  color: #ef4444;
}
.dd-config-item--sair:hover {
  background: rgba(239, 68, 68, .12);
  color: #ef4444;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UTILITY CLASSES — Fase 2 da migração tipográfica
   Permitem substituir inline styles repetitivos nos template literals JS
   ───────────────────────────────────────────────────────────────────────── */

/* Layout */
.u-flex         { display: flex; }
.u-flex-col     { display: flex; flex-direction: column; }
.u-inline-flex  { display: inline-flex; }
.u-grid         { display: grid; }
.u-hidden       { display: none; }
.u-block        { display: block; }

/* Flex alignment */
.u-items-center   { align-items: center; }
.u-items-start    { align-items: flex-start; }
.u-items-end      { align-items: flex-end; }
.u-justify-center { justify-content: center; }
.u-justify-between{ justify-content: space-between; }
.u-justify-end    { justify-content: flex-end; }
.u-flex-wrap      { flex-wrap: wrap; }
.u-flex-1         { flex: 1; }
.u-flex-shrink-0  { flex-shrink: 0; }

/* Gap */
.u-gap-1 { gap: var(--sp-1); }
.u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); }
.u-gap-4 { gap: var(--sp-4); }
.u-gap-6 { gap: var(--sp-6); }

/* Margin */
.u-mt-1 { margin-top: var(--sp-1); }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mb-1 { margin-bottom: var(--sp-1); }
.u-mb-2 { margin-bottom: var(--sp-2); }
.u-mb-3 { margin-bottom: var(--sp-3); }
.u-ml-auto { margin-left: auto; }

/* Padding */
.u-p-2  { padding: var(--sp-2); }
.u-p-3  { padding: var(--sp-3); }
.u-p-4  { padding: var(--sp-4); }
.u-px-2 { padding-inline: var(--sp-2); }
.u-px-3 { padding-inline: var(--sp-3); }
.u-px-4 { padding-inline: var(--sp-4); }
.u-py-1 { padding-block: var(--sp-1); }
.u-py-2 { padding-block: var(--sp-2); }

/* Typography */
.u-text-xs   { font-size: var(--text-xs); }
.u-text-sm   { font-size: var(--text-sm); }
.u-text-base { font-size: var(--text-base); }
.u-text-md   { font-size: var(--text-md); }
.u-text-lg   { font-size: var(--text-lg); }
.u-font-400  { font-weight: 400; }
.u-font-500  { font-weight: 500; }
.u-font-600  { font-weight: 600; }
.u-font-700  { font-weight: 700; }
.u-uppercase { text-transform: uppercase; }
.u-tracking  { letter-spacing: .4px; }
.u-nowrap    { white-space: nowrap; }
.u-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-tabular   { font-variant-numeric: tabular-nums; } /* números alinhados — ideal para KPIs */

/* Colors */
.u-text-muted   { color: var(--muted); }
.u-text-blue    { color: var(--blue); }
.u-text-green   { color: var(--green); }
.u-text-red     { color: var(--red); }
.u-text-amber   { color: var(--amber); }
.u-text         { color: var(--text); }

/* Borders & radius */
.u-rounded-sm   { border-radius: var(--radius-sm); }
.u-rounded      { border-radius: var(--radius-md); }
.u-rounded-lg   { border-radius: var(--radius-lg); }
.u-rounded-full { border-radius: var(--radius-full); }
.u-border       { border: 1px solid var(--border); }
.u-border-top   { border-top: 1px solid var(--border); }

/* Misc */
.u-cursor-pointer { cursor: pointer; }
.u-select-none    { user-select: none; }
.u-overflow-hidden{ overflow: hidden; }
.u-overflow-auto  { overflow: auto; }
.u-w-full         { width: 100%; }
.u-min-w-0        { min-width: 0; }
.u-opacity-40     { opacity: .4; }
.u-transition     { transition: all .15s; }

/* Text align */
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }
.u-text-left   { text-align: left; }

/* Overflow */
.u-overflow-x-auto { overflow-x: auto; }

/* Border extras */
.u-border-bottom { border-bottom: 1px solid var(--border); }
.u-border-left   { border-left:   1px solid var(--border); }

/* Monospace */
.u-mono { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 12px; }

/* Vertical align */
.u-align-middle { vertical-align: middle; }

/* Width helpers */
.u-w-0   { width: 0; }
.u-shrink { flex-shrink: 0; width: fit-content; }