:root {
  --bg: #070814;
  --bg-panel: #10101c;
  --glass: rgba(14, 16, 32, 0.78);
  --glass-border: rgba(168, 139, 250, 0.16);
  --text: #f4f2ff;
  --text-muted: #b7a8e0;
  --text-dim: #7c719e;
  --purple: #b56bff;
  --purple-dark: #7c3aed;
  --pink: #f472b6;
  --cyan: #38bdf8;
  --green: #34d399;
  --orange: #fb923c;
  --gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 48%, #ec4899 100%);
  --gradient-soft: linear-gradient(180deg, rgba(99,102,241,.2), transparent 70%);
  --glow: 0 0 48px rgba(168, 85, 247, 0.28);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  --radius: 20px;
  --radius-sm: 14px;
  --sidebar: 256px;
  --rail: 308px;
  --header: 78px;
  --bottom: 68px;
  --ease: 220ms cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-font-smoothing: antialiased; }
button, .btn, .side-link, .bottom-link, .bottom-fab, .auth-tab, .period-btn, .pix-type, .util-btn, .max-btn, .link-btn {
  touch-action: manipulation;
}
body {
  font-family: Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 60% 42% at 8% -8%, rgba(99,102,241,.32), transparent 58%),
    radial-gradient(ellipse 48% 38% at 92% 0%, rgba(236,72,153,.2), transparent 52%),
    radial-gradient(ellipse 40% 28% at 70% 100%, rgba(56,189,248,.08), transparent);
  pointer-events: none; z-index: 0;
}
body.auth-open::before { display: none; }

.app-shell { display: flex; min-height: 100dvh; position: relative; z-index: 1; }
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(22px);
  border-radius: var(--radius);
  box-shadow: 0 10px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
.label { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.muted { color: var(--text-dim); font-size: .82rem; }
.trend { font-size: .78rem; color: var(--text-muted); }
.trend.up { color: var(--green); }

/* Sidebar */
.sidebar {
  width: var(--sidebar);
  padding: 1.1rem .95rem;
  border-right: 1px solid var(--glass-border);
  background: rgba(8,10,22,.94);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 200;
  transition: transform var(--ease);
}
.brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem; padding: .25rem; }
.brand-logo {
  width: 48px; height: 48px;
  border-radius: 12px;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, .55));
}
.brand-logo.lg {
  width: 88px; height: 88px;
  border-radius: 18px;
  margin: 0 auto .75rem;
  display: block;
  filter: drop-shadow(0 0 18px rgba(236, 72, 153, .5));
}
.brand-text strong { display: block; font-size: .78rem; letter-spacing: .08em; }
.brand-text span { font-size: .68rem; color: var(--text-dim); }

.side-nav { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.side-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .72rem .85rem; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-dim);
  font: inherit; font-size: .88rem; font-weight: 500;
  cursor: pointer; transition: all var(--ease); text-align: left;
}
.side-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.side-link:hover { color: var(--text-muted); background: rgba(168,85,247,.06); }
.side-link.active {
  color: #fff;
  background: var(--gradient);
  box-shadow: 0 8px 24px rgba(168, 85, 247, .38);
}

.sidebar-widget {
  padding: .85rem; margin: .5rem 0 1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 0 24px rgba(168,85,247,.06);
}
.widget-label { font-size: .72rem; color: var(--text-dim); margin-bottom: .45rem; }
.perf-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.perf-badge { font-size: .82rem; font-weight: 700; color: var(--green); }
.perf-sub { font-size: .68rem; color: var(--text-dim); }
.perf-spark { width: 100%; height: 36px; display: block; margin: .25rem 0 .5rem; }
.perf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.perf-stats strong { display: block; font-size: .95rem; }
.perf-stats span { font-size: .65rem; color: var(--text-dim); }

.sidebar-user {
  display: flex; align-items: center; gap: .65rem;
  padding-top: .85rem; border-top: 1px solid var(--glass-border);
}
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--gradient);
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; flex-shrink: 0;
}
.avatar.sm { width: 34px; height: 34px; }
.avatar-btn {
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform var(--ease), box-shadow var(--ease);
}
.avatar-btn:hover { transform: scale(1.05); box-shadow: 0 0 0 2px rgba(168,85,247,.45); }
.avatar-btn:focus-visible { outline: 2px solid rgba(168,85,247,.8); outline-offset: 2px; }
.avatar.has-img { background: #120a28; box-shadow: inset 0 0 0 1px rgba(192,132,252,.35); }
.avatar.has-img .avatar-fallback { display: none; }
.avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}
.avatar-sheet-card { max-width: 520px; margin: 0 auto; }
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .35rem;
}
@media (min-width: 520px) {
  .avatar-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.avatar-option {
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  padding: .45rem .35rem .5rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: grid;
  gap: .35rem;
  justify-items: center;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.avatar-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #120a24;
  transform: translateZ(0);
  contain: layout style paint;
  isolation: isolate;
}
.avatar-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-size: 220% 220%;
  animation: av-scene-drift 10s ease-in-out infinite;
  opacity: .92;
}
.avatar-art::after { display: none; }
.avatar-art img {
  position: relative;
  z-index: 1;
  width: 86%;
  height: 86%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  backface-visibility: hidden;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
}
.avatar-art--01::before {
  background:
    radial-gradient(circle at 12% 88%, rgba(251, 146, 60, .42), transparent 46%),
    radial-gradient(circle at 88% 12%, rgba(236, 72, 153, .22), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(20, 8, 24, .85) 0 38%, transparent 72%),
    linear-gradient(145deg, #2a1208 0%, #4a2010 42%, #140818 100%);
}
.avatar-art--02::before {
  background:
    linear-gradient(rgba(34, 211, 238, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .05) 1px, transparent 1px),
    radial-gradient(circle at 50% 115%, rgba(34, 211, 238, .32), transparent 54%),
    radial-gradient(circle at 50% 45%, rgba(6, 20, 28, .88) 0 36%, transparent 70%),
    linear-gradient(160deg, #031318 0%, #062a32 55%, #020810 100%);
  background-size: 18px 18px, 18px 18px, 220% 220%, 100% 100%, 220% 220%;
  animation: av-scene-grid 14s linear infinite;
}
.avatar-art--03::before {
  background:
    radial-gradient(ellipse at 50% 118%, rgba(244, 114, 182, .38), transparent 58%),
    radial-gradient(circle at 10% 15%, rgba(168, 85, 247, .28), transparent 40%),
    radial-gradient(circle at 50% 48%, rgba(18, 8, 24, .86) 0 36%, transparent 68%),
    linear-gradient(135deg, #1a0820 0%, #3d1248 50%, #120818 100%);
}
.avatar-art--04::before {
  background:
    radial-gradient(circle at 22% 78%, rgba(250, 204, 21, .28), transparent 40%),
    radial-gradient(circle at 82% 18%, rgba(234, 179, 8, .2), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(12, 10, 4, .88) 0 34%, transparent 68%),
    linear-gradient(155deg, #1a1404 0%, #2d2408 45%, #0d0a04 100%);
}
.avatar-art--05::before {
  background:
    radial-gradient(circle at 50% -5%, rgba(251, 191, 36, .38), transparent 52%),
    radial-gradient(circle at 85% 90%, rgba(217, 119, 6, .22), transparent 44%),
    radial-gradient(circle at 50% 50%, rgba(14, 10, 2, .88) 0 36%, transparent 70%),
    linear-gradient(180deg, #2a1a04 0%, #120a02 100%);
}
.avatar-art--06::before {
  background:
    radial-gradient(circle at 50% 108%, rgba(220, 38, 38, .34), transparent 56%),
    radial-gradient(circle at 8% 20%, rgba(239, 68, 68, .18), transparent 38%),
    radial-gradient(circle at 50% 48%, rgba(16, 4, 8, .88) 0 36%, transparent 68%),
    linear-gradient(180deg, #1a0608 0%, #2a0a0e 50%, #0a0406 100%);
  animation: av-scene-stream 7s ease-in-out infinite;
}
.avatar-art--07::before {
  background:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    radial-gradient(circle at 50% 112%, rgba(148, 163, 184, .22), transparent 55%),
    radial-gradient(circle at 50% 46%, rgba(10, 12, 18, .9) 0 36%, transparent 70%),
    linear-gradient(160deg, #0f1118 0%, #1e2430 50%, #07080c 100%);
  background-size: 14px 14px, 220% 220%, 100% 100%, 220% 220%;
  animation: av-scene-grid 12s linear infinite;
}
.avatar-art--08::before {
  background:
    radial-gradient(circle at 15% 18%, rgba(192, 132, 252, .32), transparent 42%),
    radial-gradient(circle at 85% 82%, rgba(124, 58, 237, .28), transparent 44%),
    radial-gradient(circle at 50% 50%, rgba(12, 6, 20, .88) 0 36%, transparent 70%),
    linear-gradient(135deg, #140820 0%, #2a1050 50%, #0a0614 100%);
}
.avatar-art--09::before {
  background:
    radial-gradient(circle at 15% 85%, rgba(236, 72, 153, .3), transparent 46%),
    radial-gradient(circle at 85% 18%, rgba(168, 85, 247, .26), transparent 42%),
    radial-gradient(circle at 50% 48%, rgba(16, 8, 24, .88) 0 36%, transparent 68%),
    linear-gradient(145deg, #1a0824 0%, #301050 55%, #100818 100%);
}
.avatar-art--10::before {
  background:
    radial-gradient(circle at 50% 112%, rgba(74, 222, 128, .3), transparent 56%),
    radial-gradient(circle at 18% 16%, rgba(16, 185, 129, .2), transparent 40%),
    radial-gradient(circle at 50% 48%, rgba(4, 12, 8, .88) 0 36%, transparent 68%),
    linear-gradient(160deg, #04140c 0%, #082818 50%, #020806 100%);
}
@keyframes av-scene-drift {
  0%, 100% { background-position: 0% 50%, 0% 50%, center, 0% 50%; transform: scale(1); }
  50% { background-position: 100% 50%, 100% 50%, center, 100% 50%; transform: scale(1.03); }
}
@keyframes av-scene-grid {
  0% { background-position: 0 0, 0 0, 0% 50%, center, 0% 50%; }
  100% { background-position: 18px 18px, 18px 18px, 100% 50%, center, 100% 50%; }
}
@keyframes av-scene-stream {
  0%, 100% { background-position: 0% 50%, 0% 50%, center, 0 0; }
  50% { background-position: 100% 50%, 100% 50%, center, 0 0; }
}
#avatarSheet:not([hidden]) .avatar-art--01 img { animation: av-float 3.1s ease-in-out infinite; }
#avatarSheet:not([hidden]) .avatar-art--02 img { animation: av-glow 2.8s ease-in-out infinite; }
#avatarSheet:not([hidden]) .avatar-art--03 img { animation: av-pulse 2.4s ease-in-out infinite; }
#avatarSheet:not([hidden]) .avatar-art--04 img { animation: av-tilt 3.6s ease-in-out infinite; }
#avatarSheet:not([hidden]) .avatar-art--05 img { animation: av-shine 2.6s ease-in-out infinite; }
#avatarSheet:not([hidden]) .avatar-art--06 img { animation: av-sway 3.3s ease-in-out infinite; }
#avatarSheet:not([hidden]) .avatar-art--07 img { animation: av-flicker 2.2s ease-in-out infinite; }
#avatarSheet:not([hidden]) .avatar-art--08 img { animation: av-orbit 4s ease-in-out infinite; }
#avatarSheet:not([hidden]) .avatar-art--09 img { animation: av-bob 2.5s cubic-bezier(.45, 0, .55, 1) infinite; }
#avatarSheet:not([hidden]) .avatar-art--10 img { animation: av-breathe 2.9s ease-in-out infinite; }
.avatar-live.has-img .avatar-img { animation-duration: 4.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.avatar-live--01 .avatar-img { animation-name: av-float; }
.avatar-live--02 .avatar-img { animation-name: av-glow; }
.avatar-live--03 .avatar-img { animation-name: av-pulse; }
.avatar-live--04 .avatar-img { animation-name: av-tilt; }
.avatar-live--05 .avatar-img { animation-name: av-shine; }
.avatar-live--06 .avatar-img { animation-name: av-sway; }
.avatar-live--07 .avatar-img { animation-name: av-flicker; }
.avatar-live--08 .avatar-img { animation-name: av-orbit; }
.avatar-live--09 .avatar-img { animation-name: av-bob; }
.avatar-live--10 .avatar-img { animation-name: av-breathe; }
@keyframes av-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5%) scale(1.03); }
}
@keyframes av-glow {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3%) scale(1.02); }
}
@keyframes av-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes av-tilt {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-2.5deg) scale(1.02); }
  75% { transform: rotate(2.5deg) scale(1.02); }
}
@keyframes av-shine {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes av-sway {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4%); }
}
@keyframes av-flicker {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2%); }
}
@keyframes av-orbit {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3%) rotate(2deg); }
}
@keyframes av-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-6%) scale(1.04); }
  60% { transform: translateY(-2%) scale(1.02); }
}
@keyframes av-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  #avatarSheet .avatar-art img,
  .avatar-live .avatar-img { animation: none !important; }
  #avatarSheet .avatar-art::before,
  #avatarSheet .avatar-art::after { animation: none !important; }
}
.avatar-option span {
  font-size: .62rem;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.2;
}
.avatar-option:hover { border-color: rgba(168,85,247,.45); transform: translateY(-1px); }
.avatar-option.is-active {
  border-color: rgba(250,204,21,.75);
  box-shadow: 0 0 18px rgba(250,204,21,.22);
}
.avatar-sheet-note { margin-top: .75rem; text-align: center; }
.user-meta { flex: 1; min-width: 0; }
.user-meta strong { display: block; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta span, .user-links { display: block; font-size: .68rem; color: var(--text-dim); }

/* Workspace */
.workspace {
  flex: 1; margin-left: var(--sidebar);
  min-width: 0; display: flex; flex-direction: column;
  padding-bottom: var(--bottom);
}
.app-header {
  height: var(--header);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(7,8,20,.82);
  backdrop-filter: blur(18px);
  position: sticky; top: 0; z-index: 100;
  overflow: visible;
}
.header-title h1 { font-size: 1.2rem; font-weight: 700; }
.header-title p { font-size: .78rem; color: var(--text-dim); margin-top: .1rem; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.period-tabs {
  display: flex; gap: .2rem; padding: .2rem;
  background: rgba(255,255,255,.03); border-radius: 999px;
  border: 1px solid var(--glass-border);
}
.period-btn {
  border: none; background: transparent; color: var(--text-dim);
  font: inherit; font-size: .72rem; font-weight: 600;
  padding: .35rem .65rem; border-radius: 999px; cursor: pointer;
  transition: all var(--ease);
}
.period-btn.active { background: var(--gradient); color: #fff; box-shadow: 0 4px 14px rgba(168,85,247,.35); }
.header-profile { display: flex; align-items: center; gap: .45rem; overflow: visible; }
.profile-chip { display: flex; align-items: center; gap: .5rem; }
.profile-chip strong { display: block; font-size: .78rem; }
.profile-chip span, .role-tag { font-size: .65rem; color: var(--purple); font-weight: 700; }
.role-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: .08rem;
}
.avatar-hint {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: .62rem;
  line-height: 1.2;
  color: #f9a8d4;
  font-weight: 700;
  text-transform: lowercase;
}
.avatar-hint:hover { color: #fbcfe8; }
.avatar-hint-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #f472b6;
  box-shadow: 0 0 0 0 rgba(244, 114, 182, .55);
  animation: avatar-hint-pulse 1.55s ease-in-out infinite;
  flex-shrink: 0;
}
.avatar-hint--sidebar { font-size: .58rem; }
@keyframes avatar-hint-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244, 114, 182, .55); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(244, 114, 182, 0); }
}

