:root {
  --bg: #050706;
  --bg2: #0a0f0c;
  --panel: #0c1210;
  --card: #121a16;
  --card2: #161f1b;
  --border: #1a2420;
  --border2: #25322b;
  --text: #f4f8f5;
  --muted: #8b9a91;
  --green: #3f8f6a;
  --green2: #6bb892;
  --green-dim: rgba(63, 143, 106, 0.12);
  --green-glow: rgba(63, 143, 106, 0.18);
  --danger: #ef4444;
  --warn: #f59e0b;
  --info: #38bdf8;
  --font: "Manrope", "Segoe UI", sans-serif;
  --display: "Space Grotesk", "Manrope", sans-serif;
  --radius: 16px;
  --side: 280px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* —— ASTRA Control Center: tema neutro opcional —— */
body.theme-neutral {
  --green: #98a39d;
  --green2: #c2cbc6;
  --green-dim: rgba(152, 163, 157, .12);
  --green-glow: rgba(152, 163, 157, .16);
  --border: #202522;
  --border2: #303733;
  --muted: #9da6a1;
  background:
    radial-gradient(900px 440px at 8% -8%, rgba(184, 194, 188, .10), transparent 55%),
    radial-gradient(700px 380px at 100% 0%, rgba(184, 194, 188, .045), transparent 52%),
    #060706;
}
body.theme-neutral .side {
  background: linear-gradient(180deg, #050605 0%, #0c0e0d 55%, #080908 100%);
}
body.theme-neutral .credit-pill b {
  background: linear-gradient(135deg, #d5dcd8, #89958e);
  color: #090b0a;
}
body.theme-neutral .dash-stage-glow,
body.theme-neutral .dash-stage::after {
  opacity: .45;
  filter: grayscale(1);
}

/* —— Recursos profissionais do Control Center —— */
.panel-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.feature-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}
.feature-toggle span { display: grid; gap: 4px; }
.feature-toggle b { color: var(--text); }
.feature-toggle small { color: var(--muted); line-height: 1.35; }

.control-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin: 0 0 24px;
}
.control-overview .panel-block { margin: 0; min-height: 260px; }
.control-online-number {
  display: flex;
  align-items: end;
  gap: 14px;
  padding: 16px 0;
}
.control-online-number strong {
  font: 700 clamp(2.8rem, 5vw, 4.4rem)/.9 var(--display);
  letter-spacing: -.07em;
  color: var(--green2);
}
.control-online-number span { color: var(--muted); max-width: 190px; line-height: 1.35; }
.control-online-preview { display: grid; gap: 7px; }
.control-online-preview a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.control-online-preview a > i,
.online-pulse,
.live-label i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--green2);
  box-shadow: 0 0 0 4px var(--green-dim);
}
.control-online-preview span { display: grid; }
.control-online-preview small { color: var(--muted); }
.metric-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 14px 0;
}
.metric-mini-grid > div {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}
.metric-mini-grid span { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.metric-mini-grid b { display: block; margin-top: 5px; font-family: var(--display); font-size: 1.2rem; }
.metric-spark { width: 100%; height: 58px; overflow: visible; }
.metric-spark polyline { fill: none; stroke: var(--green2); stroke-width: 2.5; vector-effect: non-scaling-stroke; }

.online-hero { align-items: center; }
.online-total {
  min-width: 150px;
  padding: 18px 22px;
  border: 1px solid var(--border2);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
  text-align: right;
}
.online-total strong { display: block; font: 700 3.4rem/.9 var(--display); color: var(--green2); letter-spacing: -.06em; }
.online-total span { display: block; margin-top: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.live-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem; }
.online-list { display: grid; }
.online-row {
  display: grid;
  grid-template-columns: 10px minmax(150px, .8fr) minmax(220px, 1.5fr) auto;
  align-items: center;
  gap: 16px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--border);
}
.online-row:last-child { border-bottom: 0; }
.online-person, .online-track { display: grid; gap: 3px; min-width: 0; }
.online-person b, .online-track b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-person small, .online-track small { color: var(--muted); }

@media (max-width: 760px) {
  .panel-feature-grid, .control-overview { grid-template-columns: 1fr; }
  .metric-mini-grid { grid-template-columns: repeat(2, 1fr); }
  .online-row { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; }
  .online-track { grid-column: 2 / -1; }
  .online-row .badge { grid-column: 3; grid-row: 1; }
  .online-hero { align-items: stretch; }
  .online-total { text-align: left; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background:
    radial-gradient(1000px 480px at 8% -8%, rgba(29,185,84,.14), transparent 55%),
    radial-gradient(800px 420px at 100% 0%, rgba(30,215,96,.06), transparent 50%),
    radial-gradient(600px 300px at 50% 100%, rgba(29,185,84,.04), transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.shell { display: flex; min-height: 100vh; position: relative; }
body.no-scroll { overflow: hidden; }

.side-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 35;
}
.shell.side-open .side-backdrop { display: block; }

/* —— Sidebar —— */
.side {
  width: var(--side);
  background: linear-gradient(180deg, #030504 0%, #0a100d 55%, #080c0a 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 40;
  transform: translateX(0);
  transition: transform .28s var(--ease);
}
.brand {
  display: flex; gap: 12px; align-items: center;
  padding: 22px 18px 18px;
  border-bottom: 1px solid var(--border);
}
.brand-text { min-width: 0; flex: 1; }
.side-close {
  display: none;
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--border2); background: transparent;
  color: var(--muted); font-size: 1.3rem; cursor: pointer;
}
.menu-btn {
  display: none;
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--border2); background: var(--card);
  color: var(--text); font-size: 1.1rem; cursor: pointer;
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo, .login-logo {
  object-fit: contain;
  border-radius: 14px;
}
.brand-logo {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 0 16px var(--green-glow));
  background: #000;
  border: 1px solid rgba(29,185,84,.25);
}
.login-logo {
  display: block;
  margin: 0 auto 12px;
  max-width: 140px;
  height: auto;
}
.brand strong {
  display: block; font-family: var(--display); font-size: 1.2rem; letter-spacing: -.03em;
  font-weight: 800;
}
.brand span {
  color: var(--green2); font-size: .62rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
}

.credit-pill {
  margin: 14px 14px 6px;
  padding: 14px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(29,185,84,.16), rgba(29,185,84,.05));
  border: 1px solid rgba(29,185,84,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  flex-shrink: 0;
}
.credit-pill label {
  display: block; font-size: .65rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); font-weight: 700;
}
.credit-pill b {
  display: block; margin-top: 4px; font-size: 1.45rem;
  color: var(--green2); font-family: var(--display);
}

