/* ══════════════════════════════════════════════════════════════════
   CLOUDPANEL — theme v3 (paniel-aligned)
   Paleta + fontes espelhadas de cloudpaniel.com.br.
   Mobile-first. Void preto profundo + branco + cinza. Orbs + grain + cursor.
   Status colors (green/yellow/red) mantidos só em indicadores de estado.
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: dark; /* opt-out Chrome Android Auto Dark Theme (evita inversão em <button>/<input>) */
  /* ── PALETTE (void + mono) alinhada com cloudpaniel.com.br ── */
  --void:       #050505;
  --ink:        #0a0a0b;
  --surface:    #101012;
  --surface2:   #161618;
  --surface3:   #1d1d20;
  --white:      #ffffff;
  --white-dim:  rgba(255,255,255,0.08);
  --white-mid:  rgba(255,255,255,0.18);
  --white-glow: rgba(255,255,255,0.18);

  /* Legacy aliases — mapeiam pros novos valores para manter compat */
  --bg:         var(--void);
  --bg-elev:    var(--surface);
  --bg-elev-2:  var(--surface2);
  --bg-elev-3:  var(--surface3);
  --bg-sunk:    var(--surface);
  --bg2:        var(--surface);
  --bg3:        var(--surface2);
  --card:       var(--surface);
  --card-hover: var(--surface2);
  --card-alt:   var(--ink);

  /* Borders */
  --border:        rgba(255,255,255,0.06);
  --border2:       rgba(255,255,255,0.04);
  --border-strong: rgba(255,255,255,0.12);
  --border-accent: rgba(255,255,255,0.32);
  --border-h:      rgba(255,255,255,0.18);

  /* Text */
  --text:     #f4f4f6;
  --fg:       var(--text);
  --fg-dim:   #b1b1ba;
  --fg-muted: #8a8a92;
  --fg-code:  #d9d9e0;
  --muted:    #8a8a92;
  --muted2:   #25252e;

  /* Status accents — MANTIDOS (necessários pra diferenciar estados) */
  --red:        #f43f5e;
  --red-bright: #f43f5e;
  --red-dim:    #d3273f;
  --red-soft:   rgba(244,63,94,0.1);
  --red-glow:   rgba(244,63,94,0.28);
  --green:      #4dff91;
  --green-dim:  rgba(77,255,145,0.13);
  --green-soft: rgba(77,255,145,0.08);
  --amber:      #ffaa2d;
  --amber-dim:  rgba(255,170,45,0.13);
  --yellow:     #ffaa2d;
  --blue:       #38bdf8;
  --blue-dim:   rgba(56,189,248,0.13);
  --cyan:       #38bdf8;
  --mint:       #4dff91;
  --orange:     #fb923c;
  --rose:       #f43f5e;
  --purple:     #a78bfa;
  --violet:     var(--purple);
  --gray:       #6b7280;

  /* Per-card accent palette (paniel-style) */
  --c-cyan:   #38bdf8;
  --c-mint:   #4dff91;
  --c-violet: #a78bfa;
  --c-orange: #fb923c;
  --c-amber:  #ffaa2d;
  --c-rose:   #f43f5e;

  /* Typography */
  --font:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ui: var(--font);
  --font-display: 'Syne', var(--font);
  --mono:    'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-mono: var(--mono);
  --heading: var(--font-display);

  /* Radius */
  --r:  8px;
  --r2: 6px;
  --r3: 14px;
  --r4: 4px;
  --rl: 14px;

  /* Shadows (paniel-aligned) */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.5);
  --shadow:      0 12px 32px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-card: 0 28px 70px rgba(0,0,0,0.55), 0 8px 18px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-lg:   0 32px 90px rgba(0,0,0,0.7), 0 12px 30px rgba(0,0,0,0.4);
  --shadow-pri:  0 0 0 1px rgba(255,255,255,0.12), 0 18px 50px rgba(255,255,255,0.04);
  --shadow-glow: 0 0 28px rgba(255,255,255,0.10);

  /* Motion */
  --tr: 0.22s cubic-bezier(0.4,0,0.2,1);
  --ease: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: var(--ease);

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h:  60px;
  --container-max: 1280px;

  --accent:      var(--white);
  --accent-dim:  var(--white-dim);
  --accent-glow: var(--white-glow);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
h1, h2, h3, h4, .display, .sidebar-brand, .nav-logo,
.hero-title h1, .bot-hero h1, .section-title h2 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--fg); }
code, pre, .mono { font-family: var(--mono); }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; color: inherit; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }
::selection { background: rgba(255,255,255,0.25); color: var(--fg); }

/* ═══ GLOBAL BUILD-LAB AMBIENT (orbs coloridos + grid + grain) ═══ */
/* recolored from the original neutral orbs to use the rose / cyan / violet
   palette. opacity is intentionally low so it never competes with content,
   but the page no longer feels "flat dark" — there's always a soft, slow
   gradient breathing in the background. */
.orbs {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden;
  z-index: 0;
}
.orb {
  position: absolute; border-radius: 50%;
  /* perf: the radial-gradient already produces a soft glow; a 140px blur over
     a ~900px element is enormously expensive (re-rasterized on every animation
     frame) and was the main cause of desktop jank. Softness now lives in the
     gradient stop, so no costly filter is needed. */
  animation: orb-float 26s ease-in-out infinite;
  will-change: transform;
  opacity: .55;
}
.orb-1 {
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(255,255,255,.05), transparent 72%);
  top: -18%; left: -12%;
}
.orb-2 {
  width: 50vw; height: 50vw;
  background: radial-gradient(circle, rgba(56,189,248,.16), transparent 72%);
  bottom: -14%; right: -12%; animation-delay: -8s;
}
.orb-3 {
  width: 36vw; height: 36vw;
  background: radial-gradient(circle, rgba(167,139,250,.13), transparent 72%);
  top: 35%; left: 48%; animation-delay: -14s; animation-duration: 32s;
}
@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-28px, -34px) scale(1.05); }
}

/* universal ambient layer for pages that DON'T render <div class="orbs"> in
   markup. inserted via body::after so every page gets the colored glow. */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60vw 50vw at 8% 0%, rgba(255,255,255,.03), transparent 60%),
    radial-gradient(ellipse 55vw 45vw at 95% 100%, rgba(56,189,248,.08), transparent 60%),
    radial-gradient(ellipse 30vw 30vw at 60% 50%, rgba(167,139,250,.06), transparent 60%);
  opacity: .9;
}
/* when a page already paints orbs explicitly, fade the body::after so they
   don't double up */
body:has(.orbs .orb)::after { opacity: 0; }
/* any page that injects bl-bg (novo-servidor) skips both layers */
body:has(.bl-bg)::after { opacity: 0; }
body:has(.bl-bg) .orbs .orb { display: none; }

/* universal subtle grid + grain */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 10000;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.022;
  mix-blend-mode: overlay;
}

/* fixed grid plane behind everything (universal) */
.bl-global-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 0%, transparent 75%);
}
/* garante que o conteúdo fique acima dos orbs */
#topbar, .page-wrap, .sidebar, .auth-card, .drawer, .toast, .modal-overlay { position: relative; z-index: 1; }
#topbar { z-index: 200; }

/* ─────────────── LAYOUT ─────────────── */
body.app-layout {
  display: block;
  padding-top: var(--topbar-h);
}
.page-wrap {
  min-height: calc(100vh - var(--topbar-h));
  padding: 20px 16px 48px;
}
.container {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ─────────────── TOPBAR / SIDEBAR (responsive) ─────────────── */
/* MOBILE: topbar with hamburger → drawer */
#topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  background: rgba(10,10,10,0.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 200;
  display: flex;
  align-items: center;
}

.sidebar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  gap: 12px;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-weight: 700;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.sidebar-logo {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--white);
  color: var(--void);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  font-family: var(--font-display);
}
.sidebar-brand { font-family: var(--font-display); letter-spacing: -0.02em; }
.sidebar-wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.sidebar-wordmark span { font-size: 10px; color: var(--fg-muted); font-weight: 500; letter-spacing: 0.02em; }

.sidebar-section-label { display: none; }

/* Nav on mobile = horizontal scroll chips */
.sidebar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }
.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--fg-dim);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: var(--ease);
  border: 1px solid transparent;
}
.nav-item:hover { color: var(--fg); background: var(--bg-elev-2); }
.nav-item.active {
  color: var(--fg);
  background: var(--bg-elev-3);
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset, 0 2px 8px rgba(255,255,255,0.08);
}
.nav-item.active .nav-icon { color: var(--fg); opacity: 1; }
.nav-icon { display: inline-flex; width: 15px; height: 15px; opacity: 0.8; }
.nav-icon svg { width: 100%; height: 100%; }

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}
.user-info { display: none; }
.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-elev-3);
  color: var(--fg);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--border);
}
.user-pill.warn {
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--amber-dim);
  color: var(--amber);
  font-size: 11px;
  font-weight: 500;
}
.sidebar-logout {
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  transition: var(--ease);
}
.sidebar-logout:hover { color: var(--fg); background: var(--bg-elev-2); }

/* DESKTOP: sidebar vertical fixa */
@media (min-width: 1024px) {
  body.app-layout { padding-top: 0; padding-left: var(--sidebar-w); }
  #topbar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    height: 100vh;
    border-right: 1px solid var(--border);
    border-bottom: none;
    flex-direction: column;
    padding: 0;
    background: var(--bg-elev);
    backdrop-filter: none;
  }
  .sidebar {
    flex-direction: column;
    align-items: stretch;
    padding: 20px 12px;
    gap: 0;
    overflow-y: auto;
  }
  .sidebar-brand { padding: 4px 8px 20px; }
  .sidebar-section-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--fg-muted);
    text-transform: uppercase;
    padding: 12px 8px 6px;
  }
  .sidebar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-left: 0;
    overflow: visible;
  }
  .nav-item { width: 100%; padding: 8px 10px; }
  .sidebar-footer {
    margin-top: auto;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .user-info {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px;
  }
  .user-details { min-width: 0; flex: 1; }
  .user-email { font-size: 12px; font-weight: 500; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-plan { font-size: 10px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .sidebar-logout { width: 100%; text-align: left; padding: 8px 10px; }
  .page-wrap { padding: 28px 28px 56px; }
}

/* ─────────────── TYPOGRAPHY ─────────────── */
h1, h2, h3, h4 { font-family: var(--heading); font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
h1 { font-size: 28px; line-height: 1.15; }
h2 { font-size: 16px; line-height: 1.3; }
h3 { font-size: 14px; line-height: 1.3; }
p  { color: var(--fg-dim); }

/* PAGE HERO (paniel-style) — substitui o old .page-title pequeno */
.page-header {
  margin-bottom: 32px;
  padding-top: 4px;
  position: relative;
}
.page-header .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #cfcfd5;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.10);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.page-header .kicker .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-mint);
  box-shadow: 0 0 10px rgba(77,255,145,0.7);
  animation: ph-pulse 2s ease-in-out infinite;
}
@keyframes ph-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .6; } }

.page-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -2.5px;
  color: #fff;
  margin: 0 0 14px;
  max-width: 900px;
}
.page-title .ht-dim { color: #5a5a62; }
.page-title .ht-acid,
.ht-acid {
  background: linear-gradient(120deg, #fff 0%, #a78bfa 40%, #38bdf8 75%, #4dff91 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.page-subtitle {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-dim);
  margin-top: 0;
  max-width: 720px;
}
@media (max-width: 720px) {
  .page-title { letter-spacing: -1.5px; }
}

/* Compact variant para páginas que têm muito conteúdo logo abaixo */
.page-header.compact .page-title { font-size: clamp(28px, 4.4vw, 42px); letter-spacing: -1.4px; }
.page-header.compact { margin-bottom: 24px; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.section-head h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.4px; color: #fff; }
.section-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hint { color: var(--fg-muted); font-size: 12px; }
.small-hint { font-size: 10.5px; line-height: 1.3; }
@media (min-width: 640px) { .small-hint { font-size: 11.5px; } }

/* ─────────────── BUTTONS ─────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r2);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--fg);
  cursor: pointer;
  transition: var(--ease);
  white-space: nowrap;
  user-select: none;
  line-height: 1;
  min-height: 34px;
}
.btn:hover:not(:disabled) { background: var(--bg-elev-3); border-color: var(--border-strong); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.ico { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.ico svg { width: 1em; height: 1em; }
.btn > .ico svg { width: 14px; height: 14px; }
.btn-small > .ico svg { width: 12px; height: 12px; }

/* Primary CTA — branco puro */
.btn-red, .btn-primary {
  background: var(--white);
  color: var(--void);
  border-color: var(--white);
  font-weight: 600;
}
.btn-red:hover:not(:disabled), .btn-primary:hover:not(:disabled) {
  background: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.88);
}

.btn-green {
  background: var(--bg-elev-2);
  color: var(--green);
  border-color: rgba(0,255,179,0.35);
}
.btn-green:hover:not(:disabled) { background: var(--green-dim); border-color: var(--green); }

.btn-blue {
  background: var(--bg-elev-2);
  color: var(--fg);
  border-color: var(--border);
}
.btn-blue:hover:not(:disabled) { background: var(--bg-elev-3); border-color: var(--border-strong); }

/* Destructive/danger — só usado quando quer puxar atenção de fato */
.btn-danger {
  background: var(--c-rose);
  color: #fff;
  border-color: var(--c-rose);
}
.btn-danger:hover:not(:disabled) { background: var(--red-dim); border-color: var(--red-dim); }

.btn-soft-red {
  background: var(--red-soft);
  color: var(--c-rose);
  border-color: rgba(244,63,94,0.35);
}
.btn-soft-red:hover:not(:disabled) { background: rgba(244,63,94,0.18); }

.btn-gray { background: transparent; color: var(--fg-dim); border-color: var(--border); }
.btn-gray:hover:not(:disabled) { background: var(--bg-elev-2); color: var(--fg); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-dim); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-elev-2); color: var(--fg); }

.btn-small { padding: 6px 10px; font-size: 12px; min-height: 28px; }
.btn-block { width: 100%; }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 4px;
  border-radius: 6px;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  transition: var(--ease);
  margin-bottom: 12px;
}
.btn-back:hover { color: var(--fg); background: var(--bg-elev-2); }

/* ─────────────── CARDS ─────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 16px;
  overflow: hidden;
  padding: 16px 18px;
}
.card > h2 { font-size: 15px; font-weight: 600; margin-bottom: 14px; color: var(--fg); }
.card > h3 { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--fg); }
.card-body { padding: 14px 16px; }
.card-pad-0 { padding: 0; }
/* When a card uses .section-head or .pairing-head as first child, escape padding so border-bottom goes edge-to-edge */
.card > .section-head:first-child,
.card > .pairing-head:first-child,
.card > .admin-tabs:first-child {
  margin: -16px -18px 16px;
  padding: 14px 18px;
}
.card > .card-body {
  margin: 0 -18px -16px;
  padding: 16px 18px;
}
.card > .section-head:first-child + .card-body,
.card > .admin-tabs:first-child + .card-body {
  margin-top: -16px;
}
.card.pairing-card { padding: 0; }
.card.pairing-card .pairing-head { padding: 14px 18px; }
/* pairing-card tem padding:0, então não precisa (e não deve) aplicar margem negativa
   para "escapar" do padding do card — senão o título vaza pra fora. */
.card.pairing-card > .pairing-head:first-child { margin: 0; padding: 12px 16px; }

/* ─────────────── TILES ─────────────── */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
@media (min-width: 640px) {
  .tile-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tile-grid.tile-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tile-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94, 0.6);
  animation: live-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94, 0.6); opacity: 1; }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94, 0); opacity: 0.7; }
}
.tile-pulse { animation: tile-flash 0.6s ease-out; }
@keyframes tile-flash {
  0% { border-color: var(--accent); background: rgba(229,72,77,0.04); }
  100% { border-color: var(--border); background: var(--card); }
}
.tile-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─────────────── HOST / INFRA ─────────────── */
.host-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 520px) {
  .host-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .host-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.host-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.host-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.host-tile-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.host-tile-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 2px;
}
.host-tile-value.mono {
  font-family: var(--mono);
  font-size: 18px;
}
.host-tile-sub {
  font-size: 11px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}
.host-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  margin-top: 2px;
}
.host-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms ease, background-color 300ms ease;
}
.host-bar-fill[data-tone="ok"]   { background: linear-gradient(90deg, #22c55e, #16a34a); }
.host-bar-fill[data-tone="warn"] { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.host-bar-fill[data-tone="crit"] { background: linear-gradient(90deg, #f43f5e, #be1638); }
.host-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.host-badge[data-tone="ok"]   { color: #4ade80; background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.3); }
.host-badge[data-tone="warn"] { color: #fbbf24; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); }
.host-badge[data-tone="crit"] { color: #f5a3b4; background: rgba(244,63,94,.12);  border-color: rgba(244,63,94,.35); }
.host-warning {
  margin-top: 4px;
  font-size: 11px;
  color: #fca5a5;
  background: rgba(244,63,94,.06);
  border: 1px solid rgba(244,63,94,.2);
  border-radius: 6px;
  padding: 4px 8px;
  line-height: 1.4;
}

/* ─────────────── STATUS PILL ─────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--fg-dim);
  text-transform: uppercase;
  line-height: 1.4;
}
.status-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fg-muted);
}
.status-pill[data-status="online"] { color: var(--green); border-color: rgba(0,255,179,0.4); background: var(--green-dim); }
.status-pill[data-status="online"]::before { background: var(--green); box-shadow: 0 0 0 3px rgba(0,255,179,0.2); animation: pulse 2s infinite; }
.status-pill[data-status="starting"], .status-pill[data-status="pairing"] { color: var(--amber); border-color: rgba(255,209,102,0.4); background: var(--amber-dim); }
.status-pill[data-status="starting"]::before, .status-pill[data-status="pairing"]::before { background: var(--amber); }
.status-pill[data-status="stopped"] { color: var(--c-rose); border-color: rgba(244,63,94,0.4); background: var(--red-soft); }
.status-pill[data-status="stopped"]::before { background: var(--c-rose); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ─────────────── HERO (bot detail page) ─────────────── */
.bot-hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 60%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-left { min-width: 0; }
.hero-title h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 12px;
}
.hero-slug {
  font-family: var(--mono);
  color: var(--fg-muted);
  font-size: 12px;
}
.hero-dim { color: var(--fg-muted); font-size: 12px; }

/* Actions bar — 3 botões num cartão único (segmented control) */
.hero-actions {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev-1));
  border: 1px solid var(--border);
  border-radius: var(--r3);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 10px 28px -18px rgba(0,0,0,0.7),
    var(--shadow-card);
  position: relative;
}
.hero-actions::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
}
.hero-actions .btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  justify-content: center;
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--fg-dim);
  position: relative;
  transition: background .18s ease, color .18s ease, transform .12s ease;
  min-height: 48px;
  letter-spacing: 0.1px;
  overflow: hidden;
}
.hero-actions .btn::before {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 0;
  height: 2px; background: currentColor; border-radius: 2px 2px 0 0;
  transform: scaleX(0); transform-origin: center;
  transition: transform .25s var(--ease, ease);
  opacity: .9;
}
.hero-actions .btn:not(:disabled):hover::before { transform: scaleX(1); }
.hero-actions .btn + .btn { box-shadow: -1px 0 0 var(--border); }
.hero-actions .btn:not(:disabled):hover {
  background: rgba(255,255,255,0.04);
  color: var(--fg);
}
.hero-actions .btn:not(:disabled):active { transform: translateY(1px); }
.hero-actions .btn:disabled { opacity: 0.55; }
.hero-actions .btn .ico {
  opacity: 0.95;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
}
.hero-actions .btn .ico svg { width: 13px; height: 13px; }
/* Cor específica por ação no ícone (não no botão inteiro, pra manter limpo) */
.hero-actions #btnStart  { color: var(--green); }
.hero-actions #btnStart:not(:disabled):hover  { background: var(--green-dim); color: var(--green); }
.hero-actions #btnStop   { color: var(--c-rose); }
.hero-actions #btnStop:not(:disabled):hover   { background: var(--red-soft); color: var(--c-rose); }
.hero-actions #btnRestart { color: var(--fg); }
.hero-actions #btnRestart:not(:disabled):hover { background: rgba(255,255,255,0.06); color: var(--fg); }

@media (min-width: 640px) {
  .bot-hero { flex-direction: row; align-items: center; justify-content: space-between; padding: 18px 20px; }
  .hero-actions { width: auto; min-width: 320px; }
  .hero-actions .btn { min-width: 108px; }
}

/* ─────────────── PAIRING CARD ─────────────── */
.pairing-card {
  background: var(--card);
  border: 1px solid var(--border-accent);
  border-radius: var(--r);
  margin-bottom: 16px;
  overflow: hidden;
}
.pairing-card.hidden { display: none; }
.pairing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.pairing-head h2 { color: var(--c-rose); }
.pairing-head .timer { font-family: var(--mono); font-size: 12px; color: var(--amber); }
.pairing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border2);
}
.pairing-label { font-size: 12px; color: var(--fg-muted); }
.pairing-number { font-family: var(--mono); font-size: 13px; color: var(--fg); }
.pairing-code-wrap { display: flex; align-items: center; gap: 8px; }
.pairing-code {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-rose);
  background: var(--red-soft);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-accent);
  letter-spacing: 0.08em;
}
.pairing-steps {
  padding: 14px 16px 14px 36px;
  color: var(--fg-dim);
  font-size: 12px;
}
.pairing-steps li { padding: 3px 0; }

