/* Variáveis de cor: claro (padrão) e escuro */
:root, [data-theme="light"] {
  --bg:#f3f5f8; --surface:#ffffff; --surface2:#eef2f6;
  --border:#dde3ea; --border2:#c4cedb;
  --text:#2b3a4a; --text-strong:#0f1b2a; --muted:#66788c;
  --accent:#0b78d1; --accent-hover:#0966b3; --on-accent:#ffffff;
  --accent-soft:rgba(11,120,209,.10); --accent-soft-border:rgba(11,120,209,.30);
  --accent2:#0d9660; --accent2-soft:rgba(13,150,96,.10); --accent2-border:rgba(13,150,96,.35);
  --danger:#d4234a; --danger-soft:rgba(212,35,74,.09); --danger-border:rgba(212,35,74,.30);
  --warn:#a86a08; --warn-soft:rgba(168,106,8,.10); --warn-border:rgba(168,106,8,.30);
  --whats:#12923f; --link2:#2c6cae;
  --row-alt:#f8fafc; --row-hover:rgba(11,120,209,.06);
  --shadow:0 4px 18px rgba(20,35,55,.08);
  --mono:'IBM Plex Mono',ui-monospace,monospace; --sans:'IBM Plex Sans',system-ui,sans-serif;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg:#0d0f11; --surface:#13181e; --surface2:#1a2230;
  --border:#1f2933; --border2:#2d3a47;
  --text:#c8d6e5; --text-strong:#e8f4ff; --muted:#5a7089;
  --accent:#00c2ff; --accent-hover:#33cfff; --on-accent:#000000;
  --accent-soft:rgba(0,194,255,.10); --accent-soft-border:rgba(0,194,255,.28);
  --accent2:#00ff9d; --accent2-soft:rgba(0,255,157,.10); --accent2-border:rgba(0,255,157,.25);
  --danger:#ff4d6d; --danger-soft:rgba(255,77,109,.10); --danger-border:rgba(255,77,109,.30);
  --warn:#ffc107; --warn-soft:rgba(255,193,7,.10); --warn-border:rgba(255,193,7,.25);
  --whats:#25d366; --link2:#a0c4e8;
  --row-alt:#111720; --row-hover:rgba(0,194,255,.05);
  --shadow:0 4px 18px rgba(0,0,0,.4);
  color-scheme: dark;
}

* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:var(--sans); font-size:14px; min-height:100vh; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Cabeçalho */
header { border-bottom:1px solid var(--border); padding:12px 24px; display:flex; align-items:center; gap:14px; position:sticky; top:0; background:var(--surface); z-index:100; flex-wrap:wrap; }
header .logo { font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent); letter-spacing:.15em; text-transform:uppercase; background:var(--accent-soft); border:1px solid var(--accent-soft-border); padding:4px 10px; border-radius:3px; }
header h1 { font-size:15px; font-weight:500; letter-spacing:.02em; color:var(--text-strong); }
.header-right { margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.base-info { font-family:var(--mono); font-size:10px; color:var(--muted); text-align:right; line-height:1.5; }
.quota { font-family:var(--mono); font-size:10px; color:var(--muted); line-height:1.5; text-align:right; }
.quota b { color:var(--text-strong); font-weight:600; }
.quota .low { color:var(--warn); }
.quota .out { color:var(--danger); }
.ping-dot { width:8px; height:8px; border-radius:50%; background:var(--muted); transition:background .3s; }
.ping-dot.ok  { background:var(--accent2); box-shadow:0 0 6px var(--accent2); }
.ping-dot.err { background:var(--danger);  box-shadow:0 0 6px var(--danger); }

/* Botões */
button { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border:none; border-radius:4px; padding:9px 14px; cursor:pointer; transition:all .15s; }
.btn-primary { background:var(--accent); color:var(--on-accent); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-primary:disabled { opacity:.4; cursor:not-allowed; }
.btn-export { background:transparent; color:var(--accent2); border:1px solid var(--accent2); }
.btn-export:hover { background:var(--accent2-soft); }
.btn-export:disabled { opacity:.35; cursor:not-allowed; }
.btn-clear, .btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--border2); }
.btn-clear:hover, .btn-ghost:hover { color:var(--text-strong); background:var(--surface2); }
.btn-danger { background:transparent; color:var(--danger); border:1px solid var(--danger-border); }
.btn-danger:hover { background:var(--danger-soft); }
.btn-sm { padding:5px 9px; font-size:10px; }
.icon-btn { background:transparent; border:1px solid var(--border2); color:var(--text); width:34px; height:34px; padding:0; font-size:15px; letter-spacing:0; border-radius:50%; }
.icon-btn:hover { background:var(--surface2); }

/* Campos */
.field { display:flex; flex-direction:column; gap:4px; }
.field label { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field select,
.cell-input { background:var(--surface); border:1px solid var(--border2); color:var(--text-strong); font-family:var(--mono); font-size:12px; padding:8px 10px; border-radius:4px; outline:none; transition:border-color .15s, box-shadow .15s; width:100%; }
.field input::placeholder, .cell-input::placeholder { color:var(--muted); opacity:.7; }
.field input:focus, .field select:focus, .cell-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.field select option { background:var(--surface2); color:var(--text-strong); }
.check { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--text); cursor:pointer; margin-top:4px; }
.check input { accent-color:var(--accent); width:14px; height:14px; }

.error-bar { display:none; background:var(--danger-soft); border:1px solid var(--danger-border); color:var(--danger); font-family:var(--mono); font-size:11px; padding:8px 14px; border-radius:4px; }
.error-bar.visible { display:block; }
.ok-bar { display:none; background:var(--accent2-soft); border:1px solid var(--accent2-border); color:var(--accent2); font-family:var(--mono); font-size:11px; padding:8px 14px; border-radius:4px; }
.ok-bar.visible { display:block; }

::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--muted); }

/* Logo Prospex: versão azul no tema claro, branca no escuro */
.brand-link { display:inline-flex; align-items:center; }
.brand-logo { height:34px; width:auto; display:block; }
.logo-escuro { display:none; }
[data-theme="dark"] .logo-claro { display:none; }
[data-theme="dark"] .logo-escuro { display:block; }
.brand-big { display:flex; justify-content:center; margin-bottom:6px; }
.brand-big img { width:100%; max-width:260px; height:auto; }
@media (max-width:560px) { .brand-logo { height:28px; } }