/* ====== SpicyProxies UI v4 (light + purple) ====== */
:root{
  --accent:#6D28D9;
  --accent-weak: color-mix(in srgb, var(--accent) 12%, white);
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F9FAFB;
  --line:#E5E7EB; --text:#111827; --muted:#475569;
  --ok:#16A34A; --warn:#F59E0B; --bad:#EF4444; --info:#2563EB;

  --radius:16px; --radius-sm:12px;
  --shadow:0 10px 28px rgba(2,6,23,.06);
  --fs:15px; --fs-sm:13px;
  --h1:clamp(28px,3.4vw,48px);
  --h2:clamp(20px,2vw,26px);
}

/* ===== reset ===== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 var(--fs)/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,p{margin:0 0 10px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== layout helpers ===== */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.center-narrow{max-width:980px;margin:0 auto}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-center{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(280px,420px));justify-content:center}
@media (max-width:900px){.grid-3,.grid-2,.grid-center{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.hr{border:0;border-top:1px solid var(--line);margin:12px 0}
.badge{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:12px;color:#334155;background:#fff}
.small{color:var(--muted);font-size:var(--fs-sm)}
.price{font-weight:900;font-size:22px}
.price-xl{font-weight:900;font-size:28px}

/* inputs & buttons */
.input,select,textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--line);
  color:var(--text);border-radius:12px;padding:10px;transition:border .15s, box-shadow .15s;
}
.input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(109,40,217,.18);outline:none}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236b7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border:0;border-radius:12px;background:var(--accent);
  color:#fff;font-weight:800;cursor:pointer;text-decoration:none;transition:transform .04s ease, box-shadow .15s;
}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--text)}
.btn.light{background:#fff;color:var(--text);border:1px solid var(--line)}
.btn.small{padding:8px 10px;font-size:var(--fs-sm)}
.btn.icon{gap:6px}
.btn.pill{border-radius:999px}
.btn.gray{background:#F3F4F6;color:#111827;border:1px solid var(--line)}
.btn.green{background:#16A34A}

/* toolbar (filters / actions) */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.toolbar .group{display:flex;gap:10px;align-items:center}

/* ===== NAVBAR ===== */
.nav{
  position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 2px 18px rgba(2,6,23,.04);
}
.nav-inner{
  height:70px;display:grid;gap:10px;align-items:center;
  grid-template-columns:220px 1fr 220px;
}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:900}
.logo{width:30px;height:30px;border-radius:10px;background:var(--accent)}
.menu{display:flex;justify-content:center;gap:10px}
.menu a,.dropbtn{
  padding:8px 14px;border-radius:999px;font-weight:800;color:#374151;border:1px solid transparent;background:transparent;
}
.menu a:hover,.dropbtn:hover{border-color:var(--accent);background:var(--accent-weak);color:var(--accent)}
.menu a.active{background:var(--accent);color:#fff}
.nav-actions{display:flex;justify-content:flex-end;gap:10px}
.btn-nav{padding:9px 14px;border-radius:999px;border:1px solid var(--line);font-weight:800;background:#fff}
.btn-cta{background:var(--accent);color:#fff;border:0}

/* dropdown */
.dropdown{position:relative;display:inline-block}
.dropbtn{cursor:pointer}
.dropdown-panel{
  display:none;position:absolute;top:110%;left:50%;transform:translateX(-50%);
  min-width:520px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:14px;box-shadow:0 14px 32px rgba(2,6,23,.18);z-index:1000;
}
.dropdown:hover .dropdown-panel{display:block}
.pricing-teaser{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.teaser-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff}
.teaser-card h4{margin:0 0 4px;font-size:16px;color:var(--accent)}
.teaser-card p{margin:0 0 6px;font-size:13px;color:#4b5563}
.teaser-card .pstrong{font-weight:900}

/* ===== Sections ===== */
.hero{padding:60px 0 34px;text-align:center}
.h1{font-size:var(--h1);font-weight:900}
.h2{font-size:var(--h2);font-weight:900}
.sub{color:var(--muted)}
.section{padding:42px 0}

/* ===== Table ===== */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow)}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{
  position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);
  text-align:left;padding:12px 14px;font-size:13px;color:#374151
}
.table tbody td{border-top:1px solid var(--line);padding:12px 14px;font-size:14px}
.table tbody tr:first-child td{border-top:0}
.badge-soft{
  display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;
  background:#EEF2FF;color:#4338CA;border:1px solid #E0E7FF
}
.badge-soft.green{background:#ECFDF5;color:#065F46;border-color:#D1FAE5}
.badge-soft.gray{background:#F3F4F6;color:#374151;border-color:#E5E7EB}

/* pagination */
.pagination{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:10px}
.pagination .btn{padding:8px 10px}

/* badges de métricas */
.metric{font-weight:800}
.metric.ok{color:#16A34A}
.metric.warn{color:#F59E0B}

/* footer */
.footer{border-top:1px solid var(--line);padding:18px 0;background:#fff;text-align:center;color:var(--muted);font-size:13px}
.footer a{color:var(--accent);font-weight:700}