/* ─────────────── SUBNAV (bot tabs) ─────────────── */
.subnav {
  display: flex;
  gap: 4px;
  margin-top: 14px;    /* separa visualmente do hero-actions acima */
  margin-bottom: 20px;
  padding: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: var(--topbar-h);
  z-index: 50;
  box-shadow: 0 1px 0 var(--border2) inset;
}
/* Hero + subnav são blocos separados — reforça com margem inferior no hero */
.hero-actions { margin-bottom: 0; }
@media (max-width: 520px) {
  .subnav { margin-top: 12px; }
}
.subnav::-webkit-scrollbar { display: none; }
.subnav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 9px 14px;
  border-radius: calc(var(--r2) + 2px);
  white-space: nowrap;
  transition: var(--ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.subnav-btn .ico {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}
.subnav-btn .ico svg { width: 15px; height: 15px; }
.subnav-btn:hover {
  color: var(--fg);
  background: var(--bg-elev-2);
}
.subnav-btn:hover .ico { opacity: 1; }
.subnav-btn.active {
  background: var(--bg-elev-3);
  color: var(--fg);
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset, 0 2px 8px rgba(255,255,255,0.08);
}
.subnav-btn.active .ico { opacity: 1; color: var(--fg); }
@media (min-width: 1024px) {
  .subnav { top: 0; }
  .subnav-btn { font-size: 13px; padding: 10px 16px; }
}

.tab-pane { display: none; animation: fadein 160ms ease; }
.tab-pane.active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ─────────────── DEF LIST (overview) ─────────────── */
.def-list { display: flex; flex-direction: column; }
.def-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border2);
  font-size: 13px;
  align-items: center;
  justify-items: start;
}
.def-item:last-child { border-bottom: none; }
.def-label { color: var(--fg-muted); font-size: 12px; align-self: center; justify-self: start; }
.def-value { color: var(--fg); font-family: var(--mono); font-size: 12px; word-break: break-word; align-self: center; justify-self: start; min-width: 0; width: 100%; display: flex; align-items: center; }
@media (max-width: 560px) {
  .def-item {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 14px;
    align-items: start;
  }
  .def-label { font-size: 11px; letter-spacing: .2px; }
}

/* ─────────────── LOGS (terminal) ─────────────── */
.logs-card { padding: 0; overflow: hidden; }
.logs-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent), #0e0e12;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.logs-head::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 14px 0 0 #fbbf24, 28px 0 0 #f43f5e;
  margin-right: 28px;
  flex-shrink: 0;
}
.logs-head h2 { font-size: 12px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--fg-dim); margin: 0; }
.logs-actions { display: flex; gap: 6px; align-items: center; }
.logs {
  background: #050507;
  color: #cbd5e1;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  padding: 12px 14px;
  margin: 0;
  min-height: 280px;
  max-height: 60vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.logs::-webkit-scrollbar { width: 8px; }
.logs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.logs::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }
.logs .l-line {
  padding: 1px 6px;
  border-left: 2px solid transparent;
  margin-left: -6px;
  transition: background .15s ease;
}
.logs .l-line:hover { background: rgba(255,255,255,0.025); }
.logs .l-line.l-error { border-left-color: #f43f5e; background: rgba(244,63,94,0.05); }
.logs .l-line.l-warn  { border-left-color: #f59e0b; background: rgba(245,158,11,0.05); }
.logs .l-line.l-success { border-left-color: #22c55e; background: rgba(34,197,94,0.04); }
.logs .l-line.l-info  { border-left-color: #60a5fa; background: rgba(96,165,250,0.04); }
.logs .l-ts  { color: #4b5563; margin-right: 8px; user-select: none; }
.logs .l-tag { font-weight: 600; margin-right: 4px; padding: 0 4px; border-radius: 3px; font-size: 10.5px; letter-spacing: .3px; }
.logs .l-lvl { font-weight: 700; margin-right: 6px; padding: 0 5px; border-radius: 3px; font-size: 10.5px; letter-spacing: .4px; }
.stdin-row {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background: #0e0e12;
  border-top: 1px solid var(--border);
}
.stdin-row input {
  flex: 1;
  background: #050507;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 8px 12px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
}
.stdin-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,255,255,0.10); }

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-dim);
  cursor: pointer;
}
.checkbox-inline input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--c-rose);
  cursor: pointer;
}

/* ─────────────── FILE MANAGER ─────────────── */
.fm-breadcrumb {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
.fm-crumb-item { color: var(--fg-dim); cursor: pointer; }
.fm-crumb-item:hover { color: var(--fg); text-decoration: underline; }

.fm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.fm-toolbar .btn {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}
.fm-toolbar .btn .ico svg { width: 13px; height: 13px; }
.fm-toolbar > * { min-width: 0; }
.fm-hidden-toggle { margin-left: auto; }
@media (max-width: 520px) {
  .fm-toolbar { gap: 5px; padding: 8px 10px; }
  .fm-toolbar .btn { padding: 6px 8px; font-size: 11.5px; }
  .fm-hidden-toggle { margin-left: 0; }
}

.fm-grid { display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .fm-grid.has-editor { flex-direction: row; }
  .fm-grid.has-editor .fm-list { width: 45%; border-right: 1px solid var(--border); }
  .fm-grid.has-editor .fm-editor { flex: 1; }
}

.fm-list { display: flex; flex-direction: column; }
.fm-entry {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border2);
  transition: var(--ease);
  cursor: pointer;
  font-size: 13px;
  min-width: 0;
}
.fm-entry:last-child { border-bottom: none; }
.fm-entry:hover { background: var(--bg-elev-2); }
.fm-name {
  color: var(--fg);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fm-size { font-family: var(--mono); font-size: 11px; color: var(--fg-muted); white-space: nowrap; display: none; }
.fm-date { font-family: var(--mono); font-size: 11px; color: var(--fg-muted); white-space: nowrap; display: none; }
.fm-actions { display: flex; gap: 4px; }
.fm-actions .btn { padding: 4px 8px; font-size: 11px; min-height: 24px; }
.fm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  color: var(--fg-muted);
}
.fm-icon svg { width: 14px; height: 14px; }
.fm-entry[data-kind="dir"] .fm-icon { color: var(--amber); }
@media (min-width: 640px) {
  .fm-entry { grid-template-columns: 18px 1fr 80px 120px auto; }
  .fm-size, .fm-date { display: inline; }
}

.fm-root-info {
  padding: 10px 16px;
  margin: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  font-size: 12px;
}
.fm-root-info b { color: var(--fg); font-family: var(--mono); font-weight: 500; }

/* FM bulk-select */
.fm-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  flex-wrap: wrap;
}
.fm-bulk-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}
.fm-bulk-check input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.fm-bulk-count { font-size: 12px; color: var(--fg-dim); font-family: var(--mono); }
.fm-bulk-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
}
@media (max-width: 640px) {
  .fm-bulk-actions {
    margin-left: 0;
    width: 100%;
    justify-content: stretch;
  }
  .fm-bulk-actions .btn { flex: 1 1 auto; min-width: 0; }
}
.fm-row-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  cursor: pointer;
  padding-right: 4px;
}
.fm-row-check input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.fm-entry.fm-select-mode { grid-template-columns: 22px 18px 1fr auto; }
@media (min-width: 640px) {
  .fm-entry.fm-select-mode { grid-template-columns: 22px 18px 1fr 80px 120px auto; }
}
.fm-entry.fm-selected { background: rgba(244,63,94, 0.08); }
.fm-entry.fm-selected:hover { background: rgba(244,63,94, 0.12); }