.nav-sec {
  margin: 16px 18px 6px;
  font-size: .62rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #4a5c52;
}
.side-nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 10px 12px; flex: 1; overflow-y: auto;
  min-height: 0; /* evita empurrar o logout pra fora da tela no celular */
}
.side-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  color: var(--muted); font-weight: 600; font-size: .9rem;
  transition: background .18s var(--ease), color .18s, box-shadow .18s;
}
.side-nav a .nav-svg {
  width: 20px; height: 20px; flex-shrink: 0; opacity: .75;
}
.side-nav a span { flex: 1; min-width: 0; }
.side-nav a:hover { background: rgba(255,255,255,.045); color: #fff; }
.side-nav a:hover .nav-svg { opacity: 1; }
.side-nav a.on {
  background: var(--green-dim); color: var(--green2);
  box-shadow: inset 3px 0 0 var(--green);
}
.side-nav a.on .nav-svg { opacity: 1; color: var(--green2); }
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: rgba(245,158,11,.18); color: var(--warn);
  font-size: .68rem; font-weight: 800;
}
.btn .nav-svg { width: 16px; height: 16px; }
.menu-btn .nav-svg { width: 20px; height: 20px; }

.foot {
  border-top: 1px solid var(--border);
  padding: 14px 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(8,12,10,.96), #080c0a 40%);
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.foot .who { min-width: 0; display: flex; align-items: center; gap: 10px; flex: 1; }
.who-av {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: .85rem;
  color: #041008; background: linear-gradient(135deg, var(--green2), #129c46);
}
.who-av.brand-avatar {
  overflow: hidden; border-radius: 10px;
  background: #050807; border: 1px solid rgba(29,185,84,.25);
  box-shadow: 0 5px 18px rgba(0,0,0,.35);
}
.who-av.brand-avatar img { width: 100%; height: 100%; object-fit: cover; }
.foot .who p { margin: 0; font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot .who small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.foot a.out {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); border: 1px solid var(--border); flex-shrink: 0;
}
.foot a.out .nav-svg { width: 18px; height: 18px; }
.foot a.out:hover { color: #fff; border-color: var(--border2); background: rgba(255,255,255,.04); }

/* legacy nav (fallback) */
.side nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; flex: 1; overflow-y: auto; }
.side nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--muted); font-weight: 600; font-size: .9rem;
}

/* —— Main —— */
.main { flex: 1; min-width: 0; padding: 0; margin-left: var(--side); }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(5,7,6,.78);
  backdrop-filter: blur(16px);
  position: sticky; top: 0; z-index: 20;
}
.topbar .page-title {
  margin: 0; font-family: var(--display); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.02em;
}
.topbar .page-sub { margin: 2px 0 0; color: var(--muted); font-size: .82rem; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.topbar-logout { display: none; }
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 2px;
  font-size: .66rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: #587064;
}
.breadcrumb i { font-style: normal; color: #324139; }

.content { padding: 22px 28px 48px; max-width: none; width: 100%; }

/* —— Dashboard Pro —— */
.dash-stage {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid rgba(29,185,84,.2);
  background: #0a100c;
  min-height: 200px;
}
.dash-stage-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 280px at 12% 0%, rgba(29,185,84,.28), transparent 55%),
    radial-gradient(500px 240px at 90% 80%, rgba(30,215,96,.1), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%);
}
.dash-stage-inner {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 28px 30px 26px;
}
.dash-wordmark {
  display: block; max-width: 220px; width: 100%; height: auto;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 28px rgba(29,185,84,.35));
}
.dash-kicker {
  margin: 0 0 4px; font-size: .7rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--green2);
}
.dash-name {
  margin: 0 0 8px; font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.04em;
}
.dash-lead { margin: 0; color: var(--muted); max-width: 420px; line-height: 1.5; }
.dash-stage-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.kpi-row {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 14px; margin-bottom: 26px;
}
.kpi {
  padding: 20px 22px; border-radius: 20px;
  background: linear-gradient(165deg, #141c18 0%, #0e1411 100%);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.kpi:hover { border-color: rgba(29,185,84,.3); transform: translateY(-2px); }
.kpi-main {
  border-color: rgba(29,185,84,.28);
  background: linear-gradient(145deg, rgba(29,185,84,.12), #0e1411 55%);
}
.kpi-alert { border-color: rgba(245,158,11,.35); }
.kpi-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.kpi-value {
  font-family: var(--display); font-size: 2.4rem; font-weight: 800;
  letter-spacing: -.04em; line-height: 1;
}
.kpi-value.green { color: var(--green2); }
.kpi-hint { font-size: .8rem; color: var(--muted); font-weight: 600; }
.kpi-bar {
  height: 5px; border-radius: 99px; background: #1a2420; overflow: hidden; margin: 4px 0;
}
.kpi-bar > i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--green), var(--green2));
}

