/* ═══════════════════════════════════════════════════════════
   Painel · Mission Control
   ═══════════════════════════════════════════════════════════ */

/* ── Login ──────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(430px, 100%); padding: 40px 34px; text-align: center; }
.login-patch { width: 116px; margin: 0 auto 22px; animation: float 7s ease-in-out infinite; }
.login-card h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; }
.login-form { display: grid; gap: 15px; margin-top: 28px; text-align: left; }
.login-foot { margin-top: 24px; font-size: .74rem; }

.lock-msg {
  padding: 13px 16px; border-radius: var(--r-sm); font-size: .84rem;
  background: rgba(255,45,74,.1); border: 1px solid rgba(255,45,74,.32); color: var(--rt-hot);
}

/* ── Estrutura do app ───────────────────────────────────────── */
.app { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
@media (max-width: 1000px) { .app { grid-template-columns: 1fr; } }

.side {
  position: sticky; top: 0; height: 100vh; padding: 22px 16px;
  border-right: 1px solid var(--hair);
  background: rgba(8,8,13,.6);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column; gap: 8px; z-index: 40;
}
@media (max-width: 1000px) { .side { display: none; } }

.side-brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 20px; }
.side-brand img { width: 36px; height: 36px; border-radius: 12px; }

.side-link {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  border-radius: var(--r-sm); color: var(--ink-3); font-size: .91rem; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; background: none; width: 100%; text-align: left;
  transition: all .3s var(--ease-out);
}
.side-link svg { width: 19px; height: 19px; flex: none; }
.side-link:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.side-link.on {
  color: #fff;
  background: linear-gradient(100deg, rgba(255,45,74,.18), rgba(255,45,74,.04));
  border-color: rgba(255,45,74,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.side-link.on svg { color: var(--rt); }

.side-foot { margin-top: auto; display: grid; gap: 10px; }

.main { padding: 26px 30px 130px; min-width: 0; }
@media (max-width: 1000px) { .main { padding: 20px 16px 130px; } }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 26px; flex-wrap: wrap;
}
.topbar h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.035em; }
.topbar p { color: var(--ink-3); font-size: .87rem; margin-top: 3px; }

/* ── Cartões de métrica ─────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat { padding: 22px; position: relative; overflow: hidden; }
.stat::after {
  content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,45,74,.16), transparent 70%);
}
.stat-label {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3);
}
.stat-value {
  font-family: var(--mono); font-size: 1.85rem; font-weight: 700;
  letter-spacing: -.035em; margin-top: 10px; line-height: 1;
}
.stat-sub { font-size: .78rem; color: var(--ink-3); margin-top: 9px; }
.stat.ok .stat-value { color: var(--ok); }
.stat.hot .stat-value { color: var(--rt-hot); }

/* ── Gráfico ────────────────────────────────────────────────── */
.chart-card { padding: 24px; margin-bottom: 22px; }
.chart-svg { width: 100%; height: 190px; overflow: visible; }
.chart-svg .area { fill: url(#chartGrad); }
.chart-svg .line { fill: none; stroke: var(--rt); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .pt { fill: var(--rt); stroke: #08080d; stroke-width: 2.5; }
.chart-svg .grid-line { stroke: rgba(255,255,255,.05); stroke-width: 1; }
.chart-empty { display: grid; place-items: center; height: 190px; color: var(--ink-4); font-size: .88rem; }

/* ── Tabelas ────────────────────────────────────────────────── */
.table-card { padding: 0; overflow: hidden; }
.table-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 19px 22px; border-bottom: 1px solid var(--hair); flex-wrap: wrap;
}
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-4); text-align: left; padding: 13px 22px; font-weight: 500;
  border-bottom: 1px solid var(--hair); white-space: nowrap;
}
td { padding: 15px 22px; font-size: .88rem; border-bottom: 1px solid rgba(255,255,255,.035); }
tbody tr { transition: background .25s; }
tbody tr:hover { background: rgba(255,255,255,.028); }
tbody tr:last-child td { border-bottom: 0; }
.td-actions { display: flex; gap: 6px; justify-content: flex-end; }
.empty-row { padding: 46px 22px; text-align: center; color: var(--ink-4); font-size: .9rem; }

/* ── Cartão de cobrança ─────────────────────────────────────── */
.charge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.charge-card { padding: 22px; display: grid; gap: 14px; }
.charge-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.charge-title { font-weight: 700; font-size: 1.03rem; letter-spacing: -.02em; }
.charge-code {
  font-family: var(--mono); font-size: .72rem; color: var(--rt-hot); letter-spacing: .12em;
  margin-top: 4px; cursor: pointer;
}
.charge-value { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }
.charge-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.charge-actions { display: flex; gap: 7px; flex-wrap: wrap; padding-top: 4px; }

.link-box {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: rgba(0,0,0,.35); border: 1px solid var(--hair); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: .73rem; color: var(--ink-3);
  cursor: pointer; transition: all .3s; overflow: hidden;
}
.link-box:hover { border-color: var(--rt); color: var(--ink-2); }
.link-box span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── QR Studio ──────────────────────────────────────────────── */
.studio { display: grid; grid-template-columns: 300px 1fr; gap: 24px; }
@media (max-width: 700px) { .studio { grid-template-columns: 1fr; } }
.studio-preview {
  border-radius: var(--r-md); overflow: hidden; background: #0a0a10;
  border: 1px solid var(--hair); box-shadow: 0 20px 60px -25px rgba(0,0,0,.9);
}
.studio-preview canvas { width: 100%; height: auto; display: block; }
.studio-controls { display: grid; gap: 18px; align-content: start; }
.theme-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-chip {
  width: 42px; height: 42px; border-radius: 13px; cursor: pointer; position: relative;
  border: 2px solid transparent; transition: all .3s var(--ease-spring);
}
.theme-chip.on { border-color: var(--rt); transform: scale(1.09); }
.theme-chip:hover { transform: scale(1.06); }

/* ── Formulário do modal ────────────────────────────────────── */
.form-grid { display: grid; gap: 16px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-2 { grid-template-columns: 1fr; } }
.modal h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 4px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; }

/* ── Dock do painel (mobile) ────────────────────────────────── */
@media (min-width: 1001px) { #panelDock { display: none; } }

/* ── Auditoria ──────────────────────────────────────────────── */
.audit-item {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 14px; align-items: center;
  padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.035); font-size: .86rem;
}
.audit-item:last-child { border-bottom: 0; }
.audit-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.audit-item.warn .audit-dot { background: var(--warn); }
.audit-item.error .audit-dot { background: var(--rt); }
.audit-action { font-family: var(--mono); font-size: .78rem; color: var(--ink-2); }
.audit-detail { color: var(--ink-4); font-size: .78rem; margin-top: 2px; word-break: break-word; }
.audit-time { font-family: var(--mono); font-size: .7rem; color: var(--ink-4); white-space: nowrap; }

/* ── Config ─────────────────────────────────────────────────── */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 12px 22px; align-items: baseline; }
.kv dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.kv dd { font-size: .9rem; word-break: break-all; }

.view { animation: viewIn .5s var(--ease-out); }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px) } }

/* ── Grades responsivas do painel ───────────────────────────── */
@media (max-width: 1150px) {
  #quickGrid, #systemGrid { grid-template-columns: 1fr !important; }
}