/* Topbar 3-dot menu (mobile) */
.cp-topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10,10,11,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cp-topbar-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--fg); text-decoration: none; }
.cp-topbar-logo { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, #ffffff, #a0a0aa); display: grid; place-items: center; color: #08080b; font-weight: 800; font-size: 13px; }
.cp-topbar-btn {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border2, #3f3f46);
  background: transparent;
  color: var(--fg);
  display: grid; place-items: center;
  cursor: pointer;
}
.cp-topbar-btn:hover { background: var(--bg-elev, #1a1a1d); }
.cp-topbar-btn svg { width: 20px; height: 20px; font-size: 20px; }
.cp-topbar-actions { display: inline-flex; align-items: center; gap: 6px; }
.cp-topbar-btn-icon { position: relative; color: var(--fg-dim, #a1a1aa); }
.cp-topbar-btn-icon:hover { color: var(--fg); }
.cp-topbar-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, #ffffff); box-shadow: 0 0 0 2px var(--bg, #0a0a0b);
}
.cp-pop {
  position: fixed; z-index: 90;
  min-width: 220px; max-width: 92vw;
  background: var(--bg-elev, #111113);
  border: 1px solid var(--border, #27272a);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.48);
  overflow: hidden;
}
.cp-pop-head {
  padding: 10px 12px; font-weight: 700; font-size: 13px;
  color: var(--fg); border-bottom: 1px solid var(--border, #27272a);
}
.cp-pop-body {
  padding: 0; font-size: 13px; color: var(--fg-dim, #a1a1aa);
  max-height: 420px; overflow-y: auto;
}
.cp-pop-head { display: flex; align-items: center; justify-content: space-between; }
.cp-pop-close {
  background: transparent; border: none; color: var(--fg-dim, #a1a1aa);
  font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.cp-pop-close:hover { color: var(--fg); }
.cp-pop-empty {
  padding: 20px 16px; text-align: center; color: var(--fg-dim, #71717a);
  font-size: 12px; line-height: 1.5;
}
.cp-pop-empty small { display: block; margin-top: 6px; opacity: .7; }
.cp-pop-item {
  display: block; padding: 10px 12px;
  border-bottom: 1px solid var(--border, #27272a);
  color: var(--fg); text-decoration: none;
  /* reset button default (mobile Chrome/Safari mostrava fundo branco) */
  -webkit-appearance: none; appearance: none;
  background: transparent;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; font: inherit;
  cursor: pointer;
}
.cp-pop-item:last-child { border-bottom: 0; }
.cp-pop-item:hover { background: rgba(255, 255, 255, .03); }
.cp-pop-item-top {
  display: flex; justify-content: space-between; gap: 10px;
  font-weight: 600; font-size: 12.5px; margin-bottom: 3px;
}
.cp-pop-item-top time { color: var(--fg-dim, #71717a); font-weight: 400; font-size: 11px; flex-shrink: 0; }
.cp-pop-item-body { font-size: 12px; color: var(--fg-dim, #a1a1aa); line-height: 1.4;
  white-space: normal; word-wrap: break-word; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cp-pop-item-unread { background: rgba(244,63,94, .06); }
.cp-pop-item-unread .cp-pop-item-top span::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent, #ffffff);
  margin-right: 6px; vertical-align: middle;
}
.cp-pop-foot {
  padding: 10px 12px; border-top: 1px solid var(--border, #27272a);
  background: rgba(0, 0, 0, .15);
}
.cp-pop-btn {
  width: 100%; padding: 8px 10px;
  background: transparent; color: var(--fg); cursor: pointer;
  border: 1px solid var(--border, #27272a); border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
}
.cp-pop-btn:hover { background: rgba(255, 255, 255, .05); border-color: var(--accent, #ffffff); }
.cp-topbar-dot {
  min-width: 8px; padding: 0 2px; font-size: 9px; font-weight: 700;
  color: #fff; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.cp-menu-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.62);
  z-index: 70; display: none;
}
.cp-menu-backdrop.show { display: block; }
.cp-menu {
  position: absolute;
  top: 56px;
  right: 12px;
  min-width: 220px;
  background: var(--bg-elev, #111113);
  border: 1px solid var(--border, #27272a);
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  padding: 6px;
  overflow: hidden;
}
.cp-menu a, .cp-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.cp-menu a:hover, .cp-menu button:hover { background: var(--bg-elev-2, #1a1a1d); }
.cp-menu .cp-menu-sep { height: 1px; background: var(--border, #27272a); margin: 4px 2px; }
.cp-menu .cp-menu-danger { color: var(--accent, #ffffff); }
.cp-menu svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--fg-dim); }
.cp-menu .cp-menu-danger svg { color: var(--accent, #ffffff); }
/* Abaixo de 1024px: mata a sidebar desktop inteira, deixa só a cp-topbar mobile */
@media (max-width: 1023.98px) {
  .cp-topbar { display: flex !important; }
  #topbar { display: none !important; }
  body.app-layout { padding-left: 0 !important; padding-top: 0 !important; }
  body.app-layout main, body.app-layout .app-main { margin-left: 0 !important; }
}

/* Safety net: qualquer svg solto não pode explodir o layout */
svg { max-width: 100%; }
svg:not([width]):not([height]) { width: 1em; height: 1em; }

/* ───── File editor (advanced) ───── */
.fm-editor { display: flex; flex-direction: column; background: #0a0a0d; border-top: 1px solid var(--border); scroll-margin-top: 70px; }
.fm-editor.hidden { display: none; }
.fm-editor-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent), #111115;
  border-bottom: 1px solid var(--border);
}
.fm-editor-lang {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(99,102,241,0.14); color: #a5b4fc;
  border: 1px solid rgba(99,102,241,0.3);
  flex-shrink: 0;
}
.fm-editor-path {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--mono); font-size: 12px; color: var(--fg-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fm-editor-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* s35: editor rewritten as overlay architecture — textarea transparente em
   cima do <pre> colorido. Assim editar NÃO perde syntax highlight, o gutter
   sincroniza certo e não congela linha. */
.fm-editor-body {
  position: relative; display: flex; align-items: stretch;
  background: #0a0a0d;
  max-height: 560px;
  min-height: 340px;
  overflow: hidden;
}
.fm-gutter {
  flex: 0 0 auto;
  width: 44px;
  margin: 0; padding: 14px 8px 14px 10px;
  background: #0e0e12;
  color: #4b5563;
  border-right: 1px solid rgba(255,255,255,0.04);
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  text-align: right;
  white-space: pre;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}
.fm-editor-stack {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  background: transparent;
  overflow: hidden;
}
.fm-code-view {
  margin: 0;
  padding: 0;
  position: absolute; inset: 0;
  background: transparent;
  overflow: auto;
  pointer-events: none; /* editor recebe clicks; pre só mostra cores */
  z-index: 1;
  will-change: transform; /* força compositor layer, evita sumir no Chrome Android focus */
}
.fm-code-view.hidden { display: none; }
.fm-code-view code {
  display: block;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
  background: transparent !important;
  min-height: 340px;
  tab-size: 2;
}
.fm-editor textarea {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  /* Hardening contra Chrome Android: força tudo transparente mesmo em foco/edit. */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  /* Texto INVISÍVEL mas seleção/caret visíveis. Highlight vem do <pre> abaixo. */
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: #60a5fa;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  padding: 14px 16px;
  margin: 0;
  border: none;
  outline: none;
  resize: none;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
  box-sizing: border-box;
  z-index: 2;
}
.fm-editor textarea::selection { background: rgba(96,165,250,0.28); color: transparent; -webkit-text-fill-color: transparent; }
.fm-editor textarea.hidden { display: none; }
.fm-editor textarea.reading {
  /* Quando só leitura (antes de clicar em Editar) fica opaco pra seleção normal */
  color: transparent; pointer-events: none;
}

/* Find bar (lupa) */
.fm-editor-findbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #111115;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.fm-editor-findbar.hidden { display: none; }
.fm-editor-findbar input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
}
.fm-editor-findbar input:focus { border-color: rgba(96,165,250,0.45); background: rgba(255,255,255,0.06); }
.fm-find-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-muted);
  min-width: 42px;
  text-align: right;
  white-space: nowrap;
}
/* Destaque temporário da linha alvo */
.fm-line-flash {
  position: absolute; left: 0; right: 0;
  height: 19.2px;
  background: rgba(96,165,250,0.18);
  border-left: 2px solid rgba(96,165,250,0.9);
  pointer-events: none;
  animation: fmLineFlashAnim 1.8s ease-out forwards;
  z-index: 3;
}
@keyframes fmLineFlashAnim {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}
.fm-editor-foot {
  display: flex; justify-content: flex-end;
  padding: 6px 12px;
  background: #111115;
  border-top: 1px solid rgba(255,255,255,0.04);
  font-family: var(--mono); font-size: 10.5px; color: var(--fg-muted);
  letter-spacing: .3px;
}
@media (max-width: 520px) {
  .fm-editor-head { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .fm-editor-path { width: 100%; order: 3; }
  .fm-editor-actions { order: 2; margin-left: auto; }
  .fm-gutter { width: 38px; padding: 12px 6px 12px 8px; font-size: 11.5px; }
  .fm-editor textarea { padding: 12px 12px; }
  .fm-code-view code { padding: 12px 12px; }
  .fm-editor-body { max-height: 560px; min-height: 320px; }
}

/* Upload animation (s35) — barrinha + brilho */
.upload-anim {
  position: relative; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.upload-anim .upload-anim-fill {
  position: absolute; inset: 0;
  width: 0%;
  background: linear-gradient(90deg, #60a5fa 0%, #818cf8 50%, #a855f7 100%);
  border-radius: inherit;
  transition: width .25s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 0 16px rgba(129,140,248,0.5);
}
.upload-anim .upload-anim-sheen {
  position: absolute; top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: uploadSheen 1.1s linear infinite;
}
.upload-anim.done .upload-anim-sheen { display: none; }
.upload-anim.done .upload-anim-fill { box-shadow: 0 0 16px rgba(34,197,94,0.5); background: linear-gradient(90deg, #22c55e, #4ade80); }
.upload-anim.error .upload-anim-sheen { display: none; }
.upload-anim.error .upload-anim-fill { box-shadow: 0 0 16px rgba(244,63,94,0.5); background: linear-gradient(90deg, #f43f5e, #fb7185); width: 100% !important; }
@keyframes uploadSheen {
  from { left: -40%; } to { left: 100%; }
}
.fm-upload-progress {
  margin: 10px 0 8px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  display: flex; flex-direction: column; gap: 8px;
}
.fm-upload-progress.hidden { display: none; }
.fm-upload-label {
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-muted);
  letter-spacing: .2px;
}
.hidden { display: none !important; }

/* ─────────────── FORMS ─────────────── */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.form-row label { font-size: 11.5px; font-weight: 500; color: var(--fg-dim); }
@media (min-width: 640px) {
  .form-row { margin-bottom: 14px; }
  .form-row label { font-size: 12px; }
}
.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="tel"],
.form-row input[type="url"],
.form-row input[type="search"],
.form-row input:not([type]),
.form-row select,
.form-row textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 9px 12px;
  color: var(--fg);
  font-size: 13px;
  width: 100%;
  transition: var(--ease);
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,255,255,0.10); }
/* File input: padronizado pro tema dark em toda a app.
   Chrome mostra um botão branco nativo; forçamos estilo escuro via ::file-selector-button. */
input[type="file"],
.form-row input[type="file"] {
  background: transparent;
  color: var(--fg-dim);
  font-size: 12px;
  padding: 6px 0;
  border: none;
  cursor: pointer;
}
input[type="file"]::file-selector-button,
.form-row input[type="file"]::file-selector-button {
  background: var(--bg3);
  color: var(--fg);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  margin-right: 10px;
  cursor: pointer;
  transition: var(--ease);
}
input[type="file"]::file-selector-button:hover,
.form-row input[type="file"]::file-selector-button:hover {
  background: var(--bg-elev-2);
  border-color: color-mix(in srgb, var(--border) 40%, #fff 15%);
}
input[type="file"]::-webkit-file-upload-button,
.form-row input[type="file"]::-webkit-file-upload-button {
  background: var(--bg3);
  color: var(--fg);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  margin-right: 10px;
  cursor: pointer;
}

/* Autofill do Chrome/Webkit estava deixando inputs BRANCOS no form de perfil.
   Força o fundo escuro e a cor de texto correta em inputs auto-preenchidos. */
.form-row input:-webkit-autofill,
.form-row input:-webkit-autofill:hover,
.form-row input:-webkit-autofill:focus,
.form-row input:-webkit-autofill:active,
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus,
.auth-card input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
  box-shadow: 0 0 0 1000px var(--bg) inset !important;
  -webkit-text-fill-color: var(--fg) !important;
  caret-color: var(--fg) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Avatar upload (perfil) */
.avatar-upload-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.avatar-preview {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
  color: var(--fg-dim);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-actions { display: flex; flex-direction: column; gap: 6px; }
.avatar-upload-btn {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 7px 12px;
  border-radius: var(--r2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
}
.avatar-upload-btn:hover { background: var(--bg-elev-2); border-color: var(--border-strong); }
.avatar-remove-btn {
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
  padding: 2px 0;
}
.avatar-remove-btn:hover { color: var(--c-rose); }
.avatar-upload-hint { font-size: 11px; color: var(--fg-muted); }
.form-help { font-size: 11px; color: var(--fg-muted); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 16px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }

.config-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 16px 16px;
}

.env-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0 16px 14px;
}
.env-row input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 10px 12px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  min-width: 0;
  width: 100%;
}
.env-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,255,255,0.10); }
.env-row .btn { width: 100%; justify-content: center; }
@media (min-width: 640px) {
  .env-row { grid-template-columns: 1fr 1fr auto; align-items: center; }
  .env-row .btn { width: auto; }
}
#envList .env-row { padding: 0 16px 8px; }
#envList .env-row input[readonly] { background: var(--bg-elev); color: var(--fg-dim); }
.env-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: var(--r2);
  margin: 0 16px 14px;
  background: var(--bg);
}
.env-hint {
  padding: 0 16px 14px;
  margin: 0;
  line-height: 1.6;
}
.env-hint code {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
}
.env-add {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 6px;
}

/* ─────────────── TABLES ─────────────── */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.table th, .table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border2);
  text-align: left;
  vertical-align: middle;
}
.table th {
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.table tbody tr:hover { background: var(--bg-elev-2); }
.table .mono { font-family: var(--mono); font-size: 11px; color: var(--fg-dim); }

/* ─────────────── DASHBOARD BOT CARD ─────────────── */
.grid { display: grid; gap: 12px; }
.grid-bots { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-bots { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-bots { grid-template-columns: repeat(3, 1fr); } }

.bot-card-pro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  transition: var(--ease);
  color: var(--fg);
}
.bot-card-pro:hover {
  border-color: var(--border-strong);
  background: var(--card-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.bot-card-pro-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.bot-card-pro-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bot-card-pro-slug {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.bot-card-pro-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.bot-card-pro-tile {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 8px 10px;
}
.bot-card-pro-tile .tl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 2px;
}
.bot-card-pro-tile .tv {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.bot-card-pro-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid var(--border2);
  font-size: 11px;
  color: var(--fg-muted);
  gap: 8px;
}

/* ---- Bot card wrapper + expand panel ---- */
.bot-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bot-card-wrap:has(.plan-expand:not(.hidden)) .bot-card-pro {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: var(--border2);
}
.bot-plan-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10.5px;
  color: var(--fg-dim);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.bot-plan-toggle:hover {
  border-color: var(--border-strong);
  color: var(--fg);
  background: var(--bg-elev);
}
.bot-plan-toggle .bpt-chevron {
  font-size: 8px;
  opacity: 0.7;
}
.plan-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(244,63,94,0.08);
  border: 1px solid rgba(244,63,94,0.25);
  color: var(--fg-dim);
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.plan-expand {
  background: linear-gradient(180deg, var(--bg-elev-2, #111) 0%, var(--card, #0d0d0d) 100%);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r) var(--r);
  margin-top: -6px;
  padding: 12px 14px 14px;
  animation: plan-expand-in 180ms ease;
}
.plan-expand.hidden { display: none; }
@keyframes plan-expand-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.plan-expand .pe-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border2);
  margin-bottom: 8px;
}
.plan-expand .pe-title {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.plan-expand .pe-tier {
  color: var(--c-rose, #f43f5e);
  font-size: 11px;
  letter-spacing: -1px;
}
.plan-expand .pe-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.plan-expand .pe-price {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-dim);
  white-space: nowrap;
}
.plan-expand .pe-price .u { opacity: 0.55; font-size: 10px; }

.plan-expand .pe-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-bottom: 10px;
}
.plan-expand .pe-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border2);
  font-size: 11.5px;
}
.plan-expand .pe-row:last-child { border-bottom: none; }
.plan-expand .pe-k { color: var(--fg-muted); }
.plan-expand .pe-v { color: var(--fg); font-weight: 600; font-family: var(--mono); text-align: right; }
.plan-expand .pe-sub { color: var(--fg-muted); font-weight: 400; font-size: 10px; }

.plan-expand .pe-premium {
  background: linear-gradient(135deg, rgba(244,63,94,0.06) 0%, rgba(251,146,60,0.04) 100%);
  border: 1px solid rgba(244,63,94,0.18);
  border-radius: 8px;
  padding: 10px 10px 8px;
  margin-top: 4px;
}
.plan-expand .pe-premium-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.plan-expand .pe-premium-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.plan-expand .pe-prem-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 8px;
  line-height: 1.25;
  min-width: 0;
}
.plan-expand .pep-k {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.plan-expand .pep-v {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-expand .pep-sub {
  font-size: 9.5px;
  color: var(--fg-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 520px) {
  .plan-expand .pe-premium-grid { grid-template-columns: repeat(4, 1fr); }
  .plan-expand .pe-table { grid-template-columns: 1fr 1fr; gap: 4px 16px; }
  .plan-expand .pe-row { border-bottom: 1px dashed var(--border2); }
}

.empty-state {
  padding: 40px 16px;
  text-align: center;
  color: var(--fg-dim);
  border: 1px dashed var(--border);
  border-radius: var(--r);
  background: var(--card);
}
.empty-state h3 { font-size: 15px; margin-bottom: 6px; color: var(--fg); }
.empty-state p { font-size: 13px; color: var(--fg-muted); }

/* ─────────────── AI TAB ─────────────── */
.ai-hero {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(244,63,94,0.06), rgba(168,85,247,0.04));
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 16px;
}
.ai-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-rose);
}
.ai-icon svg { width: 20px; height: 20px; }
.ai-hero-body { flex: 1; min-width: 0; }
.ai-hero-body h2 { font-size: 15px; margin-bottom: 4px; }
.ai-hero-body p { font-size: 12px; color: var(--fg-dim); margin-bottom: 12px; line-height: 1.5; }
.ai-hero-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.ai-hero-title h2 { margin: 0; }
.ai-model-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(245,158,11,0.18), rgba(245,158,11,0.08));
  border: 1px solid rgba(245,158,11,0.35);
  color: var(--amber);
}
.ai-toggle-row {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.ai-analyze-status {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  font-size: 12px;
  color: var(--fg-dim);
}
.ai-analyze-status.err { color: var(--c-rose); border-color: rgba(244,63,94,0.35); }
.ai-analyze-status.ok { color: var(--green); border-color: rgba(70,167,88,0.35); }

.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.toggle-switch input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track {
  width: 34px; height: 20px;
  border-radius: 999px;
  background: var(--bg-elev-3);
  border: 1px solid var(--border);
  position: relative;
  transition: var(--ease);
  flex-shrink: 0;
}
.toggle-track::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--fg-muted);
  transition: var(--ease);
}
.toggle-switch input:checked + .toggle-track {
  background: var(--c-rose);
  border-color: var(--c-rose);
}
.toggle-switch input:checked + .toggle-track::before {
  left: 16px;
  background: #fff;
}
.toggle-label { font-size: 13px; color: var(--fg); font-weight: 500; }

.ai-status-pill {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
}
.ai-status-pill.on { color: var(--green); background: var(--green-dim); border-color: rgba(70,167,88,0.35); }
.ai-status-pill.off { color: var(--fg-muted); background: var(--bg-elev-2); }
.ai-status-pill.warn { color: var(--amber); background: var(--amber-dim); border-color: rgba(245,158,11,0.35); }

.fix-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fg-muted);
  border-radius: var(--r2);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: var(--ease);
}
.fix-card[data-status="pending"] { border-left-color: var(--amber); }
.fix-card[data-status="applied"] { border-left-color: var(--green); opacity: 0.75; }
.fix-card[data-status="dismissed"] { border-left-color: var(--fg-muted); opacity: 0.5; }
.fix-card[data-status="failed"] { border-left-color: var(--c-rose); }
.fix-card[data-status="no_fix"] { border-left-color: var(--amber); opacity: 0.7; }

.fix-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.fix-title { font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }
.fix-date { font-size: 11px; color: var(--fg-muted); font-family: var(--mono); }
.fix-diagnosis { font-size: 12px; color: var(--fg-dim); line-height: 1.55; margin-bottom: 10px; }
.fix-error {
  font-size: 12px;
  color: var(--c-rose);
  background: var(--red-soft);
  border: 1px solid var(--border-accent);
  border-radius: var(--r4);
  padding: 6px 10px;
  margin-bottom: 8px;
  font-family: var(--mono);
}
.fix-status {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.fix-status[data-s="pending"] { color: var(--amber); background: var(--amber-dim); border-color: rgba(245,158,11,0.35); }
.fix-status[data-s="applied"] { color: var(--green); background: var(--green-dim); border-color: rgba(70,167,88,0.35); }
.fix-status[data-s="dismissed"] { color: var(--fg-muted); background: var(--bg-elev-2); }
.fix-status[data-s="failed"], .fix-status[data-s="no_fix"] { color: var(--c-rose); background: var(--red-soft); border-color: var(--border-accent); }

.fix-patches { margin-bottom: 10px; }
.fix-patch {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r4);
  overflow: hidden;
  margin-bottom: 6px;
}
.fix-patch-head {
  padding: 6px 10px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
}
.fix-patch-head .file { font-family: var(--mono); color: var(--fg); font-weight: 600; }
.fix-patch-head .reason { color: var(--fg-dim); font-size: 11px; }
.fix-patch-diff { padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.fix-patch-diff span {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
}
.fix-patch-diff .del { background: rgba(244,63,94,0.08); color: #f5a3b4; border-left: 2px solid var(--c-rose); }
.fix-patch-diff .add { background: rgba(70,167,88,0.1); color: #86efac; border-left: 2px solid var(--green); }
.fix-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ─────────────── MODAL ─────────────── */
.modal-backdrop,
.cp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
}
.cp-modal-backdrop > .cp-modal { pointer-events: auto; }
.cp-modal-backdrop { pointer-events: auto; }
.modal-backdrop.show { display: flex; }
.cp-modal-backdrop[style*="flex"] { display: flex !important; }

.modal, .cp-modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: 16px;
  max-width: 440px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modal-in 180ms ease;
}
@media (min-width: 640px) {
  .modal, .cp-modal { padding: 22px; }
}
@keyframes modal-in {
  from { transform: scale(0.96) translateY(6px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal h3, .cp-modal-title { font-size: 16px; margin-bottom: 10px; color: var(--fg); display: flex; align-items: center; gap: 8px; }
.cp-modal-icon { color: var(--amber); display: inline-flex; width: 18px; height: 18px; }
.cp-modal-icon svg { width: 100%; height: 100%; }
.modal .form-row { margin-bottom: 12px; }
.cp-modal-body, .modal p { font-size: 13px; color: var(--fg-dim); margin-bottom: 16px; line-height: 1.55; }
.modal-actions, .cp-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ─────────────── TOAST (topo) ─────────────── */
.toast {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
  left: 50% !important;
  bottom: auto !important;
  transform: translateX(-50%) translateY(-140px);
  background: var(--bg-elev-3);
  color: var(--fg);
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r2);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), opacity 220ms ease;
  z-index: 2147483600;
  max-width: 92vw;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.err { border-color: var(--border-accent); background: linear-gradient(180deg, var(--red-soft), var(--bg-elev-3)); color: #f5a3b4; }

/* ─────────────── UTILS ─────────────── */
.hidden { display: none !important; }
code {
  font-family: var(--mono);
  background: var(--bg-elev-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--fg-code);
  border: 1px solid var(--border);
}

/* Plans/billing */
.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .plans { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.plan-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-card .btn { margin-top: auto; }
.plan-card.current { border-color: var(--border-accent); box-shadow: 0 0 0 1px var(--border-accent); }
.plan-name { font-size: 16px; font-weight: 600; color: var(--fg); }
.plan-price { font-size: 22px; font-weight: 700; color: var(--fg); }
.plan-price small { font-size: 12px; font-weight: 500; color: var(--fg-muted); margin-left: 2px; }
.plan-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--fg-dim); }
.plan-features li { padding-left: 16px; position: relative; }
.plan-features li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 2px; background: var(--green); }

/* ─────────────── ADMIN ─────────────── */
.admin-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.admin-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--ease);
  white-space: nowrap;
}
.admin-tab:hover { color: var(--fg); background: var(--bg-elev-2); }
.admin-tab.active {
  background: var(--bg-elev-3);
  color: var(--fg);
  border-color: var(--border);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(6, 1fr); } }
.stat-box {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 12px 14px;
  min-width: 0;
}
.stat-box .label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.stat-box .value {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.data-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
  white-space: nowrap;
}
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--fg-dim);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-elev-2); }
.admin-plan-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 10px;
}
.admin-plan-card h3 { margin-bottom: 12px; }
.plan-editor {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px) { .plan-editor { grid-template-columns: repeat(2, 1fr); } }

/* ─────────────── AUTH (login / signup / mock-checkout) ─────────────── */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(800px 400px at 50% -10%, rgba(244,63,94,0.06), transparent 60%),
    var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: 28px 24px 24px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.auth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-rose), transparent);
  opacity: 0.7;
}
.auth-logo {
  text-align: center;
  margin-bottom: 22px;
}
.auth-logo .logo {
  width: 48px; height: 48px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev));
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--c-rose);
  font-family: var(--heading);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.auth-logo .logo svg { width: 22px; height: 22px; }
.auth-logo h1 {
  font-family: var(--heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin: 0;
}
.auth-logo p {
  color: var(--fg-muted);
  font-size: 12px;
  margin: 4px 0 0;
}
.auth-card .form-row { margin-bottom: 14px; }
.auth-card label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.auth-card input[type=email],
.auth-card input[type=password],
.auth-card input[type=text] {
  width: 100%;
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 10px 12px;
  font-size: 14px;
  transition: var(--ease);
}
.auth-card input:focus {
  outline: none;
  border-color: var(--c-rose);
  box-shadow: 0 0 0 3px var(--red-soft);
}
.auth-card .hint {
  color: var(--fg-muted);
  font-size: 12px;
  text-align: center;
  margin: 14px 0 0;
}
.auth-card .hint a { color: var(--c-rose); font-weight: 600; }
.auth-card .hint a:hover { text-decoration: underline; }

/* ─────────────── CLOUD BOT (floating chat) ─────────────── */
#__cloudbot { position: fixed; z-index: 9999; bottom: 16px; right: 16px; font-family: inherit; }
.cb-fab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--c-rose) 0%, #be1638 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px rgba(244,63,94, 0.35), 0 0 0 1px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: var(--ease);
}
.cb-fab:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(244,63,94, 0.45), 0 0 0 1px rgba(0,0,0,0.4); }
.cb-fab .cb-fab-ico { display: inline-flex; width: 18px; height: 18px; }
.cb-fab .cb-fab-ico svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  #__cloudbot { bottom: 12px; right: 12px; }
  .cb-fab .cb-fab-label { display: none; }
  .cb-fab { padding: 14px; border-radius: 50%; }
}
.cb-panel {
  position: fixed; z-index: 9999;
  bottom: 78px; right: 16px;
  width: 360px; max-width: calc(100vw - 24px);
  height: 520px; max-height: calc(100vh - 100px);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(244,63,94,0.15);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: cbpop 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cbpop { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.cb-panel.hidden { display: none; }
@media (max-width: 640px) {
  .cb-panel { bottom: 74px; right: 12px; left: 12px; width: auto; height: 70vh; }
}
.cb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(244,63,94,0.18), rgba(244,63,94,0.05));
  border-bottom: 1px solid var(--border);
}
.cb-head-title { display: flex; align-items: center; gap: 10px; }
.cb-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-rose), #be1638);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.cb-avatar svg { width: 18px; height: 18px; }
.cb-head-name { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--fg); }
.cb-head-sub { font-size: 11px; color: var(--fg-muted); margin-top: 2px; }
.cb-close {
  background: transparent; border: none; color: var(--fg-dim);
  cursor: pointer; padding: 6px; border-radius: 6px;
  display: inline-flex; align-items: center;
}
.cb-close:hover { color: var(--fg); background: var(--bg-elev-2); }
.cb-close svg { width: 18px; height: 18px; }
.cb-messages {
  flex: 1; overflow-y: auto;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  background: var(--bg);
  font-size: 13px; line-height: 1.5;
}
.cb-msg {
  max-width: 85%; padding: 10px 12px; border-radius: 12px;
  white-space: pre-wrap; word-wrap: break-word;
}
.cb-msg-bot {
  align-self: flex-start;
  background: var(--bg-elev-2); color: var(--fg);
  border: 1px solid var(--border);
  border-top-left-radius: 4px;
}
.cb-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--c-rose), #be1638); color: #fff;
  border-top-right-radius: 4px;
}
.cb-msg.cb-typing { opacity: 0.65; font-style: italic; }
.cb-msg.cb-err { background: rgba(244,63,94,0.12); border-color: rgba(244,63,94,0.35); color: #f5c4cf; }
.cb-input-row {
  display: flex; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--border);
  background: var(--bg-elev);
}
.cb-input-row input {
  flex: 1; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 14px; font-size: 13px;
}
.cb-input-row input:focus { outline: none; border-color: var(--c-rose); box-shadow: 0 0 0 3px var(--red-soft); }
.cb-send {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-rose), #be1638);
  color: #fff; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--ease);
}
.cb-send:hover:not(:disabled) { transform: scale(1.05); }
.cb-send:disabled { opacity: 0.5; cursor: wait; }
.cb-send svg { width: 16px; height: 16px; }
.cb-hint { font-size: 10px; color: var(--fg-muted); text-align: center; padding: 6px 0 8px; background: var(--bg-elev); letter-spacing: 0.04em; }

/* ─────────────── MODAL HELPERS (head/body/foot) ─────────────── */
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: -4px 0 12px;
}
.modal-head h3 { margin: 0; }
.modal-close {
  background: transparent; border: none; color: var(--fg-dim);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.modal-close:hover { background: var(--bg-elev-2); color: var(--fg); }
.modal-body { font-size: 13px; color: var(--fg); margin-bottom: 16px; }
.modal-body .lbl {
  display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fg-muted); margin-bottom: 5px;
}
.modal-body input[type=text],
.modal-body .fm-sel {
  width: 100%; background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--r2);
  padding: 8px 10px; font-size: 13px;
}
.modal-body input[type=text]:focus,
.modal-body .fm-sel:focus {
  outline: none; border-color: var(--c-rose); box-shadow: 0 0 0 3px var(--red-soft);
}
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; }