.page-body {
  display: grid;
  grid-template-columns: 1fr var(--rail);
  gap: 1rem;
  padding: 1rem 1.25rem 0;
  align-items: start;
}
.main-col { min-width: 0; }
.right-rail { display: flex; flex-direction: column; gap: .85rem; position: sticky; top: calc(var(--header) + 1rem); }

.view { display: none; animation: fadeUp .2s ease; }
.view.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Hero balance */
.hero-card { padding: 1.35rem 1.45rem; margin-bottom: .95rem; overflow: hidden; position: relative; }
.hero-card::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 80% 110%, rgba(168,85,247,.28), transparent 60%),
    var(--gradient-soft);
  pointer-events: none;
}
.hero-top { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1rem; align-items: end; position: relative; }
.hero-value { font-size: 2.45rem; font-weight: 800; letter-spacing: -.04em; margin: .2rem 0; text-shadow: 0 0 28px rgba(168,85,247,.35); }
.hero-chart-wrap { height: 90px; overflow: hidden; }
.chart-3d-stage {
  overflow: hidden;
}
.chart-3d-stage.bar-stage,
.chart-3d-stage.wave-stage { padding: .2rem .1rem .35rem; overflow: hidden; }
.area-chart, .bar-chart, .wave-chart, .spark {
  width: 100%; display: block;
  transform: none;
  animation: none;
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, .28));
}
.bar-chart, .wave-chart { height: 168px; }

/* KPI row */
.kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .75rem; margin-bottom: .85rem;
}
.kpi-card {
  padding: .95rem; position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: .65rem;
  min-height: 118px; transition: transform var(--ease), box-shadow var(--ease);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.kpi-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
}
.kpi-icon svg { width: 18px; height: 18px; }
.kpi-icon.purple { background: rgba(168,85,247,.15); color: var(--purple); }
.kpi-icon.pink { background: rgba(236,72,153,.15); color: var(--pink); }
.kpi-icon.cyan { background: rgba(34,211,238,.12); color: var(--cyan); }
.kpi-icon.green { background: rgba(34,197,94,.12); color: var(--green); }
.kpi-body strong { display: block; font-size: 1.15rem; font-weight: 700; margin: .15rem 0; }
.kpi-spark {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38px; opacity: .7;
  filter: drop-shadow(0 0 8px rgba(168,85,247,.35));
}

/* Panels */
.dash-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: .85rem; }
.panel { padding: 1.1rem; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .85rem;
}
.panel-head.compact { margin-bottom: .65rem; }
.panel-head h2 { font-size: .95rem; font-weight: 700; }
.chart-legend { display: flex; gap: 1rem; margin-top: .65rem; font-size: .75rem; color: var(--text-dim); }
.chart-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; }
.chart-legend .dot.purple { background: var(--purple); }
.chart-legend .dot.pink { background: var(--pink); }
.chart-legend .dot.teal { background: #32BCAD; }

.houses-list { display: flex; flex-direction: column; gap: .55rem; }
.house-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .75rem; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.02); border: 1px solid transparent;
  transition: all var(--ease);
}
.house-row:hover { border-color: var(--glass-border); background: rgba(168,85,247,.05); }
.house-logo {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; font-weight: 800; font-size: .65rem;
  color: #fff; flex-shrink: 0; overflow: hidden;
}
.house-logo.has-img {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 3px;
}
.house-logo.has-img img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block;
}
.house-select-wrap {
  display: flex; align-items: center; gap: .65rem;
}
.house-select-wrap .house-logo { width: 40px; height: 40px; }
.house-select-wrap select { flex: 1; min-width: 0; }
.house-info { flex: 1; min-width: 0; }
.house-info strong { display: block; font-size: .85rem; }
.house-info span { font-size: .72rem; color: var(--text-dim); }
.status-pill {
  font-size: .65rem; font-weight: 700; padding: .28rem .55rem;
  border-radius: 999px; white-space: nowrap;
}
.status-pill.active { background: rgba(34,197,94,.15); color: var(--green); }
.status-pill.syncing { background: rgba(168,85,247,.15); color: var(--purple); }
.status-pill.offline { background: rgba(248,113,113,.12); color: #f87171; }
.status-pill.pending { background: rgba(249,115,22,.12); color: var(--orange); }
.status-pill.paid { background: rgba(34,197,94,.15); color: var(--green); }
.status-pill.needs-activation {
  background: rgba(251, 191, 36, .14);
  color: #fcd34d;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, .28);
}
.house-row.is-needs-activation {
  border-color: rgba(251, 191, 36, .28);
  background: rgba(120, 53, 15, .12);
}
.house-row.is-needs-activation .house-info span {
  color: #fde68a;
  font-weight: 600;
}
.rank-name-swap {
  position: relative;
  font-weight: 800 !important;
  color: #e9d5ff !important;
  text-shadow: 0 0 10px rgba(168, 85, 247, .55);
  animation: rankNameShake 1.35s ease-in-out infinite;
  transform-origin: center;
}
.rank-name-swap::after {
  content: '↗';
  margin-left: .28rem;
  font-size: .85em;
  opacity: .9;
}
@keyframes rankNameShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  12% { transform: translateX(-2px) rotate(-2deg); }
  24% { transform: translateX(2px) rotate(2deg); }
  36% { transform: translateX(-2px) rotate(-1.5deg); }
  48% { transform: translateX(2px) rotate(1.5deg); }
  60% { transform: translateX(-1px) rotate(-1deg); }
  72% { transform: translateX(1px) rotate(1deg); }
  84% { transform: translateX(0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rank-name-swap { animation: none; }
}

/* Right rail */
.rail-card { padding: 1rem; position: relative; overflow: hidden; }
.glow-card .glow-bg {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, rgba(249,115,22,.42), rgba(236,72,153,.38), rgba(124,58,237,.22));
  opacity: .9;
}
.rail-card-body { position: relative; z-index: 1; }
.glow-card { color: #fff; }
.glow-card .label, .glow-card p, .glow-card .rail-stats span { color: rgba(255,255,255,.82); }
.glow-card .rail-big { text-shadow: 0 0 18px rgba(255,255,255,.25); }
.rail-big { font-size: 1.6rem; font-weight: 800; margin: .25rem 0 .35rem; }
.rail-stats { list-style: none; margin-top: .75rem; display: flex; flex-direction: column; gap: .45rem; }
.rail-stats li { display: flex; justify-content: space-between; font-size: .78rem; }
.rail-stats span { color: var(--text-dim); }
.withdraw-rail .rail-balance { font-size: 1.5rem; font-weight: 800; margin: .35rem 0 .15rem; }
.pix-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  vertical-align: middle;
  line-height: 0;
}
.pix-brand img {
  display: block;
  height: 22px;
  width: 22px;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px rgba(50, 188, 173, .55));
}
.pix-row { display: flex; align-items: center; gap: .45rem; margin: .7rem 0 .85rem; }
.pix-brand.lg img { height: 42px; width: 42px; animation: pixPulse 2.4s ease-in-out infinite; }
.pix-brand.md { margin-left: .3rem; }
.pix-brand.md img { height: 24px; width: 24px; }
.pix-brand.sm { margin: 0 .12rem; }
.pix-brand.sm img { height: 16px; width: 16px; }
.pix-brand.xs { margin: 0 .1rem; }
.pix-brand.xs img { height: 14px; width: 14px; }
@keyframes pixPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(50, 188, 173, .4)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px rgba(50, 188, 173, .75)); transform: scale(1.08); }
}
.wd-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.field-pix-label { display: inline-flex; align-items: center; gap: .2rem; }
.step-dot { display: inline-flex; align-items: center; gap: .25rem; }

.activity-feed { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.activity-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: .55rem;
  align-items: start; font-size: .78rem;
}
.activity-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; font-size: .7rem;
  background: rgba(168,85,247,.12); color: var(--purple); overflow: hidden;
}
.activity-icon.has-img {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 2px;
}
.activity-icon.has-img img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block;
}
.history-item-main { display: flex; align-items: center; min-width: 0; flex: 1; }
.history-item-text { min-width: 0; }
.history-item .house-logo { width: 32px; height: 32px; margin-right: .55rem; flex-shrink: 0; }
.activity-item strong { display: block; font-size: .8rem; }
.activity-item span { color: var(--text-dim); font-size: .72rem; }
.activity-item time { color: var(--text-dim); font-size: .68rem; white-space: nowrap; }
.activity-val { font-weight: 700; color: var(--green); font-size: .75rem; }

/* Houses page */
.hero-banner { padding: 1.5rem; margin-bottom: .85rem; position: relative; overflow: hidden; }
.hero-banner .banner-glow {
  position: absolute; inset: -20% -10%;
  background: radial-gradient(circle, rgba(236,72,153,.2), transparent 60%);
}
.hero-banner h2 { position: relative; font-size: 1.35rem; margin-bottom: .35rem; }
.hero-banner p { position: relative; color: var(--text-muted); max-width: 520px; }
.houses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .85rem; }
.house-card {
  padding: 1.15rem; transition: all var(--ease);
}
.house-card:hover { transform: translateY(-3px); box-shadow: var(--glow); }

/* Network */
.network-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: .85rem; }
.network-grid .span-2 { grid-column: 1 / -1; }
.network-mascot {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  pointer-events: none;
  user-select: none;
}
.network-mascot-stage {
  position: relative;
  width: min(100%, 340px);
  isolation: isolate;
  animation: jornada-float 4.5s ease-in-out infinite;
}
.network-mascot img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  mix-blend-mode: screen;
  filter: drop-shadow(0 10px 28px rgba(124, 58, 237, .45));
}
.nm-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: screen;
}
.nm-rings-back {
  z-index: 1;
  clip-path: inset(0 0 41% 0);
}
.nm-rings-front {
  z-index: 3;
  clip-path: inset(57% 0 0 0);
}
@media (min-width: 1024px) {
  .network-mascot { display: flex; }
}
.donut-wrap { position: relative; width: 140px; height: 140px; margin: 0 auto .75rem; }
.donut-chart { width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 10px rgba(168,85,247,.45)); }
.donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-center strong { font-size: 1.4rem; }
.donut-center span { font-size: .68rem; color: var(--text-dim); }
.level-legend { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.level-legend li { display: flex; justify-content: space-between; font-size: .82rem; }
.level-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; }
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.data-table th { text-align: left; color: var(--text-dim); font-weight: 600; padding: .55rem .65rem; border-bottom: 1px solid var(--glass-border); }
.data-table td { padding: .65rem; border-bottom: 1px solid rgba(255,255,255,.04); }

