/* ============================================================
   CONTADOR oumais.dev — TEMA (clone do MisterMELI 2.0, em AZUL)
   Idêntico ao tema central do 2.0 — preto + branco + NEON,
   só o destaque mudou: VERDE -> AZUL. Nomes de variável mantidos
   (--verde) de propósito, pra herdar 100% dos componentes do 2.0.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');

/* ---------- MODO NOTURNO (padrao — a cara do oumais.dev) ---------- */
:root,
:root[data-theme="dark"] {
  --verde:        #18A8FF;   /* AZUL neon da marca (era #84E61C) */
  --verde-claro:  #5CC6FF;
  --verde-escuro: #0A78C8;
  --glow:         0 0 18px rgba(24,168,255,.45);

  --bg:        #000000;
  --bg-2:      #0a0d0f;
  --surface:   #121518;
  --surface-2: #1a1f24;
  --borda:     rgba(255,255,255,.09);
  --texto:     #ffffff;
  --texto-dim: #97a0a7;
  --texto-fraco:#5f676b;

  --btn-bg:    var(--verde);
  --btn-txt:   #04121e;

  --erro:  #ff5b5b;
  --ok:    var(--verde);
  --aviso: #ffb23e;

  --sombra: 0 8px 30px rgba(0,0,0,.55);
  --raio: 14px;
}

/* ---------- MODO DIA ---------- */
:root[data-theme="light"] {
  --verde:        #0A78C8;   /* azul mais fechado, legivel no branco */
  --verde-claro:  #1f9cd6;
  --verde-escuro: #075a96;
  --glow:         0 0 14px rgba(10,120,200,.28);

  --bg:        #eef1f4;
  --bg-2:      #e3e7eb;
  --surface:   #ffffff;
  --surface-2: #f5f7f9;
  --borda:     rgba(0,0,0,.10);
  --texto:     #131618;
  --texto-dim: #5a6266;
  --texto-fraco:#9aa1a6;

  --btn-bg:    var(--verde);
  --btn-txt:   #ffffff;

  --erro:  #c0392b;
  --ok:    var(--verde-escuro);
  --aviso: #b9770f;

  --sombra: 0 6px 22px rgba(0,0,0,.10);
  --raio: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
  transition: background .25s ease, color .25s ease;
}

a { color: var(--verde); text-decoration: none; }
code, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------- marca / logo ---------- */
.mm-mark { width: 1em; height: 1em; display: inline-block; vertical-align: -.15em; }
.mm-mark .plus { fill: var(--verde); }

/* badge preto que segura o logo PNG (mantem a marca sempre no fundo preto dela) */
.mm-logo-badge {
  background: #000; border-radius: 16px; padding: 10px;
  display: inline-flex; box-shadow: var(--glow);
}
.mm-logo-badge img { display: block; }

.mm-glow { filter: drop-shadow(var(--glow)); }

/* ---------- botoes ---------- */
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-txt);
  border: 0; border-radius: 10px; padding: 11px 18px;
  box-shadow: var(--glow);
  transition: transform .08s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent; color: var(--texto);
  border: 1px solid var(--borda); box-shadow: none;
}
.btn-ghost:hover { border-color: var(--verde); color: var(--verde); }

/* ---------- cards / superficies ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px;
}
.card-verde { border-color: rgba(24,168,255,.35); }

/* ---------- inputs ---------- */
label { display:block; font-size:12px; color:var(--texto-dim); margin:12px 0 5px; font-weight:500; }
input, select, textarea {
  width: 100%; padding: 11px 12px;
  background: var(--surface-2); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 9px;
  font: inherit; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--verde); box-shadow: 0 0 0 3px rgba(24,168,255,.15);
}

/* ---------- pills / status ---------- */
.pill { display:inline-block; padding:3px 11px; border-radius:20px; font-size:12px; font-weight:700; }
.pill.ok  { background: rgba(24,168,255,.16); color: var(--verde); }
.pill.bad { background: rgba(255,91,91,.16); color: var(--erro); }

/* ---------- cabecalho do app ---------- */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 22px; background: var(--bg-2);
  border-bottom: 1px solid var(--borda); position: sticky; top:0; z-index: 10;
}
.topbar .marca { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; }
.topbar .marca .mm-mark { width: 30px; height: 30px; }
.topbar .marca b span { color: var(--verde); }

/* ---------- toggle dia/noite ---------- */
.tema-toggle {
  width: 42px; height: 42px; border-radius: 11px; cursor:pointer;
  background: var(--surface); border: 1px solid var(--borda); color: var(--texto);
  display:grid; place-items:center; font-size:18px; transition: border-color .15s;
}
.tema-toggle:hover { border-color: var(--verde); }

/* ---------- marca d'agua de fundo (logo gigante e fraco) ---------- */
.mm-watermark {
  position: fixed; right: -60px; bottom: -60px; width: 420px; height: 420px;
  color: var(--texto); opacity: .035; pointer-events: none; z-index: 0;
}
:root[data-theme="dark"] .mm-watermark { opacity: .045; }

/* ---------- spinner de circuito ---------- */
.mm-spinner { width: 54px; height: 54px; animation: mm-pulse 1.4s ease-in-out infinite; }
@keyframes mm-pulse {
  0%,100% { filter: drop-shadow(0 0 4px rgba(24,168,255,.3)); opacity:.7; transform: scale(.96); }
  50%     { filter: drop-shadow(0 0 16px rgba(24,168,255,.7)); opacity:1; transform: scale(1.04); }
}

/* ---------- rodape powered by ---------- */
.mm-powered { display:flex; align-items:center; gap:7px; color: var(--texto-fraco); font-size:12px; }
.mm-powered b { color: var(--texto-dim); }
.mm-powered b span { color: var(--verde); }