/* ─────────────── ADMIN TOOLS ─────────────── */
.admin-tools {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px;
}
.admin-search {
  flex: 1; min-width: 180px;
  background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--r2);
  padding: 8px 12px; font-size: 13px;
}
.admin-search:focus {
  outline: none; border-color: var(--c-rose); box-shadow: 0 0 0 3px var(--red-soft);
}
.new-user-form {
  background: var(--bg-elev);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  padding: 14px;
  margin-bottom: 14px;
  display: grid; gap: 10px;
}
.new-user-form.hidden { display: none; }
.new-user-form .form-row {
  display: flex; flex-direction: column; gap: 6px; margin: 0;
}
.new-user-form label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fg-muted);
}
.new-user-form input[type=text],
.new-user-form input[type=email],
.new-user-form select {
  background: var(--bg-elev-2); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--r2);
  padding: 7px 10px; font-size: 13px;
}
.tbl-sel {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: var(--r2); color: var(--fg);
  padding: 4px 8px; font-size: 12px;
}

/* ─────────────── SMART PAIRING IA BADGE ─────────────── */
.pairing-ia-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  margin: 14px 18px 0;
  background: linear-gradient(90deg, rgba(244,63,94,0.10), rgba(244,63,94,0.02));
  border: 1px solid rgba(244,63,94,0.35);
  border-radius: var(--r2);
  font-size: 12.5px; font-weight: 600;
  color: var(--c-rose);
  line-height: 1.4;
}
.pairing-ia-badge.hidden { display: none; }
.pairing-ia-badge[data-mode="qr"] {
  color: #4ade80;
  border-color: rgba(74,222,128,0.3);
  background: linear-gradient(90deg, rgba(74,222,128,0.08), rgba(74,222,128,0.02));
}
.pairing-ia-badge[data-mode="number"] {
  color: #60a5fa;
  border-color: rgba(96,165,250,0.3);
  background: linear-gradient(90deg, rgba(96,165,250,0.08), rgba(96,165,250,0.02));
}
.pairing-ia-badge .ico { width: 14px; height: 14px; }
.pairing-qr-note {
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px dashed var(--border2);
  border-radius: var(--r2);
  margin: 10px 18px;
}
.pairing-qr-note.hidden { display: none; }
/* QR card com imagem real do QR (gerada server-side via pacote qrcode) */
.pairing-qr-card {
  margin: 12px 18px 6px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(34,197,94,0.06), rgba(34,197,94,0.01));
  border: 1px solid rgba(34,197,94,0.28);
  border-radius: var(--r2);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.08), 0 8px 24px rgba(0,0,0,0.28);
}
.pairing-qr-card.hidden { display: none; }
.pairing-qr-card-inner {
  display: flex;
  gap: 16px;
  align-items: center;
}
.pairing-qr-card a { display: inline-block; text-decoration: none; }
.pairing-qr-card img {
  flex-shrink: 0;
  width: 320px;
  height: 320px;
  max-width: 100%;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.1);
  image-rendering: pixelated;
  cursor: pointer;
  transition: transform .15s ease;
}
.pairing-qr-card a:hover img {
  transform: scale(1.03);
}
.pairing-qr-card-meta { flex: 1; min-width: 0; }
.pairing-qr-card-meta .hint {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.85) !important;
}
.pairing-card.pairing-wide {
  width: min(92vw, 760px) !important;
}
@media (max-width: 760px) {
  .pairing-card.pairing-wide .pairing-qr-card-inner { flex-direction: column; align-items: stretch; }
  .pairing-card.pairing-wide .pairing-qr-card img { width: 100%; height: auto; aspect-ratio: 1/1; margin: 0 auto; }
  .pairing-card.pairing-wide .pairing-qr-card-meta { text-align: center; }
}
@media (max-width: 640px) {
  .pairing-qr-card-inner { flex-direction: column; align-items: stretch; }
  .pairing-qr-card img { width: 100%; height: auto; aspect-ratio: 1/1; margin: 0 auto; }
  .pairing-qr-card-meta { text-align: center; }
}

/* steps mais arejado */
.pairing-card .pairing-head { padding: 10px 16px !important; }
.pairing-card .pairing-head h2 { font-size: 14px; margin: 0; }

/* ─────────────── DEPLOY INFO + PROGRESS ─────────────── */
.deploy-info {
  display: grid; gap: 8px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--c-rose);
  border-radius: var(--r2);
  margin-bottom: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-muted);
}
.deploy-info-item b { color: var(--fg); font-weight: 600; }
.deploy-info-item code {
  background: var(--bg-elev-2);
  padding: 1px 6px; border-radius: 4px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--c-rose);
}
.deploy-progress {
  margin-top: 14px;
  padding: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r2);
}
.deploy-progress.hidden { display: none; }
.deploy-progress-bar {
  position: relative;
  height: 10px;
  background: var(--bg-elev-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.deploy-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #60a5fa 0%, #818cf8 50%, #a855f7 100%);
  border-radius: 999px;
  transition: width .25s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 0 16px rgba(129,140,248,0.45);
}
/* s35: brilho animado enquanto upload acontece — só visível enquanto .deploy-progress
   estiver visível (not .done). Pseudo-elemento no bar pra não sujar o DOM. */
.deploy-progress-bar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  animation: uploadSheen 1.1s linear infinite;
  pointer-events: none;
}
.deploy-progress.done .deploy-progress-bar::after { display: none; }
.deploy-progress.done .deploy-progress-fill {
  background: linear-gradient(90deg, #22c55e, #4ade80);
  box-shadow: 0 0 16px rgba(34,197,94,0.5);
}
.deploy-progress.error .deploy-progress-bar::after { display: none; }
.deploy-progress.error .deploy-progress-fill {
  background: linear-gradient(90deg, #f43f5e, #fb7185);
  box-shadow: 0 0 16px rgba(244,63,94,0.5);
}
.deploy-progress-label {
  font-size: 12px;
  font-family: var(--mono);
  color: var(--fg-muted);
}

/* ─────────────── IA PROFUNDA (Devin) ─────────────── */
.ia-deep-card { border-color: rgba(244,63,94, 0.25); }
.badge-pro {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  padding: 3px 7px; border-radius: 4px;
  background: linear-gradient(90deg, #1e1e28, #101014);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  vertical-align: middle;
}
.ia-deep-sessions { display: grid; gap: 10px; margin-top: 14px; }
.ia-deep-session {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 12px 14px;
}
.ia-deep-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; flex-wrap: wrap;
}
.ia-deep-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.ia-deep-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ia-deep-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ia-deep-msg {
  background: var(--bg-elev-2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--fg-muted);
  max-height: 260px;
  overflow-y: auto;
}
.hint.err { color: var(--c-rose); }

/* ---- Localidade (cosmético) ---- */
.loc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg4);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
}
.loc-badge .loc-flag {
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
  color: var(--fg);
  letter-spacing: 0.5px;
}
.loc-badge .loc-txt { color: var(--fg); font-weight: 600; }
.loc-badge .loc-ping { opacity: 0.8; }

/* Seletor radio-grid de localidades (modal criar bot) */
.loc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.loc-grid label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 11.5px;
  transition: border-color 0.12s, background 0.12s;
}
.loc-grid label:hover { border-color: var(--border-strong, #444); }
.loc-grid label.active { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.06); }
.loc-grid label input[type="radio"] { display: none; }
.loc-grid label .loc-name { font-weight: 600; color: var(--fg); }
.loc-grid label .loc-pingv { font-family: var(--mono); font-size: 10px; color: var(--fg-muted); }
.loc-grid label .loc-pingv.good { color: #22c55e; }
.loc-grid label .loc-pingv.mid  { color: #f59e0b; }
.loc-grid label .loc-pingv.bad  { color: #f43f5e; }

/* Seletor de tipo de servidor (modal criar bot) */
.srv-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.srv-type-grid label {
  display: block;
  padding: 6px 6px;
  border: 1px solid var(--border, #27272a);
  border-radius: 7px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  background: var(--bg-elev, #111113);
  line-height: 1.2;
  text-align: center;
}
.srv-type-grid label:hover { border-color: var(--border-strong, #444); }
.srv-type-grid label.active { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.06); }
.srv-type-grid label input[type="radio"] { display: none; }
.srv-type-grid label .srv-type-name { display: block; font-weight: 600; font-size: 11px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-type-grid label .srv-type-desc { display: none; }
@media (min-width: 640px) {
  .srv-type-grid { gap: 8px; }
  .srv-type-grid label { padding: 10px 12px; text-align: left; }
  .srv-type-grid label .srv-type-name { font-size: 13px; white-space: normal; }
  .srv-type-grid label .srv-type-desc { display: block; font-size: 11px; color: var(--fg-muted); margin-top: 2px; white-space: normal; }
}

/* ---- Plan tabs (criar bot — Normal / Teste) ---- */
.plan-tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.plan-tab {
  background: var(--bg2, #141414);
  color: var(--fg-muted, #888);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
  font-family: inherit;
}
.plan-tab:hover { border-color: var(--border-strong, #444); color: var(--fg, #fff); }
.plan-tab.active {
  border-color: var(--c-rose, #f43f5e);
  background: rgba(244,63,94,0.08);
  color: var(--fg, #fff);
}

/* ---- Plan cards (criar bot) ---- */
.plan-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.plan-grid label.plan-card {
  display: grid;
  grid-template-columns: minmax(62px, auto) 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 7px;
  padding: 6px 9px;
  background: var(--bg2, #141414);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
  line-height: 1.2;
  min-height: 0;
}
.plan-grid label.plan-card:hover { border-color: var(--border-strong, #444); }
.plan-grid label.plan-card.active { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.06); }
.plan-grid label.plan-card input[type="radio"] { display: none; }
.plan-grid .plan-head { display: contents; }
.plan-grid .plan-name { font-weight: 600; font-size: 12px; color: var(--fg, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-grid .plan-price { font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim, #aaa); white-space: nowrap; text-align: right; justify-self: end; }
.plan-grid .plan-price .u { opacity: .55; font-size: 9px; }
.plan-grid .plan-specs {
  display: flex; gap: 6px;
  font-size: 10px;
  color: var(--fg-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--mono);
}
.plan-grid .plan-specs strong { color: var(--fg-dim, #bbb); font-weight: 500; }
.plan-grid .plan-desc { display: none; }
@media (min-width: 720px) {
  .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
  .plan-grid label.plan-card { display: block; padding: 10px 12px; min-height: 0; }
  .plan-grid .plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
  .plan-grid .plan-name { font-size: 13px; }
  .plan-grid .plan-price { font-size: 11.5px; text-align: left; justify-self: auto; }
  .plan-grid .plan-specs { font-size: 11px; gap: 10px; margin-top: 4px; flex-wrap: wrap; white-space: normal; }
  .plan-grid .plan-specs strong { color: var(--fg, #fff); font-weight: 600; }
}

/* ---- Plan badge (header do bot / card do dashboard) ---- */
.plan-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: rgba(59,130,246,0.12);
  color: #60a5fa;
  border: 1px solid rgba(59,130,246,0.3);
  font-family: var(--mono);
}
.plan-badge[data-tier="free"]   { background: rgba(148,163,184,0.12); color: #94a3b8; border-color: rgba(148,163,184,0.3); }
.plan-badge[data-tier="basic"]  { background: rgba(34,197,94,0.10);   color: #4ade80; border-color: rgba(34,197,94,0.3); }
.plan-badge[data-tier="normal"] { background: rgba(59,130,246,0.12);  color: #60a5fa; border-color: rgba(59,130,246,0.3); }
.plan-badge[data-tier="pro"]    { background: rgba(168,85,247,0.12);  color: #c084fc; border-color: rgba(168,85,247,0.3); }
.plan-badge[data-tier="ultra"]  { background: rgba(245,158,11,0.12);  color: #fbbf24; border-color: rgba(245,158,11,0.35); }

/* ---- Pedidos de acesso (dono aprova/nega) ---- */
.access-req-banner {
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.access-req-banner .arb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #fbbf24;
  font-size: 12px;
}
.access-req-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
}
.access-req-item .ari-line1 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--fg);
}
.access-req-item .ari-email { font-family: var(--mono); color: var(--c-rose); }
.access-req-item .ari-bot { font-weight: 600; }
.access-req-item .ari-reason {
  color: var(--fg-muted);
  font-size: 11px;
  font-style: italic;
  word-break: break-word;
}
.access-req-item .ari-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* ---- Toggle "permitir admins" na config ---- */
.admin-access-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.admin-access-row .aar-text { flex: 1; min-width: 0; }
.admin-access-row .aar-text strong { display: block; font-size: 12.5px; color: var(--fg); margin-bottom: 2px; }
.admin-access-row .aar-text span { font-size: 11px; color: var(--fg-muted); }

/* Ban pill na tabela admin */
.badge-banned {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(220,38,38,0.18);
  color: var(--c-rose);
  border: 1px solid rgba(220,38,38,0.4);
  text-transform: uppercase;
}

/* ─────────────── SETTINGS TABS ─────────────── */
.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
  background: transparent;
  border: 0;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: var(--ease);
  font-family: inherit;
}
.settings-tab:hover { color: var(--fg); }
.settings-tab.active { color: #fff; border-bottom-color: #fff; }
.settings-panel { display: none; }
.settings-panel.active { display: block; }

/* ─────────────── PROFILE HEADER ─────────────── */
.profile-head {
  display: flex;
  gap: 14px;
  align-items: center;
}
.profile-avatar-big {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-rose), var(--red-dim));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700;
  flex-shrink: 0;
  font-family: var(--mono);
}
.profile-head-info { min-width: 0; flex: 1; }
.profile-email { font-size: 14px; font-weight: 600; color: var(--fg); word-break: break-word; }
.profile-plan { font-size: 12px; color: var(--fg-dim); text-transform: uppercase; margin-top: 2px; letter-spacing: 0.5px; }
.profile-created { font-size: 11px; color: var(--fg-muted); margin-top: 4px; }

/* ─────────────── PAYMENT PLACEHOLDER ─────────────── */
.pay-placeholder {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px;
  background: var(--bg-elev-2);
  border-radius: var(--r2);
  border: 1px dashed var(--border-strong);
}
.pay-placeholder-logo {
  font-size: 36px; font-weight: 300;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bg-elev-3);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-dim);
  flex-shrink: 0;
}
.pay-placeholder-text strong { display: block; font-size: 13px; color: var(--fg); margin-bottom: 4px; }
.pay-placeholder-text p { font-size: 12px; color: var(--fg-muted); line-height: 1.5; }

/* ─────────────── MSG LIST / THREAD ─────────────── */
.msg-list { display: flex; flex-direction: column; gap: 0; margin: 0 -18px; }
.msg-empty { padding: 28px 18px; text-align: center; font-size: 13px; color: var(--fg-muted); }
.msg-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 18px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  transition: var(--ease);
  text-decoration: none;
}
.msg-row:hover { background: var(--bg-elev-2); }
.msg-row:last-child { border-bottom: 0; }
.msg-row.unread { background: rgba(244,63,94, 0.05); }
.msg-row.unread::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-rose);
  margin-right: 6px;
}
.msg-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.msg-row-who { font-size: 13px; font-weight: 600; color: var(--fg); }
.msg-row-top time { font-size: 11px; color: var(--fg-muted); flex-shrink: 0; }
.msg-row-body {
  font-size: 12px; color: var(--fg-dim);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.thread-messages {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 480px; overflow-y: auto;
  padding: 4px 2px;
}
.thread-msg {
  padding: 10px 12px;
  border-radius: var(--r2);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  max-width: 86%;
}
.thread-msg.mine { margin-left: auto; background: rgba(244,63,94, 0.08); border-color: var(--border-accent); }
.thread-msg.admin { border-color: var(--border-strong); }
.thread-msg-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 11px; }
.thread-msg-head strong { font-size: 12px; color: var(--fg); font-weight: 600; }
.thread-msg-head time { color: var(--fg-muted); }
.thread-msg-body { font-size: 13px; color: var(--fg); white-space: pre-wrap; word-break: break-word; line-height: 1.4; }

textarea {
  width: 100%;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 10px 12px;
  border-radius: var(--r2);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 68px;
}
textarea:focus { outline: none; border-color: var(--border-accent); background: var(--bg-elev-3); }

/* ─────────────── CARD TYPE CHIP (dashboard list) ─────────────── */
.card-type-chip {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 6px;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-dim);
  background: var(--bg-elev-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  vertical-align: middle;
  font-family: var(--font);
}

/* ─────────────── URL CHIP (host + porta) ─────────────── */
.url-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
  max-width: 100%;
  overflow: hidden;
}
.url-chip:hover { border-color: var(--border-strong); background: var(--bg-elev-3); }
.url-chip .url-host { color: var(--fg); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.url-chip .url-port {
  color: var(--green); font-weight: 600;
  padding: 1px 6px;
  background: var(--green-dim);
  border-radius: 4px;
  margin-left: 2px;
  font-size: 11.5px;
  white-space: nowrap;
}
.url-chip .url-ext {
  width: 10px; height: 10px;
  background: currentColor;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>') center/contain no-repeat;
  opacity: .55;
  flex-shrink: 0;
}

/* ─────────────── DECORATIVE HAIRLINES ─────────────── */
.hr-thin {
  display: block; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12) 20%, rgba(255,255,255,0.12) 80%, transparent);
  border: 0; margin: 14px 0;
}
.hr-thin.thin-short {
  width: 48px; margin: 12px auto;
}
.deco-dots {
  display: flex; justify-content: center; gap: 6px; padding: 8px 0;
  color: var(--fg-muted);
}
.deco-dots::before, .deco-dots::after {
  content: ''; display: block; width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  align-self: center;
}

/* ─────────────── ERRO / STATUS PAGE ─────────────── */
.err-stage {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(255,255,255,0.04), transparent 55%),
    radial-gradient(800px 500px at 110% 110%, rgba(255,255,255,0.03), transparent 60%),
    var(--void);
  color: var(--fg);
}
.err-card {
  max-width: 520px; width: 100%;
  background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 40px 120px -40px rgba(0,0,0,0.9), 0 2px 0 rgba(255,255,255,0.03) inset;
  text-align: center;
}
.err-code {
  font-family: var(--font-display);
  font-size: clamp(64px, 18vw, 128px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg);
  margin-bottom: 6px;
  text-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.err-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  margin-bottom: 10px;
}
.err-body { color: var(--fg-dim); font-size: 14px; line-height: 1.6; margin-bottom: 22px; }
.err-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ─────────────── AUTH (login/signup/forgot) REDESIGN ─────────────── */
.auth-stage {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px 18px;
  background:
    radial-gradient(1200px 800px at 100% 0%, rgba(59,130,246,0.09), transparent 60%),
    radial-gradient(900px 700px at 0% 100%, rgba(220,38,38,0.08), transparent 60%),
    var(--void);
  position: relative; overflow: hidden;
}
/* camada 1 — aurora de gradientes grandes animando lentamente */
.auth-stage::before {
  content: '';
  position: absolute; inset: -30% -10%;
  background:
    radial-gradient(560px 420px at 20% 30%, rgba(96,165,250,0.18), transparent 58%),
    radial-gradient(480px 400px at 85% 75%, rgba(236,72,153,0.14), transparent 62%),
    radial-gradient(420px 380px at 50% 110%, rgba(34,197,94,0.12), transparent 68%),
    radial-gradient(360px 280px at 75% 15%, rgba(250,204,21,0.10), transparent 64%);
  filter: blur(18px);
  z-index: 0;
  animation: authAurora 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
/* camada 2 — grid muito sutil, com parallax devagar */
.auth-stage::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(closest-side at 50% 50%, #000 45%, transparent 85%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 45%, transparent 85%);
  z-index: 0;
  pointer-events: none;
  animation: authGridDrift 40s linear infinite;
}
@keyframes authAurora {
  0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg);      opacity: .85; }
  50%  { transform: translate3d(-18px,22px,0) scale(1.08) rotate(6deg); opacity: 1; }
  100% { transform: translate3d(14px,-10px,0) scale(1.04) rotate(-4deg); opacity: .9; }
}
@keyframes authGridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 60px 60px, 60px 60px; }
}
/* orbs coloridos flutuando no fundo */
.auth-stage .auth-orbs {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.auth-stage .auth-orbs .o {
  position: absolute; border-radius: 50%;
  filter: blur(40px); opacity: .55;
  will-change: transform;
}
.auth-stage .auth-orbs .o1 {
  width: 260px; height: 260px; left: -70px; top: 8%;
  background: radial-gradient(circle, rgba(96,165,250,0.55), transparent 70%);
  animation: authOrbA 14s ease-in-out infinite alternate;
}
.auth-stage .auth-orbs .o2 {
  width: 320px; height: 320px; right: -90px; top: 40%;
  background: radial-gradient(circle, rgba(236,72,153,0.5), transparent 70%);
  animation: authOrbB 18s ease-in-out infinite alternate;
}
.auth-stage .auth-orbs .o3 {
  width: 320px; height: 320px; left: 25%; bottom: -60px;
  background: radial-gradient(circle, rgba(34,197,94,0.45), transparent 70%);
  animation: authOrbC 16s ease-in-out infinite alternate;
}
@keyframes authOrbA {
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(40px,60px,0) scale(1.15); }
}
@keyframes authOrbB {
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50px,-40px,0) scale(1.12); }
}
@keyframes authOrbC {
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(30px,-50px,0) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-stage::before, .auth-stage::after,
  .auth-stage .auth-orbs .o { animation: none !important; }
}
.auth-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  background: linear-gradient(180deg, rgba(22,22,29,0.92), rgba(16,16,20,0.96));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 34px 28px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 40px 120px -50px rgba(0,0,0,0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: authRise .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes authRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.auth-brand {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 22px;
}
.auth-brand .auth-logo {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #a0a0aa);
  color: #08080b; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  box-shadow: 0 12px 40px -10px rgba(255,255,255,0.2), 0 2px 0 rgba(0,0,0,0.2) inset;
}
.auth-title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700;
  text-align: center; margin-bottom: 4px; letter-spacing: -0.02em;
}
.auth-sub { color: var(--fg-dim); font-size: 13px; text-align: center; margin-bottom: 24px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.auth-field label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--fg-muted); font-weight: 600;
}
.auth-field input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--fg);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.auth-field input:focus {
  outline: none;
  border-color: rgba(255,255,255,0.38);
  background: var(--bg-elev);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.05);
}
.auth-field input::placeholder { color: var(--fg-muted); }
.auth-btn-primary {
  width: 100%; margin-top: 8px;
  padding: 13px 16px;
  background: var(--white); color: var(--void);
  border: 1px solid var(--white);
  border-radius: 10px;
  font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 14px 40px -14px rgba(255,255,255,0.35);
}
.auth-btn-primary:hover { background: #f3f3f5; }
.auth-btn-primary:active { transform: translateY(1px); }
.auth-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.auth-btn-google {
  width: 100%; margin-top: 10px;
  padding: 12px 16px;
  background: transparent; color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-weight: 600; font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .18s ease, border-color .18s ease;
}
.auth-btn-google:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.28); }
.auth-btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-divider {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  color: var(--fg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  margin: 16px 0 8px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; display: block; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
.auth-foot {
  margin-top: 20px;
  text-align: center; font-size: 12.5px; color: var(--fg-dim);
}
.auth-foot a { color: var(--fg); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.22); padding-bottom: 1px; }
.auth-foot a:hover { border-bottom-color: var(--fg); }
.auth-note {
  margin-top: 18px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 11.5px; color: var(--fg-dim);
  text-align: center; line-height: 1.5;
}
.auth-note code {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; color: var(--fg);
}
.auth-err {
  margin-top: 12px; padding: 10px 12px;
  background: var(--red-soft); border: 1px solid rgba(244,63,94,0.32);
  color: #f5c4cf; border-radius: 8px; font-size: 12.5px; text-align: center;
  display: none;
}
.auth-err.show { display: block; animation: authShake .35s ease; }
@keyframes authShake {
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-4px); }
  75%{ transform: translateX(4px); }
}

/* ─────────────── PROFILE PAGE ─────────────── */
.profile-hero {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px;
  background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev));
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.profile-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px 200px at 20% 0%, rgba(255,255,255,0.04), transparent 60%);
  pointer-events: none;
}
.profile-avatar-row {
  display: flex; align-items: center; gap: 16px;
  position: relative; z-index: 1;
}
.profile-avatar {
  width: 72px; height: 72px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-elev-3), var(--bg-elev));
  border: 2px solid var(--border-strong);
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--fg); font-family: var(--font-display); font-weight: 800; font-size: 26px;
  position: relative;
}
.profile-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.profile-avatar-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-avatar-email {
  font-size: 15px; font-weight: 600; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.profile-avatar-meta {
  font-size: 12px; color: var(--fg-muted);
}
.profile-avatar-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  position: relative; z-index: 1;
}
.profile-avatar-actions .btn { flex: 1 1 auto; min-width: 120px; justify-content: center; }
.avatar-plan-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: var(--bg-elev-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em;
  color: var(--fg-dim); text-transform: uppercase; font-weight: 600;
  margin-top: 4px; width: fit-content;
}

