:root {
  --bg: #070012;
  --bg-2: #100020;
  --surface: rgba(18, 8, 35, .76);
  --surface-strong: #150927;
  --surface-soft: rgba(255, 255, 255, .035);
  --line: rgba(192, 132, 252, .14);
  --line-bright: rgba(168, 85, 247, .34);
  --text: #fff;
  --muted: #b9a7d9;
  --muted-2: #796b91;
  --primary: #7c3aed;
  --primary-2: #a855f7;
  --lilac: #c084fc;
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #facc15;
  --blue: #38bdf8;
  --shadow: 0 24px 80px rgba(0, 0, 0, .38);
  --glow: 0 0 40px rgba(124, 58, 237, .2);
  --sidebar: 272px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 Inter, system-ui, sans-serif;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Sora, Inter, sans-serif; }
h1 { margin-bottom: 0; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.045em; }
h2 { margin-bottom: 0; font-size: 19px; letter-spacing: -.025em; }
h3 { margin-bottom: 12px; font-size: 12px; color: #d9cbea; }
p { color: var(--muted); }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
code { color: #d8b4fe; font-size: 12px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ambient { position: fixed; z-index: -3; border-radius: 50%; filter: blur(100px); pointer-events: none; }
.ambient-one { width: 600px; height: 600px; top: -330px; left: 28%; background: rgba(124, 58, 237, .18); animation: drift 14s ease-in-out infinite alternate; }
.ambient-two { width: 520px; height: 520px; right: -320px; top: 36%; background: rgba(168, 85, 247, .12); animation: drift 18s ease-in-out infinite alternate-reverse; }
.noise { position: fixed; inset: 0; z-index: -2; opacity: .025; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
@keyframes drift { to { transform: translate3d(80px, 50px, 0) scale(1.1); } }

.dashboard-page::before,
.login-page::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(124, 58, 237, .16), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(192, 132, 252, .1), transparent 26%),
    linear-gradient(115deg, rgba(7, 0, 18, .88), rgba(32, 0, 64, .24), rgba(7, 0, 18, .9));
  background-size: 120% 120%;
  animation: aurora-flow 16s ease-in-out infinite alternate;
}
@keyframes aurora-flow {
  from { transform: translate3d(-2%, -1%, 0) scale(1); background-position: 0 50%; }
  to { transform: translate3d(2%, 1%, 0) scale(1.04); background-position: 100% 50%; }
}

.panel,
.stat-card,
.hero-card,
.product-banner,
.integration-card,
.login-shell,
.login-card,
.setting-card {
  --spotlight-x: 50%;
  --spotlight-y: 0%;
  --spotlight-alpha: 0;
  --spotlight-strength: .045;
  position: relative;
}

.panel,
.stat-card,
.product-banner,
.integration-card,
.login-shell,
.login-card,
.setting-card {
  overflow: hidden;
}

.panel.is-spotlight,
.stat-card.is-spotlight,
.hero-card.is-spotlight,
.product-banner.is-spotlight,
.integration-card.is-spotlight,
.login-shell.is-spotlight,
.login-card.is-spotlight,
.setting-card.is-spotlight {
  --spotlight-alpha: 1;
}

.panel,
.stat-card,
.integration-card,
.login-card,
.setting-card {
  background-image:
    radial-gradient(420px circle at var(--spotlight-x) var(--spotlight-y), rgba(168, 85, 247, calc(.16 * var(--spotlight-alpha))), transparent 44%),
    linear-gradient(145deg, rgba(20, 8, 38, .82), rgba(11, 3, 23, .82));
}

.hero-card,
.product-banner,
.login-shell {
  background-blend-mode: screen, normal, normal;
}

.panel:hover,
.integration-card:hover,
.product-banner:hover,
.login-card:hover,
.login-shell:hover {
  border-color: rgba(192, 132, 252, .32);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34), 0 0 44px rgba(124, 58, 237, .11);
}

.panel::after,
.integration-card::after,
.product-banner::after,
.login-shell::after,
.login-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(320px circle at var(--spotlight-x) var(--spotlight-y), rgba(216, 180, 254, .045), transparent 48%);
  transition: opacity .25s ease;
}

.panel:hover::after,
.integration-card:hover::after,
.product-banner:hover::after,
.login-shell:hover::after,
.login-card:hover::after {
  opacity: .65;
}

.panel::before,
.integration-card::before,
.product-banner::before,
.login-card::before {
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(192, 132, 252, .04);
}