.dash-sec-title {
  margin: 0 0 12px; font-size: .72rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.ops-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px;
}
.ops-tile {
  margin: 0; padding: 18px 16px;
  border-radius: 18px; border: 1px solid var(--border);
  background: linear-gradient(160deg, #151d19, #0f1512);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.ops-tile:hover {
  border-color: rgba(29,185,84,.45);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.ops-time {
  font-family: var(--display); font-size: 2rem; font-weight: 800;
  color: var(--green2); letter-spacing: -.04em; line-height: 1;
}
.ops-desc { color: var(--muted); font-size: .82rem; font-weight: 600; margin-bottom: 10px; }
.ops-go {
  margin-top: auto; align-self: flex-start;
  border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: .8rem;
  padding: 8px 14px; border-radius: 999px;
  background: var(--green); color: #041008;
}
.ops-go:hover { background: var(--green2); }

.dash-panels {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-bottom: 16px;
}
.panel-block {
  border-radius: 20px; border: 1px solid var(--border);
  background: linear-gradient(165deg, rgba(18,26,22,.98), rgba(10,14,12,.98));
  padding: 8px; overflow: hidden;
}
.panel-block.compact { padding: 8px; }
.panel-block-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px;
}
.panel-block-head h3 {
  margin: 0; font-family: var(--display); font-size: 1rem; font-weight: 700;
}
.panel-block-head a {
  color: var(--green2); font-size: .82rem; font-weight: 700;
}
.panel-block-head a:hover { text-decoration: underline; }

.people-list { display: flex; flex-direction: column; }
.people-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  transition: background .15s;
}
.people-row:hover { background: rgba(29,185,84,.06); }
.people-row.static:hover { background: rgba(255,255,255,.02); }
.people-av {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: .95rem;
  color: #041008; background: linear-gradient(135deg, var(--green2), #129c46);
  flex-shrink: 0;
}
.people-av.warn { background: linear-gradient(135deg, #f59e0b, #d97706); color: #1a1000; }
.people-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.people-info b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people-info small { color: var(--muted); font-size: .76rem; }

.empty.soft { padding: 36px 16px; }

.dash-bottom {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
.activity-list { display: flex; flex-direction: column; }
.activity-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
}
.activity-row time { margin-left: auto; color: var(--muted); font-size: .72rem; }

@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .ops-grid { grid-template-columns: 1fr 1fr; }
  .dash-panels, .dash-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kpi-row { grid-template-columns: 1fr; }
  .ops-grid { grid-template-columns: 1fr 1fr; }
  .dash-stage-inner { padding: 22px 18px; }
  .dash-wordmark { max-width: 170px; }
}

.h1 {
  margin: 0; font-family: var(--display); font-size: 1.85rem; font-weight: 800;
  letter-spacing: -.03em;
}
.sub { color: var(--muted); margin: 6px 0 22px; font-size: .95rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.stat {
  background: linear-gradient(160deg, var(--card) 0%, var(--card2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  position: relative; overflow: hidden;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.stat:hover {
  border-color: rgba(29,185,84,.28);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
}
.stat::after {
  content: ""; position: absolute; right: -20px; top: -20px;
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--green-dim); pointer-events: none;
}
.stat label {
  display: block; color: var(--muted); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
}
.stat b {
  display: block; margin-top: 8px; font-size: 1.75rem;
  font-family: var(--display); letter-spacing: -.02em;
}
.stat.accent { border-color: rgba(29,185,84,.35); }
.stat.accent b { color: var(--green2); }
.stat.warn { border-color: rgba(245,158,11,.35); }
.stat.warn b { color: var(--warn); }
.stat-foot { margin-top: 6px; font-size: .72rem; color: var(--muted); font-weight: 600; }
.stat-link { display: block; color: inherit; text-decoration: none; }
.stat-link:hover { color: inherit; }

.card {
  background: linear-gradient(165deg, rgba(18,26,22,.95), rgba(12,18,16,.98));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.card-pro {
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.card h2 {
  margin: 0 0 14px; font-size: 1rem; font-family: var(--display);
  font-weight: 700; letter-spacing: -.01em;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.card-head h2 { margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--green); color: #041008; font-weight: 800;
  border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer;
  font-size: .86rem; transition: transform .12s, background .12s, box-shadow .12s;
}
.btn:hover { background: var(--green2); box-shadow: 0 0 24px var(--green-glow); }
.btn:active { transform: scale(.98); }
.btn.sec {
  background: transparent; color: var(--text);
  border: 1px solid var(--border2);
}
.btn.sec:hover { background: #1a2420; box-shadow: none; border-color: #3a4a40; }
.btn.danger { background: var(--danger); color: #fff; border-radius: 10px; }
.btn.danger:hover { box-shadow: 0 0 16px rgba(239,68,68,.35); }
.btn.sm { padding: 6px 12px; font-size: .75rem; border-radius: 999px; }
.btn.ghost { background: transparent; color: var(--muted); border: 0; border-radius: 8px; }
.btn.ghost:hover { color: #fff; box-shadow: none; }

.input, .select, textarea {
  width: 100%; background: #0a100c; border: 1px solid var(--border2);
  color: #fff; border-radius: 10px; padding: 11px 13px; margin: 0 0 12px;
  outline: none; transition: border .15s, box-shadow .15s;
}
.input:focus, .select:focus, textarea:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px var(--green-dim);
}
.label {
  display: block; margin: 0 0 6px; color: var(--muted);
  font-size: .78rem; font-weight: 600;
}
textarea { min-height: 120px; resize: vertical; }

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; color: #5f7368; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .12em;
  padding: 10px 10px; border-bottom: 1px solid var(--border); font-weight: 700;
}
.table td {
  padding: 13px 10px; border-bottom: 1px solid #152018; font-size: .9rem;
  vertical-align: middle;
}
.table tr { transition: background .15s; }
.table tr:hover td { background: rgba(29,185,84,.04); }
.table .actions { text-align: right; white-space: nowrap; }
.table .actions .btn { margin-left: 4px; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
}
.badge.ok { background: var(--green-dim); color: var(--green2); }
.badge.warn { background: rgba(245,158,11,.12); color: var(--warn); }
.badge.err { background: rgba(239,68,68,.12); color: #f87171; }
.badge.info { background: rgba(56,189,248,.12); color: var(--info); }

.flash {
  padding: 12px 16px; border-radius: 12px; margin: 0 28px 0;
  font-weight: 600; font-size: .9rem;
}
.flash.ok { background: var(--green-dim); color: var(--green2); border: 1px solid rgba(29,185,84,.25); }
.flash.err { background: rgba(239,68,68,.1); color: #fca5a5; border: 1px solid rgba(239,68,68,.25); }
.content > .flash { margin: 16px 28px 0; }
/* Flash de sessão (após redirect) sempre acima de modais — revenda precisa ver o erro */
.main > .flash {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 250;
  margin: 0;
  max-width: min(520px, calc(100vw - 32px));
  width: max-content;
  min-width: min(320px, calc(100vw - 32px));
  box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
  animation: fadeIn .2s ease;
}
/* Erro dentro do próprio modal (criar cliente / revenda / renovar) */
.form-modal .flash,
.wa-modal .flash.modal-alert {
  position: static;
  transform: none;
  left: auto;
  top: auto;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0 0 14px;
  box-shadow: none;
  animation: none;
}

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  padding: 7px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  border: 1px solid var(--border2); color: var(--muted); background: transparent;
}
.chip.on, .chip:hover { border-color: var(--green); color: var(--green2); background: var(--green-dim); }

.mono { font-family: ui-monospace, "Cascadia Code", monospace; color: var(--muted); font-size: .88rem; }
.muted { color: var(--muted); }
.small { font-size: .78rem; color: var(--muted); }

.welcome {
  background: #0a140e; border: 1px solid rgba(29,185,84,.3);
  border-radius: 12px; padding: 14px 16px; white-space: pre-wrap;
  font-family: ui-monospace, monospace; font-size: .84rem; color: #c8ecd4;
  line-height: 1.5;
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }

.switch {
  display: inline-flex; gap: 8px; align-items: center;
  margin: 0 12px 12px 0; color: var(--muted); font-weight: 600; font-size: .88rem;
  cursor: pointer;
}
.switch input { accent-color: var(--green); }

.empty {
  text-align: center; padding: 40px 20px; color: var(--muted);
}
.empty b { display: block; color: #fff; margin-bottom: 6px; font-family: var(--display); }

.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.tabs a {
  padding: 10px 14px; font-weight: 700; font-size: .85rem; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a.on { color: var(--green2); border-bottom-color: var(--green); }

.progress {
  height: 6px; background: #1a2420; border-radius: 99px; overflow: hidden; margin-top: 8px;
}
.progress > i {
  display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green2));
  border-radius: 99px;
}

.lead { color: var(--muted); margin: 0 0 18px; line-height: 1.5; }
.eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green); margin-bottom: 6px;
}
.hero-dash, .detail-hero, .dash-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
  padding: 24px 26px; border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(29,185,84,.14), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent),
    var(--card);
  border: 1px solid rgba(29,185,84,.18);
  box-shadow: 0 16px 48px rgba(0,0,0,.25);
}
.dash-hero-brand {
  display: flex; align-items: center; gap: 16px; min-width: 0;
}
.dash-hero-logo {
  width: 64px; height: 64px; border-radius: 16px;
  object-fit: contain; background: #000;
  border: 1px solid var(--border2);
  filter: drop-shadow(0 0 18px var(--green-glow));
  flex-shrink: 0;
}
.hero-title {
  margin: 0 0 6px; font-family: var(--display); font-size: 1.7rem;
  font-weight: 800; letter-spacing: -.03em;
}
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.server-url { font-size: 1.15rem; margin: 8px 0; word-break: break-all; }
.server-card, .tip-card { min-height: 160px; }

.action-rail {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
}
.action-rail-label {
  font-size: .65rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-right: 6px;
}
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.health-card {
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, #121a16, #0b110e);
  border: 1px solid var(--border);
}
.health-card.ok { border-color: rgba(29,185,84,.28); }
.health-card.warn { border-color: rgba(245,158,11,.38); }
.health-card.err { border-color: rgba(239,68,68,.38); }
.health-card label {
  display: block; margin-bottom: 6px;
  color: var(--muted); font-size: .66rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}
.health-card b { display: block; font-family: var(--display); font-size: 1.35rem; }
.health-card small { display: block; margin-top: 4px; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.danger-panel {
  border-color: rgba(239,68,68,.32) !important;
  background: linear-gradient(165deg, rgba(80,14,14,.22), rgba(18,26,22,.94)) !important;
}
.danger-panel summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 800;
  color: #fecaca;
}
.impact-box {
  padding: 12px 14px;
  border: 1px solid rgba(239,68,68,.26);
  border-radius: 12px;
  background: rgba(239,68,68,.08);
  color: #fecaca;
  font-size: .82rem;
  line-height: 1.5;
}
.action-menu {
  position: relative;
  display: inline-block;
}
.action-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu-body {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 168px;
  z-index: 120;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border2);
  background: #0b120f;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.action-menu-body .btn,
.action-menu-body form,
.action-menu-body a {
  width: 100%;
}
.action-menu-body .btn {
  justify-content: center;
}
.action-menu[open] { z-index: 121; }
.action-menu.action-menu-fixed .action-menu-body {
  position: fixed;
  top: var(--action-menu-top, 0);
  left: var(--action-menu-left, auto);
  right: auto;
}
.role-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase;
}
.role-pill.master { background: rgba(56,189,248,.14); color: var(--info); border: 1px solid rgba(56,189,248,.28); }
.role-pill.reseller { background: var(--green-dim); color: var(--green2); border: 1px solid rgba(29,185,84,.24); }
.mobile-card-list { display: none; }
.client-card, .network-card {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--card), #0b110e);
}
.client-card + .client-card, .network-card + .network-card { margin-top: 10px; }
.card-line { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 8px; }
.quick-strip {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; align-items: center;
}
.chip-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  border: 1px solid var(--border2); color: var(--text); background: var(--card);
  cursor: pointer; font-family: inherit;
  transition: border-color .15s, color .15s, background .15s, transform .15s;
}
.chip-btn:hover {
  border-color: var(--green); color: var(--green2); background: var(--green-dim);
  transform: translateY(-1px);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes revealUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.reveal {
  animation: revealUp .55s var(--ease) both;
}
.reveal-delay-1 { animation-delay: .06s; }
.reveal-delay-2 { animation-delay: .12s; }
.reveal-delay-3 { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-delay-1, .reveal-delay-2, .reveal-delay-3 { animation: none; }
  .stat:hover, .chip-btn:hover, .quick-card:hover { transform: none; }
}

.quick-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px;
}
.quick-card {
  background: linear-gradient(165deg, #142018, var(--card));
  border: 1px solid var(--border); border-radius: 16px; padding: 20px 18px;
  margin: 0; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.quick-card:hover {
  border-color: rgba(29,185,84,.45); transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.quick-h {
  font-family: var(--display); font-size: 2.2rem; font-weight: 800;
  color: var(--green2); letter-spacing: -.04em; line-height: 1;
}
.quick-card p { margin: 6px 0 12px; color: var(--muted); font-weight: 600; font-size: .88rem; }
.quick-card ul { margin: 0 0 16px; padding: 0 0 0 16px; color: #9aada2; font-size: .8rem; }

/* WhatsApp modal */
.wa-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.72); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center; padding: 20px;
  animation: fadeIn .2s ease;
}
.wa-overlay.open { display: flex; }
.wa-modal {
  width: 100%; max-width: 480px; max-height: min(90vh, 860px);
  overflow: auto;
  overscroll-behavior: contain;
  background: #0e1611; border: 1px solid rgba(29,185,84,.35);
  border-radius: 20px; padding: 0;
  box-shadow: 0 30px 100px rgba(0,0,0,.6), 0 0 60px rgba(29,185,84,.12);
  animation: slideUp .25s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(29,185,84,.4) transparent;
}
.wa-modal::-webkit-scrollbar { width: 8px; }
.wa-modal::-webkit-scrollbar-thumb {
  background: rgba(29,185,84,.4); border-radius: 99px;
}
.wa-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  position: sticky; top: 0; z-index: 5;
  margin: 0; padding: 16px 20px 12px;
  background: #0e1611;
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
}
.wa-head h2 { margin: 6px 0 0; font-family: var(--display); font-size: 1.35rem; }
.wa-badge {
  display: inline-block; font-size: .65rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #041008; background: var(--green2);
  padding: 4px 10px; border-radius: 999px;
}
.wa-close {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border2);
  background: #0a120e; color: var(--muted); font-size: 1.4rem; cursor: pointer; line-height: 1;
  flex-shrink: 0;
}
.wa-close:hover { color: #fff; border-color: #fff; }
.wa-creds {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 12px 20px;
}
.wa-creds > div {
  background: #0a120e; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
}
.wa-creds span { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.wa-creds b { font-size: 1rem; }
.wa-body {
  background: #07140c; border: 1px solid rgba(29,185,84,.28); border-radius: 14px;
  padding: 16px; white-space: pre-wrap; font-family: ui-monospace, monospace;
  font-size: .84rem; color: #d4f0de; line-height: 1.55;
  margin: 0 20px 14px;
  max-height: 40vh; overflow: auto;
}
.wa-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 20px 18px; }
.form-modal { max-width: 560px; }
.form-modal > form,
.form-modal > p.small,
.form-modal > .flash {
  margin-left: 20px; margin-right: 20px;
}
.form-modal > form { padding-bottom: 20px; padding-top: 4px; }
.form-modal .input, .form-modal .select { margin-bottom: 10px; }
.card-full { width: 100%; }

.preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.preset-card {
  display: block;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border2);
  background: #0c1210;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.preset-card:has(input:checked) {
  border-color: var(--green);
  background: var(--green-dim);
}
.preset-card input { display: none; }
.preset-card strong { display: block; font-size: .92rem; margin-bottom: 4px; }
.preset-card span { color: var(--muted); font-size: .76rem; line-height: 1.4; }

.switch-row {
  display: flex; gap: 10px; align-items: center;
  margin: 12px 0; color: var(--text); font-weight: 600; font-size: .88rem;
}
.switch-row input { accent-color: var(--green); width: 18px; height: 18px; }

.danger-zone { border-color: rgba(239,68,68,.25); }

.btn.wa-list {
  background: #128C7E; color: #fff;
}
.btn.wa-list:hover { background: #25D366; box-shadow: 0 0 16px rgba(37,211,102,.35); }

/* —— Public download page —— */
/* —— Página de download (marca + mascote) —— */
.dl-page {
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  color: var(--text);
}
.dl-bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, #07140c 0%, #060908 42%, #040605 100%);
}
.dl-orb {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(80px); opacity: .55;
}
.dl-orb-a {
  width: 520px; height: 520px; top: -120px; left: -80px;
  background: rgba(29,185,84,.22);
  animation: dlFloat 9s ease-in-out infinite;
}
.dl-orb-b {
  width: 420px; height: 420px; bottom: 10%; right: -100px;
  background: rgba(30,215,96,.12);
  animation: dlFloat 11s ease-in-out infinite reverse;
}
@keyframes dlFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(28px); }
}