/* ─────────────── PROFILE EXTRAS + 2FA ─────────────── */
.profile-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  font-size: 10px; letter-spacing: .08em; font-weight: 700;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font);
}
.profile-avatar-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-avatar-meta .profile-created { margin-top: 0; }

.profile-avatar-edit {
  position: absolute; right: 16px; top: 16px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  z-index: 2;
}
.profile-avatar-edit:hover { background: var(--bg-elev-3); border-color: var(--fg-dim); }
.profile-hero { position: relative; }
.profile-avatar-hint { font-size: 11px; color: var(--fg-muted); align-self: center; }

/* 2FA blocks */
.twofa-status-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700;
  border-radius: 999px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-family: var(--font);
}
.twofa-status-pill[data-state="on"] {
  background: rgba(46,196,122,0.14);
  border-color: rgba(46,196,122,0.36);
  color: var(--green);
}
.twofa-status-pill[data-state="off"] {
  background: rgba(244,63,94,0.10);
  border-color: rgba(244,63,94,0.30);
  color: var(--red);
}

.twofa-setup-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  align-items: start;
  margin-top: 10px;
}
@media (min-width: 640px) { .twofa-setup-grid { grid-template-columns: auto 1fr; } }
.twofa-qr-box {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  width: fit-content;
}
.twofa-qr-box img { width: 180px; height: 180px; display: block; }
.twofa-qr-box .hint { color: #555; }
.twofa-secret-box label { font-size: 12px; color: var(--fg-muted); display: block; margin-bottom: 6px; }
.twofa-secret {
  display: block;
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 14px; letter-spacing: .1em;
  color: var(--fg);
  word-break: break-all;
}

/* Node version chip (startup tab) */
.node-version-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.node-version-select {
  min-width: 120px;
  padding: 8px 10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  font-family: var(--font);
  font-size: 13px;
}

/* URL chip + decorative divider (item #11) */
.url-chip-row {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.url-chip-row .u-scheme { color: var(--fg-muted); }
.url-chip-row .u-host { color: var(--fg); }
.url-chip-row .u-port { color: var(--green); font-weight: 600; }
.deco-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
  margin: 14px 0;
}
.deco-line-sm {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 10px 0;
  opacity: .6;
}

/* ══════════════════════════════════════════════════════════════════
   SESSION 8 UPGRADES — Float blur + Overview tiles + Wordmark +
   Terminal taming + Progress + Toast v2.
   Tudo aqui é aditivo / override dos estilos antigos pra não quebrar.
   ══════════════════════════════════════════════════════════════════ */

/* ---- Glass surface base: usado por menu/popover/modal/bottom-sheet. */
.cp-glass {
  background: rgba(14,14,18,0.74) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 60px -12px rgba(0,0,0,0.75),
    0 4px 18px rgba(0,0,0,0.5);
}

/* ---- Menu (3 pontinhos) ---- */
.cp-menu-backdrop {
  background: rgba(4,4,8,0.45);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  animation: cp-fade-in 180ms cubic-bezier(.22,.61,.36,1);
}
@keyframes cp-fade-in { from { opacity: 0; } to { opacity: 1; } }

.cp-menu {
  background: rgba(14,14,18,0.78);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 24px 80px -18px rgba(0,0,0,0.85),
    0 6px 20px rgba(0,0,0,0.55);
  animation: cp-menu-in 200ms cubic-bezier(.22,.61,.36,1);
  transform-origin: top right;
}
@keyframes cp-menu-in {
  from { transform: translateY(-6px) scale(.97); opacity: 0; }
  to   { transform: translateY(0) scale(1);      opacity: 1; }
}
.cp-menu a, .cp-menu button {
  transition: background 140ms ease, color 140ms ease, transform 120ms ease;
}
.cp-menu a:hover, .cp-menu button:hover {
  background: rgba(255,255,255,0.05) !important;
  transform: translateX(1px);
}
.cp-menu svg {
  color: var(--fg-dim);
  transition: color 140ms ease;
}
.cp-menu a:hover svg, .cp-menu button:hover svg { color: var(--fg); }
.cp-menu .cp-menu-danger:hover {
  background: rgba(244,63,94,0.1) !important;
  color: #f5a3b4 !important;
}
.cp-menu .cp-menu-danger:hover svg { color: #f5a3b4 !important; }

/* ---- Popover (sino + caixa de mensagens) ---- */
.cp-pop {
  background: rgba(14,14,18,0.8);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 28px 80px -20px rgba(0,0,0,0.85),
    0 8px 24px rgba(0,0,0,0.55);
  animation: cp-pop-in 220ms cubic-bezier(.22,.61,.36,1);
  overflow: hidden;
  z-index: 95;
}
@keyframes cp-pop-in {
  from { transform: translateY(-8px) scale(.97); opacity: 0; }
  to   { transform: translateY(0) scale(1);      opacity: 1; }
}
.cp-pop-head {
  padding: 14px 14px 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cp-pop-head::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, #ffffff);
  box-shadow: 0 0 0 3px rgba(244,63,94,0.18);
  margin-right: 4px; flex-shrink: 0;
}
.cp-pop-close {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--fg-dim);
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 120ms ease;
  flex-shrink: 0;
}
.cp-pop-close:hover {
  background: rgba(244,63,94,0.12);
  border-color: rgba(244,63,94,0.35);
  color: #f5a3b4;
  transform: rotate(90deg);
}
.cp-pop-close:active { transform: rotate(90deg) scale(.94); }
.cp-pop-body { max-height: 52vh; }
.cp-pop-item {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 140ms ease;
  /* Reset button defaults (item pode ser <button> ou <a>) */
  -webkit-appearance: none; appearance: none;
  background: transparent;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--fg);
  font: inherit;
  text-decoration: none;
}
.cp-pop-item:hover { background: rgba(255,255,255,0.04); }
.cp-pop-item:focus-visible { outline: 2px solid var(--accent, #ffffff); outline-offset: -2px; }
.cp-pop-item-top {
  grid-column: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 600; margin-bottom: 2px;
  color: var(--fg);
}
.cp-pop-item-top time {
  font-size: 10.5px; color: var(--fg-muted); font-weight: 500;
  font-family: var(--mono); letter-spacing: .02em;
  flex-shrink: 0;
}
.cp-pop-item-body {
  grid-column: 2;
  font-size: 12px; color: var(--fg-dim); line-height: 1.45;
  white-space: normal; word-wrap: break-word; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.cp-pop-item-ico {
  grid-row: 1 / 3; grid-column: 1;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  display: grid; place-items: center;
  color: var(--fg-dim);
  flex-shrink: 0;
}
.cp-pop-item-ico svg { width: 14px; height: 14px; }
.cp-pop-item-unread .cp-pop-item-ico {
  background: rgba(244,63,94,0.1);
  border-color: rgba(244,63,94,0.28);
  color: #f5a3b4;
}
.cp-pop-item-unread .cp-pop-item-top span::before { display: none; }
.cp-pop-item-unread .cp-pop-item-top::after {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, #ffffff);
  box-shadow: 0 0 0 3px rgba(244,63,94,0.18);
  flex-shrink: 0;
}
.cp-pop-item { position: relative; padding-right: 36px; }
.cp-pop-item-del {
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.cp-pop-item:hover .cp-pop-item-del,
.cp-pop-item:focus-within .cp-pop-item-del,
.cp-pop-item-del:focus-visible {
  opacity: 1;
}
.cp-pop-item-del:hover, .cp-pop-item-del:focus-visible {
  background: rgba(244,63,94,0.12) !important;
  color: var(--red-bright, #ff4d4d) !important;
  outline: none;
}
.cp-pop-item-del svg { width: 14px; height: 14px; display: block; }
@media (hover: none) {
  .cp-pop-item-del { opacity: .55; }
}
.cp-pop-empty {
  padding: 28px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--fg-dim);
  font-size: 12px; line-height: 1.45;
}
.cp-pop-empty::before {
  content: '';
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.cp-pop-foot {
  padding: 10px;
  background: rgba(0,0,0,0.22);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cp-pop-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-weight: 600;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease;
}
.cp-pop-btn:hover {
  background: rgba(244,63,94,0.08);
  border-color: rgba(244,63,94,0.4);
  color: #f5a3b4;
  transform: translateY(-1px);
}

/* ---- Modal backdrop ---- */
.cp-modal-backdrop, .modal-backdrop {
  background: rgba(4,4,8,0.48) !important;
  backdrop-filter: blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
}
.modal, .cp-modal {
  background: rgba(16,16,22,0.92) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 30px 90px -20px rgba(0,0,0,0.9),
    0 8px 28px rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---- Bottom sheet (Files move/rename) ---- */
.cp-sheet, .fm-sheet {
  background: rgba(14,14,18,0.85) !important;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}

/* ══════════════════════════════════════════════
   TOPBAR — Wordmark animado + logo SVG
   ══════════════════════════════════════════════ */
.cp-topbar {
  background: rgba(8,8,11,0.7) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 12px 16px !important;
}
.cp-topbar-brand {
  gap: 10px !important;
  font-family: var(--font-display, 'Syne');
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -0.02em;
}
.cp-topbar-logo {
  width: 32px !important; height: 32px !important;
  border-radius: 9px !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 55%),
    linear-gradient(145deg, #1a1a22 0%, #0a0a10 100%) !important;
  border: 1px solid rgba(244,63,94,0.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(244,63,94,0.04),
    0 4px 14px rgba(244,63,94,0.14);
  color: #f5a3b4 !important;
  position: relative;
  overflow: hidden;
  font-size: 0 !important;
}
.cp-topbar-logo::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0%, rgba(244,63,94,0.25) 30%, transparent 60%);
  animation: cp-logo-spin 6s linear infinite;
  opacity: .6;
  pointer-events: none;
}
@keyframes cp-logo-spin { to { transform: rotate(360deg); } }
.cp-topbar-logo svg {
  position: relative; z-index: 1;
  width: 18px; height: 18px;
  filter: drop-shadow(0 1px 2px rgba(244,63,94,0.3));
}

.cp-topbar-word {
  background: linear-gradient(
    110deg,
    #ededf0 0%,
    #ffffff 35%,
    #f5a3b4 50%,
    #ffffff 65%,
    #ededf0 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: cp-word-sweep 6s ease-in-out infinite;
}
@keyframes cp-word-sweep {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.cp-topbar-version {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 600;
  color: #f5a3b4;
  padding: 3px 8px;
  background: rgba(244,63,94,0.08);
  border: 1px solid rgba(244,63,94,0.22);
  border-radius: 999px;
  margin-left: 6px;
  letter-spacing: .02em;
}

.cp-topbar-btn {
  border-color: rgba(255,255,255,0.07) !important;
  background: rgba(255,255,255,0.02) !important;
  transition: background 140ms ease, border-color 140ms ease, transform 120ms ease;
}
.cp-topbar-btn:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  transform: translateY(-1px);
}
.cp-topbar-btn:active { transform: translateY(0) scale(.96); }
.cp-topbar-dot {
  background: var(--accent, #ffffff) !important;
  box-shadow: 0 0 0 2px rgba(8,8,11,1), 0 0 10px rgba(244,63,94,0.5) !important;
}

/* ══════════════════════════════════════════════
   OVERVIEW — "Sab.APIs" inspired stat rows
   ══════════════════════════════════════════════ */
.cp-stat-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%),
    rgba(14,14,18,0.55);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 16px 18px 14px;
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}
.cp-stat-card::before {
  content: '';
  position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
.cp-stat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cp-stat-head-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-dim);
  display: inline-flex; align-items: center; gap: 8px;
}
.cp-stat-head-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green, #00ffb3);
  box-shadow: 0 0 0 3px rgba(0,255,179,0.18), 0 0 10px rgba(0,255,179,0.3);
  animation: cp-dot-pulse 2.2s ease-in-out infinite;
}
.cp-stat-head-dot[data-tone="off"]  { background: #6a6a75; box-shadow: 0 0 0 3px rgba(255,255,255,0.04); animation: none; }
.cp-stat-head-dot[data-tone="warn"] { background: #ffd166; box-shadow: 0 0 0 3px rgba(255,209,102,0.18), 0 0 10px rgba(255,209,102,0.3); }
.cp-stat-head-dot[data-tone="err"]  { background: var(--accent, #ffffff); box-shadow: 0 0 0 3px rgba(244,63,94,0.18), 0 0 10px rgba(244,63,94,0.3); }
@keyframes cp-dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.12); opacity: .75; }
}

.cp-stat-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.cp-stat-row:last-child { border-bottom: none; padding-bottom: 2px; }
.cp-stat-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim);
  min-width: 0;
}
.cp-stat-label .cp-ico {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: rgba(244,63,94,0.08);
  border: 1px solid rgba(244,63,94,0.22);
  color: #f5a3b4;
  flex-shrink: 0;
}
.cp-stat-label .cp-ico svg { width: 13px; height: 13px; }
.cp-stat-label .cp-ico[data-tone="info"]  { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: var(--fg-dim); }
.cp-stat-label .cp-ico[data-tone="ok"]    { background: rgba(0,255,179,0.08);  border-color: rgba(0,255,179,0.22);  color: #5eead4; }
.cp-stat-label .cp-ico[data-tone="warn"]  { background: rgba(255,209,102,0.08); border-color: rgba(255,209,102,0.22); color: #fbbf24; }
.cp-stat-value {
  font-family: var(--font-display, 'Syne'), var(--font);
  font-size: 22px; font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.cp-stat-value-sub {
  font-size: 12px; color: var(--fg-muted);
  font-weight: 500; margin-left: 6px;
}
.cp-stat-bar {
  grid-column: 1 / -1;
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  margin-top: 8px;
  overflow: hidden;
  position: relative;
}
.cp-stat-bar::before {
  content: '';
  display: block;
  height: 100%;
  width: var(--cp-pct, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent, #ffffff), #f5a3b4);
  box-shadow: 0 0 12px rgba(244,63,94,0.35);
  transition: width 600ms cubic-bezier(.22,.61,.36,1);
}
.cp-stat-bar[data-tone="ok"]::before   { background: linear-gradient(90deg, #00ffb3, #5eead4); box-shadow: 0 0 12px rgba(0,255,179,0.35); }
.cp-stat-bar[data-tone="warn"]::before { background: linear-gradient(90deg, #ffd166, #fbbf24); box-shadow: 0 0 12px rgba(255,209,102,0.35); }
.cp-stat-bar[data-tone="off"]::before  { background: rgba(255,255,255,0.15); box-shadow: none; }

.cp-stat-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-family: var(--mono); font-size: 11px; color: var(--fg-muted);
}

/* ══════════════════════════════════════════════
   SUBNAV — segmented rail
   ══════════════════════════════════════════════ */
.subnav {
  background: rgba(14,14,18,0.6) !important;
  border-color: rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px !important;
  gap: 2px !important;
  border-radius: 12px !important;
}
.subnav-btn {
  border-radius: 9px !important;
  padding: 9px 14px !important;
  font-weight: 600 !important;
  color: var(--fg-muted) !important;
  position: relative;
}
.subnav-btn .ico {
  opacity: 0.55 !important;
}
.subnav-btn + .subnav-btn::before {
  content: '';
  position: absolute;
  left: -2px; top: 10px; bottom: 10px;
  width: 1px;
  background: rgba(255,255,255,0.04);
}
.subnav-btn.active + .subnav-btn::before,
.subnav-btn:hover + .subnav-btn::before,
.subnav-btn.active::before,
.subnav-btn:hover::before { opacity: 0; }
.subnav-btn.active {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--fg) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(244,63,94,0.08),
    0 4px 14px rgba(0,0,0,0.3) !important;
}
.subnav-btn.active .ico {
  opacity: 1 !important;
  color: #f5a3b4 !important;
}

/* ══════════════════════════════════════════════
   LOGS (terminal) — paleta sóbria
   ══════════════════════════════════════════════ */
.logs-card {
  background: rgba(6,6,9,0.88) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.logs, pre.logs, #logs, #ovLogs {
  background: rgba(0,0,0,0.35) !important;
  color: #d1d1d8;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
}
.logs .log-line,
#logs .log-line {
  padding: 2px 14px 2px 16px;
  position: relative;
  border-left: 2px solid transparent;
}
.logs .log-line[data-kind="err"],   #logs .log-line.err,   .logs .log-line.err   { border-left-color: rgba(244,63,94,0.55);   color: #ffb3bd; background: rgba(244,63,94,0.04); }
.logs .log-line[data-kind="warn"],  #logs .log-line.warn,  .logs .log-line.warn  { border-left-color: rgba(255,209,102,0.55);  color: #ffe1a4; }
.logs .log-line[data-kind="info"],  #logs .log-line.info,  .logs .log-line.info  { border-left-color: rgba(96,165,250,0.45);   color: #d1d1d8; }
.logs .log-line[data-kind="ok"],    #logs .log-line.ok,    .logs .log-line.ok    { border-left-color: rgba(0,255,179,0.45);    color: #cfeee4; }
.logs .log-line[data-kind="ai"],    #logs .log-line.ai,    .logs .log-line.ai    { border-left-color: rgba(192,132,252,0.5);   color: #e0d2f3; }
.logs .log-ts { color: #6a6a75; margin-right: 6px; user-select: none; }
.logs .log-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 8px;
  letter-spacing: .06em;
  background: rgba(255,255,255,0.04);
  color: var(--fg-dim);
  border: 1px solid rgba(255,255,255,0.06);
}
.logs .log-tag.err  { background: rgba(244,63,94,0.1);    color: #f5a3b4; border-color: rgba(244,63,94,0.25); }
.logs .log-tag.warn { background: rgba(255,209,102,0.08); color: #fbbf24; border-color: rgba(255,209,102,0.22); }
.logs .log-tag.ok   { background: rgba(0,255,179,0.08);   color: #5eead4; border-color: rgba(0,255,179,0.22); }
.logs .log-tag.ai   { background: rgba(192,132,252,0.08); color: #d8b4fe; border-color: rgba(192,132,252,0.22); }

/* Toning: reduz cores ANSI saturadas em spans herdados */
.logs [style*="color:#ff0000"], .logs [style*="color: #ff0000"],
.logs [style*="color:#f00"] { color: #f5a3b4 !important; }
.logs [style*="color:#00ff00"], .logs [style*="color: #00ff00"],
.logs [style*="color:#0f0"] { color: #5eead4 !important; }
.logs [style*="color:#0000ff"], .logs [style*="color: #0000ff"] { color: #93c5fd !important; }
.logs [style*="color:#ffff00"], .logs [style*="color: #ffff00"],
.logs [style*="color:#ff0"] { color: #fde68a !important; }
.logs [style*="color:#ff00ff"], .logs [style*="color: #ff00ff"] { color: #e9a3ff !important; }
.logs [style*="color:#00ffff"], .logs [style*="color: #00ffff"] { color: #a5f3fc !important; }

/* ══════════════════════════════════════════════
   PROGRESS — upload / zip / deploy
   ══════════════════════════════════════════════ */
.cp-progress {
  width: 100%; height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
  position: relative;
}
.cp-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent, #ffffff), #f5a3b4);
  box-shadow: 0 0 10px rgba(244,63,94,0.45);
  border-radius: inherit;
  transition: width 320ms cubic-bezier(.22,.61,.36,1);
  position: relative;
  overflow: hidden;
}
.cp-progress-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.35) 50%,
    transparent 100%
  );
  background-size: 50% 100%;
  animation: cp-shimmer 1.2s linear infinite;
}
@keyframes cp-shimmer {
  from { background-position: -60% 0; }
  to   { background-position: 160% 0; }
}
.cp-progress[data-indeterminate="true"] .cp-progress-fill {
  width: 40% !important;
  animation: cp-indet 1.3s ease-in-out infinite;
}
@keyframes cp-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(260%); }
}

/* Progress inside a toast-like pill */
.cp-progress-pill {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 72px); left: 50%;
  bottom: auto;
  transform: translateX(-50%) translateY(-80px);
  background: rgba(14,14,18,0.88);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 20px 60px -18px rgba(0,0,0,0.85),
    0 6px 18px rgba(0,0,0,0.5);
  padding: 12px 16px;
  min-width: 280px;
  max-width: 90vw;
  z-index: 2100;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column; gap: 8px;
}
.cp-progress-pill.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (min-width: 700px) {
  .cp-progress-pill { top: calc(env(safe-area-inset-top, 0px) + 80px); }
}
.cp-progress-pill.done .cp-progress-fill {
  animation: none;
  background: linear-gradient(90deg, #00ffb3, #5eead4);
  box-shadow: 0 0 10px rgba(0,255,179,0.45);
}
.cp-progress-pill.done .cp-progress-fill::after { display: none; }
.cp-progress-pill.err .cp-progress-fill {
  background: linear-gradient(90deg, #ffffff, #f5a3b4);
  animation: none;
}
.cp-progress-pill-top {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--fg);
}
.cp-progress-pill-ico {
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(244,63,94,0.1);
  border: 1px solid rgba(244,63,94,0.28);
  color: #f5a3b4;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.cp-progress-pill.done .cp-progress-pill-ico {
  background: rgba(0,255,179,0.08);
  border-color: rgba(0,255,179,0.28);
  color: #5eead4;
}
.cp-progress-pill-ico svg { width: 14px; height: 14px; }
.cp-progress-pill-msg { flex: 1; min-width: 0; font-weight: 600; }
.cp-progress-pill-pct {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  color: var(--fg-dim);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   TOAST v2 — slide + icon + glass
   ══════════════════════════════════════════════ */
.toast {
  background: rgba(14,14,18,0.88) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  padding-left: 42px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 20px 60px -18px rgba(0,0,0,0.85),
    0 6px 18px rgba(0,0,0,0.55) !important;
  font-weight: 600;
  min-width: 220px;
  position: relative;
  color: var(--fg) !important;
}
.toast::before {
  content: '';
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 7px;
  background: rgba(0,255,179,0.1);
  border: 1px solid rgba(0,255,179,0.28);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235eead4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}
.toast.err {
  color: #ffb3bd !important;
  background: rgba(22,10,14,0.92) !important;
  border-color: rgba(244,63,94,0.4) !important;
}
.toast.err::before {
  background-color: rgba(244,63,94,0.12);
  border-color: rgba(244,63,94,0.4);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7388' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
}
.toast.info {
  background: rgba(10,14,22,0.92) !important;
  border-color: rgba(96,165,250,0.35) !important;
  color: #cfe0fa !important;
}
.toast.info::before {
  background-color: rgba(96,165,250,0.12);
  border-color: rgba(96,165,250,0.4);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
}
.toast.show {
  transform: translateX(-50%) translateY(0) !important;
}

/* ---- Hide the old decorative text letter on logo when SVG is inside ---- */
.cp-topbar-logo:has(svg) { color: transparent; }

/* ══════════════════════════════════════════════
   OVERVIEW PANE — repaginada sem mexer em HTML
   ══════════════════════════════════════════════ */
/* IMPORTANTE: usa .active pra não quebrar a troca de abas */
.tab-pane.active[data-pane="overview"] { display: flex; flex-direction: column; gap: 12px; }
.tab-pane[data-pane="overview"] > .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 70%),
    rgba(14,14,18,0.6) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
  padding: 6px 0 2px !important;
  overflow: hidden;
  position: relative;
}
.tab-pane[data-pane="overview"] > .card::before {
  content: '';
  position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
/* esconde linha de Slug (usuário pediu) */
.tab-pane[data-pane="overview"] .def-item:has(#ovSlug) { display: none !important; }
.tab-pane[data-pane="overview"] .def-list {
  padding: 4px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tab-pane[data-pane="overview"] .def-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 11px 14px !important;
  border-bottom: 1px dashed rgba(255,255,255,0.05) !important;
  min-width: 0;
}
.tab-pane[data-pane="overview"] .def-item:last-child { border-bottom: none !important; }
.tab-pane[data-pane="overview"] .def-label {
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  max-width: 42%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-pane[data-pane="overview"] .def-label::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(244,63,94,0.5);
  box-shadow: 0 0 8px rgba(244,63,94,0.35);
  flex-shrink: 0;
}
.tab-pane[data-pane="overview"] .def-value {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end !important;
  text-align: right;
  font-family: var(--mono) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--fg) !important;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block !important;
  line-height: 1.4 !important;
}
/* Nome, Comando start e Criado em em fonte normal (display) */
.tab-pane[data-pane="overview"] #ovName,
.tab-pane[data-pane="overview"] #ovStart,
.tab-pane[data-pane="overview"] #ovCreated {
  font-family: var(--font-display, 'Syne'), var(--font) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}
/* status + IA + auto-restart viram pill-like */
.tab-pane[data-pane="overview"] #ovStatus,
.tab-pane[data-pane="overview"] #ovAi,
.tab-pane[data-pane="overview"] #ovAuto {
  display: inline-flex !important;
  align-items: center; gap: 6px;
  font-family: var(--font) !important;
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px !important;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--fg);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}
.tab-pane[data-pane="overview"] #ovStatus::before,
.tab-pane[data-pane="overview"] #ovAi::before,
.tab-pane[data-pane="overview"] #ovAuto::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6a6a75;
  flex-shrink: 0;
}
/* status por valor (textContent heurístico) */
.tab-pane[data-pane="overview"] #ovStatus {
  color: var(--fg-dim);
}
/* CSS-only color hints — fallback via parent; JS pode adicionar data-tone depois */
.tab-pane[data-pane="overview"] #ovStatus[data-tone="ok"],
.tab-pane[data-pane="overview"] #ovAuto[data-tone="ok"],
.tab-pane[data-pane="overview"] #ovAi[data-tone="ok"] {
  background: rgba(0,255,179,0.08); border-color: rgba(0,255,179,0.25); color: #5eead4;
}
.tab-pane[data-pane="overview"] #ovStatus[data-tone="ok"]::before,
.tab-pane[data-pane="overview"] #ovAuto[data-tone="ok"]::before,
.tab-pane[data-pane="overview"] #ovAi[data-tone="ok"]::before {
  background: #00ffb3; box-shadow: 0 0 0 3px rgba(0,255,179,0.18), 0 0 8px rgba(0,255,179,0.4);
}
.tab-pane[data-pane="overview"] #ovStatus[data-tone="warn"]::before,
.tab-pane[data-pane="overview"] #ovAi[data-tone="warn"]::before {
  background: #ffd166; box-shadow: 0 0 0 3px rgba(255,209,102,0.18);
}
.tab-pane[data-pane="overview"] #ovStatus[data-tone="err"],
.tab-pane[data-pane="overview"] #ovAi[data-tone="err"] {
  background: rgba(244,63,94,0.08); border-color: rgba(244,63,94,0.3); color: #f5a3b4;
}
.tab-pane[data-pane="overview"] #ovStatus[data-tone="err"]::before {
  background: var(--accent, #ffffff); box-shadow: 0 0 0 3px rgba(244,63,94,0.2), 0 0 8px rgba(244,63,94,0.4);
}

/* Logs card dentro do overview */
.tab-pane[data-pane="overview"] .logs-card {
  background: rgba(6,6,9,0.88) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
}
.tab-pane[data-pane="overview"] .logs-head {
  padding: 12px 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.tab-pane[data-pane="overview"] .logs-head h2 {
  font-size: 11px;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--fg-dim) !important;
  display: inline-flex; align-items: center; gap: 8px;
}
.tab-pane[data-pane="overview"] .logs-head h2::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #00ffb3;
  box-shadow: 0 0 0 3px rgba(0,255,179,0.18), 0 0 10px rgba(0,255,179,0.35);
  animation: cp-dot-pulse 2.2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════
   Backdrop desfoque p/ popover (sino/mensagens)
   ══════════════════════════════════════════════ */
.cp-pop-backdrop {
  position: fixed; inset: 0;
  background: rgba(4,4,8,0.42);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  z-index: 94;
  opacity: 0;
  animation: cp-fade-in 180ms cubic-bezier(.22,.61,.36,1) forwards;
}
.cp-pop-backdrop-leave { animation: cp-fade-out 150ms cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes cp-fade-out { from { opacity: 1; } to { opacity: 0; } }

.cp-pop { z-index: 96 !important; }
.cp-pop-leave {
  animation: cp-pop-out 160ms cubic-bezier(.4,0,.6,1) forwards !important;
}
@keyframes cp-pop-out {
  from { transform: translateY(0) scale(1);  opacity: 1; }
  to   { transform: translateY(-6px) scale(.96); opacity: 0; }
}

/* garante que o botão X tem área clicável e SVG visível */
.cp-pop-close {
  min-width: 32px !important;
  min-height: 32px !important;
  width: 32px !important;
  height: 32px !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
  pointer-events: auto !important;
}
.cp-pop-close svg { width: 16px; height: 16px; display: block; pointer-events: none; }
.cp-pop-close span, .cp-pop-close * { pointer-events: none; }

/* ══════════════════════════════════════════════
   Cloud Bot — backdrop desfoque ao abrir
   ══════════════════════════════════════════════ */
.cb-backdrop {
  position: fixed; inset: 0;
  background: rgba(4,4,8,0.55);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  z-index: 69;
  opacity: 0;
  transition: opacity 180ms cubic-bezier(.22,.61,.36,1);
  pointer-events: auto;
}
.cb-backdrop.cb-backdrop-in { opacity: 1; }
.cb-panel { z-index: 70 !important; }
#__cbFab { z-index: 71 !important; }
.cb-close {
  min-width: 34px !important;
  min-height: 34px !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cb-close svg { pointer-events: none; }


/* ─────────────── Custom checkboxes (s11) ───────────────
   Alguns WebViews mobile ignoram accent-color e o ✓ nativo fica invisível.
   Substituo por um check desenhado em SVG que sempre aparece. */
.fm-row-check input[type="checkbox"],
.fm-bulk-check input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.cp-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: 6px;
  background: rgba(20,20,26,0.9);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  flex-shrink: 0;
  position: relative;
  margin: 0;
  vertical-align: middle;
}
.fm-row-check input[type="checkbox"]::before,
.fm-bulk-check input[type="checkbox"]::before,
.checkbox-inline input[type="checkbox"]::before,
.cp-check input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  transform: scale(0);
  transition: transform 140ms cubic-bezier(.22,.61,.36,1);
  background-color: #fff;
  clip-path: polygon(14% 48%, 0 62%, 38% 100%, 100% 20%, 86% 8%, 38% 72%);
}
.fm-row-check input[type="checkbox"]:checked,
.fm-bulk-check input[type="checkbox"]:checked,
.checkbox-inline input[type="checkbox"]:checked,
.cp-check input[type="checkbox"]:checked {
  background: var(--accent, #ffffff);
  border-color: var(--accent, #ffffff);
  box-shadow: 0 0 0 3px rgba(244,63,94,0.18);
}
.fm-row-check input[type="checkbox"]:checked::before,
.fm-bulk-check input[type="checkbox"]:checked::before,
.checkbox-inline input[type="checkbox"]:checked::before,
.cp-check input[type="checkbox"]:checked::before {
  transform: scale(1);
}
.fm-row-check input[type="checkbox"]:focus-visible,
.fm-bulk-check input[type="checkbox"]:focus-visible,
.checkbox-inline input[type="checkbox"]:focus-visible,
.cp-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent, #ffffff);
  outline-offset: 2px;
}

/* ─────────────── Integrations / API keys (s12) ─────────────── */
.auth-hint { color: rgba(255,255,255,0.45); font-weight: 400; font-size: 12px; margin-left: 4px; }

.glass-card {
  background: linear-gradient(180deg, rgba(20,20,26,0.72), rgba(14,14,18,0.82));
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04) inset;
}

.keys-list { display: flex; flex-direction: column; gap: 10px; }
.key-row {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px;
  background: rgba(18,18,22,0.55);
}
.key-row-top {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
  margin-bottom: 10px;
}
.key-name { font-weight: 600; font-size: 15px; }
.key-actions { display: flex; gap: 6px; }
.key-row-body { display: grid; gap: 6px; font-size: 13px; }
.key-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.key-meta .muted { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; color: rgba(255,255,255,0.42); }
.key-meta code {
  background: rgba(255,255,255,0.04);
  padding: 2px 6px;
  border-radius: 6px;
  font-family: var(--mono, JetBrains Mono, monospace);
  font-size: 12px;
  color: rgba(255,255,255,0.82);
}
.key-token { margin-top: 4px; }
.token-box {
  font-family: var(--mono, monospace);
  font-size: 13px;
  padding: 12px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(244,63,94,0.3);
  border-radius: 10px;
  word-break: break-all;
  user-select: all;
  white-space: pre-wrap;
}

.api-ex { display: grid; gap: 6px; }
.api-ex-row {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.api-ex-row code { font-family: var(--mono, monospace); font-size: 12px; }
.api-ex-method {
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.api-ex-method.m-get { color: #5eead4; }
.api-ex-method.m-post { color: #fbbf24; }

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
}
.btn-danger-ghost {
  background: transparent;
  border: 1px solid rgba(244,63,94,0.35);
  color: #ff9fa8;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
}

/* ─────────────── Dashboard greeting (s12) ─────────────── */
.dash-greet {
  margin: 10px 0 22px;
  display: grid;
  gap: 6px;
}
.dash-greet-hello {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(38px, 7.5vw, 72px);
  font-weight: 800;
  letter-spacing: -2.6px;
  line-height: 0.95;
  background: linear-gradient(120deg, #fff 0%, #a78bfa 40%, #38bdf8 75%, #4dff91 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.dash-greet-sub {
  color: var(--fg-dim);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
  max-width: 720px;
  margin-top: 4px;
}

.dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.dash-stat {
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(18,18,22,0.55);
  backdrop-filter: blur(10px) saturate(1.2);
}
.dash-stat-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  color: rgba(255,255,255,0.48);
  margin-bottom: 6px;
}
.dash-stat-value {
  font-family: 'Syne', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 22px;
}
.dash-stat-hint { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 4px; }

.dash-ref-card {
  border: 1px solid rgba(94,234,212,0.22);
  background: linear-gradient(135deg, rgba(94,234,212,0.07), rgba(244,63,94,0.04));
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 18px;
}
.dash-ref-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(94,234,212,0.9);
  margin-bottom: 10px;
}
.dash-ref-link {
  font-family: var(--mono, monospace);
  font-size: 12px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  word-break: break-all;
  margin-bottom: 8px;
}
.dash-ref-stats { font-size: 12px; color: rgba(255,255,255,0.6); }

/* ─────────────── Auth compact (s13) ─────────────── */
.auth-card { padding: 24px 20px !important; max-width: 400px !important; }
.auth-title { font-size: 22px !important; margin-bottom: 2px !important; }
.auth-sub { margin-bottom: 16px !important; font-size: 12px !important; }
.auth-brand { margin-bottom: 14px !important; }
.auth-brand .auth-logo { width: 42px !important; height: 42px !important; font-size: 18px !important; border-radius: 11px !important; }
.auth-field { margin-bottom: 10px !important; gap: 4px !important; }
.auth-field label { font-size: 10px !important; }
.auth-field input { padding: 10px 12px !important; font-size: 13px !important; }
.auth-btn-primary, .auth-btn-ghost, .auth-btn-google { padding: 11px 14px !important; font-size: 13px !important; }
.auth-divider { margin: 10px 0 !important; }
.auth-foot { font-size: 12px !important; margin-top: 10px !important; }
@media (max-width: 420px) {
  .auth-card { padding: 20px 16px !important; }
  .auth-stage { padding: 10px !important; }
}

/* ─────────────── Dashboard stats (Sab.APIs style) ─────────────── */
.dash-section {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(18,18,22,0.55);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  margin-bottom: 16px;
  overflow: hidden;
}
.dash-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dash-section-title {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}
.dash-section-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #00ffb3;
  box-shadow: 0 0 10px rgba(0,255,179,0.6);
}
.dash-section-dot.warn { background: #fbbf24; box-shadow: 0 0 10px rgba(251,191,36,0.5); }
.dash-section-dot.err  { background: #ff4a60; box-shadow: 0 0 10px rgba(255,74,96,0.5); }

.dash-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.dash-tile {
  padding: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.dash-tile:nth-child(-n+2) { border-top: none; }
.dash-tile:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.06); }
.dash-tile-label {
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
}
.dash-tile-label svg { width: 14px; height: 14px; color: #ff4a60; flex-shrink: 0; }
.dash-tile-value {
  font-family: 'Syne', 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 6vw, 32px);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 6px;
}
.dash-tile-sub { font-size: 12px; color: rgba(255,255,255,0.48); }

.dash-tile-bar {
  margin-top: 10px;
  height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  overflow: hidden;
}
.dash-tile-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #ffffff, #f43f5e);
  width: 0%;
  transition: width 400ms ease;
}

.dash-tile .flag {
  display: inline-block; margin-right: 6px; font-size: 16px; vertical-align: middle;
}

/* Esconder old quota text "Carregando..." quando vazio */
.page-subtitle.quota-loading { opacity: 0; }

/* ─── Servers page ─── */
.servers-filter { display: flex; gap: 10px; margin: 14px 0 12px; align-items: center; flex-wrap: wrap; }
.servers-filter input {
  flex: 1; min-width: 0; padding: 10px 12px;
  background: rgba(14,14,18,0.6); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; color: var(--fg); font-size: 13px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.servers-filter input:focus { outline: none; border-color: rgba(244,63,94,0.4); }
.srv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.srv-chip {
  padding: 6px 12px; font-size: 11px; letter-spacing: 0.05em;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65); border-radius: 999px; cursor: pointer;
  transition: all 160ms ease; font-weight: 600; text-transform: uppercase;
}
.srv-chip:hover { background: rgba(255,255,255,0.08); color: #fff; }
.srv-chip.active { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }

.servers-list { display: flex; flex-direction: column; gap: 8px; }
.srv-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(18,18,22,0.55); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; text-decoration: none; color: inherit;
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  transition: transform 140ms ease, border-color 140ms ease;
}
.srv-row:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.16); }
.srv-row-main { flex: 1; min-width: 0; }
.srv-row-title { font-weight: 700; font-size: 14px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-row-sub { font-size: 11px; color: rgba(255,255,255,0.45); font-family: var(--mono); margin-top: 2px; }
.srv-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.srv-row-state { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.srv-state-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.srv-row-ram { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.4); }

/* ─── Privacy blur (admin vendo bot de outro user) ─── */
.priv-blur {
  filter: blur(8px) brightness(0.75);
  user-select: none;
  position: relative;
  pointer-events: none;
}
.priv-blur::after {
  content: 'Restrito';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.3);
  backdrop-filter: blur(2px);
}

/* ─── Creating overlay (aguarde) ─── */
.creating-overlay {
  position: fixed; inset: 0;
  background: rgba(4,4,8,0.72);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  z-index: 9000;
  display: grid; place-items: center;
  animation: creatFade 200ms ease both;
}
@keyframes creatFade { from { opacity: 0; } to { opacity: 1; } }
.creating-card {
  background: linear-gradient(180deg, rgba(22,22,29,0.96), rgba(16,16,20,0.98));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 32px 28px;
  max-width: 360px; width: 90%;
  box-shadow: 0 40px 120px -40px rgba(0,0,0,0.9);
  text-align: center;
  animation: creatPop 360ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes creatPop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.creating-spinner {
  width: 58px; height: 58px; border-radius: 50%;
  margin: 0 auto 18px;
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: #ffffff;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.creating-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.creating-sub { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 16px; }
.creating-progress {
  height: 4px; background: rgba(255,255,255,0.06); border-radius: 999px;
  overflow: hidden; margin-top: 14px;
}
.creating-progress > span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #ffffff, #f43f5e);
  transition: width 900ms linear;
}
.creating-step { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 8px; font-family: var(--mono); min-height: 1em; }

/* Dashboard polish (s13) — paniel hero override */
.dash-greet { padding: 12px 2px 28px; }
.dash-greet-hello {
  font-family: 'Syne', var(--font-display), sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 7.5vw, 72px);
  letter-spacing: -2.6px;
  background: linear-gradient(120deg, #fff 0%, #a78bfa 40%, #38bdf8 75%, #4dff91 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: greetSweep 12s ease-in-out infinite alternate;
  line-height: 0.95;
}
@keyframes greetSweep { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.dash-greet-sub { color: var(--fg-dim); font-size: 15px; line-height: 1.6; margin-top: 4px; max-width:720px; }

/* Tab bar toggle — esconde apenas os botões das abas + o conteúdo.
   O próprio botão de toggle permanece visível (senão usuário trava fora). */
body.tabs-hidden .subnav .subnav-btn,
body.tabs-hidden .tabs .tab-link,
body.tabs-hidden .tab-rail > *:not(.tabs-toggle-btn),
body.tabs-hidden .cp-subnav .subnav-btn,
body.tabs-hidden .tab-pane { display: none !important; }
body.tabs-hidden .subnav { justify-content: flex-end; border: none; background: transparent; }

.tabs-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: rgba(18,18,22,0.55); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6); border-radius: 8px; cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.3);
  transition: all 160ms ease;
  flex: 0 0 32px;
}
.tabs-toggle-btn:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.18); }
.tabs-toggle-btn.active { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.85); }
.tabs-toggle-btn svg { display: block; transition: transform 200ms ease; }
body.tabs-hidden .tabs-toggle-btn svg { transform: rotate(-90deg); }
/* Toggle no fim da barra de abas, colado na direita, discreto */
.tabs-toggle-btn.subnav-toggle {
  margin-left: auto;
  align-self: center;
  opacity: 0.6;
}
.tabs-toggle-btn.subnav-toggle:hover { opacity: 1; }
.hero-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Restrição de acesso (admin sem permissão no bot de outro user) */
body.bot-no-access .tab-pane,
body.bot-no-access .subnav,
body.bot-no-access .subnav-wrap .tabs-toggle-btn { display: none !important; }
.no-access-card {
  margin: 20px 0;
  padding: 22px 18px;
  background: rgba(18,18,22,0.6);
  border: 1px solid rgba(244,63,94,0.25);
  border-radius: 16px;
  backdrop-filter: blur(14px) saturate(1.3);
  text-align: center;
}
.no-access-card .na-icon {
  width: 48px; height: 48px; border-radius: 50%;
  margin: 0 auto 12px;
  background: rgba(244,63,94,0.15);
  display: grid; place-items: center;
  color: #f43f5e;
}
.no-access-card .na-title {
  font-family: 'Syne', var(--font-display), sans-serif;
  font-weight: 700; font-size: 20px; margin-bottom: 6px;
  color: #fff;
}
.no-access-card .na-sub {
  font-size: 13px; color: rgba(255,255,255,0.6);
  margin-bottom: 14px; line-height: 1.5;
}

