/* ─────────────────────────────────────────────────────────────────────────
 * La Plateforme — Cyberpunk Theme
 * Matches: polymarketaipredictions.com & voipclaw.com
 * Palette: deep midnight bg / neon cyan / hot magenta / acid lime
 * ──────────────────────────────────────────────────────────────────────── */

:root {
  --lp-bg:        #05050d;
  --lp-bg2:       #0a0a1e;
  --lp-bg3:       #11122a;
  --lp-border:    rgba(0, 255, 229, 0.18);
  --lp-border2:   rgba(255, 0, 170, 0.22);
  --lp-cyan:      #00ffe5;
  --lp-cyan2:     #00b8d4;
  --lp-magenta:   #ff2ec4;
  --lp-pink:      #ff5b8a;
  --lp-lime:      #b7ff3a;
  --lp-yellow:    #ffd400;
  --lp-text:      #e0e7ff;
  --lp-text2:     #c8d0f0;
  --lp-muted:     #5a6090;
  --lp-glow-cy:   0 0 22px rgba(0,255,229,0.55);
  --lp-glow-mg:   0 0 22px rgba(255,46,196,0.55);
  --lp-mono:      "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
}

/* ── Global background — neon midnight + scanlines ──────────────────────── */
html, body {
  background: var(--lp-bg) !important;
  color: var(--lp-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0,255,229,0.10), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(255,46,196,0.10), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(180deg, rgba(0,255,229,0.025) 0 2px, transparent 2px 4px);
}

/* ── Aimeos default storefront overrides ────────────────────────────────── */
.aimeos { color: var(--lp-text); }
.aimeos a { color: var(--lp-cyan); }
.aimeos a:hover { color: #fff; text-shadow: var(--lp-glow-cy); }

.aimeos h1, .aimeos h2, .aimeos h3, .aimeos h4 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
}
.aimeos h1 {
  font-size: 36px;
  background: linear-gradient(120deg, var(--lp-cyan), var(--lp-magenta));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

/* ── Cards / panels ──────────────────────────────────────────────────────── */
.aimeos .card,
.aimeos .product-item,
.aimeos .basket,
.aimeos .checkout-standard,
.aimeos .account-history,
.lp-card {
  background: linear-gradient(135deg, var(--lp-bg2), var(--lp-bg3)) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgba(0,255,229,0.04), 0 8px 30px rgba(0,0,0,0.55);
  position: relative;
  overflow: hidden;
}
.aimeos .product-item::before,
.lp-card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--lp-cyan), var(--lp-magenta), transparent);
  opacity: 0.7;
}
.lp-card--accent {
  border-color: var(--lp-border2) !important;
  box-shadow: 0 0 0 1px rgba(255,46,196,0.08), 0 12px 40px rgba(255,46,196,0.12);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.aimeos .btn,
.aimeos button[type=submit],
.aimeos input[type=submit],
.lp-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--lp-cyan);
  background: linear-gradient(135deg, var(--lp-cyan), var(--lp-cyan2));
  color: #001016 !important;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
  box-shadow: var(--lp-glow-cy);
}
.aimeos .btn:hover,
.lp-btn:hover { transform: translateY(-1px); filter: brightness(1.15); box-shadow: 0 0 38px rgba(0,255,229,0.85); }

.lp-btn--ghost {
  background: rgba(0,255,229,0.07) !important;
  color: var(--lp-cyan) !important;
  box-shadow: none;
}
.lp-btn--ghost:hover { background: rgba(0,255,229,0.18) !important; }