.dl-stage {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) 22px 48px;
}

.dl-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  min-height: min(78vh, 720px);
}

.dl-hero-copy { max-width: 520px; }
.dl-wordmark {
  display: block; width: min(100%, 340px); height: auto;
  margin-bottom: 22px;
  filter: drop-shadow(0 12px 40px rgba(29,185,84,.25));
  animation: dlReveal .7s ease both;
}
.dl-kicker {
  margin: 0 0 10px;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--green2);
  animation: dlReveal .7s .08s ease both;
}
.dl-lead {
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  font-weight: 600; line-height: 1.35;
  letter-spacing: -.02em; color: #e8f5ec;
  animation: dlReveal .7s .14s ease both;
}
.dl-meta {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin-bottom: 18px;
  font-size: .78rem; font-weight: 600; color: var(--muted);
  animation: dlReveal .7s .2s ease both;
}
.dl-meta span { position: relative; }
.dl-meta span + span::before {
  content: "·"; margin-right: 18px; color: rgba(29,185,84,.5);
}
.dl-note {
  margin: 0 0 18px; color: #c8e6d2; line-height: 1.55; font-size: .92rem;
}
.dl-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 22px; border-radius: 18px;
  background: linear-gradient(135deg, #1ed760, #12a345);
  color: #031009; text-decoration: none;
  box-shadow: 0 16px 48px rgba(29,185,84,.38);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: dlReveal .7s .26s ease both;
}
.dl-cta:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 22px 60px rgba(29,185,84,.48);
  color: #031009;
}
.dl-cta strong { display: block; font-size: 1.08rem; font-weight: 800; }
.dl-cta small { display: block; margin-top: 2px; font-size: .76rem; opacity: .78; font-weight: 600; }
.dl-hint {
  margin: 16px 0 0; max-width: 360px;
  color: var(--muted); font-size: .8rem; line-height: 1.5;
  animation: dlReveal .7s .32s ease both;
}
.dl-hint b { color: #c8e6d2; }
.dl-unavailable {
  padding: 18px 20px; border-radius: 16px;
  border: 1px solid var(--border); background: rgba(255,255,255,.03);
}
.dl-unavailable strong { display: block; margin-bottom: 6px; }
.dl-unavailable p { margin: 0; color: var(--muted); font-size: .9rem; }

.dl-hero-visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 340px;
  animation: dlReveal .85s .1s ease both;
}
.dl-mascot-glow {
  position: absolute; inset: 12% 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29,185,84,.35) 0%, transparent 68%);
  filter: blur(20px);
  animation: dlPulse 4.5s ease-in-out infinite;
}
@keyframes dlPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
.dl-mascot {
  position: relative; z-index: 1;
  width: min(100%, 420px); height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,.55));
  animation: dlMascot 6s ease-in-out infinite;
}
@keyframes dlMascot {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}
.dl-badge {
  position: absolute; z-index: 2;
  right: 8%; bottom: 12%;
  width: 72px; height: 72px; object-fit: contain;
  border-radius: 18px;
  background: #050807;
  border: 1px solid rgba(29,185,84,.35);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  animation: dlBadge .8s .4s ease both;
}
@keyframes dlReveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes dlBadge {
  from { opacity: 0; transform: scale(.7) translateY(12px); }
  to { opacity: 1; transform: none; }
}