/* ── Link pra Monitoramento no dashboard (substitui o card gigante de infra) ─ */
.dash-mon-link {
  display: flex; align-items: center; gap: 14px;
  margin-top: 24px; padding: 16px 18px;
  border-radius: 14px; text-decoration: none;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  color: inherit; transition: all .18s ease;
}
.dash-mon-link:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}
.dash-mon-link-text { flex: 1; min-width: 0; }
.dash-mon-link-title {
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .2px;
}
.dash-mon-link-sub {
  font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px;
}
.dash-mon-link-arrow {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  transition: all .18s ease;
}
.dash-mon-link:hover .dash-mon-link-arrow {
  background: rgba(255,255,255,0.1); color: #fff; transform: translateX(2px);
}

/* ── Link de convite no settings/perfil ───────────────────────────── */
.invite-link-box {
  margin-top: 10px; padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.invite-link {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 13px; color: #fff;
  word-break: break-all; white-space: normal; display: block;
  background: transparent; padding: 0;
}
@media (max-width: 640px) {
  .invite-link { font-size: 12px; }
}

/* ── Dashboard info grid (4 cards abaixo do botsGrid) ─────────────────── */
.dash-info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin-top: 20px;
}
.dash-info-card {
  padding: 14px 16px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--border);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 8px;
  transition: all .15s ease;
}
.dash-info-link:hover {
  border-color: var(--border-strong);
  background: var(--card-hover);
  transform: translateY(-1px);
}
.dash-info-head { display: flex; align-items: center; gap: 8px; }
.dash-info-ic {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--bg-elev-2); border: 1px solid var(--border2);
  display: grid; place-items: center; color: var(--fg-dim);
}
.dash-info-title { font-size: 13px; font-weight: 700; color: var(--fg); }
.dash-info-body { font-size: 12px; color: var(--fg-dim); line-height: 1.45; min-height: 18px; }
.dash-info-body span { color: var(--fg); font-weight: 700; font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; }
.dash-info-cta { font-size: 11px; color: var(--fg-muted); margin-top: auto; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.dash-info-link:hover .dash-info-cta { color: var(--fg); }

.dash-activity-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; }
.dash-activity-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-dim); flex-shrink: 0; }
.dash-activity-text { flex: 1; color: var(--fg); display: flex; justify-content: space-between; gap: 8px; }
.dash-activity-text span { color: var(--fg-muted); font-size: 10px; font-weight: 500; flex-shrink: 0; }