/* Withdraw */
.withdraw-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: .85rem; }
.pix-key-card { grid-column: 1 / -1; }
.pix-key-card .pix-key-edit { display: none; margin-top: .35rem; }
.pix-key-card.is-ready .field,
.pix-key-card.is-ready #pixKeySave { display: none; }
.pix-key-card.is-ready .pix-key-edit { display: inline-flex; }
.withdraw-layout:has(.pix-key-card.is-ready) > .withdraw-main { order: 1; }
.withdraw-layout:has(.pix-key-card.is-ready) > .pix-key-card { order: 2; }
.withdraw-layout:has(.pix-key-card.is-ready) > .panel.glass:not(.pix-key-card):not(.withdraw-main) { order: 3; }
.history-note { display: block; margin-top: .28rem; color: #f5c16c; font-size: .78rem; line-height: 1.35; }

/* Agent ID activation */
.agents-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: .85rem; }
.agents-status { margin-bottom: 1rem; }
.agents-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; padding: .45rem .75rem; border-radius: 999px;
  border: 1px solid var(--glass-border); color: var(--text-dim);
}
.agents-badge.ok { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.25); }
.agents-badge.blocked { background: rgba(251,146,60,.1); color: #fdba74; border-color: rgba(251,146,60,.25); }
.agents-badge.loading { opacity: .75; }
.agents-defaults { margin-bottom: 1rem; padding: .85rem 1rem; border-radius: var(--radius-sm); background: rgba(124,58,237,.08); border: 1px solid var(--glass-border); }
.defaults-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .45rem; font-size: .85rem; color: var(--text-muted); }
.defaults-row strong { color: #fff; margin-left: .25rem; }
.panel.inset { margin-top: 1rem; padding: .85rem 1rem; background: rgba(0,0,0,.18); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); }
.panel-head.compact { margin-bottom: .5rem; }
.panel-head.compact h3 { font-size: .95rem; }
.agents-preview-list { list-style: none; margin: 0; padding: 0; }
.agents-preview-list li { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .82rem; }
.agents-preview-list li:last-child { border-bottom: 0; }
.agents-preview-list span { color: var(--text-dim); }
.agents-help { margin: 0; padding-left: 1.1rem; color: var(--text-muted); font-size: .84rem; line-height: 1.55; }
.agents-help li + li { margin-top: .55rem; }

.agents-active-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.agents-active-modal[hidden] { display: none !important; }
.agents-active-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
}
.agents-active-card {
  position: relative; z-index: 1; width: min(420px, 100%); padding: 1.25rem 1.35rem 1.35rem;
}
.agents-active-card h3 { margin: .35rem 0 .65rem; font-size: 1.15rem; }
.agents-active-card p { color: var(--text-muted); font-size: .88rem; line-height: 1.55; margin-bottom: 1rem; }

.withdraw-steps { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.withdraw-steps .step {
  font-size: .78rem; font-weight: 600; color: var(--text-dim);
  padding: .35rem .65rem; border-radius: 999px;
  border: 1px solid var(--glass-border);
}
.withdraw-steps .step.active { background: var(--gradient); color: #fff; border-color: transparent; }
.step-line { flex: 1; height: 1px; background: var(--glass-border); max-width: 40px; }
.withdraw-main h2 { font-size: 1.15rem; margin-bottom: .25rem; }
.withdraw-step-panel { display: none; margin-top: 1rem; }
.withdraw-step-panel.active { display: block; }
.balance-display {
  padding: .85rem 1rem; border-radius: var(--radius-sm);
  background: rgba(168,85,247,.08); border: 1px solid var(--glass-border);
  margin-bottom: .85rem;
}
.balance-display strong { display: block; font-size: 1.35rem; margin-top: .2rem; }
.pix-types { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
.pix-type {
  border: 1px solid var(--glass-border); background: transparent;
  color: var(--text-dim); font: inherit; font-size: .75rem;
  padding: .4rem .65rem; border-radius: 8px;
  cursor: pointer; pointer-events: auto; position: relative; z-index: 2;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.pix-type:active { transform: scale(.94); }
.pix-type.active { border-color: transparent; color: #fff; background: var(--gradient); box-shadow: 0 4px 14px rgba(168,85,247,.35); }
.toggle-row { display: flex; align-items: center; gap: .5rem; margin: .85rem 0; font-size: .82rem; color: var(--text-muted); }
.auth-remember-row {
  margin: .35rem 0 1rem;
  cursor: pointer;
  user-select: none;
}
.auth-remember-row input {
  width: 16px;
  height: 16px;
  accent-color: #a855f7;
  cursor: pointer;
}
.empty-state { text-align: center; padding: 2rem 1rem; color: var(--text-dim); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: none; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: all var(--ease); white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn.sm { font-size: .78rem; padding: .5rem .85rem; }
.btn.full { width: 100%; padding: .75rem; }
.btn.gradient { background: var(--gradient); color: #fff; box-shadow: 0 6px 24px rgba(124,58,237,.42); }
.btn.gradient:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(124,58,237,.45); }
.btn:disabled,
.btn.gradient:disabled,
.btn.outline:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: grayscale(.25);
}
.btn.gradient:disabled:hover { transform: none; box-shadow: none; }
.btn.outline { background: transparent; color: var(--text-muted); border: 1px solid var(--glass-border); }
.btn.outline:hover { border-color: var(--purple); color: var(--purple); }
.link-btn { border: none; background: none; color: var(--purple); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.icon-btn {
  width: 36px; height: 36px; border: none; border-radius: 10px;
  background: rgba(255,255,255,.04); color: var(--text);
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--glass-border);
}
.notify-btn { position: relative; }
.icon-btn.sm { width: 32px; height: 32px; }

.field { display: block; margin-bottom: .85rem; }
.field span { display: block; font-size: .78rem; color: var(--text-dim); margin-bottom: .35rem; }
.field .field-pix-label { display: inline-flex; align-items: center; gap: .25rem; }
.field .pix-brand { display: inline-flex; margin-bottom: 0; }
.field input, .field select {
  width: 100%; padding: .72rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.25); color: var(--text);
  font: inherit; outline: none;
}
.field input:focus, .field select:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(168,85,247,.15);
}
#agentsTargetId {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  touch-action: manipulation;
}
.agents-id-input-row {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}
.agents-id-input-row textarea {
  flex: 1;
  min-width: 0;
  min-height: 2.85rem;
  max-height: 5.5rem;
  resize: none;
  overflow: auto;
  line-height: 1.35;
  padding: .72rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font: inherit;
  outline: none;
}
.agents-id-input-row textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(168,85,247,.15);
}
.agents-paste-btn {
  flex-shrink: 0;
  align-self: stretch;
  min-width: 4.5rem;
  padding: 0 .85rem;
  white-space: nowrap;
}
.agents-id-field .field-hint {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  color: var(--text-dim);
}
.agents-auto-detect {
  margin-bottom: .85rem;
  padding: .75rem .9rem;
}
.agents-auto-detect .label {
  display: block;
  margin-bottom: .35rem;
}
.agents-detected-house {
  margin: .5rem 0 0;
  font-size: .88rem;
  color: var(--green);
}
.agents-detected-house strong {
  color: var(--text);
}

.app-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: .85rem 1.25rem; margin-top: auto;
  font-size: .72rem; color: var(--text-dim);
  border-top: 1px solid var(--glass-border);
}
.system-status { display: flex; align-items: center; gap: .4rem; color: var(--green); }
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* Auth */
.auth-screen {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: #05060f;
  overflow: hidden;
  isolation: isolate;
}
.auth-screen[hidden] { display: none !important; }
body.auth-open { overflow: hidden; }
body.auth-open .app-shell { pointer-events: none; user-select: none; }
.auth-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.auth-orb {
  position: absolute;
  border-radius: 50%;
  opacity: .78;
  animation: authOrbDrift 7s ease-in-out infinite;
}
.auth-orb-a {
  width: 360px; height: 360px;
  top: -10%; left: -16%;
  background: radial-gradient(circle, rgba(168,85,247,.78) 0%, rgba(124,58,237,.3) 38%, transparent 70%);
}
.auth-orb-b {
  width: 400px; height: 400px;
  bottom: -16%; right: -18%;
  background: radial-gradient(circle, rgba(236,72,153,.68) 0%, rgba(236,72,153,.24) 38%, transparent 70%);
  animation-delay: -2s;
}
.auth-orb-c {
  width: 260px; height: 260px;
  top: 34%; right: 8%;
  background: radial-gradient(circle, rgba(129,140,248,.58) 0%, rgba(99,102,241,.2) 40%, transparent 72%);
  animation-delay: -4s;
}
.auth-grid {
  position: absolute;
  inset: 0;
  opacity: .92;
  background-image:
    linear-gradient(rgba(168,139,250,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,139,250,.12) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: authGridPulse 5s ease-in-out infinite;
}
.auth-float-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(192,132,252,.38);
  box-shadow: 0 0 28px rgba(168,85,247,.28);
  transform: translate(-50%, -50%);
  animation: authRingSpin 20s linear infinite;
}
.auth-float-ring.ring-1 {
  width: min(92vw, 440px);
  height: min(92vw, 440px);
}
.auth-float-ring.ring-2 {
  width: min(110vw, 540px);
  height: min(110vw, 540px);
  border-style: dashed;
  border-color: rgba(244,114,182,.32);
  opacity: .55;
  animation-duration: 30s;
  animation-direction: reverse;
}
.auth-particle {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #d8b4fe;
  box-shadow: 0 0 16px rgba(216,180,254,.95), 0 0 32px rgba(168,85,247,.45);
  animation: authParticleFloat 4.5s ease-in-out infinite;
}
.auth-particle.p1 { top: 14%; left: 8%; }
.auth-particle.p2 { top: 22%; right: 12%; width: 6px; height: 6px; background: #f9a8d4; animation-delay: -.8s; }
.auth-particle.p3 { bottom: 18%; left: 14%; animation-delay: -1.6s; }
.auth-particle.p4 { bottom: 26%; right: 16%; width: 7px; height: 7px; animation-delay: -2.4s; }
.auth-particle.p5 { top: 48%; left: 5%; width: 5px; height: 5px; background: #a5b4fc; animation-delay: -3.2s; }
.auth-particle.p6 { top: 56%; right: 6%; background: #f472b6; animation-delay: -1.2s; }
.auth-shape {
  position: absolute;
  border: 1px solid rgba(192,132,252,.45);
  background: rgba(124,58,237,.12);
  animation: authShapeFloat 6s ease-in-out infinite;
}
.auth-shape.shape-1 { width: 54px; height: 54px; top: 10%; right: 18%; border-radius: 14px; }
.auth-shape.shape-2 { width: 40px; height: 40px; bottom: 14%; left: 10%; clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); animation-delay: -2s; }
.auth-shape.shape-3 { width: 42px; height: 42px; top: 64%; right: 24%; border-radius: 50%; animation-delay: -3.5s; }
.auth-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  padding: 1.75rem;
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 48px rgba(168,85,247,.22);
  animation: authCardGlow 3.5s ease-in-out infinite;
}
.auth-step[hidden] { display: none !important; }
.auth-login-card { padding-top: 2.5rem; }
.auth-back {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.auth-back:hover { background: rgba(255,255,255,.08); border-color: rgba(168,85,247,.35); }
.auth-brand-intro { margin-bottom: .75rem; }
.auth-intro-tagline {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c4b5fd;
  margin: .35rem 0 0;
}
.auth-login-sub {
  font-size: .72rem !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim) !important;
  margin-top: .35rem !important;
}
.auth-intro-lead {
  font-size: .82rem;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0 0 1.25rem;
  text-align: center;
}
.auth-feature-list {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.auth-feature-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .75rem .85rem;
  border-radius: 12px;
  border: 1px solid rgba(168,85,247,.22);
  background: rgba(255,255,255,.03);
}
.auth-feature-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(236,72,153,.45);
  font-size: .72rem;
  font-weight: 800;
  color: #f9a8d4;
  background: rgba(236,72,153,.08);
}
.auth-feature-item strong {
  display: block;
  font-size: .88rem;
  margin-bottom: .12rem;
}
.auth-feature-item span {
  font-size: .75rem;
  color: var(--text-dim);
  line-height: 1.35;
}
.auth-brand { text-align: center; margin-bottom: 1.25rem; }
.auth-brand h2 { font-size: 1.35rem; margin: .5rem 0 .35rem; }
.auth-brand p { font-size: .85rem; color: var(--text-dim); line-height: 1.45; }
.auth-alert {
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border-radius: 10px;
  font-size: .84rem;
  line-height: 1.45;
  border: 1px solid rgba(239, 68, 68, .45);
  background: rgba(127, 29, 29, .35);
  color: #fca5a5;
}
.auth-alert[hidden] { display: none !important; }
.auth-alert.not-affiliate {
  border-color: rgba(244, 63, 94, .55);
  background: rgba(136, 19, 55, .42);
  color: #fecdd3;
}
.auth-alert.error {
  border-color: rgba(251, 146, 60, .45);
  background: rgba(124, 45, 18, .35);
  color: #fed7aa;
}
.password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.password-wrap input { padding-right: 2.75rem; width: 100%; }
.password-toggle {
  position: absolute;
  right: .55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 1rem;
  padding: .35rem;
  cursor: pointer;
  line-height: 1;
}
.password-toggle svg { width: 1.15rem; height: 1.15rem; display: block; }
.auth-security-note {
  margin-top: 1rem;
  font-size: .68rem;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: .03em;
  line-height: 1.5;
  opacity: .85;
}
.auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
  padding: .3rem; margin-bottom: 1rem;
  background: rgba(255,255,255,.03); border-radius: var(--radius-sm);
}
.auth-tab {
  border: none; background: transparent; color: var(--text-dim);
  font: inherit; font-size: .85rem; font-weight: 600;
  padding: .55rem; border-radius: 8px; cursor: pointer;
}
.auth-tab.active { background: var(--gradient); color: #fff; }
.auth-hints { margin-top: 1rem; display: grid; gap: .55rem; }
.auth-hint {
  font-size: .76rem;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.45;
  padding: .55rem .65rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(168,139,250,.1);
}
.auth-hint-primary {
  background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(236,72,153,.1));
  border-color: rgba(168,139,250,.22);
  color: var(--text-muted);
}
.auth-hint-primary[hidden] { display: none; }
.auth-hint strong { color: var(--text); font-weight: 700; }
.auth-note { margin-top: 1rem; font-size: .75rem; color: var(--text-dim); text-align: center; }