.dl-how {
  margin-top: clamp(36px, 6vw, 64px);
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.dl-how h2 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em;
}
.dl-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.dl-steps li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 4px 4px 4px 0;
}
.dl-step-n {
  flex: 0 0 36px; width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--green-dim); color: var(--green2);
  border: 1px solid rgba(29,185,84,.28);
  font-size: .85rem; font-weight: 800;
}
.dl-steps b { display: block; margin-bottom: 4px; font-size: .95rem; }
.dl-steps p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }

.dl-foot {
  margin-top: 40px;
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: .82rem; font-weight: 600;
}
.dl-foot img {
  width: 28px; height: 28px; object-fit: contain; border-radius: 8px;
}
.dl-foot a { margin-left: auto; color: var(--green2); }
.dl-foot a:hover { color: #fff; }

@media (max-width: 900px) {
  .dl-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    text-align: center;
  }
  .dl-hero-copy { max-width: none; order: 2; }
  .dl-hero-visual { order: 1; min-height: 280px; }
  .dl-wordmark { margin-left: auto; margin-right: auto; width: min(100%, 280px); }
  .dl-cta { margin: 0 auto; }
  .dl-hint { margin-left: auto; margin-right: auto; }
  .dl-meta { justify-content: center; }
  .dl-mascot { width: min(100%, 300px); }
  .dl-badge { width: 56px; height: 56px; right: 18%; bottom: 8%; }
  .dl-steps { grid-template-columns: 1fr; }
  .dl-steps li { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-orb-a, .dl-orb-b, .dl-mascot, .dl-mascot-glow,
  .dl-wordmark, .dl-kicker, .dl-lead, .dl-meta, .dl-cta, .dl-hint,
  .dl-hero-visual, .dl-badge { animation: none; }
}

/* —— Login page —— */
.login-page { min-height: 100vh; }
.login-bg {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(29,185,84,.2), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(30,215,96,.08), transparent 50%),
    #050806;
}
.login-wrap {
  position: relative; z-index: 1;
  min-height: 100vh; display: grid;
  grid-template-columns: 1.1fr 0.9fr; gap: 28px;
  align-items: center; padding: 32px 24px; max-width: 1080px; margin: 0 auto;
}
.login-showcase { padding: 12px 8px; }
.login-wordmark {
  display: block;
  max-width: 280px;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 28px var(--green-glow));
}
.login-mascot {
  display: block;
  width: 160px;
  height: auto;
  margin: 4px 0 18px;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.45));
}
.login-showcase-logo {
  display: block; max-width: 120px; height: auto; margin-bottom: 18px;
  filter: drop-shadow(0 0 20px var(--green-glow));
}
.login-showcase h2 {
  margin: 0 0 10px; font-family: var(--display); font-size: 2rem; font-weight: 800;
}
.login-showcase p { color: var(--muted); line-height: 1.6; margin: 0 0 18px; }
.login-features {
  margin: 0 0 20px; padding-left: 18px; color: #b7c8bd; line-height: 1.8;
}
.login-download-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--border2); color: var(--green2); font-weight: 700; font-size: .88rem;
}
.login-download-link:hover { background: var(--green-dim); border-color: var(--green); }
.login-card {
  width: 100%; max-width: 420px; justify-self: end;
  background: rgba(17,25,22,.92); border: 1px solid var(--border);
  border-radius: 22px; padding: 32px 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
}
.login-card-head { margin-bottom: 20px; text-align: center; }
.login-card-logo {
  display: block;
  margin: 0 auto 14px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: contain;
  background: #000;
  border: 1px solid var(--border2);
  filter: drop-shadow(0 0 16px var(--green-glow));
}
.login-card h1 {
  margin: 0; font-family: var(--display);
  font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em;
}
.login-card .tag {
  display: inline-block; margin-top: 8px; color: var(--green);
  font-weight: 700; letter-spacing: .14em; font-size: .68rem;
}
.login-submit { width: 100%; margin-top: 8px; padding: 12px 16px; }
.password-field { position: relative; }
.password-field .input { padding-right: 86px; }
.password-field button {
  position: absolute; right: 8px; top: 7px;
  border: 0; border-radius: 999px;
  padding: 7px 10px;
  background: var(--green-dim);
  color: var(--green2);
  font-size: .72rem; font-weight: 800;
  cursor: pointer;
}
.password-field button:hover { background: rgba(29,185,84,.18); }