/* ── "Criar servidor" no menu 3-pontos — alinhado aos demais itens ───── */
.cp-menu-cta {
  /* Mesmo visual dos outros links do menu: sem fundo branco, sem bold. */
  background: transparent !important;
  color: var(--fg-dim) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
}
.cp-menu-cta:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--fg) !important;
}
.cp-menu-cta svg { color: var(--fg-dim); }
.cp-menu-cta:hover svg { color: var(--fg); }

/* ───── Kill pink from logo, version badge and FAB (white/grey monochrome) ───── */
.cp-topbar-logo {
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 4px 14px rgba(0,0,0,0.35) !important;
  color: #fff !important;
}
.cp-topbar-logo::after { display: none !important; }
.cp-topbar-logo svg { filter: none !important; color: #fff !important; }
.cp-topbar-word {
  background: linear-gradient(110deg, #ededf0 0%, #ffffff 50%, #ededf0 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}
.cp-topbar-version {
  color: rgba(255,255,255,0.65) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.cb-fab {
  background: linear-gradient(135deg, #ffffff 0%, #dedee3 100%) !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.4) !important;
}
.cb-fab:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4) !important;
}
.cb-fab svg { color: #000 !important; }

/* ─────────────── s26: topbar Chat button + hide old FAB + activity count + servers summary ─────────────── */
/* Esconde o FAB antigo (Cloud Bot agora vive no topbar) */
#__cloudbot { display: none !important; }

/* Topbar "IA" button (entre brand e correio) — icon-only, alinhado */
.cp-topbar-btn-chat {
  color: var(--fg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  text-decoration: none;
  position: relative;
}
.cp-topbar-btn-chat:hover {
  background: linear-gradient(135deg, rgba(244,63,94,0.18), rgba(255,80,100,0.08)) !important;
  border-color: rgba(255,80,100,0.35) !important;
}
.cp-topbar-btn-chat svg { width: 20px; height: 20px; color: var(--fg-dim, #c6c6cc); }
.cp-topbar-btn-chat:hover svg { color: #ffd2d6; }
.cp-topbar-chat-label { display: none; }

/* Badge "×3" para atividade agrupada */
.dash-activity-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  color: #ffd5d9;
  background: rgba(255,80,100,0.15);
  border: 1px solid rgba(255,80,100,0.28);
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* Servers summary grid (Infraestrutura / Instâncias / Catálogo CPU) */
.srv-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 680px) {
  .srv-summary-grid { grid-template-columns: 1fr; }
}
.srv-summary-card {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.025);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.srv-summary-card:hover {
  border-color: rgba(255,80,100,0.35);
  background: rgba(255,255,255,0.035);
}
.srv-summary-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  text-transform: uppercase;
}
.srv-summary-v {
  font-family: 'Syne','Inter',sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: 0.01em;
  line-height: 1.2;
  display: flex; align-items: baseline; gap: 2px;
}
.srv-summary-sep {
  color: var(--fg-muted);
  font-weight: 500;
  margin: 0 2px;
}
.srv-summary-h {
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

/* Ticker: quebra de linha segura para "Dica/Dúvida" boxes */
.dash-faq-title, .dash-faq-body {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  line-height: 1.55;
}

/* ─────────────── s65: pairing modal — backdrop, X, layout igual menu 3-pontos ─────────────── */
.pairing-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4,4,8,0.55);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  z-index: 9997;
  animation: cp-fade-in 180ms cubic-bezier(.22,.61,.36,1);
}
.pairing-backdrop.hidden { display: none; }
.pairing-card:not(.hidden) {
  position: fixed !important;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
  width: min(92vw, 440px);
  margin-bottom: 0 !important;
  background: rgba(14,14,18,0.92) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,80,100,0.35) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 24px 80px -12px rgba(244,63,94,0.30),
    0 6px 24px rgba(0,0,0,0.65);
  animation: pairingIn .28s cubic-bezier(.22,.61,.36,1) both;
  max-height: 86vh; overflow-y: auto;
}
@keyframes pairingIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.pairing-head-right {
  display: flex; align-items: center; gap: 10px;
}
.pairing-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--fg-dim);
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 120ms ease;
  padding: 0;
  flex-shrink: 0;
}
.pairing-close:hover {
  background: rgba(244,63,94,0.12);
  border-color: rgba(244,63,94,0.35);
  color: var(--c-rose, #f43f5e);
  transform: scale(1.04);
}
.pairing-close svg { display: block; }

/* Token CTA — gradiente vermelho com ícone de chave (s34) */
.token-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, #ff3854 0%, #ff6a7a 55%, #ffb199 100%);
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  box-shadow:
    0 8px 24px rgba(255,56,84,0.28),
    inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  position: relative;
  overflow: hidden;
}
.token-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.22), transparent 50%);
  pointer-events: none;
}
.token-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 10px 28px rgba(255,56,84,0.4),
    inset 0 1px 0 rgba(255,255,255,0.45);
}
.token-cta:active:not(:disabled) { transform: translateY(0); }
.token-cta:disabled { opacity: .55; cursor: not-allowed; }
.token-cta-ic {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 8px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
}
.token-cta-ic svg { width: 13px; height: 13px; }

/* Placeholder FAQ tiles on dashboard (s27) */
.dash-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}
@media (min-width: 680px) {
  .dash-faq-grid { grid-template-columns: 1fr 1fr; }
}
.dash-infocard {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border-radius: var(--r);
  padding: 16px 18px;
  transition: border-color .15s ease, transform .15s ease;
}
.dash-infocard:hover { border-color: rgba(255,80,100,0.35); transform: translateY(-1px); }
.dash-infocard-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  color: var(--fg-muted); text-transform: uppercase; margin-bottom: 10px;
}
.dash-infocard-head .dash-icon {
  width: 22px; height: 22px; border-radius: 7px;
  background: rgba(244,63,94,0.08);
  border: 1px solid rgba(255,80,100,0.2);
  color: #fb923c;
  display: grid; place-items: center;
}
.dash-infocard-head .dash-icon svg { width: 13px; height: 13px; }
.dash-infocard-body { font-size: 13px; color: var(--fg); line-height: 1.55; }
.dash-infocard-body b { color: var(--fg); font-weight: 700; }
.dash-infocard-body .hint { color: var(--fg-dim); font-size: 12px; display: block; margin-top: 6px; }
.dash-shortcut-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.dash-shortcut {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--fg-dim);
  text-decoration: none; font-size: 12px; font-weight: 600;
  transition: all .15s ease;
}
.dash-shortcut:hover { color: var(--fg); border-color: rgba(255,80,100,0.35); background: rgba(244,63,94,0.05); }
.dash-shortcut svg { width: 14px; height: 14px; }

/* ─────────────── s27: Nodes panel (/servers) ─────────────── */
.nodes-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 12px 32px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.nodes-panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.nodes-panel-title {
  font-family: 'Syne','Inter',sans-serif;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg);
}
.nodes-panel-sub { font-size: 11px; color: var(--fg-muted); letter-spacing: 0.04em; }
.nodes-panel-list { display: flex; flex-direction: column; gap: 10px; }
.node-row {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.025);
  border-radius: 12px;
  padding: 12px 14px;
}
.node-row-head { display: flex; align-items: center; gap: 10px; }
.node-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #7a7a85;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.node-dot.online {
  background: #3ddc84; box-shadow: 0 0 8px #3ddc84;
  animation: nodePulse 2s ease-in-out infinite;
}
@keyframes nodePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.node-row-t { flex: 1; min-width: 0; }
.node-row-n {
  font-family: 'Syne','Inter',sans-serif; font-weight: 700;
  font-size: 14px; color: var(--fg);
}
.node-row-s { font-size: 11.5px; color: var(--fg-muted); margin-top: 1px; }
.node-row-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  color: #fb923c;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(244,63,94,0.1);
  border: 1px solid rgba(255,80,100,0.25);
  flex-shrink: 0;
}
.node-row-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px; color: var(--fg-dim);
}
.node-row-meta b {
  color: var(--fg-muted); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 10px; margin-right: 4px;
}
.node-row-servers {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.node-srv-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  font-size: 11.5px; color: var(--fg-dim);
  text-decoration: none;
  transition: all .15s ease;
}
.node-srv-chip:hover { color: var(--fg); border-color: var(--fg-muted); background: rgba(255,255,255,0.08); }
.node-srv-chip .srv-state-dot { width: 6px; height: 6px; border-radius: 50%; }