@keyframes authCardGlow {
  0%, 100% { box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 32px rgba(168,85,247,.18); }
  50% { box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 52px rgba(236,72,153,.28); }
}

@keyframes authOrbDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(14px, -16px, 0) scale(1.05); }
}
@keyframes authGridPulse {
  0%, 100% { opacity: .5; }
  50% { opacity: .85; }
}
@keyframes authRingSpin {
  from { transform: translate3d(-50%, -50%, 0) rotate(0deg); }
  to { transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}
@keyframes authParticleFloat {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .6; }
  50% { transform: translate3d(0, -20px, 0); opacity: 1; }
}
@keyframes authShapeFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .7; }
  50% { transform: translate3d(0, -18px, 0) rotate(10deg); opacity: 1; }
}
@keyframes authHintGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(168,85,247,0); }
  50% { box-shadow: 0 0 24px rgba(168,85,247,.12); }
}

.toast {
  position: fixed; bottom: calc(var(--bottom) + 1rem); left: 50%;
  transform: translateX(-50%);
  background: var(--bg-panel); border: 1px solid var(--glass-border);
  padding: .75rem 1.2rem; border-radius: var(--radius-sm);
  font-size: .85rem; z-index: 600; box-shadow: var(--shadow);
}
.toast[hidden] { display: none; }

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--bottom);
  background: rgba(12,12,20,.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--glass-border);
  display: none;
  grid-template-columns: 1fr 1fr 72px 1fr 1fr;
  z-index: 200; padding-bottom: env(safe-area-inset-bottom);
}
.bottom-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; border: none; background: transparent;
  color: var(--text-dim); font: inherit; font-size: .62rem; font-weight: 600; cursor: pointer;
}
.bottom-link svg { width: 20px; height: 20px; }
.bottom-link.active { color: var(--purple); }
.bottom-fab {
  width: 58px; height: 58px; margin: -18px auto 0;
  border: none; border-radius: 50%;
  background: var(--gradient); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(236,72,153,.45);
  cursor: pointer; font: inherit; font-size: .58rem; font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bottom-fab svg { width: 22px; height: 22px; }
.bottom-fab:active { transform: scale(.96); }

.mobile-only { display: none; }

.label.accent { color: var(--pink); }
.overview-banner { margin-bottom: .85rem; }
.hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: 1rem; position: relative; z-index: 2; }
.hero-utils { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .55rem; position: relative; z-index: 2; }
.util-btn {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem; border-radius: 10px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.03); color: var(--text-muted);
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: transform .15s ease, border-color .2s ease;
}
.util-btn svg { width: 16px; height: 16px; }
.util-btn:active, .btn:active, .side-link:active, .bottom-link:active { transform: scale(.96); }
.house-balance-line { font-size: .82rem; color: var(--text-muted); margin: -.35rem 0 .85rem; }
.house-balance-line strong { color: var(--pink); }
.withdraw-balance-card {
  padding: .9rem 1rem; border-radius: 14px; margin-bottom: 1rem;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
}
.withdraw-total-label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.withdraw-total-value { font-size: 1.65rem; font-weight: 800; margin: .2rem 0 .55rem; color: var(--pink); }
.withdraw-balance-breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.withdraw-balance-breakdown li {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .82rem; color: var(--text-muted); padding: .35rem 0; border-top: 1px solid rgba(255,255,255,.06);
}
.withdraw-balance-breakdown li:first-child { border-top: 0; padding-top: 0; }
.withdraw-balance-breakdown strong { color: var(--text); font-weight: 700; }
.withdraw-balance-breakdown .house-mini { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.withdraw-balance-breakdown .house-mini img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.withdraw-balance-breakdown .house-mini i {
  width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .62rem; font-style: normal; font-weight: 800; color: #fff;
}
.amount-wrap { display: flex; gap: .45rem; }
.amount-wrap input { flex: 1; }
.max-btn {
  border: none; border-radius: 10px; padding: 0 .85rem;
  background: var(--gradient); color: #fff; font: inherit; font-weight: 800; font-size: .72rem;
  cursor: pointer; min-width: 58px;
}
.max-btn:active { transform: scale(.94); }
.field-hint { display: block; margin-top: .35rem; font-size: .72rem; color: var(--text-dim); }
.wd-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: .5rem; margin-top: .5rem; }
.center-note { text-align: center; margin-top: .75rem; }
.withdraw-steps .step-dot {
  display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; color: var(--text-dim);
}
.withdraw-steps .step-dot i {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: .7rem;
  background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
}
.withdraw-steps .step-dot.active { color: var(--text); }
.withdraw-steps .step-dot.active i { background: var(--gradient); border-color: transparent; color: #fff; }
.history-list { display: flex; flex-direction: column; gap: .55rem; }
.history-item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem .85rem; border-radius: 14px; background: rgba(255,255,255,.03);
  border: 1px solid var(--glass-border);
}
.history-item strong { display: block; }
.history-item span { font-size: .72rem; color: var(--text-dim); }
.level-bars { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.level-bars .lb-top { display: flex; justify-content: space-between; margin-bottom: .3rem; font-size: .85rem; }
.level-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.level-bar i { display: block; height: 100%; width: 0; border-radius: 99px; animation: fillBar .9s ease forwards; }
@keyframes fillBar { to { width: var(--w); } }
.news-feed, .help-list { display: flex; flex-direction: column; gap: .75rem; }
.news-card .news-media-frame {
  position: relative;
  width: 100%;
  margin: .55rem 0 .7rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  display: flex;
  justify-content: center;
  align-items: center;
}
.news-card .news-media-frame img,
.news-card .news-media-frame video,
.news-popup-media img,
.news-popup-media video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: unset;
  background: transparent;
}
.news-card .news-media-frame img,
.news-card .news-media-frame video {
  max-height: min(62dvh, 520px);
}
.news-media-expand {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(8, 4, 18, .72);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease;
}
.news-media-expand span { font-size: .85rem; line-height: 1; }
.news-media-expand:hover { background: rgba(124, 58, 237, .55); transform: translateY(-1px); }
.news-media-frame.is-clickable { cursor: zoom-in; }
.news-popup-expand { width: 100%; margin: -.35rem 0 .75rem; }
@media (min-width: 960px) {
  .news-feed .news-card .news-media-frame {
    max-width: min(100%, 720px);
    margin-left: auto;
    margin-right: auto;
  }
}
.news-lightbox {
  position: fixed;
  inset: 0;
  z-index: 560;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.news-lightbox[hidden] { display: none !important; }
.news-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 2, 12, .88);
  backdrop-filter: blur(12px);
}
.news-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(96vw, 980px);
  max-height: min(94dvh, 900px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
  animation: newsPopIn .28s ease both;
}
.news-lightbox-close {
  align-self: flex-end;
  border: 0;
  background: rgba(255,255,255,.1);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1rem;
}
.news-lightbox-title {
  margin: 0;
  text-align: center;
  color: var(--text-dim, #b7b0c9);
  font-size: .86rem;
}
.news-lightbox-media {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  border-radius: 16px;
}
.news-lightbox-media img,
.news-lightbox-media video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(86dvh, 820px);
  border-radius: 12px;
}
.news-card .news-media {
  width: 100%;
  height: auto;
  max-height: min(52dvh, 320px);
  object-fit: unset;
  border-radius: 0;
  margin: 0;
  background: transparent;
  border: 0;
}
.news-popup {
  position: fixed; inset: 0; z-index: 520;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.news-popup[hidden] { display: none !important; }
.news-popup-backdrop { position: absolute; inset: 0; background: rgba(4, 2, 12, .72); backdrop-filter: blur(10px); }
.news-popup-card {
  position: relative; z-index: 1; width: min(440px, 100%);
  padding: 1.25rem 1.2rem 1.1rem; border-radius: 22px;
  max-height: min(90dvh, 780px); overflow: auto;
  animation: newsPopIn .38s ease both;
}
.news-popup-card.is-media-wide { width: min(92vw, 620px); }
@keyframes newsPopIn { from { transform: translateY(18px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.news-popup-close {
  position: absolute; top: .7rem; right: .75rem;
  border: 0; background: rgba(255,255,255,.08); color: #fff;
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer; font-size: 1rem;
}
.news-popup-card h3 { margin: .35rem 0 .7rem; font-size: 1.2rem; line-height: 1.25; }
.news-popup-body { margin: 0 0 1rem; color: var(--text-dim, #b7b0c9); white-space: pre-wrap; font-size: .92rem; }
.news-popup-media {
  margin: 0 0 .85rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: transparent;
}
.news-popup-media img, .news-popup-media video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(62dvh, 520px);
  object-fit: unset;
  border-radius: 14px;
  background: transparent;
}
.news-popup-timer { display: flex; flex-direction: column; gap: .65rem; align-items: stretch; }
.news-popup-bar {
  height: 5px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden;
}
.news-popup-bar i {
  display: block; height: 100%; width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #a855f7, #ec4899);
  animation: newsTimerBar 10s linear forwards;
}
@keyframes newsTimerBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.news-popup-timer .btn { width: 100%; }
.news-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .55rem; }
.news-tags span {
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: 6px; background: rgba(236,72,153,.15); color: var(--pink);
}
.house-card .house-balance { font-size: 1.25rem; font-weight: 800; margin: .65rem 0 .25rem; }
.sheet { position: fixed; inset: 0; z-index: 450; }
.sheet[hidden] { display: none !important; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.sheet-card {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0; max-height: 80dvh; overflow: auto;
  animation: sheetUp .32s ease;
}
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .85rem; }
.tutorial {
  position: fixed; inset: 0; z-index: 480;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.55); padding: 1rem;
}
.tutorial[hidden] { display: none !important; }
.modal {
  position: fixed; inset: 0; z-index: 520;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.62); padding: 1rem;
}
.modal[hidden] { display: none !important; }
.modal-box #pixKeyModalBody,
.modal-box #saqueHoldModalBody { color: var(--text-muted); line-height: 1.45; margin: .35rem 0 1rem; }
.modal-box {
  width: 100%; max-width: 440px; padding: 1.15rem; position: relative;
  max-height: min(86dvh, 640px); overflow: auto;
  margin-bottom: env(safe-area-inset-bottom);
}
.tutorial-card { width: 100%; max-width: 440px; padding: 1.15rem; position: relative; animation: sheetUp .35s ease; }
.tut-close { position: absolute; top: .7rem; right: .7rem; background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; }
.tutorial-card h3 { margin: .35rem 0 .4rem; }
.tutorial-card p { color: var(--text-muted); font-size: .88rem; line-height: 1.45; }
.tut-progress { display: flex; gap: .25rem; margin: .9rem 0; }
.tut-progress i { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,.1); }
.tut-progress i.on { background: var(--pink); }
.tut-nav { display: flex; justify-content: space-between; align-items: center; }
.tut-nav-right { display: flex; gap: .4rem; }

.glass, .kpi-card, .house-card, .house-row, .rail-card, .btn, .side-link, .bottom-link, .bottom-fab, .pix-type, .util-btn, .history-item, .hero-card, .period-btn, .auth-tab, .max-btn {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .kpi-card:hover, .house-card:hover, .rail-card:hover, .hero-card:hover, .house-row:hover, .history-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(124, 58, 237, .18);
  }
  .btn:hover, .pix-type:hover, .util-btn:hover, .side-link:hover, .bottom-fab:hover, .period-btn:hover, .max-btn:hover {
    transform: translateY(-1px);
  }
}
.kpi-card:active, .house-card:active, .rail-card:active, .hero-card:active, .house-row:active,
.btn:active, .pix-type:active, .util-btn:active, .side-link:active, .bottom-link:active, .bottom-fab:active,
.history-item:active, .period-btn:active, .auth-tab:active, .max-btn:active {
  opacity: .92;
}
@media (hover: hover) and (pointer: fine) {
  .kpi-card:active, .house-card:active, .rail-card:active, .hero-card:active, .house-row:active,
  .btn:active, .pix-type:active, .util-btn:active, .side-link:active, .bottom-link:active, .bottom-fab:active,
  .history-item:active, .period-btn:active, .auth-tab:active, .max-btn:active {
    transform: scale(.98);
    opacity: 1;
  }
  .btn.gradient:active { transform: scale(.97); }
}