@media (max-width: 980px) {
  .split, .grid3 { grid-template-columns: 1fr; }
  .grid2, .preset-grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .login-wrap { grid-template-columns: 1fr; max-width: 480px; }
  .login-showcase { display: none; }
  .login-card { justify-self: stretch; max-width: none; }
}
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .side-close { display: inline-flex; align-items: center; justify-content: center; }
  .main { margin-left: 0; }
  .side {
    transform: translateX(-100%);
    box-shadow: 20px 0 60px rgba(0,0,0,.45);
  }
  .shell.side-open .side { transform: translateX(0); }
  .topbar, .content { padding-left: 16px; padding-right: 16px; }
  .topbar { flex-wrap: wrap; }
  .top-actions { width: 100%; }
  .content > .flash { margin-left: 16px; margin-right: 16px; }
  .main > .flash { left: 50%; margin: 0; }
  .quick-grid { grid-template-columns: 1fr; }
  .table .actions { white-space: normal; }
  .table .actions .btn { margin: 2px; }
  .desktop-table-mobile-hide { display: none; }
  .mobile-card-list { display: block; }
  .topbar-logout { display: inline-flex !important; }
  .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .filter-row .chip { flex-shrink: 0; }
  .list-shell { overflow-x: auto; }
  .kpi-row, .manage-kpis {
    grid-template-columns: 1fr 1fr;
  }
  .page-hero { align-items: flex-start; }
  .search-bar .input { min-width: 0; max-width: none; }
  .action-menu-body {
    position: fixed;
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 16px;
  }
  .breadcrumb { width: 100%; }
  .health-grid { grid-template-columns: 1fr; }
}

label.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
label.check input { margin-top: 3px; }

/* —— Page chrome (todas as abas) —— */
.page-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.page-hero h2 {
  margin: 0 0 4px; font-family: var(--display);
  font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em;
}
.page-hero p { margin: 0; color: var(--muted); font-size: .9rem; }
.page-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.list-shell {
  border-radius: 20px; border: 1px solid var(--border);
  background: linear-gradient(165deg, rgba(18,26,22,.98), rgba(10,14,12,.98));
  overflow: hidden;
}
.list-shell .table { margin: 0; }
.list-shell .table th {
  background: rgba(0,0,0,.25); padding: 14px 16px;
  position: sticky; top: 0;
}
.list-shell .table td { padding: 14px 16px; }
.list-shell .table tr:last-child td { border-bottom: 0; }

.user-cell { display: flex; align-items: center; gap: 12px; }
.user-cell .people-av { width: 38px; height: 38px; font-size: .85rem; }
.user-cell b { display: block; font-size: .92rem; }
.user-cell small { color: var(--muted); font-size: .76rem; }

.search-bar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px;
}
.search-bar .input { margin: 0; max-width: 360px; flex: 1; min-width: 200px; }
.filter-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.plan-name {
  display: inline-flex; align-items: center;
  padding: 5px 10px; border-radius: 999px;
  color: #d9f9e4; background: rgba(29,185,84,.09);
  border: 1px solid rgba(29,185,84,.2);
  font-size: .78rem; font-weight: 700;
}

.settings-hero {
  margin-bottom: 16px; padding: 22px;
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(29,185,84,.2);
  background:
    radial-gradient(500px 180px at 5% 0%, rgba(29,185,84,.18), transparent 70%),
    linear-gradient(145deg, #101a14, #090e0b);
}
.settings-brand { display: flex; align-items: center; gap: 16px; }
.settings-brand img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 16px;
  border: 1px solid rgba(29,185,84,.3); box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.settings-brand span {
  color: var(--green2); font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.settings-brand h2 { margin: 3px 0 2px; font-family: var(--display); font-size: 1.45rem; }
.settings-brand p { margin: 0; color: var(--muted); font-size: .84rem; }
.settings-card-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
.settings-card-head h2 { margin: 0 0 4px; }
.settings-card-head p { margin: 0; color: var(--muted); font-size: .84rem; }
.settings-icon {
  flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 12px; color: var(--green2); background: var(--green-dim);
  border: 1px solid rgba(29,185,84,.22);
}
.settings-icon .nav-svg { width: 19px; height: 19px; }

.ledger-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.ledger-row:last-child { border-bottom: 0; }
.ledger-amt {
  font-family: ui-monospace, monospace; font-weight: 800; font-size: 1.05rem;
  min-width: 64px;
}
.ledger-amt.pos { color: var(--green2); }
.ledger-amt.neg { color: #f87171; }
.ledger-meta { flex: 1; min-width: 0; }
.ledger-meta b { display: block; font-size: .9rem; }
.ledger-meta small { color: var(--muted); font-size: .76rem; }
.ledger-bal { color: var(--muted); font-size: .82rem; font-weight: 600; }

/* ————————————————— Tickets ————————————————— */
.tk-layout { max-width: 920px; }
.tk-list-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.tk-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; border-radius: 14px;
  background: linear-gradient(160deg, var(--card), var(--card2));
  border: 1px solid var(--border); min-width: 92px;
}
.tk-stat b { font-family: var(--display); font-size: 1.4rem; line-height: 1; }
.tk-stat span { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.tk-new-btn { margin-left: auto; }

.tk-tabs {
  display: flex; gap: 6px; margin-bottom: 12px;
  padding: 5px; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  width: fit-content;
}
.tk-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 10px;
  font-size: .84rem; font-weight: 700; color: var(--muted);
  transition: color .15s, background .15s;
}
.tk-tab:hover { color: var(--text); }
.tk-tab.on {
  color: #06130b; background: var(--green);
  box-shadow: 0 6px 18px rgba(29,185,84,.35);
}
.tk-tab-count {
  font-size: .7rem; font-weight: 800; min-width: 20px; text-align: center;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,.1);
}
.tk-tab.on .tk-tab-count { background: rgba(0,0,0,.22); color: #06130b; }

.tk-group { margin-bottom: 18px; }
.tk-group-head {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px 4px;
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted);
}
.tk-group-head i {
  font-style: normal; font-size: .68rem; font-weight: 800;
  padding: 1px 8px; border-radius: 999px;
  background: var(--green-dim); color: var(--green2);
  border: 1px solid rgba(29,185,84,.25);
}
.tk-item.closed { opacity: .62; }
.tk-item.closed:hover { opacity: 1; }

.tk-new-form {
  display: none;
  background: linear-gradient(165deg, rgba(18,26,22,.96), rgba(12,18,16,.98));
  border: 1px solid rgba(29,185,84,.22);
  border-radius: 18px; padding: 20px; margin-bottom: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.tk-new-form.open { display: block; animation: revealUp .4s var(--ease) both; }
.tk-new-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }

.tk-list { display: flex; flex-direction: column; gap: 8px; }
.tk-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--border);
  transition: border-color .18s var(--ease), transform .18s var(--ease), background .18s;
}
.tk-item:hover {
  border-color: rgba(29,185,84,.4); transform: translateY(-1px);
  background: linear-gradient(160deg, var(--card), var(--card2));
}
.tk-item.unread { border-color: rgba(245,158,11,.4); }
.tk-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  color: #041008; background: linear-gradient(135deg, var(--green2), var(--green));
  flex-shrink: 0;
}
.tk-avatar.sm { width: 40px; height: 40px; font-size: .95rem; }
.tk-item-main { flex: 1; min-width: 0; }
.tk-item-top { display: flex; align-items: center; gap: 8px; }
.tk-item-top b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--warn);
  box-shadow: 0 0 0 3px rgba(245,158,11,.18); flex-shrink: 0;
}
.tk-item-sub { display: flex; gap: 4px; flex-wrap: wrap; color: var(--muted); font-size: .78rem; margin-top: 3px; }
.tk-item-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0;
}
.tk-item-side time { color: var(--muted); font-size: .72rem; }