/* ─────────────── s27: Terminal look nos logs ─────────────── */
.term-titlebar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #1a1a20, #121217);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: var(--mono, 'IBM Plex Mono', monospace);
}
.term-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.term-dot-r { background: #ff5f57; box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset; }
.term-dot-y { background: #febc2e; box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset; }
.term-dot-g { background: #28c841; box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset; }
.term-title {
  flex: 1; text-align: center;
  font-size: 11px; color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
  margin-right: 38px; /* compensa largura dos 3 dots */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.term-prompt {
  background: #0b0c0f;
  padding: 8px 14px;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  color: #cbd5e1;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  letter-spacing: 0;
}
.term-prompt .term-u { color: #3ddc84; font-weight: 600; }
.term-prompt .term-at { color: rgba(255,255,255,0.3); }
.term-prompt .term-h { color: #60a5fa; font-weight: 600; }
.term-prompt .term-p { color: #cbd5e1; }
.term-prompt .term-d { color: #ffd166; margin: 0 3px; }
.term-prompt .term-path { color: #a78bfa; }
.term-prompt .term-cursor {
  display: inline-block; color: #9fffd9;
  animation: termBlink 1.1s steps(2) infinite;
  margin-left: 2px;
}
@keyframes termBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0.2; } }
.logs.logs-term {
  background:
    radial-gradient(1200px 280px at 50% -10%, rgba(34,197,94,0.04), transparent 60%),
    linear-gradient(180deg, #0a0b0e 0%, #07080a 100%) !important;
  border-top: 0;
  position: relative;
  min-height: 220px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 8px 14px 12px;
  font-size: 13px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.logs.logs-term > * { flex: 0 0 auto; }
@media (max-width: 640px) {
  .logs.logs-term {
    min-height: 200px;
    max-height: 60vh;
    padding: 6px 10px 10px;
    font-size: 12px;
  }
}
/* sutil scanline animado */
.logs.logs-term::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.012) 0,
    rgba(255,255,255,0.012) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.6;
}
.logs.logs-term::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 64px;
  background: linear-gradient(180deg, transparent, rgba(34,197,94,0.025), transparent);
  pointer-events: none;
  animation: termScan 6s linear infinite;
}
@keyframes termScan {
  0%   { top: -64px; }
  100% { top: 100%; }
}

/* Prompt inline em cada linha de log (cloudpaniel@<slug>:~$ ...) */
.logs.logs-term.has-logs::before { opacity: 0.45; }
.logs.logs-term .l-line {
  position: relative;
  padding: 2px 0 2px 6px !important;
  margin: 0 !important;
  border-left: none;
}
.logs.logs-term .l-line::before {
  content: '';
  display: none;
}
.logs.logs-term .l-line .l-prompt {
  display: inline-flex; align-items: center; gap: 0;
  margin-right: 8px;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11.5px;
  user-select: none;
  opacity: 0.78;
  white-space: nowrap;
}
.logs.logs-term .l-line .l-prompt .lp-u { color: #5fe39e; font-weight: 600; }
.logs.logs-term .l-line .l-prompt .lp-at { color: rgba(255,255,255,0.32); padding: 0 1px; }
.logs.logs-term .l-line .l-prompt .lp-h { color: #7cb6ff; font-weight: 600; }
.logs.logs-term .l-line .l-prompt .lp-c { color: rgba(255,255,255,0.32); }
.logs.logs-term .l-line .l-prompt .lp-p { color: #cbd5e1; }
.logs.logs-term .l-line .l-prompt .lp-d {
  color: #ffd166; margin: 0 6px 0 2px;
  text-shadow: 0 0 6px rgba(255,209,102,0.35);
}

/* Cursor "ao vivo" piscando no fim do stream (última linha) */
.logs.logs-term.has-logs::after {
  /* esconde o scan quando tá streaming pra evitar distração */
  opacity: 0.3;
}
.logs.logs-term .l-livecaret {
  display: inline-block;
  width: 7px; height: 13px;
  background: #5fe39e;
  vertical-align: -2px;
  margin-left: 6px;
  box-shadow: 0 0 10px rgba(95,227,158,0.55);
  animation: termBlink 1.05s steps(2) infinite;
}

/* Terminal-style prompt row (entrada do mini-shell) */
.term-prompt-row {
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.005)) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 10px 14px !important;
  display: flex !important;
  gap: 10px;
  align-items: center;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
}
.term-prompt-inline {
  display: inline-flex; align-items: center; gap: 0;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 12.5px;
  user-select: none;
  white-space: nowrap;
}
.term-prompt-inline .lp-u { color: #5fe39e; font-weight: 600; }
.term-prompt-inline .lp-at { color: rgba(255,255,255,0.32); padding: 0 1px; }
.term-prompt-inline .lp-h { color: #7cb6ff; font-weight: 600; }
.term-prompt-inline .lp-c { color: rgba(255,255,255,0.32); }
.term-prompt-inline .lp-p { color: #cbd5e1; }
.term-prompt-inline .lp-d {
  color: #ffd166; margin: 0 6px 0 4px;
  text-shadow: 0 0 6px rgba(255,209,102,0.35);
}
.term-prompt-input {
  flex: 1; min-width: 0;
  background: transparent;
  border: none;
  padding: 4px 0;
  color: #f4f5f7;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 12.5px;
  outline: none;
  caret-color: #5fe39e;
}
.term-prompt-input::placeholder {
  color: rgba(255,255,255,0.22);
  font-style: italic;
}
.term-prompt-send {
  background: rgba(95,227,158,0.12);
  border: 1px solid rgba(95,227,158,0.35);
  color: #5fe39e;
  padding: 6px 14px !important;
  border-radius: 8px;
  font-family: var(--mono, monospace);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.term-prompt-send:hover { background: rgba(95,227,158,0.22); }
.term-prompt-send:active { transform: scale(0.96); }
.term-prompt-hint {
  padding: 6px 16px 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.32);
  font-family: var(--mono, monospace);
}
.term-prompt-hint code {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 1px 5px;
  margin: 0 1px;
  color: #ffd166;
  font-size: 10.5px;
}
/* Linhas de saída do mini-shell */
.l-line.l-shell-cmd { color: #f4f5f7; font-weight: 500; }
.l-line.l-shell-out { color: rgba(255,255,255,0.78); white-space: pre-wrap; }
.l-line.l-shell-err { color: #fca5a5; white-space: pre-wrap; }
/* Erro do envio de stdin (ao invés do toast vermelho enorme) */
.l-line.l-stdin-err {
  color: #fca5a5;
  background: rgba(244,63,94,0.05);
  border-left: 2px solid rgba(244,63,94,0.45);
  padding-left: 10px !important;
}
.l-line.l-stdin-err::before {
  content: '✕ ';
  color: rgba(244,63,94,0.7);
  font-weight: 700;
}
/* QR code rendering (ASCII + img base64) */
.qr-block {
  display: block;
  margin: 8px 0 8px 4px;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08);
  position: relative;
  width: max-content;
  max-width: calc(100% - 8px);
  animation: qrFadeIn 0.45s ease-out;
}
@keyframes qrFadeIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.qr-block-ascii {
  display: block;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0;
  color: #000 !important;
  white-space: pre;
  user-select: all;
}
/* Canvas QR renderizado pelo painel */
.qr-block canvas {
  display: block;
  max-width: 100%;
  border-radius: 4px;
}
.qr-block-img {
  display: block;
  width: 320px; height: 320px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: zoom-in;
}
.qr-block-label {
  display: flex; align-items: center; gap: 8px;
  position: absolute; top: -10px; left: 14px;
  padding: 3px 10px;
  background: linear-gradient(180deg, #0e0f12, #08080a);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-family: var(--mono, monospace);
  font-size: 10px; font-weight: 600;
  color: #5fe39e;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.qr-block-label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #5fe39e;
  box-shadow: 0 0 8px #5fe39e;
  animation: qrDot 1.4s ease-in-out infinite;
}
@keyframes qrDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ─────────────── s27: Owner control (Admin tab) ─────────────── */
.owner-grid {
  display: grid; gap: 14px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.owner-card {
  padding: 18px 18px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
  position: relative; overflow: hidden;
}
.owner-card::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(700px 260px at 100% 0%, rgba(244,63,94,0.07), transparent 60%);
}
.owner-card-head { position:relative; display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.owner-card-ico {
  width: 42px; height: 42px; border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(244,63,94,0.12); border: 1px solid rgba(244,63,94,0.25);
  font-size: 20px; flex-shrink:0;
}
.owner-card-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--fg); }
.owner-card-head p  { margin: 2px 0 0; font-size: 12px; color: var(--fg-dim); }
.owner-card-body { position: relative; display: flex; flex-direction: column; gap: 10px; }
.owner-card-hint { position:relative; margin: 12px 0 0; font-size: 11px; color: rgba(255,255,255,0.4); }
.owner-card-actions { display:flex; justify-content:flex-end; gap:8px; margin-top: 6px; }
.owner-card-body textarea {
  min-height: 62px; resize: vertical;
  background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 8px 10px;
  color: var(--fg); font-family: var(--mono, monospace); font-size: 12px;
  outline: none;
}
.owner-card-body textarea:focus { border-color: rgba(96,165,250,0.55); box-shadow: 0 0 0 3px rgba(96,165,250,0.12); }

.owner-switch {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer; user-select: none;
}
.owner-switch input { display: none; }
.owner-switch-slider {
  width: 40px; height: 22px; border-radius: 999px; background: rgba(255,255,255,0.1);
  position: relative; transition: background .2s;
}
.owner-switch-slider::after {
  content:''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #e5e7eb;
  transition: left .2s, background .2s;
}
.owner-switch input:checked + .owner-switch-slider { background: rgba(244,63,94,0.55); }
.owner-switch input:checked + .owner-switch-slider::after { left: 20px; background: #fff; }
.owner-switch-label { font-size: 12px; color: var(--fg-dim); font-weight: 600; }
.owner-switch-label.on { color: #f43f5e; }

.owner-ip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.owner-ip {
  font-family: var(--mono, monospace); font-size: 12px;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(96,165,250,0.1); color: #93c5fd;
  border: 1px solid rgba(96,165,250,0.25);
}

/* ─────────────── s28: Terminal idle (empty state limpo) ─────────────── */
.term-idle {
  padding: 24px 20px;
  color: #cbd5e1;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.term-idle-card {
  display: flex; align-items: flex-start; gap: 14px;
  max-width: 520px;
}
.term-idle-ic {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(148,163,184,.08);
  border: 1px solid rgba(148,163,184,.18);
  color: #94a3b8;
}
.term-idle-body { min-width: 0; }
.term-idle-title {
  font-size: 15px; font-weight: 700; color: #f1f5f9;
  margin-bottom: 4px; letter-spacing: -.01em;
}
.term-idle-msg { color: rgba(226,232,240,.72); font-size: 13px; line-height: 1.55; }
.term-idle-reason { color: rgba(226,232,240,.72); }
/* Tons por status */
.term-idle[data-tone="warn"] .term-idle-ic { color: #fbbf24; background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.25); }
.term-idle[data-tone="warn"] .term-idle-title { color: #fcd34d; }
.term-idle[data-tone="danger"] .term-idle-ic { color: #f87171; background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.28); }
.term-idle[data-tone="danger"] .term-idle-title { color: #fca5a5; }
/* Legado (caso algum código ainda renderize) — mantém estilos mas desabilita "tail -f" */
.term-idle-line { display: none; }
.term-u { color: #3ddc84; font-weight: 600; }
.term-at { color: rgba(255,255,255,0.3); }
.term-h { color: #60a5fa; font-weight: 600; }
.term-p { color: #cbd5e1; }
.term-d { color: #ffd166; margin: 0 3px; }
.term-path { color: #a78bfa; }
/* Esconder idle quando há logs streamando */
.logs.has-logs .term-idle { display: none; }


/* cp-topbar-desktop-floating */
@media (min-width: 1024px) {
  .cp-topbar {
    display: flex !important;
    position: fixed;
    top: 12px;
    right: 14px;
    left: auto;
    width: auto;
    max-width: none;
    background: rgba(15,15,18,0.78);
    border: 1px solid var(--border, #27272a);
    border-radius: 12px;
    padding: 6px 8px;
    backdrop-filter: blur(12px);
    gap: 4px;
    z-index: 60;
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  }
  .cp-topbar-brand,
  .cp-topbar-brand * { display: none !important; }
  .cp-topbar-actions { gap: 4px; }
  .cp-topbar-btn {
    width: 36px; height: 36px;
    border-radius: 9px;
  }
}

/* ── Topbar "Criar servidor" (s72-consolidated) ─────────────────── */
.cp-topbar-btn-create {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  width: auto !important;
  border-radius: 8px;
  background: var(--bg-elev, #1a1a1d);
  color: var(--fg, #e9e9ee);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  border: 1px solid var(--border, #27272a);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}
.cp-topbar-btn-create:hover {
  background: var(--bg-elev-2, #232328);
  border-color: var(--border-strong, #3a3a40);
  color: #fff;
}
.cp-topbar-btn-create:active { transform: translateY(1px); }
.cp-topbar-btn-create svg { width: 14px; height: 14px; color: currentColor; }
.cp-topbar-btn-create .cp-topbar-create-label { display: inline; }

/* Em mobile (<1024px) só mostra o "+" para caber */
@media (max-width: 1023.98px) {
  .cp-topbar-btn-create {
    width: 36px !important;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 9px;
  }
  .cp-topbar-btn-create .cp-topbar-create-label { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   PANIEL — utilities (cards multi-accent, kicker, hero, btn paniel)
   Replicado 1:1 de cloudpaniel.com.br pra reuso nas páginas internas.
   ══════════════════════════════════════════════════════════════════ */

/* Section header (paniel-style) — sobrepõe quando .section-head.hero é usado */
.section-head.hero {
  display: block;
  border: none;
  padding: 0;
  margin: 0 0 28px;
  text-align: left;
}
.section-head.hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #cfcfd5;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.10);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.section-head.hero h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.2px;
  color: #fff;
  margin: 0 0 8px;
}
.section-head.hero p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg-dim);
  max-width: 680px;
}

/* PANIEL CARD (multi-accent) */
.p-card {
  --ac: #fff;
  background: linear-gradient(180deg, var(--surface), var(--ink));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .35s;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.p-card::before {
  content: "";
  position: absolute; top: 0; left: 18px; right: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, var(--ac) 50%, transparent 95%);
  opacity: .4;
  border-radius: 0 0 4px 4px;
  transition: opacity .3s, box-shadow .3s;
}
.p-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-h);
  box-shadow: 0 32px 90px rgba(0,0,0,.65), 0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(255,255,255,.06);
}
.p-card:hover::before { opacity: .85; box-shadow: 0 0 18px var(--ac); }
.p-card > * { position: relative; z-index: 1; }

.p-card.cyan   { --ac: #38bdf8; }
.p-card.violet { --ac: #a78bfa; }
.p-card.mint   { --ac: #4dff91; }
.p-card.orange { --ac: #fb923c; }
.p-card.amber  { --ac: #ffaa2d; }
.p-card.rose   { --ac: #f43f5e; }

.p-card-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
  display: grid; place-items: center;
  color: var(--ac);
  margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.3);
}
.p-card-ico svg { width: 22px; height: 22px; }

.p-card-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ac);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}
.p-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: #fff;
  margin-bottom: 6px;
}
.p-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-dim);
}

.p-grid { display: grid; gap: 18px; }
.p-grid-3 { grid-template-columns: repeat(3,1fr); }
.p-grid-2 { grid-template-columns: repeat(2,1fr); }
.p-grid-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 960px) {
  .p-grid-4 { grid-template-columns: repeat(2,1fr); }
  .p-grid-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .p-grid-2, .p-grid-3, .p-grid-4 { grid-template-columns: 1fr; }
}

/* PANIEL BUTTONS (override .btn-primary white pill) */
.btn.btn-paniel-primary {
  background: #fff;
  color: #0a0a0b;
  border-color: #fff;
  border-radius: 100px;
  font-family: var(--mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 11.5px;
  padding: 10px 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 40px rgba(255,255,255,.10);
}
.btn.btn-paniel-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #f4f4f6;
  color: #0a0a0b;
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.20), 0 18px 50px rgba(255,255,255,.18);
}
.btn.btn-paniel-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  font-family: var(--mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 11.5px;
  padding: 10px 18px;
}
.btn.btn-paniel-ghost:hover:not(:disabled) {
  border-color: #fff; color: #fff; background: rgba(255,255,255,.04);
}

/* PANIEL STATS strip */
.p-stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  background: linear-gradient(180deg, var(--surface), var(--ink));
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.p-stats .p-stat {
  padding: 26px 22px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.p-stats .p-stat:last-child { border-right: none; }
.p-stats .p-stat-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1;
}
.p-stats .p-stat-num.acid {
  background: linear-gradient(135deg, #fff 0%, #38bdf8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.p-stats .p-stat-lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-dim);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
@media (max-width: 720px) {
  .p-stats { grid-template-columns: repeat(2,1fr); }
  .p-stats .p-stat { border-right: none; border-bottom: 1px solid var(--border); }
  .p-stats .p-stat:nth-child(odd) { border-right: 1px solid var(--border); }
  .p-stats .p-stat:nth-last-child(-n+2) { border-bottom: none; }
}

/* PANIEL pill (request method, scope, etc) */
.p-method {
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .8px;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  color: #0a0a0b;
}
.p-method.get    { background: #38bdf8; }
.p-method.post   { background: #4dff91; }
.p-method.put    { background: #ffaa2d; }
.p-method.del    { background: #f43f5e; color: #fff; }
.p-method.patch  { background: #a78bfa; }

/* ─────────────── MOBILE: logs legíveis em telas pequenas ─────────────── */
@media (max-width: 640px) {
  .logs-card { border-radius: 0; border-left: none; border-right: none; }
  .logs-head {
    padding: 10px 12px;
    gap: 8px;
  }
  .logs-head h2 { font-size: 11px; }
  .logs-head::before { width: 7px; height: 7px; box-shadow: 12px 0 0 #fbbf24, 24px 0 0 #f43f5e; margin-right: 22px; }
  .logs-actions {
    flex-wrap: wrap;
    gap: 5px;
  }
  .logs-actions .checkbox-inline { font-size: 10.5px; gap: 4px; }
  .logs-actions .checkbox-inline input { width: 12px; height: 12px; }
  .logs-actions .btn-small { padding: 4px 8px; font-size: 10.5px; }

  .logs-filter-bar {
    padding: 8px 10px;
    gap: 6px;
    flex-direction: column;
    align-items: stretch;
  }
  .logs-filter-input { min-width: 0; font-size: 11px; padding: 6px 10px; }
  .logs-level-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .logs-level-chips::-webkit-scrollbar { display: none; }
  .log-chip { padding: 4px 9px; font-size: 10px; flex: 0 0 auto; }

  .logs,
  pre.logs,
  #logs {
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.45;
    min-height: 160px;
    max-height: 62vh;
  }
  .logs .l-line {
    padding: 2px 0 2px 22px;
    margin-left: -6px;
    font-size: 11px;
    border-left-width: 2px;
  }
  .logs .l-line::before { left: 6px; font-size: 10px; }
  .logs .l-ts { font-size: 10px; margin-right: 5px; }
  .logs .l-tag { font-size: 9px; padding: 0 3px; }
  .logs .l-lvl { font-size: 9px; padding: 0 3px; margin-right: 3px; }

  .logs.logs-term,
  #logs.logs-term {
    padding: 6px 10px 10px;
    font-size: 11px;
    line-height: 1.45;
    min-height: 160px;
    max-height: 62vh;
  }
  .logs.logs-term .l-line { padding: 1px 0 1px 2px !important; }
  .logs.logs-term .l-line .l-prompt { font-size: 10px; margin-right: 4px; }

  .term-titlebar { padding: 6px 10px; }
  .term-dot { width: 8px; height: 8px; }
  .term-title { font-size: 9.5px; margin-right: 30px; }

  .term-prompt-row {
    padding: 8px 10px !important;
    gap: 6px;
    flex-wrap: wrap;
  }
  .term-prompt-inline {
    font-size: 11px;
    flex: 0 0 auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .term-prompt-input { font-size: 11px; min-width: 0; }
  .term-prompt-send { padding: 5px 10px !important; font-size: 10.5px; }
  .term-prompt-hint { font-size: 9.5px; padding: 5px 10px 10px; }

  .term-idle { padding: 18px 12px; }
  .term-idle-card { gap: 10px; }
  .term-idle-ic { width: 36px; height: 36px; }
  .term-idle-ic svg { width: 18px; height: 18px; }
  .term-idle-title { font-size: 13px; }
  .term-idle-msg { font-size: 11.5px; }
}

@media (max-width: 480px) {
  .logs,
  pre.logs,
  #logs {
    font-size: 10px;
    line-height: 1.4;
    padding: 6px 8px;
  }
  .logs .l-line { font-size: 10px; padding: 1px 0 1px 20px; margin-left: -4px; }
  .logs .l-line::before { left: 5px; font-size: 9px; }
  .logs .l-ts { font-size: 9px; }
  .logs .l-tag { font-size: 8.5px; }
  .logs .l-lvl { font-size: 8.5px; }
  .logs.logs-term,
  #logs.logs-term { font-size: 10px; line-height: 1.4; }
  .logs.logs-term .l-line .l-prompt { font-size: 9px; }
  .term-prompt-inline { font-size: 10px; }
  .term-prompt-input { font-size: 10px; }
}

/* Força quebra de linha completa no mobile quando "Quebrar linha" está ativo */
@media (max-width: 640px) {
  .logs[data-wrap="true"] .l-line {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere;
  }
  .logs[data-wrap="false"] .l-line {
    white-space: pre !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
  }
}