@keyframes slideUpIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.animate-in { animation: slideUpIn .45s ease both; }
.hero-card { transition: box-shadow .3s ease; }
.hero-card:hover { box-shadow: 0 0 56px rgba(168,85,247,.32); }
.kpi-card, .rail-card, .house-row { transition: transform .22s ease, box-shadow .22s ease; }
.btn.gradient { transition: transform .18s ease, box-shadow .18s ease; }

@media (max-width: 768px) {
  :root { --sidebar: 0px; --rail: 100%; --header: 64px; --bottom: 84px; }
  .glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(14, 16, 32, .94);
  }
  .auth-card.glass {
    background: rgba(14, 16, 32, .96);
  }
  .sidebar {
    width: min(88vw, 300px);
    transform: translateX(-100%);
    box-shadow: var(--shadow);
  }
  .sidebar.open { transform: translateX(0); }
  .workspace { margin-left: 0; padding-bottom: calc(var(--bottom) + 12px); }
  .mobile-only { display: flex; }
  .bottom-nav.mobile-only { display: grid; }
  .app-header { padding: 0 .85rem; flex-wrap: wrap; height: auto; min-height: var(--header); padding-top: .65rem; padding-bottom: .65rem; }
  .header-title h1 { font-size: 1.05rem; }
  .header-actions { width: 100%; justify-content: space-between; margin-left: 0; margin-top: .45rem; }
  .header-profile, .period-tabs { display: none; }
  .page-body { grid-template-columns: 1fr; padding: .75rem; gap: .75rem; }
  .right-rail { position: static; display: flex; flex-direction: column; gap: .75rem; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
  .kpi-card { min-height: 96px; padding: .75rem; }
  .kpi-body strong { font-size: 1rem; }
  .hero-value { font-size: 1.75rem; }
  .hero-top { grid-template-columns: 1fr; }
  .hero-chart-wrap { height: 70px; }
  .dash-grid, .network-grid, .withdraw-layout, .agents-layout { grid-template-columns: 1fr; }
  .btn.gradient.sm { flex: 1; justify-content: center; }
  .auth-card { margin: .5rem; padding: 1.35rem; }
  .sidebar-user { padding-bottom: calc(var(--bottom) + .5rem); }
}

@media (max-width: 400px) {
  .kpi-row { grid-template-columns: 1fr; }
}

/* ── PWA install prompt ── */
.pwa-install {
  position: fixed;
  inset: 0;
  z-index: 920;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
}
.pwa-install.visible { opacity: 1; pointer-events: auto; }
.pwa-install[hidden] { display: none !important; }
.pwa-install-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 16, .72);
  backdrop-filter: blur(6px);
}
.pwa-install-card {
  position: relative;
  width: min(100%, 420px);
  padding: 1.35rem 1.2rem 1.15rem;
  text-align: center;
  transform: translateY(18px);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 24px 64px rgba(0,0,0,.55), var(--glow);
}
.pwa-install.visible .pwa-install-card { transform: none; }
.pwa-install-icon {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  margin: 0 auto .85rem;
  display: block;
  box-shadow: 0 8px 28px rgba(124, 58, 237, .45);
}
.pwa-install-card h3 {
  font-size: 1.15rem;
  margin: .35rem 0 .45rem;
}
.pwa-install-desc {
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.45;
  margin-bottom: .75rem;
}
.pwa-install-ios {
  font-size: .82rem;
  line-height: 1.45;
  margin-bottom: .85rem;
  padding: .65rem .75rem;
  border-radius: var(--radius-sm);
  background: rgba(124, 58, 237, .12);
  border: 1px solid rgba(168, 139, 250, .18);
}
.pwa-install-actions {
  display: flex;
  gap: .55rem;
}
.pwa-install-actions .btn { flex: 1; justify-content: center; }
.pwa-install-close {
  position: absolute;
  top: .65rem;
  right: .65rem;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--text-muted);
  cursor: pointer;
  font-size: .95rem;
}

/* ── PWA loading / install screen ── */
.pwa-loading {
  position: fixed;
  inset: 0;
  z-index: 980;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05060f;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
  overflow: hidden;
}
.pwa-loading.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.pwa-loading[hidden] { display: none !important; }
.pwa-loading.done .pwa-loading-logo {
  animation: pwaPulseDone .9s ease infinite alternate;
}
.pwa-loading-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pwa-loading-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: .55;
  animation: pwaOrbFloat 6s ease-in-out infinite;
}
.pwa-loading-orb.orb-1 {
  width: 220px; height: 220px;
  top: 8%; left: -8%;
  background: radial-gradient(circle, rgba(124,58,237,.85), transparent 70%);
}
.pwa-loading-orb.orb-2 {
  width: 260px; height: 260px;
  bottom: 10%; right: -12%;
  background: radial-gradient(circle, rgba(236,72,153,.75), transparent 70%);
  animation-delay: -2s;
}
.pwa-loading-orb.orb-3 {
  width: 180px; height: 180px;
  top: 42%; left: 38%;
  background: radial-gradient(circle, rgba(99,102,241,.55), transparent 70%);
  animation-delay: -4s;
}
.pwa-loading-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168,139,250,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,139,250,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 100%);
}
.pwa-loading-content {
  position: relative;
  z-index: 1;
  width: min(100%, 320px);
  padding: 1.5rem 1.25rem 1.75rem;
  text-align: center;
}
.pwa-loading-ring {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto 1.1rem;
}
.pwa-loading-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.pwa-loading-track {
  fill: none;
  stroke: rgba(168,139,250,.12);
  stroke-width: 6;
}
.pwa-loading-progress {
  fill: none;
  stroke: url(#pwaLoadingGrad);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset .18s ease;
  filter: drop-shadow(0 0 8px rgba(168,85,247,.65));
}
.pwa-loading-logo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  box-shadow: 0 0 32px rgba(168,85,247,.45);
  animation: pwaLogoSpin 3.2s ease-in-out infinite;
}
.pwa-loading-pct {
  font-size: 2.65rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: .55rem;
  font-variant-numeric: tabular-nums;
}
.pwa-loading-pct span {
  font-size: 1.35rem;
  font-weight: 700;
  opacity: .85;
}
.pwa-loading-status {
  font-size: .92rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  min-height: 1.35em;
  animation: pwaStatusFade .45s ease;
}
.pwa-loading-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  border: 1px solid rgba(168,139,250,.14);
}
.pwa-loading-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--gradient);
  box-shadow: 0 0 18px rgba(168,85,247,.55);
  transition: width .18s ease;
  position: relative;
}
.pwa-loading-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: pwaBarShine 1.4s linear infinite;
}
.pwa-loading-hint {
  margin-top: .85rem;
  font-size: .78rem;
  line-height: 1.45;
  white-space: pre-line;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

@keyframes pwaOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12px, -16px) scale(1.08); }
}
@keyframes pwaLogoSpin {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.04) rotate(2deg); }
}
@keyframes pwaBarShine {
  from { transform: translateX(-120%); }
  to { transform: translateX(220%); }
}
@keyframes pwaStatusFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes pwaPulseDone {
  from { box-shadow: 0 0 24px rgba(168,85,247,.45); }
  to { box-shadow: 0 0 42px rgba(236,72,153,.75); }
}