/* —— Chat —— */
.tk-chat {
  display: flex; flex-direction: column;
  height: calc(100vh - 190px); min-height: 460px;
  max-width: 820px;
  background: linear-gradient(180deg, rgba(14,20,17,.6), rgba(10,15,12,.8));
  border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.28);
}
.tk-chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: rgba(5,7,6,.7); backdrop-filter: blur(10px);
}
.tk-back {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border2); color: var(--text); font-size: 1.2rem;
}
.tk-back:hover { border-color: var(--green); color: var(--green2); }
.tk-chat-ident { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.tk-chat-meta { min-width: 0; }
.tk-chat-meta h2 {
  margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-chat-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; align-items: center; }
.tk-tag-soft {
  font-size: .7rem; color: var(--muted); font-weight: 600;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border2);
}
.tk-chat-actions { flex-shrink: 0; }

.tk-thread {
  flex: 1; overflow-y: auto; padding: 20px 18px;
  display: flex; flex-direction: column; gap: 12px;
  background:
    radial-gradient(600px 300px at 100% 0, rgba(29,185,84,.04), transparent 60%);
}
.tk-row { display: flex; }
.tk-row.me { justify-content: flex-end; }
.tk-row.them { justify-content: flex-start; }
.tk-bubble {
  max-width: 78%; padding: 11px 14px; border-radius: 16px;
  background: var(--card2); border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.tk-row.me .tk-bubble {
  background: linear-gradient(135deg, rgba(29,185,84,.2), rgba(29,185,84,.1));
  border-color: rgba(29,185,84,.35); border-bottom-right-radius: 5px;
}
.tk-row.them .tk-bubble { border-bottom-left-radius: 5px; }
.tk-bubble.admin { border-color: rgba(56,189,248,.3); }
.tk-bubble-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tk-bubble-top b { font-size: .8rem; }
.tk-role {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 700;
  padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.05);
}
.tk-bubble p { margin: 0; line-height: 1.5; font-size: .92rem; white-space: pre-wrap; word-break: break-word; }
.tk-bubble time { display: block; margin-top: 6px; font-size: .68rem; color: var(--muted); text-align: right; }

.tk-composer {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 14px 16px; border-top: 1px solid var(--border);
  background: rgba(5,7,6,.7); backdrop-filter: blur(10px);
}
.tk-composer textarea {
  flex: 1; resize: none; margin: 0; min-height: 46px; max-height: 160px;
  border-radius: 14px; padding: 12px 14px; line-height: 1.4;
}
.tk-send {
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  font-size: 1.05rem; flex-shrink: 0;
}
.tk-closed-note {
  padding: 16px 18px; text-align: center; color: var(--muted);
  border-top: 1px solid var(--border); font-size: .88rem;
}

@media (max-width: 720px) {
  .tk-new-grid { grid-template-columns: 1fr; }
  .tk-chat { height: calc(100vh - 150px); border-radius: 16px; }
  .tk-bubble { max-width: 88%; }
  .tk-item-side time { display: none; }
}

/* —— Visual polish v18 —— */
:root {
  --green: #3f8f6a;
  --green2: #6bb892;
  --green-dim: rgba(63, 143, 106, .10);
  --green-glow: rgba(63, 143, 106, .12);
  --card: #101418;
  --card2: #151b20;
  --border: #232d35;
  --border2: #31404a;
  --blue-accent: #6aa8ff;
  --gold-accent: #f6c35f;
}

body {
  background:
    radial-gradient(900px 420px at 18% -8%, rgba(63,143,106,.07), transparent 58%),
    radial-gradient(760px 380px at 100% 12%, rgba(106,168,255,.07), transparent 55%),
    radial-gradient(520px 320px at 50% 100%, rgba(246,195,95,.035), transparent 60%),
    #050607;
}

