/* ============================================================
   COMPONENTES — botões, inputs, tabela, drawer, wifi, login, toasts, tweaks
   ============================================================ */
    .btn-icon {
      background: transparent; border: 1px solid var(--border); border-radius: 6px;
      width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
      color: var(--text-primary); cursor: pointer; transition: all .12s;
    }
    .btn-icon:hover { background: var(--mntox-verde-soft); border-color: var(--mntox-verde); color: var(--mntox-verde); }
    .btn-icon[aria-pressed="true"] { background: var(--mntox-verde-soft); border-color: var(--mntox-verde); color: var(--mntox-verde); }
    .btn-icon.is-sm { width: 30px; height: 30px; font-size: .85rem; }

    .btn-mntox {
      background: var(--mntox-verde); color: white; border: none;
      padding: .5rem 1rem; border-radius: 6px; font-size: .875rem; font-weight: 500;
      cursor: pointer; transition: background .12s, transform .08s;
      display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    }
    .btn-mntox:hover { background: var(--mntox-verde-hover); color: white; }
    .btn-mntox:active { transform: scale(.97); }
    .btn-mntox:disabled { background: var(--mntox-verde-strong); cursor: not-allowed; }
    .btn-mntox.btn-sm { padding: .35rem .7rem; font-size: .8rem; }

    .btn-ghost {
      background: transparent; color: var(--text-primary); border: 1px solid var(--border);
      padding: .5rem 1rem; border-radius: 6px; font-size: .875rem; font-weight: 500;
      cursor: pointer; transition: all .12s; display: inline-flex; align-items: center; gap: .4rem;
      white-space: nowrap;
    }
    .btn-ghost:hover { background: var(--bg-hover); border-color: var(--border-strong); }
    .btn-ghost.btn-sm { padding: .35rem .7rem; font-size: .8rem; }

    .btn-danger-soft {
      background: var(--state-danger-bg); color: var(--state-danger);
      border: 1px solid transparent; padding: .5rem 1rem; border-radius: 6px;
      font-size: .875rem; font-weight: 500; cursor: pointer; transition: all .12s;
      display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    }
    .btn-danger-soft:hover { background: var(--state-danger); color: white; }
    .btn-danger-soft.btn-sm { padding: .35rem .7rem; font-size: .8rem; }

    .btn-warn-soft {
      background: var(--state-warn-bg); color: var(--state-warn);
      border: 1px solid transparent; padding: .5rem 1rem; border-radius: 6px;
      font-size: .875rem; font-weight: 500; cursor: pointer; transition: all .12s;
      display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    }
    .btn-warn-soft:hover { background: var(--state-warn); color: white; }
    .btn-warn-soft.btn-sm { padding: .35rem .7rem; font-size: .8rem; }

    /* ============================================================
       INPUTS
       ============================================================ */
    .input-mntox {
      background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px;
      padding: .5rem .75rem; font-size: .875rem; color: var(--text-primary);
      outline: none; transition: border-color .12s, box-shadow .12s; width: 100%;
    }
    .input-mntox:focus { border-color: var(--mntox-verde); box-shadow: 0 0 0 3px var(--mntox-verde-soft); }
    .input-mntox::placeholder { color: var(--text-muted); }

    .search-shell {
      position: relative; flex: 1; min-width: 0; max-width: 480px;
    }
    .search-shell .bi-search {
      position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
      color: var(--text-muted); font-size: .9rem; pointer-events: none;
    }
    .search-shell .input-mntox { padding-left: 2.25rem; padding-right: 2.5rem; }
    .search-shell kbd {
      position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
      background: var(--bg-app); border: 1px solid var(--border); border-radius: 4px;
      padding: .05rem .35rem; font-size: .7rem; color: var(--text-muted);
      font-family: ui-monospace, monospace;
    }

    /* ============================================================
       CARD
       ============================================================ */
    .card-mntox {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden;
    }
    .card-mntox-header {
      padding: .9rem 1.125rem; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      gap: .75rem; flex-wrap: wrap;
    }
    .card-mntox-title { font-size: .95rem; font-weight: 600; margin: 0; color: var(--text-primary); }
    .card-mntox-body { padding: 1.125rem; }

    /* ============================================================
       STATS BAR
       ============================================================ */
    .stats-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .875rem;
    }
    @media (max-width: 767.98px) {
      .stats-bar { grid-template-columns: repeat(2, 1fr); gap: .625rem; }
    }
    @media (max-width: 399.98px) {
      .stats-bar {
        grid-template-columns: repeat(4, minmax(130px,1fr));
        overflow-x: auto; scrollbar-width: none;
        -webkit-overflow-scrolling: touch; gap: .5rem;
      }
    }

    .stat-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-left: 3px solid var(--sc-color, var(--border-strong));
      border-radius: 14px;
      padding: 1.125rem 1.125rem 1rem 1.375rem;
      cursor: pointer; text-align: left;
      display: flex; flex-direction: column; gap: .55rem;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease,
                  background .2s ease, border-left-width .15s ease;
    }
    .stat-card:hover {
      transform: translateY(-3px);
      border-color: var(--sc-color, var(--border-strong));
      border-left-width: 4px;
      box-shadow: 0 6px 24px var(--sc-glow, rgba(0,0,0,.08));
    }
    .stat-card.is-active {
      border-color: var(--sc-color); border-left-width: 4px;
      background: var(--sc-bg);
      box-shadow: 0 0 0 3px var(--sc-glow), 0 6px 20px var(--sc-glow);
    }

    .sc-total   { --sc-color: var(--text-muted);   --sc-glow: rgba(107,114,128,.12); --sc-bg: var(--bg-hover); }
    .sc-online  { --sc-color: var(--mntox-verde);  --sc-glow: var(--mntox-verde-soft); --sc-bg: var(--mntox-verde-soft); }
    .sc-pull    { --sc-color: var(--state-info);   --sc-glow: var(--state-info-bg);   --sc-bg: var(--state-info-bg); }
    .sc-offline { --sc-color: var(--state-danger); --sc-glow: var(--state-danger-bg); --sc-bg: var(--state-danger-bg); }

    .stat-card-head { display: flex; align-items: center; gap: .5rem; }
    .stat-card-icon {
      width: 32px; height: 32px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; flex-shrink: 0;
      background: var(--sc-glow, var(--bg-hover));
      color: var(--sc-color, var(--text-secondary));
      transition: transform .2s ease;
    }
    .stat-card:hover .stat-card-icon { transform: scale(1.12); }
    .stat-card-lbl {
      font-size: .68rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-muted); line-height: 1;
    }
    .stat-card-num {
      font-size: 2.25rem; font-weight: 800; color: var(--text-primary);
      letter-spacing: -.05em; line-height: 1;
      font-variant-numeric: tabular-nums; transition: color .2s;
    }
    .stat-card.is-active .stat-card-num { color: var(--sc-color); }
    @media (max-width: 767.98px) { .stat-card-num { font-size: 1.75rem; } }

    .stat-card-sub {
      font-size: .72rem; color: var(--text-muted);
      font-variant-numeric: tabular-nums;
    }
    .stat-card.is-active .stat-card-sub { color: var(--sc-color); opacity: .8; }

    .stat-card-bar { height: 3px; border-radius: 99px; background: var(--border); overflow: hidden; }
    .stat-card-bar-fill {
      height: 100%; border-radius: 99px;
      background: var(--sc-color, var(--border-strong)); width: 0%;
      transition: width .65s cubic-bezier(.4,0,.2,1);
    }

    /* ── filter pills (substituem o dropdown de status) ── */
    .filter-pills-bar {
      display: flex; align-items: center;
      gap: .5rem; padding: .6rem 1.125rem;
      border-bottom: 1px solid var(--border);
    }
    .filter-pills {
      display: flex; gap: .4rem; flex: 1; min-width: 0;
      overflow-x: auto; scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .filter-pills::-webkit-scrollbar { display: none; }
    .filter-pill {
      display: inline-flex; align-items: center; gap: .35rem;
      padding: .3rem .65rem; border-radius: 999px;
      border: 1.5px solid var(--border);
      background: transparent; color: var(--text-secondary);
      font-size: .78rem; font-weight: 600;
      white-space: nowrap; cursor: pointer; flex-shrink: 0;
      transition: all .15s;
    }
    .filter-pill:hover { border-color: var(--mntox-verde); color: var(--mntox-verde); }
    .filter-pill.is-active { border-color: var(--fp-active-color, var(--mntox-verde)); background: var(--fp-active-bg, var(--mntox-verde-soft)); color: var(--fp-active-color, var(--mntox-verde)); }
    .fp-online.is-active  { --fp-active-color: var(--mntox-verde);  --fp-active-bg: var(--mntox-verde-soft); }
    .fp-pull.is-active    { --fp-active-color: var(--state-info);   --fp-active-bg: var(--state-info-bg); }
    .fp-offline.is-active { --fp-active-color: var(--state-danger); --fp-active-bg: var(--state-danger-bg); }
    .fp-count {
      background: var(--bg-hover); border-radius: 999px;
      padding: .05rem .38rem; font-size: .7rem; font-weight: 700;
      transition: background .15s, color .15s;
    }
    .filter-pill.is-active .fp-count { background: var(--fp-active-color, var(--mntox-verde)); color: #fff; }
    .fp-action { white-space: nowrap; flex-shrink: 0; }
    .fp-action-label { display: inline; }
    @media (max-width: 479.98px) { .fp-action-label { display: none; } }

    /* ── legado ── */
    .stat-icon.t-warn { background: var(--state-warn-bg); color: var(--state-warn); }

    /* ============================================================
       TOOLBAR
       ============================================================ */
    .table-toolbar {
      display: flex; align-items: center; gap: .65rem; padding: .85rem 1.125rem;
      border-bottom: 1px solid var(--border); flex-wrap: wrap;
    }
    .toolbar-divider { width: 1px; align-self: stretch; background: var(--border); margin: 0 .25rem; }
    .filter-chip {
      display: inline-flex; align-items: center; gap: .35rem;
      padding: .35rem .6rem; border-radius: 999px;
      background: var(--mntox-verde-soft); color: var(--mntox-verde);
      font-size: .78rem; font-weight: 600; border: 1px solid transparent;
      cursor: pointer;
    }
    .filter-chip .bi { font-size: .75rem; }
    .filter-chip:hover { background: var(--mntox-verde-strong); }

    /* ============================================================
       TABELA — REFATORADA
       Nova hierarquia: Cliente > PPPoE / VLAN > Sinal RX > Status > Inform
       ============================================================ */
    .table-shell { overflow-x: hidden; }
    table.table-mntox { width: 100%; border-collapse: collapse; table-layout: auto; }
    table.table-mntox th {
      text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-muted); font-weight: 600;
      padding: .55rem var(--row-px, 1.125rem);
      background: var(--bg-subtle); border-bottom: 1px solid var(--border);
      position: sticky; top: 0; z-index: 1;
      white-space: nowrap;
    }
    table.table-mntox th.sortable { cursor: pointer; user-select: none; }
    table.table-mntox th.sortable:hover { color: var(--text-primary); }
    table.table-mntox th .sort-ind { margin-left: .3rem; opacity: .35; font-size: .7rem; }
    table.table-mntox th.is-sorted .sort-ind { opacity: 1; color: var(--mntox-verde); }
    table.table-mntox td {
      padding: var(--row-py, .65rem) var(--row-px, 1.125rem);
      border-bottom: 1px solid var(--border);
      font-size: .875rem; color: var(--text-primary); vertical-align: middle;
    }
    table.table-mntox tbody tr {
      cursor: pointer; transition: background .1s;
    }
    table.table-mntox tbody tr:hover { background: var(--bg-hover); }
    table.table-mntox tbody tr.is-selected {
      background: var(--mntox-verde-soft);
      box-shadow: inset 3px 0 0 var(--mntox-verde);
    }
    table.table-mntox tbody tr:last-child td { border-bottom: none; }

    /* Célula cliente: nome grande, secundário pequeno */
    .cell-customer { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .cell-customer .name {
      font-weight: 600; font-size: .9rem; color: var(--text-primary);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .cell-customer .name.is-empty { color: var(--text-muted); font-weight: 500; font-style: italic; }

    /* Info grid — usado no card SGP do drawer */
    .info-grid { display: flex; flex-direction: column; gap: .5rem; }
    .ig-row { display: flex; align-items: baseline; gap: .5rem; font-size: .85rem; }
    .ig-label { min-width: 80px; color: var(--text-secondary); flex-shrink: 0; font-size: .78rem; }
    .ig-value { color: var(--text-primary); font-weight: 500; }
    .ig-value.mono { font-family: ui-monospace, monospace; }

    .cell-customer .pppoe {
      font-size: .76rem; color: var(--text-secondary); font-family: ui-monospace, monospace;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* Célula identidade técnica */
    .cell-vendor { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .cell-vendor .model { font-size: .82rem; color: var(--text-primary); }
    .cell-vendor .model b { font-weight: 600; }
    .cell-vendor .serial {
      font-family: ui-monospace, monospace; font-size: .72rem; color: var(--text-muted);
    }

    /* Célula sinal — barra + valor */
    .cell-signal { display: flex; align-items: center; gap: .5rem; min-width: 110px; }
    .signal-bar {
      width: 44px; height: 6px; border-radius: 3px;
      background: var(--bg-hover); overflow: hidden; position: relative;
      flex-shrink: 0;
    }
    .signal-bar::before {
      content: ""; display: block; height: 100%;
      width: var(--w, 0%); background: var(--c, var(--mntox-verde));
      border-radius: 3px;
      transition: width .3s ease;
    }
    .signal-val {
      font-family: ui-monospace, monospace; font-size: .78rem; font-weight: 600;
      color: var(--c, var(--text-primary)); white-space: nowrap;
    }
    .signal-val .unit { font-weight: 400; opacity: .65; margin-left: 1px; }
    .signal-empty { color: var(--text-muted); font-size: .78rem; }

    /* Célula IP */
    .cell-ip { font-family: ui-monospace, monospace; font-size: .82rem; }
    .cell-ip a { color: var(--text-primary); text-decoration: none; }
    .cell-ip a:hover { color: var(--mntox-verde); text-decoration: underline; }

    /* Célula status — dot + label compacto */
    .status-dot {
      display: inline-flex; align-items: center; gap: .4rem;
      font-size: .78rem; font-weight: 600;
    }
    .status-dot::before {
      content: ""; width: 8px; height: 8px; border-radius: 50%;
      background: var(--c, var(--text-muted));
      box-shadow: 0 0 0 3px var(--cs, transparent);
    }
    .status-dot.t-online    { color: var(--mntox-verde);  --c: var(--mntox-verde);  --cs: var(--mntox-verde-soft); }
    .status-dot.t-online::before { animation: dotpulse 2s infinite; }
    .status-dot.t-pull      { color: var(--state-info);   --c: var(--state-info);   --cs: var(--state-info-bg); }
    .status-dot.t-configuring { color: var(--state-info); --c: var(--state-info);   --cs: var(--state-info-bg); }
    .status-dot.t-configuring::before { animation: dotpulse 1s infinite; }
    .status-dot.t-offline    { color: var(--state-danger); --c: var(--state-danger); --cs: var(--state-danger-bg); }
    .status-dot.t-suspended  { color: var(--state-warn);   --c: var(--state-warn);   --cs: var(--state-warn-bg); }
    .status-dot.t-inactive   { color: var(--text-muted);   --c: var(--text-muted); }
    @keyframes dotpulse { 0%,100% { box-shadow: 0 0 0 3px var(--cs); } 50% { box-shadow: 0 0 0 6px transparent; } }

    .cell-inform {
      font-size: .8rem; color: var(--text-secondary); white-space: nowrap;
    }
    .cell-inform.is-stale { color: var(--state-warn); }

    .row-detail-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; border-radius: 8px;
      color: var(--text-muted); background: var(--bg-hover);
      font-size: .85rem; transition: background .15s, color .15s;
    }
    tr:hover .row-detail-btn { background: var(--mntox-verde); color: #fff; }
    @media (max-width: 991.98px) { .row-detail-btn { width: 44px; height: 44px; border-radius: 10px; } }

    /* Cards de integração */
    .integration-card {
      border: 1px solid var(--border); border-radius: 10px;
      padding: .875rem 1rem; background: var(--surface-1);
    }
    .integration-card-head {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    }
    /* Toggle switch */
    .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
      position: absolute; inset: 0; background: var(--border); border-radius: 24px; transition: .2s;
    }
    .toggle-slider::before {
      content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
      left: 3px; bottom: 3px; background: #fff; transition: .2s;
    }
    .toggle-switch input:checked + .toggle-slider { background: var(--mntox-verde); }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

    /* Bandas Wi-Fi como chips */
    .band-pills { display: inline-flex; gap: 4px; }
    .pill-band {
      display: inline-flex; align-items: center;
      padding: .12rem .45rem; border-radius: 4px;
      background: var(--bg-hover); color: var(--text-secondary);
      font-size: .7rem; font-weight: 600; border: 1px solid var(--border);
      font-family: ui-monospace, monospace;
    }

    /* ============================================================
       MOBILE CARDS
       ============================================================ */
    .device-cards { display: none; padding: .5rem; }
    .device-cards > * + * { margin-top: .5rem; }
    @media (max-width: 991.98px) {
      .table-shell { display: none; }
      .device-cards { display: block; }
    }
    /* ── mobile card v2 ── */
    .device-card-m {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-left: 3px solid var(--dcm-color, var(--border-strong));
      border-radius: 0 10px 10px 0;
      padding: .75rem 1rem;
      cursor: pointer;
      transition: background .1s, transform .12s;
      min-height: 48px;
    }
    .device-card-m:active { background: var(--bg-hover); transform: scale(.99); }
    .dcm-online  { --dcm-color: var(--mntox-verde); }
    .dcm-pull    { --dcm-color: var(--state-info); }
    .dcm-offline { --dcm-color: var(--state-danger); }

    .dcm-top {
      display: flex; align-items: center; justify-content: space-between;
      gap: .5rem; margin-bottom: .3rem;
    }
    .dcm-model {
      font-size: .72rem; color: var(--text-muted);
      font-family: ui-monospace, monospace;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      padding: .1rem .4rem; border-radius: 4px;
      white-space: nowrap; flex-shrink: 0;
    }
    .dcm-name {
      font-weight: 700; font-size: .95rem; color: var(--text-primary);
      line-height: 1.2; margin-bottom: .3rem;
    }
    .dcm-name.is-empty { color: var(--text-muted); font-style: italic; font-weight: 500; }
    .dcm-bottom {
      display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
      font-size: .75rem; color: var(--text-muted);
      padding-top: .3rem; border-top: 1px solid var(--border); margin-top: .3rem;
    }
    .dcm-pppoe { font-family: ui-monospace, monospace; font-size: .75rem; color: var(--text-secondary); }
    .dcm-sig { display: inline-flex; align-items: center; gap: .2rem; font-weight: 600; font-size: .75rem; }
    .dcm-ip  { font-family: ui-monospace, monospace; font-size: .73rem; }
    .dcm-time { margin-left: auto; font-size: .72rem; white-space: nowrap; }

    /* legado — mantido para compatibilidade */
    .dcm-row1, .dcm-row2, .dcm-meta { display: none; }

    /* ============================================================
       PÁGINA DE DETALHE DO CPE — substitui o drawer/modal
       Cada bloco em seu cartão, dividido em grid 12 colunas.
       ============================================================ */
    .detail-page {
      display: flex; flex-direction: column; gap: 1rem;
      animation: fadein .18s ease-out;
    }
    .detail-header {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 1rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: .85rem 1.1rem;
      box-shadow: var(--shadow-sm);
    }
    .detail-back {
      display: inline-flex; align-items: center; gap: .4rem;
      background: transparent; border: 1px solid var(--border);
      color: var(--text-secondary); border-radius: 8px;
      padding: .35rem .7rem; font-size: .85rem; font-weight: 500;
      cursor: pointer; transition: all .12s;
    }
    .detail-back:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); }
    .detail-title { min-width: 0; }
    .detail-title h1 {
      margin: 0; font-size: 1.15rem; font-weight: 600;
      display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    }
    .detail-sub {
      margin-top: 2px; font-size: .82rem; color: var(--text-muted);
      display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
    }
    .detail-action-row { display: flex; gap: .4rem; flex-wrap: wrap; }
    @media (max-width: 767.98px) {
      .detail-header { grid-template-columns: 1fr; gap: .65rem; }
      .detail-action-row { justify-content: flex-start; }
    }

    .detail-vitals {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
    }
    @media (max-width: 767.98px) { .detail-vitals { grid-template-columns: repeat(2, 1fr); } }
    .dv-cell {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px; padding: .7rem .85rem; min-width: 0;
      display: flex; flex-direction: column; gap: 2px;
      box-shadow: var(--shadow-sm);
    }
    .dv-label {
      font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-muted); font-weight: 700;
    }
    .dv-value {
      font-size: 1rem; font-weight: 600; color: var(--text-primary);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dv-value.mono { font-family: ui-monospace, monospace; font-size: .9rem; }
    .dv-meta { font-size: .72rem; color: var(--text-muted); }

    .detail-grid {
      display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem;
    }
    .detail-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px; box-shadow: var(--shadow-sm);
      display: flex; flex-direction: column; min-width: 0;
    }
    .detail-card.span-12 { grid-column: span 12; }
    .detail-card.span-6  { grid-column: span 6; }
    .detail-card.span-4  { grid-column: span 4; }
    .detail-card.is-danger { border-color: rgba(220,38,38,.2); }
    @media (max-width: 991.98px) {
      .detail-card.span-6, .detail-card.span-4 { grid-column: span 12; }
    }
    .dc-head {
      padding: .75rem 1rem;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    }
    .dc-head h2 {
      margin: 0; font-size: .95rem; font-weight: 600;
      display: flex; align-items: center; gap: .5rem; color: var(--text-primary);
    }
    .dc-head h2 i { color: var(--mntox-verde); }
    .detail-card.is-danger .dc-head h2 i { color: var(--state-danger); }
    .dc-body { padding: 1rem; flex: 1; }

    /* Wi-Fi unificado: seg-control + bloco "config atual" + campos únicos */
    .seg-control {
      display: inline-flex; gap: 2px; padding: 2px;
      background: var(--bg-hover); border: 1px solid var(--border);
      border-radius: 8px; flex-wrap: wrap;
    }
    .seg-control button {
      background: transparent; border: 0; padding: .4rem .85rem;
      font-size: .82rem; color: var(--text-secondary); border-radius: 6px;
      cursor: pointer; font-family: inherit; white-space: nowrap;
      transition: all .12s;
    }
    .seg-control button:hover { color: var(--text-primary); }
    .seg-control button.is-active {
      background: var(--bg-card); color: var(--mntox-verde); font-weight: 600;
      box-shadow: var(--shadow-sm);
    }
    /* Card unificado Wi-Fi + Clientes */
    .wcc-tabs {
      display: flex; align-items: center; gap: 0;
      border-bottom: 1px solid var(--border); padding: 0 1rem;
    }
    /* Mobile: tabs com scroll horizontal para acessar todos os itens */
    @media (max-width: 767.98px) {
      .wcc-tabs {
        overflow-x: auto; flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        padding: 0 .5rem;
      }
      .wcc-tabs::-webkit-scrollbar { display: none; }
    }
    .wcc-tab {
      padding: .65rem 1rem; font-size: .85rem; font-weight: 600;
      border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
      background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: .4rem;
      transition: color .15s, border-color .15s; white-space: nowrap; flex-shrink: 0;
    }
    .wcc-tab:hover { color: var(--text-primary); }
    .wcc-tab.is-active { color: var(--mntox-verde); border-bottom-color: var(--mntox-verde); }
    .wcc-tab-spacer { flex: 1; }
    .wcc-badge {
      background: var(--mntox-verde); color: #fff; font-size: .68rem; font-weight: 700;
      padding: .05rem .4rem; border-radius: 999px; line-height: 1.4;
    }

    /* Painel Wi-Fi */
    .wf-panel { display: flex; flex-direction: column; gap: .75rem; }

    /* Visualização atual */
    .wf-current {
      border: 1px solid var(--border); border-radius: 10px;
      background: var(--bg-subtle); overflow: hidden;
    }
    .wf-current-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: .45rem .75rem; font-size: .78rem;
      border-bottom: 1px solid var(--border); background: var(--bg-card);
    }
    .wf-current-title { color: var(--text-secondary); display: flex; align-items: center; gap: .35rem; }
    .wf-current-title i { color: var(--mntox-verde); }
    .wf-current-bands { padding: .5rem .75rem; display: flex; flex-direction: column; gap: .35rem; }
    .wf-band-row { display: flex; align-items: center; gap: .6rem; }
    .wf-band-chip {
      font-size: .68rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px;
      background: var(--mntox-verde-soft); color: var(--mntox-verde); flex-shrink: 0;
    }
    .wf-band-chip.is-5g { background: #e0f0ff; color: #1a7acc; }
    .wf-band-info { display: flex; flex: 1; gap: .75rem; min-width: 0; }
    .wf-ssid { font-weight: 600; font-size: .85rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wf-pass { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--text-secondary); }
    .wf-ssid.is-empty, .wf-pass.is-empty { color: var(--text-muted); font-style: italic; font-weight: 400; }

    .wf-change-fields { padding: .65rem .75rem; display: flex; flex-direction: column; gap: .6rem; }
    .wf-input-btn { position: relative; display: flex; align-items: center; }
    .wf-input-btn .input-mntox { flex: 1; padding-right: 2.4rem; }
    .wf-inline-btn {
      position: absolute; right: .35rem;
      width: 1.75rem; height: 1.75rem; border-radius: 6px;
      border: none; background: var(--mntox-verde); color: #fff;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: .9rem; transition: opacity .15s;
    }
    .wf-inline-btn:hover { opacity: .85; }
    .wf-inline-btn:disabled { opacity: .5; cursor: not-allowed; }
    .wf-change-field { display: flex; flex-direction: column; gap: .25rem; }
    .wf-flabel { font-size: .74rem; font-weight: 600; color: var(--text-secondary); }
    .wf-frow { display: flex; gap: .4rem; }
    .wf-frow .input-mntox { flex: 1; }
    .wf-apply-both { width: 100%; justify-content: center; }

    .wifi-unified { display: flex; flex-direction: column; gap: .75rem; }

    .wifi-current-box {
      border: 1px solid var(--border); border-radius: 10px;
      background: var(--bg-subtle); overflow: hidden;
    }
    .wifi-current-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: .55rem .75rem; font-size: .8rem; color: var(--text-secondary);
      border-bottom: 1px solid var(--border); background: var(--bg-card);
    }
    .wifi-current-head i { color: var(--mntox-verde); margin-right: .35rem; }
    .wifi-current-body { padding: .65rem .75rem; display: flex; flex-direction: column; gap: .4rem; }
    .wifi-current-row {
      display: flex; align-items: center; gap: .55rem; min-width: 0;
      font-family: ui-monospace, monospace; font-size: .85rem;
    }
    .wifi-current-row .wifi-band-pill { flex-shrink: 0; }
    .wifi-current-ssid { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wifi-current-ssid.is-empty, .wifi-current-pass.is-empty {
      font-style: italic; color: var(--text-muted); font-weight: 400; font-family: inherit;
    }
    .wifi-current-pass { color: var(--text-secondary); letter-spacing: .04em; }
    .wifi-current-sep { color: var(--text-muted); }

    .input-with-eye { position: relative; flex: 1; }
    .input-with-eye .input-mntox { width: 100%; padding-right: 2.2rem; }
    .input-with-eye .eye-btn {
      position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
      background: transparent; border: none; color: var(--text-muted);
      cursor: pointer; padding: 4px 6px; border-radius: 4px;
    }
    .input-with-eye .eye-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

    .wifi-hint {
      display: flex; align-items: flex-start; gap: .5rem;
      font-size: .8rem; color: var(--text-secondary);
      padding: .65rem .8rem; background: var(--state-info-bg);
      border-radius: 8px; border: 1px solid rgba(37,99,235,.15);
    }
    .wifi-hint i { color: var(--state-info); margin-top: 2px; }
    .wifi-hint a { color: var(--mntox-verde); text-decoration: underline; cursor: pointer; }
    .drawer-mntox {
      position: fixed; inset: 0; background: rgba(15, 17, 21, .55);
      backdrop-filter: blur(2px);
      z-index: 100; display: flex; justify-content: flex-end;
      animation: fadein .15s ease-out;
    }
    @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
    .drawer-mntox-panel {
      background: var(--bg-card); width: 100%;
      max-width: var(--drawer-w, 760px);
      height: 100vh; overflow: hidden;
      animation: slidein .24s cubic-bezier(.2,.8,.2,1);
      display: flex; flex-direction: column;
      box-shadow: var(--shadow-lg);
    }
    @keyframes slidein {
      from { transform: translateX(40px); opacity: 0; }
      to   { transform: translateX(0);    opacity: 1; }
    }
    @media (max-width: 575.98px) {
      .drawer-mntox-panel { max-width: 100%; }
    }

    .drawer-head {
      padding: 1rem 1.25rem .75rem;
      border-bottom: 1px solid var(--border);
      background: var(--bg-card);
    }
    .drawer-head-row1 {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: .75rem; margin-bottom: .5rem;
    }
    .drawer-head h2 {
      font-size: 1.05rem; font-weight: 600; margin: 0 0 2px 0;
      display: flex; align-items: center; gap: .5rem;
    }
    .drawer-head .subtle {
      font-size: .8rem; color: var(--text-muted); display: flex;
      gap: .4rem; align-items: center;
    }

    /* Faixa de chips críticos — sempre visível */
    .drawer-chips {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .5rem;
      margin-top: .5rem;
    }
    @media (max-width: 575.98px) { .drawer-chips { grid-template-columns: repeat(2, 1fr); } }
    .dchip {
      background: var(--bg-subtle); border: 1px solid var(--border);
      border-radius: 8px; padding: .55rem .7rem;
      display: flex; flex-direction: column; gap: 2px; min-width: 0;
    }
    .dchip-label {
      font-size: .65rem; text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-muted); font-weight: 700;
    }
    .dchip-value {
      font-size: .9rem; font-weight: 600; color: var(--text-primary);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dchip-value.is-mono { font-family: ui-monospace, monospace; }
    .dchip-value.is-strong { color: var(--mntox-verde); }
    .dchip-value.is-warn { color: var(--state-warn); }
    .dchip-value.is-danger { color: var(--state-danger); }
    .dchip-meta { font-size: .7rem; color: var(--text-muted); }

    /* Faixa de ações no header */
    .drawer-actions {
      display: flex; gap: .4rem; padding: .65rem 1.25rem;
      border-bottom: 1px solid var(--border); background: var(--bg-subtle);
      flex-wrap: wrap;
    }
    .drawer-actions .spacer { flex: 1; }

    /* Tabs */
    .drawer-tabs {
      display: flex; gap: 0; border-bottom: 1px solid var(--border);
      padding: 0 1.25rem; overflow-x: auto;
      background: var(--bg-card);
      position: sticky; top: 0; z-index: 1;
    }
    .drawer-tab {
      padding: .65rem .9rem; border: none; background: transparent;
      color: var(--text-secondary); font-size: .85rem; font-weight: 500;
      cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
      white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem;
    }
    .drawer-tab:hover { color: var(--text-primary); }
    .drawer-tab.is-active {
      color: var(--mntox-verde); border-bottom-color: var(--mntox-verde); font-weight: 600;
    }
    .drawer-tab .count {
      background: var(--bg-hover); color: var(--text-secondary);
      font-size: .68rem; padding: 1px 6px; border-radius: 999px; font-weight: 600;
    }
    .drawer-tab.is-active .count { background: var(--mntox-verde); color: white; }

    .drawer-body {
      flex: 1; overflow-y: auto; padding: 1.25rem;
    }

    /* Painel Wi-Fi destacado no drawer */
    .wifi-panel {
      border: 1px solid var(--border); border-radius: 10px;
      background: var(--bg-card); overflow: hidden;
    }
    .wifi-panel + .wifi-panel { margin-top: .75rem; }
    .wifi-head {
      display: flex; align-items: center; gap: .6rem;
      padding: .75rem 1rem; background: var(--bg-subtle);
      border-bottom: 1px solid var(--border);
    }
    .wifi-band-pill {
      background: var(--mntox-verde); color: white;
      padding: .15rem .5rem; border-radius: 4px;
      font-size: .72rem; font-weight: 700; font-family: ui-monospace, monospace;
    }
    .wifi-head h3 { font-size: .9rem; font-weight: 600; margin: 0; }
    .wifi-body { padding: 1rem; display: flex; flex-direction: column; gap: .9rem; }
    .wifi-field { display: flex; flex-direction: column; gap: .3rem; }
    .wifi-field-row {
      display: flex; gap: .5rem; align-items: center;
    }
    .wifi-field label {
      font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
      font-weight: 700; color: var(--text-muted); margin: 0;
    }
    .wifi-current {
      flex: 1; padding: .5rem .75rem; background: var(--bg-subtle);
      border: 1px solid var(--border); border-radius: 6px;
      font-family: ui-monospace, monospace; font-size: .85rem;
      color: var(--text-primary);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .wifi-current.is-secret { letter-spacing: .15em; }
    .wifi-current.is-empty { color: var(--text-muted); font-style: italic; }

    /* Section group */
    .group {
      margin: 0 0 1rem 0;
    }
    .group-title {
      font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
      color: var(--text-muted); font-weight: 700;
      padding: 0 .25rem .5rem; display: flex; align-items: center; gap: .4rem;
    }
    .group-title .bi { color: var(--mntox-verde); }

    /* Info table */
    .info-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    }
    @media (max-width: 575.98px) { .info-grid { grid-template-columns: 1fr; } }
    .info-cell {
      padding: .55rem .75rem; background: var(--bg-subtle);
      border: 1px solid var(--border); border-radius: 6px;
      display: flex; flex-direction: column; gap: 2px;
    }
    .info-cell .k {
      font-size: .68rem; color: var(--text-muted); font-weight: 600;
      text-transform: uppercase; letter-spacing: .04em;
    }
    .info-cell .v { font-size: .85rem; color: var(--text-primary); font-weight: 500; }
    .info-cell .v.mono { font-family: ui-monospace, monospace; font-size: .82rem; }
    .info-cell .v.empty { color: var(--text-muted); font-style: italic; font-weight: 400; }

    /* Cliente conectado item */
    /* Abas de paginação de clientes */
    .clients-tabs {
      display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem;
    }
    .clients-tab-btn {
      padding: .2rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
      border: 1px solid var(--border); background: var(--bg-subtle); color: var(--text-secondary);
      cursor: pointer; transition: background .15s, color .15s;
    }
    .clients-tab-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
    .clients-tab-btn.is-active {
      background: var(--mntox-verde); color: #fff; border-color: var(--mntox-verde);
    }

    .client-item {
      display: flex; align-items: center; gap: .65rem;
      padding: .65rem .8rem;
      border: 1px solid var(--border); border-radius: 6px;
      background: var(--bg-subtle);
    }
    .client-item + .client-item { margin-top: .4rem; }
    .client-icon {
      width: 32px; height: 32px; border-radius: 6px;
      background: var(--mntox-verde-soft); color: var(--mntox-verde);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .client-meta { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1; }
    .client-host {
      font-weight: 600; font-size: .85rem; color: var(--text-primary);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .client-mac {
      font-family: ui-monospace, monospace; font-size: .72rem; color: var(--text-muted);
    }
    .client-ip {
      font-family: ui-monospace, monospace; font-size: .8rem; color: var(--text-secondary);
      flex-shrink: 0;
    }

    /* Form */
    .form-group { margin-bottom: .8rem; }
    .form-label {
      display: block; font-size: .72rem; font-weight: 700;
      color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
      margin-bottom: .3rem;
    }
    .form-help { font-size: .73rem; color: var(--text-muted); margin-top: .3rem; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
    @media (max-width: 575.98px) { .form-row { grid-template-columns: 1fr; } }

    /* Brand wordmark — acsTOX (acs leve, TOX bold green) */
    .brand-soft   { color: var(--text-muted); font-weight: 500; letter-spacing: 0; }
    .brand-strong { color: var(--mntox-verde); font-weight: 800; letter-spacing: .02em; }

    /* Config page */
    .config-grid { max-width: 100%; display: flex; flex-direction: column; gap: 1rem; }

    /* Segmented control (config) */
    .seg-ctrl {
      display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-hover);
      border-radius: 8px; border: 1px solid var(--border); flex-wrap: wrap;
    }
    .seg-ctrl button {
      background: transparent; border: 0; padding: .35rem .65rem;
      font-size: .78rem; color: var(--text-secondary); border-radius: 6px; cursor: pointer;
      font-family: inherit; white-space: nowrap;
    }
    .seg-ctrl button:hover { color: var(--text-primary); }
    .seg-ctrl button.is-active {
      background: var(--bg-card); color: var(--text-primary); font-weight: 600;
      box-shadow: var(--shadow-sm);
    }

    /* Threshold grid */
    .thresh-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; margin-bottom: .85rem;
    }
    @media (max-width: 575.98px) { .thresh-grid { grid-template-columns: 1fr 1fr; } }
    .thresh-cell label {
      display: flex; align-items: center; gap: .35rem;
      font-size: .75rem; font-weight: 600; color: var(--c, var(--text-secondary));
      margin-bottom: .3rem;
    }
    .thresh-cell .dot {
      width: 8px; height: 8px; border-radius: 50%; background: var(--c);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 18%, transparent);
    }

    /* Checkbox row */
    .check-row {
      display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem;
      background: var(--bg-hover); border-radius: 8px; cursor: pointer;
      font-size: .85rem; margin-bottom: .85rem;
    }
    .check-box {
      width: 18px; height: 18px; flex-shrink: 0; border-radius: 4px;
      border: 1.5px solid var(--border-strong); background: var(--bg-card);
      display: inline-flex; align-items: center; justify-content: center;
      color: #fff; font-size: .85rem;
    }
    .check-box.is-on { background: var(--mntox-verde); border-color: var(--mntox-verde); }

    /* Input com sufixo (ex: "dias") */
    .input-suffix {
      display: flex; align-items: center; gap: .5rem;
    }
    .input-suffix input { max-width: 90px; }
    .input-suffix span { font-size: .82rem; color: var(--text-muted); }

    /* About rows */
    .about-body { padding-top: .25rem !important; padding-bottom: .25rem !important; }
    .about-row {
      display: flex; gap: .75rem; padding: .45rem 0;
      border-bottom: 1px solid var(--border); font-size: .85rem;
    }
    .about-row:last-child { border-bottom: 0; }
    .about-row .k { min-width: 110px; color: var(--text-muted); flex-shrink: 0; }
    .about-row .v { color: var(--text-primary); display: inline-flex; align-items: center; gap: .4rem; }
    .about-os-icon { display: inline-flex; }
    .about-os-icon svg { display: block; }

    /* Sidebar user (footer) */
    .sidebar-user {
      flex: 1; min-width: 0;
      display: inline-flex; align-items: center; gap: .55rem;
      padding: .3rem .4rem; border-radius: 8px;
      background: transparent; border: 0; cursor: pointer;
      color: var(--text-primary); font-family: inherit;
      transition: background .12s;
    }
    .sidebar-user:hover { background: var(--bg-hover); }
    .sidebar-user-avatar {
      width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
      background: var(--mntox-verde); color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: .78rem; font-weight: 700;
    }
    .sidebar-user-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; flex: 1; text-align: left; }
    .sidebar-user-name { font-size: .8rem; font-weight: 600; }
    .sidebar-user-role { font-size: .68rem; color: var(--text-muted); }
    .sidebar-user .bi-box-arrow-right { font-size: .85rem; color: var(--text-muted); }

    /* LOGIN PAGE */
    .login-shell {
      position: relative; overflow: hidden;
      min-height: 100vh; display: flex; align-items: center; justify-content: center;
      padding: 1.5rem 1rem;
      background:
        radial-gradient(60% 50% at 50% 0%, var(--mntox-verde-soft), transparent 70%),
        radial-gradient(40% 40% at 90% 100%, var(--mntox-verde-soft), transparent 70%),
        var(--bg-app);
    }
    .login-card-wrap { width: 100%; max-width: 380px; position: relative; z-index: 1; }

    /* Cenário Amapá — Marco Zero / Fortaleza / Equador */
    .login-bg {
      position: absolute; inset: 0; width: 100%; height: 100%;
      pointer-events: none; z-index: 0;
      opacity: .85;
    }
    .login-bg .lb-river {
      fill: var(--mntox-verde-soft);
    }
    .login-bg .lb-sun {
      fill: var(--mntox-verde);
      opacity: .18;
    }
    .login-bg .lb-equator {
      stroke: var(--mntox-verde);
      stroke-width: 1.2;
      stroke-dasharray: 6 6;
      opacity: .45;
    }
    .login-bg .lb-equator-label {
      fill: var(--mntox-verde);
      font: 600 11px ui-monospace, monospace;
      letter-spacing: .12em;
      opacity: .55;
    }
    .login-bg .lb-fort {
      fill: var(--mntox-verde);
      opacity: .28;
    }
    .login-bg .lb-fort line {
      stroke: var(--mntox-verde);
      stroke-width: 1.2;
      opacity: .6;
    }
    .login-bg .lb-flag {
      fill: var(--mntox-verde);
      opacity: .55;
    }
    .login-bg .lb-marco {
      fill: var(--mntox-verde);
      opacity: .35;
    }
    .login-bg .lb-marco line {
      stroke: var(--mntox-verde);
      stroke-width: 1;
      opacity: .55;
    }
    .login-bg .lb-palms {
      fill: none;
      stroke: var(--mntox-verde);
      stroke-width: 1.4;
      stroke-linecap: round;
      opacity: .35;
    }
    [data-theme="dark"] .login-bg { opacity: .55; }
    @media (max-width: 575.98px) { .login-bg { opacity: .5; } }

    /* TOKEN / ATIVAÇÃO */
    .activate-intro {
      display: flex; gap: .75rem; align-items: flex-start;
      padding: .75rem .9rem; margin-bottom: 1rem;
      background: var(--mntox-verde-soft);
      border: 1px solid var(--mntox-verde-strong);
      border-radius: 8px;
    }
    .activate-intro > i {
      font-size: 1.4rem; color: var(--mntox-verde); flex-shrink: 0; margin-top: 1px;
    }
    .activate-intro-title {
      font-weight: 600; font-size: .9rem; color: var(--text-primary); margin-bottom: 2px;
    }
    .activate-intro-meta {
      font-size: .78rem; color: var(--text-secondary); line-height: 1.4;
    }
    .activate-token-input {
      text-align: center; letter-spacing: .15em;
      font-size: 1rem; padding: .75rem .5rem;
    }
    .activate-token-input::placeholder { letter-spacing: .15em; opacity: .35; }
    .activate-help {
      display: flex; gap: 1rem; justify-content: center;
      margin-top: 1rem; padding-top: 1rem;
      border-top: 1px solid var(--border);
      font-size: .78rem;
    }
    .activate-help a {
      color: var(--text-secondary); text-decoration: none;
      display: inline-flex; align-items: center; gap: .3rem;
    }
    .activate-help a:hover { color: var(--mntox-verde); }

    /* Estado de sucesso */
    .activate-success {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px; padding: 2.5rem 1.5rem;
      box-shadow: var(--shadow-md);
      text-align: center;
      animation: fadein .25s ease-out;
    }
    .activate-check {
      width: 72px; height: 72px; margin: 0 auto 1rem;
      border-radius: 50%;
      background: var(--mntox-verde);
      color: white; font-size: 2.4rem;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 8px var(--mntox-verde-soft);
      animation: check-pop .35s cubic-bezier(.2,.9,.3,1.4);
    }
    @keyframes check-pop {
      from { transform: scale(.4); opacity: 0; }
      to   { transform: scale(1);  opacity: 1; }
    }
    .activate-success-title {
      font-size: 1.15rem; font-weight: 600; color: var(--text-primary);
      margin-bottom: .25rem;
    }
    .activate-success-meta {
      font-size: .85rem; color: var(--text-muted);
    }
    .login-brand { text-align: center; margin-bottom: 1.75rem; }
    .login-mark {
      width: 56px; height: 56px; margin: 0 auto .85rem;
      border-radius: 14px;
      box-shadow: 0 0 0 6px var(--mntox-verde-soft), 0 8px 24px rgba(33,176,110,.25);
    }
    .login-mark svg { width: 36px; height: 36px; }
    .login-wordmark {
      font-size: 2rem; line-height: 1; letter-spacing: .02em;
    }
    .login-tagline { margin-top: .45rem; font-size: .78rem; color: var(--text-muted); }
    .login-pass { position: relative; }
    .login-pass input { padding-right: 38px; }
    .login-pass-toggle {
      position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
      width: 30px; height: 30px;
    }
    .login-error {
      display: flex; align-items: center; gap: .5rem;
      background: var(--state-danger-bg); color: var(--state-danger);
      border-radius: 6px; padding: .55rem .75rem; font-size: .82rem;
      margin-bottom: .85rem;
    }
    .login-submit {
      width: 100%; justify-content: center; padding: .65rem;
      font-size: .92rem;
    }
    .login-footer {
      margin-top: 1.25rem; display: flex; flex-direction: column; gap: .35rem;
      text-align: center; font-size: .7rem; color: var(--text-muted);
    }
    .login-footer .bi { color: var(--mntox-verde); margin-right: .25rem; }

    /* Empty state */
    .empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }
    .empty-state .bi { font-size: 2.25rem; color: var(--border-strong); display: block; margin-bottom: .65rem; }
    .empty-state-title { font-size: .95rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .25rem; }
    .empty-state-meta { font-size: .82rem; }

    /* Toasts */
    .toast-container {
      position: fixed; top: 1rem; right: 1rem; z-index: 200;
      display: flex; flex-direction: column; gap: .5rem;
      max-width: calc(100vw - 2rem);
    }
    .toast-mntox {
      background: var(--bg-card); border: 1px solid var(--border);
      border-left: 3px solid var(--text-secondary);
      border-radius: 6px; padding: .7rem .9rem;
      box-shadow: var(--shadow-md);
      display: flex; align-items: flex-start; gap: .6rem;
      min-width: 280px; max-width: 380px;
      animation: toastin .2s ease-out;
    }
    @keyframes toastin { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    .toast-mntox.is-success { border-left-color: var(--mntox-verde); }
    .toast-mntox.is-error   { border-left-color: var(--state-danger); }
    .toast-mntox.is-warn    { border-left-color: var(--state-warn); }
    .toast-mntox.is-info    { border-left-color: var(--state-info); }
    .toast-mntox-icon { color: var(--text-muted); margin-top: 2px; }
    .toast-mntox.is-success .toast-mntox-icon { color: var(--mntox-verde); }
    .toast-mntox.is-error   .toast-mntox-icon { color: var(--state-danger); }
    .toast-mntox.is-warn    .toast-mntox-icon { color: var(--state-warn); }
    .toast-mntox.is-info    .toast-mntox-icon { color: var(--state-info); }
    .toast-mntox-text { flex: 1; font-size: .85rem; line-height: 1.4; }
    .toast-mntox-close {
      background: none; border: none; cursor: pointer;
      color: var(--text-muted); font-size: 1.05rem; padding: 0; line-height: 1;
    }
    .toast-mntox-close:hover { color: var(--text-primary); }

    /* Spinner */
    @keyframes spin { to { transform: rotate(360deg); } }
    .spin { display: inline-block; animation: spin .7s linear infinite; }

    /* Skeleton */
    @keyframes skel-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
    .skel {
      display: inline-block;
      background: linear-gradient(90deg, var(--bg-hover) 0%, var(--border) 50%, var(--bg-hover) 100%);
      background-size: 400px 100%; animation: skel-shimmer 1.4s infinite linear;
      border-radius: 4px; height: 14px;
    }

    /* ============================================================
       TWEAKS PANEL
       ============================================================ */
    .tweaks-fab {
      position: fixed; bottom: 1rem; right: 1rem; z-index: 90;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 999px; padding: .55rem .9rem;
      display: inline-flex; align-items: center; gap: .4rem;
      font-size: .8rem; font-weight: 600; color: var(--text-primary);
      box-shadow: var(--shadow-md); cursor: pointer;
      transition: all .15s;
    }
    .tweaks-fab:hover { border-color: var(--mntox-verde); color: var(--mntox-verde); }
    .tweaks-fab .bi { color: var(--mntox-verde); }

    .tweaks-panel {
      position: fixed; bottom: 1rem; right: 1rem; z-index: 95;
      width: 320px; max-width: calc(100vw - 2rem);
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px; box-shadow: var(--shadow-lg);
      animation: slidein .2s ease-out;
      overflow: hidden;
    }
    .tweaks-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: .65rem .85rem; border-bottom: 1px solid var(--border);
      background: var(--bg-subtle);
    }
    .tweaks-head h3 {
      font-size: .82rem; font-weight: 700; margin: 0;
      display: flex; align-items: center; gap: .4rem;
      text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary);
    }
    .tweaks-head .bi-sliders { color: var(--mntox-verde); }
    .tweaks-body { padding: .85rem; max-height: 70vh; overflow-y: auto; }
    .tweak-group + .tweak-group { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
    .tweak-label {
      font-size: .72rem; color: var(--text-muted); font-weight: 600;
      text-transform: uppercase; letter-spacing: .04em;
      margin-bottom: .4rem;
    }
    .tweak-segments {
      display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
      gap: 2px; padding: 2px;
      background: var(--bg-app); border: 1px solid var(--border);
      border-radius: 6px;
    }
    .tweak-segments button {
      background: transparent; border: none; padding: .35rem .5rem;
      font-size: .78rem; font-weight: 500; color: var(--text-secondary);
      border-radius: 4px; cursor: pointer; transition: all .12s;
    }
    .tweak-segments button:hover { color: var(--text-primary); }
    .tweak-segments button.is-active {
      background: var(--bg-card); color: var(--mntox-verde);
      box-shadow: var(--shadow-sm); font-weight: 600;
    }
    .tweak-slider { width: 100%; accent-color: var(--mntox-verde); }
    .tweak-slider-row { display: flex; align-items: center; gap: .5rem; }
    .tweak-slider-val {
      font-family: ui-monospace, monospace; font-size: .78rem;
      color: var(--text-secondary); min-width: 48px; text-align: right;
    }
    .tweak-toggle {
      display: flex; align-items: center; justify-content: space-between;
      gap: .5rem; padding: .25rem 0; cursor: pointer;
    }
    .tweak-toggle-label { font-size: .85rem; color: var(--text-primary); font-weight: 500; }
    .tweak-toggle-meta { font-size: .72rem; color: var(--text-muted); }
    .toggle-track {
      width: 36px; height: 20px; border-radius: 999px; background: var(--border);
      position: relative; transition: background .15s; flex-shrink: 0;
    }
    .toggle-track::after {
      content: ""; position: absolute; top: 2px; left: 2px;
      width: 16px; height: 16px; border-radius: 50%;
      background: white; box-shadow: var(--shadow-sm);
      transition: transform .15s;
    }
    .toggle-track.is-on { background: var(--mntox-verde); }
    .toggle-track.is-on::after { transform: translateX(16px); }

    /* Mobile menu toggle (only <992px) */
    .menu-toggle { display: none; }
    @media (max-width: 991.98px) { .menu-toggle { display: inline-flex; } }

    /* ── WHATSAPP PAGE ── */
    .wa-page { display: flex; flex-direction: column; gap: 1rem; }
    .wa-status-card {
      display: flex; align-items: center; gap: 1rem;
      padding: 1rem 1.25rem; background: var(--bg-card);
      border: 1px solid var(--border); border-radius: 12px;
    }
    .wa-status-icon {
      width: 48px; height: 48px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .wa-status-info { flex: 1; }
    .wa-status-label { font-weight: 700; font-size: .95rem; color: var(--text-primary); }
    .wa-status-sub   { font-size: .8rem; color: var(--text-secondary); margin-top: .1rem; }
    .wa-status-dot {
      width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
    }
    .wa-status-dot.is-online  { background: #25d366; box-shadow: 0 0 0 3px rgba(37,211,102,.2); }
    .wa-status-dot.is-offline { background: var(--danger,#dc2626); }
    .wa-status-dot.is-warn    { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.2); }

    .wa-warn-banner {
      display: flex; align-items: center; gap: .65rem;
      padding: .75rem 1rem; border-radius: 10px;
      background: #fef3c7; color: #92400e;
      font-size: .85rem; border: 1px solid #fde68a;
    }
    .wa-warn-banner i { font-size: 1rem; flex-shrink: 0; }

    /* Card de conexão (desconectado) */
    .wa-connect-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 14px; padding: 2rem 1.5rem; text-align: center;
      display: flex; flex-direction: column; align-items: center; gap: 1rem;
    }
    .wa-connect-icon {
      width: 64px; height: 64px; border-radius: 16px;
      background: #25d36615; display: flex; align-items: center; justify-content: center;
    }
    .wa-connect-icon i { font-size: 2rem; color: #25d366; }
    .wa-connect-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
    .wa-connect-sub   { font-size: .88rem; color: var(--text-secondary); max-width: 420px; line-height: 1.5; }
    .wa-qr-loading    { color: var(--text-muted); font-size: .85rem; }

    /* Item pendente */
    .wa-pending-item  { border-color: #fde68a; background: #fef9ec; }
    [data-theme="dark"] .wa-pending-item { background: #2a2210; border-color: #7a5c00; }

    .wa-qr-card { text-align: center; padding: 1.25rem; }
    .wa-qr-title { font-weight: 700; margin-bottom: .75rem; font-size: .9rem; color: var(--text-secondary); }
    .wa-qr-text { font-family: ui-monospace,monospace; font-size: .65rem; line-height: 1.2; display: inline-block; text-align: left; }

    .wa-add-row { display: flex; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
    .wa-add-row .input-mntox { min-width: 140px; }

    .wa-numbers-list { display: flex; flex-direction: column; gap: .5rem; }
    .wa-number-item {
      display: flex; align-items: center; gap: .75rem;
      padding: .65rem .85rem; border: 1px solid var(--border);
      border-radius: 8px; background: var(--bg-subtle); transition: opacity .15s;
    }
    .wa-number-item.is-inactive { opacity: .55; }
    .wa-number-avatar {
      width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
      background: #25d36620; color: #25d366;
      display: flex; align-items: center; justify-content: center; font-size: 1rem;
    }
    .wa-number-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
    .wa-number-name { font-weight: 600; font-size: .88rem; color: var(--text-primary); }
    .wa-number-id   { font-size: .74rem; font-family: ui-monospace,monospace; color: var(--text-muted); }
    .wa-number-actions { display: flex; gap: .25rem; }

    .wa-log {
      font-family: ui-monospace, monospace; font-size: .72rem;
      max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
    }
    .wa-log-line { padding: .2rem .4rem; border-radius: 4px; color: var(--text-secondary); }
    .wa-log-msg     { background: var(--mntox-verde-soft); color: var(--mntox-verde); }
    .wa-log-blocked { background: var(--danger-bg,#fee2e2); color: var(--danger,#dc2626); }
    .wa-log-conn    { color: var(--text-muted); }

    /* ── MODAL DE CONFIRMAÇÃO ── */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 1000;
      background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
      display: flex; align-items: center; justify-content: center;
      padding: 1rem;
    }
    .modal-box {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
      width: 100%; max-width: 400px;
      display: flex; flex-direction: column; gap: 0;
      overflow: hidden;
      animation: modal-in .15s ease;
    }
    @keyframes modal-in {
      from { opacity:0; transform:scale(.96) translateY(8px); }
      to   { opacity:1; transform:scale(1)  translateY(0);    }
    }
    .modal-head {
      display: flex; align-items: center; gap: .65rem;
      padding: 1.1rem 1.25rem .75rem;
      border-bottom: 1px solid var(--border);
    }
    .modal-icon { font-size: 1.25rem; color: var(--mntox-verde); }
    .modal-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
    .modal-body {
      padding: .9rem 1.25rem 1rem;
      font-size: .88rem; color: var(--text-secondary); line-height: 1.5;
    }
    .modal-actions {
      display: flex; justify-content: flex-end; gap: .5rem;
      padding: .75rem 1.25rem 1rem;
      border-top: 1px solid var(--border);
    }
  

/* ── Terminal ──────────────────────────────────────────────────────────────── */
.term-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end;
}
.term-panel {
  width: 100%; max-height: 60vh; min-height: 260px;
  background: #0d1117;
  border-top: 2px solid var(--mntox-verde);
  display: flex; flex-direction: column;
  animation: termSlideUp .18s ease;
}
@keyframes termSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.term-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .4rem .75rem;
  border-bottom: 1px solid #1e2734;
  flex-shrink: 0;
}
.term-title {
  font-size: .8rem; font-weight: 600;
  color: var(--mntox-verde); font-family: monospace; letter-spacing: .05em;
}
.term-output {
  flex: 1; overflow-y: auto; padding: .6rem .75rem;
  font-family: 'Courier New', Courier, monospace; font-size: .8rem;
  line-height: 1.5; color: #e2e8f0;
}
.term-line { white-space: pre-wrap; word-break: break-all; }
.term-input-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .75rem;
  border-top: 1px solid #1e2734; flex-shrink: 0;
}
.term-prompt {
  color: var(--mntox-verde); font-family: monospace;
  font-size: .85rem; font-weight: 700; user-select: none;
}
.term-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #e2e8f0; font-family: 'Courier New', Courier, monospace;
  font-size: .85rem; caret-color: var(--mntox-verde);
}

/* ── Auditoria ─────────────────────────────────────────────────────────────── */
.audit-shell { display:flex; flex-direction:column; height:100%; gap:.75rem; }

.audit-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .75rem 1rem;
  background: var(--surface-1); border-radius: var(--radius);
  border: 1px solid var(--border);
}
.audit-total { font-size: .8rem; color: var(--text-3); white-space: nowrap; }

.audit-table-wrap { flex:1; overflow:auto; border:1px solid var(--border); border-radius:var(--radius); }
.audit-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.audit-table thead th {
  position: sticky; top:0; background:var(--surface-1);
  padding:.55rem .75rem; text-align:left; font-weight:600;
  color:var(--text-2); border-bottom:1px solid var(--border); white-space:nowrap;
}
.audit-table tbody tr { border-bottom:1px solid var(--border-subtle,var(--border)); }
.audit-table tbody tr:hover { background:var(--surface-hover,var(--surface-2)); }
.audit-table td { padding:.45rem .75rem; vertical-align:middle; }

.audit-ts    { white-space:nowrap; color:var(--text-2); font-size:.78rem; }
.audit-actor { color:var(--text-3); font-size:.78rem; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.audit-action { white-space:nowrap; font-size:.8rem; }
.audit-action .bi { margin-right:.25rem; }

.audit-result { font-size:.75rem; font-weight:600; padding:.15rem .45rem; border-radius:3px; text-transform:uppercase; letter-spacing:.03em; }
.audit-result.success { background:rgba(33,176,110,.12); color:var(--mntox-verde); }
.audit-result.failure { background:rgba(239,68,68,.12);  color:#f87171; }
.audit-result.queued  { background:rgba(240,165,0,.12);  color:#f0a500; }
.audit-result.partial { background:rgba(96,165,250,.12); color:#60a5fa; }

.audit-device-btn {
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--mntox-verde); font-family:monospace; font-size:.8rem; text-decoration:underline dotted;
}
.audit-detail-btn {
  background:none; border:none; padding:0; cursor:pointer; text-align:left;
  color:var(--text-3); font-size:.78rem; font-family:monospace;
  max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;
}
.audit-detail-btn:hover { color:var(--text-1); }
.audit-detail-open {
  font-family:monospace; font-size:.75rem; color:var(--text-2);
  cursor:pointer; line-height:1.6;
}
.audit-detail-key { color:var(--text-3); margin-right:.35rem; }

.audit-pagination {
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.5rem;
}
.audit-page-info { font-size:.82rem; color:var(--text-2); padding:0 .5rem; }

/* ── Usuários ──────────────────────────────────────────────────────────────── */
.badge-role {
  display: inline-flex; align-items: center;
  padding: .25rem .65rem; border-radius: 99px;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  white-space: nowrap;
}
.role-admin { background: var(--mntox-verde-soft); color: var(--mntox-verde); }
.role-op    { background: var(--state-info-bg);    color: var(--state-info); }

/* tabela compartilhada de dados (alias de table-mntox para uso sem classe extra) */
table.table-mntox th {
  text-align: left; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); font-weight: 700;
  padding: .6rem 1.125rem;
  background: var(--bg-subtle); border-bottom: 1px solid var(--border);
}
table.table-mntox td {
  padding: .75rem 1.125rem;
  border-bottom: 1px solid var(--border);
  font-size: .875rem; color: var(--text-primary); vertical-align: middle;
}
table.table-mntox tbody tr:hover { background: var(--bg-hover); }
table.table-mntox tbody tr:last-child td { border-bottom: none; }

/* modal overlay genérico */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.5); display: flex;
  align-items: center; justify-content: center; padding: 1rem;
  backdrop-filter: blur(2px);
}
.modal-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.5rem; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  max-height: calc(100vh - 2rem); overflow: hidden;
  display: flex; flex-direction: column;
  animation: modal-in .18s ease;
}
.modal-box-body {
  overflow-y: auto; flex: 1; min-height: 0;
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(.96) translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   DASHBOARD ANALÍTICO
   ============================================================ */
.db-panel { display: flex; flex-direction: column; gap: .875rem; margin-bottom: .875rem; }

.db-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: .875rem; }
.db-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: .875rem; }
@media (max-width: 991.98px) {
  .db-grid-3 { grid-template-columns: 1fr; }
  .db-grid-2 { grid-template-columns: 1fr; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .db-grid-3 { grid-template-columns: repeat(2,1fr); }
}

.db-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem;
  display: flex; flex-direction: column; gap: .65rem;
  box-shadow: var(--shadow-sm); min-height: 180px;
  animation: fadein .2s ease;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.db-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.db-card-title {
  display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
}
.db-card-title .bi { font-size: .9rem; }

.db-loading {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 1.25rem;
}

/* ── recentes ── */
.db-recent { display: flex; flex-direction: column; gap: .3rem; margin-top: .25rem; }
.db-recent-row {
  display: flex; align-items: center; gap: .4rem;
  font-size: .73rem; padding: .25rem 0;
  border-bottom: 1px solid var(--border);
}
.db-recent-row:last-child { border-bottom: none; }
.db-recent-time  { color: var(--text-muted); white-space: nowrap; min-width: 58px; }
.db-recent-action{ color: var(--text-primary); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-recent-dev   { font-family: ui-monospace,monospace; font-size: .68rem; color: var(--text-muted); }

/* ── badges de resultado ── */
.db-badge {
  display: inline-block; padding: .1rem .35rem; border-radius: 4px;
  font-size: .65rem; font-weight: 700; text-transform: uppercase; flex-shrink: 0;
}
.db-badge-success { background: var(--mntox-verde-soft); color: var(--mntox-verde); }
.db-badge-failure { background: var(--state-danger-bg);  color: var(--state-danger); }
.db-badge-queued  { background: var(--state-info-bg);    color: var(--state-info); }
.db-badge-partial { background: var(--state-warn-bg);    color: var(--state-warn); }

/* ── IA ── */
.db-ai-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .75rem; padding: 1rem;
}
.db-ai-resp {
  flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: .25rem 0;
}

/* ── stat tiles integrados ao dashboard ── */
.db-stat-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: .875rem;
}
@media (max-width: 767.98px) { .db-stat-row { grid-template-columns: repeat(2,1fr); gap:.625rem; } }

.db-stat-tile {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--dst-color, var(--border-strong));
  border-radius: 12px; padding: .95rem 1rem .9rem 1.2rem;
  cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: .4rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.db-stat-tile:hover {
  transform: translateY(-2px);
  border-color: var(--dst-color, var(--border-strong));
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.db-stat-tile.is-active {
  background: var(--dst-bg, var(--bg-hover));
  border-color: var(--dst-color);
  box-shadow: 0 0 0 2px var(--dst-color, transparent), 0 4px 16px rgba(0,0,0,.08);
}
.dst-head { display:flex; align-items:center; gap:.4rem; }
.dst-head .bi { color: var(--dst-color); font-size:.85rem; }
.dst-lbl { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); }
.dst-num { font-size:1.9rem; font-weight:800; letter-spacing:-.04em; color:var(--text-primary);
           font-variant-numeric:tabular-nums; line-height:1; }
.db-stat-tile.is-active .dst-num { color: var(--dst-color); }
.dst-pct { font-size:.68rem; color:var(--text-muted); }
.db-stat-tile.is-active .dst-pct { color:var(--dst-color); opacity:.75; }
.dst-bar { height:2px; border-radius:99px; background:var(--border); overflow:hidden; margin-top:2px; }
.dst-bar-fill { height:100%; border-radius:99px; background:var(--dst-color,var(--border-strong));
                transition:width .65s cubic-bezier(.4,0,.2,1); }
@media (max-width:767.98px) { .dst-num { font-size:1.5rem; } }

/* ── paginação ── */
.page-size-sel {
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-primary);
  font-size: .75rem; padding: .2rem .4rem; cursor: pointer;
}
.page-size-sel:focus { outline: none; border-color: var(--mntox-verde); }