/* ── PWA standalone (app instalado) ── */
html.pwa-standalone {
  --header: 58px;
  --bottom: 78px;
}
html.pwa-standalone body {
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}
html.pwa-standalone .app-shell {
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
}
html.pwa-standalone .sidebar {
  padding-top: calc(1.1rem + env(safe-area-inset-top));
}
html.pwa-standalone .app-header {
  padding-top: calc(.65rem + env(safe-area-inset-top));
}
html.pwa-standalone .bottom-nav {
  padding-bottom: calc(.45rem + env(safe-area-inset-bottom));
}
html.pwa-standalone .app-footer {
  display: none;
}
html.pwa-standalone .auth-screen {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
html.pwa-standalone .workspace {
  padding-bottom: calc(var(--bottom) + env(safe-area-inset-bottom));
}
html.pwa-standalone .page-body {
  padding-bottom: .25rem;
}
html.pwa-standalone .hero-actions,
html.pwa-standalone .hero-utils {
  flex-wrap: wrap;
}
html.pwa-standalone .header-actions .btn.gradient.sm {
  width: 100%;
}


/* Ativar ID — histórico do influencer */
.agents-history { margin-top: 1rem; }
.agents-history .panel-head.compact {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.agents-history-empty { margin: .35rem 0 0; font-size: .82rem; }
.agents-history-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.agents-history-table th,
.agents-history-table td {
  text-align: left; padding: .55rem .35rem; border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: top;
}
.agents-history-table th { color: var(--text-dim); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.agents-history-status.ok { color: #86efac; }
.agents-history-status.fail { color: #fdba74; }
.btn.ghost { background: transparent; border: 1px solid var(--glass-border); color: var(--text-muted); }
.btn.ghost:hover { color: var(--text); border-color: rgba(255,255,255,.18); }


/* Meus Ids + popups de ativação */
.agents-myids-cta { margin-top: 1rem; display: grid; gap: .75rem; }
.agents-myids-cta p { margin: 0; font-size: .86rem; }
.my-ids-panel .panel-head.compact,
.my-ids-panel .panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem;
}
.my-ids-empty { margin: .25rem 0 0; font-size: .86rem; }
.my-ids-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.my-ids-table th,
.my-ids-table td {
  padding: .65rem .55rem; border-bottom: 1px solid rgba(255,255,255,.06); text-align: left; vertical-align: top;
}
.my-ids-table th {
  color: var(--text-dim); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
}

.jornada {
  position: relative;
  padding: 1.15rem 1.15rem 1rem;
  margin-bottom: 1rem;
}
.jornada-head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: flex-start; justify-content: space-between;
  margin-bottom: .85rem;
}
.jornada-head h2 {
  font-size: 1.05rem; letter-spacing: -.02em; margin: 0;
  text-transform: uppercase;
}
.jornada-tag {
  display: inline-block; margin-top: .35rem;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.jornada-stats { display: flex; gap: .55rem; flex-wrap: wrap; }
.jornada-stat {
  min-width: 6.5rem; padding: .65rem .8rem;
  border-radius: 13px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.03);
}
.jornada-stat b { display: block; font-size: 1.2rem; line-height: 1.15; }
.jornada-stat small {
  color: var(--text-dim); font-size: .65rem; text-transform: uppercase; letter-spacing: .06em;
}
.jornada-stat.hi {
  background: var(--gradient); border-color: transparent;
}
.jornada-stat.hi small { color: rgba(255,255,255,.82); }
.jornada-bar {
  height: 7px; border-radius: 99px; overflow: hidden;
  margin: .85rem 0 .4rem; border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.35);
}
.jornada-bar i {
  display: block; height: 100%; width: 0;
  background: var(--gradient); border-radius: 99px;
}
.jornada-barlab {
  display: flex; justify-content: space-between;
  font-size: .75rem; color: var(--text-dim);
}
.jornada-rules {
  margin: 1rem 0 0;
  padding: .9rem 1rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.22);
  font-size: .86rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.jornada-rules h3 {
  margin: 0 0 .55rem;
  color: #fff;
  font-size: 1rem;
}
.jornada-rules p { margin: 0 0 .65rem; }
.jornada-rules ul {
  margin: 0 0 .7rem;
  padding-left: 1.1rem;
}
.jornada-rules li { margin: .15rem 0; }
.jornada-nextline {
  margin: 0 0 .85rem;
  font-size: .8rem;
  color: var(--text-dim);
}
.jornada-nextline b { color: #f3eefb; }
.jornada-note {
  margin: .55rem 0 .85rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.jornada-board { position: relative; }
.jornada-stage {
  position: relative;
  border-radius: 20px; padding: 8px 4px 12px; overflow: hidden;
  border: 1px solid var(--glass-border); background: rgba(0,0,0,.22);
  min-height: 280px;
}
.jornada-stage svg { display: block; width: 100%; height: auto; max-width: 100%; min-width: 0; }
.jornada-stat b.is-pop {
  animation: jornada-bonus-pop .7s cubic-bezier(.2,1.4,.3,1);
}
@keyframes jornada-bonus-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); color: #f0abfc; }
  100% { transform: scale(1); }
}
.jornada-receber {
  position: absolute;
  z-index: 8;
  pointer-events: auto;
  transform: translate(-50%, 54px);
  padding: .32rem .62rem .3rem;
  border: 0; border-radius: 16px;
  background: var(--gradient); color: #fff;
  font-weight: 800; font-size: .62rem; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer;
  box-shadow: 0 8px 22px rgba(168, 85, 247, .35);
  animation: jornada-receber-in .45s ease;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.12;
  min-width: 7.2rem;
}
.jornada-receber span { opacity: .86; font-size: .56rem; }
.jornada-receber strong {
  font-size: .9rem;
  letter-spacing: 0;
  font-weight: 800;
}
.jornada-receber em {
  font-style: normal;
  font-size: .62rem;
  font-weight: 800;
  opacity: .92;
  letter-spacing: .06em;
  margin-top: .06rem;
}
.jornada-receber.is-busy { opacity: .78; cursor: wait; }
@keyframes jornada-receber-in {
  from { opacity: 0; transform: translate(-50%, 68px) scale(.92); }
  to { opacity: 1; transform: translate(-50%, 54px) scale(1); }
}
.jornada .float.is-wave { animation: jornada-wave 1.05s ease-in-out 2; }
@keyframes jornada-wave {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-12px) rotate(-5deg); }
  75% { transform: translateY(-6px) rotate(5deg); }
}
.jornada-flow { stroke-dasharray: 9 24; animation: jornada-flow 1.1s linear infinite; }
@keyframes jornada-pulse-line {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.55); }
}
.jornada-stage svg path.is-pulse { animation: jornada-pulse-line .9s ease-in-out 2; }
@keyframes jornada-flow { to { stroke-dashoffset: -66; } }
.jornada .float { animation: jornada-float 4.5s ease-in-out infinite; }
.jornada-node.is-on .float {
  filter: drop-shadow(0 0 16px rgba(192, 132, 252, .95)) drop-shadow(0 0 28px rgba(168, 85, 247, .55));
}
.jornada .float.is-evolving { animation: jornada-evolve 1.15s cubic-bezier(.2, 1.35, .3, 1); }
@keyframes jornada-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes jornada-evolve {
  0% { transform: translateY(18px) scale(.62); filter: brightness(2.2) saturate(1.6); }
  38% { transform: translateY(-18px) scale(1.2); filter: brightness(1.45) drop-shadow(0 0 22px #e879f9); }
  100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 14px #c084fc); }
}
.jornada-node.is-on .evo-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: jornada-ring 1.8s ease-out infinite;
}
.jornada-node.is-on .halo {
  animation: jornada-aura 2.4s ease-in-out infinite;
}
@keyframes jornada-ring {
  0% { opacity: .95; transform: scale(.55); }
  100% { opacity: 0; transform: scale(1.45); }
}
@keyframes jornada-aura {
  0%, 100% { opacity: .35; }
  50% { opacity: .8; }
}
.jornada .shade { display: none; }
.jornada .lock { transition: opacity .5s ease; }
.jornada .burst { transform-box: fill-box; transform-origin: center; pointer-events: none; }
.jornada .burst.go { animation: jornada-burst .95s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes jornada-burst {
  0% { opacity: .95; transform: scale(.2); }
  100% { opacity: 0; transform: scale(2.2); }
}
.jornada-toast {
  position: fixed; left: 50%; bottom: calc(var(--bottom, 72px) + 1.1rem);
  transform: translate(-50%, 140%);
  background: var(--gradient); color: #fff; padding: .7rem 1.1rem;
  border-radius: 15px; font-weight: 700; font-size: .86rem;
  box-shadow: 0 14px 44px rgba(168, 85, 247, .45);
  transition: transform .22s ease-out;
  z-index: 1110; display: flex; gap: .7rem; align-items: center; max-width: min(92vw, 420px);
  pointer-events: none;
}
.jornada-toast.on { transform: translate(-50%, 0); }
.jornada-toast img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.jornada-payout {
  position: fixed; inset: 0; z-index: 1100;
  display: grid; place-items: center;
  background: rgba(6, 4, 16, .62);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.jornada-payout[hidden] { display: none; }
.jornada-payout-card {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.55rem 1.7rem 1.35rem; border-radius: 24px; text-align: center;
  min-width: 220px; max-width: min(92vw, 360px);
  background: linear-gradient(180deg, rgba(28,16,48,.97), rgba(12,8,22,.97));
  border: 1px solid rgba(232, 121, 249, .45);
  box-shadow: 0 24px 80px rgba(168, 85, 247, .45), 0 0 60px rgba(236, 72, 153, .22);
  animation: jornada-payout-pop .22s ease-out;
}
.jornada-payout-card img {
  width: 112px; height: 112px; object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(192, 132, 252, .9));
}
.jornada-payout-card small {
  text-transform: uppercase; letter-spacing: .14em; font-weight: 800;
  color: #e9d5ff; font-size: .72rem;
}
.jornada-payout-card b {
  font-size: 2.15rem; letter-spacing: -.03em; line-height: 1.1;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.jornada-payout-card p {
  margin: 0; color: #c4b5e0; font-size: .9rem; font-weight: 700;
}
.jornada-payout-card strong {
  font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: #fdba74;
}
.jornada-payout.is-error .jornada-payout-card b {
  color: #fdba74; background: none; -webkit-background-clip: unset; background-clip: unset;
}
@keyframes jornada-payout-pop {
  0% { transform: scale(.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .jornada-flow, .jornada .float, .jornada .float.is-evolving, .jornada-node.is-on .evo-ring, .jornada-node.is-on .halo, .jornada-payout-card, .jornada-stat b.is-pop, .network-mascot-stage { animation: none; }
  .nm-light { display: none; }
}
@media (max-width: 720px) {
  .jornada { padding: .75rem .55rem .7rem; }
  .jornada-head { gap: .65rem; }
  .jornada-head h2 { font-size: .92rem; line-height: 1.25; }
  .jornada-stats { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .jornada-stat { min-width: 0; padding: .55rem .65rem; }
  .jornada-stat b { font-size: 1.05rem; }
  .jornada-stage { padding: 2px 0 52px; border-radius: 14px; }
  .jornada-receber { min-width: 6.6rem; padding: .28rem .5rem .26rem; }
}
.agents-busy-card, .agents-busy-card h3 { text-align: center; }
.agents-spinner {
  width: 42px; height: 42px; margin: .2rem auto 1rem;
  border-radius: 50%;
  border: 3px solid rgba(168,85,247,.22);
  border-top-color: #c084fc;
  animation: agents-spin .8s linear infinite;
}
@keyframes agents-spin { to { transform: rotate(360deg); } }
.label.danger { color: #fdba74; }
.agents-active-card.is-success .label { color: #86efac; }
.agents-active-card.is-error .label { color: #fdba74; }

.demo-layout { display: grid; gap: 1rem; }
.demo-houses { display: grid; gap: .75rem; margin-top: 1rem; }
.demo-house {
  display: flex; align-items: flex-start; gap: .85rem; flex-wrap: wrap;
  padding: 1rem 1.05rem 1.05rem; border-radius: 16px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.03);
}
.demo-house img, .demo-house .demo-ico {
  width: 42px; height: 42px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
}
.demo-house .demo-ico {
  display: grid; place-items: center; font-weight: 800; font-size: .75rem; color: #fff;
}
.demo-house strong { display: block; }
.demo-house > .demo-house-copy > span { color: var(--text-muted); font-size: .78rem; }
.demo-house .demo-house-copy { flex: 1; min-width: 160px; }
.demo-qty {
  flex: 1 1 100%;
  display: grid; gap: .55rem;
  padding-top: .15rem;
}
.demo-qty-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  font-size: .78rem; color: var(--text-muted);
}
.demo-qty-ctrl {
  display: flex; align-items: center; gap: .55rem;
}
.demo-qty-ctrl button {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,.04);
  color: var(--text); font-size: 1.25rem; font-weight: 700; cursor: pointer;
  touch-action: manipulation;
}
.demo-qty-ctrl button:disabled { opacity: .35; cursor: default; }
.demo-qty-num {
  min-width: 2.2rem; text-align: center; font-size: 1.45rem; font-weight: 800;
}
.demo-qty input[type="range"] {
  width: 100%; height: 32px; margin: 0; accent-color: #a855f7;
  cursor: pointer; touch-action: pan-x;
  -webkit-appearance: none; appearance: none;
  background: transparent;
}
.demo-qty input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #6d28d9, #a855f7);
}
.demo-qty input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -7px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .45);
  cursor: grab;
}
.demo-qty input[type="range"]::-moz-range-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #6d28d9, #a855f7);
}
.demo-qty input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px rgba(168, 85, 247, .45);
  cursor: grab;
}
.demo-house .btn.gradient { width: 100%; }
.demo-today { display: grid; gap: .55rem; }
.demo-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center;
  padding: .7rem .8rem; border-radius: 12px; border: 1px solid var(--glass-border);
  font-size: .82rem;
}
.demo-row code { color: #ddd6fe; }
.demo-ok {
  display: inline-flex; align-items: center; gap: .25rem;
  color: #86efac; font-weight: 700; font-size: .75rem;
}
.demo-ok.is-pop { animation: demo-ok-pop .45s ease; }
@keyframes demo-ok-pop {
  0% { transform: scale(.6); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.demo-fail { color: #fdba74; font-size: .75rem; font-weight: 700; }
.demo-modal-card { width: min(520px, 100%); max-height: min(88vh, 720px); overflow: auto; }
.demo-saque-hint {
  margin: .2rem 0 .85rem;
  padding: .65rem .8rem;
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, .35);
  background: rgba(168, 85, 247, .12);
  font-size: .86rem;
  color: #ede9fe;
}
.demo-saque-hint strong { color: #fff; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.demo-copy-box {
  width: 100%; min-height: 140px; margin-bottom: .75rem;
  padding: .7rem .8rem; border-radius: 12px;
  border: 1px solid var(--glass-border); background: rgba(0,0,0,.35); color: #e9e4ff;
  font-size: .78rem; line-height: 1.45; resize: vertical;
}
.demo-modal-list { display: grid; gap: .45rem; margin-bottom: .85rem; }
.demo-modal-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .55rem; }
.demo-modal-actions .btn { flex: 1; min-width: 140px; }

.relatorio-layout { display: grid; gap: 1rem; }
.relatorio-alert {
  padding: .85rem 1rem; border-radius: 14px; margin-bottom: .85rem;
  border: 1px solid rgba(244, 114, 182, .45); background: rgba(157, 23, 77, .22);
  color: #fce7f3; font-size: .9rem; line-height: 1.45;
}
.relatorio-alert.is-warn { border-color: rgba(244, 114, 182, .45); }
.relatorio-meta h3 { margin: .2rem 0 .15rem; }
.relatorio-kpis {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem;
  margin: 1rem 0;
}
.relatorio-kpis div {
  padding: .75rem .85rem; border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, .28); background: rgba(88, 28, 135, .18);
}
.relatorio-kpis span { display: block; font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.relatorio-kpis strong { font-size: 1.05rem; }
.relatorio-gap {
  padding: 1rem 1.05rem 1.05rem; border-radius: 16px; margin: .85rem 0 1rem;
}
.relatorio-gap-tag {
  display: inline-block;
  margin-bottom: .45rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f5d0fe;
}
.relatorio-gap strong { display: block; font-size: 1.05rem; line-height: 1.3; }
.relatorio-gap.is-pending {
  border: 1px solid rgba(244, 114, 182, .55); background: rgba(157, 23, 77, .28);
  box-shadow: 0 10px 28px rgba(168, 85, 247, .22);
}
.relatorio-gap.is-ok {
  border: 1px solid rgba(167, 139, 250, .4); background: rgba(76, 29, 149, .22);
}
.relatorio-gap .btn { width: 100%; margin-top: .15rem; }
.relatorio-gap p { margin: .4rem 0 .75rem; font-size: .86rem; color: #e9d5ff; }
.relatorio-gap.is-fixing { pointer-events: none; }
.relatorio-note {
  margin: .2rem 0 .9rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(196, 181, 253, .45);
  background: rgba(76, 29, 149, .22);
  color: #f5f3ff;
  font-size: .9rem;
  line-height: 1.45;
}
.relatorio-block { margin: .4rem 0 1rem; }
.relatorio-block h4 { margin: 0 0 .55rem; font-size: .95rem; }
.relatorio-table-wrap { overflow-x: auto; }
.relatorio-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.relatorio-table th, .relatorio-table td {
  text-align: left;
  padding: .55rem .6rem;
  border-bottom: 1px solid rgba(167, 139, 250, .28);
  white-space: nowrap;
}
.relatorio-table th {
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #c4b5fd;
}
.relatorio-table td span {
  display: block;
  font-size: .68rem;
  color: var(--text-muted);
  font-weight: 500;
}
.ajuste-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: .75rem 0 1rem;
}
.ajuste-stats .mini-stat {
  padding: .55rem .65rem; border-radius: 12px; background: rgba(124,58,237,.12); border: 1px solid rgba(168,85,247,.22);
}
.ajuste-stats .mini-stat strong { display: block; font-size: 1rem; }
.ajuste-stats .mini-stat span { font-size: .72rem; color: #c4b5fd; }
.ajuste-filter-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.ajuste-filter-tabs .btn.is-active { background: rgba(236,72,153,.18); border-color: rgba(236,72,153,.45); }
.panel-head.compact { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.relatorio-fix-progress {
  margin-top: .55rem;
  display: grid;
  gap: .45rem;
}
.relatorio-fix-progress span {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f5d0fe;
}
.relatorio-fix-progress i {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: rgba(0,0,0,.35);
  overflow: hidden;
  position: relative;
}
.relatorio-fix-progress i::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: 99px;
  background: var(--gradient);
  animation: relatorio-fix-bar 1s ease-in-out infinite;
}
@keyframes relatorio-fix-bar {
  0% { left: -38%; }
  100% { left: 100%; }
}
@media (min-width: 720px) {
  .relatorio-kpis { grid-template-columns: repeat(4, 1fr); }
}

/* ── Notificações, Rede ao vivo, Ranking ── */
.notify-wrap { position: relative; z-index: 3; overflow: visible; }
.notify-btn {
  position: relative;
  overflow: visible;
  width: 52px;
  height: 52px;
  min-width: 52px;
  padding: 0;
  background: transparent;
  border-color: transparent;
}
.notify-btn .notify-bell-art {
  width: 58px;
  height: 58px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(168, 85, 247, .55));
  transform-origin: 50% 12%;
}
.notify-btn.has-unread .notify-bell-art {
  animation: notify-swing 2.6s ease-in-out infinite;
}
.notify-btn.is-ding .notify-bell-art {
  animation: notify-ding .7s ease-in-out;
}
.notify-btn.has-unread .notify-dot {
  animation: notify-dot-pulse 1.5s ease-in-out infinite;
}
.notify-btn[aria-expanded="true"] .notify-bell-art,
.notify-btn[aria-expanded="true"] .notify-dot {
  animation: none;
}
@keyframes notify-swing {
  0%, 12% { transform: rotate(0); }
  16% { transform: rotate(16deg); }
  20% { transform: rotate(-14deg); }
  24% { transform: rotate(11deg); }
  28% { transform: rotate(-8deg); }
  32% { transform: rotate(4deg); }
  36%, 100% { transform: rotate(0); }
}
@keyframes notify-ding {
  0% { transform: rotate(0); }
  18% { transform: rotate(18deg); }
  36% { transform: rotate(-16deg); }
  54% { transform: rotate(10deg); }
  72% { transform: rotate(-6deg); }
  100% { transform: rotate(0); }
}
@keyframes notify-dot-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(7, 8, 20, .9); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 2px rgba(7, 8, 20, .9), 0 0 10px rgba(244, 114, 182, .8); }
}
.notify-dot {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px;
  background: linear-gradient(135deg, #f472b6, #a855f7);
  color: #fff;
  font-size: .58rem; font-weight: 800; line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(7, 8, 20, .9);
}
.notify-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(360px, calc(100vw - 24px));
  max-height: min(70vh, 420px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(12, 14, 32, .96);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
  z-index: 140;
}
.notify-panel[hidden] { display: none !important; }
.notify-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem .9rem .55rem;
  border-bottom: 1px solid var(--glass-border);
}
.notify-panel-head strong { font-size: .85rem; }
.notify-list {
  list-style: none; margin: 0; padding: .35rem 0 .5rem;
  overflow-y: auto; max-height: 360px;
}
.notify-list > .muted { padding: .85rem 1rem; font-size: .82rem; }
.notify-item {
  display: grid; gap: .15rem;
  padding: .7rem .95rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.notify-item:hover { background: rgba(168, 85, 247, .08); }
.notify-item strong { font-size: .82rem; }
.notify-item span { font-size: .75rem; color: var(--text-muted); }
.notify-item em { font-size: .68rem; font-style: normal; color: var(--text-dim); }
.notify-item.is-unread strong { color: #f5d0fe; }
.notify-item.nt-deposit { border-left: 3px solid #22d3ee; }
.notify-item.nt-withdraw { border-left: 3px solid #a3e635; }
.notify-item.nt-news:not(.notify-news-card) { border-left: 3px solid #f472b6; }
.notify-item.notify-saque-card {
  border-left: 3px solid #f5c542;
  background: rgba(245, 197, 66, .08);
}
.notify-item.notify-saque-card strong { color: #f8e7a0; }
.notify-saque-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .62rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1a1404;
  background: #f5c542;
  border-radius: 999px;
  padding: .12rem .45rem;
  margin-bottom: .25rem;
  font-weight: 700;
}
.notify-item.notify-news-card {
  margin: .45rem .6rem;
  padding: .78rem .88rem .72rem;
  border-radius: 14px;
  border: 1px solid rgba(244, 114, 182, .32);
  background:
    linear-gradient(135deg, rgba(124, 58, 237, .24) 0%, rgba(236, 72, 153, .11) 55%, rgba(14, 10, 28, .35) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 26px rgba(88, 28, 135, .18);
  border-bottom: 0;
}
.notify-item.notify-news-card + .notify-item:not(.notify-news-card),
.notify-item:not(.notify-news-card) + .notify-item.notify-news-card {
  margin-top: .15rem;
}
.notify-item.notify-news-card:hover {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, .32) 0%, rgba(236, 72, 153, .16) 55%, rgba(14, 10, 28, .4) 100%);
}
.notify-item.notify-news-card.is-unread strong { color: #fce7f3; }
.notify-item.notify-news-card span { color: rgba(255, 255, 255, .78); }
.notify-news-badge {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  width: fit-content;
  padding: .18rem .48rem;
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fdf4ff;
  background: linear-gradient(135deg, rgba(168, 85, 247, .55), rgba(236, 72, 153, .45));
  border: 1px solid rgba(255, 255, 255, .14);
}
.notify-news-badge span { font-size: .62rem; opacity: .95; }

.rank-teaser, .rank-page { margin-top: 1rem; width: 100%; }
.rank-board {
  display: grid;
  grid-template-columns: minmax(168px, .92fr) minmax(0, 1.35fr) minmax(168px, .92fr);
  gap: .85rem 1.1rem;
  align-items: stretch;
}
.rank-teaser .rank-board,
.rank-teaser .rank-board-teaser {
  grid-template-columns: minmax(0, 1fr) minmax(176px, 236px);
  gap: .85rem 1.15rem;
  align-items: stretch;
}
.rank-teaser .rank-side-slim {
  align-content: center;
}
.rank-teaser .rank-side-stack {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  align-self: stretch;
  gap: .42rem;
}
.rank-teaser .rank-side-stack .rank-stat {
  min-height: auto;
  padding: .55rem .72rem;
  gap: .1rem;
  flex: 0 0 auto;
  overflow: visible;
}
@media (min-width: 1024px) {
  .rank-teaser .rank-side-stack .rank-stat {
    flex: 1 1 0;
    min-height: 0;
  }
}
.rank-teaser .rank-side-stack .rank-stat .k { font-size: .62rem; }
.rank-teaser .rank-side-stack .rank-stat .v { font-size: 1.12rem; }
.rank-teaser .rank-side-stack .rank-stat .s { font-size: .68rem; }
.rank-teaser .rank-side-slim .rank-stat {
  min-height: 110px;
}
.rank-teaser .rank-hero {
  padding: .2rem .25rem .15rem;
}
.rank-teaser .rank-trophy-stage {
  width: 188px;
  height: 196px;
}
.rank-teaser .rank-trophy {
  width: 168px;
  filter: drop-shadow(0 14px 34px rgba(168, 85, 247, .7)) drop-shadow(0 0 16px rgba(236, 72, 153, .28));
}
.rank-teaser .rank-title {
  font-size: 1.22rem;
  margin: .28rem 0 .2rem;
}
.rank-teaser .rank-badges {
  max-width: 560px;
  gap: .35rem;
  margin-top: .55rem;
}
.rank-teaser .rk-badge {
  max-width: 100px;
}
.rank-teaser .rk-b-1 {
  max-width: 118px;
  transform: translateY(-12px);
}
.rank-teaser .rk-b-2,
.rank-teaser .rk-b-3 { max-width: 102px; }
.rank-teaser .rk-b-4,
.rank-teaser .rk-b-5 { max-width: 92px; }
.rank-teaser .rk-badge img {
  filter: drop-shadow(0 8px 16px rgba(124, 58, 237, .45));
}
.rank-teaser .rk-cap {
  margin-top: .28rem;
  gap: .14rem;
  width: 100%;
}
.rank-teaser .rk-cap .rank-who {
  font-size: .78rem;
  line-height: 1.2;
  justify-content: center;
}
.rank-teaser .rk-cap .aff-name {
  font-weight: 800;
  color: #f3e8ff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.rank-teaser .rk-cap strong {
  font-size: .8rem;
  font-weight: 800;
  color: #f5d0fe;
  letter-spacing: -.01em;
}
.rank-teaser .rk-badge.is-me .rk-cap .aff-name { color: #fef9c3; }
.rank-teaser .rk-badge.is-me .rk-cap strong { font-size: .84rem; }
.rank-teaser .rank-stat .v { font-size: 1.48rem; }
.rank-teaser.is-named .rank-trophy-stage {
  width: 200px;
  height: 208px;
}
.rank-teaser.is-named .rank-trophy {
  width: 180px;
  filter: drop-shadow(0 16px 38px rgba(168, 85, 247, .78)) drop-shadow(0 0 20px rgba(236, 72, 153, .38));
}
.rank-teaser.is-named .rank-aura {
  background: radial-gradient(circle, rgba(236, 72, 153, .42), rgba(168, 85, 247, .2) 48%, transparent 74%);
}
.rank-teaser.is-named .rank-stat .v { font-size: 1.55rem; }
.rank-teaser.is-named .rank-stat.is-you {
  box-shadow: 0 0 28px rgba(250, 204, 21, .28);
}
.rank-teaser.is-named .rank-badges {
  transform: none;
}
.rank-side {
  display: grid;
  gap: .65rem;
  align-content: center;
  min-width: 0;
}
.rank-stat {
  padding: .85rem .9rem;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  display: grid;
  gap: .18rem;
  min-height: 88px;
}
.rank-stat .k {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rank-stat .v {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 1.38rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.rank-stat .s { font-size: .75rem; color: var(--text-dim); line-height: 1.35; }
.rank-stat.is-you {
  background: linear-gradient(160deg, rgba(250,204,21,.18), rgba(168,85,247,.12));
  border-color: rgba(250,204,21,.42);
  box-shadow: 0 0 22px rgba(250,204,21,.16);
  animation: me-card-pulse 1.7s ease-in-out infinite;
}
.rank-stat.is-you .v { color: #fde047; text-shadow: 0 0 16px rgba(250,204,21,.55); }
.rank-stat.is-lead {
  background: linear-gradient(160deg, rgba(52,211,153,.14), rgba(168,85,247,.08));
  border-color: rgba(52,211,153,.28);
}
.rank-stat.is-lead .v { color: #6ee7b7; }
.rank-stat.is-hunt .v { color: #7dd3fc; }
@keyframes me-card-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(250,204,21,.12); }
  50% { box-shadow: 0 0 28px rgba(250,204,21,.38); }
}
.rank-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .15rem 0 .1rem;
  min-width: 0;
}
.rank-trophy-stage {
  position: relative;
  width: 168px;
  height: 176px;
  display: grid;
  place-items: center;
  z-index: 2;
}
.rank-aura {
  position: absolute;
  inset: 14% 10% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192,132,252,.45), rgba(168,85,247,.12) 46%, transparent 72%);
  animation: rank-aura-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
.rank-trophy {
  position: relative;
  z-index: 2;
  width: 148px;
  height: auto;
  display: block;
  mix-blend-mode: screen;
  animation: jornada-float 4.5s ease-in-out infinite;
  filter: drop-shadow(0 12px 28px rgba(168, 85, 247, .55));
}
@keyframes rank-aura-pulse {
  0%, 100% { opacity: .55; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
.rank-title {
  margin: .2rem 0 .15rem;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: .03em;
}
#rankingWeekLabel { margin: 0 0 .15rem; font-size: .82rem; }
.rank-hero .link-btn { margin: .35rem 0 .05rem; }

.rank-badges {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: .15rem;
  margin: .35rem auto 0;
  padding: 0;
  width: 100%;
  max-width: 420px;
}
.rk-badge {
  flex: 1 1 0;
  max-width: 78px;
  min-width: 0;
  text-align: center;
  overflow: hidden;
}
.rk-b-1 { flex: 1.28 1 0; max-width: 96px; transform: translateY(-8px); }
.rk-b-2, .rk-b-3 { max-width: 80px; }
.rk-b-4, .rk-b-5 { max-width: 70px; }
.rk-float { animation: jornada-float 4.6s ease-in-out infinite; }
.rk-b-1 .rk-float { animation-duration: 4.15s; }
.rk-b-2 .rk-float { animation-duration: 4.8s; animation-delay: .12s; }
.rk-b-3 .rk-float { animation-duration: 5s; animation-delay: .22s; }
.rk-b-4 .rk-float { animation-duration: 4.7s; animation-delay: .08s; }
.rk-b-5 .rk-float { animation-duration: 5.1s; animation-delay: .3s; }
.rk-badge img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: screen;
  filter: drop-shadow(0 6px 12px rgba(124, 58, 237, .35));
}
.rk-cap {
  margin-top: .18rem;
  display: grid;
  gap: .08rem;
  justify-items: center;
}
.rk-cap .rank-who { justify-content: center; font-size: .62rem; }
.rk-cap strong { font-size: .64rem; color: #f5d0fe; line-height: 1.15; }
.rk-badge.is-empty { opacity: .4; }
.rk-badge.is-me { z-index: 2; }
.rk-badge.is-me .rk-float {
  filter: drop-shadow(0 0 16px rgba(250,204,21,.8)) drop-shadow(0 8px 16px rgba(168,85,247,.4));
}
.rk-badge.is-me img {
  filter: drop-shadow(0 0 12px rgba(250,204,21,.55));
}
.rk-badge.is-me .rk-cap {
  width: 100%;
  border-radius: 999px;
  padding: .2rem .28rem .22rem;
  background: linear-gradient(90deg, rgba(250,204,21,.28), rgba(249,115,22,.22) 55%, rgba(168,85,247,.28));
  box-shadow: 0 0 16px rgba(250,204,21,.35);
  animation: me-chip-pulse 1.45s ease-in-out infinite;
}
.rk-badge.is-me .rk-cap strong { color: #fef9c3; font-weight: 800; }
.aff-you-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fde047;
  text-shadow: 0 0 10px rgba(250,204,21,.75);
}
.rk-badge.is-me .aff-you-chip { font-size: .7rem; }
@keyframes me-chip-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(250,204,21,.25); transform: scale(1); }
  50% { box-shadow: 0 0 22px rgba(250,204,21,.55); transform: scale(1.04); }
}
.rank-page .rank-badges { margin-top: .85rem; }
.rank-badges-lg { max-width: 560px; }
.rank-badges-lg .rk-badge { max-width: 96px; }
.rank-badges-lg .rk-b-1 { max-width: 112px; }

.rank-rest {
  list-style: none; margin: .95rem 0 0; padding: 0; display: grid; gap: .4rem;
  width: 100%;
}
.rank-rest li {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  align-items: center;
  gap: .55rem;
  padding: .55rem .75rem;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.rank-rest li.is-me {
  background: linear-gradient(90deg, rgba(250,204,21,.16), rgba(168,85,247,.14));
  box-shadow: inset 0 0 0 1px rgba(250,204,21,.48);
  animation: me-card-pulse 1.7s ease-in-out infinite;
}
.rk {
  display: grid; place-items: center;
  width: 1.45rem; height: 1.45rem;
  border-radius: 99px;
  font-size: .7rem; font-weight: 800;
  background: rgba(168, 85, 247, .22);
  color: #f5d0fe;
}
.rk-art {
  width: 36px; height: 36px;
  display: grid; place-items: center;
}
.rk-art img {
  width: 36px; height: 36px;
  object-fit: contain;
  mix-blend-mode: screen;
}
.rank-who { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .28rem; }
.aff-name { font-weight: 700; color: #f3e8ff; }
.aff-sep { color: var(--text-dim); }
.aff-you { font-weight: 800; color: #fde047; }
.aff-you-chip {
  display: inline-flex;
  align-items: center;
  padding: .12rem .45rem;
  border-radius: 99px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #422006;
  background: linear-gradient(135deg, #fde047, #fbbf24);
}
.aff-temp {
  opacity: .72;
  font-size: .62rem;
  font-weight: 600;
  color: var(--text-dim);
}
.rank-name-box {
  position: relative;
  margin: .85rem 0 0;
  padding: .7rem .85rem;
  border-radius: 12px;
  border: 1px solid rgba(196, 181, 253, .22);
  background: rgba(15, 23, 42, .38);
  box-shadow: none;
  z-index: 1;
}
.rank-name-box.is-callout {
  border-color: rgba(192, 132, 252, .45);
  background: linear-gradient(145deg, rgba(88, 28, 135, .28), rgba(15, 23, 42, .42));
  animation: rankNameSoftGlow 2.8s ease-in-out infinite;
}
.rank-name-box.is-callout::before { display: none; }
.rank-name-box.is-set {
  border-color: rgba(196, 181, 253, .22);
  background: rgba(15, 23, 42, .38);
  animation: none;
}
.rank-name-box-teaser { margin-top: .75rem; }
.rank-name-box-teaser[hidden] { display: none !important; }
.rank-name-current {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: #e9d5ff;
  letter-spacing: .01em;
  text-shadow: none;
}
.rank-name-box.is-callout .rank-name-current { color: #f5d0fe; }
.rank-name-box.is-set .rank-name-current {
  color: #e9d5ff;
  text-shadow: none;
}
@keyframes rankNameSoftGlow {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(168, 85, 247, .14), 0 0 12px rgba(168, 85, 247, .16);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(236, 72, 153, .28), 0 0 18px rgba(168, 85, 247, .32);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rank-name-box.is-callout { animation: none; }
}
.rank-name-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem .75rem;
  margin-bottom: .4rem;
}
.rank-name-head strong { font-size: .82rem; font-weight: 700; color: var(--text-dim); }
.rank-name-box.is-callout .rank-name-head strong {
  font-size: .82rem;
  color: #e9d5ff;
  text-shadow: none;
}
.rank-name-note.is-temp { color: #f5d0fe; }

.rank-name-row {
  display: flex;
  gap: .55rem;
  align-items: stretch;
}
.rank-name-field { flex: 1; margin: 0; }
.rank-name-field input {
  width: 100%;
  margin: 0;
  height: 2.45rem;
  border-radius: 12px;
  border: 1px solid rgba(196, 181, 253, .28);
  background: rgba(15, 23, 42, .55);
  color: #f8fafc;
  padding: 0 .85rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.rank-name-field input:focus {
  outline: none;
  border-color: rgba(192, 132, 252, .65);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .18);
}
.rank-name-field input:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.rank-name-box .btn { flex-shrink: 0; height: 2.45rem; }
.rank-name-note {
  margin: .55rem 0 0;
  font-size: .78rem;
  line-height: 1.35;
  color: #e9d5ff;
}
.rank-name-note.is-ok { color: #86efac; }
.rank-name-note.is-err { color: #fda4af; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.aff-num {
  display: inline-flex;
  align-items: center;
  color: #c084fc;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  user-select: none;
}
.aff-num b { font-weight: 800; color: #d8b4fe; }
.aff-num i {
  font-style: normal;
  filter: blur(3.4px);
  opacity: .62;
  pointer-events: none;
  margin-left: 1px;
}

@media (max-width: 1023px) {
  .rank-board {
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
  }
  .rank-teaser .rank-board,
  .rank-teaser .rank-board-teaser {
    grid-template-columns: 1fr;
  }
  .rank-hero { grid-column: 1 / -1; }
  /* No mobile o stack não tem altura fixa: flex:1 + min-height:0 colapsa os cards */
  .rank-teaser .rank-side-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    align-self: stretch;
  }
  .rank-teaser .rank-side-stack .rank-stat {
    flex: none;
    min-height: auto;
    height: auto;
    padding: .72rem .78rem;
    gap: .2rem;
    overflow: visible;
  }
  .rank-teaser .rank-side-stack .rank-stat.is-you {
    grid-column: 1 / -1;
  }
  .rank-teaser .rank-side-stack .rank-stat .k { font-size: .64rem; }
  .rank-teaser .rank-side-stack .rank-stat .v,
  .rank-teaser .rank-stat .v,
  .rank-teaser.is-named .rank-stat .v {
    font-size: 1.15rem;
    line-height: 1.2;
    word-break: break-word;
  }
  .rank-teaser .rank-side-stack .rank-stat .s { font-size: .7rem; }
  .rank-teaser .rank-trophy-stage,
  .rank-teaser.is-named .rank-trophy-stage {
    width: 148px;
    height: 154px;
  }
  .rank-teaser .rank-trophy,
  .rank-teaser.is-named .rank-trophy { width: 132px; }
  .rank-teaser .rank-badges {
    max-width: 100%;
    gap: .2rem;
    margin-top: .4rem;
  }
  .rank-teaser .rk-badge,
  .rank-teaser .rk-b-1,
  .rank-teaser .rk-b-2,
  .rank-teaser .rk-b-3,
  .rank-teaser .rk-b-4,
  .rank-teaser .rk-b-5 {
    max-width: none;
  }
  .rank-teaser .rk-b-1 { transform: translateY(-8px); }
  .rank-teaser .rk-cap {
    margin-top: .2rem;
    gap: .1rem;
    min-width: 0;
  }
  .rank-teaser .rk-cap .rank-who { font-size: .62rem; }
  .rank-teaser .rk-cap .aff-name {
    font-size: .62rem;
    -webkit-line-clamp: 1;
    line-height: 1.15;
  }
  .rank-teaser .rk-cap strong,
  .rank-teaser .rk-badge.is-me .rk-cap strong {
    font-size: .58rem;
    line-height: 1.15;
    letter-spacing: -.02em;
  }
  .rank-teaser .rk-badge.is-me .rk-cap {
    border-radius: 10px;
    padding: .16rem .12rem .18rem;
  }
}
@media (max-width: 640px) {
  .rank-page .rank-board {
    grid-template-columns: 1fr;
  }
  .rank-page .rank-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
  }
  .rank-page .rank-stat {
    min-height: auto;
    padding: .72rem .78rem;
  }
  .rank-page .rank-stat .v {
    font-size: 1.12rem;
    word-break: break-word;
  }
  .rank-badges,
  .rank-badges-lg {
    max-width: 100%;
    gap: .15rem;
  }
  .rk-badge,
  .rk-b-1, .rk-b-2, .rk-b-3, .rk-b-4, .rk-b-5,
  .rank-badges-lg .rk-badge,
  .rank-badges-lg .rk-b-1 {
    max-width: none;
  }
  .rk-b-1 { transform: translateY(-6px); }
  .rk-cap .rank-who { font-size: .58rem; }
  .rk-cap strong { font-size: .55rem; line-height: 1.15; }
  .rk-badge.is-me .rk-cap {
    border-radius: 10px;
    padding: .14rem .1rem;
  }
  .rk-badge.is-me .aff-you-chip { font-size: .55rem; letter-spacing: .04em; }
}
@media (max-width: 520px) {
  .rank-board { grid-template-columns: 1fr; }
  .rank-stat { min-height: auto; }
  .rank-teaser .rank-side-stack {
    grid-template-columns: 1fr;
    gap: .48rem;
  }
  .rank-teaser .rank-side-stack .rank-stat.is-you {
    grid-column: auto;
  }
  .rank-teaser .rank-side-stack .rank-stat .v,
  .rank-teaser .rank-stat .v,
  .rank-teaser.is-named .rank-stat .v {
    font-size: 1.22rem;
  }
}
@media (max-width: 420px) {
  .rk-cap strong { font-size: .52rem; }
  .rk-cap .aff-num i { display: none; }
  .rank-teaser .rk-cap .aff-name { font-size: .56rem; }
  .rank-teaser .rk-cap strong,
  .rank-teaser .rk-badge.is-me .rk-cap strong { font-size: .52rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rank-trophy, .rank-aura, .rk-float,
  .rank-stat.is-you, .rk-badge.is-me .rk-cap, .rank-rest li.is-me,
  .notify-btn.has-unread svg, .notify-btn.is-ding svg, .notify-btn.has-unread .notify-dot,
  .notify-btn.has-unread .notify-bell-art, .notify-btn.is-ding .notify-bell-art { animation: none; }
}

.live-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.live-list > .muted { padding: .35rem 0; }
.live-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .15rem .65rem;
  padding: .5rem .15rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: .82rem;
}
.live-row .live-id { font-weight: 700; }
.live-row .live-meta { grid-column: 1; font-size: .72rem; color: var(--text-dim); }
.live-row strong { grid-row: 1 / span 2; align-self: center; }
.live-list-wide .live-row {
  grid-template-columns: 1.4rem 1fr auto;
}
.live-list-wide .live-row .rk { grid-row: 1 / span 2; }
.live-list-wide .live-row .live-meta { grid-column: 2; }
.live-list-wide .live-row strong { grid-column: 3; }

@media (max-width: 768px) {
  .header-profile { display: flex; }
  .header-profile .profile-chip { display: none; }
  .header-actions {
    width: auto;
    margin-top: 0;
    margin-left: auto;
  }
  .notify-panel { right: -8px; }
}