.dash-stage {
  min-height: 0;
  margin-bottom: 18px;
}
.dash-stage-music {
  min-height: 220px;
  background:
    linear-gradient(90deg, rgba(5,7,6,.96) 0%, rgba(6,9,8,.88) 42%, rgba(6,9,8,.54) 100%),
    radial-gradient(520px 240px at 88% 30%, rgba(106,168,255,.13), transparent 55%),
    #080b0d;
  isolation: isolate;
}
.dash-stage-music::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,7,6,.92), rgba(5,7,6,.35) 52%, rgba(5,7,6,.92)),
    linear-gradient(180deg, rgba(5,7,6,.22), rgba(5,7,6,.84));
  z-index: 1;
}
.dash-stage-inner {
  position: relative;
  align-items: center;
  padding: 26px 28px;
  z-index: 2;
}
.dash-brand-line {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dash-brand-mark {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}
.dash-name {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  margin-bottom: 0;
}
.dash-kicker { color: #8fe6b1; }
.dash-music-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.dash-music-tags span {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  color: #a9b9af;
  font-size: .72rem;
  font-weight: 800;
}

.cover-marquee {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
}
.cover-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 16px;
  animation: astraCoverScroll 38s linear infinite;
}
.cover-track img,
.cover-fallback {
  flex: 0 0 auto;
  width: 128px;
  height: 128px;
  border-radius: 24px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 55px rgba(0,0,0,.45);
  opacity: .82;
}
.cover-fallback {
  display: grid;
  place-items: center;
  color: #9be8b4;
  background: linear-gradient(145deg, #18231f, #0c1114);
  font-size: 2.4rem;
  font-weight: 900;
}
.cover-marquee-dashboard {
  inset: 18px -20px 18px 42%;
  z-index: 0;
  transform: rotate(-2deg);
}
.cover-marquee-dashboard .cover-track img,
.cover-marquee-dashboard .cover-fallback {
  width: 118px;
  height: 118px;
}
@keyframes astraCoverScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.kpi,
.stat,
.card,
.panel-block,
.health-card,
.ops-tile,
.profile-hero {
  box-shadow: 0 16px 38px rgba(0,0,0,.22);
}
.kpi-main,
.stat.accent {
  background: linear-gradient(145deg, rgba(32,196,107,.06), #101418 62%);
}
.stat::after {
  opacity: .45;
}

.actions-inline {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.actions-inline form {
  margin: 0;
  display: inline-flex;
}
.table .actions {
  min-width: 390px;
}
.actions-inline .btn {
  margin: 0;
}

.profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg, rgba(32,196,107,.08), transparent 46%),
    radial-gradient(420px 160px at 82% 0%, rgba(106,168,255,.08), transparent 58%),
    linear-gradient(165deg, rgba(18,22,26,.96), rgba(8,10,12,.96));
}
.profile-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.profile-avatar {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #07100b;
  background: linear-gradient(135deg, #7be7a5, #20c46b);
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.2rem;
}
.profile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
  gap: 16px;
  align-items: start;
}
.detail-grid textarea {
  min-height: 92px;
}

.music-hero {
  position: relative;
  overflow: hidden;
  align-items: center;
}
.music-orb {
  width: 76px;
  height: 76px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: #07100b;
  background: linear-gradient(135deg, #7be7a5, #d7ffe3);
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0 18px 40px rgba(24,184,90,.22);
}
.quick-test-grid .ops-tile {
  min-height: 150px;
}

.login-page {
  position: relative;
  overflow: hidden;
  background: #050607;
}
.login-bg {
  background:
    radial-gradient(760px 360px at 18% 18%, rgba(32,196,107,.13), transparent 58%),
    radial-gradient(660px 340px at 92% 10%, rgba(106,168,255,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 45%);
}
.cover-marquee-login {
  left: -80px;
  right: -80px;
  top: 52%;
  height: 190px;
  transform: rotate(-7deg);
  opacity: .55;
  filter: saturate(.86);
}
.cover-marquee-login::before,
.cover-marquee-login::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28%;
  z-index: 2;
}
.cover-marquee-login::before {
  left: 0;
  background: linear-gradient(90deg, #050607, transparent);
}
.cover-marquee-login::after {
  right: 0;
  background: linear-gradient(270deg, #050607, transparent);
}
.cover-marquee-login .cover-track {
  animation-duration: 52s;
}
.cover-marquee-login .cover-track img,
.cover-marquee-login .cover-fallback {
  width: 156px;
  height: 156px;
  border-radius: 28px;
}
.login-wrap {
  position: relative;
  z-index: 3;
}
.login-showcase {
  padding: 22px 10px;
  backdrop-filter: blur(3px);
}
.login-showcase h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -.05em;
}
.login-card {
  background: rgba(12,16,18,.82);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 28px 80px rgba(0,0,0,.44);
  backdrop-filter: blur(20px);
}
.login-card .tag {
  color: #9bb7a8;
}
.login-download-link {
  background: rgba(255,255,255,.035);
}

@media (max-width: 1180px) {
  .actions-inline {
    flex-wrap: wrap;
  }
  .table .actions {
    min-width: 300px;
  }
}
@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .album-wall {
    display: none;
  }
  .cover-marquee-dashboard {
    inset: 70px -80px 12px 8%;
    opacity: .24;
  }
  .cover-marquee-login {
    opacity: .28;
  }
}

/* Sidebar scrollbar: discreta e integrada ao tema */
.side-nav,
.side nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(123,231,165,.28) rgba(255,255,255,.025);
}
.side-nav::-webkit-scrollbar,
.side nav::-webkit-scrollbar {
  width: 6px;
}
.side-nav::-webkit-scrollbar-track,
.side nav::-webkit-scrollbar-track {
  background: rgba(255,255,255,.025);
  border-radius: 999px;
}
.side-nav::-webkit-scrollbar-thumb,
.side nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(123,231,165,.38), rgba(106,168,255,.22));
  border-radius: 999px;
}
.side-nav::-webkit-scrollbar-thumb:hover,
.side nav::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(107,184,146,.55), rgba(106,168,255,.34));
}

/* —— Ficha / aparelhos / listas (v20) —— */
.profile-hero-clean .hero-name {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  letter-spacing: -.03em;
  color: var(--text);
  font-weight: 800;
  margin: 4px 0 6px;
}
.muted-user { color: var(--muted); font-weight: 600; }
.detail-grid-balanced {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .detail-grid-balanced { grid-template-columns: 1fr; }
}
.device-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--border);
}
.device-row .muted { color: var(--muted); }
.user-cell-text b.client-name {
  display: block;
  color: var(--text);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.user-cell-text .client-user {
  color: var(--muted);
  font-size: .78rem;
  font-family: ui-monospace, monospace;
}
.btn-ico {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-ico svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .9; }
.actions-inline { flex-wrap: wrap; gap: 6px; }

/* —— Editar cliente (popup) —— */
.edit-sub { color: var(--muted); margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: .88rem; }
.edit-grid2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
}
.edit-grid2 .label { margin-top: 0; }
.edit-hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.cost-box {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: rgba(106, 168, 255, .08); border: 1px solid rgba(106, 168, 255, .28);
  color: var(--text); font-size: .9rem; line-height: 1.45;
}
.cost-box b { color: var(--blue-accent, #6aa8ff); }
.muted { color: var(--muted); }
.hidden-form { display: none; }

.edit-renew-switch {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 18px 0 0; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--card);
  cursor: pointer; font-weight: 600; color: var(--text);
}
.edit-renew-switch input {
  width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); flex-shrink: 0;
}
.edit-renew-switch em { font-style: normal; font-weight: 500; color: var(--muted); font-size: .82rem; }
.edit-renew-block { margin-top: 12px; }
.edit-devices { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.edit-devices-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

/* Popup da ficha */
.modal-page-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(4, 8, 6, .78);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px 14px;
  overflow: hidden;
  animation: editFade .16s ease;
}
@keyframes editFade { from { opacity: 0; } to { opacity: 1; } }
.modal-page {
  width: 100%; max-width: 640px;
  background: var(--bg2, #0b1410); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column;
  max-height: min(92vh, 820px);
  animation: editPop .18s ease;
}
@keyframes editPop { from { transform: translateY(10px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-page-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.modal-page-head {
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
  background: var(--card); flex-shrink: 0;
}
.modal-page-title {
  font-family: var(--display); font-size: clamp(1.2rem, 2.8vw, 1.45rem);
  font-weight: 800; letter-spacing: -.03em; margin: 0; color: var(--text);
}
.modal-page-body {
  padding: 18px 22px; overflow-y: auto; flex: 1; min-height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.modal-page-body::-webkit-scrollbar { width: 0; height: 0; }
.modal-page-foot {
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border); background: var(--card); flex-shrink: 0;
}
.modal-page-foot .btn { min-width: 120px; font-weight: 700; }
.modal-page-foot .btn.ghost { min-width: 0; }
@media (max-width: 720px) {
  .modal-page-overlay { padding: 0; align-items: stretch; }
  .modal-page { max-width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; }
  .edit-grid2 { grid-template-columns: 1fr; }
  .modal-page-foot { justify-content: stretch; }
  .modal-page-foot .btn { flex: 1; }
}