.glass { background: rgba(15, 5, 30, .7); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  padding: 25px 17px 20px;
  background: linear-gradient(180deg, rgba(13, 3, 28, .96), rgba(7, 0, 18, .96));
  border-right: 1px solid var(--line);
  box-shadow: 30px 0 80px rgba(0, 0, 0, .18);
  animation: sidebar-in .45s cubic-bezier(.22, 1, .36, 1);
}
@keyframes sidebar-in { from { transform: translateX(-30px); opacity: 0; } }
.brand { display: flex; align-items: center; gap: 13px; padding: 0 9px 29px; }
.logo-mark {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 180, 254, .32);
  border-radius: 14px;
  background: linear-gradient(145deg, #9d55ff, #5b21b6);
  box-shadow: 0 12px 30px rgba(124, 58, 237, .4), inset 0 1px 1px rgba(255, 255, 255, .35);
  font: 700 12px Sora;
}
.logo-mark::after { content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: 17px; background: rgba(124, 58, 237, .14); filter: blur(6px); }
.brand strong, .brand small { display: block; }
.brand strong { font: 700 13px Sora; letter-spacing: .04em; }
.brand small { margin-top: 3px; color: var(--lilac); font-size: 8px; font-weight: 700; letter-spacing: .19em; }
.nav-label { margin: 12px 13px 7px; color: #625374; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
nav { display: grid; gap: 5px; }
.nav-item {
  position: relative;
  width: 100%;
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #9382ad;
  text-align: left;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: .22s ease;
}
.nav-item svg { width: 18px; height: 18px; transition: .22s ease; }
.nav-item span { flex: 1; }
.nav-item b { min-width: 22px; padding: 2px 6px; border-radius: 7px; background: rgba(255, 255, 255, .05); color: #8e7ca8; font-size: 9px; text-align: center; }
.nav-item .nav-external { width: 13px; height: 13px; opacity: .45; }
.nav-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(124, 58, 237, .2), transparent); opacity: 0; transition: .22s ease; }
.nav-item:hover { color: #e8ddf5; border-color: rgba(192, 132, 252, .08); background: rgba(255, 255, 255, .025); transform: translateX(2px); }
.nav-item.active { color: white; border-color: rgba(168, 85, 247, .25); background: rgba(124, 58, 237, .12); box-shadow: inset 0 0 20px rgba(124, 58, 237, .05), 0 8px 26px rgba(0, 0, 0, .14); }
.nav-item.active::before { opacity: 1; }
.nav-item.active::after { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px; border-radius: 2px; background: var(--lilac); box-shadow: 0 0 14px var(--primary-2); }
.nav-item.active svg { color: var(--lilac); filter: drop-shadow(0 0 7px rgba(192, 132, 252, .45)); }
.nav-item > * { position: relative; z-index: 1; }

.sidebar-health { margin-top: auto; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .025); }
.health-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; color: #786988; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, .08); } }
.sidebar-health > div:not(.health-head) { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.sidebar-health svg { width: 14px; height: 14px; color: #9477ba; }
.sidebar-health b { color: var(--green); font-size: 9px; font-weight: 600; }
.sidebar-footer { display: grid; grid-template-columns: 36px 1fr 32px; align-items: center; gap: 10px; margin-top: 14px; padding: 15px 7px 0; border-top: 1px solid rgba(255, 255, 255, .055); }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(192, 132, 252, .25); border-radius: 11px; background: linear-gradient(145deg, rgba(124, 58, 237, .3), rgba(168, 85, 247, .1)); color: #ead7ff; font: 700 10px Sora; }
.avatar.small { width: 32px; height: 32px; border-radius: 10px; }
.sidebar-footer strong, .sidebar-footer span { display: block; }
.sidebar-footer strong { font-size: 11px; }
.sidebar-footer span { color: #786989; font-size: 9px; }

.content { min-height: 100vh; margin-left: var(--sidebar); padding: 23px clamp(22px, 3.6vw, 55px) 70px; }
.topbar {
  position: relative;
  z-index: 10;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
  padding: 11px 16px 11px 20px;
  border: 1px solid rgba(192, 132, 252, .1);
  border-radius: 18px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, .18);
  animation: fade-down .45s ease both;
}
@keyframes fade-down { from { opacity: 0; transform: translateY(-12px); } }
.title-block h1 { font-size: 21px; }
.breadcrumb { display: block; margin-bottom: 2px; color: #756488; font-size: 9px; }
.breadcrumb i { margin: 0 5px; color: #493757; }
.breadcrumb b { color: #a792bd; font-weight: 500; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.top-status, .admin-chip { display: flex; align-items: center; gap: 10px; }
.top-status { padding: 8px 13px; border: 1px solid rgba(34, 197, 94, .12); border-radius: 12px; background: rgba(34, 197, 94, .035); }
.top-status small, .top-status strong, .admin-chip small, .admin-chip strong { display: block; }
.top-status small, .admin-chip small { color: #786c88; font-size: 8px; }
.top-status strong { color: #78e59d; font-size: 9px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 13px rgba(34, 197, 94, .8); }
.admin-chip { padding-left: 12px; border-left: 1px solid var(--line); }
.admin-chip strong { font-size: 10px; }
.menu-button { display: none !important; }

.view { display: none; }
.view.active { display: block; animation: view-in .35s ease; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
.reveal { opacity: 0; transform: translateY(16px); animation: reveal .55s cubic-bezier(.22, 1, .36, 1) forwards; }
.reveal:nth-child(2) { animation-delay: .06s; }
.reveal:nth-child(3) { animation-delay: .12s; }
@keyframes reveal { to { opacity: 1; transform: none; } }
.eyebrow { display: block; margin-bottom: 6px; color: var(--lilac); font-size: 8px; font-weight: 700; letter-spacing: .2em; }

.hero-card {
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  margin-bottom: 18px;
  padding: 31px 34px;
  overflow: hidden;
  border: 1px solid rgba(192, 132, 252, .18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 20%, rgba(168, 85, 247, .18), transparent 30%),
    linear-gradient(120deg, rgba(32, 11, 58, .92), rgba(13, 4, 27, .88));
  box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, .04);
}
.hero-card::before { content: ""; position: absolute; width: 330px; height: 330px; right: -120px; top: -220px; border: 1px solid rgba(192, 132, 252, .12); border-radius: 50%; box-shadow: 0 0 0 38px rgba(192, 132, 252, .025), 0 0 0 75px rgba(192, 132, 252, .018); }
.hero-card h2 { font-size: clamp(25px, 3vw, 36px); line-height: 1.16; }
.hero-card h2 span { background: linear-gradient(90deg, #c084fc, #8b5cf6); -webkit-background-clip: text; color: transparent; }
.hero-card p { margin: 12px 0 0; font-size: 12px; }
.hero-health { position: relative; z-index: 1; width: min(400px, 42%); display: grid; gap: 9px; }
.hero-health > div { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .055); border-radius: 13px; background: rgba(7, 0, 18, .36); backdrop-filter: blur(10px); }
.hero-health small, .hero-health strong { display: block; }
.hero-health small { color: #7e6d91; font-size: 8px; }
.hero-health strong { font-size: 10px; }
.health-icon, .setting-icon { display: grid; place-items: center; border-radius: 11px; }
.health-icon { width: 34px; height: 34px; }
.health-icon svg { width: 16px; height: 16px; }
.violet { color: #cfabff; background: rgba(124, 58, 237, .14); border: 1px solid rgba(168, 85, 247, .18); }
.green { color: #63dc8b; background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .15); }
.blue { color: #73d5ff; background: rgba(56, 189, 248, .09); border: 1px solid rgba(56, 189, 248, .15); }
.amber { color: #fde36f; background: rgba(250, 204, 21, .08); border: 1px solid rgba(250, 204, 21, .13); }

.stats-grid { display: grid; grid-template-columns: repeat(6, minmax(135px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-card, .panel {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(20, 8, 38, .82), rgba(11, 3, 23, .82));
  box-shadow: 0 18px 55px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .025);
}
.stat-card {
  position: relative;
  min-height: 145px;
  display: flex;
  flex-direction: column;
  padding: 17px;
  overflow: hidden;
  border-radius: 17px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  animation: card-in .5s cubic-bezier(.22, 1, .36, 1) both;
}
.stat-card:nth-child(2) { animation-delay: .05s; }.stat-card:nth-child(3) { animation-delay: .1s; }.stat-card:nth-child(4) { animation-delay: .15s; }.stat-card:nth-child(5) { animation-delay: .2s; }.stat-card:nth-child(6) { animation-delay: .25s; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.stat-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -55px; top: -55px; border-radius: 50%; background: var(--card-glow, rgba(124, 58, 237, .12)); filter: blur(22px); transition: .3s ease; }
.stat-card:hover { transform: translateY(-4px) scale(1.01); border-color: var(--line-bright); box-shadow: 0 22px 60px rgba(0, 0, 0, .3), 0 0 30px rgba(124, 58, 237, .08); }
.stat-card:hover::after { transform: scale(1.35); }
.stat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(192, 132, 252, .15); border-radius: 10px; background: rgba(124, 58, 237, .09); color: #c99dfb; }
.stat-icon svg { width: 15px; height: 15px; }
.stat-trend { color: var(--green); font-size: 8px; font-weight: 700; }
.stat-card > strong { margin: auto 0 1px; font: 600 clamp(20px, 2vw, 25px) Sora; letter-spacing: -.045em; }
.stat-card > span { color: var(--muted); font-size: 10px; }
.stat-card > small { color: #6f627e; font-size: 8px; }
.stat-card.featured { border-color: rgba(168, 85, 247, .3); background: linear-gradient(145deg, rgba(80, 33, 142, .38), rgba(22, 7, 43, .88)); }

.panel { padding: 21px; border-radius: 19px; transition: border-color .25s ease, box-shadow .25s ease; }
.panel:hover { border-color: rgba(192, 132, 252, .21); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.panel-head h2 { font-size: 15px; }
.panel-head p { margin: 3px 0 0; font-size: 9px; }
.chart-grid { display: grid; grid-template-columns: 1.45fr .8fr; gap: 17px; margin-bottom: 17px; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.chart-card { min-height: 350px; }
.chart-legend { color: #847591; font-size: 9px; }
.chart-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--primary-2); box-shadow: 0 0 10px var(--primary-2); }
.line-chart { min-height: 235px; }
.line-chart svg { width: 100%; height: 235px; overflow: visible; }
.line-chart .grid-line { stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.line-chart .area { fill: url(#areaGradient); stroke: none; }
.line-chart .line { fill: none; stroke: url(#lineGradient); stroke-width: 3; filter: drop-shadow(0 0 7px rgba(168, 85, 247, .4)); stroke-dasharray: 1000; animation: draw-line 1.2s ease forwards; }
@keyframes draw-line { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.line-chart .point { fill: #d8b4fe; stroke: #4c1d95; stroke-width: 3; opacity: 0; animation: points-in .3s ease forwards .8s; }
@keyframes points-in { to { opacity: 1; } }
.line-chart text { fill: #6f617f; font: 8px Inter; stroke: none; }
.chart-tooltip { position: absolute; display: none; padding: 8px 10px; border: 1px solid var(--line-bright); border-radius: 9px; background: rgba(12, 3, 24, .95); box-shadow: var(--shadow); color: white; font-size: 9px; pointer-events: none; }
.usage-chart { display: grid; gap: 17px; }
.chart-row > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.chart-row strong { font-size: 10px; }
.chart-row span { color: #7e708d; font-size: 8px; }
.bar, .mini-progress { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .055); }
.bar i, .mini-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6d28d9, #c084fc); box-shadow: 0 0 12px rgba(168, 85, 247, .35); transform-origin: left; animation: grow-bar .8s ease both; }
@keyframes grow-bar { from { transform: scaleX(0); } }

.activity-list, .event-list { display: grid; }
.activity-item, .event-item { display: grid; align-items: center; gap: 11px; padding: 11px 3px; border-bottom: 1px solid rgba(255, 255, 255, .045); transition: .2s ease; }
.activity-item { grid-template-columns: 33px 1fr auto; }
.event-item { grid-template-columns: 31px 1fr auto; }
.activity-item:hover, .event-item:hover { padding-left: 8px; border-radius: 10px; background: rgba(124, 58, 237, .04); }
.activity-item:last-child, .event-item:last-child { border-bottom: 0; }
.activity-icon, .event-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(124, 58, 237, .06); color: #b785f2; }
.event-icon.error { color: #f87171; background: rgba(239, 68, 68, .06); border-color: rgba(239, 68, 68, .12); }
.activity-icon svg, .event-icon svg { width: 14px; height: 14px; }
.activity-item strong, .activity-item small, .event-item strong, .event-item small { display: block; }
.activity-item strong, .event-item strong { font-size: 10px; }
.activity-item small, .event-item small, .activity-item time, .event-item time { color: #746681; font-size: 8px; }
.text-button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: #9c82bd; font-size: 9px; cursor: pointer; }
.text-button svg { width: 12px; height: 12px; transition: transform .2s ease; }
.text-button:hover { color: #d4b5fb; }.text-button:hover svg { transform: translateX(3px); }

.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 8px 0 24px; }
.page-intro h2 { font-size: 26px; }
.page-intro p { margin: 5px 0 0; font-size: 11px; }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.search-box { width: min(360px, 100%); display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, .025); }
.search-box svg { width: 15px; height: 15px; color: #756486; }
.search-box input { border: 0; padding-left: 0; background: transparent; box-shadow: none !important; }
.toolbar-meta { color: #756786; font-size: 9px; }

.table-wrap { overflow-x: auto; border-radius: 12px; }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th { padding: 11px 13px; border-bottom: 1px solid var(--line); color: #776786; text-align: left; font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
td { padding: 13px; border-bottom: 1px solid rgba(255, 255, 255, .04); color: #c8bbd7; font-size: 10px; transition: .18s ease; }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, .009); }
tbody tr:hover td { background: rgba(124, 58, 237, .045); color: #f0e9f8; }
td strong, td small { display: block; }
td strong { color: #f1ebf7; font-size: 10px; }
td small { margin-top: 2px; color: #776a84; font-size: 8px; }
.mini-progress { width: 78px; display: inline-block; margin-right: 7px; }
.empty-cell { padding: 50px 20px; text-align: center; }
.empty-state { display: grid; justify-items: center; gap: 7px; color: #746584; }
.empty-illustration { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle, rgba(124, 58, 237, .14), transparent 70%); color: #946fc1; }
.empty-illustration svg { width: 25px; height: 25px; }
.empty-state strong { color: #a999ba; }.empty-state span { font-size: 9px; }

.badge, .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.badge.success { color: #5ee58c; border-color: rgba(34, 197, 94, .17); background: rgba(34, 197, 94, .06); }
.badge.danger { color: #fb7185; border-color: rgba(239, 68, 68, .17); background: rgba(239, 68, 68, .06); }
.badge.warning { color: #fde047; border-color: rgba(250, 204, 21, .17); background: rgba(250, 204, 21, .05); }

.button {
  position: relative;
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 11px;
  color: white;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}
.button svg { width: 15px; height: 15px; }
.button:hover { transform: translateY(-2px) scale(1.015); }
.button:active { transform: translateY(0) scale(.99); }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.button.primary { border-color: rgba(216, 180, 254, .2); background: linear-gradient(110deg, #6d28d9, #9333ea, #7c3aed); background-size: 200% 100%; box-shadow: 0 10px 28px rgba(124, 58, 237, .28), inset 0 1px rgba(255, 255, 255, .18); animation: gradient-shift 5s ease infinite; }
.button.primary:hover { box-shadow: 0 13px 34px rgba(124, 58, 237, .4), 0 0 22px rgba(168, 85, 247, .18); }
@keyframes gradient-shift { 50% { background-position: 100% 0; } }
.button.secondary { border-color: var(--line); background: rgba(255, 255, 255, .035); color: #c8bad6; }
.button.secondary:hover { border-color: var(--line-bright); background: rgba(124, 58, 237, .07); }
.button.danger { border-color: rgba(239, 68, 68, .18); background: rgba(239, 68, 68, .08); color: #fb7185; }
.button.success { border-color: rgba(34, 197, 94, .18); background: rgba(34, 197, 94, .07); color: #5ee58c; }
.button.danger-outline { border-color: rgba(239, 68, 68, .15); background: transparent; color: #f87171; }
.button.small { min-height: 31px; padding: 0 10px; font-size: 8px; }
.button.full { width: 100%; }
.button-row, .modal-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.ripple { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); transform: translate(-50%, -50%) scale(0); animation: ripple .55s ease-out; pointer-events: none; }
@keyframes ripple { to { transform: translate(-50%, -50%) scale(24); opacity: 0; } }
.icon-button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #8d7d9d; cursor: pointer; transition: .2s ease; }
.icon-button svg { width: 16px; height: 16px; }
.icon-button:hover { border-color: var(--line); background: rgba(255, 255, 255, .04); color: white; transform: rotate(2deg); }

input, textarea, select {
  width: 100%;
  border: 1px solid rgba(192, 132, 252, .12);
  border-radius: 10px;
  outline: 0;
  padding: 11px 12px;
  background: rgba(255, 255, 255, .028);
  color: var(--text);
  font-size: 10px;
  transition: .2s ease;
}
input::placeholder, textarea::placeholder { color: #564761; }
input:focus, textarea:focus, select:focus { border-color: rgba(168, 85, 247, .65); background: rgba(124, 58, 237, .045); box-shadow: 0 0 0 3px rgba(124, 58, 237, .1), 0 0 20px rgba(124, 58, 237, .05); }
select { cursor: pointer; }
label { display: grid; gap: 7px; color: #aa9bb9; font-size: 9px; font-weight: 600; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.span-2 { grid-column: span 2; }
.form-section { margin-top: 19px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .05); }
.permission-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.permission-grid label { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .02); cursor: pointer; }
.permission-grid input { width: auto; accent-color: var(--primary-2); }
.form-error { min-height: 17px; margin-top: 10px; color: #fb7185; font-size: 9px; }
.input-affix { position: relative; }
.input-affix input { padding-right: 42px; font-size: 20px; font-weight: 600; }
.input-affix span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #7d6a91; font-size: 9px; }

.modal {
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 35px);
  padding: 24px;
  overflow-y: auto;
  border: 1px solid rgba(192, 132, 252, .24);
  border-radius: 21px;
  background: rgba(16, 4, 31, .94);
  color: var(--text);
  box-shadow: 0 35px 120px rgba(0, 0, 0, .72), 0 0 50px rgba(124, 58, 237, .12);
  backdrop-filter: blur(30px);
}
.modal[open] { animation: modal-in .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.modal::backdrop { background: rgba(4, 0, 10, .78); backdrop-filter: blur(8px); animation: backdrop-in .25s ease; }
@keyframes backdrop-in { from { opacity: 0; } }
.modal.wide { width: min(1160px, calc(100vw - 28px)); }
.modal.small-modal { width: min(560px, calc(100vw - 28px)); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.modal-title { display: flex; align-items: center; gap: 13px; }
.modal-title p { margin: 3px 0 0; font-size: 9px; }
.modal-icon { width: 41px; height: 41px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(168, 85, 247, .2); border-radius: 12px; background: rgba(124, 58, 237, .1); color: #c99aff; box-shadow: inset 0 1px rgba(255, 255, 255, .04); }
.modal-icon.success { color: #6ee795; background: rgba(34, 197, 94, .08); border-color: rgba(34, 197, 94, .17); }
.modal-icon svg { width: 18px; height: 18px; }
.modal-actions { justify-content: flex-end; margin-top: 21px; padding-top: 17px; border-top: 1px solid rgba(255, 255, 255, .05); }
.secret-warning { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 11px; border: 1px solid rgba(250, 204, 21, .13); border-radius: 10px; background: rgba(250, 204, 21, .035); }
.secret-warning svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--yellow); }
.secret-warning p { margin: 0; color: #c9b978; font-size: 9px; }
.secret-box { max-height: 360px; padding: 15px; overflow: auto; border: 1px solid var(--line); border-radius: 11px; background: rgba(3, 0, 8, .65); color: #d8b4fe; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 10px; }
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.profile-card { padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .022); }
.profile-card span, .profile-card strong, .profile-card small { display: block; }
.profile-card span, .profile-card small { color: #756785; font-size: 8px; }
.profile-card strong { margin: 7px 0 2px; font: 600 17px Sora; }
.text-success { color: #5ee58c; }.text-danger { color: #fb7185; }
.action-grid { display: flex; flex-wrap: wrap; gap: 7px; margin: 17px 0 24px; }
.details-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compact table { min-width: 520px; }
.log-detail { display: grid; gap: 9px; }
.log-detail > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .045); font-size: 9px; }
.log-detail span { color: #756785; }.log-detail strong, .log-detail code { overflow-wrap: anywhere; }

.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.product-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding: 27px 30px; border: 1px solid rgba(56, 189, 248, .18); border-radius: 20px; background: radial-gradient(circle at 80% 20%, rgba(56, 189, 248, .12), transparent 30%), linear-gradient(125deg, rgba(14, 25, 48, .92), rgba(13, 4, 27, .9)); box-shadow: var(--shadow); }
.product-banner h2 { font-size: 27px; }.product-banner h2 span { color: #73d5ff; }.product-banner p { margin: 7px 0 0; font-size: 10px; }
.product-mode { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid rgba(250, 204, 21, .15); border-radius: 12px; background: rgba(250, 204, 21, .04); }
.product-mode small, .product-mode strong { display: block; }.product-mode small { color: #827646; font-size: 7px; }.product-mode strong { color: #f4dd72; font-size: 10px; }
.amber-pulse { background: var(--yellow); box-shadow: 0 0 13px rgba(250, 204, 21, .7); }
.checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.checklist-grid label { display: flex; align-items: center; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .02); cursor: pointer; }
.checklist-grid input { width: auto; accent-color: var(--primary-2); }
.textarea-large { min-height: 190px; font-family: ui-monospace, Consolas, monospace; line-height: 1.7; }
.setting-card { display: flex; flex-direction: column; min-height: 275px; }
.setting-icon { width: 43px; height: 43px; margin-bottom: 18px; }
.setting-icon svg { width: 19px; height: 19px; }
.setting-card > div:nth-child(2) p { margin: 5px 0 0; font-size: 9px; }
.setting-card .button, .setting-card .button-row { margin-top: auto; align-self: flex-start; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 23px 0; cursor: pointer; }
.switch-row strong, .switch-row span { display: block; }
.switch-row strong { font-size: 10px; }.switch-row span { color: #776887; font-size: 8px; font-weight: 400; }
.switch-row input { display: none; }
.switch-row i { position: relative; width: 42px; height: 23px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .05); transition: .25s ease; }
.switch-row i::after { content: ""; position: absolute; width: 17px; height: 17px; left: 2px; top: 2px; border-radius: 50%; background: #766987; transition: .25s ease; }
.switch-row input:checked + i { border-color: rgba(168, 85, 247, .4); background: rgba(124, 58, 237, .35); box-shadow: 0 0 16px rgba(124, 58, 237, .2); }
.switch-row input:checked + i::after { transform: translateX(19px); background: white; }
.details-list { display: grid; gap: 10px; margin-top: 20px; }
.details-list div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .045); font-size: 9px; }
.details-list span { color: #786989; }
.security-list { display: grid; gap: 9px; margin-top: 21px; }
.security-list span { display: flex; align-items: center; gap: 8px; color: #a99ab8; font-size: 9px; }
.security-list svg { width: 14px; height: 14px; color: var(--green); }
.price-tier-settings-card { grid-column: span 2; }
.price-tiers-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.price-tier-row { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 10px; padding: 11px; border: 1px solid rgba(192,132,252,.12); border-radius: 13px; background: rgba(255,255,255,.025); }
.price-tier-row strong, .price-tier-row small { display: block; }
.price-tier-row strong { color: #f1e7ff; font-size: 11px; }
.price-tier-row small { color: #8f7fa5; font-size: 8px; }
.price-tier-row input { height: 38px; padding: 0 10px; border: 1px solid rgba(192,132,252,.15); border-radius: 10px; background: rgba(5,0,12,.55); color: #fff; font-weight: 800; }

.alert { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; font-size: 9px; animation: alert-in .35s ease; }
@keyframes alert-in { from { opacity: 0; transform: translateY(-5px); } }
.alert.warning { color: #e9d265; border-color: rgba(250, 204, 21, .14); background: rgba(250, 204, 21, .04); }
.alert.danger { color: #fb7185; border-color: rgba(239, 68, 68, .15); background: rgba(239, 68, 68, .045); }
.alert svg { width: 14px; height: 14px; }

.toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 100; display: grid; gap: 9px; pointer-events: none; }
.toast { width: min(360px, calc(100vw - 24px)); display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid rgba(34, 197, 94, .2); border-radius: 14px; background: rgba(10, 28, 18, .96); color: #d9ffe5; box-shadow: var(--shadow); backdrop-filter: blur(18px); animation: toast-in .35s cubic-bezier(.22, 1, .36, 1); pointer-events: auto; }
.toast.error { border-color: rgba(239, 68, 68, .22); background: rgba(38, 9, 18, .96); animation: toast-in .35s cubic-bezier(.22, 1, .36, 1), shake .25s ease .2s; }
.toast.warning { border-color: rgba(250, 204, 21, .2); background: rgba(34, 28, 8, .96); }
@keyframes toast-in { from { opacity: 0; transform: translateX(25px) scale(.96); } }
@keyframes shake { 33% { transform: translateX(-3px); } 66% { transform: translateX(3px); } }
.toast.out { animation: toast-out .25s ease forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }
.toast-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: rgba(34, 197, 94, .12); color: #5ee58c; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .28); }
.toast.error .toast-icon { background: rgba(239, 68, 68, .12); color: #fb7185; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .3); }
.toast.warning .toast-icon { background: rgba(250, 204, 21, .1); color: #fde047; box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .3); }
.toast-icon svg { width: 18px; height: 18px; display: block; stroke-width: 2.4; }
.toast > div strong, .toast > div span { display: block; }
.toast > div strong { font-size: 11px; }
.toast > div span { margin-top: 2px; color: #8eab96; font-size: 10px; line-height: 1.4; }
.toast.error > div span { color: #c79aa3; }
.toast.warning > div span { color: #c4b387; }
.toast-close { align-self: center; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #8a9b90; cursor: pointer; font-size: 17px; line-height: 1; transition: .18s ease; }
.toast-close:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.loading-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 15px; background: rgba(5, 0, 12, .72); backdrop-filter: blur(7px); opacity: 0; visibility: hidden; transition: .25s ease; }
.loading-overlay.show { opacity: 1; visibility: visible; }
.loading-overlay strong { font-size: 10px; color: #c9b5dd; letter-spacing: .05em; }
.premium-loader { position: relative; width: 58px; height: 58px; }
.premium-loader span { position: absolute; inset: 0; border: 2px solid transparent; border-top-color: var(--lilac); border-radius: 50%; animation: spin 1s linear infinite; }
.premium-loader span:nth-child(2) { inset: 8px; border-top-color: var(--primary); animation-direction: reverse; animation-duration: .75s; }
.premium-loader span:nth-child(3) { inset: 19px; border: 0; background: var(--primary-2); box-shadow: 0 0 20px var(--primary-2); animation: core-pulse 1.2s ease infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes core-pulse { 50% { transform: scale(.7); opacity: .55; } }

.skeleton { position: relative; overflow: hidden; border-radius: 13px; background: rgba(255, 255, 255, .035); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(192, 132, 252, .08), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.stat-skeleton { height: 145px; }.list-skeleton { height: 210px; }

.mobile-backdrop { display: none; }

.integration-kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.integration-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-height: 230px; padding: 18px; border: 1px solid rgba(192, 132, 252, .14); border-radius: 18px; background: linear-gradient(145deg, rgba(22, 6, 41, .86), rgba(9, 1, 20, .74)); box-shadow: 0 20px 50px rgba(0, 0, 0, .18); }
.integration-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 90% 0, rgba(168, 85, 247, .15), transparent 38%); opacity: .8; }
.integration-card > * { position: relative; z-index: 1; }
.integration-card h3 { margin: 5px 0 7px; font-size: 15px; }
.integration-card p { margin: 0; font-size: 11px; line-height: 1.6; }
.integration-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: #86efac; background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .14); }
.integration-icon.violet { color: #d8b4fe; background: rgba(124, 58, 237, .11); border-color: rgba(192, 132, 252, .16); }
.integration-icon.amber { color: #fde68a; background: rgba(250, 204, 21, .08); border-color: rgba(250, 204, 21, .13); }
.integration-icon svg { width: 18px; height: 18px; }
.integration-card .button-row { margin-top: auto; }
.portal-guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.portal-guide-card { display: grid; grid-template-columns: 34px 1fr; gap: 11px; padding: 13px; border: 1px solid rgba(192, 132, 252, .12); border-radius: 15px; background: rgba(255, 255, 255, .025); }
.portal-guide-card strong { display: block; margin-bottom: 4px; font-size: 10px; }
.portal-guide-card p { margin: 0; color: #9586a8; font-size: 9px; line-height: 1.55; }
.portal-guide-card code { font-size: 9px; }
.step-badge { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(192, 132, 252, .22); border-radius: 10px; background: rgba(124, 58, 237, .12); color: #d8b4fe; font: 700 10px Sora; box-shadow: 0 0 18px rgba(124, 58, 237, .1); }
.api-capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.capability-card { display: grid; grid-template-columns: 42px 1fr; gap: 13px; padding: 16px; border: 1px solid rgba(192, 132, 252, .12); border-radius: 17px; background: linear-gradient(145deg, rgba(22, 6, 41, .68), rgba(9, 1, 20, .58)); transition: .22s ease; }
.capability-card:hover { transform: translateY(-3px); border-color: rgba(192, 132, 252, .24); box-shadow: 0 18px 48px rgba(0, 0, 0, .22), 0 0 18px rgba(124, 58, 237, .055); }
.capability-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; }
.capability-icon svg { width: 18px; height: 18px; }
.capability-card h3 { margin: 1px 0 9px; color: #f2e9ff; font-size: 13px; }
.capability-card ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.capability-card li { position: relative; padding-left: 14px; color: #a99ab8; font-size: 10px; line-height: 1.55; }
.capability-card li::before { content: ""; position: absolute; left: 0; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 10px rgba(192, 132, 252, .45); }
.api-permission-strip { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: 10px; margin-top: 12px; }
.api-permission-strip > div { padding: 13px; border: 1px solid rgba(192, 132, 252, .11); border-radius: 15px; background: rgba(255, 255, 255, .025); }
.api-permission-strip strong, .api-permission-strip span { display: block; }
.api-permission-strip strong { margin-bottom: 5px; color: #e9d5ff; font-size: 10px; }
.api-permission-strip span { color: #9485a8; font-size: 9px; line-height: 1.6; }

/* Reseller portal */
.reseller-portal-page { background: radial-gradient(circle at 50% -10%, rgba(124, 58, 237, .18), transparent 32%), var(--bg); }
.reseller-portal-shell { width: min(1440px, calc(100% - 36px)); margin: 0 auto; padding: 24px 0 70px; }
.reseller-portal-topbar { position: sticky; top: 14px; }
.reseller-brand { padding: 0; min-width: 220px; }
.reseller-hero { margin-top: 8px; }
.reseller-stats { grid-template-columns: repeat(6, minmax(135px, 1fr)); }
.reseller-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; align-items: start; }
.reseller-wide { grid-column: 1 / -1; }
.portal-code { min-height: 175px; margin: 0 0 12px; }
.copy-inline { margin-left: 8px; padding: 5px 8px !important; min-height: 28px !important; vertical-align: middle; }
.copy-inline svg { width: 14px; height: 14px; }
.reseller-login-shell .login-copy h1 { max-width: 620px; }
.purchase-plan-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 12px; }
.purchase-plan-card { min-height: 190px; display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid rgba(192, 132, 252, .13); border-radius: 17px; background: linear-gradient(145deg, rgba(22, 6, 41, .76), rgba(9, 1, 20, .7)); transition: .24s ease; }
.purchase-plan-card:hover { transform: translateY(-3px); border-color: rgba(192, 132, 252, .28); box-shadow: 0 18px 45px rgba(0, 0, 0, .22), 0 0 20px rgba(124, 58, 237, .06); }
.purchase-plan-card.popular { border-color: rgba(34, 197, 94, .22); background: linear-gradient(145deg, rgba(34, 197, 94, .07), rgba(22, 6, 41, .76)); }
.purchase-plan-card strong { margin-top: auto; font: 700 24px Sora; letter-spacing: -.04em; }
.purchase-plan-card p { margin: 0; font-size: 10px; }
.purchase-plan-card .plan-unit-price { color: #efe6ff; font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.purchase-plan-card h3 { margin: 0 0 8px; color: #e9d5ff; font-size: 13px; }
.portal-form { display: grid; gap: 13px; }
.portal-form label { display: grid; gap: 7px; color: #a997bd; font-size: 10px; font-weight: 700; }
.portal-form input, .portal-form textarea { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid rgba(192, 132, 252, .12); border-radius: 12px; outline: 0; background: rgba(5, 0, 12, .55); color: white; transition: .2s ease; }
.portal-form textarea { resize: vertical; }
.portal-form input:focus, .portal-form textarea:focus { border-color: rgba(168, 85, 247, .45); box-shadow: 0 0 0 3px rgba(124, 58, 237, .09); }
.portal-form input[type="range"] { min-height: 8px; padding: 0; accent-color: var(--primary-2); }
.form-grid.compact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.quote-box { display: grid; gap: 4px; padding: 16px; border: 1px solid rgba(192, 132, 252, .14); border-radius: 15px; background: rgba(124, 58, 237, .055); }
.quote-box span { color: #a997bd; font-size: 10px; }
.quote-box strong { font: 700 22px Sora; letter-spacing: -.04em; }
.quote-box small { color: #7e708d; font-size: 9px; }
.premium-range-row { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 12px; }
.range-step-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(192, 132, 252, .26); border-radius: 12px; background: rgba(255, 255, 255, .035); color: #e9d5ff; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; transition: .2s ease; }
.range-step-button:hover { border-color: rgba(192, 132, 252, .5); background: rgba(168, 85, 247, .16); box-shadow: 0 0 18px rgba(168, 85, 247, .14); }
.range-step-button:active { transform: scale(.94); }
.premium-range-shell { display: grid; gap: 9px; }
.premium-range-shell input[type="range"] { --range-progress: 0%; appearance: none; -webkit-appearance: none; width: 100%; height: 6px; margin: 7px 0; border: 0; border-radius: 999px; background: linear-gradient(90deg, #a855f7 0 var(--range-progress), rgba(255,255,255,.1) var(--range-progress) 100%); box-shadow: inset 0 0 0 1px rgba(192,132,252,.14); cursor: pointer; }
.premium-range-shell input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #c084fc, #7c3aed); box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(168,85,247,.22); cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; }
.premium-range-shell input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 0 5px rgba(168,85,247,.28); }
.premium-range-shell input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
.premium-range-shell input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: #a855f7; box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(168,85,247,.22); cursor: pointer; }
.premium-range-shell input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }
.premium-range-meta { display: flex; justify-content: space-between; color: #8d7aa4; font-size: 9px; }
.discount-hint { padding: 12px 14px; border: 1px solid rgba(192, 132, 252, .18); border-radius: 13px; background: rgba(168, 85, 247, .065); color: #eadcff; font-size: 11px; font-weight: 800; text-align: center; }
.checkout-card { display: grid; gap: 13px; margin-top: 4px; padding: 18px; border: 1px solid rgba(192, 132, 252, .18); border-radius: 18px; background: radial-gradient(circle at 100% 0, rgba(168,85,247,.12), transparent 32%), rgba(5,0,12,.38); }
.checkout-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checkout-head h2 { font-size: 18px; }
.terms-check { grid-template-columns: 22px 1fr !important; align-items: center; gap: 12px !important; padding: 12px 14px; border: 1px solid rgba(192, 132, 252, .14); border-radius: 13px; background: rgba(255, 255, 255, .02); color: #d8c7eb !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.45; cursor: pointer; transition: .2s ease; }
.terms-check:hover { border-color: rgba(192, 132, 252, .28); background: rgba(168, 85, 247, .05); }
.terms-check input { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex: 0 0 auto; position: relative; width: 22px !important; height: 22px; min-height: 22px !important; padding: 0 !important; margin: 0; border: 1.5px solid rgba(192, 132, 252, .4); border-radius: 7px; background: rgba(5, 0, 12, .55); cursor: pointer; transition: .2s ease; }
.terms-check input:hover { border-color: rgba(168, 85, 247, .7); }
.terms-check input:checked { border-color: transparent; background: linear-gradient(145deg, #c084fc, #7c3aed); box-shadow: 0 2px 8px rgba(124, 58, 237, .35); }
.terms-check input:checked::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(43deg); }
.terms-check input:focus-visible { outline: 2px solid rgba(168, 85, 247, .6); outline-offset: 2px; }
.pix-pay-button { min-height: 52px; justify-content: center; font-size: 13px; }
.pix-payment-content { display: grid; gap: 12px; }
.pix-card-premium { display: grid; gap: 14px; }
.pix-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pix-summary > div { padding: 12px; border: 1px solid rgba(192, 132, 252, .12); border-radius: 13px; background: rgba(255, 255, 255, .025); }
.pix-summary small, .pix-summary strong { display: block; }
.pix-summary small { color: #7e708d; font-size: 8px; }
.pix-summary strong { margin-top: 3px; font-size: 12px; }
.pix-qrcode { display: grid; place-items: center; padding: 14px; border: 1px solid rgba(192, 132, 252, .13); border-radius: 15px; background: rgba(255,255,255,.95); }
.pix-qrcode img { width: min(260px, 100%); height: auto; }
.pix-copy-panel small { display: block; margin-bottom: 6px; color: #a997bd; font-size: 9px; font-weight: 800; }
.payment-note { margin: 0; color: #a997bd; font-size: 10px; text-align: center; }
.payment-success-card { display: grid; justify-items: center; gap: 12px; padding: 28px 18px; text-align: center; border: 1px solid rgba(34,197,94,.22); border-radius: 18px; background: radial-gradient(circle at 50% 0, rgba(34,197,94,.14), transparent 38%), rgba(4,24,14,.35); }
.payment-success-card h2 { font-size: 24px; }
.payment-success-card p { margin: 0; }
.success-orb { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: rgba(34,197,94,.12); color: #86efac; border: 1px solid rgba(34,197,94,.28); box-shadow: 0 0 32px rgba(34,197,94,.18); font-weight: 900; }
.proxy-result-box { display: grid; gap: 10px; margin-top: 15px; }
.proxy-result-box > strong { font: 700 13px Sora; }

/* Login */
.login-page { display: grid; place-items: center; padding: 25px; overflow: hidden; background: #05000d; }
.login-aurora { position: fixed; border-radius: 50%; filter: blur(100px); opacity: .4; animation: drift 12s ease-in-out infinite alternate; }
.login-aurora.one { width: 560px; height: 560px; left: -270px; top: -250px; background: #6d28d9; }
.login-aurora.two { width: 500px; height: 500px; right: -250px; bottom: -280px; background: #9333ea; animation-delay: -4s; }
.login-stars i { position: fixed; width: 2px; height: 2px; border-radius: 50%; background: #d8b4fe; box-shadow: 0 0 8px #c084fc; animation: star 4s ease infinite; }
.login-stars i:nth-child(1) { left: 9%; top: 21%; }.login-stars i:nth-child(2) { left: 24%; top: 75%; animation-delay: -1s; }.login-stars i:nth-child(3) { right: 17%; top: 13%; animation-delay: -2s; }.login-stars i:nth-child(4) { right: 8%; bottom: 25%; animation-delay: -.5s; }.login-stars i:nth-child(5) { left: 48%; top: 8%; animation-delay: -3s; }.login-stars i:nth-child(6) { left: 60%; bottom: 8%; animation-delay: -2s; }
@keyframes star { 50% { opacity: .25; transform: scale(.5); } }
.login-shell { position: relative; z-index: 2; width: min(1080px, 100%); min-height: 650px; display: grid; grid-template-columns: 1.12fr .88fr; overflow: hidden; border: 1px solid rgba(192, 132, 252, .16); border-radius: 27px; background: rgba(10, 2, 20, .8); box-shadow: 0 50px 150px rgba(0, 0, 0, .65), 0 0 80px rgba(124, 58, 237, .08); animation: login-in .7s cubic-bezier(.22, 1, .36, 1); }
@keyframes login-in { from { opacity: 0; transform: translateY(20px) scale(.98); } }
.login-visual { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(45px, 6vw, 74px); overflow: hidden; border-right: 1px solid var(--line); background: radial-gradient(circle at 35% 35%, rgba(124, 58, 237, .17), transparent 34%), linear-gradient(145deg, rgba(20, 5, 39, .9), rgba(7, 0, 18, .82)); }
.login-brandmark { position: absolute; left: 55px; top: 45px; width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid rgba(216, 180, 254, .28); border-radius: 14px; background: linear-gradient(145deg, #9333ea, #5b21b6); box-shadow: 0 0 35px rgba(124, 58, 237, .35); font: 700 12px Sora; }
.login-brandmark i { position: absolute; inset: -8px; z-index: -1; border: 1px solid rgba(168, 85, 247, .12); border-radius: 18px; }
.login-copy { position: relative; z-index: 2; }
.login-copy h1 { margin: 14px 0 20px; font-size: clamp(38px, 4.5vw, 59px); line-height: 1.03; }
.login-copy h1 em { background: linear-gradient(90deg, #d8b4fe, #8b5cf6); -webkit-background-clip: text; color: transparent; font-style: normal; }
.login-copy p { max-width: 500px; font-size: 12px; line-height: 1.8; }
.login-trust { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 33px; }
.login-trust > div { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid rgba(255, 255, 255, .05); border-radius: 12px; background: rgba(255, 255, 255, .02); backdrop-filter: blur(8px); }
.trust-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: rgba(124, 58, 237, .12); color: #c9a3fa; font-size: 11px; }
.login-trust p { margin: 0; }.login-trust strong, .login-trust small { display: block; }.login-trust strong { color: #dacee5; font-size: 8px; }.login-trust small { margin-top: 2px; color: #766884; font-size: 7px; }
.orbital { position: absolute; width: 420px; height: 420px; right: -290px; bottom: -240px; border: 1px solid rgba(192, 132, 252, .1); border-radius: 50%; animation: orbital-spin 35s linear infinite; }
.orbital span { position: absolute; inset: 50px; border: 1px solid rgba(192, 132, 252, .08); border-radius: 50%; }.orbital span:nth-child(2) { inset: 105px; }.orbital span:nth-child(3) { inset: 155px; background: rgba(124, 58, 237, .15); box-shadow: 0 0 60px rgba(124, 58, 237, .3); }
.orbital i { position: absolute; width: 8px; height: 8px; left: 39px; top: 105px; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 15px var(--lilac); }
@keyframes orbital-spin { to { transform: rotate(360deg); } }
.login-card { display: flex; flex-direction: column; justify-content: center; padding: clamp(38px, 5vw, 62px); }
.login-card-head { margin-bottom: 28px; }
.login-card-head h2 { margin: 16px 0 6px; font-size: 25px; }
.login-card-head p { margin: 0; font-size: 10px; }
.secure-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid rgba(34, 197, 94, .14); border-radius: 999px; background: rgba(34, 197, 94, .04); color: #70d991; font-size: 8px; font-weight: 600; }
.secure-badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.login-card form { display: grid; gap: 16px; }
.login-card form[hidden], .register-success[hidden] { display: none !important; }
.login-input { position: relative; }
.login-input svg { position: absolute; left: 12px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: #746384; }
.login-input input { height: 45px; padding-left: 39px; }
.login-submit { height: 45px; margin-top: 5px; }
.login-submit > svg { margin-left: auto; }
.button-loader { display: none; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .3); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }
.login-submit.loading span, .login-submit.loading > svg { display: none; }.login-submit.loading .button-loader { display: block; }
.login-footer { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 17px; border-top: 1px solid rgba(255, 255, 255, .045); color: #655672; font-size: 8px; }
.login-footer span:first-child { display: flex; align-items: center; gap: 6px; }
.login-footer i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.login-mobile-logo { display: none; }

/* Docs */
.docs-shell { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 70px; }
.docs-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.docs-hero p { margin: 5px 0 0; }
.docs-section { margin-bottom: 15px; }
.docs-section h2 { display: inline-block; margin-left: 10px; }
.docs-section > p { margin: 14px 0; }
.method { display: inline-flex; padding: 5px 8px; border-radius: 7px; font-size: 8px; font-weight: 800; }
.method.get { color: #5ee58c; background: rgba(34, 197, 94, .08); }.method.post { color: #d8b4fe; background: rgba(124, 58, 237, .12); }
.docs-errors { display: grid; grid-template-columns: max-content 1fr; gap: 11px 20px; margin-top: 15px; }.docs-errors span { color: var(--muted); }

/* Premium motion layer */
.panel,
.stat-card,
.integration-card,
.login-card,
.setting-card {
  background-image:
    radial-gradient(420px circle at var(--spotlight-x, 50%) var(--spotlight-y, 0%), rgba(168, 85, 247, calc(var(--spotlight-strength, .045) * var(--spotlight-alpha, 0))), transparent 52%),
    linear-gradient(145deg, rgba(20, 8, 38, .82), rgba(11, 3, 23, .82));
}
.stat-card.featured {
  background-image:
    radial-gradient(420px circle at var(--spotlight-x, 50%) var(--spotlight-y, 0%), rgba(216, 180, 254, calc(.055 * var(--spotlight-alpha, 0))), transparent 52%),
    linear-gradient(145deg, rgba(80, 33, 142, .38), rgba(22, 7, 43, .88));
}
.hero-card {
  background:
    radial-gradient(440px circle at var(--spotlight-x, 50%) var(--spotlight-y, 0%), rgba(216, 180, 254, calc(.05 * var(--spotlight-alpha, 0))), transparent 52%),
    radial-gradient(circle at 78% 20%, rgba(168, 85, 247, .18), transparent 30%),
    linear-gradient(120deg, rgba(32, 11, 58, .92), rgba(13, 4, 27, .88));
}
.product-banner {
  background:
    radial-gradient(440px circle at var(--spotlight-x, 50%) var(--spotlight-y, 0%), rgba(56, 189, 248, calc(.045 * var(--spotlight-alpha, 0))), transparent 52%),
    radial-gradient(circle at 80% 20%, rgba(56, 189, 248, .12), transparent 30%),
    linear-gradient(125deg, rgba(14, 25, 48, .92), rgba(13, 4, 27, .9));
}
.integration-card {
  background-image:
    radial-gradient(380px circle at var(--spotlight-x, 50%) var(--spotlight-y, 0%), rgba(192, 132, 252, calc(.05 * var(--spotlight-alpha, 0))), transparent 52%),
    linear-gradient(145deg, rgba(22, 6, 41, .86), rgba(9, 1, 20, .74));
}
.stat-card:hover,
.panel:hover,
.hero-card:hover,
.integration-card:hover,
.product-banner:hover,
.login-card:hover {
  transform: translateY(-4px) scale(1.008);
  border-color: rgba(192, 132, 252, .22);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .26), 0 0 20px rgba(124, 58, 237, .055);
}
.hero-card:hover,
.product-banner:hover {
  transform: translateY(-3px);
}
.stat-card::before,
.panel .panel-head::after,
.integration-card h3::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 10px;
  background: linear-gradient(90deg, transparent, rgba(192, 132, 252, .45), transparent);
  opacity: .28;
  transform: scaleX(.35);
  transform-origin: left;
  transition: transform .35s ease, opacity .35s ease;
}
.stat-card::before {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 13px;
  margin: 0;
  z-index: 1;
}
.stat-card:hover::before,
.panel:hover .panel-head::after,
.integration-card:hover h3::after {
  opacity: .55;
  transform: scaleX(1);
}
.button::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% -70%;
  width: 55%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent);
  transform: skewX(-18deg);
  transition: left .55s cubic-bezier(.22, 1, .36, 1);
}
.button:hover::before { left: 120%; }
.button.primary::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  opacity: .12;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .reseller-stats { grid-template-columns: repeat(3, 1fr); }
  .chart-grid { grid-template-columns: 1.25fr .75fr; }
  .portal-guide-grid { grid-template-columns: repeat(2, 1fr); }
  .purchase-plan-grid { grid-template-columns: repeat(3, 1fr); }
  .api-capability-grid, .api-permission-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  :root { --sidebar: 250px; }
  .chart-grid, .dashboard-grid, .settings-grid { grid-template-columns: 1fr; }
  .reseller-grid { grid-template-columns: 1fr; }
  .integration-kit-grid { grid-template-columns: 1fr; }
  .api-capability-grid, .api-permission-strip { grid-template-columns: 1fr; }
  .hero-health { width: 45%; }
  .details-columns { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .sidebar { width: min(280px, 82vw); transform: translateX(-105%); transition: transform .28s cubic-bezier(.22, 1, .36, 1); animation: none; }
  .menu-open .sidebar { transform: translateX(0); }
  .mobile-backdrop { position: fixed; inset: 0; z-index: 25; display: block; background: rgba(3, 0, 8, .7); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: .25s ease; }
  .menu-open .mobile-backdrop { opacity: 1; visibility: visible; }
  .content { margin-left: 0; padding: 15px 14px 50px; }
  .menu-button { display: grid !important; }
  .topbar { position: sticky; top: 10px; min-height: 65px; }
  .admin-chip { display: none; }
  .hero-card { align-items: flex-start; flex-direction: column; }
  .hero-health { width: 100%; grid-template-columns: repeat(3, 1fr); }
  .hero-health > div { align-items: flex-start; }
  .hero-health .health-icon { display: none; }
  .login-shell { grid-template-columns: 1fr; width: min(500px, 100%); min-height: auto; }
  .login-visual { display: none; }
  .login-card { min-height: 610px; padding: 38px; }
  .login-mobile-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 45px; font: 700 12px Sora; }
}
@media (max-width: 580px) {
  .top-status { display: none; }
  .topbar { padding: 10px 13px; }
  .title-block h1 { font-size: 17px; }
  .breadcrumb { display: none; }
  .hero-card { min-height: 0; padding: 25px 20px; }
  .hero-card h2 { font-size: 27px; }
  .hero-health { grid-template-columns: 1fr; }
  .hero-health > div { padding: 8px 10px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .reseller-stats { grid-template-columns: repeat(2, 1fr); }
  .portal-guide-grid { grid-template-columns: 1fr; }
  .reseller-portal-shell { width: min(100% - 24px, 1440px); padding-top: 12px; }
  .reseller-portal-topbar { align-items: flex-start; flex-direction: column; }
  .reseller-brand { min-width: 0; }
  .stat-card { min-height: 132px; padding: 14px; }
  .stat-card > strong { font-size: 19px; }
  .panel { padding: 16px; }
  .panel-head, .page-intro, .panel-toolbar { align-items: flex-start; flex-direction: column; }
  .page-intro .button { width: 100%; }
  .search-box { width: 100%; }
  .form-grid, .profile-grid { grid-template-columns: 1fr; }
  .product-banner { align-items: flex-start; flex-direction: column; padding: 22px; }
  .checklist-grid { grid-template-columns: 1fr; }
  .purchase-plan-grid, .form-grid.compact, .pix-summary { grid-template-columns: 1fr; }
  .premium-range-row { grid-template-columns: 38px 1fr 38px; gap: 9px; }
  .range-step-button { width: 38px; height: 38px; }
  .price-tier-settings-card { grid-column: auto; }
  .price-tiers-form, .price-tier-row { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .modal { padding: 19px; }
  .modal-title p { display: none; }
  .login-page { padding: 12px; }
  .login-card { min-height: calc(100vh - 24px); padding: 27px 24px; }
  .login-trust { grid-template-columns: 1fr; }
  .toast-stack { right: 15px; bottom: 15px; }
}

/* ============================================================
   CHECKOUT PREMIUM — planos, pagamento e Pix
   ============================================================ */

.purchase-plan-card {
  --spotlight-x: 50%;
  --spotlight-y: 0%;
  --spotlight-alpha: 0;
  position: relative;
  overflow: hidden;
}
.purchase-plan-card.is-spotlight { --spotlight-alpha: 1; }
.purchase-plan-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--spotlight-alpha);
  background: radial-gradient(240px circle at var(--spotlight-x) var(--spotlight-y), rgba(216, 180, 254, .08), transparent 52%);
  transition: opacity .25s ease;
}
.purchase-plan-card:hover {
  transform: translateY(-5px);
  border-color: rgba(192, 132, 252, .4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3), 0 0 30px rgba(124, 58, 237, .12);
}
.purchase-plan-card.popular {
  border-color: rgba(34, 197, 94, .3);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, .12), 0 18px 50px rgba(0, 0, 0, .24), 0 0 26px rgba(34, 197, 94, .07);
}
.plan-ribbon {
  position: absolute;
  top: 12px;
  right: -34px;
  padding: 4px 38px;
  transform: rotate(38deg);
  background: linear-gradient(110deg, #16a34a, #22c55e);
  color: #04130a;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .14em;
  box-shadow: 0 6px 18px rgba(34, 197, 94, .3);
}
.plan-head { display: flex; align-items: center; gap: 9px; }
.plan-head .eyebrow { margin-bottom: 0; }
.plan-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(192, 132, 252, .26);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(124, 58, 237, .3), rgba(168, 85, 247, .08));
  color: var(--lilac);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12);
  transition: .24s ease;
}
.plan-icon svg { width: 16px; height: 16px; }
.purchase-plan-card:hover .plan-icon {
  color: #efe2ff;
  border-color: rgba(216, 180, 254, .5);
  box-shadow: inset 0 1px rgba(255, 255, 255, .15), 0 0 18px rgba(168, 85, 247, .3);
  transform: scale(1.06) rotate(-4deg);
}
.purchase-plan-card.popular .plan-icon { border-color: rgba(34, 197, 94, .35); color: #6ee7a0; background: linear-gradient(145deg, rgba(34, 197, 94, .22), rgba(34, 197, 94, .05)); }
.plan-savings {
  justify-self: start;
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid rgba(34, 197, 94, .22);
  border-radius: 999px;
  background: rgba(34, 197, 94, .08);
  color: #6ee7a0;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}

.checkout-card {
  --spotlight-x: 50%;
  --spotlight-y: 0%;
  --spotlight-alpha: 0;
  position: relative;
  overflow: hidden;
}
.checkout-card.is-spotlight { --spotlight-alpha: 1; }
.checkout-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--spotlight-alpha);
  background: radial-gradient(300px circle at var(--spotlight-x) var(--spotlight-y), rgba(216, 180, 254, .055), transparent 50%);
  transition: opacity .25s ease;
}
.checkout-footnote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #8d7aa4;
  font-size: 9px;
}
.checkout-footnote svg { width: 13px; height: 13px; flex: 0 0 auto; color: #70d991; }
.pix-pay-button svg { width: 17px; height: 17px; }

/* Etapas do pagamento Pix */
.pix-steps { display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
.pix-step { display: flex; align-items: center; gap: 8px; color: #7e708d; font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.pix-step i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(192, 132, 252, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .03);
  font-style: normal;
  font-size: 10px;
  transition: .3s ease;
}
.pix-step i svg { width: 12px; height: 12px; }
.pix-step.done { color: #6ee7a0; }
.pix-step.done i { border-color: rgba(34, 197, 94, .35); background: rgba(34, 197, 94, .12); color: #6ee7a0; }
.pix-step.active { color: #e9d5ff; }
.pix-step.active i {
  border-color: rgba(168, 85, 247, .55);
  background: rgba(124, 58, 237, .18);
  color: #e9d5ff;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, .1), 0 0 18px rgba(168, 85, 247, .25);
  animation: step-pulse 1.8s ease-in-out infinite;
}
@keyframes step-pulse { 50% { box-shadow: 0 0 0 7px rgba(168, 85, 247, .05), 0 0 22px rgba(168, 85, 247, .35); } }
.pix-step-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(192, 132, 252, .25), rgba(192, 132, 252, .06)); }
.pix-step-line.done { background: linear-gradient(90deg, rgba(34, 197, 94, .4), rgba(34, 197, 94, .1)); }

/* Palco do QR Code */
.pix-qr-stage { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: stretch; }
.pix-qr-frame {
  position: relative;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid rgba(192, 132, 252, .16);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3), 0 0 34px rgba(168, 85, 247, .1);
  animation: qr-glow 3.2s ease-in-out infinite;
}
@keyframes qr-glow {
  50% { box-shadow: 0 18px 50px rgba(0, 0, 0, .3), 0 0 48px rgba(168, 85, 247, .2); }
}
.pix-qr-frame img { width: min(228px, 56vw); height: auto; display: block; }
.qr-missing { width: min(228px, 56vw); padding: 40px 12px; color: #555; font-size: 11px; font-weight: 700; text-align: center; }
.qr-corner { position: absolute; width: 22px; height: 22px; border: 3px solid var(--primary-2); }
.qr-corner.tl { top: -3px; left: -3px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.qr-corner.tr { top: -3px; right: -3px; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.qr-corner.bl { bottom: -3px; left: -3px; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.qr-corner.br { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }

.pix-qr-side { display: grid; gap: 12px; align-content: start; }
.pix-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 7px 12px;
  border: 1px solid rgba(250, 204, 21, .22);
  border-radius: 999px;
  background: rgba(250, 204, 21, .06);
  color: #fde047;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pix-status-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pulse-dot 1.6s infinite; }
.pix-status-pill.expired { border-color: rgba(239, 68, 68, .25); background: rgba(239, 68, 68, .07); color: #fb7185; }
.pix-amount { padding: 14px 16px; border: 1px solid rgba(192, 132, 252, .16); border-radius: 15px; background: rgba(124, 58, 237, .07); }
.pix-amount small { display: block; color: #a997bd; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.pix-amount strong { display: block; margin: 3px 0 2px; font: 700 26px Sora; letter-spacing: -.04em; }
.pix-amount span { color: #8d7aa4; font-size: 10px; }
.pix-countdown {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid rgba(192, 132, 252, .14);
  border-radius: 13px;
  background: rgba(255, 255, 255, .025);
  color: #b9a7d9;
}
.pix-countdown svg { width: 15px; height: 15px; color: var(--lilac); }
.pix-countdown b { font: 700 16px Sora; letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums; }
.pix-countdown small { font-size: 9px; }
.pix-countdown.urgent { border-color: rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .06); }
.pix-countdown.urgent b { color: #fb7185; }
.pix-how { margin: 0; padding: 0 0 0 16px; display: grid; gap: 5px; color: #8d7aa4; font-size: 10px; }
.pix-how li::marker { color: var(--lilac); font-weight: 800; }

.pix-copy-panel { display: grid; gap: 8px; }
.pix-copy-label { display: inline-flex; align-items: center; gap: 7px; color: #a997bd; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pix-copy-label svg { width: 13px; height: 13px; color: var(--lilac); }
.pix-copy-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.pix-copy-code {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid rgba(192, 132, 252, .14);
  border-radius: 12px;
  background: rgba(5, 0, 12, .6);
  color: #d8c7f0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pix-copy-button { min-height: 46px; padding: 0 18px; white-space: nowrap; }
.pix-copy-button svg { width: 14px; height: 14px; }
.pix-copy-button.copied {
  border-color: rgba(34, 197, 94, .4);
  background: linear-gradient(110deg, #15803d, #22c55e);
  box-shadow: 0 10px 28px rgba(34, 197, 94, .25);
  animation: none;
}
.pix-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pix-auto-note { display: inline-flex; align-items: center; gap: 8px; color: #8d7aa4; font-size: 9px; font-weight: 600; }

/* Sucesso do pagamento */
.payment-success-card { animation: success-in .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes success-in { from { opacity: 0; transform: scale(.94) translateY(10px); } }
.success-check {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, .16), transparent 70%);
}
.success-check svg {
  width: 58px;
  height: 58px;
  stroke: var(--green);
  stroke-width: 3;
  filter: drop-shadow(0 0 14px rgba(34, 197, 94, .45));
}
.success-check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw-stroke .7s ease-out forwards; }
.success-check path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: draw-stroke .45s ease-out .55s forwards; }
@keyframes draw-stroke { to { stroke-dashoffset: 0; } }
.success-meta { display: flex; gap: 10px; }
.success-meta > div { padding: 10px 18px; border: 1px solid rgba(34, 197, 94, .16); border-radius: 12px; background: rgba(34, 197, 94, .05); }
.success-meta small { display: block; color: #79a98a; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.success-meta strong { font-size: 13px; }

@media (max-width: 760px) {
  .pix-qr-stage { grid-template-columns: 1fr; }
  .pix-qr-frame { justify-self: center; }
  .pix-copy-row { grid-template-columns: 1fr; }
  .pix-copy-button { min-height: 44px; }
  .pix-steps { flex-wrap: wrap; }
  .pix-actions { flex-direction: column; align-items: flex-start; }
}

/* Polimento global */
::selection { background: rgba(168, 85, 247, .4); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .02); }
::-webkit-scrollbar-thumb { border: 3px solid var(--bg); border-radius: 999px; background: rgba(168, 85, 247, .35); }
::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, .55); }
* { scrollbar-width: thin; scrollbar-color: rgba(168, 85, 247, .35) transparent; }
:focus-visible { outline: 2px solid rgba(168, 85, 247, .6); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Painel Pix em coluna estreita: empilha o QR e centraliza */
.payment-panel .pix-qr-stage { grid-template-columns: 1fr; justify-items: center; }
.payment-panel .pix-qr-side { width: 100%; justify-items: center; text-align: center; }
.payment-panel .pix-status-pill { justify-self: center; }
.payment-panel .pix-amount { width: 100%; }
.payment-panel .pix-countdown { justify-content: center; width: 100%; }
.payment-panel .pix-how { text-align: left; }

/* Ajustes responsivos finos — planos e checkout */
@media (max-width: 820px) {
  .purchase-plan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .reseller-portal-topbar .topbar-actions { width: 100%; }
  .reseller-portal-topbar .topbar-actions .button { flex: 1; justify-content: center; }
  .checkout-card { padding: 15px; }
  .checkout-head h2 { font-size: 16px; }
  .pix-amount strong { font-size: 22px; }
  .toast-stack { left: 12px; right: 12px; bottom: 12px; }
  .toast { width: 100%; }
}
@media (max-width: 400px) {
  .purchase-plan-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MODO PAGAMENTO FOCADO — so o status da compra na tela
   ============================================================ */
.reseller-portal-shell.is-paying .purchase-step { display: none !important; }
.reseller-portal-shell.is-paying .reseller-grid { display: block; }
.reseller-portal-shell.is-paying #pix-payment-panel { max-width: 640px; margin: 8px auto 0; }

/* Cabecalho enxuto do painel de pagamento */
.payment-panel-head { display: grid; gap: 12px; margin-bottom: 18px; }
.payment-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px 7px 9px;
  border: 1px solid rgba(192, 132, 252, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: #c8bad6;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s ease;
}
.payment-back:hover { border-color: rgba(192, 132, 252, .4); background: rgba(168, 85, 247, .1); color: #efe2ff; transform: translateX(-2px); }
.payment-back svg { width: 15px; height: 15px; }
.payment-title h2 { font-size: 19px; }
.payment-title .eyebrow { margin-bottom: 4px; }

/* Acoes e confete do sucesso */
.success-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.success-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.success-confetti::before, .success-confetti::after {
  content: "";
  position: absolute;
  top: -10%;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  opacity: .85;
  animation: confetti-fall 2.4s ease-in forwards;
}
.success-confetti::before { left: 28%; background: #c084fc; animation-delay: .15s; }
.success-confetti::after { left: 68%; background: #22c55e; animation-delay: .45s; }
@keyframes confetti-fall {
  to { transform: translateY(320px) rotate(360deg); opacity: 0; }
}
.payment-success-card { position: relative; }

@media (max-width: 560px) {
  .reseller-portal-shell.is-paying #pix-payment-panel { margin-top: 4px; }
  .pix-copy-row { grid-template-columns: 1fr; }
  .pix-copy-button { min-height: 46px; }
  .success-actions { flex-direction: column; }
  .success-actions .button { width: 100%; }
}

/* Form de remover GB (portal do revendedor) */
.remove-gb-grid { display: grid; grid-template-columns: 1fr 160px; gap: 10px; }
@media (max-width: 560px) { .remove-gb-grid { grid-template-columns: 1fr; } }

/* Guia de dominio white-label (portal do revendedor) */
.domain-steps { display: grid; gap: 16px; }
.domain-step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.domain-step-num { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(192,132,252,.28); border-radius: 11px; background: rgba(124,58,237,.14); color: #e9d5ff; font: 700 14px Sora; }
.domain-step strong { display: block; margin-bottom: 4px; font-size: 13px; }
.domain-step p { margin: 4px 0; color: #a99ab8; font-size: 12px; line-height: 1.6; }
.dns-record { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0; padding: 14px; border: 1px solid rgba(192,132,252,.16); border-radius: 14px; background: rgba(5,0,12,.5); }
.dns-record > div { display: grid; gap: 3px; }
.dns-record small { color: #7e708d; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.dns-record b { font: 600 13px ui-monospace, Menlo, monospace; color: #efe2ff; }
.dns-target { position: relative; }
.dns-target .button.small { margin-top: 6px; justify-self: start; }
.domain-note { border-left: 2px solid rgba(168,85,247,.4); padding-left: 12px; }
@media (max-width: 560px) { .dns-record { grid-template-columns: 1fr; } }

/* Barra da chave da API (token) no perfil do revendedor */
.api-key-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; padding: 14px 16px; border: 1px solid rgba(192,132,252,.18); border-radius: 14px; background: radial-gradient(circle at 100% 0, rgba(168,85,247,.1), transparent 40%), rgba(5,0,12,.4); }
.api-key-info { display: grid; gap: 6px; min-width: 0; flex: 1; }
.api-key-value { display: block; overflow: hidden; max-width: 100%; padding: 8px 12px; border: 1px solid rgba(192,132,252,.14); border-radius: 10px; background: rgba(5,0,12,.6); color: #efe2ff; font: 600 13px ui-monospace, Menlo, monospace; white-space: nowrap; text-overflow: ellipsis; }
.api-key-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.api-key-note { color: #9586a8; font-size: 10px; max-width: 280px; line-height: 1.5; }
@media (max-width: 560px) { .api-key-bar { flex-direction: column; align-items: stretch; } .api-key-buttons .button { flex: 1; justify-content: center; } }

/* ============================================================
   LOGIN DO ADMINISTRADOR — identidade dourada/ambar (distinta do revendedor)
   ============================================================ */
.admin-login { --primary: #b45309; --primary-2: #f59e0b; --lilac: #fbbf24; }
.admin-login::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(245, 158, 11, .18), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(251, 191, 36, .12), transparent 26%),
    linear-gradient(115deg, rgba(7, 0, 18, .9), rgba(46, 26, 0, .34), rgba(7, 0, 18, .92)) !important;
}
.admin-login .login-aurora.one { background: #b45309; }
.admin-login .login-aurora.two { background: #f59e0b; }
.admin-login .login-brandmark { border-color: rgba(251, 191, 36, .4); background: linear-gradient(145deg, #f59e0b, #b45309); box-shadow: 0 0 35px rgba(245, 158, 11, .42); }
.admin-login .logo-mark { border-color: rgba(251, 191, 36, .4); background: linear-gradient(145deg, #fbbf24, #b45309); box-shadow: 0 12px 30px rgba(245, 158, 11, .4), inset 0 1px 1px rgba(255, 255, 255, .35); }
.admin-login .login-copy h1 em { background: linear-gradient(90deg, #fde68a, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.admin-login .trust-icon { background: rgba(245, 158, 11, .14); color: #fcd34d; }
.admin-login .button.primary { background: linear-gradient(110deg, #b45309, #d97706, #f59e0b); background-size: 200% 100%; box-shadow: 0 10px 28px rgba(245, 158, 11, .32), inset 0 1px rgba(255, 255, 255, .2); }
.admin-login .button.primary:hover { box-shadow: 0 13px 34px rgba(245, 158, 11, .48), 0 0 22px rgba(251, 191, 36, .28); }
.admin-login .login-card:hover { border-color: rgba(251, 191, 36, .32); box-shadow: 0 28px 90px rgba(0, 0, 0, .34), 0 0 44px rgba(245, 158, 11, .12); }
.admin-login .login-input input:focus { border-color: rgba(245, 158, 11, .5); box-shadow: 0 0 0 3px rgba(245, 158, 11, .12); }
.admin-login .login-footer i, .admin-login .login-card-head h2 { color: inherit; }

.admin-login .secure-badge.admin-badge { border-color: rgba(245, 158, 11, .32); background: rgba(245, 158, 11, .08); color: #fcd34d; }
.admin-login .secure-badge.admin-badge i { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }

.admin-login-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, .32);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(245, 158, 11, .15), rgba(180, 83, 9, .08));
  color: #fcd34d;
  font: 800 11px/1 Sora, Inter, sans-serif;
  letter-spacing: .14em;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 0 24px rgba(245, 158, 11, .1);
}
.admin-login-ribbon svg { width: 16px; height: 16px; stroke: #f59e0b; }

/* ============================================================
   GERADOR: ajustar GB (toggle), paginacao e ver lista de lote
   ============================================================ */
.gb-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border: 1px solid rgba(192,132,252,.16); border-radius: 13px; background: rgba(5,0,12,.45); }
.gb-mode { padding: 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #a99ab8; font-size: 12px; font-weight: 700; cursor: pointer; transition: .18s ease; }
.gb-mode:hover { color: #efe2ff; }
.gb-mode.active[data-gb-mode="add"] { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.12); color: #6ee7a0; }
.gb-mode.active[data-gb-mode="remove"] { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.1); color: #fb7185; }

.panel-subhead { display: flex; flex-direction: column; gap: 2px; margin: 22px 0 12px; padding-top: 16px; border-top: 1px solid rgba(192,132,252,.1); }
.panel-subhead h3 { margin: 0; font-size: 14px; color: #efe6ff; }
.gb-history .table-wrap { margin-top: 4px; }

.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.pager-btn { min-width: 34px; height: 34px; padding: 0 10px; display: grid; place-items: center; border: 1px solid rgba(192,132,252,.18); border-radius: 10px; background: rgba(255,255,255,.03); color: #c8bad6; font-size: 12px; font-weight: 700; cursor: pointer; transition: .18s ease; }
.pager-btn:hover:not(:disabled):not(.active) { border-color: rgba(192,132,252,.4); background: rgba(168,85,247,.12); color: #efe2ff; }
.pager-btn.active { border-color: transparent; background: linear-gradient(145deg, #a855f7, #7c3aed); color: #fff; cursor: default; }
.pager-btn:disabled { opacity: .35; cursor: default; }

.batches-table th, .batches-table td { font-size: 11px; }
.batch-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.batch-detail { padding: 14px; border: 1px solid rgba(192,132,252,.16); border-radius: 13px; background: rgba(5,0,12,.5); }
.batch-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.batch-detail-head strong { font-size: 12px; color: #efe6ff; }
.batch-proxy-list { display: grid; gap: 7px; max-height: 320px; overflow-y: auto; }
.batch-proxy-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.batch-proxy-row code { overflow: hidden; padding: 9px 12px; border: 1px solid rgba(192,132,252,.12); border-radius: 10px; background: rgba(5,0,12,.6); color: #d8c7f0; font: 11px ui-monospace, Menlo, monospace; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 760px) { .batches-table { min-width: 720px; } }

/* Secoes extras no detalhe do revendedor (admin): lotes + ajustes de GB */
.reseller-extra { margin-top: 20px; }
.reseller-extra .panel-subhead { margin-top: 0; }

/* ============================================================
   LOGIN/CADASTRO do revendedor: abas, olho de senha, forca, sucesso
   ============================================================ */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0 0 18px; padding: 5px; border: 1px solid rgba(192,132,252,.16); border-radius: 13px; background: rgba(5,0,12,.45); }
.auth-tab { padding: 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #a99ab8; font-size: 12px; font-weight: 700; cursor: pointer; transition: .18s ease; }
.auth-tab:hover { color: #efe2ff; }
.auth-tab.active { border-color: rgba(192,132,252,.3); background: linear-gradient(145deg, rgba(168,85,247,.18), rgba(124,58,237,.1)); color: #fff; }

.login-input { position: relative; }
.pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #7e6f93; cursor: pointer; transition: .18s ease; }
.pw-eye:hover { color: #c9b5dd; background: rgba(255,255,255,.05); }
.pw-eye svg { width: 17px; height: 17px; }
.pw-eye.on { color: var(--lilac); }
.login-input input { padding-right: 42px; }

.pw-strength { display: flex; align-items: center; gap: 9px; margin-top: -4px; }
.pw-strength > i { display: block; height: 5px; width: 20%; border-radius: 999px; background: #fb7185; transition: .25s ease; }
.pw-strength span { color: #9586a8; font-size: 10px; font-weight: 700; white-space: nowrap; }
.pw-strength::before { content: ""; position: absolute; }
.pw-strength { position: relative; }
.pw-strength > i { flex: 0 0 auto; max-width: 70%; }

.register-success { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 8px 0 4px; animation: success-in .5s cubic-bezier(.22,1,.36,1); }
.register-success h3 { margin: 0; font-size: 19px; }
.register-success p { margin: 0; color: var(--muted, #b9a7d9); font-size: 12px; line-height: 1.55; }
.apikey-reveal { display: grid; grid-template-columns: 1fr auto; gap: 8px; width: 100%; }
.apikey-reveal code { overflow: hidden; padding: 11px 13px; border: 1px solid rgba(192,132,252,.18); border-radius: 11px; background: rgba(5,0,12,.6); color: #efe2ff; font: 600 11px ui-monospace, Menlo, monospace; white-space: nowrap; text-overflow: ellipsis; }

.self-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(34,197,94,.14); color: #6ee7a0; font-size: 7px; font-weight: 800; letter-spacing: .06em; font-style: normal; text-transform: uppercase; vertical-align: middle; }

/* ============================================================
   FATURAMENTO (admin) + aviso de saldo baixo (revendedor)
   ============================================================ */
.billing-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.billing-card { padding: 18px; border: 1px solid rgba(192,132,252,.14); border-radius: 17px; background: linear-gradient(145deg, rgba(22,6,41,.72), rgba(9,1,20,.66)); }
.billing-card.featured { border-color: rgba(34,197,94,.24); background: linear-gradient(145deg, rgba(34,197,94,.08), rgba(22,6,41,.72)); }
.billing-card .bc-label { color: #9485a8; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.billing-card strong { display: block; margin: 8px 0 4px; font: 800 26px Sora; letter-spacing: -.03em; }
.billing-card small { color: #8d7aa4; font-size: 11px; }
.billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

.billing-chart { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-top: 10px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar-col .bar { width: 100%; max-width: 26px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #c084fc, #7c3aed); transition: .3s ease; }
.bar-col:hover .bar { background: linear-gradient(180deg, #d8b4fe, #a855f7); }
.bar-col small { color: #7e708d; font-size: 8px; white-space: nowrap; }

.activity-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ac-item { padding: 14px; border: 1px solid rgba(192,132,252,.12); border-radius: 13px; background: rgba(255,255,255,.025); }
.ac-item strong { display: block; font: 800 24px Sora; letter-spacing: -.03em; }
.ac-item span { display: flex; align-items: center; gap: 6px; color: #9485a8; font-size: 10px; }
.ac-item.online strong { color: #6ee7a0; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: pulse-dot 1.6s ease infinite; }

.rank-list { display: grid; gap: 8px; }
.rank-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border: 1px solid rgba(192,132,252,.1); border-radius: 12px; background: rgba(255,255,255,.02); }
.rank-item strong { font-size: 12px; } .rank-item small { margin-left: 6px; color: #7e708d; font-size: 9px; }
.rank-item b { color: #e9d5ff; font: 700 13px Sora; }

.low-balance-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; padding: 16px 18px; border: 1px solid rgba(250,204,21,.3); border-radius: 16px; background: linear-gradient(135deg, rgba(250,204,21,.1), rgba(180,83,9,.06)); }
.low-balance-banner .lb-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: rgba(250,204,21,.14); color: #fde047; }
.low-balance-banner .lb-icon svg { width: 22px; height: 22px; }
.low-balance-banner .lb-text { flex: 1; min-width: 200px; display: grid; gap: 3px; }
.low-balance-banner .lb-text strong { color: #fde68a; font-size: 14px; }
.low-balance-banner .lb-text span { color: #c9b89a; font-size: 12px; }
@media (max-width: 980px) { .billing-cards { grid-template-columns: repeat(2,1fr); } .billing-grid { grid-template-columns: 1fr; } }

/* Garante que qualquer elemento com [hidden] fique escondido (evita molduras vazias) */
[hidden] { display: none !important; }

/* CAPTCHA anti-robo — clique para verificar ("Nao sou um robo") */
.captcha-check {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; margin-bottom: 4px;
  border: 1px solid rgba(192,132,252,.2); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  color: #e8dcff; font: inherit; cursor: pointer; text-align: left;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.captcha-check:hover { border-color: rgba(192,132,252,.45); background: rgba(168,85,247,.1); }
.captcha-check:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(168,85,247,.3); }
.captcha-box {
  position: relative; flex: 0 0 auto; width: 26px; height: 26px;
  border: 2px solid rgba(192,132,252,.5); border-radius: 7px;
  background: rgba(10,0,20,.6); display: grid; place-items: center;
  transition: border-color .2s ease, background .2s ease;
}
.captcha-tick { width: 18px; height: 18px; fill: none; stroke: #0a0014; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.captcha-spin { display: none; width: 18px; height: 18px; border: 2px solid rgba(192,132,252,.3); border-top-color: #c084fc; border-radius: 50%; animation: captcha-spin .7s linear infinite; }
@keyframes captcha-spin { to { transform: rotate(360deg); } }
.captcha-label { flex: 1; font-weight: 600; font-size: 14.5px; }
.captcha-mark {
  flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .5px;
  color: #c9b5dd; opacity: .6; padding: 4px 8px; border-radius: 7px;
  border: 1px solid rgba(192,132,252,.16);
}
.captcha-check.verifying { cursor: progress; }
.captcha-check.verifying .captcha-tick { display: none; }
.captcha-check.verifying .captcha-spin { display: block; }
.captcha-check.verified { border-color: rgba(52,211,153,.55); background: rgba(16,185,129,.1); }
.captcha-check.verified .captcha-box { border-color: #34d399; background: #34d399; }
.captcha-check.verified .captcha-tick { stroke-dashoffset: 0; transition: stroke-dashoffset .35s ease .05s; }
.captcha-check.verified .captcha-label { color: #a7f3d0; }

/* Aceite de termos / privacidade (cadastro) */
.terms-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; margin: 2px 0 2px; font-size: 13px; line-height: 1.45; color: #c9b5dd; }
.terms-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.terms-box { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border: 2px solid rgba(192,132,252,.45); border-radius: 6px; background: rgba(10,0,20,.6); display: grid; place-items: center; transition: .18s ease; }
.terms-box svg { width: 15px; height: 15px; fill: none; stroke: #0a0014; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s ease; }
.terms-check input:checked + .terms-box { border-color: #a855f7; background: #a855f7; }
.terms-check input:checked + .terms-box svg { opacity: 1; }
.terms-check input:focus-visible + .terms-box { box-shadow: 0 0 0 3px rgba(168,85,247,.3); }
.terms-text a { color: #d8b4fe; text-decoration: underline; text-underline-offset: 2px; }
.terms-text a:hover { color: #efe2ff; }

/* =========================================================
   Acessibilidade mobile — Portal do revendedor
   ========================================================= */
@media (max-width: 640px) {
  /* Alvos de toque maiores e textos legiveis */
  .reseller-portal-page .button { min-height: 46px; padding: 0 16px; font-size: 14px; }
  .reseller-portal-page .button.small { min-height: 40px; }

  /* Topbar: marca em cima, acoes em grade tocavel */
  .reseller-portal-topbar { gap: 12px; padding: 12px 14px; top: 8px; }
  .reseller-portal-topbar .title-block { width: 100%; }
  .reseller-portal-topbar .topbar-actions { width: 100%; flex-wrap: wrap; gap: 9px; }
  .reseller-portal-topbar .topbar-actions .button { flex: 1 1 calc(50% - 5px); }
  .reseller-portal-topbar #reseller-logout { flex: 1 1 100%; }

  /* Hero e cards */
  .reseller-hero h2 { font-size: 23px; line-height: 1.2; }
  .reseller-hero p { font-size: 13px; }
  .hero-health { gap: 8px; }

  /* Banner de saldo baixo: botao ocupa a largura */
  .low-balance-banner { padding: 14px; }
  .low-balance-banner .button { width: 100%; flex: 1 1 100%; }

  /* API key */
  .api-key-value { font-size: 12px; word-break: break-all; }

  /* Tabelas roláveis com dica visual de scroll */
  .reseller-portal-page .table-wrap { position: relative; -webkit-overflow-scrolling: touch; }
  .reseller-portal-page .table-wrap::after {
    content: ''; position: absolute; top: 0; right: 0; width: 26px; height: 100%;
    pointer-events: none; background: linear-gradient(90deg, transparent, rgba(7,0,18,.65));
    border-radius: 0 12px 12px 0;
  }
  .reseller-portal-page table { min-width: 540px; }
  .reseller-portal-page .api-key-value { min-width: 0; }

  /* Cards de integracao e capacidades em coluna unica */
  .portal-integration-grid, .api-capability-grid, .portal-guide-grid { grid-template-columns: 1fr; }
  .integration-card .button-row { flex-direction: column; }
  .integration-card .button-row .button { width: 100%; }

  /* Login do revendedor: respiro e CAPTCHA confortavel */
  .captcha-check { padding: 15px; }
  .captcha-label { font-size: 15px; }
}

@media (max-width: 430px) {
  .reseller-stats { grid-template-columns: 1fr 1fr; }
  .reseller-portal-topbar .topbar-actions .button { flex: 1 1 100%; }
  .reseller-hero h2 { font-size: 21px; }
  .captcha-mark { display: none; }
}

/* =========================================================
   Paginas juridicas — Termos de Uso e Politica de Privacidade
   ========================================================= */
.legal-page { color: #e9e2f5; }
.legal-shell { width: min(1080px, calc(100% - 36px)); margin: 0 auto; padding: 22px 0 90px; position: relative; z-index: 2; }
.legal-topbar {
  position: sticky; top: 14px; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 18px; border-radius: 16px; margin-bottom: 26px;
  border: 1px solid rgba(192,132,252,.16);
  background: rgba(10,0,22,.62); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 50px -28px rgba(0,0,0,.8);
}
.legal-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.legal-brand .logo-mark { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; font: 800 13px/1 Sora; color: #0a0014; background: linear-gradient(135deg, #d8b4fe, #a855f7); box-shadow: 0 8px 22px -8px rgba(168,85,247,.7); }
.legal-brand strong { font: 700 14px/1.1 Sora; letter-spacing: .4px; }
.legal-brand small { display: block; font-size: 10.5px; letter-spacing: 2px; color: #9b86b8; margin-top: 3px; }
.legal-back { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 11px; border: 1px solid rgba(192,132,252,.22); background: rgba(255,255,255,.03); color: #d8c8ee; font-size: 13px; font-weight: 600; transition: .2s ease; }
.legal-back:hover { border-color: rgba(192,132,252,.45); background: rgba(168,85,247,.12); color: #fff; }
.legal-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.legal-hero { padding: 8px 4px 30px; border-bottom: 1px solid rgba(192,132,252,.12); margin-bottom: 30px; }
.legal-hero .eyebrow { display: inline-block; font: 700 11px/1 Sora; letter-spacing: 3px; color: #b794e8; margin-bottom: 14px; }
.legal-hero h1 { font: 700 clamp(28px, 5vw, 42px)/1.08 Sora; margin: 0 0 14px; background: linear-gradient(120deg, #fff 20%, #d8b4fe 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.legal-hero p { max-width: 60ch; color: #c4b6d8; font-size: 15px; line-height: 1.6; margin: 0; }
.legal-updated { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(192,132,252,.22); background: rgba(168,85,247,.08); font-size: 12.5px; color: #d8c8ee; }
.legal-updated i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; }

.legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 38px; align-items: start; }
.legal-toc { position: sticky; top: 88px; align-self: start; }
.legal-toc strong { display: block; font: 700 11px/1 Sora; letter-spacing: 2px; color: #9b86b8; margin: 0 0 14px 14px; }
.legal-toc nav { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid rgba(192,132,252,.14); }
.legal-toc a { display: block; padding: 7px 14px; margin-left: -1px; border-left: 2px solid transparent; color: #a99cc0; font-size: 13px; line-height: 1.35; transition: .18s ease; }
.legal-toc a:hover { color: #e6dcf6; }
.legal-toc a.active { color: #fff; border-left-color: #a855f7; background: linear-gradient(90deg, rgba(168,85,247,.14), transparent); }

.legal-content { min-width: 0; }
.legal-section { scroll-margin-top: 96px; padding: 26px; margin-bottom: 18px; border-radius: 18px; border: 1px solid rgba(192,132,252,.12); background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)); }
.legal-section > h2 { display: flex; align-items: center; gap: 13px; font: 700 19px/1.25 Sora; margin: 0 0 16px; color: #f3edff; }
.legal-section > h2 .num { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font: 800 14px/1 Sora; color: #0a0014; background: linear-gradient(135deg, #d8b4fe, #a855f7); }
.legal-section h3 { font: 600 15px/1.4 Sora; color: #e7dcfb; margin: 20px 0 8px; }
.legal-section p { color: #c6b9da; font-size: 14.5px; line-height: 1.72; margin: 0 0 12px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a { color: #d8b4fe; text-decoration: underline; text-underline-offset: 2px; }
.legal-section a:hover { color: #f0e6ff; }
.legal-section strong { color: #efe6ff; }
.legal-section ul { margin: 4px 0 12px; padding: 0; list-style: none; display: grid; gap: 9px; }
.legal-section ul li { position: relative; padding-left: 26px; color: #c6b9da; font-size: 14.5px; line-height: 1.6; }
.legal-section ul li::before { content: ''; position: absolute; left: 6px; top: 9px; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, #d8b4fe, #a855f7); }
.legal-section ul.legal-deny li::before { background: #fb7185; border-radius: 50%; transform: none; }
.legal-section ul.legal-allow li::before { background: #34d399; border-radius: 50%; transform: none; }

.legal-callout { display: flex; gap: 14px; padding: 16px 18px; margin: 16px 0; border-radius: 14px; border: 1px solid rgba(250,204,21,.26); background: linear-gradient(135deg, rgba(250,204,21,.08), rgba(180,83,9,.05)); }
.legal-callout.danger { border-color: rgba(251,113,133,.3); background: linear-gradient(135deg, rgba(251,113,133,.08), rgba(136,19,55,.05)); }
.legal-callout.info { border-color: rgba(96,165,250,.3); background: linear-gradient(135deg, rgba(96,165,250,.08), rgba(30,58,138,.05)); }
.legal-callout svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke: #fde047; }
.legal-callout.danger svg { stroke: #fda4af; }
.legal-callout.info svg { stroke: #93c5fd; }
.legal-callout p { margin: 0; font-size: 14px; color: #ddd0ec; }
.legal-callout strong { display: block; margin-bottom: 3px; color: #fff; }

.legal-footer { margin-top: 26px; padding: 22px 26px; border-radius: 18px; border: 1px solid rgba(192,132,252,.14); background: radial-gradient(circle at 100% 0, rgba(168,85,247,.12), transparent 55%), rgba(10,0,22,.4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.legal-footer div { min-width: 0; }
.legal-footer strong { display: block; font: 700 15px/1.3 Sora; color: #f3edff; margin-bottom: 4px; }
.legal-footer p { margin: 0; font-size: 13px; color: #b3a4cb; }
.legal-footer .button { flex: 0 0 auto; }
.legal-meta { margin-top: 20px; text-align: center; font-size: 12px; color: #8b7ba6; line-height: 1.6; }

@media (max-width: 920px) {
  .legal-layout { grid-template-columns: 1fr; gap: 0; }
  .legal-toc { display: none; }
}
@media (max-width: 600px) {
  .legal-shell { width: calc(100% - 24px); padding-top: 12px; }
  .legal-topbar { padding: 11px 14px; top: 8px; }
  .legal-brand small { display: none; }
  .legal-back span { display: none; }
  .legal-back { padding: 9px 11px; }
  .legal-section { padding: 19px 16px; }
  .legal-section > h2 { font-size: 17px; }
  .legal-footer { padding: 18px; }
  .legal-footer .button { width: 100%; justify-content: center; }
}

/* ============================================================
   CAMADA TECH / FUTURISTA — proxies, IPs, rede (leve, GPU-friendly)
   Vale para as DUAS areas (admin + portal do revendedor) pelas classes
   compartilhadas. Todas as animacoes daqui sao desativadas pelo bloco
   global de prefers-reduced-motion (acessibilidade).
   ============================================================ */
:root {
  --tech-cyan: #4fe3ff;
  --tech-cyan-soft: rgba(79, 227, 255, .16);
  --tech-line: rgba(86, 196, 255, .075);
  --tech-node: rgba(79, 227, 255, .16);
  --tech-glow: 0 0 22px rgba(79, 227, 255, .28);
}

/* --- Malha de rede animada ao fundo (nos + linhas) --- */
.dashboard-page::after,
.login-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background-image:
    radial-gradient(var(--tech-node) 1.1px, transparent 1.8px),
    linear-gradient(var(--tech-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-line) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 78% 64% at 50% 36%, #000 0%, transparent 80%);
          mask-image: radial-gradient(ellipse 78% 64% at 50% 36%, #000 0%, transparent 80%);
  animation: tech-grid 36s linear infinite;
}
@keyframes tech-grid {
  to { background-position: 48px 48px, 48px 48px, 48px 48px; }
}

/* --- Marca AP com respiro de luz tech --- */
.logo-mark,
.login-brandmark {
  animation: tech-breathe 3.6s ease-in-out infinite;
}
@keyframes tech-breathe {
  0%, 100% { box-shadow: 0 8px 22px -8px rgba(168, 85, 247, .7); }
  50% { box-shadow: 0 8px 22px -8px rgba(168, 85, 247, .7), 0 0 16px rgba(79, 227, 255, .45); }
}

/* --- Numeros / metricas: figuras tabulares + leve halo de dado --- */
.stat-card > strong,
.hero-health strong,
.billing-card strong,
.pix-amount strong {
  font-variant-numeric: tabular-nums;
}
.stat-card.featured > strong {
  text-shadow: 0 0 18px rgba(79, 227, 255, .25);
}

/* --- IPs / proxies / chaves: estetica de terminal (borda + tom ciano) --- */
.api-key-value,
.portal-code,
.secret-box,
#generated-proxies-text {
  border-left: 2px solid var(--tech-cyan-soft);
  font-variant-ligatures: none;
}
code { text-shadow: 0 0 12px rgba(79, 227, 255, .18); }

/* --- Pontos de status com pulso ciano (online/seguro) --- */
.top-status .pulse,
.secure-badge i,
.login-footer i,
.success-check {
  box-shadow: 0 0 0 0 rgba(79, 227, 255, .5);
  animation: tech-ping 2.6s ease-out infinite;
}
@keyframes tech-ping {
  0% { box-shadow: 0 0 0 0 rgba(79, 227, 255, .45); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(79, 227, 255, 0); }
}

/* --- Botao primario: brilho tech ao passar o mouse --- */
.button.primary { transition: box-shadow .25s ease, transform .15s ease; }
.button.primary:hover {
  box-shadow: 0 0 0 1px rgba(79, 227, 255, .35), 0 12px 30px -10px rgba(56, 189, 248, .55);
}

/* --- Cartoes de vidro: borda que acende no hover (HUD) --- */
.panel,
.stat-card,
.integration-card,
.setting-card,
.purchase-plan-card,
.capability-card {
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.panel:hover,
.integration-card:hover,
.setting-card:hover,
.capability-card:hover {
  border-color: rgba(79, 227, 255, .28);
  box-shadow: var(--shadow), 0 0 0 1px rgba(79, 227, 255, .12), 0 0 30px -6px rgba(56, 189, 248, .22);
}

/* --- Tabelas: cabecalho com leve linha tech --- */
.table-wrap table thead th {
  border-bottom: 1px solid rgba(79, 227, 255, .14);
}

/* Cards e linhas clicaveis do dashboard admin */
.is-clickable { cursor: pointer; }
.stat-card.is-clickable { transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease; }
.stat-card.is-clickable:hover { transform: translateY(-3px); border-color: rgba(79,227,255,.32); box-shadow: var(--shadow), 0 0 0 1px rgba(79,227,255,.16), 0 0 28px -6px rgba(56,189,248,.28); }
.activity-item.is-clickable { border-radius: 12px; transition: background .15s ease; }
.activity-item.is-clickable:hover { background: rgba(79,227,255,.07); }
.field-label { display: block; margin: 16px 0 6px; font: 700 11px/1 Sora; letter-spacing: 1.5px; text-transform: uppercase; color: #9b86b8; }

/* ===== Faturamento: moldura de Lucro Bruto / Margem ===== */
.profit-panel .panel-head { flex-wrap: wrap; gap: 14px; }
.cost-editor { display: flex; align-items: flex-end; gap: 10px; }
.cost-editor label { display: grid; gap: 5px; font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.cost-editor input { width: 120px; padding: 9px 12px; border: 1px solid var(--line-bright); border-radius: 11px; background: rgba(8,2,18,.6); color: #fff; font-variant-numeric: tabular-nums; }
.cost-editor input:focus { outline: none; border-color: rgba(79,227,255,.5); box-shadow: 0 0 0 3px rgba(79,227,255,.15); }

.profit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.profit-col { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)); display: grid; gap: 11px; transition: border-color .25s ease, box-shadow .25s ease; }
.profit-col:hover { border-color: rgba(79,227,255,.26); box-shadow: 0 0 0 1px rgba(79,227,255,.1), 0 0 26px -8px rgba(56,189,248,.2); }
.profit-col-head { display: flex; align-items: center; justify-content: space-between; font: 700 11px/1 Sora; letter-spacing: 1.5px; text-transform: uppercase; color: #b9a7d9; }
.profit-hero { display: grid; gap: 2px; padding: 12px 14px; border-radius: 13px; background: rgba(8,2,18,.45); border: 1px solid var(--line); }
.profit-hero small { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-2); }
.profit-hero strong { font: 800 24px/1.1 Sora; font-variant-numeric: tabular-nums; }
.profit-hero.pos strong { color: #34d399; text-shadow: 0 0 18px rgba(52,211,153,.3); }
.profit-hero.neg strong { color: #fb7185; }
.profit-bar { position: relative; height: 7px; border-radius: 999px; overflow: hidden; background: rgba(56,189,248,.12); }
.profit-bar .rev { position: absolute; inset: 0; background: linear-gradient(90deg, #34d399, #22d3ee); }
.profit-bar .cost { position: absolute; top: 0; left: 0; height: 100%; background: rgba(251,113,133,.65); }
.profit-line { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); }
.profit-line b { color: #efe6ff; font-variant-numeric: tabular-nums; }
.profit-line b.muted { color: #b9a7d9; }
.profit-line b.pos { color: #34d399; }
.profit-line b.neg { color: #fb7185; }
.profit-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.profit-foot { font-size: 11.5px; color: #9b86b8; }
.profit-foot b { color: #d8b4fe; }
.growth { font: 700 11px/1 Inter; padding: 3px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.growth.up { color: #34d399; background: rgba(52,211,153,.12); }
.growth.down { color: #fb7185; background: rgba(251,113,133,.12); }
.growth.flat { color: #9b86b8; background: rgba(255,255,255,.05); }
@media (max-width: 900px) { .profit-grid { grid-template-columns: 1fr; } }

/* ===================== Faturamento premium ===================== */
.text-pos { color: #34d399; } .text-neg { color: #fb7185; }

/* Moldura de lucro */
.profit-panel .panel-head { flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.profit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.profit-col {
  position: relative; padding: 18px; border-radius: 18px; display: grid; gap: 15px; overflow: hidden;
  border: 1px solid rgba(192,132,252,.16);
  background: linear-gradient(180deg, rgba(168,85,247,.07), rgba(255,255,255,.012) 38%, rgba(255,255,255,.012));
  transition: transform .2s ease, border-color .25s ease, box-shadow .3s ease;
}
.profit-col::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, #22d3ee, #a855f7); opacity: .7; }
.profit-col.is-neg::before { background: linear-gradient(90deg, #fb7185, #f59e0b); }
.profit-col:hover { transform: translateY(-3px); border-color: rgba(79,227,255,.34); box-shadow: 0 0 0 1px rgba(79,227,255,.12), 0 22px 50px -26px rgba(34,211,238,.5); }
.profit-col-head { display: flex; align-items: center; justify-content: space-between; font: 800 11px/1 Sora; letter-spacing: 1.6px; text-transform: uppercase; color: #c9b5dd; }
.profit-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profit-hero { display: grid; gap: 3px; min-width: 0; }
.profit-hero small { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted-2); }
.profit-hero strong { font: 800 28px/1.05 Sora; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.profit-hero strong.pos { color: #34d399; text-shadow: 0 0 22px rgba(52,211,153,.32); }
.profit-hero strong.neg { color: #fb7185; }
.profit-hero em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.profit-gauge { display: grid; justify-items: center; gap: 3px; flex: 0 0 auto; }
.profit-gauge .gauge-cap { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted-2); }
.gauge { display: block; }
.gauge-val { font: 800 13px/1 Sora; font-variant-numeric: tabular-nums; }
.profit-split { display: grid; gap: 9px; }
.split-bar { position: relative; height: 9px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); }
.split-bar .rev { position: absolute; inset: 0; background: linear-gradient(90deg, #34d399, #22d3ee); }
.split-bar .cost { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, rgba(251,113,133,.85), rgba(244,63,94,.7)); border-right: 2px solid rgba(255,255,255,.5); }
.split-legend { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.split-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.split-legend .lg i { width: 8px; height: 8px; border-radius: 3px; }
.split-legend .lg.rev i { background: #22d3ee; } .split-legend .lg.cost i { background: #fb7185; }
.split-legend b { color: #efe6ff; font-variant-numeric: tabular-nums; }
.profit-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted-2); }
.profit-meta b { color: #d8c8ee; font-variant-numeric: tabular-nums; }
.profit-foot { font-size: 11.5px; color: #9b86b8; padding-top: 2px; }
.profit-foot b { color: #d8b4fe; }
.growth { font: 700 11px/1 Inter; padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.growth.up { color: #34d399; background: rgba(52,211,153,.12); } .growth.down { color: #fb7185; background: rgba(251,113,133,.12); } .growth.flat { color: #9b86b8; background: rgba(255,255,255,.05); }

/* Editor de custo */
.cost-editor { display: flex; align-items: flex-end; gap: 10px; }
.cost-editor label { display: grid; gap: 5px; font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.cost-editor input { width: 118px; padding: 9px 12px; border: 1px solid var(--line-bright); border-radius: 11px; background: rgba(8,2,18,.6); color: #fff; font-variant-numeric: tabular-nums; }
.cost-editor input:focus { outline: none; border-color: rgba(79,227,255,.5); box-shadow: 0 0 0 3px rgba(79,227,255,.15); }

/* Consultar data (calendario) */
.day-query-panel .panel-head { flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.day-query-control { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.date-field { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line-bright); border-radius: 12px; background: rgba(8,2,18,.6); color: var(--lilac); }
.date-field svg { width: 17px; height: 17px; }
.date-input { border: none; background: transparent; color: #fff; font: inherit; font-variant-numeric: tabular-nums; color-scheme: dark; }
.date-input:focus { outline: none; }
.date-input::-webkit-calendar-picker-indicator { filter: invert(.7) sepia(1) saturate(4) hue-rotate(230deg); cursor: pointer; }
.selected-day-result { margin-top: 4px; }
.day-empty { padding: 22px; text-align: center; color: var(--muted-2); font-size: 13px; border: 1px dashed var(--line); border-radius: 14px; }
.day-card { padding: 18px; border-radius: 16px; border: 1px solid rgba(79,227,255,.2); background: radial-gradient(circle at 100% 0, rgba(34,211,238,.1), transparent 50%), rgba(8,2,18,.4); }
.day-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.day-badge { font: 800 14px/1 Sora; color: #0a0014; background: linear-gradient(135deg, #22d3ee, #a855f7); padding: 7px 12px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.day-weekday { color: #d8c8ee; font-size: 13px; text-transform: capitalize; }
.day-metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.day-metrics .dm { display: grid; gap: 3px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.day-metrics .dm small { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-2); }
.day-metrics .dm strong { font: 700 17px/1.1 Sora; font-variant-numeric: tabular-nums; }
.day-metrics .dm strong.muted { color: var(--muted); }
.day-metrics .dm.hero { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.25); }
.day-metrics .dm.hero.pos strong { color: #34d399; } .day-metrics .dm.hero.neg strong { color: #fb7185; }
@media (max-width: 1100px) { .day-metrics { grid-template-columns: repeat(3, 1fr); } }

/* Grafico de area (vendas) */
.billing-chart { height: 240px; }
.bill-area { width: 100%; height: 100%; display: block; }
.bill-area .grid-line { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.bill-area .area { stroke: none; }
.bill-area .line-rev { fill: none; stroke: url(#bcRev); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bill-area .line-prof { fill: none; stroke: #34d399; stroke-width: 2; stroke-dasharray: 4 4; stroke-linejoin: round; opacity: .9; vector-effect: non-scaling-stroke; }
.bill-area .pt { fill: #22d3ee; stroke: #0a0014; stroke-width: 1.5; }
.bill-area .axis-x { fill: var(--muted-2); font-size: 10px; font-family: Inter; }
.chart-empty { display: grid; place-items: center; height: 100%; color: var(--muted-2); font-size: 13px; }

/* Todas as vendas */
.all-sales-panel .panel-head { flex-wrap: wrap; gap: 14px; }
.sales-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.sales-chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-bright); background: rgba(255,255,255,.02); color: var(--muted); font: 600 12px Inter; cursor: pointer; transition: .18s ease; }
.sales-chip:hover { color: #efe2ff; border-color: rgba(79,227,255,.4); }
.sales-chip.active { color: #fff; background: linear-gradient(135deg, rgba(124,58,237,.5), rgba(168,85,247,.4)); border-color: rgba(168,85,247,.6); }
.sales-table tbody tr.is-clickable { cursor: pointer; transition: background .15s ease; }
.sales-table tbody tr.is-clickable:hover { background: rgba(79,227,255,.06); }
.sale-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font: 700 11px Inter; }
.sale-badge.paid { color: #34d399; background: rgba(52,211,153,.13); }
.sale-badge.pending { color: #fbbf24; background: rgba(250,204,21,.13); }
.sale-badge.cancelled { color: #c9b5dd; background: rgba(255,255,255,.06); }
.sale-badge.failed { color: #fb7185; background: rgba(251,113,133,.13); }
.sale-badge.expired { color: #9b86b8; background: rgba(120,100,150,.16); }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.pager-btn { padding: 8px 14px; border-radius: 11px; border: 1px solid var(--line-bright); background: rgba(255,255,255,.03); color: #d8c8ee; font: 600 12px Inter; cursor: pointer; transition: .18s ease; }
.pager-btn:hover:not(:disabled) { border-color: rgba(79,227,255,.45); background: rgba(168,85,247,.12); color: #fff; }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-info { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sale-details div { padding: 9px 0; }
.chart-legend-row { display: flex; gap: 16px; font-size: 11.5px; color: var(--muted); }
.chart-legend-row span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-row i { width: 16px; height: 3px; border-radius: 2px; }
.chart-legend-row i.rev { background: linear-gradient(90deg,#22d3ee,#a855f7); }
.chart-legend-row i.prof { background: repeating-linear-gradient(90deg,#34d399 0 4px,transparent 4px 8px); }

/* ============================================================
   MOBILE — refinamento completo (admin + portal do revendedor)
   Aplica regras da skill ui-ux-pro-max: toque >=44px, inputs >=16px
   (evita zoom iOS), tabelas roláveis, grids empilhados, modais que
   cabem na tela.
   ============================================================ */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px; }
  .button { min-height: 44px; }
  .button.small { min-height: 38px; }
  .nav-item { min-height: 46px; }
  .icon-button { width: 42px; height: 42px; }
  /* Tabelas do admin: rolam horizontalmente em vez de espremer */
  #resellers-table, .sales-table, #logs-table, .batches-table { min-width: 660px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 768px) {
  /* Cabeçalhos e controles do faturamento empilham e ocupam a largura */
  .profit-panel .panel-head,
  .day-query-panel .panel-head,
  .all-sales-panel .panel-head { flex-direction: column; align-items: stretch; }
  .cost-editor { width: 100%; }
  .cost-editor label { flex: 1 1 auto; }
  .cost-editor input { width: 100%; }
  .day-query-control { width: 100%; }
  .date-field { flex: 1 1 auto; }
  .sales-filter { width: 100%; }
  .sales-chip { flex: 1 1 auto; text-align: center; }
  .profit-grid { grid-template-columns: 1fr; }
  .day-metrics { grid-template-columns: 1fr 1fr; }

  /* Modais ocupam quase a tela inteira e rolam se forem altos */
  .modal, .modal.small-modal, .modal.wide { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 18px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .button { flex: 1 1 auto; justify-content: center; }
  .details-list div { font-size: 12px; }
}

@media (max-width: 480px) {
  .content { padding: 14px 12px 64px; }
  .billing-cards { grid-template-columns: 1fr 1fr; }
  .profit-hero strong { font-size: 24px; }
  .profit-top { gap: 10px; }
  .day-card-head { flex-wrap: wrap; }
  .stat-card > strong { font-size: 19px; }
  .pager { gap: 8px; }
  .pager-btn { flex: 1; text-align: center; }
  .chart-legend-row { flex-wrap: wrap; }
}