/* ==== Tokens de tema (dark por padrão) ==== */
:root{
  --bg:#0a0a0a;
  --text:#f3f4f6;
  --muted:#9aa3af;
  --accent:#7dd3fc;
  --primary:#22c55e;
  --border:#1f2937;
  --outline:#333;

  /* superfícies e visuais */
  --card:#111;
  --panel:#0d0d0d;
  --grad:linear-gradient(135deg,#ffffff 0%, rgba(255,255,255,0.55) 100%);
  --card-bg: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  --header-glass-bg: rgba(10,10,10,.6);
  --dropdown-bg: linear-gradient(180deg, rgba(44, 44, 44, 0.979), rgba(17, 17, 17, 0.918));
  --hover-bg: rgba(255,255,255,.06);
  --menu-danger-hover: rgba(127,29,29,.25);
  --qr-bg: rgba(255,255,255,.03);
  --qr-loader-bg: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  --bar-gradient: linear-gradient(90deg,#22c55e,#16a34a);
}

/* ==== Tema Clean (claro) ==== */
html[data-theme="clean"]{
  --bg:#f6f7fb;
  --text:#0f172a;
  --muted:#475569;
  --accent:#2e7bff;
  --primary:#22c55e;
  --border:#e5e7eb;
  --outline:#d1d5db;

  --card:#ffffff;
  --panel:#ffffff;
  --grad:linear-gradient(135deg,#0ea5e9 0%, #2e7bff 100%);
  --card-bg: linear-gradient(180deg, rgba(2,6,23,.03), rgba(2,6,23,.01));
  --header-glass-bg: rgba(255,255,255,.7);
  --dropdown-bg: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,251,.95));
  --hover-bg: rgba(2,6,23,.06);
  --menu-danger-hover: rgba(220,38,38,.08);
  --qr-bg: rgba(2,6,23,.04);
  --qr-loader-bg: linear-gradient(135deg, rgba(2,6,23,.04), rgba(2,6,23,.01));
}

/* ===== base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height: 100svh;
  background-color: var(--bg);

  background-image:
    radial-gradient(60% 50% at 10% -10%, rgba(125,211,252,.10) 0, transparent 70%),
    radial-gradient(55% 45% at 110% 10%, rgba(34,197,94,.10) 0, transparent 70%);
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: 0% 0%, 100% 0%;
  background-size: 1400px 900px, 1200px 700px;

  color: var(--text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
}

/* layout */
.container{max-width:1050px;margin:40px auto;padding:0 16px}
.app-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px;position:sticky;top:0;
  background: var(--header-glass-bg);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border)
}
.brand{font-weight:800;font-size:20px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.brand span{opacity:.8}
.top-nav a{color:var(--text);text-decoration:none;margin-left:16px;opacity:.9}
.top-nav a.badge{padding:6px 10px;border:1px solid var(--border);border-radius:8px}
.top-nav a.outline{border:1px solid var(--outline);border-radius:8px;padding:6px 10px}

/* cards / textos / botões */
.card{background: var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:22px; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card.center{max-width:420px;margin:40px auto}
.title{margin:0 0 10px;font-size:24px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{margin:0 0 8px;font-size:18px}
.form label{display:block;margin:12px 0}
.form input{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  background: var(--panel); color:var(--text)
}
.btn{border:0;border-radius:10px;padding:10px 14px;cursor:pointer}
.btn.primary{background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--outline);color:var(--text)}
.btn.outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn.w100{width:100%}
.btn.disabled{opacity:.5;cursor:not-allowed}
.alert{background:#3f1d1d;border:1px solid #7f1d1d;color:#fecaca;padding:10px;border-radius:10px;margin:8px 0}
.muted{color:var(--muted);font-size:14px}

/* === QR Connect === */
.qr-wrap{
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  margin: 12px auto 16px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--qr-bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.qr-image{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s ease; image-rendering: pixelated; }
.qr-image.is-visible{ opacity: 1; }
.qr-loader{ position: absolute; inset: 0; display: grid; place-items: center; background: var(--qr-loader-bg); transition: opacity .2s ease; z-index: 2; }
.qr-loader.is-hidden{ opacity: 0; pointer-events: none; }
.qr-placeholder{ font-weight: 700; letter-spacing: .3px; color: rgba(255,255,255,.85); animation: qrPulse 1.1s ease-in-out infinite; text-align: center; }
@keyframes qrPulse{ 0%{ transform: scale(1); opacity:.65 } 50%{ transform: scale(1.06); opacity:1 } 100%{ transform: scale(1); opacity:.65 } }

/* skeleton / progress / métricas */
.skeleton{position:relative;overflow:hidden}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent, rgba(255,255,255,.06), transparent);animation:shine 1.6s infinite}
@keyframes shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.progress{width:100%;height:10px;background: var(--panel);border:1px solid var(--border);border-radius:999px;overflow:hidden;margin:10px 0 6px}
.bar{height:100%;background: var(--bar-gradient)}
.grid{display:grid;gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.metric{background: var(--panel);border:1px solid var(--border);padding:14px;border-radius:12px;text-align:center}
.metric span{font-size:22px;font-weight:700;display:block}
.app-footer{padding:30px 16px;color:#6b7280;text-align:center}

@media (max-width:640px){ .container{margin:24px auto} }

.dot{display:inline-block;width:10px;height:10px;border-radius:50%;}
.dot-green{background:#29c754}
.dot-yellow{background:#f6c453}
.dot-red{background:#e15b64}

/* ===== Brand (logo) ===== */
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo { height:28px; width:auto; display:block; filter: drop-shadow(0 2px 10px rgba(0,0,0,.25)); }

/* ===== Menu dropdown ===== */
.menu { position: relative; }
.menu-toggle { min-width: 120px; }

.menu-dropdown{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width: 220px;
  background: var(--dropdown-bg);
  border:1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.20);
  padding:8px;
  display:none;
  z-index: 1000;
}
.menu-dropdown.open{ display:block; animation: ddFade .12s ease-out; }
@keyframes ddFade { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform: translateY(0); } }

.menu-item{
  display:block; padding:10px 12px; border-radius:10px; text-decoration:none;
  color: var(--text); white-space: nowrap;
}
.menu-item:hover{ background: var(--hover-bg); }
.menu-item.danger{ color:#fecaca; }
.menu-item.danger:hover{ background: var(--menu-danger-hover); }

.menu-sep{ height:1px; margin:6px 4px; background: rgba(255,255,255, 0.6); border-radius:1px; }
html[data-theme="clean"] .menu-sep{ background: rgba(2,6,23, .15); }

/* ===== Toggle de tema (ícones) ===== */
.theme-toggle .icon{ display:none; line-height:0; }
html[data-theme="dark"]  .theme-toggle .sun{  display:inline-flex; }
html[data-theme="clean"] .theme-toggle .moon{ display:inline-flex; }