.lp-btn--primary {
  background: linear-gradient(135deg, var(--lp-magenta), var(--lp-pink)) !important;
  border-color: var(--lp-magenta) !important;
  color: #fff !important;
  box-shadow: var(--lp-glow-mg);
}
.lp-btn--primary:hover { box-shadow: 0 0 40px rgba(255,46,196,0.85); }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.aimeos input[type=text], .aimeos input[type=email], .aimeos input[type=password],
.aimeos input[type=number], .aimeos select, .aimeos textarea,
.lp-topup-row input {
  background: rgba(5,5,15,0.85) !important;
  border: 1px solid var(--lp-border) !important;
  color: var(--lp-text) !important;
  padding: 11px 14px;
  border-radius: 6px;
  font-family: var(--lp-mono);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.aimeos input:focus, .lp-topup-row input:focus {
  border-color: var(--lp-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,255,229,0.18);
}

/* ── Product grid ────────────────────────────────────────────────────────── */
.aimeos .catalog-list .product-item {
  padding: 14px;
  transition: transform 0.18s ease, border-color 0.2s ease;
}
.aimeos .catalog-list .product-item:hover {
  transform: translateY(-2px);
  border-color: var(--lp-magenta) !important;
}
.aimeos .catalog-list .product-item img {
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.aimeos .catalog-list .product-item .price {
  color: var(--lp-lime);
  font-family: var(--lp-mono);
  font-weight: 800;
  text-shadow: 0 0 12px rgba(183,255,58,0.5);
}

/* ── Wallet UI ──────────────────────────────────────────────────────────── */
.lp-shell { max-width: 1180px; margin: 0 auto; padding: 40px 22px; }
.lp-grid  { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 980px) { .lp-grid { grid-template-columns: 0.9fr 1.1fr; } }

.lp-card { padding: 28px 30px; }
.lp-card-eyebrow {
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--lp-cyan);
  text-shadow: 0 0 10px rgba(0,255,229,0.5);
  margin-bottom: 12px;
}
.lp-balance {
  font-family: var(--lp-mono);
  font-size: 56px;
  line-height: 1;
  font-weight: 800;
  background: linear-gradient(120deg, var(--lp-cyan), var(--lp-magenta));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}
.lp-balance-meta {
  display: flex; gap: 22px; flex-wrap: wrap;
  font-size: 12px; color: var(--lp-muted); margin-bottom: 22px;
  font-family: var(--lp-mono);
}
.lp-balance-meta strong { color: var(--lp-text); }

.lp-topup-form { margin-top: 18px; }
.lp-topup-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.lp-topup-presets .lp-btn { padding: 9px 16px; font-size: 12px; }
.lp-topup-custom label {
  display: block; font-size: 11px; letter-spacing: 0.14em;
  color: var(--lp-muted); margin-bottom: 6px;
  font-family: var(--lp-mono); text-transform: uppercase;
}
.lp-topup-row { display: flex; gap: 8px; }
.lp-topup-row input { flex: 1; }
.lp-fineprint { color: var(--lp-muted); font-size: 11px; margin-top: 14px; line-height: 1.5; }
.lp-error { color: var(--lp-pink); font-size: 12px; margin-top: 10px; }

/* ── Ledger table ───────────────────────────────────────────────────────── */
.lp-ledger { width: 100%; border-collapse: collapse; font-size: 12px; }
.lp-ledger th, .lp-ledger td {
  text-align: left; padding: 10px 8px;
  border-bottom: 1px solid rgba(0,255,229,0.07);
}
.lp-ledger th {
  font-family: var(--lp-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--lp-muted);
  text-transform: uppercase;
}
.lp-ledger td.num { text-align: right; font-family: var(--lp-mono); }
.lp-credit { color: var(--lp-lime); text-shadow: 0 0 10px rgba(183,255,58,0.45); }
.lp-debit  { color: var(--lp-pink); text-shadow: 0 0 10px rgba(255,91,138,0.4); }
.lp-hold   { color: var(--lp-yellow); }
.lp-empty  { text-align: center; padding: 30px; color: var(--lp-muted); }

.lp-pill {
  display: inline-block;
  font-family: var(--lp-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,255,229,0.10);
  color: var(--lp-cyan);
  border: 1px solid rgba(0,255,229,0.3);
}
.lp-pill--purchase     { background: rgba(255,91,138,0.10); color: var(--lp-pink); border-color: rgba(255,91,138,0.35); }
.lp-pill--vendor_credit{ background: rgba(183,255,58,0.10); color: var(--lp-lime); border-color: rgba(183,255,58,0.35); }
.lp-pill--platform_fee { background: rgba(255,212,0,0.12); color: var(--lp-yellow); border-color: rgba(255,212,0,0.35); }

/* ── Top nav (Aimeos default header) ─────────────────────────────────────── */
.aimeos .header,
header.header,
nav.navbar,
.aimeos-header {
  background: linear-gradient(180deg, var(--lp-bg2), var(--lp-bg)) !important;
  border-bottom: 1px solid var(--lp-border) !important;
  box-shadow: 0 0 30px rgba(0,255,229,0.06);
}
.aimeos .header a, nav.navbar a { color: var(--lp-text) !important; }
.aimeos .header a:hover { color: var(--lp-cyan) !important; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.aimeos footer, footer {
  background: var(--lp-bg) !important;
  border-top: 1px solid var(--lp-border) !important;
  color: var(--lp-muted) !important;
}