/* Vantablack — preto absoluto, a luz só onde importa. */
:root {
  --bg: #000000;
  --line: #191919;
  --line-2: #1F1F1F;
  --raise: #0A0A0A;
  --ink: #F5F5F5;
  --ink-2: #D4D4D4;
  --ink-3: #A3A3A3;
  --muted: #8E8E8E;
  --faint: #4A4A4A;
  --violet: #8B6CFF;
  --violet-2: #B9A6FF;
  --up: #5EE6A0;
  --down: #F58A8A;
  --amber: #F2C14E;
  --radius: 12px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: 48px;
  --maxw: 1344px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-size: 14px; line-height: 1.45;
  min-height: 100dvh; overflow-x: hidden;
}
a { color: var(--muted); text-decoration: none; }
a:hover { color: var(--ink); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; border-radius: 6px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.n { font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--muted); }
.muted { color: var(--muted); } .ink3 { color: var(--ink-3); } .faint { color: var(--faint); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* Ambiente: halo violeta muito sutil */
.halo { position: fixed; pointer-events: none; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(139,108,255,.09) 0%, rgba(139,108,255,.025) 40%, transparent 62%); }

/* ---------- Estrutura ---------- */
.app { position: relative; z-index: 1; min-height: 100dvh; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 0 var(--gutter); max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; width: 240px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.brand:hover { color: var(--ink); }
.nav { display: flex; gap: 32px; font-size: 14px; }
.nav a[aria-current="page"] { color: var(--ink); }
.top-actions { width: 240px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { color: var(--ink); background: #0E0E0E; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #1A1A1A; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-3); border: 0; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); display: inline-block; }
.live-dot.on { background: var(--up); box-shadow: 0 0 8px rgba(94,230,160,.7); }

main.page { max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 24px var(--gutter) 96px; }

.tabbar { display: none; }

/* ---------- Tipografia de números ---------- */
.eyebrow { font-size: 12px; letter-spacing: .24em; color: var(--muted); text-transform: uppercase; }
.hero-num { font-size: 72px; font-weight: 300; letter-spacing: -.05em; line-height: 1; white-space: nowrap; }
.hero-num .cur { color: var(--faint); font-size: 32px; letter-spacing: -.02em; margin-right: 8px; }
.hero-num .cents { color: var(--faint); }
.stat-num { font-size: 28px; font-weight: 300; letter-spacing: -.03em; }

/* ---------- Seletor de período ---------- */
.seg { display: flex; gap: 4px; }
.seg button { height: 32px; padding: 0 14px; border: 0; border-radius: 16px; background: transparent; color: var(--muted); font-size: 13px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"] { background: #161616; color: var(--ink); box-shadow: inset 0 0 0 1px #262626; }

/* ---------- Blocos ---------- */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-top: 48px; }
.hero-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.goal { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.goal .row-between > span { white-space: nowrap; }
.bar { position: relative; height: 3px; border-radius: 2px; background: var(--line-2); }
.bar > i { display: block; height: 3px; border-radius: 2px; background: var(--violet); box-shadow: 0 0 10px rgba(139,108,255,.6); animation: fillIn 1.4s var(--ease) .2s both; }
.bar > b { position: absolute; top: -5px; width: 1px; height: 13px; background: var(--ink); }
@keyframes fillIn { from { width: 0; } }

.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strip > div { display: flex; flex-direction: column; gap: 8px; padding: 22px 0 22px 32px; border-left: 1px solid var(--line); min-width: 0; }
.strip > div:first-child { padding-left: 0; border-left: 0; }
.strip .v { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.section { margin-top: 48px; display: flex; flex-direction: column; gap: 16px; }
.section h2 { margin: 0; font-size: 14px; font-weight: 400; }
.legend { display: flex; gap: 20px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend .l1 { width: 12px; height: 2px; background: var(--violet); }
.legend .l2 { width: 12px; border-top: 1px dashed #4A4A4A; }

.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.tip { position: absolute; display: flex; flex-direction: column; gap: 2px; pointer-events: none; width: max-content; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.78); box-shadow: inset 0 0 0 1px #1C1C1C; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; transition: left .2s var(--ease), top .2s var(--ease); }
.draw { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: draw 1.6s var(--ease) .1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.pulse { transform-origin: center; transform-box: fill-box; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }

.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; margin-top: 48px; }
.list { display: flex; flex-direction: column; }
.list .it { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--line); }
.list .it:hover { background: var(--raise); box-shadow: -8px 0 0 var(--raise), 8px 0 0 var(--raise); }
.list .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.list .time { width: 56px; text-align: right; font-size: 13px; color: var(--muted); }
.dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #4A4A4A; }
.dot.paid { background: var(--up); box-shadow: 0 0 8px rgba(94,230,160,.7); }
.dot.expired, .dot.failed, .dot.refunded { background: #5A3A3A; }
.it.enter { animation: rowIn .6s var(--ease) both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Ao vivo ---------- */
.live-grid { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 520px) minmax(150px, 1fr); align-items: center; min-height: 560px; margin-top: 8px; }
.live-side { display: flex; flex-direction: column; gap: 56px; }
.live-side.l { align-items: flex-end; text-align: right; padding-right: 56px; }
.live-side.r { padding-left: 56px; }
.live-side .k { display: flex; flex-direction: column; gap: 8px; }
.live-side.l .k { align-items: flex-end; }
.big-stat { font-size: clamp(28px, 2.8vw, 40px); font-weight: 300; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.ring { position: relative; width: 520px; max-width: 100%; aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.ring .center .hero-num { font-size: min(72px, 13cqw); }
.ring .center .hero-num .cur { font-size: .44em; }
.ring .under { position: absolute; left: 0; right: 0; top: 83%; text-align: center; font-size: 13px; color: var(--ink-3); }
.arc { animation: arcIn 1.8s var(--ease) .15s both; }
@keyframes arcIn { from { stroke-dasharray: 0 2000; } }
.fade { animation: fade .9s ease-out both; }
@keyframes fade { from { opacity: 0; } }

/* ---------- Análise ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal .wd { font-size: 11px; color: var(--muted); letter-spacing: .08em; }
.cal .c { height: 48px; border-radius: 6px; padding: 7px 8px; font-size: 11px; animation: fade .8s ease-out both; }
.cal .c.future { box-shadow: inset 0 0 0 1px var(--line); color: var(--faint); }
.cal .c.zero { background: var(--raise); color: #4A4A4A; }
.cal .c.today { outline: 1px solid var(--ink); outline-offset: -1px; }
.ruler { position: relative; height: 36px; }
.ruler .track { position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--line-2); }
.ruler .fill { position: absolute; left: 0; top: 7px; height: 3px; border-radius: 2px; background: var(--violet); box-shadow: 0 0 12px rgba(139,108,255,.6); animation: fillIn 1.4s var(--ease) .3s both; }
.ruler .tick { position: absolute; top: 3px; width: 1px; height: 11px; background: var(--faint); }
.ruler .tick.on { background: var(--violet); }
.ruler .tick.next { top: 0; height: 17px; background: var(--ink); }
.ruler .lab { position: absolute; top: 22px; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.ruler .lab.next { color: var(--ink); }
.ruler .lab.end { transform: translateX(-100%); }

/* ---------- Formulários ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: #050505; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field .lab { font-size: 13px; color: var(--ink-3); }
.field .hint { font-size: 12px; color: var(--muted); }
.input { height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: #070707; color: var(--ink); outline: none; width: 100%; }
.input { transition: border-color .18s, box-shadow .18s; caret-color: var(--violet-2); }
.input:hover { border-color: #2A2A2A; }
.input:focus { border-color: rgba(139,108,255,.55); box-shadow: 0 0 0 4px rgba(139,108,255,.08); }
.input::placeholder { color: #5A5A5A; }
.btn { height: 44px; padding: 0 20px; border-radius: 22px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn:hover { border-color: #3A3A3A; }
.btn.primary { background: var(--ink); color: #000; border-color: var(--ink); font-weight: 500; }
.btn.primary:hover { background: #FFFFFF; }
.btn.small { height: 34px; padding: 0 14px; font-size: 13px; }
.btn.danger { color: var(--down); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; cursor: pointer; }
.switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 13px; background: #1A1A1A; transition: background .2s; pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #7A7A7A; transition: transform .25s var(--ease), background .2s; }
.switch input:checked + i { background: var(--violet); }
.switch input:checked + i::after { transform: translateX(18px); background: #FFF; }
.switch input:focus-visible + i { outline: 2px solid var(--violet-2); outline-offset: 2px; }
.providers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.providers button { height: 52px; border-radius: 10px; border: 1px solid var(--line-2); background: #070707; color: var(--ink-3); }
.providers button[aria-pressed="true"] { border-color: var(--violet); color: var(--ink); box-shadow: 0 0 0 1px var(--violet) inset; }
.code { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #070707; border: 1px solid var(--line-2); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--ink-2); word-break: break-all; }
.code span { flex: 1; min-width: 0; }
.err { color: var(--down); font-size: 13px; min-height: 18px; }
.ok { color: var(--up); font-size: 13px; }

/* ---------- Entrada ---------- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.auth-box { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 28px; }
.auth-mark { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-bottom: 8px; }
/* Login: a luz do eclipse orbita o disco devagar */
.ecl.spin .ecl-orbit { transform-box: view-box; transform-origin: 512px 512px; animation: eclOrbit 14s linear infinite; }
.ecl.spin .ecl-level { transform-box: view-box; transform-origin: 718px 306px; animation: eclOrbit 14s linear infinite reverse; }
.ecl.spin .ecl-corona { transform-box: view-box; transform-origin: 512px 512px; animation: eclBreath 7s ease-in-out infinite; }
.ecl.spin .ecl-point { transform-box: fill-box; transform-origin: center; animation: eclTwinkle 3.5s ease-in-out infinite; }
@keyframes eclOrbit { to { transform: rotate(360deg); } }
@keyframes eclBreath { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.035); } }
@keyframes eclTwinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .ecl.spin * { animation: none !important; } }
.auth-mark .word { font-size: 13px; font-weight: 500; letter-spacing: .42em; padding-left: .42em; }
.link-btn { border: 0; background: none; padding: 0; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.link-btn:hover { color: var(--ink); }

/* ---------- Vazio, carregando ---------- */
.empty { margin-top: 48px; padding: 40px; border: 1px dashed #222; border-radius: var(--radius); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.empty h3 { margin: 0; font-size: 18px; font-weight: 400; }
.empty p { margin: 0; color: var(--ink-3); max-width: 520px; }
.sk { display: block; background: linear-gradient(90deg, #0C0C0C 0%, #1C1930 50%, #0C0C0C 100%); background-size: 200% 100%; animation: sk 1.25s ease-in-out infinite; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.banner { margin-top: 24px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-3); }

/* ---------- Toast e celebração ---------- */
.toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 26px; background: rgba(12,12,12,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid #222; box-shadow: 0 10px 40px rgba(0,0,0,.6); font-size: 14px; animation: toastIn .5s var(--ease) both; }
.toast.out { animation: toastOut .4s ease-in both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }
.celebrate { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.9); backdrop-filter: blur(6px); display: grid; place-items: center; animation: fade .5s ease-out both; }
.celebrate .box { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; padding: 24px; }
.celebrate .t1 { font-size: 12px; letter-spacing: .3em; color: var(--muted); }
.celebrate .t2 { font-size: 64px; font-weight: 300; letter-spacing: -.04em; }
.celebrate svg { animation: celeb 1.2s var(--ease) both; }
@keyframes celeb { from { transform: scale(.6); opacity: 0; } }

/* ---------- Folha "Mais" (mobile) ---------- */
.sheet-back { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.6); animation: fade .25s ease-out both; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: #0A0A0A; border-top: 1px solid var(--line-2); border-radius: 20px 20px 0 0; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); animation: sheetIn .35s var(--ease) both; }
@keyframes sheetIn { from { transform: translateY(100%); } }
.sheet a, .sheet button.item { display: flex; align-items: center; gap: 14px; width: 100%; height: 52px; border: 0; background: none; color: var(--ink-2); font-size: 15px; border-bottom: 1px solid var(--line); text-align: left; padding: 0; }
.sheet .grip { width: 36px; height: 4px; border-radius: 2px; background: #2A2A2A; margin: 4px auto 8px; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .topbar { height: 60px; }
  .brand { width: auto; }
  .nav, .top-actions .hide-m { display: none; }
  .top-actions { width: auto; gap: 4px; }
  .icon-btn { width: 44px; height: 44px; }
  main.page { padding: 8px var(--gutter) calc(110px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; font-size: 11px; color: var(--muted); border: 0; background: none; }
  .tabbar [aria-current="page"] { color: var(--ink); }
  .head-row { flex-direction: column; align-items: flex-start !important; gap: 16px !important; }
  .seg button { height: 36px; border-radius: 18px; }
  .hero { flex-direction: column; align-items: stretch; gap: 28px; margin-top: 28px; }
  .hero-num { font-size: 48px; }
  .hero-num .cur { font-size: 22px; margin-right: 6px; }
  .goal { width: 100%; }
  .strip { margin-top: 28px; }
  .strip > div { padding: 18px 0 18px 14px; }
  .stat-num { font-size: 22px; }
  .strip.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip.four > div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .strip.four > div:nth-child(4) { border-top: 1px solid var(--line); }
  .section { margin-top: 32px; }
  .legend { display: none; }
  .cols-2 { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
  .live-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 24px; }
  .live-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
  .live-side.l, .live-side.r { padding: 0; text-align: left; align-items: stretch; }
  .live-side .k, .live-side.l .k { align-items: flex-start; padding: 18px 0 18px 14px; border-bottom: 1px solid var(--line); }
  .live-side .k:first-child { padding-left: 0; }
  .live-side .k + .k { border-left: 1px solid var(--line); }
  .live-side.r { border-top: 0; }
  .big-stat { font-size: 26px; }
  .ring { width: 340px; margin-bottom: 40px; }
  .ring .under { top: calc(100% + 12px); }
  .cal { gap: 6px; }
  .cal .c { height: 44px; padding: 6px 7px; }
  .providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .empty { padding: 24px; margin-top: 28px; }
  .celebrate .t2 { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .draw { stroke-dashoffset: 0; }
}

/* ================= v2: barra lateral e seções ================= */
:root { --side: 236px; }
.side { position: fixed; z-index: 20; left: 0; top: 0; bottom: 0; width: var(--side); padding: 24px 14px 16px; border-right: 1px solid var(--line); background: rgba(0,0,0,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 22px; overflow-y: auto; scrollbar-width: none; }
.side::-webkit-scrollbar { display: none; }
.side .brand { width: auto; padding: 0 8px; }
.side-goal { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 12px; color: var(--ink); }
.side-goal:hover { border-color: #262626; color: var(--ink); }
.side-group { display: flex; flex-direction: column; gap: 1px; }
.side-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #5A5A5A; padding: 0 10px 6px; display: block; }
.side-group a { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 10px; border-radius: 8px; font-size: 14px; color: var(--muted); }
.side-group a svg { flex-shrink: 0; opacity: .85; }
.side-group a:hover { color: var(--ink); background: #0B0B0B; }
.side-group a[aria-current="page"] { color: var(--ink); background: #111; }
.side-group a[aria-current="page"] svg { color: var(--violet-2); opacity: 1; }
.side-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.main-col { margin-left: var(--side); }
/* Com a escala de telas grandes, a altura mínima é dividida pelo zoom para não sobrar rolagem. */
.app.main-col { min-height: calc(100dvh / var(--z, 1)); }
.main-col .topbar { display: none; }
.m-only { display: none !important; }
.nav { display: none; }

/* Cabeçalho de página */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 32px; font-weight: 400; letter-spacing: -.025em; }
.page-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

/* Filtros */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; align-items: center; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; height: 36px; padding: 0 34px 0 14px; border-radius: 18px; border: 1px solid var(--line-2); background: #050505; color: var(--ink-3); font-size: 13px; cursor: pointer; }
.select select:hover, .select select:focus { color: var(--ink); border-color: #2E2E2E; outline: none; }
.select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid #6A6A6A; border-bottom: 1.5px solid #6A6A6A; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select select:disabled { opacity: .45; cursor: not-allowed; }
.search { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--line-2); background: #050505; color: var(--muted); min-width: 240px; flex: 1; max-width: 420px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink); font-size: 13px; }

/* Abas de seção */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-top: 28px; overflow-x: auto; scrollbar-width: none; }
.tabs button, .tabs a { height: 40px; padding: 0 4px; margin-right: 20px; border: 0; background: none; color: var(--muted); font-size: 14px; border-bottom: 1px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* Métricas grandes (mesma linguagem da faixa) */
.kpi-num { font-size: 36px; font-weight: 300; letter-spacing: -.035em; line-height: 1.05; }
.strip.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.strip .sub { font-size: 12px; color: var(--muted); }
.accent-up { color: var(--up); }

/* Tabela minimalista */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 400; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #5A5A5A; padding: 0 12px 12px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.tbl tr:hover td { background: #070707; }
.tbl .r { text-align: right; padding-right: 0; }
.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.who .avatar { width: 34px; height: 34px; flex-shrink: 0; font-size: 12px; }
.who .nm { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .sub { font-size: 12px; color: var(--muted); }

/* Selos */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11px; letter-spacing: .04em; border: 1px solid var(--line-2); color: var(--ink-3); white-space: nowrap; }
.badge.paid { color: var(--up); border-color: rgba(94,230,160,.3); }
.badge.generated { color: var(--amber); border-color: rgba(242,193,78,.3); }
.badge.expired, .badge.failed { color: var(--muted); }
.badge.refunded { color: var(--down); border-color: rgba(245,138,138,.3); }
.badge.soon { color: var(--violet-2); border-color: rgba(139,108,255,.35); }

/* Painel lateral de resumo */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; margin-top: 48px; align-items: start; }
.kv { display: flex; flex-direction: column; }
.kv .row-between { height: 44px; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv .row-between span:first-child { color: var(--muted); }

/* Gráfico de barras por hora */
.bars-h svg { display: block; width: 100%; height: auto; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { height: 28px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--line-2); background: none; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.chip[aria-pressed="true"] { color: var(--ink); border-color: #3A3A3A; background: #0E0E0E; }

/* Pendências */
.issue { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.issue .sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.sev.hi { background: var(--down); box-shadow: 0 0 10px rgba(245,138,138,.6); }
.sev.md { background: var(--amber); box-shadow: 0 0 10px rgba(242,193,78,.5); }
.sev.lo { background: var(--violet-2); }
.sev.ok { background: var(--up); box-shadow: 0 0 10px rgba(94,230,160,.6); }
.issue h3 { margin: 0; font-size: 15px; font-weight: 400; }
.issue p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

/* Telas das próximas funções */
.soon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; border-top: 1px solid var(--line); }
.soon-grid > div { padding: 24px 24px 24px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.soon-grid > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.soon-grid > div:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.soon-grid .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--violet-2); background: #0B0B0B; box-shadow: inset 0 0 0 1px #1A1A1A; }
.soon-grid h3 { margin: 0; font-size: 15px; font-weight: 400; }
.soon-grid p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ghost-list { margin-top: 40px; display: flex; flex-direction: column; }
.ghost-row { display: flex; align-items: center; gap: 16px; height: 64px; border-bottom: 1px solid var(--line); }
.ghost-row .g { height: 10px; border-radius: 5px; background: #0E0E0E; }

@media (min-width: 901px) and (max-width: 1200px) {
  .live-side.l { padding-right: 28px; }
  .live-side.r { padding-left: 28px; }
}
@media (max-width: 1200px) {
  .hero { flex-direction: column; align-items: stretch; gap: 28px; }
  .goal { width: 100%; max-width: 520px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .strip.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .side { display: none; }
  .main-col .topbar { display: flex; height: 60px; justify-content: flex-start; }
  .main-col { margin-left: 0; }
  .m-only { display: inline-flex !important; }
  .d-only, .m-hide { display: none !important; }
  .page-head h1 { font-size: 26px; }
  .kpi-num { font-size: 26px; }
  .strip.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip.five > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .strip.five > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .soon-grid { grid-template-columns: minmax(0, 1fr); }
  .soon-grid > div, .soon-grid > div + div { padding: 20px 0; border-left: 0; }
  .search { min-width: 0; max-width: none; flex-basis: 100%; }
  .tbl .hide-m { display: none; }
  .tbl td:has(> .who) { max-width: 0; width: 100%; }
  .sheet { max-height: 86dvh; overflow-y: auto; }
}

/* ================= Análises ================= */
.an-sec { margin-top: 64px; display: flex; flex-direction: column; gap: 18px; }
.an-block { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.an-h { margin: 0; font-size: 15px; font-weight: 400; letter-spacing: -.005em; }
.an-sub { margin: 0 0 10px; font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: #5A5A5A; }
.an-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.an-sec .strip { border-bottom: 0; }

/* Lista ranqueada: posição, nome, valor e um fio de luz proporcional */
.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rank li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0 8px; border-top: 1px solid var(--line); }
.rank li > i { position: absolute; left: 32px; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(139,108,255,.55), rgba(139,108,255,.08)); max-width: calc(100% - 32px); }
.rank li.top > i { height: 2px; box-shadow: 0 0 8px rgba(139,108,255,.5); }
.rank .pos { font-size: 12px; color: #5A5A5A; }
.rank li.top .pos { color: var(--violet-2); }
.rank .nm { display: flex; flex-direction: column; min-width: 0; }
.rank .nm > span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .nm small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .val { color: var(--ink); font-size: 14px; }
.rank-empty { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Funil */
.funnel { position: relative; }
.funnel svg { display: block; width: 100%; height: auto; }
.funnel-lab { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.funnel-lab > div { display: flex; flex-direction: column; gap: 4px; }
.funnel-lab > div:nth-child(2) { align-items: center; text-align: center; }
.funnel-lab > div:nth-child(3) { align-items: flex-end; text-align: right; }
.time-big { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.time-big:first-child { padding-top: 0; }

/* Geografia */
.an-geo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr); gap: 48px; align-items: start; }
.geo-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: start; }
.geo-map { display: block; max-width: 100%; height: auto; }

/* Taxas */
.rates > div { cursor: help; }
.rate-bar { display: block; height: 2px; margin-top: 6px; background: var(--line-2); border-radius: 1px; overflow: hidden; }
.rate-bar i { display: block; height: 100%; background: var(--violet); animation: fillIn 1.2s var(--ease) .2s both; }
.rate-bar.bad i { background: var(--down); }
.strip.four.rates > div:nth-child(n+5) { border-top: 1px solid var(--line); }
.strip.four.rates > div:nth-child(5) { padding-left: 0; border-left: 0; }

/* Diário */
.note-form { display: flex; gap: 8px; flex-wrap: wrap; }
.note-form .input { height: 40px; flex: 1; min-width: 200px; }
.note-form input[type=date] { flex: 0 0 auto; color-scheme: dark; }
.note-form .btn { height: 40px; }
.it.note .grow { white-space: normal; display: flex; flex-direction: column; gap: 3px; }
.it.note small { font-size: 12px; }
.it.note .icon-btn { width: 30px; height: 30px; font-size: 18px; color: var(--muted); }

@media (max-width: 1200px) {
  .an-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-geo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .an-geo .geo-left { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .an-sec { margin-top: 44px; }
  .an-cols, .an-geo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .geo-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .geo-wrap .rank { width: 100%; }
  .strip.four.rates > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .strip.four.rates > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .strip.four.rates > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  #an-cust { grid-template-columns: minmax(0, 1fr) !important; }
  #an-cust > div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  #an-cust > div:first-child { border-top: 0; }
  .funnel-lab .stat-num { font-size: 18px; }
}

/* Seletor de período rola na horizontal quando não cabe (celular) */
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 900px) { .page-head .seg { width: 100%; } }

/* ================= Financeiro ================= */
.tx-row { width: 100%; min-height: 64px; gap: 14px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tx-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.gw-share { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

/* Painel lateral (detalhe) */
.drawer { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: #070707; border-left: 1px solid var(--line-2); padding: 24px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; animation: drawerIn .35s var(--ease) both; }
@keyframes drawerIn { from { transform: translateX(100%); } }
.tx-time { list-style: none; margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 16px; border-left: 1px solid var(--line-2); }
.tx-time li { position: relative; display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 14px; }
.tx-time li::before { content: ""; position: absolute; left: -23px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px #3A3A3A; }
.tx-time li.on { color: var(--ink); }
.tx-time li.on::before { background: var(--violet); box-shadow: 0 0 8px rgba(139,108,255,.7); }
.tx-time li.bad::before { background: var(--down); box-shadow: 0 0 8px rgba(245,138,138,.6); }
.tx-time li span:last-child { font-size: 12px; }
.drawer .kv .row-between span:last-child { text-align: right; max-width: 60%; overflow-wrap: anywhere; }
@media (max-width: 900px) { .drawer { top: auto; height: 88dvh; width: 100%; border-left: 0; border-top: 1px solid var(--line-2); border-radius: 20px 20px 0 0; animation-name: sheetIn; } }


/* ================= Equipe ================= */
.ws-pick { display: flex; flex-direction: column; }
.ws-pick .select select { width: 100%; }
.modal { position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; background: #070707; border: 1px solid var(--line-2); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.7); animation: fade .25s ease-out both; }
.perm-grid { display: flex; flex-direction: column; }
.perm-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.perm-row.off { opacity: .55; }
.perm-seg { flex-shrink: 0; background: #0B0B0B; border-radius: 18px; padding: 2px; }
.perm-seg button { height: 28px; padding: 0 12px; }
.tm-row { flex-wrap: wrap; }
.tm-actions { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; padding-left: 48px; }
@media (min-width: 1201px) { .tm-row { flex-wrap: nowrap; } .tm-actions { width: auto; padding-left: 0; } }
.tm-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--line); }
.tm-rules > div { display: flex; align-items: center; gap: 12px; padding: 18px 16px 18px 0; font-size: 13px; color: var(--ink-3); }
.tm-rule-k { font-size: 20px; font-weight: 300; color: var(--violet-2); min-width: 40px; }
@media (max-width: 900px) {
  .tm-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perm-row { flex-wrap: wrap; }
  #tm-kpi { grid-template-columns: minmax(0, 1fr) !important; }
  #tm-kpi > div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  #tm-kpi > div:first-child { border-top: 0; }
}
.perm-row .grow { flex: 1; min-width: 0; }
.modal .grow { flex: 1; min-width: 0; }


/* ================= Comunidade ================= */
.cm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cm-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 14px; background: #050505; box-shadow: inset 0 0 0 1px var(--line); flex-wrap: wrap; }
.cm-card .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cm-t { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-s { font-size: 12px; color: var(--muted); }
.cm-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: #0B0B0B; box-shadow: inset 0 0 0 1px #1A1A1A; color: var(--ink-3); }
.cm-card.k-whatsapp .cm-ic { color: var(--up); }
.cm-card.k-instagram .cm-ic { color: #F2A0C4; }
.cm-card.full { opacity: .55; }
.cm-card.off { outline: 1px dashed #333; }
.cm-adm { display: flex; gap: 6px; width: 100%; }
.cm-hero { margin-top: 40px; }
.cm-hero-in { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(139,108,255,.16), transparent 55%), #050505; box-shadow: inset 0 0 0 1px #1F1A33; }
.cm-hero-in .cm-card { padding: 0; background: none; box-shadow: none; }
.cm-hero-in .cm-ic { width: 52px; height: 52px; color: var(--violet-2); box-shadow: inset 0 0 0 1px rgba(139,108,255,.35), 0 0 24px rgba(139,108,255,.25); }
.cm-hero-in .cm-t { font-size: 20px; }
@media (max-width: 1200px) { .cm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cm-grid { grid-template-columns: minmax(0, 1fr); } .cm-hero-in { padding: 20px; } }


/* ================= Afiliados ================= */
.af-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0; margin-top: 40px; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px #1F1A33;
  background: radial-gradient(110% 160% at 0% 0%, rgba(139,108,255,.17), transparent 55%), #050505; }
.af-code, .af-rule { display: flex; flex-direction: column; gap: 14px; padding: 32px; }
.af-rule { border-left: 1px solid #1A1726; justify-content: center; gap: 8px; }
.af-code-v { font-size: clamp(34px, 5vw, 56px); font-weight: 300; letter-spacing: .08em; line-height: 1; color: var(--ink); text-shadow: 0 0 30px rgba(139,108,255,.35); }
.af-rule-v { font-size: 40px; font-weight: 300; letter-spacing: -.03em; color: var(--up); line-height: 1; }
.mfa-qr { display: grid; place-items: center; padding: 16px; background: #fff; border-radius: 14px; width: 212px; align-self: center; }
.mfa-qr svg, .mfa-qr img { width: 180px; height: 180px; display: block; }
.mfa-code { font-size: 28px; letter-spacing: .5em; text-align: center; height: 56px; }
@media (max-width: 900px) { .af-hero { grid-template-columns: minmax(0, 1fr); } .af-rule { border-left: 0; border-top: 1px solid #1A1726; } .af-code, .af-rule { padding: 22px; } }


/* ================= Robôs ================= */
.rb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.rb-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; background: #050505; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.rb-card:hover { box-shadow: inset 0 0 0 1px #262626; }
.rb-card.off { opacity: .62; }
.rb-top { display: flex; align-items: center; gap: 12px; }
.rb-top .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rb-av { position: relative; flex-shrink: 0; }
.rb-ph { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, #2A2150, #0B0B0B); color: var(--violet-2); font-size: 18px; box-shadow: 0 0 0 1px #1F1A33; }
.rb-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #050505; background: var(--muted); }
.rb-dot.paid { background: var(--up); box-shadow: 0 0 8px rgba(94,230,160,.6); }
.rb-dot.generated { background: var(--amber); }
.rb-dot.refunded { background: var(--down); box-shadow: 0 0 8px rgba(245,138,138,.5); }
.rb-name { color: var(--ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-at { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-sw { transform: scale(.85); transform-origin: right center; }
.rb-menu { position: relative; }
.rb-menu summary { list-style: none; cursor: pointer; width: 32px; height: 32px; font-size: 18px; line-height: 1; }
.rb-menu summary::-webkit-details-marker { display: none; }
.rb-menu[open] summary { background: #0E0E0E; color: var(--ink); }
.rb-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; padding: 6px; border-radius: 12px; background: #0A0A0A; box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; }
.rb-pop button { text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.rb-pop button:hover { background: #141414; color: var(--ink); }
.rb-pop button.down { color: var(--down); }
.rb-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 10px; padding: 12px 14px; border-radius: 10px; background: #080808; }
.rb-nums > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rb-nums b { font-weight: 300; font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-nums b.up { color: var(--up); }
.rb-nums small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rb-flow { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; height: 34px; padding: 0 30px 0 12px; border-radius: 17px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12px; cursor: pointer; }
.rb-dd { position: relative; flex: 1; min-width: 0; }
.rb-dd > summary { list-style: none; }
.rb-dd > summary::-webkit-details-marker { display: none; }
.rb-dd[open] > .rb-flow { box-shadow: inset 0 0 0 1px var(--violet); }
.rb-dd[open] > .rb-flow::after { transform: translateY(-20%) rotate(225deg); }
.rb-dd-pop { left: 0; right: auto; min-width: 100%; max-width: 280px; max-height: 260px; overflow-y: auto; gap: 2px; }
.rb-dd-pop button { display: flex; align-items: center; gap: 10px; }
.rb-dd-pop button span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-dd-pop button small { font-size: 11px; color: var(--muted); }
.rb-dd-pop button[aria-selected="true"] { color: var(--ink); background: rgba(139,108,255,.1); }
.rb-dd-pop button[aria-selected="true"]::after { content: ""; width: 9px; height: 5px; border-left: 1.5px solid var(--violet-2); border-bottom: 1.5px solid var(--violet-2); transform: rotate(-45deg) translateY(-2px); flex-shrink: 0; }
.rb-dd-new { display: block; margin-top: 4px; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--violet-2); }
.rb-dd-new:hover { color: var(--ink); }
.rb-dd > .rb-flow::after { content: ""; position: absolute; right: 13px; top: 50%; width: 5px; height: 5px; border-right: 1.5px solid #6A6A6A; border-bottom: 1.5px solid #6A6A6A; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.rb-flow > span { color: var(--muted); flex-shrink: 0; }
.rb-flow select, .rb-flow b { flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-appearance: none; appearance: none; color: var(--ink); font: inherit; font-size: 12px; font-weight: 400; outline: none; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rb-flow select:focus-visible { outline: none; }
.rb-flow b { height: auto; }
.rb-flow select option { background: #0A0A0A; }
.rb-flow.none { box-shadow: inset 0 0 0 1px rgba(242,193,78,.3); }
.rb-flow.none select, .rb-flow.none b { color: var(--amber); }
.rb-flow:focus-within { box-shadow: inset 0 0 0 1px var(--violet); }
.rb-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 11px; color: var(--muted); }
.rb-tag { padding: 2px 8px; border-radius: 9px; background: #111; color: var(--ink-3); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(245,138,138,.07); color: var(--down); font-size: 12px; }
.rb-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--ink-3); font-size: 14px; }
.rb-steps li::marker { color: var(--violet-2); }
.kbd { padding: 1px 6px; border-radius: 5px; background: #111; box-shadow: inset 0 0 0 1px #222; color: var(--ink); font-size: 12px; }
.rb-warn { margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(242,193,78,.06); color: #D9B25A; font-size: 12px; line-height: 1.5; }
@media (max-width: 900px) { #rb-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 420px) { .rb-grid { grid-template-columns: minmax(0, 1fr); } .rb-nums b { font-size: 15px; } }


/* ================= Fluxos ================= */
.fl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fl-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 16px; background: #050505; box-shadow: inset 0 0 0 1px var(--line); color: inherit; }
.fl-card:hover { box-shadow: inset 0 0 0 1px #2A2345; color: inherit; }
.fl-name { font-size: 17px; color: var(--ink); }
.fl-bots { display: flex; gap: 6px; flex-wrap: wrap; }
.fl-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fl-tpl { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; border: 0; background: #070707; box-shadow: inset 0 0 0 1px var(--line-2); text-align: left; color: var(--ink-3); font-size: 12px; }
.fl-tpl b { color: var(--ink); font-size: 14px; font-weight: 500; }
.fl-tpl[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--violet), 0 0 0 1px var(--violet); background: #0B0915; }

.fl-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fl-head .grow { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.fl-title { background: none; border: 0; outline: none; color: var(--ink); font-size: 26px; font-weight: 400; letter-spacing: -.02em; padding: 0; width: 100%; }
.fl-title:focus { box-shadow: 0 1px 0 var(--violet); }
.fl-body { display: grid; grid-template-columns: 230px minmax(0, 1fr) 340px; gap: 32px; margin-top: 28px; align-items: start; }
.fl-steps { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 16px; }
.fl-steps button { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 0; border-radius: 12px; background: none; color: var(--muted); text-align: left; }
.fl-steps button b { display: block; color: var(--ink-2); font-weight: 400; font-size: 14px; }
.fl-steps button small { font-size: 12px; line-height: 1.35; }
.fl-steps button[aria-current="true"] { background: #0D0B17; box-shadow: inset 0 0 0 1px #221C3D; }
.fl-steps button[aria-current="true"] b { color: var(--ink); }
.fl-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 12px; background: #111; color: var(--ink-3); }
.fl-steps button[aria-current="true"] .fl-n { background: var(--violet); color: #fff; box-shadow: 0 0 12px rgba(139,108,255,.6); }
.fl-form { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fl-h { margin: 0; font-size: 20px; font-weight: 400; }
.fl-p { margin: -10px 0 0; font-size: 13px; }
.fl-ta { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; font-family: inherit; }
.fl-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fl-row .input { flex: 1; min-width: 120px; }
.fl-card2 { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 14px; background: #050505; box-shadow: inset 0 0 0 1px var(--line); }
.fl-sub { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.fl-deliv { display: flex; flex-direction: column; gap: 10px; }
.fl-media { display: flex; gap: 8px; flex-wrap: wrap; }
.fl-thumb { position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: #0B0B0B; display: grid; place-items: center; }
.fl-thumb img, .fl-thumb video { width: 100%; height: 100%; object-fit: cover; }
.fl-thumb .icon-btn { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; background: rgba(0,0,0,.7); }
.fl-add { width: 96px; height: 96px; border-radius: 10px; border: 1px dashed #2A2A2A; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--ink-3); font-size: 13px; }
.fl-add small { font-size: 10px; color: var(--muted); }
.fl-add:hover { border-color: var(--violet); color: var(--ink); }
.fl-res { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fl-res .grow { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fl-res b { font-weight: 400; color: var(--ink); }
.fl-pct { font-size: 22px; font-weight: 300; color: var(--violet-2); }

/* Prévia: conversa do Telegram no escuro */
.fl-preview { position: sticky; top: 16px; }
.tg { min-height: 420px; max-height: 70vh; overflow-y: auto; padding: 16px 12px; border-radius: 18px; display: flex; flex-direction: column; gap: 6px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(139,108,255,.08), transparent 60%), #07070A; box-shadow: inset 0 0 0 1px #16141F; }
.tg-you { align-self: flex-end; max-width: 80%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #2B2150; color: #fff; font-size: 13px; margin-bottom: 6px; }
.tg-msg { align-self: flex-start; max-width: 92%; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: #15151B; color: #EDEDF2; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.tg-msg code { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #B9A6FF; }
.tg-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 3px; margin: -4px -6px 8px; border-radius: 10px; overflow: hidden; }
.tg-media img, .tg-media video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.tg-media.blur { filter: blur(3px); min-height: 60px; display: grid; place-items: center; }
.tg-qr { width: 110px; height: 110px; margin: 2px auto 8px; border-radius: 8px; background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0/14px 14px; box-shadow: 0 0 0 6px #fff; }
.tg-btns { display: flex; flex-direction: column; gap: 4px; max-width: 92%; margin-bottom: 10px; }
.tg-btns span { padding: 8px; border-radius: 10px; background: rgba(139,108,255,.14); color: #D8CFFF; font-size: 12px; text-align: center; }
@media (max-width: 1300px) { .fl-body { grid-template-columns: 200px minmax(0, 1fr); } .fl-preview { grid-column: 1 / -1; position: static; } .fl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .fl-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fl-steps { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .fl-steps button { flex-shrink: 0; }
  .fl-steps button small { display: none; }
  .fl-grid, .fl-tpls { grid-template-columns: minmax(0, 1fr); }
}
.fl-form .hint { font-size: 12px; color: var(--muted); line-height: 1.5; }
.fl-form .hint b { color: var(--ink-3); font-weight: 500; }


/* ================= Links ================= */
.lk-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.lk-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lk-name { color: var(--ink); font-size: 15px; }
.lk-url { font-size: 12px; color: var(--violet-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lk-nums > div { display: flex; flex-direction: column; gap: 2px; }
.lk-nums small { font-size: 11px; color: var(--muted); }
.lk-nums b { font-weight: 300; font-size: 17px; }
.lk-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lk-slug { display: flex; align-items: center; gap: 0; border: 1px solid var(--line-2); border-radius: 10px; background: #070707; padding-left: 12px; overflow: hidden; }
.lk-slug .muted { font-size: 12px; white-space: nowrap; }
.lk-slug .input { border: 0; background: none; padding-left: 2px; }
.lk-bots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lk-bot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #070707; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; font-size: 13px; }
.lk-bot input { accent-color: #8B6CFF; }
.lk-utm { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
@media (max-width: 1200px) { .lk-row { grid-template-columns: minmax(0, 1fr); gap: 12px; } .lk-act { justify-content: flex-start; } }
@media (max-width: 900px) { .lk-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lk-bots { grid-template-columns: minmax(0, 1fr); } }
.lk-nums b { white-space: nowrap; font-size: 16px; }
.lk-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; }
@media (max-width: 1200px) { .lk-row { grid-template-columns: minmax(0, 1fr); } }


/* ================= Grupos e remarketing ================= */
.dp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.dp-form { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dp-form .hint { font-size: 12px; color: var(--muted); }
.dp-it .grow { white-space: normal; display: flex; flex-direction: column; gap: 3px; }
.dp-it small { font-size: 12px; }
@media (max-width: 1100px) { .dp-grid { grid-template-columns: minmax(0, 1fr); } .dp-grid .fl-preview { position: static; } }


/* ================= Ferramentas de mídia ================= */
.mt-unlock { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; max-width: 760px; }
.mt-tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.mt-tool { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; min-height: 124px; text-align: left; border-radius: var(--radius); border: 1px solid var(--line); background: #050505; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; }
.mt-tool:hover { border-color: #2A2A2A; }
.mt-tool[aria-pressed="true"] { border-color: rgba(139,108,255,.55); background: rgba(139,108,255,.06); }
.mt-tool.locked { opacity: .55; }
.mt-tool-t { font-size: 14px; }
.mt-tool-d { font-size: 12px; color: var(--muted); line-height: 1.4; flex: 1; }
.mt-tool-s { font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.mt-tool[aria-pressed="true"] .mt-tool-s { color: var(--violet-2); }
.mt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; margin-top: 32px; }
.mt-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mt-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 20px; border: 1px dashed #2A2A2A; border-radius: var(--radius); cursor: pointer; text-align: center; transition: border-color .2s, background .2s; }
.mt-drop:hover, .mt-drop.over { border-color: var(--violet); background: rgba(139,108,255,.04); }
.mt-drop-t { font-size: 14px; color: var(--ink); }
.mt-drop small { font-size: 12px; color: var(--muted); }
.mt-files { display: flex; flex-direction: column; gap: 6px; }
.mt-files:empty { display: none; }
.mt-file { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.mt-file.on { box-shadow: inset 0 0 0 1px rgba(139,108,255,.55); background: rgba(139,108,255,.05); }
.mt-thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: #0B0B0B; display: grid; place-items: center; flex-shrink: 0; }
.mt-thumb img, .mt-thumb video { width: 100%; height: 100%; object-fit: cover; }
.mt-file-i { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-file-n { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.mt-file small { font-size: 11px; }
.mt-steps { display: flex; flex-direction: column; }
.mt-step { border-top: 1px solid var(--line); padding: 18px 0; }
.mt-step header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mt-step h3 { margin: 0; font-size: 15px; font-weight: 400; }
.mt-step header p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.mt-step.on h3 { color: var(--violet-2); }
.mt-body { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; max-width: 560px; }
.mt-always, .mt-lock { font-size: 11px; letter-spacing: .06em; color: var(--muted); white-space: nowrap; padding: 4px 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.mt-found { margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.8; }
.mt-found b { font-weight: 400; color: var(--ink); }
.mt-tag { display: inline-block; padding: 0 8px; border-radius: 10px; background: rgba(242,193,78,.08); color: #D9B25A; font-size: 12px; line-height: 20px; }
.mt-range { display: flex; flex-direction: column; gap: 6px; }
.mt-range > span { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); }
.mt-range b { font-weight: 400; color: var(--ink); }
.mt-range input { width: 100%; accent-color: #8B6CFF; }
.mt-pos-row { display: flex; align-items: center; gap: 14px; }
.mt-pos { display: grid; grid-template-columns: repeat(3, 32px); gap: 4px; }
.mt-pos button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: none; color: var(--muted); font-size: 13px; }
.mt-pos button[aria-pressed="true"] { color: #fff; border-color: var(--violet); background: rgba(139,108,255,.12); }
.mt-side { position: sticky; top: 16px; display: flex; flex-direction: column; min-width: 0; }
.mt-stage { position: relative; display: grid; place-items: center; min-height: 280px; max-height: 560px; padding: 12px; border-radius: var(--radius); background: repeating-conic-gradient(#0A0A0A 0 25%, #070707 0 50%) 0 0 / 20px 20px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.mt-stage canvas { max-width: 100%; max-height: 536px; width: auto; height: auto; border-radius: 6px; display: block; }
.mt-stage p { font-size: 13px; }
.mt-dim { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: var(--muted); background: rgba(0,0,0,.6); padding: 2px 6px; border-radius: 6px; }
.mt-audio { display: flex; flex-direction: column; gap: 10px; padding: 12px; width: 100%; }
.mt-audio audio { width: 100%; }
.mt-res { display: flex; flex-direction: column; margin-top: 16px; }
.mt-res-it { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.mt-res-it .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mt-res-it small { font-size: 11px; line-height: 1.45; }
@media (max-width: 1200px) { .mt-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .mt-grid { grid-template-columns: minmax(0, 1fr); } .mt-side { position: static; order: -1; } }
@media (max-width: 600px) { .mt-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mt-tool { min-height: 112px; padding: 14px; } }


/* ================= Gateways ================= */
.gw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.gw-kpi { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: #050505; min-width: 0; }
.gw-kpi > span { font-size: 12px; color: var(--muted); }
.gw-kpi b { font-weight: 300; font-size: 26px; color: var(--ink); }
.gw-kpi small { font-size: 12px; color: var(--ink-3); }
.gw-methods { display: flex; gap: 6px; flex-wrap: wrap; min-height: 39px; align-items: center; }
.gw-m { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 11px; line-height: 20px; letter-spacing: .04em; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.gw-m.on { color: var(--violet-2); box-shadow: inset 0 0 0 1px rgba(139,108,255,.4); background: rgba(139,108,255,.06); }
.gw-note { font-size: 13px; margin: 0 0 16px; max-width: 760px; }
.gw-list { display: flex; flex-direction: column; gap: 12px; }
.gw-card { border: 1px solid var(--line); border-radius: var(--radius); background: #050505; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.gw-card.off { opacity: .6; }
.gw-card header { display: flex; align-items: center; gap: 14px; }
.gw-pos { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #0B0B0B; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; color: var(--ink); flex-shrink: 0; }
.gw-pos-t { color: var(--faint); }
.gw-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gw-name { font-size: 15px; color: var(--ink); }
.gw-title small { font-size: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gw-head-act { display: flex; align-items: center; gap: 6px; }
.gw-head-act .icon-btn[disabled] { opacity: .3; }
.gw-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(245,138,138,.06); color: var(--down); font-size: 12px; line-height: 1.5; }
.gw-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gw-nums > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gw-nums small { font-size: 11px; color: var(--muted); }
.gw-nums b { font-weight: 300; font-size: 18px; }
.gw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gw-more:empty { display: none; }
.gw-more { border-top: 1px solid var(--line); padding-top: 16px; }
.gw-cfg, .gw-connect { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.gw-flows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.gw-market { margin-bottom: 36px; }
.gw-market-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.gw-market-h h2 { margin: 0; font-size: 15px; font-weight: 400; }
.gw-market-h p { margin: 0; font-size: 13px; }
.gw-cat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gw-item { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: #050505; }
.gw-item.on { grid-column: 1 / -1; border-color: rgba(139,108,255,.45); }
.gw-item p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.gw-item-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gw-item-f .btn { margin-left: auto; }
.gw-item.soon { opacity: .6; flex-direction: row; justify-content: space-between; align-items: flex-start; }
.gw-modal { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; }
.gw-dialog { width: min(420px, 100%); background: #070707; border: 1px solid var(--line-2); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.gw-dialog h3 { margin: 0; font-size: 17px; font-weight: 400; }
.gw-dialog p { margin: 0; font-size: 13px; line-height: 1.55; }
.gw-qr { width: 200px; height: 200px; border-radius: 12px; background: #fff; padding: 8px; align-self: center; }
.gw-dialog .code { width: 100%; }
@media (max-width: 1100px) { .gw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gw-card header { flex-wrap: wrap; row-gap: 8px; } .gw-title { flex: 1 1 calc(100% - 52px); } .gw-head-act { width: 100%; justify-content: flex-end; } .gw-cat, .gw-flows { grid-template-columns: minmax(0, 1fr); } .gw-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gw-card { padding: 16px; } }
@media (max-width: 480px) { .gw-kpi { padding: 14px; } .gw-kpi b { font-size: 20px; } .gw-kpi small { font-size: 11px; } }


/* ================= Trackeamento ================= */
.tr-funnel { display: flex; align-items: stretch; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.tr-funnel:empty { display: none; }
.tr-step { flex: 1; min-width: 108px; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.tr-step small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.tr-step b { font-weight: 300; font-size: 18px; }
.tr-arrow { align-self: center; color: var(--faint); }
.tr-logo { font-size: 12px; letter-spacing: .02em; }
.tr-meta { color: #8FB3FF; } .tr-tiktok { color: #FF7AA8; } .tr-x { color: var(--ink); } .tr-utmify { color: #7CE0B5; }
.tr-form { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.tr-provs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tr-prov { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 12px; border-radius: 10px; border: 1px solid var(--line-2); background: #070707; color: var(--ink); text-align: left; cursor: pointer; }
.tr-prov b { font-weight: 400; font-size: 14px; } .tr-prov small { font-size: 11px; color: var(--muted); }
.tr-prov.on { border-color: var(--violet); background: rgba(139,108,255,.08); }
.tr-prov.soon { opacity: .45; cursor: default; }
.tr-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tr-evs { display: flex; flex-direction: column; gap: 6px; }
.tr-ev { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #070707; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; }
.tr-ev > input[type="checkbox"] { accent-color: #8B6CFF; }
.tr-ev > span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tr-ev b { font-weight: 400; font-size: 13px; } .tr-ev small { font-size: 11px; color: var(--muted); }
.tr-twid { max-width: 170px; height: 34px; font-size: 12px; }
.tr-how { display: flex; flex-direction: column; gap: 28px; max-width: 980px; }
.tr-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; counter-reset: s; }
.tr-path li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: #050505; counter-increment: s; }
.tr-path li::before { content: counter(s); font-size: 11px; color: var(--violet-2); }
.tr-path b { font-weight: 400; font-size: 14px; } .tr-path span { font-size: 12px; line-height: 1.45; } .tr-path code { align-self: flex-start; font-size: 11px; }
.tr-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tr-tips section { padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); }
.tr-tips h3 { margin: 0 0 8px; font-size: 14px; font-weight: 400; }
.tr-tips p { margin: 0; font-size: 13px; line-height: 1.6; }
@media (max-width: 1000px) { .tr-path { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr-provs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tr-tips, .tr-grid2 { grid-template-columns: minmax(0, 1fr); } .tr-provs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr-ev { flex-wrap: wrap; } .tr-twid { max-width: none; width: 100%; } }


/* ================= Checkout ================= */
.co-thumb { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; background: #0B0B0B center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--line-2); position: relative; }
.co-thumb:not([style*="url"])::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; box-shadow: 0 0 0 2px var(--a), 0 0 14px 2px var(--a); }
.co-url { color: var(--violet-2); }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.co-form { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.co-sec { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.co-sec h3 { margin: 0; font-size: 13px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.co-colors { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.co-color { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--a); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0,0,0,.4); }
.co-color[aria-pressed="true"] { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--a); }
.co-colors input[type="color"] { width: 34px; height: 34px; border: 0; background: none; padding: 0; cursor: pointer; }
.co-items { display: flex; flex-direction: column; gap: 8px; }
.co-item { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; }
.co-item textarea { min-height: 44px; }
.co-file { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-preview { position: sticky; top: 16px; }
.co-pv { border-radius: 18px; padding: 14px; background: radial-gradient(circle at 50% 0, rgba(139,108,255,.14), transparent 60%), #000; box-shadow: inset 0 0 0 1px var(--line); }
.co-pv-in { display: flex; flex-direction: column; gap: 8px; }
.co-pv-img { aspect-ratio: 16 / 10; border-radius: 12px; background: #0B0B0B center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--line-2); }
.co-pv-name { font-weight: 400; font-size: 17px; color: var(--ink); }
.co-pv-price { font-size: 22px; font-weight: 300; color: var(--ink); }
.co-pv-in-f { height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); background: #050505; }
.co-pv-bump { font-size: 11px; padding: 8px; border-radius: 8px; border: 1px dashed var(--a); color: var(--ink-3); }
.co-pv-btn { height: 36px; border-radius: 18px; background: var(--a); color: #fff; display: grid; place-items: center; font-size: 13px; }
.co-aff-new { margin-top: 8px; flex-wrap: wrap; }
.co-pct { display: flex; align-items: center; gap: 4px; }
.co-pct .input { width: 70px; height: 34px; text-align: right; }
@media (max-width: 1100px) { .co-grid { grid-template-columns: minmax(0, 1fr); } .co-preview { position: static; order: -1; max-width: 360px; } }
@media (max-width: 640px) { .co-item { grid-template-columns: minmax(0, 1fr) auto; } .co-item > *:nth-child(2), .co-item > *:nth-child(3) { grid-column: 1 / -1; } }


/* ================= Bio Link ================= */
.bio-top { display: flex; gap: 16px; align-items: flex-start; }
.bio-av { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; background: #0B0B0B center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--line-2); display: grid; place-items: center; cursor: pointer; color: var(--muted); font-size: 12px; }
.bio-av:hover { box-shadow: inset 0 0 0 1px var(--violet); }
.bio-items { display: flex; flex-direction: column; gap: 8px; }
.bio-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: #070707; box-shadow: inset 0 0 0 1px var(--line-2); }
.bio-mv { display: flex; flex-direction: column; gap: 4px; }
.bio-mv .icon-btn { width: 28px; height: 28px; }
.bio-mv .icon-btn[disabled] { opacity: .25; }
.bio-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bio-hi { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); cursor: pointer; }
.bio-hi input { accent-color: #8B6CFF; }
.bio-phone { width: 300px; max-width: 100%; height: 600px; border-radius: 36px; padding: 10px; background: #0A0A0A; box-shadow: inset 0 0 0 1px #262626, 0 30px 80px -30px rgba(139,108,255,.35); }
.bio-phone iframe { width: 100%; height: 100%; border: 0; border-radius: 28px; background: #000; }
@media (max-width: 1100px) { .bio-phone { height: 520px; margin: 0 auto; } }


/* ================= Webhooks de saída ================= */
.wh-docs { margin-top: 28px; }
.wh-docs summary { list-style: none; width: max-content; cursor: pointer; }
.wh-docs summary::-webkit-details-marker { display: none; }
.wh-doc { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; max-width: 900px; }
.wh-doc p { margin: 0; font-size: 13px; line-height: 1.7; }
.wh-pre { margin: 0; padding: 16px; border-radius: 12px; background: #050505; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-size: 12px; line-height: 1.55; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }


/* ================= Confirmação e cards de fluxo ================= */
.confirm-box { width: min(420px, calc(100% - 32px)); gap: 14px; }
.confirm-box h2 { margin: 0; font-size: 17px; font-weight: 400; line-height: 1.35; }
.confirm-box p { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.6; }
.confirm-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.btn.danger-solid { background: #3A1414; color: #FFB4B4; border-color: #5A1F1F; }
.btn.danger-solid:hover { background: #4A1818; color: #fff; }
.fl-card.off { opacity: .62; }
.fl-card .fl-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-card .fl-name:hover { color: var(--violet-2); }
.fl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.fl-card-act { display: flex; gap: 6px; flex-wrap: wrap; }


/* ================= Passos do fluxo: vender mais separado ================= */
.fl-steps-lab { padding: 14px 12px 4px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fl-steps button .grow { flex: 1; min-width: 0; }
.fl-on { flex-shrink: 0; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: #262626; }
.fl-on.is-on { background: var(--up); box-shadow: 0 0 8px rgba(94,230,160,.6); }
.tg-sys { align-self: center; font-size: 11px; color: var(--muted); padding: 2px 10px; border-radius: 10px; background: rgba(255,255,255,.04); margin: 4px 0; }
@media (max-width: 900px) { .fl-steps-lab { display: none; } }


/* ================= Campos do editor de fluxo ================= */
.vf { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vf-l { font-size: 13px; color: var(--ink-3); user-select: none; }
.vf-box { position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 14px; background: #0B0B0B; transition: background .2s, box-shadow .2s; cursor: text; }
.vf-box:hover { background: #0F0F0F; }
.vf-box:focus-within, .vsel[open] .vf-box { background: #0C0B14; box-shadow: inset 0 0 0 1px rgba(139,108,255,.45), 0 0 0 4px rgba(139,108,255,.07); }
.vf input { flex: 1; width: 100%; min-width: 0; height: 46px; padding: 0; border: 0; background: none; outline: none; color: var(--ink); font-size: 15px; caret-color: var(--violet-2); }
.vf input::placeholder { color: #4A4A4A; }
.vf input:focus-visible, .rt:focus-visible { outline: none; }
.vf-box > i { font-style: normal; font-size: 14px; color: #5E5E5E; flex-shrink: 0; }
.vf-box:focus-within > i { color: var(--ink-3); }
.fl-row { gap: 12px; }
.fl-row .vf { flex: 1 1 200px; }
.fl-row .vf-num { flex: 1 1 120px; max-width: 170px; }
.fl-row > .icon-btn { align-self: flex-end; margin-bottom: 8px; }
.fl-sub-t { font-weight: 400; color: var(--ink); }

.vsel > summary { list-style: none; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.vsel > summary::-webkit-details-marker { display: none; }
.vsel > summary:focus-visible { outline: none; }
.vsel > summary:focus-visible .vf-box { box-shadow: inset 0 0 0 1px rgba(139,108,255,.45); }
.vsel .vf-box { cursor: pointer; padding-right: 44px; }
.vsel .vf-box::after { content: ""; position: absolute; right: 20px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid #6A6A6A; border-bottom: 1.5px solid #6A6A6A; transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease); }
.vsel[open] .vf-box::after { transform: translateY(-20%) rotate(225deg); border-color: var(--violet-2); }
.vsel { position: relative; }
.vsel-v { font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsel-v.ph { color: #5A5A5A; }
.vsel-pop { left: 0; right: 0; width: auto; max-width: none; }
.vsel-empty { margin: 0; padding: 10px 12px; font-size: 12px; color: var(--muted); }

.vf-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vf-rt .vf-box { display: block; padding: 13px 16px; }
.rt { font-size: 15px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow-y: auto; caret-color: var(--violet-2); }
.rt:empty::before { content: attr(data-ph); color: #4A4A4A; pointer-events: none; }
.rt b, .rt strong { font-weight: 600; color: #fff; }
.rt code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 1px 5px; border-radius: 5px; background: #151515; }
.rt-bar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; opacity: .55; transition: opacity .2s; }
.vf-rt:hover .rt-bar, .vf-rt:focus-within .rt-bar { opacity: 1; }
.rt-bar button { height: 24px; min-width: 24px; padding: 0 8px; border: 0; border-radius: 12px; background: none; color: var(--ink-3); font-size: 12px; transition: background .15s, color .15s; }
.rt-bar button:hover { background: #141414; color: var(--ink); }
.rt-bar button[data-var] { color: var(--violet-2); }
.rt-bar button[data-var]:hover { background: rgba(139,108,255,.12); }
.rt-sep { width: 1px; height: 12px; margin: 0 4px; background: #262626; }
.rt-count { position: absolute; right: 12px; bottom: 6px; font-size: 11px; color: var(--muted); }

.fl-deliv { display: flex; flex-direction: column; gap: 10px; }
.seg { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 2px; padding: 4px; border-radius: 14px; background: #0B0B0B; }
.seg button { height: 34px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: 13px; transition: background .15s, color .15s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: #1A1530; color: #fff; box-shadow: 0 0 16px rgba(139,108,255,.12); }

.fl-hrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.fl-hrow > div { display: flex; flex-direction: column; gap: 6px; }
.fl-hrow .fl-p { margin: 0; line-height: 1.55; }
.fl-hrow .switch { margin-top: 2px; }
.fl-secs { display: flex; flex-direction: column; gap: 22px; margin-top: 6px; }
.fl-secs > .fl-sub:first-child { border-top: 0; padding-top: 0; }
.fl-sub { gap: 18px; padding-top: 22px; }
.fl-off { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 16px; background: #070707; color: var(--muted); font-size: 13px; line-height: 1.5; }
.fl-off i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #2A2A2A; }
.fl-off b { display: block; color: var(--ink-2); font-weight: 400; font-size: 14px; }


/* ================= Grupo de cache ================= */
.cg-modal { width: min(480px, calc(100% - 32px)); gap: 16px; }
.cg-lead { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.cg-pick { display: flex; align-items: flex-end; gap: 8px; }
.cg-pick .vsel { flex: 1; min-width: 0; }
.cg-ref { height: 48px; border-radius: 14px; flex-shrink: 0; }
.cg-ev { display: flex; flex-direction: column; gap: 4px; }
.rb-tag.rb-cache { background: rgba(139,108,255,.12); color: var(--violet-2); }
.fl-add-off { border-style: dashed; opacity: .6; text-align: center; padding: 0 6px; }
.fl-add-off small { line-height: 1.3; }
.fl-add.busy { pointer-events: none; border-color: var(--violet); color: var(--violet-2); }
.cg-modal { overflow-x: hidden; }
.cg-modal .vsel-pop { position: static; margin-top: 6px; max-height: 220px; box-shadow: inset 0 0 0 1px var(--line-2); }
.cg-pick { align-items: flex-start; }
.cg-ref { margin-top: 27px; }


/* ================= Lista de leads (minimalista) ================= */
.lead-list { display: flex; flex-direction: column; gap: 8px; }
.lead-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(180deg, #0C0C0F 0%, #070708 100%); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.lead-row:hover { box-shadow: inset 0 0 0 1px #2E2A44, 0 8px 22px -14px rgba(0,0,0,.9); }
.lead-av { flex-shrink: 0; }
.lead-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lead-nm { color: var(--ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-sub { font-size: 12px; color: var(--muted); }
.lead-badge { flex-shrink: 0; }
.lead-date { flex-shrink: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 132px; text-align: right; }
@media (max-width: 640px) { .lead-date { min-width: 0; font-size: 12px; } .lead-row { padding: 11px 14px; gap: 12px; } }

/* ================= Marca dos gateways ================= */
.gw-logo { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; background: var(--c, #5B6472); color: #fff; font-size: 17px; font-weight: 600; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(0,0,0,.25); }
.gw-item-h { display: flex; align-items: flex-start; gap: 12px; }
.gw-item-h > div { min-width: 0; }
.gw-card header .gw-logo { align-self: center; }
.gw-logo-img { background: #0E0E12; box-shadow: inset 0 0 0 1px var(--line-2); }
.gw-logo-img img { width: 26px; height: 26px; object-fit: contain; display: block; }

/* ================= Chat com o lead ================= */
.chat-modal { width: min(480px, calc(100% - 24px)); height: min(620px, calc(100dvh - 48px)); padding: 0; gap: 0; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.chat-head .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chat-name { color: var(--ink); font-size: 15px; }
.chat-sub { font-size: 12px; color: var(--muted); }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: #050505; }
.chat-empty { margin: auto; max-width: 300px; text-align: center; font-size: 12px; color: var(--muted); line-height: 1.6; }
.chat-b { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; display: flex; flex-direction: column; gap: 2px; word-break: break-word; }
.chat-b.in { align-self: flex-start; background: #141414; border-bottom-left-radius: 4px; color: var(--ink); }
.chat-b.out { align-self: flex-end; background: #2B2150; border-bottom-right-radius: 4px; color: #fff; }
.chat-tx { white-space: pre-wrap; }
.chat-t { align-self: flex-end; font-size: 10px; color: rgba(255,255,255,.5); }
.chat-b.in .chat-t { color: var(--muted); }
.chat-b.out.bot { background: #18142A; border: 1px solid #2A2245; }
.chat-who { font-size: 11px; font-weight: 600; color: #A78BFA; }
.chat-b.out:not(.bot) .chat-who { color: rgba(255,255,255,.7); }
.chat-media { font-size: 12px; color: rgba(255,255,255,.65); background: rgba(255,255,255,.06); border-radius: 8px; padding: 6px 8px; margin: 2px 0; }
.chat-btns { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.chat-btns span { display: block; text-align: center; font-size: 12.5px; padding: 7px 10px; border-radius: 9px; background: rgba(167,139,250,.12); color: #DDD3FF; }
.chat-click { align-self: center; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); background: #0F0F12; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; margin: 2px 0; }
.chat-click b { color: var(--ink); font-weight: 500; }
.chat-click .n { font-size: 10px; opacity: .7; }
.chat-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.chat-input .input { flex: 1; }
.lead-chat { flex-shrink: 0; }
@media (max-width: 640px) { .chat-modal { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; } }

/* ================= Grade de placas (Premiações) ================= */
.placa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; }
.placa-card { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.placa-art { position: relative; border-radius: 18px; overflow: hidden; }
.placa-art svg { width: 100%; height: auto; display: block; transition: transform .25s var(--ease), filter .25s; }
.placa-card:hover .placa-art svg { transform: translateY(-4px); }
.placa-card:not(.on) .placa-art svg { filter: grayscale(1) brightness(.5); }
.placa-card.next .placa-art svg { filter: grayscale(.55) brightness(.72); }
.placa-lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; font-weight: 500; color: var(--ink-2); background: rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
.placa-card figcaption { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.placa-cap { color: var(--ink); font-size: 14px; }
.placa-state { font-size: 12px; }
.placa-state.up { color: var(--up); }

/* ================= Menu de passos do fluxo: ícone por etapa ================= */
.fl-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: #0E0E12; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .18s, color .18s, box-shadow .18s; }
.fl-ic svg { width: 18px; height: 18px; }
.fl-steps button[aria-current="true"] .fl-ic { background: linear-gradient(180deg, #2A2150, #171034); color: #fff; box-shadow: inset 0 0 0 1px #3A2E6E, 0 0 16px -4px var(--violet); }
.fl-steps button:hover .fl-ic { color: var(--ink); }

/* ================= Barra de números no topo do fluxo ================= */
.fl-stats { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding: 12px 18px; border-radius: 14px; background: #070708; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--muted); }
.fl-stats b { color: var(--ink); font-weight: 500; margin-right: 4px; }
.fl-stats b.up { color: var(--up); }
.fl-stats > i { width: 1px; height: 14px; background: var(--line-2); }
.fl-stats-sub { margin-left: auto; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.fl-thumb .fl-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8); pointer-events: none; }
@media (max-width: 560px){ .fl-stats-sub { display: none; } }

/* ===== Visão geral: seletor de período alinhado (Hoje/Ontem/7d/30d) ===== */
.head-row { align-items: center; }
.head-row .seg {
  display: flex; flex-wrap: nowrap; align-self: center; gap: 3px;
  padding: 4px; border-radius: 14px; background: #0B0B0B;
  box-shadow: inset 0 0 0 1px var(--line);
}
.head-row .seg button {
  height: 34px; padding: 0 18px; border-radius: 10px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  background: none; box-shadow: none; transition: background .15s, color .15s;
}
.head-row .seg button:hover { color: var(--ink); }
.head-row .seg button[aria-selected="true"] {
  background: #17151F; color: #fff; box-shadow: none;
}
@media (max-width: 900px) {
  .head-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .head-row .seg { width: 100%; align-self: stretch; }
  .head-row .seg button { flex: 1 1 0; min-width: 0; padding: 0; }
}

/* ================= Mídias grandes no editor (3 por linha, quadradas) ================= */
.fl-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fl-thumb, .fl-add { width: auto; height: auto; aspect-ratio: 1; border-radius: 14px; }
.fl-thumb { background: #0B0B0E; box-shadow: inset 0 0 0 1px var(--line); }
.fl-thumb .icon-btn { top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 10px; background: rgba(0,0,0,.65); }
.fl-thumb .fl-play { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; padding-left: 3px; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); font-size: 18px; }
.fl-kind { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 7px; font-size: 11px; color: #fff; background: rgba(34,197,94,.85); }
.fl-kind.v { background: rgba(139,108,255,.9); }
.fl-add { gap: 8px; padding: 12px; border: 1.5px dashed #2A2A2E; background: #08080A; font-size: 14px; text-align: center; }
.fl-add-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #141418; font-size: 22px; line-height: 1; color: var(--ink-2); }
.fl-add:hover .fl-add-ic { color: var(--violet-2); }
.fl-add small { font-size: 11px; line-height: 1.4; }
@media (max-width: 560px) { .fl-media { gap: 8px; } .fl-add small { display: none; } .fl-thumb .fl-play { width: 40px; height: 40px; font-size: 14px; } }

/* ================= Entrega: seletor único estilo Shark ================= */
.fl-deliv { gap: 12px; }
.dl-row { display: flex; align-items: stretch; gap: 8px; }
.dl-sel { flex: 1; min-width: 0; }
.dl-sel > summary { gap: 0; }
.dl-cur { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; color: var(--ink); }
.dl-cur > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; color: var(--c); }
.dl-ic svg { width: 18px; height: 18px; }
.dl-ref { width: 52px; height: auto; min-height: 52px; border-radius: 14px; background: #0B0B0E; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }
.dl-ref svg { width: 18px; height: 18px; }
.dl-ref:hover { color: var(--ink); }
.dl-ref.spin svg { animation: dlspin .8s linear infinite; }
@keyframes dlspin { to { transform: rotate(360deg); } }
.dl-pop { max-height: 340px; overflow-y: auto; padding: 6px; }
.dl-pop button[role="option"] { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--ink-3); text-align: left; }
.dl-pop button[role="option"] > span:not(.dl-ic) { flex: 1; min-width: 0; }
.dl-pop button[role="option"] em { font-style: normal; font-size: 12px; color: var(--muted); }
.dl-pop button[role="option"]:hover { background: #15151A; color: var(--ink); }
.dl-pop button[role="option"][aria-selected="true"] { background: #17151F; color: #fff; }
.dl-pop button[role="option"] span.dl-ic { flex: none; display: inline-grid; overflow: visible; }
.dl-pop button[role="option"] > span:not(.dl-ic) { flex: 1; display: block; text-align: left; }
.dl-pop button[role="option"] .dl-bad { flex: none; }
.dl-bad { font-size: 11px; font-weight: 500; color: #F87171; white-space: nowrap; }
.dl-sep { width: 60%; margin: 6px auto; border: 0; border-top: 1px solid var(--line-2); }
.dl-note { display: flex; gap: 10px; margin: 0; padding: 14px; border-radius: 12px; background: #0B0B0E; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.dl-warn { background: rgba(245,158,11,.07); box-shadow: inset 0 0 0 1px rgba(245,158,11,.25); }
.dl-warn b { color: #F59E0B; font-weight: 500; }
.dl-default { display: flex; flex-direction: column; gap: 14px; }

/* ================= Pagamento estilo Shark ================= */
.pay-tabs { margin: 4px 0 2px; }
.pay-tabs button[aria-selected="true"] { background: #17151F; color: #fff; }
.pay-layouts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay-lay { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 14px 14px; border: 0; border-radius: 16px; background: #0B0B0E; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); cursor: pointer; text-align: center; }
.pay-lay:hover { color: var(--ink); }
.pay-lay[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--violet); color: #fff; background: #110F18; }
.pay-lay strong { font-size: 14px; font-weight: 500; }
.pay-lay[aria-pressed="true"] strong { color: var(--violet-2); }
.pay-lay small { font-size: 11px; line-height: 1.4; color: var(--muted); }
.pay-thumb { display: flex; flex-direction: column; gap: 5px; width: 100%; max-width: 220px; padding: 12px; margin-bottom: 4px; border-radius: 10px; background: #141418; }
.pay-thumb i { display: block; height: 6px; border-radius: 3px; background: #26262C; }
.pay-thumb i:nth-child(1) { width: 85%; } .pay-thumb i:nth-child(2) { width: 60%; } .pay-thumb i:nth-child(3) { width: 72%; }
.pay-thumb b { display: block; height: 16px; margin-top: 4px; border-radius: 5px; background: #2A2650; }
.pay-thumb.compacto b + b { width: 70%; }
.pay-opt { display: flex; flex-direction: column; gap: 10px; }
.pay-btn { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #182233; box-shadow: inset 0 0 0 1px #24324A; }
.pay-btn.off { background: #0B0B0E; box-shadow: inset 0 0 0 1px var(--line); opacity: .7; }
.pay-btn input[data-k] { flex: 1; min-width: 0; border: 0; background: none; color: #9CC3FF; font: inherit; font-size: 14px; text-align: center; outline: none; }
.pay-btn.off input[data-k] { color: var(--muted); }
.tg-msg code.tg-pre { display: block; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.35); white-space: pre-wrap; word-break: break-all; }
@media (max-width: 560px) { .pay-layouts { grid-template-columns: 1fr 1fr; gap: 8px; } .pay-lay small { display: none; } }

/* ================= Order bump por etapa ================= */
.bp-card { display: flex; flex-direction: column; gap: 14px; }
.bp-card.on { box-shadow: inset 0 0 0 1px var(--line-2); }
.bp-t { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: var(--ink); }
.bp-chks { display: flex; flex-direction: column; gap: 10px; margin: 4px 0; }
.bp-chk { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.bp-chk input { width: 18px; height: 18px; accent-color: var(--violet); }
.dl-bad-note { background: rgba(248,113,113,.07); box-shadow: inset 0 0 0 1px rgba(248,113,113,.3); }
.dl-bad-note b { color: #F87171; font-weight: 500; }

/* ---------- Gateway: janela de conectar / editar ---------- */
.gw-dialog.gwd { width: min(500px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; position: relative; align-items: stretch; gap: 16px; padding: 24px 24px 20px; background: #0B0B0E; }
.gwd .field { margin: 0; }
.gwd-x { position: absolute; top: 14px; right: 14px; }
.gwd-head { display: flex; align-items: flex-start; gap: 12px; padding-right: 28px; }
.gwd-head h3 { font-size: 18px; font-weight: 500; color: var(--ink); }
.gwd-head p { margin-top: 3px; }
.gwd-help { font-size: 13px; line-height: 1.5; color: #CFC6F5; background: rgba(124,92,255,.08); border: 1px solid rgba(124,92,255,.22); border-radius: 10px; padding: 11px 13px; }
.gwd-help a { color: #B9A6FF; white-space: nowrap; }
.gwd-sep { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.gwd-sep::before, .gwd-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gwd-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gwd-sc { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: #0F0F13; color: var(--ink-2, #bbb); cursor: pointer; font: inherit; transition: border-color .15s, background .15s; }
.gwd-sc b { font-weight: 500; font-size: 14px; color: var(--ink); }
.gwd-sc small { font-size: 12px; color: var(--muted); }
.gwd-sc svg { color: var(--muted); margin-bottom: 2px; }
.gwd-sc:hover { border-color: #3A3350; }
.gwd-sc[aria-pressed="true"] { border-color: #7C5CFF; background: rgba(124,92,255,.10); }
.gwd-sc[aria-pressed="true"] svg, .gwd-sc[aria-pressed="true"] b { color: #B9A6FF; }
.gwd-note { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--ink-2, #bbb); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.gwd-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.gwd-note b { color: var(--ink); font-weight: 500; }
.gwd .gw-flows { margin-top: -4px; }
.gwd-auto { margin: 0; }
.gwd-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 2px; }
.gwd-foot .grow { flex: 1; }
@media (max-width: 520px) { .gw-dialog.gwd { padding: 20px 16px 16px; } .gwd-sc { padding: 14px 8px; } }

/* ---------- Gateways: uma caixa por gateway (estilo Shark) ---------- */
.gw-info { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #0A0A0D; margin-bottom: 20px; }
.gw-info svg { flex: none; width: 18px; height: 18px; color: var(--muted); margin-top: 1px; }
.gw-info div { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.5; }
.gw-info b { font-weight: 500; color: var(--ink); font-size: 14px; }
.gw-info span { color: var(--muted); }
.gw-sec { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: #070709; margin-bottom: 20px; }
.gw-sec h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 15px; font-weight: 500; }
.gw-sec h2 svg { width: 17px; height: 17px; color: #A78BFA; }
.gw-count { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: #17151F; color: #B9A6FF; }
.gw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gw-box { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 14px; background: #0B0B0E; padding: 14px 14px 0; min-width: 0; }
.gw-box.off { opacity: .45; }
.gw-box.off:hover { opacity: .75; }
.gw-box-top { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.gw-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 12px; background: #17151F; color: var(--ink-2, #bbb); }
.gw-num.main { background: #7C5CFF; color: #fff; }
.gw-tag { font-size: 10.5px; padding: 3px 7px; border-radius: 6px; background: #141418; color: var(--muted); }
.gw-tag.main { background: rgba(124,92,255,.16); color: #C4B5FD; }
.gw-arrows { margin-left: auto; display: flex; gap: 2px; }
.gw-arrows .icon-btn { width: 26px; height: 26px; font-size: 13px; }
.gw-box-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 16px; text-align: center; }
.gw-box-mid .gw-logo { width: 56px; height: 56px; border-radius: 14px; font-size: 26px; }
.gw-box-mid .gw-logo-img img { width: 56px; height: 56px; border-radius: 14px; }
.gw-box-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; }
.gw-box-name b { font-weight: 600; font-size: 15px; color: var(--ink); }
.gw-scope { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: rgba(34,197,94,.08); color: #4ADE80; }
.gw-scope svg { width: 12px; height: 12px; }
.gw-warn { font-size: 11.5px; color: #F87171; }
.gw-box-foot { display: flex; justify-content: center; gap: 4px; border-top: 1px solid var(--line); margin-top: auto; padding: 8px 0; }
.gw-box-foot button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; color: var(--muted); background: none; border: 0; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.gw-box-foot button:hover { color: var(--ink); background: #141418; }
.gw-box-foot svg { width: 14px; height: 14px; }
.gwd-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.gwd-bal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gwd-bal div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.gwd-bal small { font-size: 12px; color: var(--muted); }
@media (max-width: 1100px) { .gw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gw-grid { grid-template-columns: minmax(0, 1fr); } .gw-sec { padding: 14px; } }

/* ---------- Telas grandes: um pouco maior na mesma proporção (menu e conteúdo juntos) ---------- */
/* Padrão de SaaS: texto quase no tamanho normal; em tela larga o conteúdo ganha largura, não letra maior. */
@media (min-width: 1600px) { :root { --maxw: 1480px; } }
@media (min-width: 1680px) { .side, .main-col { zoom: 1.04; --z: 1.04; } }
@media (min-width: 2200px) { .side, .main-col { zoom: 1.1; --z: 1.1; } }
@media (min-width: 2800px) { .side, .main-col { zoom: 1.25; --z: 1.25; } }

/* ---------- Ao vivo: só os números, ocupando a tela ---------- */
.live-full { position: relative; }
.live-fs-btn { position: absolute; top: 0; right: 0; z-index: 2; opacity: .5; transition: opacity .15s; }
.live-fs-btn:hover, .live-fs-btn:focus-visible { opacity: 1; }
@media (min-width: 901px) {
  .live-full .live-grid { grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr); min-height: calc((100dvh - 140px) / var(--z, 1)); margin-top: 0; }
  .live-full .ring { width: min(620px, calc((100dvh - 200px) / var(--z, 1))); min-width: 380px; }
}
@media (max-width: 900px) { .live-fs-btn { display: none; } }
/* Tela cheia: some o menu, a barra de cima e a barra do celular */
body.live-fs .side, body.live-fs .topbar, body.live-fs .tabbar { display: none !important; }
body.live-fs .main-col { margin-left: 0; }
body.live-fs main.page { padding-top: 16px; padding-bottom: 16px; }
body.live-fs .live-full .live-grid { min-height: calc((100dvh - 40px) / var(--z, 1)); }
body.live-fs .live-full .ring { width: min(760px, calc((100dvh - 110px) / var(--z, 1))); }

/* ---------- Ao vivo no celular: minimalista (anel em cima, 4 números sem cartão, só linhas finas) ---------- */
@media (max-width: 900px) {
  .live-full { min-height: calc(100dvh - 180px); display: flex; flex-direction: column; justify-content: center; }
  .live-full .live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "ring ring" "l r"; gap: 0; min-height: 0; margin: 0; }
  .live-full .ring { grid-area: ring; width: min(300px, 78vw); margin: 0 auto 28px; }
  .live-full .live-side { display: flex; flex-direction: column; gap: 0; border: 0; padding: 0; }
  .live-full .live-side.l { grid-area: l; align-items: stretch; text-align: left; border-right: 1px solid var(--line); }
  .live-full .live-side.r { grid-area: r; }
  .live-full .live-side .k, .live-full .live-side.l .k { align-items: flex-start; gap: 6px; padding: 18px 0 18px 18px; border: 0; border-radius: 0; background: none; }
  .live-full .live-side.l .k { padding-left: 0; }
  .live-full .live-side .k:first-child { border-bottom: 1px solid var(--line); }
  .live-full .live-side .k + .k { border-left: 0; }
  .live-full .live-side .big-stat { font-size: 26px; font-weight: 300; }
  .live-full .ring .center .hero-num { font-size: min(52px, 15cqw); }
}

/* ---------- Ajustes: domínio público ---------- */
.pd-sec { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.pd-sec h2 { margin: 0; font-size: 14px; font-weight: 500; }
.pd-sec > p { margin: 0 0 14px; font-size: 13px; }
.pd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pd-card { display: flex; align-items: flex-start; gap: 14px; text-align: left; padding: 18px; border-radius: 14px; border: 1px solid var(--line-2); background: #0B0B0E; color: inherit; font: inherit; cursor: pointer; min-width: 0; transition: border-color .15s, background .15s; }
.pd-card:hover { border-color: #2E2A3A; }
.pd-card[aria-pressed="true"] { border-color: #7C5CFF; background: rgba(124,92,255,.08); }
.pd-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--muted); }
.pd-card[aria-pressed="true"] .pd-ic { color: #B9A6FF; border-color: rgba(124,92,255,.4); }
.pd-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pd-txt b { font-weight: 500; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-txt small { font-size: 12.5px; color: var(--muted); }
.pd-badge { flex: none; font-size: 10px; letter-spacing: .12em; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.pd-admin { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.pd-admin p { margin: 0; font-size: 12.5px; }
.pd-add { display: flex; gap: 8px; }
.pd-add .input { flex: 1; }
@media (max-width: 640px) { .pd-grid { grid-template-columns: minmax(0, 1fr); } }